LENGUAJE HTML

LENGUAJE HTMLLENGUAJE HTML

Miguel Angel Hernández TecúMiguel Angel Hernández Tecú

¿Qué es lenguaje ¿Qué es lenguaje HTML?HTML?

El El HTML HTML es un sistema para estructurar es un sistema para estructurar documentos. Estos documentos pueden documentos. Estos documentos pueden ser mostrados por los visores de páginas ser mostrados por los visores de páginas Web en Internet, como Netscape, Mosaic Web en Internet, como Netscape, Mosaic o Microsoft Explorer. o Microsoft Explorer.

Por el momento no existe un estándar Por el momento no existe un estándar de de HTMLHTML, aunque existen diferentes , aunque existen diferentes revisiones o niveles de estandarización, revisiones o niveles de estandarización, el 1.0, el 2.0 , el 3.0, el 3.2 y el 4.0, lo el 1.0, el 2.0 , el 3.0, el 3.2 y el 4.0, lo que produce que algunos visores no que produce que algunos visores no "comprendan" en su totalidad el "comprendan" en su totalidad el contenido de un documento. contenido de un documento.

Básicamente, el HTML consta de texto Básicamente, el HTML consta de texto plano (ASCII) y una serie de órdenes a plano (ASCII) y una serie de órdenes a través de marcas o etiquetas (tags). través de marcas o etiquetas (tags).

Ejemplos: Ejemplos:

Directiva cerrada Directiva cerrada <CENTER> Mi página Web </CENTER> <CENTER> Mi página Web </CENTER>

Directiva abierta Directiva abierta <HR> <HR>

Directiva con parámetros Directiva con parámetros <BODY bgcolor="#FFFFFF"> </BODY> <BODY bgcolor="#FFFFFF"> </BODY>

Los ficheros que contienen documentos Los ficheros que contienen documentos HTML suelen tener la extensión .html HTML suelen tener la extensión .html o .htm. En este manual se han fijado los o .htm. En este manual se han fijado los siguientes criterios a la hora de escribir siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML: la sintaxis de las directivas de HTML:

1º) Las directivas se indican en letra 1º) Las directivas se indican en letra mayúscula y en negrilla.mayúscula y en negrilla.2º) Los parámetros de las directivas se 2º) Los parámetros de las directivas se indican en letra minúscula y negrilla. indican en letra minúscula y negrilla. 3º) El resto de elementos se indican en 3º) El resto de elementos se indican en letra normal.letra normal.4º) Las palabras a resaltar en el texto 4º) Las palabras a resaltar en el texto se indican en cursiva y negrilla. se indican en cursiva y negrilla.

Estructura básica de Estructura básica de un documento HTMLun documento HTML

Un documento escrito en HTML Un documento escrito en HTML contendría básicamente las siguientes contendría básicamente las siguientes directivas:directivas:

<HTML><HTML> Indica el inicio del documento. Indica el inicio del documento.

<HEAD><HEAD> Inicio de la cabecera. Inicio de la cabecera.

<TITLE><TITLE> Inicio del título del documento. Inicio del título del documento. </TITLE></TITLE> Final del título del documento. Final del título del documento. </HEAD></HEAD> Final de la cabecera del Final de la cabecera del documento. documento.

<BODY><BODY> Inicio del cuerpo del documento. Inicio del cuerpo del documento.

</BODY></BODY> Final del cuerpo del documento. Final del cuerpo del documento.

</HTML></HTML> Final del documento. Final del documento.

La directiva La directiva <HEAD></HEAD><HEAD></HEAD> delimita la cabecera del delimita la cabecera del documento. Dentro de la documento. Dentro de la cabecera es importante definir el cabecera es importante definir el título de la página por medio de título de la página por medio de la directiva la directiva <TITLE></TITLE><TITLE></TITLE>. . Este título será el que aparezca Este título será el que aparezca en la barra de nuestro visor de en la barra de nuestro visor de páginas Web. páginas Web.

