sábado, 19 de abril de 2014

Ejemplo HTML5 de las opciones de edición disponibles

Fuente predeterminada
Arial
Courier
Georgia
Helvetica
Times
Trebuchet
Verdana

La mas pequeña
Pequeña
Normal
Grande
La más grande

Encabezado

Subencabezado

Encabezado Secundario

Normal

Negritas
Inclinado
Subrayado
Tachado
Rojo
Verde
Azul

Color de fondo amarillo
Color de fondo rojo
Color de fondo verde
Color de fondo azul
  1. Primero
  2. Segundo
  3. Tercero
  • Punto 1
  • Punto 2
  • Punto 3
En este párrafo inserté intencionalmente

viernes, 18 de abril de 2014

Introducción al HTML5

HTML5, el lenguajes de marcas e hipertextos

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++)
·        ·     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 html al internet para compartirlo con otros usuarios.

El lenguaje HTML se estructura utilizando marcas (etiquetas), encerradas entre dos signos de menor y mayor, como se indica a continuación:
˂marca [atributos]˃
Cuando el navegador encuentra el inicio de un marca (el símbolo menor ˂;) examina todo el texto que encuentra hasta el final del marca (el símbolo mayor ˃;) lo interpreta y lo aplica al texto correspondiente. Al texto con la parte inicial y final de un marca se le denomina elemento HTML.

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

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

Un documento HTML usualmente se compone de las siguientes 2 partes:

˂HTML˃

˂HEAD˃ Encabezado del documento ˂/HEAD˃

˂BODY˃ Cuerpo del documento ˂/BODY˃



˂/HTML˃

HEAD “Cabecera”: Se inicia mediante el comando y se termina con . 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 y se termina con el comando . Dentro del cuerpo del documento se incluye toda la información que queremos mostrar al usuario.

Ejemplo de un programa HTML5 simple no incluye la cabecera):

˂!DOCTYPE html˃
˂html˃
˂body˃
˂h1˃ Encabezado del documento ˂/h1˃
˂p˃ Primer párrafo del documento ˂/p˃
˂/body˃

˂/html˃
 
En el ejemplo anterior

  • DOCTYPE declara que el tipo de documento es html, para que el navegador despliegue la información correctamente
  • El texto entre ˂html˃ y ˂/html˃ describe el contenido de la página Web
  • El texto entre ˂body˃ y ˂/body˃ es el contenido visible
  • El texto entre ˂h1˃ y ˂/h1˃ es lo que se despliega como encabezado
  • El texto entre ˂p˃ y ˂/p˃ es lo que se despliega como un párrafo normal
Guarde el programa de ejemplo con el nombre Ejemplo1.html  en la carpeta Practicas_HTML. Para ejecutarlo abra el explorador de Windows busque la carpeta y del doble clic al archivo. El resultado debe ser similar al siguiente:

HTML5 se diseñó para páginas Web en inglés, por ello el programa anterior no maneja 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).

El ejemplo siguiente incluye las modificaciones para manejar correctamente todos los caracteres de nuestro lenguaje:

˂!DOCTYPE html˃
˂html lang="es"˃
˂head˃
˂meta charset="UTF-8"˃
˂title˃ Poner Título a una página Web˂/title˃
˂/head˃

˂body˃
˂p˃ Aquí mostramos un texto incluyendo ˂/p˃
˂p˃ eñes y vocales acentuadas ( ñ Ñ  á Á é É í Í ó Ó ú Ú ) ˂/p˃
˂/body˃

˂/html˃

Manejo De Textos

Párrafo ˂p˃

La marca ˂p˃ permite insertar párrafos alineados a la izquierda en nuestro documento. Entre un párrafo y otro HTML introduce un espacio en blanco para una mayor legibilidad.

Línea horizontal de separación ˂hr˃
La marca ˂hr˃ introduce una línea horizontal que permite separar temas del documento.

Salto de línea ˂br˃
La marca ˂br˃ introduce un salto de línea en el punto del documento en se coloca. Equivale al punto y aparte de un texto normal.    (significado Break).   No necesita de fin de marca.

Ejemplo:

˂!DOCTYPE html˃
˂html lang="es"˃
˂head˃
˂meta charset="UTF-8"˃
˂title˃ Marcador de Párrafo ˂/title˃
˂/head˃

˂body˃
˂p˃ Este es un párrafo simple, seguido por una línea horizontal de separación ˂/p˃
˂hr˃
˂p˃ Dentro de un mismo párrafo ˂br˃
podemos escribir varias líneas ˂br˃
si utilizamos el comando BR ˂br˃
break las veces que consideremos ˂br˃
necesario y de una manera muy simple ˂br˃
y conveniente ˂/p˃

˂/body˃


˂/html˃