05 HTML

Programacin en Internet 2007-2008
Departamento de Lenguajes y
Sistemas Informticos
Fundamentos de HTML
Programacin en Internet
Curso 2007-2008
Programacin en Internet Curso 2007-2008
Contenidos
Introduccin
HTML
Etiquetas
Gua de estilo
DLSI - Universidad de Alicante
Introduccin
Qu es
Clasificacin de las pginas
Qu necesito para disear con HTML
Editores HTML (gratuitos)
Editores HTML (pago)
Qu es
HyperText Markup Language (Lenguaje
d Marcas
de
M
de
d Hipertexto)
Hi t t )
Basado en Standard Generalized
Markup Language (SGML)
Define formato del texto:
Posicin
Colores
Tamaos
Historia (1)
RFC 1630 Universal Resource Identifiers
in WWW: A Unifying Syntax for the
Expression of Names and Addresses of
Objects on the Network as used in the
World-Wide Web. T. Berners-Lee. Junio
1994.
RFC 1866 Hypertext Markup Language 2.0. T. Berners-Lee, D. Connolly. Noviembre
1995.
1995
RFC 1945 Hypertext Transfer Protocol -HTTP/1.0. T. Berners-Lee, R. Fielding, H.
Frystyk. Mayo 1996.
Historia (y 2)
1989 ... 1991: Tim Berners-Lee
URL + HTTP + HTML
1994: World Wide Web Consortium (W3C)

Noviembre 1995: HTML 2.0
...
Diciembre 1999: HTML 4.01
Enero 2000: XHTML 1.0
Ma o 2001
Mayo
2001: XHTML 1
1.1
1 Mod
Module-based
le based XHTML
Agosto 2002:
XHTML 1.0 Second Edition Correcciones
XHTML 2.0 Working Draft Borrador propuesta
Clasificacin de las pginas

Segn como se generan (servidor):
Estticas
Dinmicas
Segn como se visualizan (cliente):

Estticas
Dinmicas
Mejor: Dinmicas / Dinmicas
Qu necesito para disear con

HTML
Editor ASCII estndar

Navegador
Ficheros: .htm o .html
Editores HTML:
Por qu s? Por qu no?
Ventajas e inconvenientes
Editores HTML (gratuitos)

Netscape Composer
Microsoft FrontPage Express
http://tucows.ua.es
AceHTML 4Free
Arachnophilia
Co
CoffeCup
eCup Free
ee HTML
FirstPage 2000
W3e 2000
...
Editores HTML (pago)
Adobe GoLive
Adobe PageMill
Claris Home Page
HotMetal Pro
Macromedia DreamWeaver
Microsoft FrontPage
NetObjects Fusion
Editores HTML
Ventajas:
Por productividad: ahorro de tiempo y esfuerzo

Por facilidad
Evita memorizar las etiquetas
Evita y ayuda a corregir errores
Desventajas:
Mala costumbre, se olvida la sintaxis o te
acostumbras a una herramienta concreta
En casos de emergencia, necesitas a nivel de
cdigo
Las prestaciones de la herramienta te condicionan
Reduccin de flexibilidad
Te condiciona a la versin de HTML que genera
HTML
Etiquetas
Diferencias con XHTML
Estructura de una pgina
Metadatos
Etiquetas (1)
Etiqueta o marca (tag):
IIndividual:
di id l <>
Por parejas: <> </>
Estructura general:
<ETIQUETA
ATRIBUTO1=VALOR1
ATRIBUTO2=VALOR2
2
2
... ... ...>
Contenido
</ETIQUETA>
Etiquetas (y 2)
Atributos
<IMG SRC=a.gif>
<FRAME NORESIZE>
<FONT SIZE=5></FONT>
Minsculas/maysculas
<HTML>,
<HTML> <Ht
<Html>,
l> <ht
<html>
l>
Claridad Maysculas
XHTML Minsculas

Etiquetas y atributos Minsculas
Valores de los atributos Entre
comillas
No se admiten atributos sin valor
Etiquetas por parejas o etiquetas
vacas:
Por parejas: <> </>

