Introducción al lenguaje de marcas e hipertexto HTML5

HTML5 es un lenguaje que se utiliza para la creación de páginas de Internet (Hypertext Markup Language, versión 5). Los documentos HTML son archivos de texto simple con una serie de instrucciones que son interpretadas por el navegador de internet.

Para trabajar con HTML5 requerimos sólo dos programas:

Un editor de texto, como el block de notas de Windows (o Notepad++), o un editor especializado en HTML como Brackets.
Un navegador como Chrome, Internet Explorer o Mozilla Firefox

Con el editor de texto escribiremos los documentos HTML5, que guardaremos inicialmente en una carpeta preestablecida del disco duro (se deben guardar con la extensión la extensión .html). Con el navegador visualizaremos los cambios verificando que operan a nuestra conveniencia. Ya que estemos satisfechos con el resultado, subiremos el archivo HTML5 al Internet para compartirlo con otros usuarios.

En esta ocasión y dado las limitantes de tiempo que nos impone el próximo fin de semestre nos apoyaremos en el siguiente curso gratuito, al cual les pido se inscriban de inmediato y lo estudien.

Curso MOOC de edición de páginas web con HTML 5 y CSS 3.

Indice:

Tema 1: Estructura semántica de HTML5

Tema 2: Etiquetas básicas

Tema 3: Imágenes, listas y enlaces

Tema 4: Introducción a CSS

Tema 5: Las propiedades CSS más utilizadas

Tema 6: Creación de un favicon

Tema 7: Bordes redondeados

Tema 8: Sombras

Tema 9: Fondos

Tema 10: Tipografías

Tema 11: Ventanas flotantes (float)

Tema 12: Centrar el contenido

Tema 13: Posicionamiento (position)

Tema 16: iframe

Tema 19: Columnas de texto

Tema 20: Vídeo

Tema 21: Audio

Tema 22: Transparencias y degradados

Tema 23: Animaciones (animation)

Tema 24: SVG

Tema 25: Canvas

Tema 26: Adaptación a móviles (mediaqueries)

Tema 27: Contenido editable

Este es el un MOOC (Massive Open Online Course) elaborado para EDUTOPIA por el Dr. Javier López

A lo largo del curso ocuparemos un editor de texto, se sugiere el uso de Notepad++.
Descargar la versión en español.

El lenguaje HTML se estructura utilizando marcas (también llamadas etiquetas o tags), encerradas entre dos signos de menor y mayor ˂ ˃, como se indica a continuación:

˂marca [atributos]˃ texto ˂/marca˃

Cuando el navegador encuentra el inicio de un marca (el símbolo menor ˂) examina todo el texto que encuentra hasta el final de la marca (el símbolo mayor ˃) lo interpreta y lo aplica al texto correspondiente. Al texto la parte inicial y final de la marca se le denomina elemento HTML.

Algunas marcas incluyen atributos que modifican las propiedades de la marca. El valor de cada atributo se expresa encerrado entre comillas.

˂marca atributo1=”valor1” atributo2=“valor2”.............. ˃

Resumiendo, HTML5 es un lenguaje de marcas. Emplea tres tipos de elementos

1. Marcas

Ejemplo: < p > Esto es un párrafo < / p >

2. Atributos

Ejemplo:

< h 1 align=“center”> Título H1 centrado < / h 1 >

3. Valores

Ejemplo: En el ejemplo anterior, el valor es center

• Estructura básica de una página en HTML5

HEAD “Cabecera”: Se inicia mediante el comando < head > y se termina con </head >. La cabecera guarda información del documento (metadatos), tal como el título del documento (que aparecerá en la barra de título de la ventana del navegador), el autor, etc.

BODY “Cuerpo”: Se inicia mediante el comando < body > y se termina con el comando < / body >. Dentro del cuerpo del documento se incluye toda la información que queremos mostrar al usuario.

Los primeros marcadores HTML5:

< !doctype html >	declara que el tipo de documento es html, para que el navegador despliegue la información correctamente
< html >	Corresponde propiamente a toda la página Web
< head >	Información para el navegador de internet
< body >	Contenido visible de la página Web

Elementos que contiene el head

< head >	Contiene la información acerca de la página Web que ve el navegador (no la ve el usuario)
< title >	Una breve descripción que identifica a la página
< meta >	Para proporcionar meta datos al navegador
< meta charset="utf-8" >	Para que el navegador despliegue eñes y acentos

HTML5 se diseñó para páginas Web en inglés, por ello los navegadores no manejan bien las eñes ni los acentos. Para corregir esto debemos informarle al navegador que el lenguaje es español y el juego de caracteres es Unicode (UTF-8).

Ejemplo1 incluye head y body

En el ejemplo anterior lang="es" indica al navegador que el lenguaje es español.
< meta charset="UTF-8" > le indica utilizar el formato de caracteres Unicode UTF-8 que es el más utilizado en la red, porque acepta todos los lenguajes europeos.

En su editor de texto reproduzcalo, cambiando lo que considere y grábelo con terminación html.
Nota. Es importante que su editor de texto este configurado para guardar los archivos html con formato UTF-8

El cuerpo del documento (body), usualmente agrupa varios contenedores.

Algunas etiquetas semánticas de HTML5

