Professional Documents
Culture Documents
1: Lenguaje
HTML
Contenido
Introduccin
Qu es HTML?
Versiones HTML
Caractersticas del HTML
Etiquetas/Atributos
Estructura de un documento
Definicin de Tipos de Documentos (DTDs)
Cabecera de un documento HTML
Etiqueta TITLE
Etiqueta META
Elementos de HTML
Titulares/Encabezados
Tamaos/tipos de letra
Texto en color
Prrafos y lnea
Enmarcado de texto
Texto preformateado
Otros efectos en el texto
Caracteres especiales
Comentarios
Introduccin
En Espaol se traducen (HTML):
LENGUAJE DE MARCACIN DE
HIPERTEXTO.
HTML (HyperText Markup Language)
Fue creado por el fsico nuclear TIM
BERNERS-LEE el cual propuso disear un
sistema de unificacin del acceso a todos los
datos que posea el Centro Europeo para la
Investigacin Nuclear.(CERN)
3
Introduccin
Se comenz as a desarrollar una plataforma de tipo
Introduccin
Actualmente HTML es un Estndar Internacional
Qu es HTML?
HTML no es un lenguaje de programacin, por lo
Qu es HTML?
HTML es estandarizado y multiplataforma.
Un documento preparado utilizando marcas HTML
Qu es HTML?
Es un lenguaje de marcas o etiquetas muy
Qu es HTML?
La descripcin se basa en especificar en el
Qu es HTML?
Los documentos HTML son ficheros de texto
Qu es HTML?
Sin embargo, estos editores pueden llegar a
11
Versiones de HTML
1993: Hypertext Markup Language (Primera
12
Versiones de HTML
1995: HTML 2.0, publicado por la IETF como
documento RFC-1866.
Define los elementos de INPUT, SELECT y
13
Versiones de HTML
1997: HTML 3.2, publicado como
14
Versiones de HTML
1998: HTML 4.0, publicado como
15
Versiones de HTML
1999: HTML 4.01, publicado como
16
Versiones de HTML
A lo largo del desarrollo de esta unidad se utilizar
17
Versiones de HTML
Podemos encontrar el estndar "HTML 4.01
Specification" en http://www.w3.org/TR/html401/
(en ingls) y tambin en
http://www.w3.org/MarkUp/html4-updates/translati
ons#Spanish
(en castellano).
En esta especificacin nos encontraremos que
18
maysculas/minsculas
19
Etiquetas
Un documento realizado con lenguaje HTML
<nombre-etiqueta>
ABRE ETIQUETA
Elemento de contenido
</nombre-etiqueta>
CIERRA ETIQUETA
Ejemplo:
<TITLE>Un ttulo</TITLE>
20
Etiquetas
Existen dos clases de etiquetas:
Etiquetas vacas
<etiqueta>
21
Etiquetas
Etiquetas contenedoras
Constan de una marca inicial y una marca final
igual que la inicial pero precedida del carcter /.
Todo lo que est incluido entre ambas marcas
quedar sujeto al formato indicado por la etiqueta.
La mayora de estas etiquetas pueden contener a
su vez otras etiquetas de cualquiera de los dos
tipos.
Su formato es:
<etiqueta>texto</etiqueta>
22
Atributos
Las etiquetas pueden tener atributos que son
</etiqueta>
23
Estructura de un documento
html
<html>
25
Donde:
FPI es el (Format Public Identifier o Identificador
Pblico de Formato)
URI_DTD (URL de la DTD que define formalmente
26
son:
FPI
URI_DTD
"//W3C//DTD "http://www.w3.org/TR/html4/
HTML
strict.dtd"
4.01//EN"
TipodeDocumento
HTML
estricto
HTML
"//W3C//DTD "http://www.w3.org/TR/1999/R
transicion
HTML
4.01 EChtml401
al
Transitional 19991224/loose.dtd"
//EN"
"//W3C//DTD "http://www.w3.org/TR/1999/R
HTML
4.01 EChtml401
Frameset//EN 19991224/frameset.dtd"
"
HTMLcon
marcos
(frames)
27
Estructura de un documento
Veamos el cdigo de una pgina Web simple:
html
28
Estructura de un documento
html
Ejemplo:
29
Estructura de un documento
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>
Documento de prueba
</TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>
</HTML>
Guardamos el fichero con el nombre practica.htm y
Etiqueta META
Etiqueta META
HTTP-EQUIV (continua):
Tambin puede hacerse a una direccin:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10;
URL=http:// www.google.es ">
</HEAD>
34
Etiqueta
META
Ejemplos de etiqueta <meta>:
35
1. PRACTICA HTML
Vamos a crear una pgina web que contenga la imagen
36
37
Atributos
Los atributos de la etiqueta body son:
bgcolor: (valor= color) define el color de fondo del
documento
background: (valor = URL) indica la direccin web de
la imagen de fondo del documento. Si dicha imagen se
encuentra en el propio servidor, se utilizar la direccin
relativa (ruta del directorio)
text: (valor =color) establece el color en el que
aparecer el texto del documento
link: (valor= color) establece el color en el que
aparecer el texto de los enlaces del documento
vlink: (valor= color) determina el color en el que
aparecer el texto de los enlaces visitados del
documento.
38
39
</BODY>
</HTML>
40
42
Texto en color
Establecer el color del texto en el documento
43
Titulares/Encabezados
Para definir distintos niveles de cabeceras, en HTML se utiliza el
<html>
<head><TITLE>Titulares</TITLE></head>
<body>
<H1>Titular
<H2>Titular
<H3>Titular
<H4>Titular
<H5>Titular
<H6>Titular
de
de
de
de
de
de
primer nivel</H1>
segundo nivel</H2>
tercer nivel</H3>
cuarto nivel</H4>
quinto nivel</H5>
sexto nivel</H6>
</body>
</html>
NOTA: despus del cierre con la etiqueta </Hx> automticamente el
Titulares/Encabezados
Los ttulos aparecen por defecto alineados a la izquierda, para
46
de la pgina quiere que vea el cliente, sin importar el que por defecto
tenga establecido el visualizador.
Si escribes
<FONT FACE="arial">Texto de prueba con tipo ARIAL</FONT><br>
<FONT FACE="times new roman">Texto de prueba con tipo TIMES NEW
ROMAN</FONT><br>
<FONT FACE="courier new">Texto de prueba con tipo COURIER
NEW</FONT><br>
<FONT FACE="courier">Texto de prueba con tipo
COURIER</FONT><br>
<FONT FACE="roman">Texto de prueba con tipo ROMAN</FONT><br>
<FONT FACE="small fonts">Texto de prueba con tipo SMALL
FONTS</FONT>
Si se define un tipo del que se tienen dudas de que exista en el cliente, se
48
49
ETIQUETA FONT
Por supuesto, existe la posibilidad de combinar los
50
Prrafos
Para delimitar un bloque de texto o prrafo usamos
la
etiqueta <p>texto del prrafo</p>.
Visualmente equivale a pulsar dos veces la tecla
Return. Admite un atributo align con los valores
left, center, right, justify (no en todos los
navegadores).
51
Prrafos
El elemento <P> admite el atributo: ALIGN=LEFT (por defecto),
52
Saltos de lnea
<br> No tiene cierre (etiqueta simple). Si no se pone,
53
Prrafos
Un elemento que se comporta de forma parecida a <P> es <DIV>
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
54
Prrafos
Etiqueta <BLOCKQUOTE> que sirve para presentar prrafos
Enmarcado de texto
La Etiqueta <FIELDSET> permite rodear un texto con un marco, y
58
Texto preformateado
La etiqueta <PRE> reproduce el texto tal y como ste se ha
<B>Texto en negrita</B>
Texto realzado: depende del navegador, su misin es enfatizar el
texto afectado y esto se puede hacer poniendo el texto en negrita,
subrayado o en negrita y subrayado.
<STRONG>Texto realzado</STRONG>
Texto en itlica: cursiva
<I>Texto en itlica</I>
60
61
62
CARACTERES ESPECIALES
Una pgina web se ha de ver en pases distintos, que
"
blanco forzado
63
CARACTERES ESPECIALES
á
Á
é
É
ñ
Ñ
¿
¡
64
CARACTERES ESPECIALES
Por ejemplo, la "" (a minscula acentuada) se
CARACTERES ESPECIALES
Los navegadores deben saber en qu tipo de
66
Comentarios
Podemos incluir comentarios que no sern
67