Siguiendo con los post de como crear su propia página en html les dejo la tercera parte, es posible que acá empiecen a tener un poco más de dificultades, pero tengan paciencia, de apoco va a ir saliendo.
-Resumenes de los post anteriores:
-Parte I: Acá les dejo como nos quedaria nuestra página web luego del primer post.
<HTML>
<HEAD>
<TITLE>Titulo de tu página web</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página</H1>
<!-- Aqui va un comentario que no es
interpretado por el navegador -->
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
-Parte II: Si hicimos todo bien, hasta ahora tendriamos lo siguiente en nuestra página web, si no recordas, o no entendes algo te recomiendo que vuelvas a leer el post anterior:
<HTML>
<HEAD>
<TITLE>Titulo de tu página web</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>
<A HREF="http://www.disney.com/">Ir a WebEstilo</A><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
Ahora si comenzamos con la tercera parte:
Hoy les voy a enseñar tres cosas: A) Crear enlaces con una dirección de email, es decir, que al hacer click permitan a quién quiera contactarte poder enviarte un email a tu casilla de correo. B) Crear listas. C) Crear lineas divisorias.
Comencemos entonces:
a)Enlaces a tu dirección de email:
Vamos a usar la etiqueta de siempre para los enlaces; <A HREF "tu enlace"> ... </A> solo que esta vez vamos a modificarla para que en lugar de llevarnos a un enlace nos permita mandar un mail, ¿Como? Pues es muy sencillo debemos agregar la orden "mailto". Es decir que nuestra etiqueta nos quedaría de la siguiente manera: <A HREF="mailto:[email protected]">mailto [email protected] </A>.
b) Crear listas:
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con etiquetas distintas aunque con alguna en común:
1. Listas numeradas u ordenadas: Se engloban por las etiquetas <ol>.....</ol> y cada elemento de la lista estará encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
2. Listas con viñetas o sin orden: Se engloban por las etiquetas <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la etiqueta <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
3. Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
Menú: Englobadas por las etiquetas <menu>.....</menu> y cada elemento encabezado por la etiqueta <li>.
Directorio: Englobadas por las etiquetas <dir>.....</dir> y cada elemento encabezado por la etiqueta <li>.
4. Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia etiqueta. Estas listas se engloban con las etiquetas <dl>.....</dl>. Para el término se usa la etiqueta <dt> y para la definición la etiqueta <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la etiqueta de apertura el atributo compact: <dl compact>.
5. Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las etiquetas: Las etiquetas de la lista principal englobarán todo el conjunto de las listas y las etiquetas de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
c) Crear lineas divisorias:
Se crean con la etiqueta <hr> que no tiene etiqueta de cierre ni lleva texto asociado. Se puede especificar el ancho de la línea con el siguiente atributo
<hr width="80%">.
Si te quedaron dudas, tenes alguna sugerencia o necesitas ver algunos ejemplos más no dudes en dejarme un mensaje!
Si te gusto el post seguime en facebook