1.1. Fundamentos de html5

La estructura básíca de un doumento html5 es

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8' />
  <title>Título de la página</title>
  <meta name='description' content='Descripción de la página'>.
</head>
<body>
</body>
</html>

Creación de documentos HTML

Aspecto de documentos HTML:

Marcadores o etiquetas HTML obligatorios:

Cabecera del documento

Contiene información general sobre el documento HTML. Es obligatorio incluir el marcador <title>, el resto de los marcadores son opcionales.

Marcador <title>

Los navegadores muestran el título de cada uno de los documentos HTML que encuentran. El título que aparece se toma del contenido de este marcador. Este marcador debe aparecer con su pareja con la barra inclinada </title> y dentro de la sección <head>

<title>Esto es el título de la página</title>

Marcador <meta>

Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc. Esta información podría ser utilizada por los robots de búsqueda para incluirla en las bases de datos de sus buscadores y mostrarla en el resumen de búsquedas o tenerla en cuenta durante las mismas y será invisible para un visitante normal.

Estas etiquetas también se usan para especificar cierta información técnica de la cual pueden valerse los navegadores para mostrar la página, como el grupo de caracteres usado, tiempo de expiración del contenido, posibilidad de dejar la página en cache o calificar el contenido del sitio ("programación web", "Oracle", etc.).

Meta tag Descripción
<meta content='copyright' name='autor'> Indica quien posee los derechos de contenido de la página.
<meta charset='utf-8'> Indica al servidor que el recurso es un documento del tipo html. Que está escrito en texto plano y el conjunto de caracteres con los que se ha escrito el contenido de la página.
<meta http-equiv='refresh' content='30; URL=./indice.html' /> Carga la URL en content segundos. En este caso en 30 segundos . No es reconocido por todos los navegadores,
<meta name='Description' content='El SGML es un sistema' /> Este tag lo usan los buscadores para dar una descripción del contenido de la página.
<meta name='Robots' content='all'/>

Determina si los robots indezaran la página. Los posibles valores de content son:

all para que el robot tenga en cuenta esta página y pueda seguir los links contenidos en la misma (este es el valor predeterminado), noindex para que no la tenga en cuenta.

A manera de ejemplo se muestra el siguiente código

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>html5</title>
</head>
<body>
  <p>Hola mundo desde el ITV</p>
</body>
</html>

A continuación se presenta una breve descripción de HTML 5, si usted desea conocer más a detalle puede visitar las múltiples páginas en el internet o consultar la guía oficial en w3c.

Sintaxis

Caracteres:

Marcadores, marcas o etiquetas (tags):

Nombres de etiquetas

Atributos:

Comentarios:

Formateo de párrafos o bloques:

El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos de línea son ignorados por los navegadores que interpretan html.

Para agregar un retorno de línea es necesario usar el tag único <br>.

Elemento <hr /> inserta un línea además de un retorno de línea

<blockquote> y <blockquote> Este tag se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea un margen izquierdo yderecho del texto, para que se diferencie de los demás.

  <h3>Hogar inteligente: buscando la comodidad</h3>
  <p>La compra de Nest por parte de Google fue el pistoletazo de salida para la popularización de la domótica. Detectores de humo, termostatos o persianas controladas por el móvil. El catálogo es cada vez más diverso, pero también disperso. Fabricantes como Samsung proponen unificar la gestión de toda la casa con el televisor como núcleo.
</p>

Efecto visual

Hogar inteligente: buscando la comodidad

La compra de Nest por parte de Google fue el pistoletazo de salida para la popularización de la domótica. Detectores de humo, termostatos o persianas controladas por el móvil. El catálogo es cada vez más diverso, pero también disperso. Fabricantes como Samsung proponen unificar la gestión de toda la casa con el televisor como núcleo.

Etiquetas de caracteres y tipos de letra:

El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Existen diversos marcadores para indicar que una palabra o frase tiene una connotación especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los más utilizados.

Lenguaje HTML Resultado en navegador
<b>texto en negrita</b> texto en negrita
<i>texto en cursiva o itálica</i> texto en cursiva o itálica
<u>texto subrayado</u> texto subrayado
<b><i><u>combinando las tres anteriores</u></i></b> combinando las tres anteriores
<tt>fuente tipo de máquina de escribir</tt> Fuente tipo de máquina de escribir
Subíndice. Por ejemplo H<sub>2</sub>O H2O
Superíndice. Por ejemplo x<sup>2</sup> x2

Tipos de letras

La etiqueta <font> en HTML es obsoleta. Se supone que se eliminara en futuras versiones de HTML. A pesar de su uso cotidiano, evitalo en favor de las hojas de estilos.

Para un documento completo podría usar las fuentes de google con un línea en el head como está:

<link href='//fonts.googleapis.com/css?family=Cuprum:400italic,400,700italic,700' rel='stylesheet' >

Imagenes

Colocar imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src="ruta">, donde "ruta" es la dirección o la url dónde se encuentra situada la imagen. Solo es posible cargar imagenes gif, jpg y png.

Código Efecto visual
<img alt ='' src='images/moneda.jpg'> Medalla al mérito académico

El tag <img> tiene dos atributos que debemos considerar alt y title, básicamente los dos cumplen la misma función, mostrar un título al estar el mouse sobre la imagen. No todos los navegadores soportan ambos, por ejemplo iExplorer solo soporta title. Para fines de validación es necesario incluir alt=''.

Hiperenlaces

Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos hacer clic en un navegador para ir a otra página web. La sintaxis es la siguiente:

href

