Hoy vamos a dar un repaso por lo básico de HTML, la estructura de un documento. Esto va dirigido para aquellos que quieren iniciarse en la maquetación web, o simplemente para aquellos que quieren repasar lo que ya saben.
La estructura de un documento HTML básico sería la siguiente
- <!DOCTYPE html>
- <html>
- <head>
- <title>Mi página web</title>
- </head>
- <body>
- <!-- Contenido -->
- </body>
- </html>
Como podemos ver, tenemos que indicar un "DOCTYPE", en este caso hemos utilizado el "DOCTYPE" que corresponde con un documento HTML5, para más información sobre esta declaración podéis visitar el articulo de Wikipedia aquí
Después todo va dentro de la etiqueta "<html>", aquí dentro tenemos dos partes, la cabeza y el cuerpo (etiquetas head y body respectivamente). La etiqueta "<head>" contiene meta-información de la página web, el titulo, la codificación, etc, la inclusión de las hojas de estilo (CSS), scripts y otros recursos de la página web. La etiqueta "<body>" contiene la parte "visible" de la web, es decir, el contenido que estamos mostrando.
Algunos tags indispensables dentro de la etiqueta "<head>" son los siguientes.
Tag <link>
La etiqueta "<link>" permite cargar un recurso en el documento, el uso más habitual es para cargar las hojas de estilo, otro uso que se le suele dar es para cargar el "favicon" (el icono que aparece en la barra de dirección del navegador).
Ejemplo
- <link href="style.css" rel="stylesheet" type="text/css" media="all">
- <link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Tag <style>
La etiqueta style contiene las reglas CSS, se pueden agregar directamente mediante esta etiqueta pero es recomendable hacer un link a un archivo mediante la etiqueta "<link>"
Ejemplo
- <style>
- body {
- background: blue;
- }
- h1 {
- font-size: 1.5em;
- }
- .my-class {
- color: red;
- }
- </style>
Tag <meta>
La etiqueta meta permite definir meta-datos de la página web, como puede ser la codificación, la descripción de la página web, palabras clave, etc.
Ejemplo
-
<meta name="description" content="This is an example of a meta description. This will often show up in search results.">
-
<meta charset=utf-8>
Podemos empezar a maquetar desde el momento en que ya tenemos la estructura básica, sin embargo podemos partir desde algo más elaborado. Desde la página web de www.initializr.com podemos descargar una página básica, podemos escoger algunas librerías indispensables e incluso podemos escoger un template que nos proporciona un layout básico con cabecera, cuerpo, sidebar y pie de página.
No hay comentarios:
Publicar un comentario