Post on 31-Jan-2022
1
Departamento deDepartamento deLenguajes y Sistemas InformLenguajes y Sistemas Informááticosticos
escuela técnica superiorde ingeniería informática
Tie
mpo:
2h
[Ángel US V7] Diseño: Amador Durán Toro (2003-2006)
Ver
sión
ori
gin
al:
Am
ador
Durá
n y
Davi
d B
enavi
des
(oct
ubre
2005)
Últim
a r
evis
ión:
Am
ador
Durá
n T
oro
(oc
tubre
2006);
cam
bio
de p
lantilla
y p
equeñ
os c
am
bio
s.
IntroducciIntroduccióón an aHTML EstHTML Estááticotico
Grupo de IngenierGrupo de Ingenieríía del Softwarea del Software
Octubre 2006Octubre 2006
Sevilla, octubre de 2006Grupo de Ingeniería del Software 1
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Concepto de lenguaje de marcadoConcepto de lenguaje de marcado– Los lenguajes de marcado añaden información a un
texto mediante marcas (también denominadas elementos).
Esto es un <m Esto es un <m infoinfo="x">texto</m> con una marca.="x">texto</m> con una marca.
•• Algunos lenguajes de marcadoAlgunos lenguajes de marcado– SGML: estándar ISO de 1986 (LinuxDoc).
– HTML: simplificación de SGML.
– XML: lenguaje de marcado estricto que permite definir nuevos elementos.
– XHTML: HTML siguiendo las reglas de marcado XML.
•• Contenido y aparienciaContenido y apariencia– El objetivo de las últimas versiones de XHTML es la
separación de contenido y apariencia para crear la web semántica.
– El contenido se expresa mediante XHTML y la apariencia mediante hojas de estilo CSS.
2
Sevilla, octubre de 2006Grupo de Ingeniería del Software 2
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Reglas de marcado estricto (XML)Reglas de marcado estricto (XML)1. Todo el documento debe estar dentro de un único
elemento raíz.
2. Los elementos contienen texto y/o otros elementos, formando una jerarquía.
3. Los elementos no pueden solaparse.
4. Todos las elementos deben tener etiquetas de apertura y de cierre: <e><e>texto</e></e> (<e></e><e></e> ≡ <e/><e/>).
5. Los nombres de los elementos son sensibles a mayúsculas y minúsculas (<e> <e> ≠ <E><E>).
6. Los elementos pueden llevar atributos en la etiqueta de apertura:
<e at1="v1" at2="v2"><e at1="v1" at2="v2">texto</e></e>
7. Los valores de los atributos deben ir entre comillas.
8. El orden de los atributos es irrelevante.
9. Los comentarios se escriben entre <!<!---- y ---->>:
<!<!---- esto es un comentario esto es un comentario ---->>
Sevilla, octubre de 2006Grupo de Ingeniería del Software 3
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Enlaces entre documentosEnlaces entre documentos
– Un sistema de hipertexto añade una nueva dimensidimensióónn al texto al incluir (hiper)enlaces que permiten saltarsaltar (navegarnavegar) desde un punto de un texto a otro.
<html>
<a href="B.html">B</a>
</html>
<html>
<a href="B.html">B</a>
</html>
A.html
<html>
<a href="C.html#X">C.X</a>
</html>
<html>
<a href="C.html#X">C.X</a>
</html>
B.html<html>
<a name="X"/>
</html>
<html>
<a name="X"/>
</html>
C.html
3
Sevilla, octubre de 2006Grupo de Ingeniería del Software 4
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Destinos de salto (anclas)Destinos de salto (anclas)– <a a namename="nombre del ancla"/>
– <ee idid="nombre del ancla">…</ee>• Donde e es cualquier elemento de XHTML.
•• EnlacesEnlaces– <a a hrefhref="URL">texto enlace</aa>
• Salta al comienzo del documento identificado por la URL.
– <a a hrefhref="URL#ancla">texto enlace</aa>• Salta al punto del documento de la URL donde está
definida el ancla con el nombre especificado.
– <a a hrefhref="#ancla">texto enlace</aa>• Salta al punto del documento actual (el mismo en el que
está definido el enlace) donde está definida el ancla con el nombre especificado.
– <a a href="..." titletitle="información">texto enlace</aa>• El atributo title añade información sobre el enlace, que se
suele mostrar como un tooltip en los navegadores actuales.
Sevilla, octubre de 2006Grupo de Ingeniería del Software 5
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Elementos de la estructura bElementos de la estructura báásicasica
–– <<htmlhtml>>: elemento raíz del documento.
–– <<headhead>>: cabecera del documento; aparte del título, puede contener otra información sobre el documento.
–– <<titletitle>>: título del documento.
–– <<bodybody>>: cuerpo (contenido) del documento.
<html>
<head>
<title>Título del documento</title>
<!-- otra información de cabecera -->
</head>
<body>
<!-- contenido del documento -->
</body>
</html>
<<htmlhtml>>
<<headhead>>
<<titletitle>>Título del documento</</titletitle>>
<!<!---- otra información de cabecera ---->>
</</headhead>>
<<bodybody>>
<!<!---- contenido del documento ---->>
</</bodybody>>
</</htmlhtml>>
4
Sevilla, octubre de 2006Grupo de Ingeniería del Software 6
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Elementos de la estructura de marcosElementos de la estructura de marcos
<html>
<head>
<title>Título del documento</title>
</head>
<frameset rows = "n|p%|*" cols ="n|p%|*">
<frame src = "URL"
name = "nombre del marco"
frameborder = "0|1|no|yes"
noresize = "noresize"
scrolling = "yes|no|auto"
/>
<!-- otros frames/frameset -->
<noframes>Texto de aviso</noframes>
</frameset>
</html>
<<htmlhtml>>
<<headhead>>
<<titletitle>>Título del documento</</titletitle>>
</</headhead>>
<<framesetframeset rowsrows = "n|p%|*" colscols ="n|p%|*">>
<<frameframe srcsrc = "URL"
namename = "nombre del marco"
frameborderframeborder = "0|1|no|yes"
noresizenoresize = "noresize"
scrollingscrolling = "yes|no|auto"
/>/>
<!<!---- otros frames/frameset ---->>
<<noframesnoframes>>Texto de aviso</</noframesnoframes>>
</</framesetframeset>>
</</htmlhtml>>
Sevilla, octubre de 2006Grupo de Ingeniería del Software 7
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Elementos de marcosElementos de marcos
– El elemento <<framesetframeset>> sustituye a <<bodybody>>.
– Los atributos rowsrows y colscols de <<framesetframeset>> especifican las filas y columnas mediante su tamaño en pixels, un porcentaje (%) o espacio restante (*). Si se usa más de un asterisco indican partes iguales.
– Los documentos indicados en los atributos srcsrc de los elementos <<frameframe>> se van asignando a los marcos de izquierda a derecha y de arriba abajo.
– Los elementos <<framesetframeset>> pueden anidarse dentro de otros <<framesetframeset>> o en otro documento incluido mediante un elemento <<frameframe>>.
– Aquellos navegadores que no soportan marcos muestran el texto del elemento <<noframesnoframes>.>.
5
Sevilla, octubre de 2006Grupo de Ingeniería del Software 8
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo (cEjemplo (cóódigo)digo)
<html>
<head>
<title>Ejemplo de marcos</title>
</head>
<frameset cols ="20%,*">
<frame src = "menu.html" />
<frameset rows ="15%,*">
<frame src = "titulo.html" />
<frame src = "contenido.html"
name = "contenido" />
</frameset>
</frameset>
</html>
<<htmlhtml>>
<<headhead>>
<<titletitle>>Ejemplo de marcos</</titletitle>>
</</headhead>>
<<framesetframeset colscols ="20%,*">>
<<frameframe srcsrc = "menu.html" />/>
<<framesetframeset rowsrows ="15%,*">>
<<frameframe srcsrc = "titulo.html" />/>
<<frameframe srcsrc = "contenido.html"
namename = "contenido" />/>
</</framesetframeset>>
</</framesetframeset>>
</</htmlhtml>>
Sevilla, octubre de 2006Grupo de Ingeniería del Software 9
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo (apariencia)Ejemplo (apariencia)
6
Sevilla, octubre de 2006Grupo de Ingeniería del Software 10
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• NavegaciNavegacióón entre marcosn entre marcos
– Por defecto, al hacer clic en un enlace, el documento especificado por su URL se abre en el mismo marco en el que se encuentra el enlace.
– Para abrir el documento en otro marco se usa el atributo target:
<a <a hrefhref="URL" targettarget="nombre de marco">>…</a></a>
– El atributo targettarget, aparte del nombre de un marco, puede tomar los siguientes valores:
•• __blankblank: una ventana nueva.
•• __selfself : el mismo marco (es el valor por defecto).
•• __parentparent: el marco padre.
•• __toptop: la ventana principal.
– Si el valor de targettarget no coincide con el nombre de ningún marco, los navegadores abren el documento en una ventana nueva y le asignan el nombre especificado, pudiéndose referenciar.
Sevilla, octubre de 2006Grupo de Ingeniería del Software 11
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• CabecerasCabeceras
–– <h1><h1>Texto cabecera</h1></h1> <h6><h6>…</h6></h6>
•• DivisionesDivisiones
–– <<divdiv>>…</</divdiv>>: división lógica.
–– <<spanspan>>…</</spanspan>>: zona de texto*.
•• PPáárrafosrrafos
–– <p><p>…</p></p>: párrafo de texto.
–– <<brbr/>/>: fuerza una nueva línea.
–– <<nobrnobr>>…</</nobrnobr>>: evita una nueva línea.
•• Texto formateadoTexto formateado
–– <<prepre>>…</</prepre>>: respeta los espacios y los saltos de línea. Se suele usar para código fuente.
•• LLííneas horizontalesneas horizontales
–– <<hrhr/>/>: inserta una línea horizontal.
*El uso de <span> está asociado normalmente a las hojas de estilo CSS, que se verán más adelante.
7
Sevilla, octubre de 2006Grupo de Ingeniería del Software 12
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo de elementos estructuralesEjemplo de elementos estructurales
Sevilla, octubre de 2006Grupo de Ingeniería del Software 13
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Elementos de formateo lElementos de formateo lóógicogico
"Normal" ( no)Cita literal en la misma línea<q><q>
CursivaDirección<<addressaddress>>
IndentadoBloque de cita literal<<blockquouteblockquoute>>
MonoespacioLiteral<<sampsamp>>
NegrillaÉnfasis fuerte<<strongstrong>>
CursivaVariable<<varvar>>
MonoespacioTecleado<<kbdkbd>>
CursivaÉnfasis<<emem>>
CursivaDefinición<<dfndfn>>
MonoespacioCódigo<<codecode>>
CursivaCita<cite><cite>
NormalAcrónimo<<acronymacronym>>
NormalAbreviatura<<abbrabbr>>
AparienciaAparienciaDescripciDescripcióónnElementoElemento
8
Sevilla, octubre de 2006Grupo de Ingeniería del Software 14
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo de elementos de formateo lEjemplo de elementos de formateo lóógicogico
Sevilla, octubre de 2006Grupo de Ingeniería del Software 15
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Elementos de formateo fElementos de formateo fíísicosico
MonoespacioTexto mecanografiado<<tttt>>
superíndicesuperíndice<<supsup>>
subíndicesubíndice<<subsub>>
PequeñaPequeña<<smallsmall>>
CursivaItálica<i><i>
GrandeGrande<<bigbig>>
NegrillaNegrilla<b><b>
AparienciaAparienciaDescripciDescripcióónnElementoElemento
TachadoTexto eliminado<del><del>
SubrayadoTexto insertado<<insins>>
AparienciaAparienciaDescripciDescripcióónnElementoElemento
9
Sevilla, octubre de 2006Grupo de Ingeniería del Software 16
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo de elementos de formateo fEjemplo de elementos de formateo fíísicosico
Sevilla, octubre de 2006Grupo de Ingeniería del Software 17
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• CCóódigos de caracteresdigos de caracteres
– Todos los caracteres pueden especificarse en XHTML mediante
ϧϧ
donde 999 es el código en decimal del carácter que se desea visualizar.
•• Entidades con nombreEntidades con nombre
– Algunos caracteres pueden especificarse también mediante un nombre especial, por ejemplo:
• < > & © á
• <, >, &, ©, á
•• Caracteres a evitar (<, >, &)Caracteres a evitar (<, >, &)
– En el texto XHTML nunca se deben usar literalmente los caracteres <<, >> y &&, ya que pueden confundir al analizador del código.
– Siempre se deben usar como entidades con nombre.
10
Sevilla, octubre de 2006Grupo de Ingeniería del Software 18
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• InserciInsercióón de imn de imáágenesgenes
– El elemento <<imgimg>> permite insertar una imagen en un documento XHTML.
– Los formatos habituales son GIFGIF (permite imágenes transparentes y animaciones) y JPGJPG, aunque la mayoría de los navegadores admite otros formatos como PNG, BMP, WMF, etc.
<<imgimg srcsrc = "URL de la imagen"
altalt = "Texto alternativo"
titletitle = "Texto informativo (tooltip)"
/>/>
Sevilla, octubre de 2006Grupo de Ingeniería del Software 19
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Mapas de imMapas de imáágenesgenes
– Permiten definir, para una imagen determinada, un conjunto de áreas de diferentes formas que actúan como enlaces.
<<imgimg srcsrc="URL" … usemapusemap="#mapa1" />/>
…
<<mapmap namename = "mapa1" >>
<<areaarea shapeshape="rect|circ|poly|default"
coordscoords="99,99,99,…,99"
hrefhref="URL"
targettarget="marco"
titletitle="texto tooltip"
/>/>
<!-- más definiciones de áreas -->
</</mapmap>>
11
Sevilla, octubre de 2006Grupo de Ingeniería del Software 20
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo de mapas de imEjemplo de mapas de imáágenesgenes
Sevilla, octubre de 2006Grupo de Ingeniería del Software 21
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Listas no ordenadasListas no ordenadas<<ulul typetype="disc|circle|square">>
<<lili typetype="disc|circle|square">>Elemento</</lili>>
<!-- más elementos -->
</</ulul>>
•• Listas ordenadasListas ordenadas<<olol startstart="n" typetype="A|a|I|i|1">
<<lili valuevalue="m" typetype="A|a|I|i|1">>Elemento</</lili>>
<!-- más elementos -->
</</olol>>
•• Listas de definicionesListas de definiciones<<dldl>>
<<dtdt>>Término que se define</</dtdt>>
<<dddd>>Definición del término</</dddd>>
<!-- más parejas <dt><dd> -->
</</dldl>>
Los atributos type, start y value están desaconsejados.
Los atributos typetype, startstart y valuevalue están desaconsejados.
Las listas pueden anidarse
Las listas pueden anidarse
12
Sevilla, octubre de 2006Grupo de Ingeniería del Software 22
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Ejemplo de listasEjemplo de listas
Sevilla, octubre de 2006Grupo de Ingeniería del Software 23
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Elementos para tablasElementos para tablas–– <<tabletable>>: elemento principal de la tabla.
–– <<trtr>>: filas de tabla (table row).
–– <<thth>>: celdas de cabecera (table header).
–– <<tdtd>>: celdas de datos (table data).
–– <<captioncaption>>: título de la tabla.
<<tabletable>>
</</tabletable>>
</</trtr>><<tdtd>>……</</tdtd>><<tdtd>>……</</tdtd>><<tdtd>>……</</tdtd>>
<<thth>>……</</thth>><<trtr>>
</</trtr>><<tdtd>>……</</tdtd>><<tdtd>>……</</tdtd>><<tdtd>>……</</tdtd>>
<<thth>>……</</thth>><<trtr>>
</</trtr>><<tdtd>>……</</tdtd>>
<<thth>>……</</thth>>
<<tdtd>>……</</tdtd>>
<<thth>>……</</thth>>
<<tdtd>>……</</tdtd>>
<<thth>>……</</thth>><<trtr>>
<<captioncaption>>……</</captioncaption>>
13
Sevilla, octubre de 2006Grupo de Ingeniería del Software 24
IntroducciIntroduccióón a HTML Estn a HTML Estááticotico
Escuela Técnica Superiorde Ingeniería Informática
Departamento de Lenguajesy Sistemas Informáticos
[Ángel
US V
7]
Dis
eño:
Am
ador
Durá
n T
oro
(2003-2
006)
1.1. Lenguajes de Lenguajes de marcadomarcado
2.2. El concepto de El concepto de hipertextohipertexto
3.3. Estructura de Estructura de una puna páágina gina webweb
4.4. Marcos (Marcos (framesframes))
5.5. Elementos Elementos estructuralesestructurales
6.6. Elementos de Elementos de formateo lformateo lóógicogico
7.7. Elementos de Elementos de formateo fformateo fíísicosico
8.8. Caracteres Caracteres especialesespeciales
9.9. ImImáágenes y genes y mapasmapas
10.10. ListasListas
11.11. TablasTablas
•• Atributos Atributos rowspanrowspan y y colspancolspan– En los elementos <th> y <td>, permiten que una
celda se expanda por varias filas y/o columnas.