HTML 4.01
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
14 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
• Las marcas no distinguen mayúsculas de minúsculas
<body background=“imagen.gif”>Contenido del documento</body>
14 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
14 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 empleables 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
14 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>
14 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
14 Oct
HTML 4.01
6/45
Tags de la cabecera
• <TITLE></TITLE>
- Campo obligatorio
• <META>
<TITLE>Titulo del documento</TITLE>
- 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 2003 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 base para enlaces relativos
<BASE href=“http://www.miservidor.com/direc/midoc.html”>
14 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
14 Oct
HTML 4.01
8/45
Tags del cuerpo del documento
(Texto)
EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE,
• Encabezados:
H1, H2, H3, H4, H5, H6
• Texto estructurado:
ABBR, ACRONYM
BLOCKQUOTE, Q
SUB, SUP
B, I, TT
• Líneas y párrafos
P, BR
PRE
• Marcando cambios:
INS, DEL
14 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>
14 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
14 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>
14 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>
Se emplea para iniciar 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 y desactiva que el texto
salte de línea automáticamente
• <BR>
• <PRE></PRE>
<!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>
14 Oct
HTML 4.01
13/45
7
Marcando cambios
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
• <INS>
• <DEL>
<!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>
14 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
14 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
14 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>
14 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
14 Oct
HTML 4.01
18/45
Tags del cuerpo del documento
(Tablas)
• Tag de comienzo/final <TABLE></TABLE> . Atributo border especifica el grosor
del borde de la tabla
• Marca de comienzo de una línea de la tabla <TR>
• Marca de comienzo de una celda
<TH> Celda de cabecera
<TD> Celda de datos
<!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>
14 Oct
HTML 4.01
19/45
10
Tablas avanzadas
• Para ponerle título (opcional) <CAPTION></CAPTION> debe ir justo detrás de <TABLE>
• Agrupar celdas:
• 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>
<table border="1
Crear cuenta
Comentarios de: HTML 4.01 (0)
No hay comentarios