Elementos inline

Objetivos

• Describir 'inline' en el contexto de un documento de hipertexto.
• Elige un sitio web público y varios elementos de la etiqueta inline.
• Escoge dos de los elementos HTML inline y describa el uso común para cada elemento.
• Demostrar el uso apropiado de por lo menos 3 diferentes elementos HTML inline.

Materiales de trabajo

El HTML utiliza los elementos inline para marcar los datos como las citas, códigos informáticos, imágenes y enlaces. Los elementos inline no pueden colocar directamente en el <body> pero deben estar anidados dentro de un elemento de bloque, tales como <p>.

Ya hemos cubierto la etiqueta de anclaje <a>, que es uno de los elementos inline, en la sección anterior. Hay muchos otros elementos inline de uso común. Los elementos inline pueden dividirse en dos tipos generales:

• Elementos de frase que actúan para marcar una palabra o frase.
• Los elementos de presentación que afectan a la visualización del elemento.

Aunque hay elementos de presentación de marcado, es aconsejable utilizar CSS para la presentación y se basan en HTML específicamente para el marcado semántico.

Elementos de frase

<em> y <strong>

Los énfasis de intensidad <em> y importancia <strong> se usan para indicar énfasis. El énfasis de intensidad es recomendado como un indicador para el texto que se indica con énfasis lingüístico (como la tasa de expresión o entonación). Use <strong> para el texto con gran importancia, donde un altavoz no puede alterar su voz.

<p>Los frijoles son <em>realmente</em> buenos para ti. Estos son ideales para su <strong>corazón y el alma</strong>.</p>

<cite>

A menudo es necesario citar <cite> la fuente de una declaración o idea. Las fuentes para la etiqueta <cite> suelen ser literario, como un libro, juego, sitio web, prensa, artículo, etc

<p>Ideas geniales son aquellas de las que lo único que nos sorprende es que no se nos hayan ocurrido antes.<cite>Noel Clarasó</cite></p>

<q>

Las citas inline pueden ser marcados con la etiqueta <q>. Estas citas generalmente involucran personas en lugar de las obras literarias.

<p>Marqués de Vauvenargues <q>Para llevar a cabo grandes empresas hay que vivir como si nunca se hubiera de morir.</q></p>

<dfn>

A veces tenemos que ofrecer una definición para un término. La etiqueta <dfn> se utiliza para este propósito.

<address>

Usamos las etiquetas <address> cuando se muestra una dirección física tales como una dirección de correo.

<address>
Simón Bolívar 133<br/>
Lima<br/>
</address>

<del>

La etiqueta <del> se utiliza para mostrar el texto que ya no es relevante en un documento sin quitar realmente el texto. Esto se consigue normalmente a través de una línea "strike through" trazada a través del texto.

<p>Los gatos son grandes animales domésticos. A los gatos les gusta el <del>queso</del>.</p>

Para leer más

Hay varios elementos HTML inline. Los siguientes sitios ofrecen más detalles:

• Wikipedia: HTML Inline Elements.
• Tutorialchip: HTML inline elements list.
• W3C: HTML5 Text Level Semantics.

Listas y enlaces

Objetivos

• Organizar varios elementos en una lista desordenada.
• Organizar varios elementos en una lista ordenada.
• Distinguir listas ordenadas y desordenadas.
• Describir las similitudes entre listas ordenadas y desordenadas.
• Crear un hipervínculo a una sección dentro de su documento.
• Enlace el documento al contenido externo.
• Resumir el propósito de hipervínculos (etiquetas delimitadoras).
• Crear un diagrama que representa dos documentos con hipervínculos.
• Compartir tu diagrama con este grupo de estudio.

Materiales de trabajo

Listas

Vamos a echar un vistazo a la manera de detallar las listas, enlaces a otros documentos, y insertar multimedia  en nuestras páginas.

Las listas vienen en dos tipos: Ordenadas y desordenadas. Las listas ordenadas fluye en secuencia mientras que en las listas desordenadas no se requieren el orden. Por ejemplo, una lista de la compra se puede considerar como una lista desordenada, ya que no tienen que ver con el orden en que se encuentran los artículos de la tienda.

