Aquí una lista de los códigos que más se utilizan para crear una página de internet y sus resultados. Algunas modificaciones a estos códigos pueden obtenerse viendo los enlaces de información.
| 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 |
LINEAS
Para insertar una línea en una página de internet solo debes incluir el siguiente código:
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
Para aplicar diferentes tipos ó estilos de letras se pueden utilizar una varieda de códigos. Los siguientes códigos muestran varios ejemplos de como lograr esto y sus resultados.
| 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
Para insertar una tabla en una página de internet debes incluir el código que aparece a continuación. Este puede ser modificado para obtener diferentes resultados y estilos de 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
Para insertar un enlace (Links) en una página de internet debes añadir el siguiente código.
Código:
<a href="http://www.daleclick.blogspot.com">
www.daleclick.blogspot.com</a>
Resultado: http://www.daleclick.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.
IMAGENES
Para insertar una imágen en una página de internet debes utilizar el siguiente código:
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
Existen 2 formas para adjudicar colores en una página de internet. Una de ellas es a través de los códigos de colores por nombre (blue, yellow, red, etc.) y la otra es a través de codificaciónes (#000000 = blanco #ffffff = negro #999999 = griz). Veamos las siguientes 2 tablas de ejemplos y sus resultados.
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
Algunos códigos de HTML se pueden modificar para obtener ciertos efectos especiales como los "scripts". Estos se colocan en cualquier parte de la página donde se quiera lograr el efecto como cualquier código de HTML. Veamos algunos ejemplos:
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
Los llamados "Scripts" son formas de texto que se le añaden a una página de internet para crear un efecto en específico. La mayoría de estas formas deben ser colocados entre las propiedades de <head> y </head> del código HTML de la página. Recuerda que con solo copiar y pegar (copy-paste) los códigos es suficiente, solo debes modificarlos a tu gusto. Veamos los siguientes ejemplos:
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)
No hay comentarios:
Publicar un comentario