Etiqueta vaca: < />

Tres versiones:
XHTML St
Strict
i t
XHTML Transitional
XHTML Frameset
Los marcos usan Strict o Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
10

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv=
http-equiv="Content-Style-Type"
Content-Style-Type content=
content="text/css"
text/css />
</head>
<body>
<p> Your HTML content here </p>
</body>
</html>
11

Versiones HTML 4.01:
<!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">
Validar una pgina HTML

Cmo se sabe que una pgina HTML
est bien escrita? Validacin
W3C: http://validator.w3.org/
12

<title></title>

Saltos de lnea y espacios en
blanco Se ignoran
<br>

b
13
Metadatos
Informacin sobre los datos
Seccin HEAD:
<meta http-equiv="propiedad"
content="contenido">
<meta name="propiedad"
co te t co te do
content="contenido">
Metadatos
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.ua.es">
<meta name="autor" content=Programacin
en Internet">
</head>
<body>
En cinco segundos tiene que cambiar la
pgina...
</body>
</html>
14
Metadatos
<meta name=copyright content=Empresa,
autor, diseador>
diseador
<meta name=keywords content=palabras,
clave, relativas, al, contenido, del,
sitio, web>
<meta name=description
content=Descripcin del contenido del
sitio web, frases importantes
relacionadas
l i
d
con l
la fi
finalidad
lid d d
del
l sitio>
iti
<meta name=author content=Quin lo ha
hecho, persona o empresa>
<meta name="robots" content="index,
follow">
Metadatos
<meta http-equiv=Content-Type
content=text/html;
charset=iso-8859-1>
<meta http-equiv="ContentLanguage" content="ES">
<meta http
http-equiv="Contentequiv="Content
Script-Type"
content="JavaScript">
15
Etiquetas
Introduccin
Categoras
Enlaces
Tablas
Imgenes
Formularios
Marcos
16
Introduccin
Guerra de los navegadores:
Netscape Navigator Microsoft Internet
Explorer
Actualidad: Opera, Firefox, Safari, etc.

Estndar: W3C
HTML 4.01
4 01
XHTML 1.0
XHTML 1.1
XHTML 2 (en desarrollo)
Categoras (1)
Etiquetas que definen la estructura del
documento: <html>, <head> y
<body>
Etiquetas que pueden ir en la cabecera:
<title>
<title>,
<base>
<base>,
<meta>,
<meta>
<style> y <link>
17
Categoras (2)
Eti
Etiquetas
t que definen
d fi
bl
bloques d
de ttexto:
t
<address>, <blockquote>,
<div>, <h1><h6>, <p>, <pre>
y <xmp>
Etiquetas de listas: <dir>, <dl>,
<dt>,
d
<dd>,
dd
<menu>, <ol>,
l
<ul> y <li>
Categoras (3)
Eti
Etiquetas
t
d caractersticas
de
t ti
d l texto:
del
t t <b>,
b
<basefont>,
<big>,
<blink>,
<cite>, <code>, <em>, <font>, <i>,
<kbd>,
<plaintext>,
<small>,
<strike>, <strong>, <sub>, <sup>,
<tt>, <u> y <var>
Etiquetas de anclas y enlaces: <a>
18
Categoras (4)
Etiquetas de imgenes y mapas de
imgenes: <img>, <area> y
<map>
Etiquetas de tablas: <table>,
<caption> <tr>
<caption>,
<tr>, <td> y <th>
Categoras (5)
Etiquetas de formularios: <form>,
<input>, <select>, <option>,
<textarea>, <keygen> y
<isindex>
Etiquetas de marcos: <frame>,
<frame>
<frameset> y <noframes>
19
Categoras (6)
Etiquetas de situacin de contenidos:
<layer>, <ilayer> y <nolayer>
Etiquetas de script: <script>,
<noscript> y <server>
Categoras (y 7)
Eti
Etiquetas
t de
d applets
l t y plug-ins:
l i
<applet>, <param>, <embed>,
<noembed> y <object>
Etiquetas de ajuste del texto: <br>,
<center>, <hr>, <multicol>,
<nobr>,
b
<spacer>, <span> y
<wbr>
20
Formato del texto

