1      Vistazo a HTML

HTML ha sido el lenguaje de la web desde 1992. En esta lección, usted aprenderá los fundamentos de HTML, cómo se estructuran páginas HTML y algunas de las características básicas que pueden añadirse a una página HTML.

1.1    La estructura de una página HTML

HTML es un acrónimo de Hyper Text Markup Language. Es un idioma estático que determina la estructura y el significado semántico de una página web. Utiliza HTML para crear contenidos y metadatos que utilizan los navegadores para procesar y Mostrar información. Contenido HTML puede incluir texto, imágenes, audio, vídeo, formularios, listas, tablas y muchos otros artículos. También una página HTML puede contener hipervínculos, que conectan páginas mutuamente y los sitios web y recursos en otros lugares en Internet.

 

Cada página HTML tiene la misma estructura básica:

  • Una declaración DOCTYPE que indica la versión de HTML que utiliza la página.
  • Una sección de html que contiene los siguientes elementos:
    • un encabezado que contiene información sobre la página en el navegador. Esto puede incluir su idioma (Inglés, Chino, francés y así sucesivamente), conjunto de caracteres, hojas de estilo asociadas y los archivos de script, información del autor y palabras claves para los motores de búsqueda.
    • Un cuerpo que contiene todo el contenido de la página visible.

 

Esto es válido para todas las versiones de HTML hasta e incluyendo HTML5. 

 

Una página web HTML5 debería incluir una declaración DOCTYPE y un<html>elemento que contiene a su vez un<head>elemento que contiene el conjunto de la página de título y carácter y un<body>elemento de contenido.

 

 El código mínimo de una página HTML

<!DOCTYPE html>

<html lang="en">

     <head>

           <meta charset="utf-8"/>

           <title>La pagina mas pequena</title>

     </head>

<body>

          Mi primera pagina web

</body>

</html>

 

 

El ejemplo de código anterior utiliza la declaración DOCTYPE de HTML5.

<!DOCTYPE html>

 

Deberías escribir todas tus nuevas páginas web mediante el uso de HTML5, pero es probable que vea muchas páginas web escritas utilizando HTML 4.01 o anterior. Páginas que no están basadas en HTML5 comúnmente utilizan una de las siguientes clases de DOCTYPE:

  • DOCTYPE transicional, que permite la utilización de elementos obsoletos, relacionados con la presentación de las versiones anteriores de HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd>

 
  • Frameset DOCTYPE, que permite el uso de Marcos, además de los elementos permitidos por el DOCTYPE transicional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

 
  • DOCTYPE Strict, que no permite el uso de marcos o elementos obsoletos de las versiones anteriores de HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

 

En todo momento, si usted no puede usar el DOCTYPE de HTML5 debe usar el HTML 4.01 strict DOCTYPE. Si un archivo HTML no tiene ningún DOCTYPE, los navegadores pueden utilizar su propio valor y podrían representar tu página web sistemáticamente, así que es importante incluir el DOCTYPE.

1.2    Tags, Elementos, Atributos y Contenido

La cabeza <head> y el cuerpo <body> de una página de Internet utilizan elementos HTML para definir su estructura y contenido. Por ejemplo, consiste en un elemento de párrafo, representando un párrafo del texto en la página:

  •   La apertura de la etiqueta, <p>, para indicar el comienzo del párrafo.
  •  Contenido de texto.
  •   Una etiqueta de cierre</p>, para indicar el final del párrafo.

 

Tags y elementos se refieren a veces indistintamente, aunque esto es incorrecto. Un elemento se compone de etiquetas y el contenido.

  • Elementos HTML que definen la estructura y la semántica del contenido de una página web.
  • Elementos que lo rodea con una etiqueta de inicio y final para identificar su contenido.
  • Los elementos pueden estar anidados:

<p>

     <strong>Elements</strong> consist of

     <strong>content</strong> bookended by a

     <em>start</em> tag and an <em>end</end> tag.

</p>

 

 

  • Utilizar atributos para proporcionar información adicional sobre el contenido de un elemento.

 

Anida elementos dentro de unos a otros para obtener más información semántica sobre el contenido. Si no es obvio por el contexto, identa elementos anidados para ayudar a mantener un registro de cuáles son los padres y cuáles son los elementos secundarios.

 

El cuerpo de un documento simple

