HTML 4.
01
Dr. Daniel Morató
Area de Ingeniería Telemática
Departamento de Automática y Computación
Universidad Pública de Navarra
[Link]@[Link]
Laboratorio de Interfaces de Redes
[Link]
HTML 4.01
[Link]
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=“[Link]”>Contenido del documento</body>
• Las marcas no distinguen mayúsculas de minúsculas
19 Oct HTML 4.01 2/45
HTML 4.01
[Link]
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" "[Link]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "[Link]
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"
"[Link]
<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
[Link]
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 [Link] 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=“[Link]
19 Oct HTML 4.01 7/45
4
HTML 4.01
[Link]
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"
"[Link]
.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 Énfasis
STRONG Mayor énfasis
CITE Cita o referencia
DFN Una definición
CODE Código fuente para computadora
SAMP Salida de ejemplo de un programa
KBD Texto a ser introducido por el usuario
VAR Una variable de un programa
ABBR Abreviatura
ACRONYM Acrónimo
BLOCKQUOTE Párrafo de texto citado
Q Texto breve citado
SUB Subíndice
SUP Superíndice
B Negrita
I Itálica
TT 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"
"[Link]
<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 consecutiv os se muestra como uno solo
Los fines de línea en el documento no se muestran
<P> Se empllea para indicar un nuevo párrafo. No debería emplearse sin
contenido (es decir, no poner más de uno seguido)
<BR> Para añadir un fin de línea
<PRE></PRE> 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"
"[Link]
<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> Marca secciones del texto que se han
insertado desde la versión anterior del
documento
<DEL> Marca secciones del texto que se han
eliminado desde la versión anterior del
documento
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"[Link]
<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
[Link]
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"
"[Link]
<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
[Link]
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> Tag de comienzo/final. Atributo border
especifica el grosor del borde de la tabla
<TR> Marca del comienzo de una línea de la tabla
<TD> Comienzo de una celda de datos
<TH> Comienzo de una celda de cabecera
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"[Link]
<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> Para ponerle título (opcional), 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"
"[Link]
<html>
<head>
<title>Tablas</title>
</head>
<body>
<table border="1">
<caption><em>El titulo de la tabla</em></caption>
<tr><th rowspan="2"><th colspan="2">Media<th rowspan="2">Ojos<br>rojos
<tr><th>altura<th>peso
<tr><th>Unos<td>1.9<td>0.003<td>40%
<tr><th>Otros<td>1.7<td>0.002<td>43%
<tr><th>Ultimos<td colspan="2">No disponible<td>0%
</table>
</body>
</html>
19 Oct HTML 4.01 20/45
Tablas avanzadas
Control de los bordes (atributos de <TABLE>):
border Grosor de los bordes (pixeles)
frame Qué lados dibujar:
void (ninguno), above (el superior), below (el inferior), hsides (superior e inferior), vsides (derecho e
izquierdo), lhs (izquierdo), rhs (derecho), box (los cuatro)
rules Qué líneas internas dibujar:
none (ninguna), rows (entre líneas), cols (enntre columnas), all (ambas)
cellspacing Separación entre los bordes internos de las celdas
cellpadding Separación entre el borde de la celda y su contenido
Alineamiento del contenido de la celda (atributos de <TR>, <TH> y <TD>):
align Alineamiento horizontal:
left, center, right
valign Alineamiento vertical:
top, middle, bottom
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Mas tablas</title></head>
<body>
<table frame="void" rules="all" cellpadding="10">
<tr><td align="center">Un elemento<br>en<br>3
lineas<td>Un elemento<td valign="top">Un elemento
<tr align="center"><td>todos<td>centro<td>centro
<tr><td>normal<td align="center">centro<td
align="right">derecho
</table>
</body></html>
19 Oct HTML 4.01 21/45
11
HTML 4.01
[Link]
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 22/45
Tags del cuerpo del documento
(Hyperlinks)
Un enlace (link, hyperlink, enlace Web...) es una conexión de
un recurso en la Web a otro
Un enlace tiene dos extremos (o anclas=“anchor”) y una
dirección.
El enlace “apunta” desde el ancla origen a la destino que
puede estar en el mismo o en otro recurso en la Web
(documento, imagen, sonido...)
19 Oct HTML 4.01 23/45
12
Enlaces
Se emplea el tag <A></A> en el punto (ancla) origen del enlace
Si el destino es otro recurso/documento no hace falta un ancla en el destino
Atributo href :
Contiene el URI del recurso al que se apunta
El URI puede ser relativo a la posición del documento actual
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Enlaces</title></head>
<body>
Mi primer <a href="[Link]
<br>
Enlace a <a href="dibujos/[Link]">una imagen</a> en este servidor
</body></html>
Se puede especificar un punto (ancla) en concreto en el documento destino.
Para ello debe estar etiquetado ese punto (atributo name)
Enlace a <a href="#otraseccion">otra parte</a> de este documento
<p><a name="otraseccion">La otra</a> parte con un <a
href="[Link] a otro documento</a>
19 Oct HTML 4.01 24/45
HTML 4.01
[Link]
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 25/45
13
Tags del cuerpo del documento
(Objetos)
La formma general de incluir un “objeto” dentro de una página es
mediante el tag <OBJECT></OBJECT> (una imagen, un applet, etc.)
Atributo type : especifica el tipo de objeto. Como el “HTTP Content-
Type”
Si el objeto es una imagen se puede hacer mediante el tag <IMG>
Atributo src especifica el fichero conh la imagen mediante un URI
Atributo alt sirve para mostrar un texto alternativo en cado de no cargar
la imagen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"[Link]
<html>
<head><title>Imagenes</title></head>
<body>
Un objeto que es <object data="[Link]"
type="image/png">una foto</object><br>
O directamente <img src="[Link]" alt="Una foto
sin importancia">
</body></html>
19 Oct HTML 4.01 26/45
HTML 4.01
[Link]
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 27/45
14
Tags del cuerpo del documento
(Formularios)
Contienen elementos especiales llamados “controles”
Una vez completado el formulario se envía a un programa a
través del servidor Web para que lo procese
Los elementos de un formulario
Tienen un nombre mediante el atributo name
Pueden tener un valor inicial mediante el atributo value
Cuando se envía un formulario completado al servidor se
envía la información de algunos controles en la forma
nombre=valor donde “nombre” es el el atributo name y
“valor” el que ha tomado el control
19 Oct HTML 4.01 28/45
Formularios
Emplean el tag <FORM></FORM>
Actúa como un contenedor. En su interior se
definen los controles aunque también pueden
aparecer tags normales.
Atributos:
action Especifica el URI del programa que procesará el
contenido del formulario
method Especifica el método de HTTP (post o get) que se
empleará para enviar el contenido del formulario
19 Oct HTML 4.01 29/45
15
Controles: <INPUT>
Permite crear diferentes tipos de controles según los atributos
Atributos:
type Especifica el tipo de control. Posibles valores:
text Entrada de texto de una sola línea
password Como text pero sin mostrar lo que se escribe
checkbox Checkbox. Se indica como activo con el atributo checked
radio Radio button. Todos los que tengan el mismo name están en
el mismo grupo (solo uno activo). Se selecciona el activo con
el atributo checked
submit Botón que cuando se presiona envía el contenido del formulario
image Botón de submit formado con una imagen (atributo src la
especifica con un URI)
reset Botón que al presionarlo reinicia los controles del formulario a sus
valores iniciales
button Botón, con el texto del atributo value
hidden Un control que no se muestra
file Generalmente un botón para elegir un fichero
name Nombre del control
value Valor inicial del control
19 Oct HTML 4.01 30/45
Ejemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Controles</title></head>
<body>
<form
action="[Link]
method="post">
Nombre:<input type="text" name="userid" value="Texto por
defecto"><br>
Password: <input type="password" name="clave"><br>
<input type="checkbox" checked
name="check1">Checkbox<br>
<input type="checkbox" checked name="check2">Otro
checkbox<br>
<input type="radio" name="miradio" value=“uno”
checked>Radio button<br>
<input type="radio" name="miradio” value=“otro”>Otro
radio button
<input type="submit" value="Envia todo"><br>
<input type="image" src="[Link]" name="lafoto">
<input type="button" value="otro boton" name="elboton">
<p><input type="file" value="[Link]"
name="elfich"><br>
<input type="reset" value="Borra todo">
</form>
</body></html>
19 Oct HTML 4.01 31/45
16
Más botones
Elemento <BUTTON></BUTTON>
Botones similares a los creados con <INPUT> pero con otras posibilidades
Atributos:
name El nombre del control
value Su valor inicial
type El tipo:
submit Para enviar el contenido del formulario
reset Para volver a los valores por defecto
button Genérico (para scripts)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Controles</title></head>
<body>
<form action="[Link]
method="post">
<button type="submit" name="miboton" value="Hola">Un boton con
una <img src="[Link]"></button>
</form>
</body></html>
19 Oct HTML 4.01 32/45
Menús
El elemento <SELECT></SELECT> ofrece una lista de selección.
Atributos:
name El nombre del control
size Número de elementos que deben mostrarse a la vez
multiple Si está quiere decir que se pueden
seleccionar varios elementos
Elementros dentro de SELECT :
<OPTION> Declara un elemento del menú. Atributos:
selected Si está quiere decir que el elemento está
preseleccionado
value Valor al ser seleccionado
<OPTGROUP></OPTGROUP> Permite crear sumenús. Dentro de él irían
elementos de tipo <OPTION>. Atributos:
label Da nombre al submenú
19 Oct HTML 4.01 33/45
17
Ejemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Mas controles</title></head>
<body>
<form
action="[Link]
p" method="post">
<select name="mimenu" size="9" multiple>
<option value="1">Opcion 1
<option selected value="2">Opcion 2
<option value="3">Opcion 3
<option value="4">Opcion 4
<optgroup label="Submenu">
<option value="5.1">Subelemento 1
<option value="5.2">Subelemento 2
</optgroup>
</select>
</form>
</body></html>
19 Oct HTML 4.01 34/45
Texto
Se puede incluir una zona de entrada de texto con el
elemento <TEXTAREA></TEXTAREA>
El contenido del elemento es el texto por defecto que aparece
Atributos:
name Nombre del control
rows Número de líneas de text visible que permite
cols Número de columnas de texto visible que permite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Mas controles</title></head>
<body>
<form
action="[Link]
hp" method="post">
<textarea name="mitexto" rows="10" cols="40">
Texto por defecto
</textarea>
</form>
</body></html>
19 Oct HTML 4.01 35/45
18
HTML 4.01
[Link]
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 36/45
Frames
Permiten mostrar varios documentos simultáneamente
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"[Link]
<html>
<head><title>Frames</title></head>
<frameset rows="20%, 80%">
<frame src="[Link]" name="frame1">
<frameset cols="50%, 50%">
<frame src="[Link]" name="frame2">
<frame src="[Link]" name="frame3">
<noframes>
Tu navegador no soporta frames
</noframes>
</frameset>
</frameset></html>
En vez de <BODY></BODY> se usa <FRAMESET></FRAMESET> y otro DTD
Atributos rows y cols de <FRAMESET> controlan la división en frames
Los <FRAMESET> pueden ser anidados
Anlaces (tag <A>) pueden hacer que el nuevo documento aparezca en un frame en
concreto dándole nombre al mismo (name) y señalándolo desde el link con target=“el
nombre del frame”
19 Oct HTML 4.01 37/45
19
HTML 4.01
[Link]
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 38/45
Hojas de Estilos (style sheets)
Permiten modificar la apariencia (fonts, colores, estilos,
fondos...)
Esta información se puede dar en:
1) En un fichero aparte. Permite reutilzarlos
2) Agrupada al comienzo el documento
3) Como atributo de elementos en concreto
HTML no obliga a un lenguaje de hojas de estilos en
concreto. Vamos a ver CSS (Cascading Style Sheets)
“Cascading” porque permite que varias hojas de estilos se
mezclen en uso en un documento, aplicando las reglas en un
orden en concreto.
Actualmente versión 2 (CSS2)
[Link]
19 Oct HTML 4.01 39/45
20
CSS
(Cómo incluir la hoja de estilos)
• Como un fichero externo: (Debe aparecer entre <HEAD></HEAD>)
<LINK href=“[Link]” type=“text/css”>
• Empleando el elemento <STYLE></STYLE>
- Permite incluir la hoja de estilos en la cabecera (entre <HEAD></HEAD>)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"[Link] (Opcional) Elemento de comentario en HTML.
">
<html> Ayuda a que clientes que no entienden CSS no
<head><title>Estilo</title></head>
<style type=“text/css”> lo muestren
<!--
P {
color:green;
border:solid red; Hola de estilos
}
-->
</style>
<body>
<p>Mi parrafo
</body></html>
• Empleando el atributo style
<p style=“color:green; border:solid red”>Mi parrafo
19 Oct HTML 4.01 40/45
CSS
(Formato de las reglas)
Una hoja de estilos es una o más reglas que se aplican a un
documento HTML
Formato de las reglas:
selector { declaraciones }
El selector sirve para indicar a qué tags debe aplicarse la regla
Un selector puede ser un tipo de elemento, entonces se aplica a todos
Se pueden aplicar las mismas declaraciones a varios tags
Las declaraciones son las modificaciones al estilo de esos tags
Las declaraciones dan valor a una propiedad del tag:
propiedad: valor
Ejemplos:
H1 { color: red } (Se aplica a todos los H1)
H1 { color: red; font-style: bold }
H1, H2 {text-align: center} (Se aplica a los H1 y H2)
19 Oct HTML 4.01 41/45
21
CSS
(Selectores de atributos)
Se puede seleccionar con mayor precisión los elementos a los que hace
referencia una regla
Podemos “etiquetar” unos elementos en el documento HTML como
perteneciendes a una clase y hacer que la regla haga referencia a los de esa
clase (atributo class)
Podemos poner identificadores a elementos en concreto del documento
HTML para referirlos desde reglas (atributo id)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
<head><title>Clases</title></head>
<style type="text/css">
<!--
P.clase1 { font-weight:bold }
P.clase2 { font-weight:normal }
#elsi { color:red }
-->
</style>
<body> “Todos los tags P de la clase clase1“
<p class="clase1">Actor 1: Hola
<p class="clase2">Actor 2: Hola, no te habia visto
Si apareciera .clase1 querría decir:
<p class="clase1">Actor 1: Vienes solo? “Todos los tags de la clase1”
<p class="clase2" id="elsi">Actor 2: Si
</body></html>
El tag con id=“elsi” (solo puede
ser uno)
19 Oct HTML 4.01 42/45
Varios
Para dibujar una línea horizontal de separación: <HR>
Hay símbolos que se deben especificar mediante referencias:
á é í ó ú á é í ó
ú
ñ ñ
<> < >
Hay que tener cuidado con los nombres de los ficheros
porque aunque los nombres DNS no reconocen mayúsculas,
los paths puede que sí lo hagan según el sistema de ficheros
del servidor
[Link]
Es recomendable que muchos elementos (imágenes por
ejemplo) empleen el atributo title (o alt) para dar una
descripción alternativa en caso de que el navegador no pueda
representar ese elemento
19 Oct HTML 4.01 43/45
22
Resumen
HTML es un lenguaje de etiquetas
Se transporta sobre HTTP sobre conexiones TCP
Contiene enlaces a otros documentos (hyperlinks)
Permite que el usuario introduzca información
mediante el empleo de formularios
HTML presenta los formularios pero no los procesa
Hoy en día la mayoría de los cambios estéticos en
la página se hacen mediante “hojas de estilo”
19 Oct HTML 4.01 44/45
El próximo día
Server-side versus Client-side processing
CGIs
19 Oct HTML 4.01 45/45
23
