Hemos llegado a la clase 4, a cumplir un mes con estas clases de html, gracias por leerlas y seguirlas.
En las clases anteriores aprendimos a armar un documento html, a reconocer su encabezado, cuerpo, a acomodar párrafos, poner links y poner títulos. Todavía le falta colores a nuestra página, pero ya llegaremos a esos detalles. Lo importante es aprender a reconocer las etiquetas y ver al html como lenguaje.
Hoy aprenderemos sobre html 5.
Durante el crecimiento de internet todo se a mejorado, y por lo tanto los lenguajes tuvieron que hacer lo mismo. Así fueron evolucionando y lo que estuve enseñando fueron etiquetas del html 4. Actualmente se utiliza el html 5, que es la mejora de este lenguaje, donde muchas cosas se repiten y se agregan nuevas, para hacer mas semántico el lenguaje. ¿A que nos referimos con semántico?: que es un lenguaje mas natural, con mas significado.
Durante la era del html 4 podrías poner los link arriba, al medio o a un costado y los programas jamás pueden saber que es contenido o que es menú. Entonces el html 5 lo que define es con nuevas etiquetas de que se trata el contenido de lo que estamos colocando. Quizás esas definiciones mareen un poco ahora, pero vamos a verlo con ejemplos.
aprendamos primero como se define un documento html 5:
Lo fundamental es indicar al inicio del documento que realizaremos un documento html 5, y para ello colocaremos esta cadena:
<!DOCTYPE html>
Cada vez que el navegador encuentre eso en la primera línea ya sabrá que estás trabajando con un documento html 5, luego el resto es totalmente igual, tendrás la cabecera, cuerpo y todo lo demás que ya hemos aprendido.
Es importante que en la segunda línea indiquemos el idioma de nuestra página, y para ello lo haremos con la siguiente línea:
<html lang="es">
lan de languaje (lenguaje en inglés), y "es" de español. con eso indicamos que el lenguaje de nuestra página es español. estas 2 líneas son fundamentales.
Además es bueno que indiquemos la codificación del texto, y para ello pondremos la siguiente línea dentro de la cabecera:
<meta charset="utf-8"/>
con esto indicamos que el texto es en codificación utf-8.
¿Qué es una codificación?: esto sería con que forma estamos escribiendo el texto, por lo general esta es la internacional, de esta forma aparecerán los acentos, las ñ y otros signos del lenguaje español, aunque en html hay un código para cada uno de esos caracteres, pero lo aprenderemos en clases posteriores. Mas adelante retomaremos este tema, por lo pronto esto sería el resumen.
Veamos como queda el código completo entonces:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi primera web en html5</title>
</head>
<body>
<p>este es el texto</p>
</body>
</html>
¡Muy bien!, ya tendremos nuestro primer documento html 5 creado.
ahora vamos a ir incorporando nuevas etiquetas de apoco:
todas las etiquetas para acomodar el texto van en el cuerpo del documento, para indicar que esto es el menú principal se utiliza la etiqueta <nav>.
Veamos un ejemplo:
<nav>
link 1
link 2
</nav>
¿Recuerdas como se hacen los links?, te invito a que pares de leer esta clase y intentes crear tu propio menú sin leer lo que sigue.
Muy bien!, sigamos entendiendo entonces.
recordamos que los links se hace con la etiqueta <a>, y que en el atributo href llevaba la ruta al archivo. esta ruta se puede indicar tanto con su valor absoluto: todo el link o toda la ruta al documento, o bien con su valor relativo, solo el nombre al documento, ejemplo de la siguiente forma:
<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>
Siguiendo con el documento para indicar que es un contenido utilizaremos la etiqueta <article>, que en inglés significa artículo.
y dentro de ella colocaremos el texto con su título, por ejemplo:
<article>
<h2>Aqui va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
y ahora veamos el código completo de todo el documento html 5 con su menú y su contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi primera web en html5</title>
</head>
<body>
<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>
<article>
<h2>Aqui va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
</body>
</html>
puedes verla en funcionamiento
en este link
Son muchos conceptos nuevos, así que terminaremos la clase por hoy, como tarea:
reformular el ejercicio de la anterior clase, ahora con html 5.
Todas las tareas que me quieran enviar con algún cuento o material creativo, serán publicadas en este blog.
El sábado publicaré un nuevo post en este blog con mas ejercicios para reforzar los conceptos, recuerda visitar la página.
No hay comentarios:
Publicar un comentario