Buenas, para los que van un poco perdido por la cantidad de etiquetas que vamos sumando no se preocupen, en esta publicación, un tanto demorada, pero iremos mas lento.
Aprendimos que para definir una web en html 5 lo hacemos de esta forma:
indicamos que es un documento html 5:
<!DOCTYPE html>
indicamos que es en español:
<html lang="es">
iniciamos la cabecera:
<head>
indicamos la codificación:
<meta charset="utf-8"/>
y le ponemos un título:
<title>Mi primera web en html5</title>
hasta aquí toda la cabecera.
</head>
iniciaremos entonces a armar el cuerpo, ponemos la apertura:
<body>
y aprendimos que la etiqueta <nav> es para poner un menú.
si ponemos los links uno debajo del otro es probable que queden todos juntos si cometemos este error:
<nav>
<a href="http://www.google.com.ar">google</a>
<a href="archivo1.html">documento 1</a>
<a href="archivo2.html">documento 2</a>
</nav>
para corregir esto, se agrega al final un <br> para bajar a la línea de abajo, de esta forma:
<nav>
<a href="http://www.google.com.ar">google</a><br>
<a href="archivo1.html">documento 1</a><br>
<a href="archivo2.html">documento 2</a><br>
</nav>
en el post anterior, no lo puse, para ver quien se daba cuenta de este detalle. sean creativos, prueben meter código por aquí, por allá y vean que pasa.
hoy aprenderemos a crear listas, para que el menu quede mas ordenado. para definir una lista se hace con la etiqueta <ul>
apertura: <ul>
cierre: </ul>
y cada item va entre las etiquetas <li> </li>
vamos a poner como ejemplo el menú anterior pero en una lista:
<nav>
<ul>
<li><a href="http://www.google.com.ar">google</a></li>
<li><a href="archivo1.html">documento 1</a></li>
<li><a href="archivo2.html">documento 2</a></li>
</ul>
</nav>
esta lista se puede numerar y acomodar de varias formas, pero por lo pronto solo practicaremos crearlas.
el código completo de todo el documento es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi primera web en html5</title>
</head>
<body>
<nav>
<ul>
<li><a href="http://www.google.com.ar">google</a></li>
<li><a href="archivo1.html">documento 1</a></li>
<li><a href="archivo2.html">documento 2</a></li>
</ul>
</nav>
<article>
<h2>Aqui va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
</body>
</html>
lo pueden ver en ejecución
en este link
ejercicio:
1. Crear un cuento donde te permita elegir opciones de como seguir y poner dichas opciones en una lista al final del texto.
2. crear una página de presentación del cuento con un menú superior con las opciones:
* ir al cuento
* datos del autor.
mas sobre los links:
en clases anteriores aprendimos de la etiqueta <a> que es para crear link, y el atributo href que es para indicar la ruta del link.
dicha ruta puede ser:
absoluta: indicando toda la URL completa.
<a href="http://www.google.com">ir a google</a>
o relativa: indicando solo el nombre del archivo a quien quieres linkear.
<a href="documento2.html">ir al documento 2</a>
pero también hay otras opciones, como linkear a una cuenta de mail, ejemplo:
<a href="mailto:escribime@dominio.com">contactame</a>
o llamadas a funciones especiales que veremos mas adelante.
ejercicio:
1. agregar en el cuento anterior, en la zona de contacto un link con su dirección de e-mail para ser contactado.
El html son muchas etiquetas pero no hay que acordarse todas, solo hacer un resumen de ellas y practicarlas.
los espero en la próxima clase!.
No hay comentarios:
Publicar un comentario