Hyper Text Markup Language
Lic. Francisco Montilla
Estructura de un documento
HTML trata de definir la estructura de los documentos, aunque también tenga alguna posibilidad de modificar su apariencia.
Se puede definir la estructura de un documento como la relación que mantienen las partes del mismo entre ellas.
Esto contrasta con el uso de los procesadores de texto que consideran solo la apariencia de los documentos, y casi nunca su estructura.
Terminología HTML
Etiqueta: un código que se inserta en el contenido del documento para determinar la estructura del mismo (<TAG> y </TAG>).
Atributo: aporta información 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. También se encarga de solicitar nuevos documentos según HTTP.
Un Documento HTML
<!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>
La Etiqueta <HTML>
Marca el comienzo y el final del documento.
En la práctica 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 rechazarán la página Web o la mostrarán 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>.
La Etiqueta <HEAD>
Contiene las definiciones globales a todo el documento:El título del documento: <TITLE> título </TITLE> que será mostrado en la barra de título del browser, por lo que deben ser cortos y representativos.
El destino por defecto de los hiperenlaces:
<BASE href=''protocol://servername/path/'' [target=targetFrame]>.
Relaciones entre este documento y otros documentos Web para determinar un mismo modo de impresión, hojas de estilo o scripts: <LINK>.
El modo en que el documento debe ser tratado o información utilizable por motores de búsqueda y otros: <META>.
La Etiqueta <META>
<META NAME=valor CONTENT=contenido>
Author identifica el autor que creó la página, y algunas veces el nombre del editor HTML usado para crear la página.
Description da una explicación de la página o de su uso, y suele ser utilizado por los motores de búsqueda para hacer un resumen de la página.
La Etiqueta <BODY>
<BODY [bgcolor=valor] [onload=accion] [onunload=accion]> ... </BODY>
Determina la parte visible del documento.
Bgcolor:
determina el color de fondo en tres
códigos hexadecimales o alguno de los 16
colores predefinidos (white, black, blue, green,
etc).
Onload:
determina el script a ejecutar cuando la
página ha sido cargada y antes de ser mostrada.
Onunload: lo mismo que en el caso anterior pero
Caracteres Especiales
Algunos caracteres han de ser 'escapados' o adoptar una forma de entidad SGML para poder ser representados por todos los navegadores (juego de caracteres ISO8859-1, Latin-1).
"e; para '', & para &, > para > y < para
<.
La Etiqueta <IMG>
La etiqueta
<IMG>
sirve para situar imágenes
en una página. Esta etiqueta no tiene
etiqueta de cierre.
<img src="http://www.htmldog.com/images/logo.gif"
alt="HTML Dog" border=0>
Alineación y Formateo de Texto
Encabezamientos <Hn>
Párrafos <P>
Nueva Línea <BR>
Texto Preformateado <PRE>
Encabezamiento
<Hn> encabezado de nivel n </Hn>
HTML permite definir 6 niveles de encabezados, siendo el 1 el más importante.
Los browsers utilizan un tipo de letra mayor y más negrita para un nivel que para el siguiente.
Un encabezado ocupa siempre una línea en exclusiva.
Sirven para simular los títulos de capítulos, secciones, etc. pero no determinan que los párrafos que les siguen pertenezcan a capítulo o sección alguna.
Párrafos
<P> esto es un párrafo </P>
Un párrafo comienza en una línea nueva y se mantiene junto.
Aunque la etiqueta de cierre es opcional y se puede omitir se recomienda su utilización siempre.
Cada párrafo debe especificar su alineamiento con el atributo align, si no se les aplicará el por defecto (align=right).
Se pueden introducir saltos de línea dentro de un párrafo con <BR>, etiqueta que no se cierra.
La Etiqueta <FONT>
La etiqueta FONT se emplea para formatear
el tipo y tamaño del texto en algunos puntos
del documento específicos.
<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para
formatear</FONT>
Texto Preformateado
<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 línea.
Modificación de la Apariencia I
Enfatización:
Énfasis básico <EM> texto </EM> asociado a
cursiva.
Énfasis fuerte <STRONG> texto </STRONG>
asociado a negrita.
El mismo efecto se puede conseguir con <I> y
<B> pero perdemos el significado estructural de
que queremos enfatizar algo, quedándonos
exclusivamente en la forma física final.
Modificación de la Apariencia II
Referenciar un trabajo: <CITE> referencia </CITE>. Definiciones: <DFN> término </DFN>.
Acrónimos: <ACRONYM> letras </ACRONYM>. Código de programas: <CODE> código </CODE>. Variables: <VAR> variable </VAR>.
Ejemplo de salida de programas: <SAMP> salida </SAMP>. Ejemplo de entrada de programas: <KBD> entrada </KBD>. Dirección: <ADDRESS> mi dirección </ADDRESS>.
Citas: <QUOTE> párrafo de una cita </QUOTE> y <Q> cita corta </Q>.
Listas
HTML proporciona un conjunto de etiquetas especiales para gestionar las listas, teniendo algún control sobre su apariencia.
Las listas se pueden anidar.
Listas Ordenadas: muestran un conjunto de items numerados para mostrar algún tipo de jerarquía o importancia.
Listas Sin Orden: muestran un conjunto de items sin que el orden en que son mostrados implique grado de importancia o de jerarquía alguno.
Listas Ordenadas
<OL>
<LI> item 1 </LI> <LI> item 2 </LI> ...
<LI> item n </LI> </OL>
Se puede controlar el número inicial de la serie: <OL start=numero>.
También se puede elegir el conjunto de caracteres que
identifica cada item en la lista: <OL type=tipo>, con tipo a elegir entre 1 para arábico, a o A para alfabético e i o I para romano.
Listas Sin Orden
<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.
Glosarios
<DL>
<DT> término 1 </DT><DD> definición 1 </DD>
<DT> término 2 </DT><DD> definición 2 </DD>
...
<DT> término n </DT><DD> definición n </DD>
</DL>
Los browsers se encargarán de mostrar el glosario
de manera conveniente.
Se pueden utilizar las etiquetas de formateo estándar
para dar más énfasis a la presentación: <TT>, <I>,
<B>, <U>, <S>, <STRIKE>, <BIG> y <SMALL>.
Hiperenlaces
<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.
Hiperenlaces II
Tiene dos usos:
Como ancla para definir una referencia dentro de un
documento.
<a name=“inicio”>Inicio:</a>
Como enlace a otra página ó a un ancla.
<a href=“#inicio” target=“_self”>Inicio</a>
<a href=“../../index.html” target=“algunframe”>Indice</a> <a href=“http://www.google.com/search?q=escafandra”
Tablas I
<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 título a la tabla. <TR> Especifica cada fila.
<TH> Declara el encabezado de cada columna.
Tablas II
La etiqueta <TABLE> puede tener los siguientes atributos:
align: controla la colocación dentro de la página y
acepta los valores left, right o center.
width: determina la anchura 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
Formularios
Un formulario es una manera que provee HTML para
interactuar con el usuario quien necesita procesar
cierta información.
Es una sección de un documento que contiene texto,
etiquetas, elementos especiales llamados controles
con sus etiquetas a través de los cuales se recopila
la información deseada.
Generalmente el procesamiento de la información se
realiza en el servidor web, pero también se puede
enviar la información a un correo electrónico.
Formularios
<!DOCTYPE HTML PUBLIC ''-//W3C//DTD HTML 4.0//EN''> <HTML>
<HEAD> … </HEAD>
<BODY>
<FORM action = “…..” method = “….” >
……
</ FORM>
…..
Action:
indica la acción a realizar (enviar a un correo,
al servidor)
Atributo action
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 dirección de
correo electrónico.
<form action="mailto:[email protected]" method="post" enctype="text/plain">
Atributo method
Especifica el método utilizado para enviar los
datos
Get (valor por defecto) los datos a enviar se
añaden al URL (valor del atributo
action
)
separados por el símbolo “?”, se usa
generalmente cuando se desea hacer consulta
del servidor.
Post los datos introducidos se incluyen en el
cuerpo del formulario y se los envía. Se usa
generalmente para procesos de actualización de
datos.
Tipos de Controles
Cuadros de texto
Puede ser
De una sola línea
<Input Type = “Text” name=“Nombre” Size=“25” Maxlength=“20”>
o de varias líneas
<Textarea name=“Comentarios” Cols=“30”
Rows=“10”> Escriba comentarios … </Textarea> Con Contraseña:
Tipos de Controles
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 verificción pero si comparten el mismo nombre son mutuamente excluyentes.
Tipos de Controles
Casillas de selección (
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).
Tipos de Controles
Listas de Opciones (Select):
<select name="transporte">
<option>Carro</option>
<option Selected>Avión</option>
<option>Tren</option>
<option>Barco</option>
</select>
Tipos de Controles
Botones (Buttons):
Submit:
los datos del formulario son enviados
por el método correspondiente.
<
input Type = “submit” value = “Enviar”
>
Reset:
Restablece todos los controles a sus
valores iniciales
Frames
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
actúa como índice y al lado un marco mayor
que es donde se muestra la información de
cada apartado del indice.
Frames
Los marcos cambian la estructura de la
pagina HTML tradicional, eliminando la parte
del cuerpo (BODY) y sustituyéndola por el
código <FRAMESET>. Así todos los códigos
que antes aparecían dentro del cuerpo
aparecen dentro del código <FRAMESET>.
Así la estructura típica al utilizar frames será:
Frames
<HTML>
<HEAD>
<TITLE> Titulo de la ventana </TITLE>
</HEAD>
<FRAMESET>
Aquí se definen los marcos
</FRAMESET>
Frames
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 números
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.
Frames
<FRAMESET COLS="20%,80%"> , define
dos marcos que dividen verticalmente la
ventana ocupando respectivamente el 20 y el
80 % de la anchura.
Frames
<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.
Frames
Para especificar el contenido de los marcos
definidos con FRAMESET haremos uso del
código <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.
Frames
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
automáticamente si es necesario. (es el valor
por defecto).
Frames
NORESIZE: incluyendo este atributo se fija a
que los marcos no pueden ser aumentados o
disminuidos en tamaño mediante el ratón.
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>.
Frames
FRAMEBORDER="no". Este atributo elimina
el borde en un frame, pero si se quiere que se
elimine completamente, también hay que
ponérselo al frame contiguo. Si se quiere
eliminar los bordes de todos los frames, se
debe colocar en la etiqueta FRAMESET,
como hemos visto anteriormente.
Ejemplo de Frames
<HTML> <HEAD>
<TITLE> Ejemplo de frames </TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SCR="indice.html"> <FRAME SCR="cap1.html" NAME="base"> </FRAMESET>
<!- Para los navegadores que no soportan frames ->
<NOFRAMES>
<A HREF="cap1.html"> Capitulo 1 </A><BR>
<A HREF="cap2.html"> Capitulo 2 </A><BR>
<A HREF="cap3.html"> Capitulo 3 </A><BR>
</NOFRAMES>
Ejemplos de Frames
<HTML> <HEAD>
<TITLE> Indice </TITLE>
</HEAD> <BODY BGCOLOR="#ffffff"> <H3 ALIGN=CENTER> INDICE </H3> <A HREF="cap1.html" TARGET="base"> Capitulo 1 </A><BR> <A HREF="cap2.html" TARGET="base"> Capitulo 2 </A><BR> <A HREF="cap3.html" TARGET="base"> Capitulo 3 </A><BR> </BODY> </HTML>
Ejemplo de Frames
<HTML> <HEAD>
<TITLE> Ejemplo de frames anidadas </TITLE> </HEAD> <FRAMESET COLS="60%,40%"> <FRAMESET ROWS="50%,50%"> <FRAME SCR="doc_izq_arrib.html"> <FRAME SCR="doc_izq_abajo.html"> </FRAMESET> <FRAMESET ROWS="50%,50%"> <FRAME SCR="doc_der_arrib.html"> <FRAME SCR="doc_der_abajo.html"> </FRAMESET> </FRAMESET> </HTML>
