Estructura general de un fichero HTML
HTML (HyperText Markup Language) es el lenguaje utilizado en la Internetpara definir las páginas del WORLD WIDE WEB. Los ficheros HTML son
ficheros puramente ASCII, que pueden ser escritos con cualquier editor
básico, tal como Notepad en Windows o vi en Unix. También
se pueden utilizar procesadores de texto más complicados como Microsoft
Word, pero en este caso hay que asegurarse que el fichero es guardado en
disco como "text only". En este fichero de texto se introducen unas marcas
o caracteres de control llamadas TAGs, que son interpretadas por el browser.
Cuando éste lee un fichero ASCII con extensión *.htm o *.html
interpreta estas TAGs y formatea el texto de acuerdo con ellas.
Todas las TAGs de HTML van encerradas entre los caracteres menor que
( <) y mayor que ( >), como por ejemplo <HTML>. Además, la
mayor parte de ellas son dobles, en el sentido de que hay una TAG de comienzo
y otra de final; entre ambas está el texto afectado por dichas TAGs.
La marca de final es como la de comienzo, pero incluyendo una barrra (/).
Por ejemplo, la marca de final de <HTML> es </HTML>. De la misma
forma, la TAG de final de <P> es </P>, y así con otras TAGs.
<HTML> <HEAD> <TITLE>Título de la página</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>Volver al inicio
Formato de párrafos
| Así se escribe: | Así se ve: |
|---|---|
<P>Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos párrafos</P> <P>El resultado puede verse en la celda vecina incluida en la columna de la derecha</P> | Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML. En esta celda de la Tabla se incluyen dos párrafos El resultado puede verse en la celda vecina incluida en la columna de la derecha |
<P>Los párrafos se separan con un espaciado superior al correspondiente a una nueva línea. <BR> Para tener un espaciado más compacto puede utilizarse el Line Break, como en este ejemplo.</P> | Los párrafos se separan con un espaciado superior al correspondiente a una nueva línea. Para tener un espaciado más compacto puede utilizarse el Line Break, como en este ejemplo. |
| <P>Líneas horizontales:</P> <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE> | Líneas horizontales: |
| <P>Los párrafos pueden indentarse. <BLOCKQUOTE>Block quote indenta un párrafo. Se deshace esta indentación con el fin de la TAG Block quote,</BLOCKQUOTE> como se ve en el ejemplo.</P> | Los párrafos pueden indentarse.
|
<PRE>La TAG Preformatted permite
| La TAG Preformatted permite
|
| <ADRESS> <P>Escuela Superior de Ingenieros Industriales <P>Pº Manuel de Lardizábal, 13 <P>E-20009 San Sebastián </ADRESS> | Escuela Superior de Ingenieros Industriales Pº Manuel de Lardizábal, 13 E-20009 San Sebastián (Esto aparece al principio del documento, a la izquierda) |
Volver al inicio
Formato de texto
Una idea importante de HTML es la de definir lo que se desea hacer (resaltaruna palabra o un párrafo, utilizar un espaciado constante, etc.),
pero no decir cómo se desea hacerlo, dejando que esta función
la realice el browser de acuerdo con sus posibilidades. Por ejemplo, se
le puede decir al browser que se quiere remarcar una palabra sin decirle
que la ponga en bold; de ordinario la remarcará poniéndola
en bold, pero si el browser se está ejecutando en un ordenador que
no permite texto en bold, el propio browser buscará una forma alternativa
de remarcar esa palabra.
De todas formas, los autores quieren muchas veces determinar más
en concreto cómo va a aparecer su texto en la pantalla del browser.
Además, cada vez es más infrecuente ejecutar un browser que
no tenga las amplias posibilidades de formatear texto de Mac o Windows.
La consecuencia es que HTML se ha extendido y permite tanto definir de
modo general la función del texto como determinar en concreto el
formato con que se debe representar. A continuación se muestran
algunos ejemplos de ambas formas de definir los formatos.
| Así se escribe: | Así se ve: |
|---|---|
| <FONT SIZE="+1" COLOR="red" FACE="Arial"> Define tipo de letra, tamaño y color a tu gusto </FONT> | Define tipo de letra, tamaño y color a tu gusto |
<P>Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con <STRONG>bold</STRONG> e <EM>italic</EM></P> | Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con bold e italic. |
<P>En cualquier caso, también se pueden utilizar los tags <B>bold</B> (B) e <I>italic</I> (I).</P> | En cualquier caso, también se pueden utilizar los tags bold (B) e italic (I). |
<P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la Tag TeleType</P> | Para escribir con una letra de paso constante (estilo teletipo) se emplea la Tag TeleType. |
<P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P> | Para que el texto se emplea la Tag Blink. |
| <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3> <H4>4</H4><H5>5</H5><H6>6</H6></P> | Títulos: 123456 |
| <P>Alineados:</P> <P ALIGN="LEFT">Izquierda</P> <P ALIGN="RIGHT">Derecha</P> <P ALIGN="CENTER">Centrado</P> </P> | Alineados: Izquierda Derecha |
| Otros efectos: <P><U>subrayado</U> <P><STRIKE>tachado</STRIKE> <P><BIG>letra más grande que el estándar</BIG> <P><SMALL>letra más pequeña que el estándar</SMALL> <P>Texto tipo<SUB>subíndice</SUB> <P>Texto tipo<SUP>superíndice</SUP> | Otros efectos: subrayado letra más grande que el estándar letra más pequeña que el estándar Texto tiposubíndice Texto tiposuperíndice |
Volver al inicio
Listas no ordenadas
| Así se escribe: | Así se ve: |
|---|---|
<P>Las listas no ordenadas: <UL> <LI>Van precedidas por "bullets" <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL> | Las listas no ordenadas:
|
Volver al inicio
Listas ordenadas:
| Así se escribe: | Así se ve: |
|---|---|
Las listas ordenadas: <P>Las listas ordenadas: <OL> <LI>Van precedidas por números <LI>La numeración es automática <LI>Son también muy utilizadas </OL> | Las listas ordenadas:
|
Volver al inicio
Listas de definiciones:
| Así se escribe: | Así se ve: |
|---|---|
<P>Las listas de definiciones: <DL> <DT>Primer término <DD>Definición del 1er término <DT>Segundo término <DD>Definición del 2º término </DL> | Las listas de definiciones:
|
Volver al inicio
Tablas
Las tablas son uno de los elementos más interesantes de HTML. Permiten,por ejemplo, escribir texto en varias columnas, hacer listas de equivalencias,
tablas propiamente dichas, etc. Este documento es un ejemplo de las posibilidades
ofrecidas por las tablas.
| Así se escribe: | Así se ve: | ||||
|---|---|---|---|---|---|
<TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE> |
| ||||
<CENTER><TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE></CENTER> |
Volver al inicio
Anclas
Las anclas son referencias que se emplean en el archivo con el fin de serel punto de destino de un link. En el archivo son invisibles pero
al clicar sobre una palabra señalada como link, la visualización
de la página pasa a ser el punto donde se había definido
el ancla.
| Así se escribe: | Así se ve: |
|---|---|
<P><A NAME "ancla"> |
Volver al inicio
Links
Los links son palabras diferenciadas en un archivo HTML, y tienenla función de enviar al usuario a algún ordenador remoto,
o a algún sitio de la página, que esté señalada
por un ancla. Los links forman lo que se llama hipertexto.
| Así se escribe: | Así se ve: |
|---|---|
<P>Este link envía al Web de la Universidad<P> <A HREF="http://193.145.249.23">Al Web</A> | Este link envía al Web de la Universidad Al Web |
<P>Este link envía al ancla<P> <A HREF="#ancla">Al ancla</A> | Este link envía; al ancla Al ancla |
Volver al inicio
Inserción de imágenes
Un recurso que da mucha vida a una página hecha con HTML es la inserciónde elementos gráficos. La forma de insertar una imagen es la siguiente:
| Así se escribe: | Así se ve: |
|---|---|
<IMG SRC="todo.gif"> |  |
Volver al inicio
Imágenes clicables
Se pueden unir los dos apartados anteriores, es decir, se puede crear unaimagen que a la vez sea un link. Al clicar sobre la imagen, ésta
te enviará a un documento o un ancla destino.
| Así se escribe: | Así se ve: |
|---|---|
<P><A HREF="#ancla"> <IMG SRC="todo.gif"> </A> | |
Volver al inicio
Imágenes sensibles
Imágenes sensibles son un tipo de imágenes las cuales detectanla zona en la que se ha clicado y según el punto realizan un link
a una zona del documento u a otra (o entre archivos). Hay que definir los
puntos de la imagen y la zona a la que hay que ir si se clica. Se pueden
definir zonas rectangulares, circulares y poligonales. El ejemplo crea
dos zonas rectangulares definiendo los puntos según las coordenadas
del punto superior izquierdo y el del punto inferior derecho.
| Así se escribe: | Así se ve: |
|---|---|
<P><IMG USEMAP="#mapadirec" SRC="mapa.gif"> <MAP NAME="mapadirec"> <AREA COORDS=0,0,47,46 HREF="http://193.145.249.23"> <AREA COORDS=47,0,96,46 HREF="#ancla"> </MAP> |  |
Volver al inicio
Frames
| Así se escribe: | Así se ve: |
|---|---|
<FRAMESET ROWS="50%,50%,*"> <FRAME SCR="ejemplo.htm"> <FRAME SCR="ejemplo.htm"> </FRAMESET> |  |
<FRAMESET COLS="40%,60%"> <FRAME SCR="ejemplo.htm"> <FRAME SCR="ejemplo.htm"> </FRAMESET> |  |
Volver al inicio
Formularios
| Así se escribe: | Así se ve: |
|---|---|
<FORM> Nombre: <INPUT NAME="nombre"> </FORM> | |
<FORM> Nombre: <INPUT NAME="nombre"><P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 1<P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 2<P> <INPUT TYPE="checkbox" NAME="check"> checkbox </FORM> |
Volver al inicio
Layers
Antes que nada, hay que decir que las layers sólo son compatiblescon Netscape Communicator por el momento. Así que
si no es este tu navegador, no verás esta parte como debería
ser en la realidad. Las capas permiten jugar con contenidos situados en
capas distintas, escondiéndolos o haciéndolos visibles, situandolos
en la parte deseada de las ventanas... pero con el handicap de la compatibilidad.
Para browsers que no soportan layers, está la tag pareada<NOLAYER>
Hay dos tipos de layers: las definidas por <LAYER> son posicionadas
de una forma absoluta. Las definidas por <ILAYER> son posicionadas con
relación a otra layer.
| Así se escribe: | Así se ve: |
|---|---|
<LAYER NAME="uno" VISIBILITY="HIDE"> Esta es la capa uno </LAYER> <LAYER NAME="dos" VISIBILITY="SHOW"> Esta otra es la capa dos </LAYER> | Esta otra es la capa dos |
A continuación se listan los atributos que soporta la tag pareada
<LAYER>:
Todo tipo de eventos de JavaScript. (Ver capítulo de eventos del
tutorial de JavaScript de la ESIISS)
NAME: especifica el nombre de la capa para poder referirse a ella desde
JavaScript, por ejemplo.
LEFT, TOP: indica la posición (izquierda y arriba) en la que empieza
la layer (si es una tag LAYER) o la posición relativa para las definidas
con ILAYER.
PAGEX, PAGEY: especifica la posición relativa de la layer a la ventana
del documento
SRC="nombrearchivo.ext" carga en la layer el arhivo especificado
(nombrearchivo.ext)
Z-INDEX, ABOVE, BELOW: especifican en orden de amontonamiento de las layers
entre sí. Estos tres atributos son mutuamente exclusivos,
empléese sólo uno de ellos.
WIDTH, HEIGHT: especifican la anchura y la altura de la layer. Limitan
el área en la que se muestra el contenido de la layer.
CLIP=x1,y1,x2,y2 delimita el area visible (definida por el rectángulo
de las coordenadas indicadas) de la layer.
VISIBILITY: SHOW hace la layer visible, HIDE la oculta.
BGCOLOR: especifica el color de fondo de la layer. Por defecto, una layer
es transparente para que puedan verse las que están por debajo.
Si se pone color de fondo, no podrán verse las layers inferiores.
BACKGROUND="archivo.ext" es lo mismo que BGCOLOR pero poniendo como
fondo la imagen del archivo.ext
Una plantilla de ayuda
| Así se escribe: | Así se ve: |
|---|---|
<P>Texto aquí | Texto aquí |
<P>Texto aquí | Texto aquí |
Volver al inicio
No hay comentarios:
Publicar un comentario