6.1 Fundamentos de sintaxis y semántica de HTML5
Antes de empezar con la parte técnica de este curso, te recomendamos que escribas el código de los ejercicios y de cualquier proyecto en general en algún editor para desarrollo. Puedes utilizar Notepad ++, ya que es open source.
La estructura de una página HTML5
HTML se usa para crear contenido y metadatos que usan los navegadores para representar y mostrar información. El contenido HTML puede incluir texto, imágenes, audio, video, formularios, listas, tablas y muchos otros elementos. Una página HTML también puede contener hipervínculos que conectan páginas entre sí y a 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 qué versión de HTML usa la página.
- Una sección HTML que contiene los siguientes elementos:
- Un encabezado que contiene información sobre la página para el navegador. Esto puede incluir su principal idioma, juego de caracteres, hojas de estilo asociadas y archivos script, información del autor y palabras clave para los motores de búsqueda.
- Un cuerpo que contiene todo el contenido visible de la página.
- Esto es válido para todas las versiones de HTML, incluyendo HTML5.
- Una página Web HTML5 debe incluir una declaración DOCTYPE y un elemento <html> que a su vez contiene un elemento <head> que contiene el título y conjunto de caracteres de la página y un elemento <body> para el contenido.
A continuación se muestra un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Ejemplo de HTML5 </title>
</head>
<body>
</body>
</html>
Haz clic aquí para ver el ejemplo.
A lo largo del tema se explicarán punto por punto los elementos básicos para el uso de HTML5 en un proyecto. Con la intención de que te sea sencillo identificar lo más relevante, se separará en conjuntos de información.
En la siguiente tabla puedes conocer la información de las especificaciones básicas de HTML:
Haz clic en cada elemento para conocer más.
Los navegadores, lectores de pantalla y otros elementos de lectura, usan el atributo "lang" para saber cuál es el idioma en el que debe interpretarse el contenido.
<html lang="en">
Para hacer referencia a JavaScript e incluir enlaces a archivos CSS externos, debes incluir el siguiente código:
<link rel="stylesheet" href="styles.css" /
<script src="scripts.js"></script>
Estas líneas definen al archivo “styles.css” como la fuente de los estilos usados en la página Web y al archivo “scripts.js” como fuente de los códigos JavaScript.
El encabezado y el cuerpo de una página Web usan elementos HTML para definir su estructura y contenido. Un elemento consiste en etiquetas y contenido, incluye contenido entre un “tag” de inicio y un “tag” de fin.
Ciertos elementos, como la regla horizontal, no necesitan contenido, consisten de un solo elemento de cierre automático. Estos se conocen como elementos vacíos.
¿Confuso? A continuación se muestran varios ejemplos:
Me gustan <a href="/manzanas.html">las manzanas</a> y naranjas.
En el ejemplo anterior:
- <a Es el elemento.
- href Es el atributo.
- “/manzanas.html” es el valor del atributo “href”.
Para poner en práctica esta información, escribe lo siguiente:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Etiquetas, elementos, atributos y contenido</title>
</head>
<body>
<h1 class="blue">Una introducción a los elementos, etiquetas y contenidos</h1>
<p>Los elementos consisten de <strong>contenido</strong> entre un tag de
<em>inicio</em> y un tag de <em>fin</em>.</p>
<hr />
<p>Ciertos elementos, como el elemento de regla horizontal, no necesitan
contenido, consisten de un solo elemento de cierre automático. Estos se
conocen como elementos vacíos.</p>
</body>
</html>
Al terminar, tu página debe verse así.
Puedes organizar tu página usando encabezados y párrafos.
Los símbolos <h1>, <h2>, <h3>, ..., <h6> identifican a seis niveles de texto del encabezado. Puedes usar <h1> para identificar el encabezado principal de la página entera, <h2> para identificar los títulos de cada sección en la página, <h3> para identificar las subsecciones dentro de esos encabezados secundarios, y así sucesivamente.
Por ejemplo:
<h1>Encabezado Principal h1</h1>
<h2>Encabezado o Subencabezado h2</h2>
<h3>Encabezado o Subencabezado h3</h3>
<h4>Encabezado o Subencabezado h4</h4>
<h5>Encabezado o Subencabezado h5</h5>
<h6>Encabezado o Subencabezado h6</h6>
Posteriormente, también puedes generar información en párrafos de texto a través de <p>.
Ahora bien, dentro de los párrafos de contenido de tu página Web puedes incluir elementos de estilo para dar énfasis al texto o para organizarlo de distinta forma:
Énfasis
Para añadir énfasis al contenido del texto puedes utilizar el tag “<em>”. El navegador generalmente muestra este contenido en cursiva.
Resaltar
<strong> identifica el texto que es más importante que el texto que lo rodea. El navegador generalmente muestra este contenido en negrita.
<p>El siguiente <strong>párrafo</strong> combina diferentes opciones para <em>resaltar</em> y dar <em>énfasis</em> al <strong>texto</strong> que se escribe en el mismo.</p>
Negrita y cursiva
<b> e <i> identifican el texto a representar en negrita o en cursiva, respectivamente.
Esta palabra la vamos a poner en <b>negrita</b> y esta otra <i>cursiva</i>
Listas
HTML define una serie de elementos que puedes usar para crear listas de elementos de contenido. Puedes crear listas ordenadas, desordenadas y descriptivas.
Lista ordenada
Puedes usar el elemento “ol” para definir una lista ordenada. Los elementos en la lista se denotan usando el elemento “li”.
Por ejemplo:
<ol>
<li>Plátanos</li>
<li>Mangos</li>
<li>Cerezas</li>
<li>Duraznos</li>
<li>Uvas</li>
</ol>
Lista desordenada
Por otro lado, puedes usar “ul” para indicar listas desordenadas. Al igual que con las listas ordenadas, puedes usar “li” para enlistar el texto.
<ul>
<li>Plátanos</li>
<li>Mangos</li>
<li>Cerezas</li>
<li>Duraznos</li>
<li>Uvas</li>
</ul>
Por último, las listas descriptivas consisten en un conjunto de agrupaciones de términos o descripciones; es decir, incluye un número de términos, cada uno de los cuales va acompañado de una definición de ese término. Se utilizan tres elementos para definir listas de descripción: dl, dt y dd. Estos elementos no definen atributos.
<dl>
<dt> Manzana </ dt>
<dd> La manzana es la fruta del manzano </ dd>
<dd> <i> Malus doméstica </ i> </ dd>
<dt> Plátano </ dt>
<dd> El plátano es la fruta partenocarpia del plátano </ dd>
<dd> <i> Musa acuminata </ i> </ dd>
<dt> Cereza </ dt>
<dd> La cereza es la fruta de hueso del género <i> prunus </ i> </ dd>
</ dl>
6.2 Imágenes, hipervínculos, formas
¿Cómo se pueden desplegar imágenes a través de HTML? Para ello se utiliza <img>, este elemento no requiere una etiqueta final, ya que no engloba ningún contenido. Además de los atributos generales, es posible definirla mediante varios atributos:
- El atributo src especifica un URL que identifica la ubicación de la imagen que se mostrará.
- El atributo alt identifica una alternativa de texto para mostrar en lugar de la imagen si el navegador todavía está descargando o no puede mostrarlo por alguna razón; por ejemplo, si el archivo de imagen está inaccesible. Por lo general, describe el contenido de la imagen.
- Sólo el atributo src es obligatorio.
A través de código esto podría verse así:
<img src="logo.png" alt="Logo" />
A través de HTML se pueden vincular documentos. La etiqueta <a>, también conocida como ancla, permite identificar una sección de contenido para vincularla a otro recurso en Internet. Por lo general, el objetivo de este enlace de hipertexto es otra página Web, pero también podría ser un archivo de texto, imagen, archivo comprimido, correo electrónico o servicio Web.
<a href="http://html5funprofit.com"/> Ejemplo
Las formas son fundamentales en cualquier aplicación y página Web; sea que estés actualizando tu estado de Facebook, pagando una cuenta en línea o programando una cita, los formularios hacen que todo esto sea posible. El elemento <form> sirve para identificar un área de la página Web que actuará como un formulario de entrada. Puede agregar controles y elementos de texto al contenido del elemento del formulario para definir su diseño.
Un ejemplo sería:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form method="post" action="/projects/1">
<fieldset id="personal_information">
<legend>Información del proyecto</legend>
<ol>
<li>
<label for="name">Name</label>
<input type="text" name="name" autofocus="autofocus"/>
</li>
<li>
<input type="submit" value="Submit"/>
</li>
</ol>
</fieldset>
</form>
</body>
</html>
Haz clic aquí para ver el ejemplo.
Del código anterior:
- El atributo “method” define la forma en que se mandarán los datos al servidor.
- El atributo “action” define el URL a donde se envían los datos del formulario.
- El elemento “fieldset” define un grupo de información en el formulario.
- El atributo “label” define una etiqueta en el formulario.
- El elemento “input” con atributo type="text" define una entrada de texto.
- El elemento “input” con atributo type="submit" define un botón de envío al servidor definido en “action”.
La idea de este ejemplo es ingresar el nombre de un proyecto y mandar la información del formulario a procesarse a un URL. Puedes usar algún editor de texto y guardar el código anterior con el nombre Ejemplo3.html y luego abrir el archivo con algún navegador de Internet, el resultado se vería así:
