Está en la página 1de 51

Un lenguaje de marcado o lenguaje de marcas es una forma de

codificar un documento.

Incorpora etiquetas o marcas que contienen informacin adicional


acerca de la estructura del texto o su presentacin.

Marcado de presentacin, es aquel que indica el formato del


texto, es til para maquetar la presentacin de un documento
para su lectura, pero resulta insuficiente para el procesamiento
automtico de la informacin.

Marcado de procedimientos, est enfocado hacia la presentacin


del texto, el programa que representa el documento debe
interpretar el cdigo en el mismo orden en que aparece.

Marcado descriptivo, utiliza etiquetas para describir los


fragmentos de texto, pero sin especificar cmo deben ser
representados, o en que orden.

Es el lenguaje de marcado procedural predominante


para la construccin de pginas web.

HTML es usado para describir la estructura y el


contenido en forma de texto, as como para
complementar el texto con objetos tales como
imgenes.

HTML se escribe en forma de "etiquetas", rodeadas por


corchetes angulares (<,>).

Etiqueta: Cdigo que se inserta en el contenido del


documento para determinar la estructura del mismo (<TAG>
y </TAG>).

Atributo: Aporta informacin adicional que modifica el


comportamiento de las etiquetas (atributo="valor").

Navegador: Programa especializado en evaluar las etiquetas


y el contenido de un documento HTML y de mostrarlo
conforme a las posibilidades del sistema. Tambin se encarga
de solicitar nuevos documentos segn HTTP.

<!DOCTYPE HTML PUBLIC ''//W3C//DTD HTML 4.0//EN''>


<HTML>

<HEAD>
<! esto es la cabecera del documento >
</HEAD>
<BODY>
<! este es el cuerpo del documento >
</BODY>
</HTML>

Marca el comienzo y el final del documento.

En la prctica este par de etiquetas puede parecer opcional,


sobre todo la de cierre, pues muchos navegadores admiten
documentos sin ella, pero esto puede confundir a otros
navegadores que rechazarn la pgina Web o la mostrarn de
manera impredecible.

Cualquier etiqueta del documento debe aparecer entre el


par de etiquetas <HTML> y </HTML>.

Dentro de una etiqueta <HTML> puede aparecer la etiqueta


<HEAD>, seguida de <BODY> o <FRAMESET>.

Contiene las definiciones globales a todo el documento:


El ttulo del documento: <TITLE> ttulo </TITLE> que ser
mostrado en la barra de ttulo del browser, por lo que deben ser cortos
y representativos.
El destino por defecto de los hiperenlaces:
<BASE href=''protocol://servername/path/'' [target=targetFrame]>
El modo en que el documento debe ser tratado o informacin
utilizable por motores de bsqueda y otros: <META>.

<META NAME=valor CONTENT=contenido>

Author identifica el autor que cre la pgina, y algunas veces


el nombre del editor HTML usado para crear la pgina.

Description da una explicacin de la pgina o de su uso, y


suele ser utilizado por los motores de bsqueda para hacer un
resumen de la pgina.

Copyright es el aviso oficial de derechos de copia de la pgina.

<meta name=author CONTENT=WebMaster de Los Alpes>


<meta name=keywords CONTENT=viajes, ofertas, Los Alpes, Orlando>
<meta name=description CONTENT=La agencia de viajes Los Alpes tiene un
gran prestigio en el mundo de las empresas y combina una gran calidad con
unos excelentes precios.>

<BODY [bgcolor=valor] [text=valor] [background=imagen]>


... </BODY>
Determina la parte visible del documento.
Bgcolor: determina el color de fondo en tres cdigos
hexadecimales o alguno de los 16 colores predefinidos
(white, black, blue, green, etc).
Text: determina el color para el texto en tres cdigos
hexadecimales o alguno de los 16 colores predefinidos
(white, black, blue, green, etc).
Background: especifica una imagen para ser utilizado
como fondo de la pagina.

Algunos caracteres han de ser 'escapados' o adoptar una forma


de entidad SGML para poder ser representados por todos los
navegadores (juego de caracteres ISO88591, Latin1).
Carcter

