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

Introducción a HTML Estático
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/02/2014
Introducción a
HTML Estático
Grupo de Ingeniería del Software y Bases de Datos
Departamento de Lenguajes y Sistemas Informáticos
11. Herramientas y
Referencias
© Diseño de Amador Durán Toro, 2011
Universidad de Sevilla
•
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.
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
•
Algunos lenguajes de marcado
– Tipo SGML:
SGML IBM (1960) estándar ISO de 1986 (LinuxDoc).
• DTD: Definicion de lenguajes SGML
– HTML
HTML: Lenguaje de Hipertexto especificado en SGML.
– Tipo XML:
XML
• Sencillez de HTML + Flexibilidad SGML.
• Xschema: Definicion de lenguajes XML
– XHTML:
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.
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
1
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
1
Introducción a HTML Estático
11/02/2014
• Reglas de marcado estricto (XML)
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
<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> equivale a <e/>).
5. Los nombres de los elementos son sensibles a mayúsculas y
minúsculas:
<e> distinto de <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 <!-- y -->:
<!-- esto es un comentario -->
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
2
© Diseño de Amador Durán Toro, 2011
1.
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:
• Reglas de marcado estricto (XML) XHTML
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
<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> equivale a <e/>).
5. Los nombres de los elementos son sensibles a mayúsculas y
minúsculas:
minúsculas
<e> distinto de <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 <!-- y -->
<!-- esto es un comentario -->
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
3
© Diseño de Amador Durán Toro, 2011
1.
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:
2
Introducción a HTML Estático
11/02/2014
• Elementos de la estructura básica
<html>
html>
<head>
head>
1.
Lenguajes de
marcado
<title>
</title
title>Título del documento</
</title>
title>
2.
Estructura de
una página web
<!-- otra información de cabecera -->
3.
Elementos
estructurales
4.
Elementos de
formateo lógico
5.
Elementos de
formateo físico
6.
El concepto de
hipertexto
Caracteres
especiales
8.
Imágenes y
mapas
9.
Listas
10. Tablas
11. Herramientas y
Referencias
Febrero 2013
<body>
<!-- contenido del documento -->
</body>
</html
</html>
html>
– <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.
Introducción a la Ingeniería del Software y a los Sistemas de Información
4
© Diseño de Amador Durán Toro, 2011
7.
</head
</head>
head>
• Cabeceras
– <h1>Texto cabecera</h1> <h6>…</h6>
• Divisiones
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
– <p>…</p>: párrafo de texto.
6.
El concepto de
hipertexto
– <br/>: fuerza una nueva línea.
7.
Caracteres
especiales
– <nobr>…</nobr>: evita una nueva línea.
8.
Imágenes y
mapas
9.
Listas
11. Herramientas y
Referencias
– <span>…</span>: zona de texto*.
• Párrafos
• 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.
*El uso de <span> está asociado normalmente a las hojas de estilo CSS, que se verán más adelante.
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
5
© Diseño de Amador Durán Toro, 2011
10. Tablas
– <div>…</div>: división lógica.
3
Introducción a HTML Estático
11/02/2014
• Ejemplo de elementos estructurales
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
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
6
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
• Elementos de formateo lógico
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
Febrero 2013
IISSI
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" (
<samp>
Literal
Monoespacio
<strong>
Énfasis fuerte
Negrilla
<var>
Variable
Cursiva
Introducción a la Ingeniería del Software y a los Sistemas de Información
no)
7
© Diseño de Amador Durán Toro, 2011
Elemento
4
Introducción a HTML Estático
11/02/2014
• Ejemplo de elementos de formateo lógico
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
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
8
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
• Elementos de formateo físico
Elemento
Descripción
Apariencia
<b>
Negrilla
Negrilla
1.
Lenguajes de
marcado
2.
Estructura de
una página web
<big>
Grande
Grande
3.
Elementos
estructurales
<i>
Itálica
Cursiva
4.
Elementos de
formateo lógico
<small>
Pequeña
Pequeña
5.
Elementos de
formateo físico
6.
El concepto de
hipertexto
<sub>
subíndice
subíndice
7.
Caracteres
especiales
<sup>
superíndice
superíndice
8.
Imágenes y
mapas
<tt>
Listas
Texto
mecanografiado
Monoespacio
9.
Elemento
Descripción
Apariencia
<ins>
Texto insertado
Subrayado
<del>
Texto eliminado
Tachado
11. Herramientas y
Referencias
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
9
© Diseño de Amador Durán Toro, 2011
10. Tablas
5
Introducción a HTML Estático
11/02/2014
• Formato Físico vs. Formato Lógico
– F. Físico:
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
• Ventajas: Intuitivo (WYSIWYG)
• Inconvenientes: No semántico
– F. Lógico:
• Ventajas: Semántico y Estructurado
• Inconvenientes: Ninguno
Muy Recomendado:
Formato Lógico + CSS
10. Tablas
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
10
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
• Enlaces entre documentos
– Un sistema de hipertexto añade una nueva dimensión al
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
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>
<html>
A.html
<a href="C.html#X">C.X</a>
</html>
<html>
10. Tablas
<a name="X"/>
B.html
</html>
a = anchor
C.html
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
11
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
6
Introducción a HTML Estático
11/02/2014
• Destinos de salto (anclas)
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
• Enlaces
– <a href="
href="URL">texto enlace</a>
• Salta al comienzo del documento identificado por la
URL.
– <a href="
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="..."
href="..." title="información">texto
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:8080/blog
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
12
© Diseño de Amador Durán Toro, 2011
1.
– <a name="
name="nombre del ancla"/>
– <e id
id="
="nombre del ancla">…</e>
• Donde e es cualquier elemento de XHTML.
• Códigos de caracteres:
– Todos los caracteres pueden especificarse en XHTML
mediante
1.
Lenguajes de
marcado
ϧ
2.
Estructura de
una página web
3.
Elementos
estructurales
donde 999 es el código en decimal del carácter que se
desea visualizar.
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
11. Herramientas y
Referencias
– 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.
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
13
© Diseño de Amador Durán Toro, 2011
10. Tablas
• Entidades con nombre
7
Introducción a HTML Estático
11/02/2014
• Inserción de imágenes
– El elemento <img> permite insertar una imagen en un
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
documento XHTML.
– Los formatos habituales son PNG (permite imágenes
transparentes y animaciones) y JPG, aunque la mayoría
de los navegadores admite otros formatos como GIF,
BMP, etc.
<img src = "URL de la imagen"
alt = "Texto alternativo"
title = "Texto informativo (tooltip)"
/>
11. Herramientas y
Referencias
<img src="naranjito.jpg”
src
alt
alt= "Naranjito”
title = "Imagen de Naranjito”
/>
Introducción a la Ingeniería del Software y a los Sistemas de Información
Febrero 2013
14
© Diseño de Amador Durán Toro, 2011
1.
• Mapas de imágenes
– Permiten definir, para una imagen determinada, un
conjunto de áreas de diferentes formas que actúan
como enlaces.
1.
Lenguajes de
marcado
2.
Estructura de
una página web
3.
Elementos
estructurales
<img src="URL" … usemap="#mapa1" />
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
<map name = "mapa1" >
<area shape="rect|circ|poly|default"
coords="99,99,99,…,99"
href="URL"
target="marco"
title="texto tooltip"
10. Tablas
/>
<!-- más definiciones de áreas -->
</map>
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
15
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
8
Introducción a HTML Estático
11/02/2014
• Mapas de imágenes
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
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
16
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
• Listas no ordenadas
<ul type="disc|circle|square">
<li type="disc|circle|square">Elemento</li>
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
Febrero 2013
IISSI
<!-- más elementos -->
</ul>
• Listas ordenadas
Las listas
pueden
anidarse
<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>
Introducción a la Ingeniería del Software y a los Sistemas de Información
17
© Diseño de Amador Durán Toro, 2011
1.
9
Introducción a HTML Estático
11/02/2014
• Ejemplo de listas
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
Febrero 2013
Introducción a la Ingeniería del Software y a los Sistemas de Información
18
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
• Elementos para tablas
– <table>: elemento principal de la tabla.
– <tr>: filas de tabla (table row).
1.
Lenguajes de
marcado
2.
Estructura de
una página web
– <th>: celdas de cabecera (table header).
3.
Elementos
estructurales
– <td>: celdas de datos (table data).
4.
Elementos de
formateo lógico
– <caption>: título de la tabla.
5.
Elementos de
formateo físico
6.
El concepto de
hipertexto
7.
Caracteres
especiales
8.
Imágenes y
mapas
9.
Listas
<caption>…</caption>
<tr>
<tr>
11. Herramientas y
Referencias
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
<th>…</th>
<th>…</th>
<th>…</th>
<td>…</td>
<td>…</td> </tr>
<td>…</td>
<td>…</td> </tr>
<td>…</td>
<th>…</th>
<td>…</td>
<th>…</th>
</tr>
</table>
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
19
© Diseño de Amador Durán Toro, 2011
10. Tablas
<table>
10
Introducción a HTML Estático
11/02/2014
• Los atributos rowspan y colspan permiten que una
celda se expanda a través de varias filas o columnas
<table>
<tr>
tr>
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
<td colspan=“2”
rowspan=“2”/>
<td colspan=“2”>
Horario
</td>
</tr>
tr>
<tr>
tr>
<td>M.</td>
<td>T.</td>
</tr>
tr>
<tr>
tr>
Gr
up
os
M.
T.
G
1
20
50
G
2
34
45
<td rowspan=“2”>
Grupos
</td>
<td>G1</td>
<td>20</td>
<td>50</td>
10. Tablas
11. Herramientas y
Referencias
Horario
</tr>
tr>
<tr>
tr>
<td>G2</td>
<td>34</td>
<td>45</td>
</tr>
tr>
</table>
20
© Diseño de Amador Durán Toro, 2011
1.
• Atributos rowspan y colspan
– En los elementos <th> y <td>, permiten que una celda
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
se expanda por varias filas y/o columnas.
10. Tablas
Febrero 2013
IISSI
Introducción a la Ingeniería del Software y a los Sistemas de Información
21
© Diseño de Amador Durán Toro, 2011
11. Herramientas y
Referencias
11
Introducción a HTML Estático
11/02/2014
• Herramientas y Referencias
1.
Lenguajes de
marcado
2.
Estructura de
una página web
• Firebug: http://getfirebug.com/
3.
Elementos
estructurales
• Web Developer Toolbar:
4.
Elementos de
formateo lógico
5.
Elementos de
formateo físico
6.
El concepto de
hipertexto
7.
Caracteres
especiales
• Aptana (Eclipse+X): http://aptana.com/
8.
Imágenes y
mapas
• HTML-KIT: http://www.htmlkit.com/
9.
Listas
• Notepad++: http://notepad-plus-plus.org/
11. Herramientas y
Referencias
Febrero 2013
https://addons.mozilla.org/es/firefox/addon/web-developer/
– IDEs para HTML
…
Introducción a la Ingeniería del Software y a los Sistemas de Información
22
© Diseño de Amador Durán Toro, 2011
10. Tablas
– Plugins de desarrollo en navegadores
Ejercicio previo propuesto:
• Abrir un editor de texto plano (e.g. notepad)
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
• Escribir la estructura básica de un
documento HTML y poner “Hola Mundo”.
• Abrir el documento con un navegador y
observar
• Editar el documento y poner varios párrafos
y observar como no se tienen en cuenta los
saltos de línea.
• Añadir etiquetas de párrafos (p), div, listas,
imágenes, tablas, etc…
23
IISSI
© Diseño de Amador Durán Toro, 2011
1.
12