Encabezados de secciones: <H1>, ...,
<H6>
Formatos fsicos: <B>, <I>, ...
Formatos lgicos: <CITE>, <CODE>, ...
<FONT FACE= SIZE=>
Cuidado con los tipos de letra exticos
Desaconsejado, usar CSS
Formato del texto

Tipos de letra serif:
Letra Courier New
Letra Georgia
Letra Times New Roman
Tipos de letra sans serif:

Letra
L t A
Arial
i l
Letra Tahoma
Letra Verdana
21
22
Listas
Listas de definicin
<DL>, <DT>, <DD>
Listas ordenadas (numeradas)

<OL>, <LI>
Listas no ordenadas
<UL>, <LI>
23
Colores
<FONT COLOR=>
<BODY BGCOLOR=>
<BODY TEXT= LINK= VLINK=
ALINK=>
Todos ellos desaconsejados, usar CSS
Color:
Componente RGB
Nombre de color
Sistema RGB
Coordenadas RGB:
R=Red
R=Red, rojo.
rojo G=Green,
G=Green verde y B=Blue
B=Blue, azul.
azul
Combinaciones RRGGBB. Dos cifras para cada
componente de color.
Cifras en hexadecimal: del 0 al 15, (0-9 i A-F)
A=10, B=11, C=12, D=13, E=14 i F=15.
Ejemplos:
000000, todos los colores apagados, negro.
FFFFFF, todos los colores al mximo, blanco.
FF0000, el rojo al mximo y el verde y azul
apagados, un rojo intenso
FFFF00, el rojo y verde al mximo, el azul a cero,
el amarillo intenso.
CCCCCC, todas las coordenadas iguales, pero
con una intensidad alta, un gris claro.
24
Enlaces (1)
Enlace a un punto del mismo
documento (enlace intradocumental)
Enlace: <A HREF=#nombre></A>
Destino: <A NAME=nombre></A>
25
Enlaces (2)
Enlace a otro documento (enlace
extradocumental)
<A HREF=pagina.html></A>
Enlaces (3)
Enlace a un punto de otro documento
Enlace:
<A HREF=pagina.html#nombre></A>
Destino: <A NAME=nombre></A>
26
Enlaces (y 4)
Peligro:
Maysculas y minsculas
Caracteres extraos (slo alfabeto ingls)
Rutas fsicas (file:///c:\miweb\grupos.html)
Tablas
<TABLE></TABLE>
<TABLE>
</TABLE>
<TR></TR>
<TH></TH>
<TD></TD>
27
28
29
30
Imgenes (1)
<IMG>
SRC
WIDTH y HEIGHT
BORDER
ALT Recomendable
Imagen de fondo de una pgina:

<BODY BACKGROUND=>
Desaconsejado, usar CSS
31
Imgenes (y 2)
Tipos de imgenes:
GIF, mapas de bits planos o pequeos.
Paleta de colores variables (256 mximo)
JPG, mapas de bits complejos y con
mucho pixelado. 16M colores, 3 bytes por
punto
PNG, mezcla entre GIF y JPG, tiene
caractersticas de los dos formatos,
posible heredero?
32
33
Formularios (1)
Cliente
Cli t Servidor
S id
<FORM NAME=nombre ACTION=pagina.html
METHOD=metodo>
Controles del formulario
</FORM>
Mtodo:
POST: sin limitacin de datos, mensaje ms largo
GET: limitacin de datos, transaccin ms sencilla
34
Formularios (2)
Atributos NAME y VALUE
Botones (para enviar informacin, borrar y
otras acciones): <INPUT TYPE=SUBMIT>,
<INPUT TYPE=RESET>, <INPUT
TYPE=BUTTON>
Imgenes que actan como botones (para
enviar informacin): <INPUT
TYPE=IMAGE>
Formularios (3)
Campos de verificacin: <INPUT
TYPE=CHECKBOX>
Campos excluyentes (botones de radio):
<INPUT TYPE=RADIO>
Campos
p de texto: <INPUT TYPE=TEXT>
35
Formularios (4)
Campos de contrasea (password): <INPUT
TYPE=PASSWORD>
Campos ocultos: <INPUT
TYPE=HIDDEN>
Envo de ficheros: <INPUT TYPE=FILE>
36
Formularios (y 5)
Listas de seleccin: <SELECT>,
<SELECT> <OPTION>
reas de texto: <TEXTAREA>
37
38
Marcos
Divisin ventana en regiones que son
ventanas
t
<FRAMESET></FRAMESET>
BORDER
<FRAME>
NORESIZE
SCROLLING
<A HREF= TARGET=></A>
Marcos
Valores predefinidos para TARGET:
_self
_blank
_parent
_top
Marco predeterminado (en la cabecera):

<BASE TARGET=nommarco">
39
40
41
42
43
44
45
46
Gua de estilo (1)

Organizar el cdigo HTML
Organizar,
Organizar ordenar y tabular
Comentarios
Cuidado con los colores

Colores por defecto del navegador
Color oscuro, fondo claro
Color claro,, fondo oscuro
Cuidado con los tipos de letra

Imgenes:
Texto alternativo (ALT)
No abusar de las animaciones
Gua de estilo (2)

Cuidado con los valores absolutos
Cuidado con las barras de
desplazamiento
Barra horizontal Evitar!
Cuidado con las imgenes de fondo

Contraste
C t t
Mosaico
Sacar partido al hipertexto
47
Gua de estilo (3)

Usar las capacidades multimedia
Velocidad de transferencia
Cach previa de los objetos
Imgenes de fondo
Identidad corporativa
Tipos de letra
let a
Colores
Imgenes
Gua de estilo (4)

Permitir que los usuarios se
comuniquen
Facilitar las bsquedas
ndice
Buscador
Mapa del sitio web
Revisar las pginas peridicamente
48
Gua de estilo (5)

Los enlaces
La <A HREF=/concejalias/turismo>Concejala de
Turismo</A> se encarga de gestionar el turismo
rural y de playa...
La Concejala de Turismo se encarga de gestionar el
turismo rural y de playa... (<A
HREF=/concejalias/turismo>haga click aqu para
ver ms informacin acerca de la Concejala de
Turismo</A>).
Gua de estilo (y 6)
Shneiderman, B., Designing the User Interface,
Addison-Wesley
Addison
Wesley, 1987:
Para muchos usuarios de sistemas de
computadora de informacin, la frustracin y la
ansiedad forman parte de la vida diaria.
Se esfuerzan por aprender un lenguaje de
rdenes o un sistema de seleccin de mens
q e se ssupone,
que,
pone les a
ayudar
dar en ssu trabajo
trabajo.
Algunas personas sufren casos tan serios de
shock con la computadora, de terror al terminal
o de neurosis de red, que evitan utilizar
sistemas de computadora
49

05 HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

05 HTML

Cargado por

Copyright:

Formatos disponibles

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Programacin en Internet Curso 2007-2008

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Programacin en Internet Curso 2007-2008

1994: World Wide Web Consortium (W3C)

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Programacin en Internet Curso 2007-2008

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Programacin en Internet Curso 2007-2008

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Clasificacin de las pginas

Segn como se visualizan (cliente):

Mejor: Dinmicas / Dinmicas

Programacin en Internet Curso 2007-2008

Qu necesito para disear con

Editor ASCII estndar

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Editores HTML (gratuitos)

Programacin en Internet Curso 2007-2008

Editores HTML (pago)

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Por productividad: ahorro de tiempo y esfuerzo

Programacin en Internet Curso 2007-2008

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Programacin en Internet Curso 2007-2008

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Diferencias con XHTML

Por parejas: <> </>

Programacin en Internet Curso 2007-2008

Diferencias con XHTML

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Programacin en Internet Curso 2007-2008

Estructura de una pgina

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008

Programacin en Internet Curso 2007-2008

Diferencias con XHTML

Programacin en Internet Curso 2007-2008

Validar una pgina HTML

DLSI - Universidad de Alicante

Programacin en Internet 2007-2008