Introducción a HTML Estático

(1)

Departamento de

Lenguajes y Sistemas Informáticos

escuela técnica superior

de ingeniería

informática

T

[Ángel US V7] Diseño: Amador Durán Toro (2003-2006)

V er si ó n o ri gi n al : A m ado r D u rá n y D av id B en av ide s (o ct u br e 2 0 0 5 ) Ú lt im a re vi si ó n : Pa bl o F er n án de z M o n te s (o ct u br e 2 0 0 9 ); R eo rga n iz ac io n y pe qu eñ o s ca m bi o s.

Introducción a

HTML Estático

Grupo de Ingeniería del Software

(2)

Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos [Án g el U S V7 ] D ise ñ o: Am ad or D u rá n T or o 1. Lenguajes de marcado 2. Estructura de

una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias

• Concepto 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 info="x">texto</m> con una marca.

• Algunos lenguajes de marcado

–

Tipo SGML

: IBM (1960)  estándar ISO de 1986

(

LinuxDoc

).

• DTD: Definicion de lenguajes SGML

–

HTML

: Lenguaje de Hipertexto especificado en SGML.

–

Tipo XML

:

• Sencillez de HTML + Flexibilidad SGML.

• Xschema: Definicion de lenguajes XML

–

XHTML

: HTML especificado en XML.

• Contenido y apariencia

– El objetivo de las últimas versiones de XHTML es la

separación de contenido y apariencia para facilitar la

accesibilidad

.

– El contenido se expresa mediante XHTML y la apariencia

mediante hojas de estilo CSS.

(3)

una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias 2

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

<e1><e2>…</e2></e1> <e1><e2>…</e1></e2>

4. Todos las elementos deben tener etiquetas de apertura y

de cierre:

<e>

texto

</e> (<e></e>



<e/>).

5. Los nombres de los elementos son sensibles a mayúsculas

y minúsculas:

<e>



<E>.

6. Los elementos pueden llevar atributos en la etiqueta de

apertura:

<e at1="v1" at2="v2">

texto

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

(4)

• Reglas de marcado estricto (XML)



XHTML

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:

<e1><e2>…</e2></e1> <e1><e2>…</e1></e2>

4. Todos las elementos deben tener etiquetas de

apertura y de cierre:

<e>

texto

</e> (<e></e>



<e/>).

5. Los nombres de los elementos son sensibles a

mayúsculas y minúsculas

:

<e>



<E>.

6. Los elementos pueden llevar atributos en la etiqueta de

apertura:

<e at1="v1" at2="v2">

texto

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

(5)

• Elementos de la estructura básica

– <html>: elemento raíz del documento.

– <head>: cabecera del documento; aparte del título,

puede contener otra información sobre el

documento.

– <title>: título del documento.

– <body>: cuerpo (contenido) del documento.

<html>

<head>

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

<!--

otra información de cabecera

-->

</head>

<body>

<!--

contenido del documento

-->

</body>

(6)

• Cabeceras

– <h1>Texto cabecera</h1>



<h6>…</h6>

• Divisiones

– <div>…</div>: división lógica.

– <span>…</span>: zona de texto

*

_.

• Párrafos

– <p>…</p>: párrafo de texto.

– <br/>: fuerza una nueva línea.

– <nobr>…</nobr>: evita una nueva línea.

• Texto formateado

– <pre>…</pre>: respeta los espacios y los saltos de

línea. Se suele usar para código fuente.

• Líneas horizontales

– <hr/>: inserta una línea horizontal.

(7)

(8)

• Elementos de formateo lógico

Elemento

Descripción

Apariencia

<blockquoute> Bloque de cita literal

Indentado

<abbr>

Abreviatura

Normal

<acronym>

Acrónimo

Normal

<address>

Dirección

Cursiva

<cite>

Cita

Cursiva

<code>

Código

Monoespacio

<dfn>

Definición

Cursiva

<em>

Énfasis

Cursiva

<kbd>

Tecleado

Monoespacio

<q>

Cita literal en la misma línea "Normal" ( no)

<samp>

Literal

Monoespacio

<strong>

Énfasis fuerte

Negrilla

(9)

(10)

• Elementos de formateo físico

Elemento

Descripción

Apariencia

<b>

Negrilla

<big>

Grande

<i>

Itálica

Cursiva

<small>

Pequeña

<sub>

subíndice

_subíndice

<sup>

superíndice

<tt>

Texto

_{mecanografiado}

Monoespacio

Elemento

Descripción

Apariencia

<ins>

Texto insertado

Subrayado

<del>

Texto eliminado

Tachado

(11)

(12)

• Formato Físico vs. Formato Lógico

– F. Físico:

