sábado, 14 de enero de 2012

El Lenguaje HTML


Generalidades
El lenguaje  HTML es un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. Este lenguajees una aplicacion del GSML(standard generalized mackup languaje).
Fundamentos:
Caracteres:
Dependiendo del editor de textos el documento HTML puede tener distintos juegos de caracteres.
Toda cadena de caracteres  se visualizara en el navegador.
Para reducir los documentos a ASCII de 7 bits y representar los caracteres empleados para marcar el texto, se definen dos mecanismos de referencia:

-Referencia por nombre: el caracter se representa con un & seguido del nombre del caracter y un punto y coma. Por ejemplo:
&

-Referencia numerica: en lugar de dar la referencia por nombre, se escribe # seguido del numero de caracter. Por ejemplo:
& 
Marcas:
Las marcas delimitan los elementos de un documento HTML, como cabeceras, parrafos, etc.
Las marcas siempre constan de dos partes, una marca de inicio y otra de final.
Las marcas iniciales se escriben entre los simbolos "<"y">" y las finales entre "</"y">".Por ejemplo:
<H1>Contenido</H1> es una cabecera de nivel uno.
Al utilizar algunos elementos, no siempre es obligatorio la marca de final de cierre.
Nombres:
Los nombres se componen se una letra seguida de letras.
Atributos:
Cuando una marca inicial admite atributos, estos se escriben a continuacion del nombre del elemento:
nombre_atributo=valor_atributo
Aunque en algunos casos, basta con el nombre del atributo.
El valor de un atributo puede ser:

-Una cadena de caracteres entre comillas que contenga el simbolo de fin de marca (>).
-Un  nombre.
Comentarios:
La manera de incluir se realiza mediante la marca de comentarios:
<! ... >
Cada comentario comienza con "..." e incluye todo el texto.

Identificacion del nivel HTML de un documento.
El lenguaje HTML se compone por bloques, cada uno identifican mediante una instruccion de inicio y otra de final.

ORGANIZACION DE UN DOCUMENTO

Los documentos en formato HTML son un documento de elementos anidados. En el nivel mas alto, nos encontramos HTML que consta de dos partes:: cabecera y cuerpo.
En la cabecera se proporciona informacion acerca del documento, mientras que el cuerpo contiene el texto de la pagina.
Cabecera:
La cabecera es una informacion acerca de las caracteristicas generales del documento. Las marcas de principio y fin del bloque son:
<HEAD>
...
</HEAD>
Puede contener los siguientes datos:

-Titulo(TITLE). Indica el nombre del documento.

-Direccion de base(BASE). Proporciona una direccion de base para interpretar los enlaces relativos cuando el documento se lee fuera de su contexto.

-El documento es un indice(ISINDEX). Si se pone la palabra clave ISINDEX, el cliente interpretara que la pagina es un indice y permitira al usuario introducir palabras claves para buscarlas.

-Enlaces relacionados(LINK).En la cabecera podemos ncluir varios enlaces relacionados con el documento, como versiones anteriores, direccion del autor, etc.

-Metainformacion(META).Sirve para proporcionar informacion sobre el documento que no pueda ser expresada en los campos anteriores. La informacion se escribe usando nombre/valor que pueden ser empleados para dos propositos:

1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera.
2. Para que un usuario incluya informacion adicional sobre el documento.
Cuerpo:
El cuerpo contiene la parte más importante del documento HTML. Es donde vamos a insertar todo el texto y los objetos van a ser presentados al usuario.
<BODY>
</BODY>

MANUAL BASICO DE HTML

Introducción
El internet es una exelente herramienta para la búsqueda de información, está al borde de una transformación de como utilizarlo.

¿Qué es HTML?
Son las inciales de Hiper Text Markuo Language.Es un conjutno de etiquetas incluidas en archivos de textis que definen la estructura de un documento WWW y sus vínculos
.
¿Por donde comenzar?
  • Utilizar programas especialmente parael desarrollo de páginas web(Microsoft Office 97)
  • Uilizar un editor de textos (Blog de notas)

    Páginas Web
El hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un navegador de Internet.
Etiquetas
La etiqueta cuplesu función realizando los siguientes pasos:
nombre de a etiqueta "<>"
testo/grafico/etiqueta
</nombre de la etiqueta> "</>"

Al acabar el documente se guarda con la terminacion .html

Estructura básixca de una pagina web

Obligatoriamente debe llevar
<html></html> indica al navegador que el docmento que se abre es el mismo
<head></head> es el encabezado de la pa´gina
<body></body> cuerpo de la página
  • El Comando HTML


 Se utiliza para delimitar el documento.