La etiqueta <ol> es usado para crear listas ordenadas mientras que la etiqueta <ul> denota listas desordenadas.

Vamos a crear dos listas: Una lista de compras o una lista de instrucciones que describe la forma de salida en el mercado.

Lista desordenada

Primero la lista de la compra. Crear una lista desordenada dispone de tres pasos:

1. Abra la lista desordenada: <ul>.
2. Rodear los elementos de la lista con la etiqueta <li>.
3. Cerrar la lista desordenada: </ul>.

Veamos una lista desordenada en su totalidad:

<ul>
  <li>Camiseta</li>
  <li>Zapatillas</li>
  <li>Balón</li>
</ul>

Lista ordenada

Segundo, haremos una lista de los pasos que finaliza la compra.

1. Abra la lista ordenada: <ol>.
2. Inserte los pasos como elementos de lista: <li>.
3. Cerrar la lista ordenada: </ol>.

<ol>
  <li>Descargue su cesta de la compra</li>
  <li>Salude al cajero</li>
  <li>Sonríe a la linda bebé al lado de usted en línea</li>
  <li>Pague al cajero</li>
  <li>Reúna sus provisiones y salir.</li>
</ol>

Hipervínculos

Los hipervínculos son las interconexiones entre las páginas y recursos en el World Wide Web. La creación de hipervínculos se requiere otro aspecto de las etiquetas HTML llamados atributos. Los atributos son elementos de texto descriptivos dentro de las cajas de etiquetas HTML (el < y >). Los atributos están asociados con los valores. Por ejemplo:

<tag attribute="value">

La etiqueta de anclaje <a> es así como crear vínculos tanto dentro de un documento y de los recursos externos. Una etiqueta de anclaje tiene un atributo llamado 'href' que significa referencia de hipertexto.  La referencia de hipertexto es el elemento interno o externo a la que apunta el enlace. Por ejemplo:

<a href="http://p2p4-html5yuichi.blogspot.com/">Introducción de HTML5</a>

Este enlace apunta a http://p2p4-html5yuichi.blogspot.com/ con el texto de ayuda de enlace "Introducción de HTML5".

Basic Markup

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:

<!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.

Introducción

Objetivos

• Identificar las características deseables en un editor HTML.
• Comparar dos o más editores de HTML.
• Reportar su comparación con los demás participantes de esta clase
• Seleccionar un editor HTML para su uso personal
• Resumir el motivo(s) que te llevó a elegir su editor específico.
• Use su editor para producir una página HTML simple

Materiales de Trabajo

Para este curso es necesario una herramienta de edición HTML. Hay muchos para elegir. No necesitamos muchas características avanzadas para este curso básico así que escoja un simple editor de texto con resaltado de sintaxis.

Editores de HTML online

Hay varios editores de HTML que puedes usar en tu navegador web:

• Mozilla Thimble - Recomendado para utilizar en este curso. Recomendado para utilizar en este curso. Proporciona retroalimentación visual directa, resaltado de sintaxis, y la edición sencilla.
• Aloha (Editor HTML5 en línea)
• HTML Pad (Mozilla online HTML editor)
• JS Fiddle (JavaScript, CSS, y Editor HTML online)
• Maqetta (Herramienta de diseño de interfaz HTML5)

Editores de texto gratis

Los editores de texto siguientes tienen el resaltado de sintaxis y son herramientas gratuitas:

• Bluefish (GNU/Linux, Mac OSX, Microsoft Windows)
• BlueGriffon (GNU/Linux, Mac OSX, Microsoft Windows)
• Geany (GNU/Linux, Microsoft Windows)
• gEdit (GNU/Linux, Mac OSX, Microsoft Windows)
• jEdit (GNU/Linux, Mac OSX,Microsoft Windows)
• Notepad++ (Microsoft Windows)

Entorno de desarrollo integrado (IDEs)

• Aptana Studio
• Eclipse IDE for JavaScript Web Developers