Cabecera del Documento Cabecera del Documento

EjemploEjemplo: : – <TITLE><TITLE>La página Web de JuanLa página Web de Juan</TITLE></TITLE>

Dentro de la cabecera de nuestro Dentro de la cabecera de nuestro documento podemos incluir otras documento podemos incluir otras directivas adicionales. La directiva directivas adicionales. La directiva <META><META> indica al visor de Internet las indica al visor de Internet las palabras clave y contenido de nuestra palabras clave y contenido de nuestra página Web. Muchos de los buscadores página Web. Muchos de los buscadores de páginas Web de Internet (Google, de páginas Web de Internet (Google, Yahoo, Lycos, etc...) utilizan el Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir contenido de esta directiva para incluir la página en sus bases de datos. La la página en sus bases de datos. La directiva directiva <META><META> lleva generalmente lleva generalmente dos parámetros, dos parámetros, namename y y contentcontent. .

La directiva La directiva <BODY></BODY><BODY></BODY> indica el inicio y final indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de nuestra pagina Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... Esta nuestra página, textos, gráficos, enlaces, etc.... Esta directiva tiene una serie de parámetros opcionales directiva tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del que nos permiten indicar la "apariencia" global del documento: documento:

background=background= "nombre de fichero gráfico" "nombre de fichero gráfico" – Indica el nombre de un fichero gráfico que servirá Indica el nombre de un fichero gráfico que servirá

como "fondo" de nuestra página. Si la imagen no como "fondo" de nuestra página. Si la imagen no ocupa todo el fondo del documento, esta será ocupa todo el fondo del documento, esta será reproducida tantas veces como sea necesario. reproducida tantas veces como sea necesario.

bgcolor =bgcolor = "código de color" "código de color" – Indica un color para el fondo de nuestro Indica un color para el fondo de nuestro

documento. Se ignora si se ha usado el parámetro documento. Se ignora si se ha usado el parámetro backgroundbackground. Aun así es bueno indicarlo ya que en . Aun así es bueno indicarlo ya que en el caso de que el visor que utilicemos tenga el caso de que el visor que utilicemos tenga desactivado los gráficos sí se verá. desactivado los gráficos sí se verá.

Cuerpo del documentoCuerpo del documento

text =text = "código de color" "código de color" – Indica un color para el texto que incluyamos Indica un color para el texto que incluyamos

en nuestro documento. Por defecto es negro. en nuestro documento. Por defecto es negro.

link =link = "código de color" "código de color" – Indica el color de los textos que dan acceso a Indica el color de los textos que dan acceso a

un Hyperenlace. Por defecto es azul. un Hyperenlace. Por defecto es azul.

vlink =vlink = "código de color" "código de color" – Indica el color de los textos que dan acceso a Indica el color de los textos que dan acceso a

un Hyperenlace que ya hemos visitado con un Hyperenlace que ya hemos visitado con nuestro visor. Por defecto es azul oscuro. nuestro visor. Por defecto es azul oscuro.

El El código de colorcódigo de color es un número compuesto es un número compuesto por tres pares de cifras hexadecimales que por tres pares de cifras hexadecimales que indican la proporción de los colores indican la proporción de los colores "primarios", "primarios", rojorojo, , verdeverde y y azulazul. El código de . El código de color se antecede del símbolo color se antecede del símbolo ##. .

El primer par de cifras indican la proporción El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la de color Rojo, el segundo par de cifras la proporción de color Verde y, las dos últimas, proporción de color Verde y, las dos últimas, la proporción de color Azul. Estos números la proporción de color Azul. Estos números están en numeración hexadecimal. Esta están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 numeración se caracteriza por tener 16 dígitos (en lugar de los 10 habituales). Estos dígitos (en lugar de los 10 habituales). Estos dígitos son: dígitos son:

0 1 2 3 4 5 6 7 8 9 A B C D E F 0 1 2 3 4 5 6 7 8 9 A B C D E F

Es decir, que en nuestro caso, el Es decir, que en nuestro caso, el número menor es el 00 y el mayor el número menor es el 00 y el mayor el FF. Combinando las proporciones de FF. Combinando las proporciones de cada color primario obtendremos cada color primario obtendremos diferentes colores. diferentes colores.

Ejemplos:Ejemplos: #000000#000000

#FF0000#FF0000#00FF00#00FF00#0000FF#0000FF#FFFFFF#FFFFFFColor NegroColor NegroColor RojoColor RojoColor VerdeColor VerdeColor AzulColor AzulColor BlancoColor Blanco

Todos los visores de páginas Web actuales soportan Todos los visores de páginas Web actuales soportan todos los caracteres gráficos de la especificación todos los caracteres gráficos de la especificación ISO ISO 8859-18859-1, que permite escribir textos en la mayoría de , que permite escribir textos en la mayoría de los países occidentales. los países occidentales.

De cualquier forma y como muchos sistemas tienen De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Para usando solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un hacer referencia a estos caracteres se les asigna un código numérico o un nombre de " código numérico o un nombre de " entidadentidad". ". Asimismo hay caracteres que se utilizan para las Asimismo hay caracteres que se utilizan para las directivas de HTML, por ejemplo directivas de HTML, por ejemplo << y y >>. Estos . Estos caracteres pueden ser representados por un código caracteres pueden ser representados por un código numérico o una entidad cuando deseemos que numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo comienzan por el símbolo && (ampersand) y terminan (ampersand) y terminan con el símbolo con el símbolo ;; (punto y coma). (punto y coma).

Juego de caracteres del Juego de caracteres del Documento.Documento.

Espaciados y saltos de Espaciados y saltos de línea línea

En HTML sólo se reconoce un espacio En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los entre palabra y palabra, el resto de los espacios serán ignorados por el visor. espacios serán ignorados por el visor.

Ejemplo:Ejemplo:

Esto es una frase Esto es una frase

Se verá comoSe verá como

Esto es una frase Esto es una frase

Cabeceras Cabeceras En un documento de HTML se pueden En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas de letra) por medio de las directivas <H1><H2><H3><H4><H5><H1><H2><H3><H4><H5> y y <H6><H6>. El texto que escribamos entre el . El texto que escribamos entre el inicio y el fin de la directiva será el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera afectado por las cabeceras. La cabecera <H1><H1> será la que muestre el texto en será la que muestre el texto en mayor tamaño. mayor tamaño.

