PDF de programación - Fundamentos de HTML

Programación en Internet 2007-2008

Departamento de Lenguajes y
Sistemas Informáticos

Fundamentos de HTML
Fundamentos de HTML

Programación en Internet

Curso 2007-2008

Programación en Internet – Curso 2007-2008

Contenidos

• Introducción
• HTML
• Etiquetas
• Guía de estilo

DLSI - Universidad de Alicante

1

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Introducción

• Qué es
• Clasificación de las páginas
• Qué necesito para diseñar con HTML
• Editores HTML (gratuitos)
• Editores HTML (pago)

Programación en Internet – Curso 2007-2008

Qué es

• HyperText Markup Language (Lenguaje

t

d M
t )
de Marcas de Hipertexto)

d Hi

• Basado en Standard Generalized

Markup Language(SGML)
• Define formato del texto:

– Posición
– Colores
– Tamaños
– …

DLSI - Universidad de Alicante

2

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Historia (1)

• RFC 1630 Universal Resource Identifiers
in WWW: A Unifying Syntax for the
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.

Programación en Internet – Curso 2007-2008

Historia (y 2)

• 1989 ... 1991: Tim Berners-Lee

– URL + HTTP + HTML
URL + HTTP + HTML

...

• 1994: World Wide Web Consortium (W3C)
• Noviembre 1995: HTML 2.0
•
• Diciembre 1999: HTML 4.01
• Enero 2000: XHTML 1.0
• Mayo 2001: XHTML 1.1 Module-based XHTML
Ma o 2001 XHTML 1 1 Mod le based XHTML
• Agosto 2002:

– XHTML 1.0 Second Edition Correcciones
– XHTML 2.0 Working Draft Borrador propuesta

DLSI - Universidad de Alicante

3

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante

4

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

DLSI - Universidad de Alicante

5

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Clasificación de las páginas
• Según como se generan (servidor):

– Estáticas
– Dinámicas

• Según como se visualizan (cliente):

– Estáticas
Dinámicas
– Dinámicas

• Mejor: Dinámicas / Dinámicas

Programación en Internet – Curso 2007-2008

Qué necesito para diseñar con

HTML

• Editor ASCII estándar
• Navegador
• Ficheros: .htm o .html
• Editores HTML:

– ¿Por qué sí? ¿Por qué no?
– Ventajas e inconvenientes

DLSI - Universidad de Alicante

6

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Editores HTML (gratuitos)

• Netscape Composer
• Microsoft FrontPage Express
• http://tucows.ua.es

Co eCup

– AceHTML 4Free
– Arachnophilia
– CoffeCup Free HTML
ee
– FirstPage 2000
– W3e 2000
– ...

Programación en Internet – Curso 2007-2008

Editores HTML (pago)

• Adobe GoLive
• Adobe PageMill
• Claris Home Page
• HotMetal Pro
• Macromedia DreamWeaver
• Microsoft FrontPage
• NetObjects Fusion

DLSI - Universidad de Alicante

7

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Editores HTML

• Ventajas:

– Por productividad: ahorro de tiempo y esfuerzo
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

código

– Las prestaciones de la herramienta te condicionan

Reducción de flexibilidad

– Te condiciona a la versión de HTML que genera

Programación en Internet – Curso 2007-2008

HTML

• Etiquetas
• Diferencias con XHTML
• Estructura de una página
• Metadatos

DLSI - Universidad de Alicante

8

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Etiquetas (1)

• Etiqueta o marca (tag):

I di

id l

– Individual: <…>
– Por parejas: <…> … </…>

• Estructura general:
<ETIQUETA

ATRIBUTO1=“VALOR1”
ATRIBUTO2=“VALOR2”
2”
2 “
... ... ...>

Contenido
</ETIQUETA>

Programación en Internet – Curso 2007-2008

Etiquetas (y 2)

• Atributos

– <IMG SRC=“a.gif”>
– <FRAME NORESIZE>
– <FONT SIZE=“5”>…</FONT>

• Minúsculas/mayúsculas

– <HTML>, <Html>, <html>
<HTML> <Ht l> <ht l>
– Claridad Mayúsculas
– XHTML Minúsculas

DLSI - Universidad de Alicante

9

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Diferencias con XHTML
• Etiquetas y atributos Minúsculas
• Valores de los atributos Entre

comillas

• No se admiten atributos sin valor
• Etiquetas por parejas o etiquetas

í