Referencia de Entidad

&quot;

<

&lt;

>

&gt;

&aacute; - &Aacute;

&eacute; - &Eacute;

&iacute; - &Iacute;

&oacute; - &Oacute;

&uacute; - &Uacute;

&ntilde; - &Ntilde;

Encabezamientos <Hn>

Prrafos <P>

Nueva Lnea <BR>

Texto Preformateado <PRE>

Modificacin de la Apariencia <EM>, <STRONG> etc.

<Hn> encabezado de nivel n </Hn>


HTML permite definir 6 niveles de encabezados, siendo el 1
el ms importante.

Los browsers utilizan un tipo de letra mayor y ms negrita


para un nivel que para el siguiente.

Un encabezado ocupa siempre una lnea en exclusiva.

Sirven para simular los ttulos de captulos, secciones, etc.


pero no determinan que los prrafos que les siguen
pertenezcan a captulo o seccin alguna.

<P> esto es un prrafo </P>


Un prrafo comienza en una lnea nueva y se mantiene
junto.

Aunque la etiqueta de cierre es opcional y se puede


omitir se recomienda su utilizacin siempre.

Cada prrafo debe especificar su alineamiento con el


atributo align, si no se les aplicar el por defecto
(align=right).

Se pueden introducir saltos de lnea dentro de un


prrafo con <BR>, etiqueta que no se cierra.

La

etiqueta FONT se emplea para formatear


el tipo y tamao del texto en algunos puntos
del documento especficos.

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para


formatear</FONT>

Face: especifica el tipo de fuente en que se mostrara


el texto.
Size: define el tamao para la letra.
Color: especifica el color del texto.

<PRE> texto tal cual queremos que aparezca </PRE>

Permite describir la forma en que queremos que


aparezca un texto, respetando el espaciado y los saltos
de lnea.

El texto es presentado con una fuente de paso fijo.

<p>Hola

Adis</p> Mostrara:

<pre>se mostrar

as

Hola Adis

tal como se escribi</pre>

Enfatizacin:
nfasis
nfasis

bsico <EM> texto </EM> asociado a cursiva.

fuerte <STRONG>
asociado a negrita.

El

texto

</STRONG>

mismo efecto se puede conseguir con:


<I> Cursiva.
<B> Negrita
<U> Subrayado
<TT> Teletype, proporciona un espaciado simple entre las
letras del texto
<S> <STRIKE> Tachado
<BIG> Grande
<SMALL> Pequea

Referenciar un trabajo: <CITE> referencia </CITE>.


Definiciones: <DFN> trmino </DFN>.
Acrnimos: <ACRONYM> letras </ACRONYM>.
Cdigo de programas: <CODE> cdigo </CODE>.
Variables: <VAR> variable </VAR>.
Ejemplo de salida de programas: <SAMP> salida </SAMP>.
Ejemplo de entrada de programas: <KBD> entrada </KBD>.
Direccin: <ADDRESS> mi direccin </ADDRESS>.
Citas: <QUOTE> prrafo de una cita </QUOTE> y <Q> cita
corta </Q>.
Lneas: <HR [align][width=ancho][size=pixels][noshade]>.

La

etiqueta <IMG> sirve para situar imgenes


en una pgina. Esta etiqueta no tiene
etiqueta de cierre.

<img
src="http://www.htmldog.com/images/logo.gif"
alt="HTML Dog" border=0>

HTML proporciona un conjunto de etiquetas especiales para


gestionar las listas, teniendo algn control sobre su
apariencia.
Las listas se pueden anidar.
Listas Ordenadas: muestran un conjunto de items numerados
para mostrar algn tipo de jerarqua o importancia.
Listas Sin Orden: muestran un conjunto de items sin que el
orden en que son mostrados implique grado de importancia o
de jerarqua alguno.
Glosarios: permiten definir una lista de definiciones.

<UL>
<LI> item 1 </LI>
<LI> item 2 </LI>
...
<LI> item n </LI>
</UL>

Se puede controlar el tipo de indicador de los