<body>

<h1 class="blue">An introduction to elements, tags and contents</h1>

<p>

<strong>Elements</strong> consist of <strong>content</strong> bookended

 by a <em>start</em> tag and an <em>end</em> tag.

</p>

<hr />

<p>

Certain elements, such as the horizontal rule element, do not need

content however and consist of a single, self-closing element. These

are known as empty elements.

</p>

</body>

 

 

Cada elemento HTML indica al navegador algo acerca de la información que se encuentra entre sus tags de apertura y cierre. Por ejemplo, los elementos strong y em representan "fuerte importancia" y "énfasis" por sus contenidos, que los navegadores tienden a representar respectivamente como texto en negrita y en cursiva. Los elementos H1 representan un encabezado de alto nivel en el documento, que los navegadores tienden a representar como texto en un tamaño grande y en negrita.

 

Los atributos proporcionan información adicional, presentación o significado, sobre el contenido de un elemento. Ellos aparecen en la etiqueta de apertura de un elemento y tienen un nombre y un valor. El nombre debe ser en caracteres en minúsculas. La mayoría de los valores está predefinida basados en el atributo al que pertenecen y deberían estar incluidas dentro de las comillas. En el ejemplo anterior, la etiqueta de inicio h1 contiene el atributo de clase establecido en el valor blue que pintara el titulo azul.

 

La mayoría de los atributos pueden calificar sólo ciertos elementos. Sin embargo, HTML define un grupo de atributos globales para su uso con cualquier elemento.

 

Los siguientes atributos son comunes a todos los elementos HTML:

Atributo

Descripción

accesskey

Utilizado por el agente de usuario como una guía para crear un atajo de teclado que se activa o centra el elemento.

class

Conjunto de tokens separados por espacios que representan las distintas clases a las que pertenece el elemento.

contenteditable

 

Es un atributo enumerado cuyas claves son “”, “true” y “false”.

  • “true” y “”  se asignan al estado cierto. Indica que el elemento es editable.
  • “false” se asigna al estado falso. Indica que el elemento no es editable.
  • “inherit” es el valor por defecto cuando no se especifica un valor (y el valor por defecto cuando el valor no es válido). Indica que el elemento es editable si es su padre.

contextmenu

 

Indica el menú contextual del elemento. El valor debe ser el ID de un elemento de menú.

dir

 

Especifica la direccionalidad de texto del elemento. El atributo es un atributo enumerado con las siguientes palabras clave y Estados:

  • La palabra clave ltr, que asigna al estado ltr indica que el contenido del elemento es texto de izquierda a derecha.
  • La palabra clave rtl, que asigna al estado rtl indica que el contenido del elemento es texto de derecha a izquierda.
  • La palabra clave auto, indica que la dirección está por determinarse mediante programación utilizando el contenido del elemento.

draggable

 

Atributo enumerado. Tiene tres Estados.

  • “true” se asigna al estado cierto. Indica que el elemento es arrastrable.
  • “false” se asigna al estado falso. Indica que el elemento no es arrastrable.
  • “” no tiene palabras, pero es el valor por defecto cuando no se indica un valor. Utiliza el comportamiento predeterminado del agente de usuario.

Un elemento con un atributo draggable también debe tener un atributo title que nombra el elemento con el fin de las interacciones no visuales.

dropzone

 

Atributo enumerado. Tiene tres Estados.

  • “copy” Indica que al aceptar un elemento arrastrado se traducirá en una copia de los datos arrastrados.
  • “move” Indica que al aceptar un elemento arrastrado dará como resultado que los datos arrastrados se moverán a la nueva ubicación.
  • “link” Indica que al aceptar un elemento se traducirá en un enlace a los datos originales.

Un elemento con un atributo dropzone también debe tener un atributo title que nombra el elemento con el fin de las interacciones no visuales.

hidden

 

Es un atributo booleano (“true” o “false”). Esconde el elemento y lo hace invisible al usuario. Cuando se especifica en un elemento, indica que el elemento aún no está, o ya no es directamente relevante para el estado actual de la página, o que está siendo utilizado para declarar el contenido para ser reutilizado por otras partes de la página en lugar de ser directamente accesible por el usuario. Los agentes de usuario no deben representar los elementos que tienen este atributo especificado. Este requisito puede implementarse indirectamente a través de la capa de estilo.