vacías:
– Por parejas: <…> … </…>
– Etiqueta vacía: <… />

Programación en Internet – Curso 2007-2008

Diferencias con XHTML

• Tres versiones:

– XHTML Strict
XHTML St 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/xhtml1-
strict.dtd">

DLSI - Universidad de Alicante

10

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

Estructura de una página

<?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="Content-Style-Type" content="text/css" />
<meta http-equiv= Content-Style-Type content= text/css />

</head>
<body>

</body>
</html>

<p>… Your HTML content here …</p>

DLSI - Universidad de Alicante

11

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Diferencias con XHTML

• 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">

Programación en Internet – Curso 2007-2008

Validar una página HTML

• ¿Cómo se sabe que una página HTML

está bien escrita? Validación

• W3C: http://validator.w3.org/

DLSI - Universidad de Alicante

12

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

Estructura de una página
• <title>…</title>
• <!-- Comentario -->
• Saltos de línea y espacios en

blanco Se ignoran
– <br>
– &nbsp;
b

DLSI - Universidad de Alicante

13

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Metadatos

• Información sobre los datos
• Sección HEAD:

– <meta http-equiv="propiedad"
content="contenido">
– <meta name="propiedad"
content="contenido">
co te t co te do

Programación en Internet – Curso 2007-2008

Metadatos

content="5;url=http://www.ua.es">
en Internet">

<html>
<head>
<head>
<meta http-equiv="Refresh"
<meta name="autor" content=“Programación
</head>
<body>
<body>
En cinco segundos tiene que cambiar la
</body>
</html>

página...

DLSI - Universidad de Alicante

14

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Metadatos

• <meta name=“description”

• <meta name=“copyright” content=“Empresa,
• <meta name=“keywords” content=“palabras,

autor, diseñador”>
autor, diseñador
clave, relativas, al, contenido, del,
sitio, web”>
content=“Descripción del contenido del
sitio web, frases importantes
relacionadas con la finalidad del sitio”>
l fi lid d d l iti ”
• <meta name=“author” content=“Quién lo ha
hecho, persona o empresa”>
• <meta name="robots" content="index,
follow">

l i

d

Programación en Internet – Curso 2007-2008

Metadatos

• <meta http-equiv=“Content-Type”
content=“text/html;
charset=iso-8859-1”>
• <meta http-equiv="Content-
Language" content="ES">
• <meta http equiv="Content
• <meta http-equiv="Content-
Script-Type"
content="JavaScript">

DLSI - Universidad de Alicante

15

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Programación en Internet – Curso 2007-2008

Etiquetas

• Introducción
• Categorías
• Enlaces
• Tablas
• Imágenes
• Formularios
• Marcos

DLSI - Universidad de Alicante

16

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Introducción
• Guerra de los navegadores:

– Netscape Navigator ⇔ Microsoft Internet

Explorer

• Actualidad: Opera, Firefox, Safari, etc.
• Estándar: W3C

HTML 4 01
– HTML 4.01
– XHTML 1.0
– XHTML 1.1
– XHTML 2 (en desarrollo)

Programación en Internet – Curso 2007-2008

Categorías (1)

<html>,

<head>

• Etiquetas que definen la estructura del
y
documento:
<body>
• Etiquetas que pueden ir en la cabecera:
<title>
<meta>
<title>,
<meta>,
<style> y <link>

<base>
<base>,

DLSI - Universidad de Alicante

17

Programación en Internet 2007-2008

Programación en Internet – Curso 2007-2008

Categorías (2)

t

bl

d fi

• Etiquetas que definen bloques de texto:
d t
Eti
t
<address>, <blockquote>,
<div>, <h1>…<h6>, <p>, <pre>
y <xmp>
• Etiquetas de listas: <dir>, <dl>,
d
<dt>, <dd>, <menu>, <ol>,
<ul> y <li>

dd

l

Programación en Internet – Curso 2007-2008

Categorías (3)

t

t

d

d l t

• Etiquetas de características del texto: <b>,
Eti
t
<blink>,
<basefont>,
<cite>, <code>, <em>, <font>, <i>,
<kbd>,
<small>,
<strike>, <strong>, <sub>, <sup>,
<tt>, <u> y <var>
<tt>, <u> y <var>

í ti
<big>,
<plaintext>,

b

• Etiquetas de anclas y enlaces: <a>

DLSI - Universidad de Alicante

18

Programación en Internet 2007-2008

Programación en Internet