items: <UL bullet=tipo> donde tipo es uno a
elegir entre circle, square y disc.

<DL>
<DT> trmino 1 </DT><DD> definicin 1 </DD>
<DT> trmino 2 </DT><DD> definicin 2 </DD>
...
<DT> trmino n </DT><DD> definicin n </DD>
</DL>
Los browsers se encargarn de mostrar el
glosario de manera conveniente.
Se pueden utilizar las etiquetas de formateo
estndar para dar ms nfasis a la presentacin:
<TT>, <I>, <B>, <U>, <S>, <STRIKE>, <BIG> y
<SMALL>.

<OL>
<LI> item 1 </LI>
<LI> item 2 </LI>
...
<LI> item n </LI>
</OL>

Se puede controlar el nmero inicial de la serie: <OL


start=numero>.

Tambin se puede elegir el conjunto de caracteres que


identifica cada item en la lista: <OL type=tipo>, con tipo a
elegir entre 1 para arbico, a o A para alfabtico e i o I para
romano.

<A name=nombre href=destino> origen </A>

Los hiperenlaces son la esencia del Web.

Permiten ir de un documento a otro siguiendo los


caminos que han sido marcados por los creadores de los
documentos Web.

Tienen dos componentes: el ancla fuente y el ancla


destino.

Un ancla es una zona con nombre dentro de un


documento HTML.

Tiene dos usos:


Como ancla para definir una referencia dentro de un
documento.
<a name=inicio>Inicio:</a>

Como enlace a otra pgina a un ancla.


<a href=#inicio>Inicio</a>
<a href=../../index.html>Indice</a>
<a href=http://www.google.com/search?q=escafandra>
Bsqueda de Escafandra en Google</a>

<TABLE>
<CAPTION> Ejemplo de Tabla 3x2 </CAPTION>
<TR><TH>Columna1</TH><TH>Columna2</TH></TR>
<TR><TD>Fila 1 Columna 1</TD><TD>Fila 1 Columna 2</TD></TR>
<TR><TD>Fila 2 Columna 1</TD><TD>Fila 2 Columna 2</TD></TR>
<TR><TD>Fila 3 Columna 1</TD><TD>Fila 3 Columna 2</TD></TR>
</TABLE>

<TABLE> Tag de Inicio de la tabla


<CAPTION> Establece ttulo a la tabla.
<TR> Especifica cada fila.
<TH> Declara el encabezado de cada columna
<TD> delimita cada celda dentro de cada fila (Columna)

La etiqueta <TABLE> puede tener los siguientes atributos:

align: controla la colocacin dentro de la pgina y


acepta los valores left, right, center o justify.
width: determina la anchura de la tabla en pixels o
en un porcentaje de la anchura de la ventana del
browser, 50% por ejemplo.
height: determina el largo de la tabla en pixels o en
un porcentaje de la anchura de la ventana del
browser, 50% por ejemplo.
border: determina la anchura en pixels del borde si
lo hay.
cellspacing: el espacio en pixels entre celdas.
cellpadding: el espacio en pixels entre el final de la
celda y su contenido.

Una marquesina (en ingls, marquee) es una


ventana en la que se desplaza un texto.

Permite darle dinamismo y movimiento a la


pagina web, haciendo que se vea ms
atractiva.

<MARQUEE>Texto en movimiento</MARQUEE>

WIDHT, HEIGHT: Ajustan la anchura


respectivamente, de la marquesina.

altura,

<MARQUEE WIDTH=50% HEIGHT=60> ocupa el 50% del ancho


de la pantalla y tiene una altura de 60 pixels
</MARQUEE>

ALIGN: Modifica el alineamiento del texto que rodea a la


marquesina, que puede ser TOP (arriba), MIDDLE (en
medio) o BOTTOM (abajo).

<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La


palabra "Hola!" estar alineada con la parte inferior de
la marquesina</MARQUEE> Hola!

BEHAVIOR, Este atributo (comportamiento) define de qu manera se va a


efectuar el desplazamiento del texto.

SCROLL, el texto aparece por un lado, se desplaza hasta el otro hasta