< div >	Contiene cualquier tipo de contenido
< header >	Contiene el encabezado por ejemplo con nombre y logo
< nav >	Contiene los enlaces o barra de navegación
< section >	Contiene una sección del documento usualmente agrupa a varios artículos
< article >	Contiene un subdocumento corto
< p >	Contiene un párrafo
< aside >	Contiene elementos relacionados colocados a un costado
< footer >	Contiene los datos de pie de página

La etiqueta section agrupa bloques de contenido de cierto tema. Es frecuente que el tema este dividido en artículos. Por ejemplo si la sección corresponde a los avisos de interés de la página de nuestra escuela, podríamos tener un artículo (article) con los próximos eventos deportivos, otro con los cursos de extensión, etcétera. La etiqueta article se emplea para agrupar fragmentos independientes de contenido de una misma sección

Ejemplo section article y footer

Párrafos, líneas y encabezados

< hr >	Dibuja una línea horizontal
< br >	Inserta un salto de línea
< p >	Separa párrafos
< blockquote >	Crea Sangrías
< b >	escribe texto en Negrita (Bold)
< i >	Escribe texto en Cursiva (Italics)
< h1 >	Encabezados h1, h2, h3, h4, h5, h6

Ejemplo hr
Ejemplo BR

Ejemplo Comentarios

Ejemplo h1 y p

Ejemplo h1 h2 h3 h4 h5 h6

Ejemplo b y i

Ejemplo blockquote

Ejemplo Instituto Tecnológico de Nuevo Laredo

Comentarios ˂!-- -˃

Lo que escribamos dentro de esas marcas no se procesa. Sirve para recordarle al programador la información que considera relevante.

Ejemplo Comentarios

Imágenes

Formatos de imagen

GIF	256 colores, poco peso, no permite mostrar fotos
PNG	64 bits, buena calidad, acepta transparencia
JPG	24 bits, mediana calidad
SVG	Vectorial, acepta transparencia, es más tardado

Los nombres de las imágenes deben ser alfanuméricos, sin espacios ni acentos. Debemos colocar las imágenes en la carpeta img y situar dicha carpeta dentro de la misma carpeta donde se encuentran los archivos .html

img	Permite agregar imágenes
figure	Es un contenedor de imagenes
figcaption	Contiene el pie de foto de la imagen

Ejemplo img

Medidas. Con los parámetros width y height podemos cambiar la anchura y la altura. Para cambiar el tamaño sin deformar la imagen es suficiente modificar uno solo de los parámetros.

Ejemplo img width

Texto alternativo. El atributo alt corresponde a un texto alternativo que se muestra cuando por alguna causa no puede desplegarse la imagen.

Ejemplo img alt

La etiqueta figure permite mostrar imágenes, gráficas o ejemplos de código, acompañadas de un texto descriptivo en una etiqueta figcaption.

Ejemplo figure

En el siguiente ejemplo se muestran 3 imágenes relacionadas.

Ejemplo figure3

Listas numeradas ˂ol˃

Son aquellas en las que cada renglón inicia automáticamente con un número en orden creciente. La marca para crear una lista ordenada es < ol > .... < /ol >

Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca < li > .... < /li >.

Es posible especificar el tipo de numeración que se dará especificando el atributo type.

"1": para números arábigos,
"A": para letras mayúsculas.
"a": para letras minúsculas.
"I": para números romanos en mayúscula.
"i": para números romanos en minúscula.

Ejemplo listas numeradas

Viñetas o Listas no numeradas < ul >

La marca para crear una lista con viñetas es < UL > .... < /UL >

Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca < LI > ....

< /LI > .

Es posible en las listas desordenadas especificar el símbolo que va a aparecer delante de cada elemento de la lista, empleando los modificadores type="square", type="circle" y type="disc".

Las viñetas pueden ser anidadas una dentro de otra.

Ejemplo listas con viñetas

Cita en bloque

Una cita en bloque es un párrafo (o bloque de texto) que se distingue visualmente del resto del documento utilizando sangrías.

HTML5 permite que hoy nos conectemos con facilidad desde computadores, tabletas, teléfonos móviles, y otra gama de dispositivos. HTML5 es el lenguaje en el que es creada la web.

Ejemplo blockquote

Insertar caracteres especiales

Hay símbolos que HTML5 usualmente no despliega en pantalla, como son menor que, Mayor que, el amperstand, las comillas. Para mostrarlos, debemos usar su nombre en código. Por ejemplo para mostrar el signo "<" debemos escribir el código correspondiente como muestra la tabla.
También si requerimos insertar espacios en blanco adicionales debemos emplear el código respectivo las veces que se requiera.

Ejemplo caracteres especiales

Hay páginas con convertidores en línea que automáticamente insertan los caracteres HTML, entre ellas Postable y Caracteres Especiales.

Estilos

Formato de carácter ˂b˃ ˂u˃ ˂i˃

Permiten mostrar el texto enfatizado (Bold), subrayado (Under lined), inclinado (Itallics).

Ejemplo Formatos de caracteres

Formato Subíndices y Superíndices

En algunas ocasiones se requiere manejar subíndices o superíndices, por ejemplo al escribir ecuaciones. Para ello utilizamos las etiquetas

Ejemplo Sub y Sup