Curso HTML5 y CSS3 Parte 3

[youtube]https://www.youtube.com/watch?v=Pg8e5OUspRM[/youtube]

Introducción a HTML5

A continuación vamos a tener una introducción a HTML5 y las etiquetas básicas que vamos a utilizar, para ello vamos a utilizar la estructura base para todo documento HTML5 que seria la siguiente:

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″ />
<meta name=”description” content=”Sitio web con HTML5 y CSS3″ />
<meta name=”keywords” content=”HTML5, CSS3″ />

<meta name=”author” content=”Isaac Robles”>

<title>Titulo del Documento</title>
</head>
<body>
</body>
</html>

Bien, ahora procedamos a explicar cada linea.

  1. <!DOCTYPE html>: Con esta linea indicamos el tipo de documento q ue creamos, esta linea SIEMPRE debe ser la primera en nuestro documento.
  2. <html lang=”es”>: Con esta etiqueta indicamos el inicio de la estructura de nuestro documento HTML. El atributo lang indica el idioma en el que esta escrito el contenido de nuestro documento, que en este caso es español “es“. Aqui puedes encontrar la lista de idiomas y su código correspondiente www.w3schools.com/tags/ref_language_codes.asp. La estructura de nuestro documento HTML se va dividir en dos secciones principales, la cabecera y el cuerpo.
  3. <head>: Aqui empieza la cabecera de nuestro documento HTML. Aqui es donde especiicamos el título de nuestro documento, el conjunto de caracteres que utilizaremos(en este ejemplo, UTF-8) y también información sobre el mismo documento.
  4. <meta />: Esta etiqueta nos permite agregar meta-datos a nuestro documento, es decir, datos acerca de nuestro documento, por ejemplo: el conjunto de caracteres que utiliza, una breve descripción del documento, las palabras clave de nuestro documento y el autor del documento. Esta etiqueta tiene dos atributos, name y content, cada eqitueta meta es un meta-dato o un dato sobre nuestro documento, pero este dato tiene un nombre y un valor, el atributo name indica el nombre de nuestro dato y content el valor de nuestro dato. Pero no podemos poner cualquier nombre, estos ya estan definidos y son application-name, author, description, generator y keywords, para más información visitar este sitio http://www.w3schools.com/tags/tag_meta.asp y para más información sobre el atributo name puedes visitar este otro sitio http://www.w3schools.com/tags/att_meta_name.asp.
  5. <title>: Esta etiqueta nos permite indicar el titulo de nuestro documento HTML, esta es la unica etiqueta dentro de <head> visible al usuario. HTML por defecto no puede mostrar letras con acento, para ello hacemos uso de una tabla donde podemos ver el código ASCII para HTML y lo pueden ver aqui http://www.w3schools.com/charsets/ref_html_ascii.asp.
  6. </head>: Este es el final de la cabecera del documento, la gran mayoria de las etiquetas HTML deben cerrarse, y la forma de hacerlo es anteponiendo una diagonal al nombre de la etiqueta que deseamos cerrar. En el caso de la etiqueta <meta />, esta es una de las pocas etiquetas que pueden no requerir una etiqueta de cierre, para cerrarla solo debemos anteponer una diagonal al simbolo ‘>’.
  7. <body>: Con esta etiqueta indicamos el inicio del cuerpo de nuestro documento, a diferencia de la etiqueta <head> el contenido de <body> es visible(a menos que indiquemos lo contrario). Aqui es donde aparecerán los articulos, imágenes, videos y en general, el contenido de nuestra pagina web.
  8. </body>: Este es el fin del cuerpo de nuestro documento.
  9. </html>: Fin de nuestro documento HTML.

Por el momento esto seria todo, asi que nos vemos hasta la proxima entrega de este curso de HTML5 y CSS3.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

97 − 92 =