Este atributo específica la localización de un recurso de la Web, definiendo así un vínculo entre el elemento actual (el origen del vínculo) y el destino del vínculo definido por este atributo. El destino de un vinculo puede ser: una página web interna o externa, o un título, imagen, parrafo dentro de la misma página con el vinculo de origen (enlaces internos)

target

Destino del hiperenlace

<a href='www.itver.edu.mx'>I.T.V</a>

Enlaces internos

Primero hay que definir el punto objetivo de la vinculación ( Por ejemplo: <a name="maracuya">) y a continuación se hace referencia en las partes que necesitamos a dicho punto (Por ejemplo: <a href="#maracuya">

<a href='#maracuya'>Maracuyá</a>
<a href='#macadamia'>Nuez de Macadamia</a>
<a href='#chaya'>Chaya</a>
El <a name='maracuya'>maracuyá</a>. . .

Convertir una imagen interna en un hipervínculo

Basta incluir el tag de imagen (img) con todos sus atributos entre los tag de ancla (<a href=....></a> ).El resultado obtenido es poder pulsar directamente sobre la imagen para acceder al hipervínculo.

Código
<a href='http://www.itver.edu.mx'>
<img src='itv.jpg'></a>

Listas

Listas desordenadas

Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>.

      <ul>
        <li>Café</li>
        <li>Leche</li>
        <li></li>
      </ul>
  • Café
  • Leche

Listas numeradas u ordenadas

Se engloban por los tags <ol>.....</ol> y cada elemento de la lista estará encabezado por el tag <li>.

      <ol>
        <li>Café</li>
        <li>Leche</li>
        <li></li>
      </ol>
  1. Café
  2. Leche

Listas de glosario

Este tipo de lista denominado 'definition list' requiere tres tags(<dl>, <dt> y <dd>) para destacar el texto en cuestión. el tag puede utilizarse para construir definiciones (por ejemplo: recetas).

Para construir una lista, el texto debe escribirse entre los tags de definición de listas <dl> y </dl>. Los tags <dt> y su correspondiente </dt> son un definición de término y <dd> así como su correspondiente </dd> son una descripción.

Fresas flameadas
<dl>
<dt>Ingredientes</dt>
 <dd>10 fresas frescas</dd>
 <dd>1 onza de ron oscuro</dd>
 <dd>1/2 taza de azúcar</dd>
 <dd>Mantequilla amarilla</dd>
<dt>Preparación</dt>
 <dd>Poner a cocinar las fresas con un poco de mantequilla.</dd>
 <dd>Agregar el azúcar hasta que se disuelva.</dd>
 <dd>Por último adicionar el ron y flamear unos pocos minutos.</dd>
 <dd>Servir en una copa con helado de vainilla o solo,
 disfrútelo y me invitan!!!</dd>
</dl>

Las listas a su vez pueden anidarse, esto es colocarse unas dentro de otras. Los márgenes de cada lista, los tipos de letra, numeración, colores, etc. podrán ser ajustados desde una hoja de estilos CSS. Por ejemplo:

ol {
font: 18px times;
font-weight: bold;
list-style-type: decimal;
margin-left: 40px;
padding-left: 10px;
margin-bottom: 20px;
}

ol li {
margin: 0 0 5px 0;
font-size: 95%;
	text-align:justify;
line-height: 150%;
}
ul {
margin:0px 4px 8px 16px;
padding: 0;
list-style: url("imagenes/list-disc-orange.png");
}
ul li {
margin: 0 0 5px 0;
font-size: 95%;
	text-align:justify;
line-height: 150%;
}
ul ul {
	list-style: url("imagenes/list-disc-blue.png");
}
ul ul li {
margin: 0 0 2px 0;
font-size: 95%;
line-height: 150%;
}

Tablas

Una tabla HTML5 puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags.

Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Adenás de los tags thead y tbody,

Las tablas en html 5 no usan atributos de presentación. Como los atributos de presentación van siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentación tales como "border".

Las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el código. Cuando el contenido de una celda debe ser vacío, use siempre un espacio en blanco (&nbsp;) en su lugar.

Esto hará que tu página sea compatible, dado que algunos navegadores tienen problemas al mostrar celdas vacías.

Ejemplo

Código Efecto visual
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
Celda 7 Celda 8 Celda 9

Agrupación

Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead), el cuerpo (tag HTML tbody) y el pie (tag HTML tfoot). Cada uno de estos tags encierra un grupo de filas. Estas divisiones ayudan a hacer las tablas fáciles de comprender, especialmente cuando deben ser mostradas en más de una página (por ejemplo, cuando una tabla larga se imprime). En dicho caso, los encabezados y pies pueden ser mostrados en cada página.

Dentro del elemento table se pueden utilizar atributos de suma utilidad: sumary="...", title="...", class="...", id="...", lang="...".

Estos atributos proporcionan una buenas dosis de semántica a una tabla.

Ejemplo: Campeones NFL

<table>
<caption>Campeones NFL</caption>
<thead>
<tr bcolor='#ff9900'>
 <th>Temporada</th>
   <th>Campeón</th>
  <th>Marcador</th>
  <th>Subcampeón</th>
  <th>Estadio</th>
</tr>
</thead>
<tbody>
<tr><td>1967</td><td>Green Bay Packers(1)</td><td>35-10</td>
<td>Kansas City Chiefs</td><td>L. A. Memorial Coliseum</td></tr>
<tr><td>1968</td><td>Green Bay Packers(2)</td><td>33-14</td>
<td>Oakland Raiders</td><td>Miami Orange Bowl Stadium</td></tr>
<tr><td colspan='5'>( ) : Indica la posición ocupada en su conferencia</td>
</tr>
</tbody>
</table>