HTML 4.01
Dr. Daniel Morató
Area de Ingeniería Telemática
Departamento de Automática y Computación
Universidad Pública de Navarra
[email protected]
Laboratorio de Interfaces de Redes
http://www.tlm.unavarra.es/asignaturas/lir
HTML 4.01
http://www.w3.org/TR/html401/
Conceptos básicos
Estructura del documento HTML
Tags de la cabecera
Tags del cuerpo del documento
Texto
Listas
Tablas
Hyperlinks
Objetos
Formularios
Frames
Hojas de estilos
19 Oct
HTML 4.01
1/45
1
Conceptos básicos
•
•
•
•
•
•
•
SGML es un estándar ISO para definir lenguajes de marcas. HTML es uno de ellos,
es una Aplicación SGML
<html>
<head>
<title>Titulo del documento</title>
</head>
<body>
<p>Contenido del documento
</body>
</html>
En HTML existen “elementos” que representan párrafos, enlaces, listas...
La sintaxis de los elementos viene definida en los DTDs (Document Type Definition)
Cada elemento tiene tres partes: una marca (tag) de comienzo, el contenido y una
marca de final
<title>Titulo del documento</title>
En algunos elementos se permite omitir el contenido, en otros la marca de final y
algunos no tienen ni contenido ni marca de final
Las marcas de comienzo tienen “atributos” opcionales
<body background=“imagen.gif”>Contenido del documento</body>
Las marcas no distinguen mayúsculas de minúsculas
19 Oct
HTML 4.01
2/45
HTML 4.01
http://www.w3.org/TR/html401/
Conceptos básicos
Estructura del documento HTML
Tags de la cabecera
Tags del cuerpo del documento
Texto
Listas
Tablas
Hyperlinks
Objetos
Formularios
Frames
Hojas de estilos
19 Oct
HTML 4.01
3/45
2
Estructura del documento HTML
Tres secciones
Versión
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Cabecera
<HEAD></HEAD>
Contiene información sobre el documento, como el título o palabras
clave empleadas por buscadores
No se suele mostrar como parte del contenido
Cuerpo
Contenido del documento
<BODY></BODY>
<FRAMESET></FRAMESET> para dividir el espacio de
visualización en subespacios rectangulares
Diferentes etiquetas en cada sección
<HTML></HTML> engloba la cabecera y el cuerpo
19 Oct
HTML 4.01
4/45
Ejemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<h1>Pagina de ejemplo</h1>
<p>
Primera pagina de ejemplo<br>
Sin ningun contenido interesante
</body>
</html>
19 Oct
HTML 4.01
5/45
3
HTML 4.01
http://www.w3.org/TR/html401/
Conceptos básicos
Estructura del documento HTML
Tags de la cabecera
Tags del cuerpo del documento
Texto
Listas
Tablas
Hyperlinks
Objetos
Formularios
Frames
Hojas de estilos
19 Oct
HTML 4.01
6/45
Tags de la cabecera
<TITLE></TITLE>
Campo obligatorio
<TITLE>Titulo del documento</TITLE>
<META>
Permite incluir información sobre el documento (meta-datos)
Se pueden incluir campos en la cabecera HTTP que se enviará con el documento
<META http-equiv=“Expires” content=“Fri, 15 Aug 2005 19:18:44 GMT>
Los metadatos suelen ser del tipo propiedad/valor
<META name=“propiedad” content=“valor”>
Empleado para indicar palabras clave sobre el documento para buscadores
<META name=“keywords” content=“palabras clave”>
Empleado también para describir el documento para aplicaciones de filtrado (control
parental) o indicar valores por defecto (codificación del documento)
<BASE>
Permite especificar el URI de base para enlaces relativos
<BASE href=“http://www.miservidor.com/direc/midoc.html”>
19 Oct
HTML 4.01
7/45
4
HTML 4.01
http://www.w3.org/TR/html401/
Conceptos básicos
Estructura del documento HTML
Tags de la cabecera
Tags del cuerpo del documento
Texto
Listas
Tablas
Hyperlinks
Objetos
Formularios
Frames
Hojas de estilos
19 Oct
HTML 4.01
8/45
Tags del cuerpo del documento
(Texto)
Encabezados:
H1, H2, H3, H4, H5, H6
Texto estructurado:
EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,
ABBR, ACRONYM
BLOCKQUOTE, Q
SUB, SUP
B, I, TT
Líneas y párrafos
P, BR
PRE
Marcando cambios:
INS, DEL
19 Oct
HTML 4.01
9/45
5
Encabezados
Para describir secciones del documento
Hay seis niveles, desde <H1> el más importante
hasta <H6>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict
.dtd">
<html>
<head>
<title>Encabezados</title>
</head>
<body>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
<h3>Encabezado H3</h3>
<h4>Encabezado H4</h4>
<h5>Encabezado H5</h5>
<h6>Encabezado H6</h6>
Texto normal
</body>
</html>
19 Oct
HTML 4.01
10/45
Texto estructurado
Muchas veces la presentación asociada a estos tags depende de la
interpretación hecha por el agente del usuario (el navegador)
Algunos tags:
EM
STRONG
CITE
DFN
CODE
SAMP
KBD
VAR
ABBR
ACRONYM
BLOCKQUOTE
Q
SUB
SUP
B
I
TT
Énfasis
Mayor énfasis
Cita o referencia
Una definición
Código fuente para computadora
Salida de ejemplo de un programa
Texto a ser introducido por el usuario
Una variable de un programa
Abreviatura
Acrónimo
Párrafo de texto citado
Texto breve citado
Subíndice
Superíndice
Negrita
Itálica
Texto con font no proporcional
19 Oct
HTML 4.01
11/45
6
Texto estructurado
(Ejemplo)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texto</title>
</head>
<body>
Texto normal, <em>con enfasis</em> o
<strong>con mucho enfasis</strong>
extraido de <cite>El libro de las frases
inutiles, Anonimo</cite>. Que se puede
entender como <dfn>algo cuya importancia
se desea destacar</dfn>.
<code>printf("Hola amigo\n");</code> Que
daria como resultado <samp>Hola</samp> Y
si defino una variable seria <var>int
mivariable;</var> El usuario escribiria
<kbd>Su texto</kbd>, o usaria el raton,
un lapiz, <abbr>etc.</abbr> Mientras lo
permita el estandar de
<acronym>HTML</acronym>.
<blockquote>Alea jacta est</blockquote>
O sea que <q>la suerte esta echada</q>
Sea X<sub>i</sub> o X<sup>i</sup>
</body>
</html>
19 Oct
HTML 4.01
12/45
Líneas y párrafos
Un número de espacios en blanco consecutivos se muestra como uno solo
Los fines de línea en el documento no se muestran
<P>
<BR>
<PRE></PRE>
Se empllea para indicar un nuevo párrafo. No debería emplearse sin
contenido (es decir, no poner más de uno seguido)
Para añadir un fin de línea
Texto preformateado como en el documento
Font no proporcional
Mantiene el número de espacios en blanco
Desactiva que el texto salte de línea automáticamente
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texto</title>
</head>
<body>
Asi comienza el texto. <br>Y esto esta en
otra linea. <p>Pero esto en otro parrafo
<pre>
Y este es el aspecto
De un texto preformteado
</pre>
</body>
</html>
19 Oct
HTML 4.01
13/45
7
Marcando cambios
<INS>
<DEL>
Marca secciones del texto que se han
insertado desde la versión anterior del
documento
Marca secciones del texto que se han
eliminado desde la versión anterior del
documento
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cambios</title>
</head>
<body>
Se puede hacer que texto normal parezca
<ins>resaltado como nuevo</ins> o como
<del>que ha sido eliminado</del>
</body>
</html>
19 Oct
HTML 4.01
14/45
HTML 4.01
http://www.w3.org/TR/html401/
Conceptos básicos
Estructura del documento HTML
Tags de la cabecera
Tags del cuerpo del documento
Texto
Listas
Tablas
Hyperlinks
Objetos
Formularios
Frames
Hojas de estilos
19 Oct
HTML 4.01
15/45
8
Tags del cuerpo del documento
(Listas)
Listas:
UL, LI
Listas ordenadas:
OL, LI
Listas de definición:
DL, DT, DD
19 Oct
HTML 4.01
16/45
Listas
(Ejemplo)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listas</title>
</head>
<body>
<ul>
<li>Elemento de lista no numerada
<li>Segundo elemento
</ul>
<ol>
<li>Primer elemento de lista numerada
<li>Segundo elemento
</ol>
<dl>
<dt>DL<dd>Tag de comienzo de lista de definicion
<dt>DT<dd>Tag para elemento
<dt>DD<dd>Tag para la definicion
</dl>
<ol>
<li>Lista ordenada
<ol>
<li>Dentro de lista ordenada
<li>Otro elemento
</ol>
<li>Otra lista
<ol>
<li>Elemento dentro de la lista
</ol>
</ol>
</body>
</html>
19 Oct
HTML 4.01
17/45
9
HTML 4.01
http://www.w3.org/TR/html401/
Conceptos básicos
Estructura del documento HTML
Tags de la cabecera
Tags del cuerpo del documento
Texto
Listas
Tablas
Hyperlinks
Objetos
Formularios
Frames
Hojas de estilos
19 Oct
HTML 4.01
18/45
Tags del cuerpo del documento
(Tablas)
<TABLE></TABLE>
<TR>
<TD>
<TH>
Tag de comienzo/final. Atributo border
especifica el grosor del borde de la tabla
Marca del comienzo de una línea de la tabla
Comienzo de una celda de datos
Comienzo de una celda de cabecera
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabla simple</title>
</head>
<body>
<table border="1">
<tr><th>Col 1<th>Col 2
<tr><td>Elemento (1,1)<td>(1,2)
<tr><td>(2,1)<td>(2,2)
<tr><td>(3,1)<td>(3,2)
</table>
</body>
</html>
19 Oct
HTML 4.01
19/45
10
Tablas avanzadas
<CAPTION></CAPTION>
Agrupar celdas:
Para ponerle título (opcional), debe ir
justo detrás de <TABLE>
En la misma línea: con el atributo rowspan de <TH> o <TD>
En la misma columna: con el atributo colspan de <TH> o <TD>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tablas</title>
</head>
<body>
<tab
Crear cuenta
Comentarios de: HTML 4.01 (0)
No hay comentarios