id

 

Identificador único del elemento en el documento. Debe contener por lo menos una letra y no puede tener espacios.

lang

 

Especifica el idioma principal para el contenido del elemento y para cualquiera de los atributos del elemento que contienen texto. Su valor debe ser una etiqueta de idioma del estándar BCP 47 válida, o un texto vacío. El atributo que se establece en el texto vacío indica que el idioma principal es desconocido.

spellcheck

 

Es un atributo enumerado cuyas claves son el texto vacío, “true” y “false”. El texto vacío y la palabra clave “true” se asignan a la situación cierta. La palabra clave “false” asigna el estado falso. Además, hay un tercer estado, el estado predeterminado, que es el valor por defecto cuando falta un valor (y el valor por defecto cuando el valor no es válido).

 

El estado cierto indica que el elemento debe tener su ortografía y gramática revisado. El estado por defecto indica que el elemento debe actuar según un comportamiento predeterminado, posiblemente basado en el estado padre del elemento spellcheck. El estado falso indica que el elemento no se debe verificar.

style

 

Esto es un atributo de estilo CSS como se define en la especificación de la sintaxis de atributo de estilo CSS.

tabindex

 

Permite a los autores indicar que un elemento puede recibir el foco, y si se supone que es accesible mediante navegación de enfoque secuencial y, si es así, cuál es ser el orden relativo del elemento para la navegación de enfoque secuencial. El nombre "tabindex" proviene del uso común de la tecla "tab" para desplazarse por los elementos que pueden recibir el foco. El término "tabulación" se refiere a avanzar a través de los elementos pueden recibir el foco que pueden ser alcanzados mediante navegación de enfoque secuencial.

title

 

Representa información de referencia para el elemento. En un link, este podría ser el título o una descripción del recurso; en una imagen, puede ser el crédito de la imagen o una descripción de la imagen; en un párrafo, podría ser una nota o comentario sobre el texto; en una cita, podría ser aún más información sobre la fuente; en contenido interactivo, podría ser una etiqueta para, o las instrucciones para el uso del elemento; y así sucesivamente. El valor es texto.

translate

 

Es un atributo que se utiliza para indicar si los valores de un elemento y los valores de sus hijos se traducirán cuando la página es traducida, o si se les deja sin cambios. Las palabras clave del atributo son “yes”, “no”  y el texto vacío. El texto vacío y la palabra clave “yes” apuntan al estado cierto. La clave “no” apunta a ningún estado. Además, hay un tercer estado, el estado de heredar, que es el valor por defecto al faltar un valor (y el valor por defecto valor no válido).

1.3    Mostrar texto en HTML

Cada página web requiere contenido: texto e imágenes. HTML define muchos elementos que permiten estructurar el contenido y darle un contexto con sentido.

1.3.1    Encabezados y Párrafos

HTML ha incluido elementos para identificar los párrafos y títulos en un documento desde v1 en 1992.

 

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> identifica seis niveles de encabezado de texto.

Use <h1> para identificar el encabezado principal de la página, <h2> para identificar los encabezados de cada sección en la página, <h3> para identificar las subsecciones dentro de esos encabezados secundarios etcétera.

 

<p> identifica párrafos de texto.

 

Es importante utilizar los tags de encabezado y párrafo para identificar las secciones, subsecciones y contenido de texto en una página web. Los títulos y etiquetas hacen el contenido más comprensible para los lectores y los indexadores, así como más fácil de leer en la pantalla.

 

<body>

<h1>Una introducción a HTML</h1>

     <p>

           En este módulo, nos fijamos en la historia del HTML y CSS.

     </p>

     <h2>En el principio</h2>

     <p>

          World Wide Web era una pieza de software escrito por

           Sir Tim Berners-Lee en el CERN como un reemplazo para Gopher. HTML v1

           y se realizaron software open source en 1993. El World Wide Web como

           sabemos empezó con esta pieza de software.

     </p>

     <h3>Guerra de navegadores</h3>

     <p>La apertura de la World Wide Web significaba que muchos navegadores

     diferentes fueron creados desde el principio NCSA Mosaic, que más tarde

     se convirtió en Internet Explorer y Netscape Navigator.</p>

</body>

 

 