Ejemplo Ejemplo <H1><H1>Texto de PruebaTexto de Prueba</H1></H1> Se vería como Se vería como Texto de pruebaTexto de prueba

Atributos del TextoAtributos del Texto

Para indicar atributos de texto Para indicar atributos de texto (negrilla, subrayado, etc...) tenemos (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no varias directivas. Algunas de ellas no son reconocidas por determinados son reconocidas por determinados visores de Internet, es por ello que visores de Internet, es por ello que según el visor que estés utilizando, según el visor que estés utilizando, verás el resultado correctamente o verás el resultado correctamente o no. no.

Lista de ElementosLista de Elementos

Existen tres tipos de listas: numeradas, sin Existen tres tipos de listas: numeradas, sin numerar y de definición. numerar y de definición. Las Las listas numeradaslistas numeradas representarán los representarán los elementos de la lista numerando cada uno elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la de ellos según el lugar que ocupan en la lista. Para este tipo de lista se utiliza la lista. Para este tipo de lista se utiliza la directiva directiva <OL></OL><OL></OL>. Cada uno de los . Cada uno de los elementos de la lista irá precedido de la elementos de la lista irá precedido de la directiva directiva <LI><LI>. La directiva . La directiva <OL><OL> puede puede llevar los siguientes parámetros: llevar los siguientes parámetros:

start =start = num num – Indica que número será el primero de la lista. Si no Indica que número será el primero de la lista. Si no

se indica se entiende que empezará por el número se indica se entiende que empezará por el número 1. Se indica numéricamente, independientemente 1. Se indica numéricamente, independientemente del tipo que se elija. del tipo que se elija.

type =type = tipo tipo – Indica el tipo de numeración utilizada. Si no Indica el tipo de numeración utilizada. Si no

se indica se entiende que será una lista se indica se entiende que será una lista ordenada numéricamente. ordenada numéricamente.

Los tipos posibles son: Los tipos posibles son: 11 = = Numéricamente. (1, 2, 3, 4, ... etc.)Numéricamente. (1, 2, 3, 4, ... etc.)aa = Letras minúsculas. (a, b, c, d, ... etc.) = Letras minúsculas. (a, b, c, d, ... etc.)AA = Letras mayúsculas. (A, B, C, D, ... = Letras mayúsculas. (A, B, C, D, ... etc.)etc.)ii = Números romanos en minúsculas. (i, = Números romanos en minúsculas. (i, ii, iii, iv, v, ... etc.) ii, iii, iv, v, ... etc.) II = Números romanos en mayúsculas. (I, = Números romanos en mayúsculas. (I, II, III, IV, V, ... etc.)II, III, IV, V, ... etc.)

ImágenesImágenes

Hasta el momento hemos visto como se puede Hasta el momento hemos visto como se puede escribir texto en una página Web, así como sus escribir texto en una página Web, así como sus posibles formatos. Para incluir una imagen en nuestra posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la directiva página Web utilizaremos la directiva <IMG><IMG>. Hay dos . Hay dos formatos de imágenes que todos los navegadores formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes modernos reconocen. Son las imágenes GIFGIF y y JPGJPG. . Cualquier otro tipo de fichero gráfico o de imagen Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el visor, (BMP, PCX, CDR, etc...) no será mostrado por el visor, a no ser que disponga de un programa externo que a no ser que disponga de un programa externo que permita su visualización. permita su visualización.

La directiva La directiva <IMG><IMG> tiene varios parámetros: tiene varios parámetros: src =src = "imagen" "imagen"

– Indica el nombre del fichero gráfico a mostrar. Indica el nombre del fichero gráfico a mostrar.

alt =alt = "Texto" "Texto" – Mostrará el texto indicado en el caso de que el Mostrará el texto indicado en el caso de que el

navegador utilizado para ver la página no sea capaz de navegador utilizado para ver la página no sea capaz de visualizar la imagen. visualizar la imagen.

align =align = TOP / MIDDLE / BOTTOM TOP / MIDDLE / BOTTOM – Las imágenes, por defecto, se comportan como si fueran un Las imágenes, por defecto, se comportan como si fueran un

carácter, alineándose en la misma línea que el texto que las carácter, alineándose en la misma línea que el texto que las precede o que las sigue. Éste parámetro indica como se alineará precede o que las sigue. Éste parámetro indica como se alineará el texto que siga a la imagen con respecto a ésta. TOP alinea el el texto que siga a la imagen con respecto a ésta. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior. Otras opciones más central, y BOTTOM con la parte inferior. Otras opciones más avanzadas serían: TEXTTOP se alinea justo al comienzo del texto avanzadas serían: TEXTTOP se alinea justo al comienzo del texto más alto de la línea, ABSMIDDLE, se alinea en el centro real de más alto de la línea, ABSMIDDLE, se alinea en el centro real de la imagen y ABSBOTTOM, coloca el texto justo al final de la la imagen y ABSBOTTOM, coloca el texto justo al final de la imagen. Estos tres parámetros son más precisos, pero no todos imagen. Estos tres parámetros son más precisos, pero no todos los navegadores los aceptan. los navegadores los aceptan.

align =align = LEFT / RIGHT LEFT / RIGHT – Si en el parámetro align tiene los valores left o right, la imagen Si en el parámetro align tiene los valores left o right, la imagen

dejará de comportarse como un carácter colocándose a la dejará de comportarse como un carácter colocándose a la izquierda o a la dercha y permitiendo escribir texto a su otro izquierda o a la dercha y permitiendo escribir texto a su otro lado (si no, sólo se podrá escribir una línea). lado (si no, sólo se podrá escribir una línea).

border =border = tamaño tamaño – Indica el tamaño del "borde" de la imagen. A toda imagen se le Indica el tamaño del "borde" de la imagen. A toda imagen se le

asigna un borde que será visible cuando la imagen forme parte asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace. de un Hyperenlace.

height =height = tamaño tamaño – Indica el alto de la imagen en puntos o en porcentaje. Se Indica el alto de la imagen en puntos o en porcentaje. Se

puede usar para variar el tamaño de la imagen original, puede usar para variar el tamaño de la imagen original, aunque es mejor redimensionarla en un programa de aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor calidad y el retoque fotográfico ya que será de mejor calidad y el archivo tendrá el tamaño apropiado. archivo tendrá el tamaño apropiado.

width =width = tamaño tamaño – Indica el ancho de la imagen en puntos o en porcentaje. Indica el ancho de la imagen en puntos o en porcentaje.

Se puede usar para variar el tamaño de la imagen Se puede usar para variar el tamaño de la imagen original, aunque es mejor redimensionarla en un original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor programa de retoque fotográfico ya que será de mejor calidad y el archivo tendrá el tamaño apropiado. calidad y el archivo tendrá el tamaño apropiado.

hspace =hspace = margen margen – Indica el número de espacios horizontales, en puntos, Indica el número de espacios horizontales, en puntos,

que separarán la imagen del texto que la siga y la que separarán la imagen del texto que la siga y la anteceda. anteceda.

vspace =vspace = margen margen – Indica el número de puntos verticales que separaran la Indica el número de puntos verticales que separaran la

imagen del texto que le siga y la anteceda. imagen del texto que le siga y la anteceda.

Hyperenlaces.Hyperenlaces. La característica principal de una página Web La característica principal de una página Web es que podemos incluir Hyperenlaces. Un es que podemos incluir Hyperenlaces. Un Hyperenlace es un elemento de la página Hyperenlace es un elemento de la página que hace que el navegador acceda a otro que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc... recurso, otra página Web, un archivo, etc...

Para incluir un Hyperenlace se utiliza la Para incluir un Hyperenlace se utiliza la directiva directiva <A></A><A></A>. El texto o imagen que . El texto o imagen que se encuentre dentro de los límites de esta se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que directiva será sensible, esto quiere decir que si situamos el ratón sobre él aparecerá una si situamos el ratón sobre él aparecerá una mano con el dedo apuntando y si pulsamos mano con el dedo apuntando y si pulsamos se realzará la función de hyperenlace se realzará la función de hyperenlace indicada por la directiva indicada por la directiva <A></A><A></A>. Si el . Si el Hyperenlace está indicado por un texto, este Hyperenlace está indicado por un texto, este aparecerá subrayado y en distinto color, si se aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un trata de una imagen, esta aparecerá con un borde rodeándola. borde rodeándola.

Esta directiva tiene el parámetro Esta directiva tiene el parámetro hrefhref que indica el lugar a donde nos llevará que indica el lugar a donde nos llevará el Hyperenlace si lo pulsamos.el Hyperenlace si lo pulsamos.

EjemploSe vería como<A href =EjemploSe vería como<A href = " "httphttp://://www.pangea.orgwww.pangea.org//"">> Pulse para ir Pulse para ir a la página de Pangeaa la página de Pangea</A></A>Pulse para ir a la página de Pulse para ir a la página de PangeaPangea

Si situamos el ratón encima de la frase Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la y pulsamos, el navegador accederá a la página Web indicada por el parámetro página Web indicada por el parámetro hrefhref, es decir, accederá a la página , es decir, accederá a la página situada en situada en httphttp://://www.pangea.orgwww.pangea.org//

Lo mismo podríamos hacer con un Lo mismo podríamos hacer con un gráfico. gráfico.

LENGUAJE HTML

Education

Transcript of LENGUAJE HTML