desaparecer por l, y vuelve a empezar.

SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y


se detiene ah.

ALTERNATE, se desplaza alternativamente hacia un lado y otro, siempre


dentro de los lmites de la marquesina.

BGCOLOR, Modifica el color de fondo de la marquesina.

DIRECTION, Modificar la direccin hacia la que se dirige el texto; la cual


puede ser LEFT (izquierda) o RIGHT (derecha)

SCROLLAMOUNT, define la cantidad de desplazamiento del texto en cada


movimiento de avance, expresado en pixels (a mayor nmero, mayor
velocidad)

SCROLLDELAY , define el tiempo entre cada movimiento de avance,


expresado en milisegundos (a mayor nmero, menor velocidad)

Los marcos son divisiones que se realizan de


la pagina para mostrar en cada parte una
pagina HTML distinta. Cada marco tendr un
URL determinado.

Es muy usado el tener un marco estrecho


que acta como ndice y al lado un marco
mayor que es donde se muestra la
informacin de cada apartado del indice.

Los marcos cambian la estructura de la


pagina HTML tradicional, eliminando la
parte del cuerpo (BODY) y sustituyndola
por el cdigo <FRAMESET>. As todos los
cdigos que antes aparecan dentro del
cuerpo aparecen dentro del cdigo
<FRAMESET>. As la estructura tpica al
utilizar frames ser:

<HTML>
<HEAD>
<TITLE> Titulo de la ventana </TITLE>
</HEAD>
<FRAMESET>
Aqu se definen los marcos
</FRAMESET>
</HTML>

Atributos de Frameset:

ROWS="lista_de_valores": especifica el numero


de marcos en los que se divide la pagina y
cuantas filas va a ocupar cada marco. Se
puede expresar en nmeros enteros, en tantos
por ciento (%) y con el valor '*' que especifica
que sea tan grande como la ventana.
COLS="lista_de_valores": utiliza el mismo tipo
de valores que ROWS para especificar la
longitud en columnas de los marcos.

<FRAMESET COLS="20%,80%"> , define dos


marcos que dividen verticalmente la ventana
ocupando respectivamente el 20 y el 80 % de
la anchura.

<FRAMESET ROWS="100,*,80"> , define tres


marcos que dividen horizontalmente la
ventana ocupando el marco superior 100
pixeles, el inferior 80 pixeles y el central el
resto de pixeles de altura de la ventana.

Para especificar el contenido de los marcos


definidos con FRAMESET haremos uso del
cdigo <FRAME>. Posee los siguientes
atributos:

SRC="nombre_documento": documento que se


quiere colocar dentro del marco.
NAME="nombre_ventana": da un nombre a un
marco, de forma que pueda ser el destino de
enlaces desde otros marcos.

MARGINWIDTH="valor": especifica cual es el


margen lateral en pixeles desde el margen del
marco al texto incluido en el.
MARGINHEIGHT="valor": especifica cual es el
margen superior e inferior en pixeles desde el
margen del marco al texto incluido en el.
SCROLLING="yes | no | auto": nos permite que
aparezcan o no las barras de scroll para
avanzar en el documento, o que aparezcan
automticamente si es necesario. (es el valor
por defecto).

NORESIZE: incluyendo este atributo se fija a


que los marcos no pueden ser aumentados o
disminuidos en tamao mediante el ratn.
NOFRAME: crea un contenido alternativo que
sea visualizable por navegadores que no
soportan frames. El contenido de este texto
alternativo se incluir entre las tags
<NOFRAME> y </NOFRAME>.

FRAMEBORDER="no". Este atributo elimina el


borde en un frame, pero si se quiere que se
elimine completamente, tambin hay que
ponrselo al frame contiguo. Si se quiere
eliminar los bordes de todos los frames, se
debe colocar
en la etiqueta FRAMESET,
como hemos visto anteriormente.

<HTML>

<HEAD>

<TITLE> Ejemplo de frames


</TITLE>

<!- Para los navegadores que no


soportan frames ->

<NOFRAMES>

</HEAD>

<FRAMESET COLS="20%,80%">