Cuando se escribe código HTML, recuerde que cualquier secuencia de caracteres de espacios, “tabs” y “enter” son tratados como un solo espacio. La única excepción a esto es cuando esa secuencia está dentro de un elemento <pre>, en el cual caso el navegador muestra todos los espacios.

1.3.2    Énfasis

HTML define cuatro elementos que denotan un cambio en el énfasis en el texto que rodean el texto en el cual ellos están anidadas:

  • <strong> identifica el texto que es más importante que su texto circundante. El explorador generalmente representa este contenido en negrita.
  • <em> identifica el texto que debe ser tensionado. El explorador generalmente esto representa contenido en cursiva.
  • <b> y <i> identifican el texto que se va a procesar en negrita o en cursiva, respectivamente.

 

Usted puede combinar y anidar los elementos <strong>, <em>, <b> y <i> para indicar diferentes tipos de énfasis. Los navegadores pueden representar el texto enfatizado en muchas maneras diferentes.

 

Añadiendo énfasis a texto:

<p>

     <strong>Acentuar</strong> es para dar más peso a la (comunicación);

     <em>"Su gesto hizo hincapié en sus palabras"</em>.

</p>

 

 

NOTA: Los elementos <b> y <i> en HTML4 son simplemente las instrucciones para mostrar el texto, en lugar de especificar algún significado. En HTML5, es mejor utilizar <strong> y <em> en lugar de <b> y <i>.

 

 

1.3.3    Listas

Las listas organizan grupos de información en un formato claro y fácil de entender. HTML define tres tipos de lista:

• “Unordered  lists” listas de conjuntos de elementos sin ningún orden en particular.

• “Ordered lists” listas de conjuntos de objetos en un orden concreto.

• “Definition lists” listas de conjuntos de tipo de pares nombre / valor, tales como términos y sus definiciones.

 

Todos los tipos de lista utilizan una etiqueta para definir el inicio y el final de la lista - <ul>, <ol>y <dl> respectivamente. Las entradas de la lista individual se identifican con el<li> etiqueta para listas desordenadas y ordenadas, mientras que las listas de definición utilizan dos etiquetas por ítem de la lista; <dt> para el nombre, o término y <dd> por su valor, o la definición.

 

HTML provee para el listado de conjuntos de cosas, pasos y pares nombre / valor.

 

Desordenado, ordenado, y las listas de definición

<body>

     <p>Aquí está una pequeña lista de editores HTML</p>

     <ul>

           <li>Notepad</li>

           <li>TextMate</li>

           <li>Visual Studio</li>

     </ul>

     <p>Así es cómo escribimos una página web</p>

     <ol>

           <li>Crear un nuevo archivo de texto</li>

           <li>Añadir texto en formato HTML</li>

           <li>Guarde el archivo en un sitio web</li>

     </ol>

     <p>Aquí está una lista de personas en el Internet Hall of Fame y lo que      hicieron</p>

     <dl>

           <dt>Sir Tim Berners Lee</dt>

           <dd>Inventó HTML y escribió WorldWideWeb</dd>

           <dt>Linus Torvalds</dt>

           <dd>Creador de Linux</dd>

           <dt>Charles Herzfeld</dt>

           <dd>Autorizó la creación de ARPANET, el predecesor de Internet</dd>      </dl>

</body>

 

 

También puede incluir otra lista dentro de un elemento de la lista, mientras un artículo específico se relaciona la lista anidada. La lista anidada no tiene que ser del mismo tipo de lista como su padre, aunque marco dicta que éste suele ser el caso.

Puede escribir una tabla de contenido como una lista ordenada de nombres de capítulo. Entonces, cada elemento de la lista puede incluir una lista jerarquizada de las partidas dentro de ese capítulo.

Listas de escritura anidada

<body>

     <ol>

           <li>Lección 1: Introducción a HTML

                <ol>

                     <li>La estructura de una página HTML</li>

                     <li>Etiquetas, elementos, atributos y contenido</li>

                     <li>Texto e imágenes</li>

                     <li>Formas</li>

                </ol>

           </li>

           <li>Lección 2: Introducción a CSS</li>

           <li>Lección 3: Utilizando Visual Studio 2012</li>

     </ol>

</body>

 

Los navegadores generalmente procesan las listas anidadas, indentandolas más en la página, y además cambian el estilo de los “bullets” para listas desordenadas o reinician la numeración de las listas ordenadas.