Buenas:
Y quedaria así:
Hoy os voy a enseñar como escribir diferentes tipos de listas en html 5, listas sin orden, listas por orden alfabético, numeral.... también os voy a enseñar sobre como poner links a otras paginas, o bien a otros html que tengáis en vuestro ordenador
Este es el texto:
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<ul>
<li> cafe</li>
<li> te </li>
</ul>
<ol>
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>
<a href="http://www.elpais.com" target="_blank">click aqui</a>
<a href="./listas.html" target="_blank">click aqui2</a>
</body>
</html>
Y quedaria así:
Línea 1: El doctipe para que el navegador reconozca de que estas hablando
Línea 2: Abrimos la etiqueta html
Línea 3: Abrimos la etiqueta body (como se habrán fijado, en este documento no he puesto etiqueta <head>, esta etiqueta es obligatoria, si no la pones el documento esta mal, pero el navegador entiende que se te ha olvidado y lo lee igual, poniéndote de titulo (etiqueta <title> dentro de <head>, lo vimos en el documento anterior) el nombre del documento html
Línea 4: abrimos la lista, esta tiene la característica de que después de cada elemento le puedes poner una descripción, la etiqueta de este tipo de listas es <dt> para los elementos y <dd> para las descripciones, cerrando como siempre con una barra, para abrir este tipo de listas esta la etiqueta <dl>, de forma que queda así:
<dl> (abrimos lista)
<dt>elemento 1</dt>
<dl> descripción 1</dl>
y así sucesivamente con el numero de descripciones por elemento que queramos
......
Línea 11: La etiqueta <ul> abre la lista desordenada, básicamente es una lista con puntos, como se ve arriba, cada elemento va rodeado por la etiqueta <li>, y al finalizar la lista cerramos <ul>
.....
Línea 16: Esta etiqueta es la que abre las listas ordenadas, en este caso es una lista por números, el primer elemento tendrá un 1, el segundo un 2 y así sucesivamente, el inicio de la lista es con <ol> y cada elemento va rodeado de la etiqueta <li>
Si quisiéramos variar esto y que en vez de números fuesen letras mayúsculas por ejemplo, le tendríamos que poner un atributo, un atributo es una cualidad que modifica una etiqueta, de forma que quedaría así
<ol type="A">
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>
Como podeis ver el atributo es type="A" y va dentro de las <> pues modifica lo de dentro, en este caso modifica que en vez de 1 2 3 la lista sea A B C.... si quisieramos que fuesen numeros romanos seria:
<ol type="I">
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>
.........
Línea 22: Esta etiqueta es bastante mas completa que las anteriores y la seguiremos viendo mas adelante pues tiene varios usos mas, la etiqueta es <a>, y tiene el atributo href, por lo que la etiqueta queda así:
<a href="Pagina a la que queremos referirnos.com">Texto donde estará el enlace</a>
Si lo dejamos así, cuando hagas clic al abrirlo con el navegador, te rediccionará a la pagina desde la misma pestaña en la que estas, si queremos que lo habrá en una nueva pestaña hay que ponerle un atributo mas que es target="_blank" de forma que quedaría así:
<a href="Pagina a la que queremos referirnos.com" target="_blank">Texto donde estará el enlace</a>
Línea 23: Esta etiqueta es la misma que la de arriba, solo que en vez de buscar una pagina externa, buscara una pagina en nuestro ordenador, os vale cualquier otro documento .html que hayáis hecho, de forma que queda así
<a href="./listas.html" target="_blank">click aqui2</a>
<a (para abrir la etiqueta) href= (atributo) "./listas.html" (Esto quiere decir, desde donde esta guardado este documento, busca el archivo llamado listas.html) ./ es la carpeta donde esta guardado tu documento html, si quisiéramos que entrase en una carpeta seria así:
<a href="./carpeta1/listas.html"
Si quisiéramos que retrocediese una carpeta seria así:
<a href="../carpeta2/listas.html"
El resto ya lo conocemos de la etiqueta anterior, target="_blank" para que abra el link en una nueva pestaña, click aqui2 es el texto que se vera, y </a> para cerrar la etiqueta
....
Luego ya cerramos body y html
Por ultimo comentar, que si se os ve con letras raras vuestro documento html cuando lo ponéis en el navegador, es por la codificación de vuestro navegador, en chrome tenéis que hacer lo siguiente: Abrir el panel de la derecha, bajar hasta mas herramientas, codificación y darle a Unicode(UTF8), que es la codificación de todas las paginas web.
En firefox es parecido
Un saludo, y cualquier duda la responderé en cuanto pueda
No hay comentarios:
Publicar un comentario