<A HREF="cap1.html"> Capitulo


1 </A><BR>

<FRAME SCR="indice.html">

<FRAME SCR="cap1.html"
NAME="base">

<A HREF="cap2.html"> Capitulo


2 </A><BR>

</FRAMESET>

<A HREF="cap3.html"> Capitulo


3 </A><BR>

</NOFRAMES>

</HTML>

<HTML>

<HEAD>

<TITLE> Indice </TITLE>

</HEAD>

<BODY BGCOLOR="#ffffff">

<A HREF="cap2.html"
TARGET="base">

Capitulo 2 </A><BR>

<H3 ALIGN=CENTER> INDICE


</H3>

<A HREF="cap3.html"
TARGET="base">

Capitulo 3 </A><BR>

<A HREF="cap1.html"
TARGET="base">

</BODY>

</HTML>

Capitulo 1 </A><BR>

<HTML>

<FRAMESET ROWS="50%,50%">

<HEAD>

<TITLE> Ejemplo de frames


anidadas </TITLE>

<FRAME
SCR="doc_der_arrib.html">

<FRAME
SCR="doc_der_abajo.html">

</HEAD>

<FRAMESET COLS="60%,40%">

</FRAMESET>

<FRAMESET ROWS="50%,50%">

</FRAMESET>

<FRAME
SCR="doc_izq_arrib.html">

</HTML>

<FRAME
SCR="doc_izq_abajo.html">

</FRAMESET>

Un formulario es una manera que provee HTML


para interactuar con el usuario quien necesita
procesar cierta informacin.

Es una seccin de un documento que contiene


texto, etiquetas, elementos especiales llamados
controles con sus etiquetas a travs de los cuales
se recopila la informacin deseada.

Generalmente el procesamiento de la
informacin se realiza en el servidor web, pero
tambin se puede enviar la informacin a un
correo electrnico.

<!DOCTYPE HTML PUBLIC ''//W3C//DTD HTML 4.0//EN''>


<HTML>

<HEAD> </HEAD>
<BODY>
<FORM action = .. method = . >

</ FORM>
..

Action: indica la accin a realizar (enviar a un correo,


al servidor)
method: indica como ser enviado

Especifica

un agente de procesamiento

URL HTTP: envia los datos a un programa en un servidor.


<form action=http://mipagina/programa" method="post">

URL mailto: envia los datos a una direccin de correo


electrnico.
<form action="mailto:direcciondelcorreo@correo.com"
method="post" enctype="text/plain">

Especifica

el mtodo utilizado para enviar los

datos

Get (valor por defecto) los datos a enviar se aaden al


URL (valor del atributo action) separados por el
smbolo ?, se usa generalmente cuando se desea
hacer consulta del servidor.
Post los datos introducidos se incluyen en el cuerpo
del formulario y se los enva. Se usa generalmente
para procesos de actualizacin de datos.

Cuadros

de texto

Puede ser

De una sola lnea


<Input Type = Text name=Nombre Size=25
Maxlength=20>
o de varias lneas
<Textarea name=Comentarios Cols=30
Rows=10> Escriba comentarios </Textarea>
Con Contrasea:
<input type="password" name="contrasea">

Botones

de radio (Radio Buttons)

<input Type = radio name = sexo value =


Hombre checked>
<input Type = radio name = sexo value = Mujer>

Se comportan igual que las casillas de verificcin pero si


comparten el mismo nombre son mutuamente excluyentes.

Casillas

de seleccin (Checkboxes)

Son del tipo si/no, on/off o verdadero/false

<input Type = checkbox name = opcion value = ON


checked>

Pueden compartir el mismo nombre (name).


El atributo checked hace que este preseleccionada.

Listas

de Opciones (Select):

<select name="transporte">
<option>Carro</option>
<option Selected>Avin</option>
<option>Tren</option>
<option>Barco</option>
</select>

Botones

(Buttons):

Submit: los datos del formulario son enviados por el


mtodo correspondiente.

<input Type = submit value = Enviar

>

Reset: Restablece todos los controles a sus valores


iniciales

<input Type = reset value = borrar

>