• Ventajas: Intuitivo (WYSIWYG) y Soportado

• Inconvenientes: No

semántico

– F. Lógico:

• Ventajas: Semántico y Estructurado

• Inconvenientes: Soporte parcial (en navegadores antiguos)

Formato Lógico + CSS

(13)

• Enlaces entre documentos

– Un sistema de hipertexto añade una nueva

dimensión

al texto al incluir

(hiper)enlaces

que

permiten

saltar

(

navegar

) desde un punto de un

texto a otro.

<html>

<a href="B.html">B</a>

</html>

A.html

<html>

<a href="C.html#X">C.X</a>

</html>

B.html

<html>

<a name="X"/>

</html>

C.html

a = anchor

(14)

• Destinos de salto (anclas)

– <a name="

nombre del ancla

"/>

– <

e

id="

nombre del ancla

">…</

e

>

• Donde

e

es cualquier elemento de XHTML.

• Enlaces

– <a href="

URL

">texto enlace</a>

• Salta al comienzo del documento identificado por la URL.

– <a href="

URL

#

ancla

">texto enlace</a>

• Salta al punto del documento de la URL donde está

definida el ancla con el nombre especificado.

– <a href="..." title="información">texto enlace</a>

• El atributo

title

añade información sobre el enlace, que se

suele mostrar como un

tooltip

en los navegadores

actuales.

URL

≡

protocolo://servidor:puerto/recurso

http://MiServidor.com/fotos/yo.jpg

https://MiServidor.com/blog

(15)

Sevilla,

octubre de

14

• Códigos 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 nombre

– Algunos caracteres pueden especificarse también

mediante un nombre especial, por ejemplo:

• < > & © á

• <, >, &, ©, á

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

(16)

• Inserción de imágenes

– El elemento <img> permite insertar una imagen en

un documento XHTML.

– Los formatos habituales son GIF (permite imágenes

transparentes y animaciones) y JPG, aunque la

mayoría de los navegadores admite otros formatos

como PNG, BMP, WMF, etc.

<img src = "URL de la imagen"

alt = "Texto alternativo"

title = "Texto informativo (

tooltip)

"

/>

<img src="naranjito.jpg"

alt= "Naranjito"

title = "Imagen de Naranjito"

/>

(17)

• Mapas de imágenes

– Permiten definir, para una imagen determinada, un

conjunto de áreas de diferentes formas que actúan

como enlaces.

<img src="URL" … usemap="#mapa1" />

…

<map name = "mapa1" >

<area shape="rect|circ|poly|default"

coords="99,99,99,…,99"

href="URL"

target="marco"

title="texto tooltip"

/>

<!--

más definiciones de áreas

-->

</map>

(18)

• Mapas de imágenes

(19)

• Listas no ordenadas

<ul type="disc|circle|square">

<li type="disc|circle|square">Elemento</li>

<!--

más elementos

-->

</ul>

• Listas ordenadas

<ol>

<li>Elemento</li>

<!--

más elementos

-->

</ol>

• Listas de definiciones

<dl>

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

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

<!--

más parejas <dt><dd>

-->

</dl>

Las listas

pueden

anidarse

(20)

• Ejemplo de listas

(21)

• Elementos para tablas

– <table>: elemento principal de la tabla.

– <tr>: filas de tabla (

table row

).

– <th>: celdas de cabecera (

table header

).

– <td>: celdas de datos (

table data

).

– <caption>: título de la tabla.

<table>

<caption>…</caption>

<tr>

<td>…</td>

<th>…</th>

<td>…</td>

<th>…</th>

<td>…</td>

<th>…</th>

</tr>

<tr>

<td>…</td>

<th>…</th>

<td>…</td> <td>…</td> </tr>

<tr>

<td>…</td>

<th>…</th>

<td>…</td> <td>…</td> </tr>

</table>

(22)

<table>

<tr>

<td colspan=“2”

rowspan=“2”/>

<td colspan=“2”>

Horario

</td>

</tr>

<tr>

<td>Mañana</td>

<td>Tarde</td>

</tr>

<tr>

<td rowspan=“2”>

Grupos

</td>

<td>G1</td>

<td>20</td>

<td>50</td>

</tr>

<tr>

<td>G2</td>

<td>34</td>

<td>45</td>

</tr>

</table>

(23)

• Atributos

rowspan

y

colspan

– En los elementos <

th>

y <

td>

, permiten que una

celda se expanda por varias filas y/o columnas.

(24)

• Herramientas y Referencias

– Plugins de desarrollo en navegadores

• Firebug

• Web Developer Toolbar

– IDEs para HTML

• Aptana (Eclipse+X)

• HTML-KIT

…