<html> </html>
Es conveniente incluirlo para evitar posibles conflictos con futuras versiones del lenguaje HTML.
  • El Comando Párrafo
Inserta autómaticamente un salto de línea al final del párrafo.
<p> </p>

  • El Comando Salto de Línea
Este comando indica donde se debe cortar el texto y donde debe comenzar de nuevo debido a que se coloca imagenes, utilizaremos el atributo CLEAR que podra tener los valores : left, rigth y all.

  • Los Comando de Encabezamiento
El texto HTML cuenta con 6 niveles de encabezados. El priemer nivel de encabezado sirve para crear las divisiones mayores del texto; por el contrario el sexto nivel  mostrará el nivel más pequeño.
Siempre escribiremos los comando de encabezado en pareja.

  • Apariencia del Texto
Para variar la aperiencia del texto tenemos varios comandos, que pueden ser utilizados conjuntamente:
-Negrita: <B>...</B>
-Cursiva: <EM>...</EM>
-Parpadeo: <BLINI>...</BLINI>
-Asignar un tamaño fijo y apariencia de caracteres de máquina de escribir: <TT>...</TT>
-Subrayado: <U>....</U>

  • Listas
En un documento de HTML se puede incluir dos tipos de listas, una lista podrá englobar otras listas.

- Listas no numeradas.- Es decir no ordenadas:
<UL>....</UL> Los elementos de esta lista se indicaran con: <LI>...</LI>.


-Listas numeradas.- Se  crfean por medio del coamndo:
<OL>...<OL>: Al igual que en las listas numeradas se indicaran por: <LI>...</LI>.


-Listas Descriptivas.- Usamos el comando:
<DL>...</DL>: Cada uno de los elementos de la lista sera indicado por el comando:

                                              <DT>....</DT>
Y un texto para cada título sera indicado por el coando:

                                               <DD>....</DD>
Ejemplo:

 <body>
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado de hipertexto</dd>
<dt>CSS</dt>
<dd>Hojas de estilo en casacada</dd>
<dt>PHP</dt>
<dd>Preprocesador PHP de hipertexto</dd>
</dl>
</body>


    Centrando Texto
    Se puede centra texto utilizando el comando:
    <center>...</center>
    
    
    Simplemente tendremos que delimitar el texto que deseamos que aparezca centrado
    Lineas Horizontales 
    Sirven para separar el el texto de los elementos o de la página, esto podremos hacerlo insertando una línea horizontal con el comando: <HR>
      Enlaces
    -Los que hacen referencia a otra parte del mismo documento
    -Los que hacen referencia a otro docuemento
    -Los que hacen referencia a otra parte de otro documento
    -Los que hacen referencia a una dirección de correo electronico  Referencias
    Tendremos la posibilidad de crear enlaces que lleven al usuario de un lugar del documento a otro, dentro del mismo documento. Este tipo de enlaces es conocido como referencias locales, que se componen de dos partes
    1.-La Referencia
    Es la zona donde el usuario hace clic para trasladarse a otra parte del documento. Esta zona aparecerá subrayada en el documento. Para crear una referencia local delimitaremos la zona con el comando
    <A href="#nombre"> Texto del enlace </A>
    2.-El nombre Referenciado
    Esta es la zona donde accede el usuario al hacer clic en la referencia correspondiente
    Paracrear un nombre local, tendremos que delimitar la zona mediante el comando:
    <A NAME="nombre"...</A>
    • Referencias a otros Documentos
    Para crear un enlace a otro documento es necesario conocer la ubicación de documento
    Existen 2 tipos de referencia de ubicación:
    1.-Relativa
    Tenemos que especificar la posición del documento en la estructura del subdirectorio, a partir del documento actual Utilizamos el comando:
    <A href="ubicación">Texto del enlace </A>
    Este tipo de enlace solo puede ser realizado a un documento
    que este en el mismo ordenador
    2.-Absoluta
    Tenemos que especificar la dirección o URL. Usamos el comando:
    <A "href=http//ordenador/directorio/archivo">
    En "ordenado" indicaremos el nombre de la máquina en la que se encuentre el documento. En directorio y archivo indicaremos la ubicación del archivo dentro del documento
    • Referencias a un lugar de otro documento
    Indicamos el URL del documento al que hacemos referencia, escribimos un signo # y finalmente introducimos el nombre de la zona a enlazar
    • Referencia a una dirección e e-mail
    Es recomendable incluir en nuestras páginas web un enlace o directorio de correo electrónico para recibir sugerencias realizadas por los usuarios