Introducción a HTML Estático - Departamento de Lenguajes

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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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 <!>:

<!>





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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.





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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>



</head>

<body>



</body>

</html>

<<htmlhtml>>

<<headhead>>

<<titletitle>>Título del documento</</titletitle>>

<!>

</</headhead>>

<<bodybody>>

<!>

</</bodybody>>

</</htmlhtml>>

4





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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"

/>



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

/>/>

<!>

<<noframesnoframes>>Texto de aviso</</noframesnoframes>>

</</framesetframeset>>

</</htmlhtml>>





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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



</</htmlhtml>>





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Ejemplo (apariencia)Ejemplo (apariencia)

6





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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.





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Ejemplo de elementos estructuralesEjemplo de elementos estructurales





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Ejemplo de elementos de formateo lEjemplo de elementos de formateo lóógicogico





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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>


TachadoTexto eliminado<del><del>

SubrayadoTexto insertado<<insins>>


9





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Ejemplo de elementos de formateo fEjemplo de elementos de formateo fíísicosico





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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

/>/>





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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"

/>/>



</</mapmap>>

11





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Ejemplo de mapas de imEjemplo de mapas de imáágenesgenes





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Listas no ordenadasListas no ordenadas<<ulul typetype="disc|circle|square">>

<<lili typetype="disc|circle|square">>Elemento</</lili>>



</</ulul>>

•• Listas ordenadasListas ordenadas<<olol startstart="n" typetype="A|a|I|i|1">

<<lili valuevalue="m" typetype="A|a|I|i|1">>Elemento</</lili>>



</</olol>>

•• Listas de definicionesListas de definiciones<<dldl>>

<<dtdt>>Término que se define</</dtdt>>

<<dddd>>Definición del término</</dddd>>



</</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





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










10.10. ListasListas

11.11. TablasTablas

•• Ejemplo de listasEjemplo de listas





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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


</</trtr>><<tdtd>>……</</tdtd>>

<<thth>>……</</thth>>

<<tdtd>>……</</tdtd>>

<<thth>>……</</thth>>

<<tdtd>>……</</tdtd>>


<<captioncaption>>……</</captioncaption>>

13





[Ángel

US V

7]

Dis

eño:

Am

ador

Durá

n T

oro

(2003-2

006)










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.

Documents

Introducción a HTML Estático - Departamento de Lenguajes