Códigos
| Código | Resultado |
| <b>Letra en Bold</b> | Letra en Bold |
| <i>Letra en Italic</i> | Letra en Italic |
| <u>Letra Subrayada</u> | Letra Subrayada |
| <center>Texto centralizado</center> | |
| <hr> = Produce una línea | |
| <img src="http://www.blogger.com/ img/logo40.gif"> |  |
| <a href="http://www.blogger.com"> Blogger.com</a> | Blogger.com |
| <marquee>Texto en movimiento</marquee> | |
| <br>Rompe<br>Líneas | Rompe Líneas |
Líneas
Código: <hr>
Resultado:
Para adjudicar color y tamaño a la linea solo debes añadir los siguientes códigos:
Código: <hr color="blue" size=3>
Resultado:
Otros estilos que podemos adjudicar a las líneas pueden hacerse utilizando el código de "width" para indicar el largo de la línea. De no indicar este código la línea se ajustará automaticamente al largo de la página de internet. Veamos el siguiente ejemplo:
Código: <hr color="green" size=1 width="150">
Resultado:
Letras
| Código: | Resultado: |
| <b>Letra en Bold</b> | Letra en Bold |
| <i>Letra en italica</i> | Letra en italica |
| <u>Letra subrayada</u> | Letra subrayada |
Además de estos estilos existen otros códigos para adjudicar diferentes tamaños, colores y formas. Veamos el siguiente ejemplo:
| Código: | Resultado: |
| <font face="Arial" color="orange" size=1>El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño (size) debe ser "1"</font> | El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño (size) debe ser "1" |
Otros tipos de letras que se pueden utilizar son "Tahoma", "Comic Sans", "Impact", "Verdana"; otros tipos de colores que se pueden utilizar son "green" (verde), "yellow" (amarillo), "blue" (azul), "gray" (griz); y para aumentar el tamaño (size) de las letras solo debes aumentar el número dentro del código y listo.
Recuerda que para los códigos tengan efecto debes escribirlos exactamente como aparecen aquí. Si te sirve de ayuda solo copia y pega (copy paste) los códigos de ejemplos en un editor de texto para que vayas practicando.
Tablas
Código:
<table border=1><td>Aqui va el contenido de la tabla, texto, imágenes, etc.</td></table>
Resultado:
| Aqui va el contenido de la tabla, texto, imágenes etc. |
El número uno se refiere al tamaño del borde de la tabla. Si aumentas el número el borde será mas grueso y si escribes 0 la tabla no mostrará borde alguno.
Además de una simple tabla podemos adjudicar varios códigos para obtener una tabla dividida en columnas y encasillados. Veamos los siguientes ejemplos.
Código:
<table border=1><td>Columna #1</td><td>Columna #2</td></table>
Resultado:
| Columna #1 | Columna #2 |
Fíjate que antes de cerrar la tabla con el código de </table> añadimos un set de códigos <td></td> para insertar la seguna columna. ¿Pero que tal si queremos añadir contenido debajo de estas columnas? Veamos el siguiente ejemplo:
Código:
<table border=1><td>Columna #1</td><td>Columna #2</td><tr><td>Contenido Bajo Columna#1<td>Contenido Bajo Columna#2</td></table>
Resultado:
| Columna #1 | Columna #2 |
| Contenido Bajo Columna#1 | Contenido Bajo Columna#2 |
Si queremos añadir más columnas o encasillados solo tenemos que añadir más códigos <td></td> para columnas y <tr> para encasillados. Fíjate que para añadir encasillados no tienes que cerrar el código <tr>, solo lo escribes donde quieres que vaya el espacio y listo.
Otro efecto que podemos aplicar a una tabla es el color de los bordes de la tabla y el color de fondo. Esto se hace añadiendo los códigos de <bordercolor="red"> para el color de borde y <bgcolor="black"> para el color de fondo. Veamos el siguiente ejemplo:
Código:
<table border=1 bordercolor="silver" bgcolor="black"><td><font color="white">Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font color) es blanco</font></td></table>
Resultado:
| Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font color) es blanco |
Solo cambia las propiedades de los códigos para obtener otros resultados.
Enlaces
Código:
<a href="http://www.djerexd.blogspot.com">
www.djerexd.blogspot.com</a>
Resultado: www.djerexd.blogspot.com
Lo que esta dentro de "a href=" se refiere a la dirección donde va dirigido el enlace y lo que esta antes de </a> es el nombre del enlace. Recuerda que debes cerrar el código al final utilizando el código original y una diagonal (/) antes del mismo.
Imágenes
Código:
<img src="http://www.blogger.com/img/logo40.gif">
Resultado:
Fíjate que la dirección URL se refiere a la dirección en el internet donde se encuentra publicada la imágen. Esta debe estar publicada en los archivos de tu web o en algún servicio de alojamiento de imágenes como imageshack para que puedas incluirla en tu web.
Para saber la dirección URL o nombre de una imágen ya publicada en el internet debes hacer un click derecho (right-click) sobre la imágen y seleccionar la opción de propiedades (properties) y ahí verás la dirección URL. Si haces esto en la imágen anterior la dirección que debes ver es la siguiente.
Dirección: http://www.blogger.com/img/logo40.gif
Ahora, para que la imágen sea adjudicada por el editor de texto debes incluir la dirección URL dentro del código de <img src=""> como explica el ejemplo anterior.
Coloca el código donde quieras que se vea la imágen dentro de la página y listo.
Un efecto que podemos añadir a una imágen es el de hacer click sobre esta para que nos lleve a otro lugar. Al igual que enlazamos un texto (Ver tópico de enlaces) podemos enlazar una imágen. Veamos el siguiente ejemplo:
Código:
<a href="http://www.blogger.com"><img src="http://www.blogger.com/img/logo40.gif"></a>
Resultado:
Si colocamos el apuntador del mouse sobre la imágen y hacemos click, esta nos llevará a la dirección indicada en el código de <a href=>.
Otro efecto que podemos adjudicar a una imágen es el de posición. Para posicionar una imágen dentro de una página de internet solo debes añadir el siguiente código.
Código:
<center><img src="http://www.blogger.com/img/logo40.gif"></center>
Resultado:
La imágen debe verse centralizada al añadir el código de <center>
Para izquierda o derecha puedes cambiar el código de center por <right> para derecha y <left> para izquierda.
Colores
Clasificación de colores por nombre:
| red | yellow | blue |
| green | black | lime |
| gray | white | orange |
Clasificación de colores por codificación:
| #FF3300 | #FFFF66 | #3333FF |
| #339933 | #000000 | #33FF00 |
| #999999 | #FFFFFF | #FF9933 |
Recuerda escribir el símbolo de (#)antes de la codificación de color por número, sin dejar espacios para que el código tenga efecto. Para una lista de clasificación de colores por codificación ver el siguiente enlace: html-color-codes.com.
FX
Código:
<marquee scrolldelay="700" scrollamount="400">
<font color="red"><b>Texto en forma de Blink</b></font>
</marquee>
Resultado: (solo en IE)
Código:
<iframe src="http://www.blogger.com"></iframe>
Resultado: Este código nos permite colocar una página de internet dentro de una pequeña pantalla, así:
Solo cambia la dirección URL de la página que quieres mostrar. Tambien puedes añadir elementos tales como el "width" para el ancho de la pantalla y el "height" para la altura de la pantalla.
Código:
<table border=1 width=100 bgcolor="silver"><td bgcolor="white"><marquee behavior="scroll" scrollamount=2 direction="up" height="50"><font color="orange">Esto es una pequeña pantalla que muestra un mensaje en dirección hacia arriba. El mismo se hace modificando uno de los códigos que hemos visto aquí, marquee.</font></marquee></td></table>
Resultado:
Modifica las propiedades para obtener resultados diferentes.
Scripts
Script:
<meta http-equiv="Refresh"
content="5;url=http://www.blogger.com">
Descripción:
Al colocar este en una página de internet, el mismo redirigirá en 5 segundos a la página de internet que se indica en la dirección de URL. Content= al tiempo en segundos.
Script:
<style>
<!--
BODY{
scrollbar-face-color:'green';
scrollbar-arrow-color:'yellow';
scrollbar-track-color:'red';
scrollbar-shadow-color:'red';
scrollbar-highlight-color:'gray';
scrollbar-3dlight-color:'silver';
scrollbar-darkshadow-Color:'silver';
}
-->
</style>
Descripción: (solo en IE)
Cambia el color de las barras scroll (ScrollBars) en una página de internet. Modifica los colores a tu gusto y listo.
Script:
<SCRIPT LANGUAGE="javascript">
var getin = prompt("Acceso Denegado!!! - Necesitas un Password para poder entrar")
if (getin!="clave3577")
{location.href='http://www.blogger.com'}
else
{alert('Acceso Permitido - Entra')}
</SCRIPT>
Descripción:
Crea una forma de entrada a la página a través de una clave secreta. Cambia lo que está en rojo para más opciones. El texto en rojo (clave3577) es la clave de ingreso a la página.
Script:
<style type="text/css">
<!--
A{text-decoration:none}
-->
</style>
Descripción:
Elimina las líneas debajo de un enlace.
Script:
<script language="JavaScript">
<!--
window.status = "HTML Básico para aficionados";
-->
</script>
Descripción:
Crea un mensaje en la barra de status donde originalmente dice (Done) ó (Opening
page)
display: none;
0 comentarios:
Publicar un comentario