domingo, 1 de febrero de 2015

HTML5


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.

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 14: Transform
 Tema 15: Formularios
 Tema 16: iframe
 Tema 17: Transition
 Tema 18: Storage
 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).


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


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

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.

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

Tema 4: Introducción a CSS
Tema 5: Las propiedades CSS más utilizadas
Tema 6: Creación de un favicon