Objetivos
- Describir la estructura general de un documento. Es decir, cuáles son algunos de los elementos comunes que se encuentran en un artículo de revista, página de un periódico u otro material impreso común.
- Identificar claves estructurales, o semántico, elementos de varios documentos comunes.
- Etiquetar una página impresa o artículo con elementos relacionados con HTML.
- Memorice el tipo de documento Doctype HTML5.
- Memorice el tipo de caracteres UTF-8 meta tag.
- Crear un esquema de página con etiquetas HTML.
- Distinguir marcado contenido de la presentación.
Materiales de trabajo
Las etiquetas HTML se utilizan para marcar elementos estructurales de una página. Los elementos estructurales incluyen párrafos, encabezamientos, artículos, imágenes, y otros aspectos de documentos de hipertexto.
Etiquetas HTML están rodeados por carácteres de menor que (<) y mayor que (>). Es típicamente una etiqueta de apertura y cierre que rodea el contenido de la página correspondiente. Por ejemplo, para referirse a un documento HTML que rodean toda la página con la apertura y cierre de etiquetas HTML:
<html> ... Page content ...</html>
La única diferencia entre muchas etiquetas de apertura y cierrees es que las etiquetas de cierre tienen una barra inclinada (/) que precede al texto de etiqueta. Como acotación al margen, algunas etiquetas son de cierre automático. Las etiquetas de cierre automático tienen este aspecto:
<br />
Vamos a echar un vistazo a varios elementos básicos del HTML. Vamos a empezar por la creación de un resumen simple u otro documento de su elección. Los elementos se inician con:
- <! DOCTYPE html>
- <head>
- <meta>
- <body>
- <h1>, <h2>, etc
- <p>
Con este conjunto limitado de elementos, podemos empezar a construir nuestro propio resumen en HTML.
Para comenzar, cree un nuevo archivo de texto vacío en el equipo local o en HTML Pad.
Una vez que tenga un documento en blanco, añada un DOCTYPE al principio del documento. Doctype es la abreviatura de "Declaración de tipo de documento" y se asocia un documento en particular con una marca definida formalmente por definición. El tipo de documento es HTML. Cuando un navegador, como Mozilla Firefox, analiza un documento, la declaración de tipo de documento describe las posibles etiquetas que el navegador pueda encontrar. El tipo de documento HTML5 es el siguiente:
Después de que el tipo de documento ha sido declarada, podemos seguir adelante y abrir nuestra etiqueta <html>, que contendrá los sub-elementos del documento:
Asegúrese de no cerrar la etiqueta <html>, sin embargo, vamos a colocar la etiqueta </ html> al final del documento.
Ahora vamos a colocar la cabecera del documento con una etiqueta <head>. La etiqueta <head> es un contenedor para elementos como el título de la página, CSS para el diseño y JavaScript para elementos dinámicos. Este curso no cubre esos temas, pero hay grupos de estudio que forman en la School of Webcraft.
Podemos insertar el título de la página <title> dentro de la <head> de este modo:
Nuestro documento contendrá caracteres codificados, en nuestro idioma nativo, que los navegadores web tendrán que mostrar. Es importante para nosotros para decirle al navegador qué codificación de caracteres a utilizar. El Unicode (UTF-8) estándar contiene más de un millón de caracteres de idiomas en todo el mundo. Fijamos nuestra codificación de caracteres como UTF-8 mediante la etiqueta <meta>.
A continuación cerrar la etiqueta head:
En un documento HTML, el <body> normalmente se encuentra por debajo de la <head>. El body es un contenedor para la mayor parte de su contenido. Permite abrir el contenedor del cuerpo de la página.
En el body suele tener secciones de página y párrafos de contenido. Las secciones están generalmente separados por cabeceras. Vamos a crear un par de secciones de cabecera:
Una vez que tenga un documento en blanco, añada un DOCTYPE al principio del documento. Doctype es la abreviatura de "Declaración de tipo de documento" y se asocia un documento en particular con una marca definida formalmente por definición. El tipo de documento es HTML. Cuando un navegador, como Mozilla Firefox, analiza un documento, la declaración de tipo de documento describe las posibles etiquetas que el navegador pueda encontrar. El tipo de documento HTML5 es el siguiente:
<!DOCTYPE html>
Después de que el tipo de documento ha sido declarada, podemos seguir adelante y abrir nuestra etiqueta <html>, que contendrá los sub-elementos del documento:
<html>
Asegúrese de no cerrar la etiqueta <html>, sin embargo, vamos a colocar la etiqueta </ html> al final del documento.
Ahora vamos a colocar la cabecera del documento con una etiqueta <head>. La etiqueta <head> es un contenedor para elementos como el título de la página, CSS para el diseño y JavaScript para elementos dinámicos. Este curso no cubre esos temas, pero hay grupos de estudio que forman en la School of Webcraft.
<head>
Podemos insertar el título de la página <title> dentro de la <head> de este modo:
Nuestro documento contendrá caracteres codificados, en nuestro idioma nativo, que los navegadores web tendrán que mostrar. Es importante para nosotros para decirle al navegador qué codificación de caracteres a utilizar. El Unicode (UTF-8) estándar contiene más de un millón de caracteres de idiomas en todo el mundo. Fijamos nuestra codificación de caracteres como UTF-8 mediante la etiqueta <meta>.
<meta charset="UTF-8" />
A continuación cerrar la etiqueta head:
</head>
En un documento HTML, el <body> normalmente se encuentra por debajo de la <head>. El body es un contenedor para la mayor parte de su contenido. Permite abrir el contenedor del cuerpo de la página.
En el body suele tener secciones de página y párrafos de contenido. Las secciones están generalmente separados por cabeceras. Vamos a crear un par de secciones de cabecera:
<h1>Header 1</h1> <h2>Header 2 (sub-sección)</h2>
Las cabeceras son jerárquicas y de niveles más altos de números de cabecera que son generalmente sub-secciones de las cabeceras más bajas numeradas. En este ejemplo, la <h2> es una subsección del elemento <h1>.
La etiqueta <hgroup> se utiliza para cuando se utilizan etiquetas <H> consecutivamente uno después de otro.
El último paso de este viaje corto a través de las etiquetas HTML es el uso frecuente de la etiqueta de párrafo <p>. Las etiquetas de párrafo se utiliza para designar los párrafos de un documento. Por ejemplo:
<p>The quick brown fox jumped over the lazy dog.</p>
Al final del documento, asegúrese de cerrar la <body> y la <html> con:
</body> </html>
Como se puede ver, los elementos HTML están diseñados para ser fácilmente comprendido por los seres humanos, así como la analizan por las computadoras.
Tareas
Por favor enviar en línea un documento de trabajo de HTML. Puede hacerlo mediante la publicación en HTML pad, pastebin, o cualquier otro código en línea web pasting/hosting. Si usted tiene sus propias web hosting no dude en enviar sus archivos HTML allí, o en cualquier otro lugar razonable que usted sepa.
Mi trabajo
Podéis ver mi trabajo terminado aquí: https://thimble.webmaker.org/p/fkwu.
No hay comentarios:
Publicar un comentario