TEMA 02

TEMA 02
HTML:
Elementos Bsicos
Estructura de un documento HTML

Un documento HTML tiene que seguir la siguiente
estructura:
Definicin del DTD
<html>
<head>
</head>
<body>
</body>
</html>
TEMA 02 HTML: Elementos Bsicos
Desarrollo Web
Juan Pueyo
Elemento <html>
Etiqueta inicial: opcional
Etiqueta final: opcional
Sin embargo, es conveniente incluir las dos, ya que
delimita el contenido html de un documento.
Atributos:
Lang: especifica el idioma del documento html.
lang=es, lang=en, lang=en-us, etc.
Desarrollo Web
Juan Pueyo
Cabecera del documento

La cabecera del documento va delimitada por el
elemento <head>
Contiene informacin sobre el documento actual, como
el ttulo, palabras clave que pueden ser de utilidad para
motores de bsqueda, y otros datos que no se
consideran parte del contenido del documento.
El contenido de <head> no se muestra a los usuarios.
Desarrollo Web
Juan Pueyo
Cabecera: elementos
Elemento <head>
Etiqueta inicial: opcional
Sin embargo, es conveniente incluir las dos ya que delimita
la cabecera del documento
Elemento <title>
Etiqueta inicial: obligatoria
Etiqueta final: obligatoria
Especifica el ttulo del documento, generalmente en la
barra/pestaa del navegador
Todo documento debe incluirlo
Desarrollo Web
Juan Pueyo
Cabecera: elementos
Ejemplo:
Desarrollo Web
Juan Pueyo
Cabecera: elementos
Ejemplo:
Desarrollo Web
Juan Pueyo
Metadatos
Se utilizan para guardar informacin del propio documento
Utilizan el elemento <meta>
Etiqueta inicial: obligatoria (debe finalizar con />)
Etiqueta final: prohibida
Atributos:
name: indica el metadato que se va a especificar. Puede ser
personal o puede ser algo entendible por los navegadores,
buscadores o robots de bsqueda. Si no es personal, puede
obtenerse de un perfil de metadatos.
content: indica el valor del metadato especificado
schema: se utiliza para el esquema del perfil de los metadatos
http-equiv: se utilizan para dar informacin al navegador sobre el
documento
Desarrollo Web
Juan Pueyo
Metadatos: atributos name y content

Valores ms comunes para name:
title:
Corresponde al ttulo del documento. Debe coincidir con el
elemento <title> de cara a los buscadores
description:
Es la descripcin de la pgina. Lo utilizan los buscadores para
mostrar informacin sobre la pgina y
keywords:
Se utiliza para la lista de palabras que pueden ser analizadas
por un buscador. Se escriben separadas por comas o
espacios
Desarrollo Web
Juan Pueyo
Metadatos: atributos name y content

Valores ms comunes para name:
language:
Especifica el idioma en el que est escrita la pgina
autor
Indica el autor de la pgina
copyright
Derechos de autor
country
Pas
robots
Valores tpicos para content
content = *index|noindex],[follow|nofollow+
Desarrollo Web
Juan Pueyo
10
Metadatos: atributo http-equiv

Valores ms comunes para http-equiv:
content-type:
Especifica la codificacin del documento.
Ejemplo de uso:
cache-control:
Especifica al navegador el uso de la cach
Valores:
public: almacena en la cach pbica
private: almacena en la cach privada
no-cache: la pgina no se almacena en cach
Desarrollo Web
Juan Pueyo
11

refresh:
Refresca la pgina despus de un nmero de segundos

Si se indica URL redirecciona la pgina
Con 0 segundos redirige de inmediato
Se considera obsoleto pero se sigue utilizando
Ejemplo:
Desarrollo Web
Juan Pueyo
12

content-language: indica el idioma del documento.
Pueden utilizarlo los buscadores
date: especifica la fecha y hora en la que ha sido creada la
pgina
expires: especifica la fecha y hora en la que la pgina
expira
last-modified: indica la fecha y hora de la ltima
modificacin
Pragma: igual que cache-control pero para Firefox
window-target: con el valor _top impide que la pgina sea
vista en un marco
Desarrollo Web
Juan Pueyo
13
Metadatos: ejemplo
Desarrollo Web
Juan Pueyo
14
Metadatos: ejemplo
Aunque aqu se observen saltos de lnea en

el texto, no se recomiendan
Desarrollo Web
Juan Pueyo
15
Cuerpo del Documento

El cuerpo del documento va delimitado por el elemento
<body>
Todo el contenido del documento tiene que ir en este
elemento
Antiguamente existan un conjunto de atributos, pero
actualmente estn todos obsoletos
Para modificar su apariencia general se utilizan las hojas
de estilo
Slo se permiten los atributos generales: class, dir, id,
etc.
Desarrollo Web
Juan Pueyo
16
TEMA 02
Trabajar con Texto
Escritura de Texto
Escribe en el editor el cdigo necesario para generar la
siguiente pgina:
Desarrollo Web
Juan Pueyo
18
Prrafos y Saltos de Lnea

Para poder introducir un salto de lnea, se utiliza el
elemento <br>, el cual no tiene etiqueta de finalizacin
Para separar prrafos se utiliza el elemento <p>, cuya
etiqueta de finalizacin es opcional
Desarrollo Web
Juan Pueyo
19
Espacios en Blanco
Los espacios en blanco no es necesario especificarlos con
un cdigo de carcter, salvo cuando no se desee que la
lnea se rompa por ese espacio.
Para ello se utiliza el cdigo
Ejemplo:
Desarrollo Web
Juan Pueyo
20
Efectos simples en el texto

Etiquetas <b> <i> <u>
Aunque ya se consideran obsoletas, se utilizan para los
siguientes efectos:
<b> (bold): texto en negrita
<i> (italic): texto en cursiva
<u> (underline): texto subrayado
En sustitucin a las anteriores, se pueden utilizar otras,

aunque su objetivo es crear nfasis en los lectores de
pantalla, lo que puede dar lugar a errores.
<strong>
<cite> o <em>
Desarrollo Web
Juan Pueyo
21
Encabezados
Existen 6 tipos de encabezados
Se especifican con los elementos
<h1></h1> a <h6></h6>
Se utilizan para escribir ttulos, subttulos, secciones, pies

de pgina, etc.
Ejemplo:
Desarrollo Web
Juan Pueyo
22
Encabezados
Resultado:
Desarrollo Web
Juan Pueyo
23
Comentarios
Para escribir comentarios en HTML, el texto tienen que ir
encerrado entre 
Ejemplo:
Desarrollo Web
Juan Pueyo
24
Caracteres Especiales
Para poder escribir caracteres especiales como los
smbolos < o >, es necesario utilizar su cdigo de carcter:
CARCTER
< ( Menor que )
> ( Mayor que )
& ( ampersand )
" ( comillas dobles )
CDIGO
<
>
&
"
á
é
í
ó
ú
Á
CARCTER
CDIGO
É
Í
Ó
Ú
ü
Ü
ñ
Ñ
¿
¡
No es necesario utilizar los caracteres para vocales

acentuadas si se utilizan las codificaciones ISO-8859-1
o UTF-8, sin embargo, es buena costumbre utilizarlas
Desarrollo Web
Juan Pueyo
25
Nuevos Elementos en HTML5

Los siguientes elementos se consideran semnticos, ya
que su funcin es darle al documento un significado
estructural:
<address>: aunque no es nuevo, se sigue utilizando para
almacenar informacin de contacto del autor (de la
pgina, del artculo, etc.). Generalmente engloba links.
<header>: delimita la parte superior de un documento, la
cabecera.
<article>: delimita un artculo del resto del documento.
Se considera un elemento independiente del resto del
documento.
Desarrollo Web
Juan Pueyo
26

<section>: se utiliza para crear secciones en el
documento que utilizan estilos de diseo diferentes.
Una seccin puede contener artculos y aunque sera
posible a la inversa, no se recomienda por la
independencia de <article>
<footer>: delimita la parte final de un documento
<nav>: se utiliza para agrupar un conjunto de enlaces
que permiten la navegacin por la propia pgina.
<aside>: ha cambiado con respecto a la definicin
original cuando se defini. Actualmente la norma dice
que se utilice para todo lo que no es contenido tangencial
de la pgina. ? Dicho de otra manera, que se utilice para
banners, elementos externos, calendarios, etc.
Desarrollo Web
Juan Pueyo
27
Otros elementos estructurales

Elemento <div>

Representa una parte del documento (un bloque)
En HTML5 slo se debe utilizar si no existe algn otro
elemento que se pueda utilizar (<section>, <article>, etc.)
Elemento <span>
Representa una parte del documento (una porcin de
texto)
Desarrollo Web
Juan Pueyo
28
Ejercicio 01
Realiza un documento donde se incluyan los siguientes
elementos:
Elementos de cabecera
Metadatos
Ejemplos de uso de texto
Desarrollo Web
Juan Pueyo
29
Ejercicio 02
En base a los nuevos elementos que incorpora HTML5 y
que acabamos de comentar, investiga por Internet sobre
su utilizacin y crea una pgina donde se usen todos ellos
Desarrollo Web
Juan Pueyo
30
Separacin de Temtica
Elemento <hr>

En HTML 4.01 mostraba una lnea horizontal
En HTML5 se utiliza como separacin de secciones dentro
de un mismo artculo
Si no se utiliza CSS, tambin muestra una lnea horizontal
Desarrollo Web
Juan Pueyo
31
Texto Preformateado
Elemento <pre>
Se utiliza para representar texto formateado, respetando
espacios, tabuladores, saltos de lnea, etc.
Ejemplo:
Desarrollo Web
Juan Pueyo
32
Citas en el Texto
Elemento <blockquote>

Se utiliza para mostrar citas de otros textos
En el atributo cite se almacena el link del texto original
Ejemplo:
Desarrollo Web
Juan Pueyo
33
TEMA 02
Trabajar con Listas
Listas en HTML
Trabajando con HTML existen 3 tipos de listas que se
pueden utilizar, ya sea a nivel de pgina, de prrafo o
anidadas unas dentro de otras:
Listas desordenadas (unordered list): <ul>
Listas ordenadas (ordered list): <ol>
Listas de definiciones (definition list): <dl>
Desarrollo Web
Juan Pueyo
35
Listas Desordenadas
Elemento <ul>
Indica el comienzo y el final de la lista
Elemento <li>
Seala cada elemento de la lista
Desarrollo Web
Juan Pueyo
36
Listas Ordenadas
Elemento <ol>

Con los atributos type y start se pueden modificar los tipos
de lista (nmeros, letras, etc.) pero se consideran
obsoletos ???
Desarrollo Web
Juan Pueyo
37
Listas de Definicin
Elemento <dl>

Se utiliza conjuntamente con los elementos
<dt>: elemento de la lista
<dd>: descripcin del elemento
Desarrollo Web
Juan Pueyo
38
Listas de Definicin
Ejemplo:
Desarrollo Web
Juan Pueyo
39
Anidacin de Listas
Cualquiera de las listas anteriores se pueden anidar unas
dentro de otras.
Ejemplo:
Desarrollo Web
Juan Pueyo
40
Anidacin de Listas
Al utilizar el anidamiento de un mismo tipo de lista, la
vieta cambia automticamente
Desarrollo Web
Juan Pueyo
41
El atributo type
Se puede utilizar en listas ordenadas y desordenadas:
Listas ordenadas:
Permite especificar la numeracin.
Los valores posibles son: 1, A, a, i, I
Listas desordenadas:
Permite especificar el tipo de vieta
Los valores posibles son:
disc (por defecto)
circle
square
Desarrollo Web
Juan Pueyo
42
Ejercicio 03
Realiza un ejercicio donde se utilicen los tres elementos
de lista que existen.
Realiza tambin un anidamiento con diferentes tipos de
lista y modificando la presentacin con el atributo type
Desarrollo Web
Juan Pueyo
43
El atributo type
Ejemplo:
Desarrollo Web
Juan Pueyo
44
TEMA 02
Imgenes
Imgenes de Fondo
En HTML 4.01 strict no existe la opcin para establecer
una imagen de fondo.
Hay que utilizar CSS.
En HTML 4.01 transitional se puede utilizar el atributo
background del elemento <body>, pero se considera
obsoleto
Desarrollo Web
Juan Pueyo
46
Imgenes en la pgina
Elemento <img>
Se utiliza para insertar una imagen

Atributos:
src (obligatorio): especifica la URL de la imagen
alt (obligatorio): especifica el texto que aparecer cuando la
imagen no puede ser mostrada, generalmente para
navegadores de texto, como el robot de Google. Aunque es
obligatorio, si no se pone no pasa nada.
Contrario a las recomendaciones de W3C, Internet Explorer
muestra su valor con un tip
title (opcional) : muestra un tip en la imagen
Desarrollo Web
Juan Pueyo
47
Imgenes en la pgina
Ejemplo:
Desarrollo Web
Juan Pueyo
48
Imgenes en la pgina
Ejemplo:
Cuando existen los atributos alt y title, Internet Explorer
muestra el valor de title.
Desarrollo Web
Juan Pueyo
49
Imgenes en la pgina
Atributos heigth y width
Son opcionales y permiten modificar la altura y la anchura
real de la imagen
Desarrollo Web
Juan Pueyo
50
Imgenes en la pgina
Otros atributos obsoletos en HTML5
align
Alinea la imagen
border
Establece un borde alrededor de la imagen
hspace
Especifica el espacio en blanco en los

laterales de la imagen
vspace
Especifica el espacio en blanco en la parte

superior e inferior de la imagen
Desarrollo Web
Juan Pueyo
51

Elemento <figure>
Se utiliza para identificar una imagen, un conjunto de
imgenes, porciones de cdigo, etc.
Elemento <figcaption>
Muestra un pie de foto y slo puede incluirse dentro del
elemento <figure>
Desarrollo Web
Juan Pueyo
52

Ejemplo:
Desarrollo Web
Juan Pueyo
53

Ejemplo:
Desarrollo Web
Juan Pueyo
54
Mapas de Imgenes
Permiten dividir una imagen en diferentes zonas para
poder albergar diferentes enlaces
Una imagen que utilice un mapa debe especificarlo con el
atributo usemap dentro del elemento <img>
Para definir un mapa se utiliza el elemento <map>

El atributo id especifica el nombre del mapa
Dentro de <map> se utiliza el elemento <area> para
especificar cada rea del mapa
Desarrollo Web
Juan Pueyo
55
Mapas de Imgenes
Elemento <area>
Atributos:
shape: especifica la forma del rea y puede ser
rect
circle
poly
coords: especifica las coordenadas

x1, y1, x2, y2
x1, y1, radio del crculo
x1, y1, x2, y2, , xn, yn
Desarrollo Web
Juan Pueyo
56
Mapas de Imgenes
Ejemplo
Desarrollo Web
Juan Pueyo
57
Formatos de Imgenes
Los formatos de imgenes que se deben utilizar son:
GIF
Ya estn prcticamente en desuso

Admite hasta 256 colores
Ocupa poco espacio
Permite transparencias
Permite crear animaciones mostrando una serie de
imgenes
Se puede comprimir
Permite presentacin progresiva
Desarrollo Web
Juan Pueyo
58
Formatos de Imgenes
JPEG
Formato destinado a fotografa

Utiliza 24 bits por pixel sin compresin
Su compresin es superior al formato GIF
Es el ms utilizado
PNG
Surge para sustituir al formato GIF pero con ms calidad

Comprime ms que el GIF pero menos que el JPEG
Admite transparencias
No permite animaciones
Desarrollo Web
Juan Pueyo
59
Formatos de Imgenes
Recomendaciones
Utilizar GIF exclusivamente para una imagen animada
Para fotografas: JPEG
Para grficos o iconos o cualquier otra imagen que no sea
una fotografa: PNG
Desarrollo Web
Juan Pueyo
60
Rutas
Rutas absolutas
Indican la ruta completa a un elemento
No se suelen utilizar, ya que las que se utilizan en un
ordenador local difieren de las que se utilizan en un
servidor
Rutas relativas
Especifican la ruta a partir de donde se encuentre el
documento html
Funcionan independientemente del subdirectorio en el
que se encuentren
Desarrollo Web
Juan Pueyo
61
Rutas Relativas
Ejemplo:
Desarrollo Web
Juan Pueyo
62
Rutas Relativas
Utilizando ../ podemos subir un nivel en el rbol de
carpetas
Desarrollo Web
Juan Pueyo
63
Rutas Relativas
Existe la posibilidad de subir ms niveles, escribiendo un
../ por cada nivel que se quiera subir
Desarrollo Web
Juan Pueyo
64
Ruta Base
Elemento <base>
Se utiliza para especificar la ruta que har como base a la
hora de utilizar referencias relativas
Debe ser el primer elemento de <head>
Ejemplo:
La ruta absoluta de la imagen sera:

http://www.misitioweb.es/imagenes/foto.png
Desarrollo Web
Juan Pueyo
65
Ruta Base
Elemento <base>
Puede hacer referencia a un sitio local utilizando el
protocolo file en vez del protocolo http
Ejemplo:
La ruta absoluta de la imagen sera:

C:\servidor\httpdocs\imagenes\foto.png
Desarrollo Web
Juan Pueyo
66
TEMA 02
Enlaces
Enlaces Externos
Son aquellos enlaces que dirigen a otra pgina, ya sea de
propio sitio o de otro sitio externo.
Se especifican con el elemento <a>
Todo lo que se encuentre dentro del elemento, ser el
enlace
Elemento <a>
Atributos:
href: indica la direccin del enlace
target: especifica dnde se muestra el enlace (_blank,
_parent, _self, _top)
Desarrollo Web
Juan Pueyo
68
Enlaces Externos
Ejemplo:
Desarrollo Web
Juan Pueyo
69
Enlaces Externos
Ejemplo con una imagen:
Desarrollo Web
Juan Pueyo
70
Enlaces Internos
Se utilizan para llevar a una parte concreta de una misma
pgina
Es necesario declarar marcadores con el elemento <a> y
el atributo id (name se utilizaba hasta HTML 4.01)
El enlace har referencia al valor del atributo id del
marcador, aadiendo una almohadilla (#) antes del valor
Desarrollo Web
Juan Pueyo
71
Enlaces Mixtos
Son una mezcla de los otros dos enlaces
Desarrollo Web
Juan Pueyo
72
Enlaces de Correo
Estos enlaces abren automticamente la aplicacin de
correo electrnico que est establecida por defecto
El enlace se crea de la siguiente manera:
mailto: direccin_de_correo
Si se quiere especificar el asunto:

mailto: direccin_de_correo?subject=texto
Ejemplo:
Desarrollo Web
Juan Pueyo
73
Enlaces de Correo
Ejemplo:
Desarrollo Web
Juan Pueyo
74
Ejercicio 4
Crea una pgina HTML5 en la que se utilice un mapa de
imagen.
El mapa deber incluir 4 zonas
Cada zona enlazar con otra pgina donde se mostrar la
imagen en un tamao mayor
Cada pgina de cada imagen tendr que contener un
encabezado, un pie de imagen y un enlace para volver a
la pgina principal
Las imgenes debern almacenarse en una carpeta
especfica
Para crear el mapa puedes utilizar DreamWeaver
Desarrollo Web
Juan Pueyo
75

TEMA 02 - HTML - Elementos Basicos

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TEMA 02 - HTML - Elementos Basicos

Uploaded by

Copyright:

Available Formats

Estructura de un documento HTML

TEMA 02 HTML: Elementos Bsicos

Cabecera del documento

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

Metadatos: atributos name y content

TEMA 02 HTML: Elementos Bsicos

Metadatos: atributos name y content

TEMA 02 HTML: Elementos Bsicos

Metadatos: atributo http-equiv

Metadatos: atributo http-equiv

Refresca la pgina despus de un nmero de segundos

TEMA 02 HTML: Elementos Bsicos

Metadatos: atributo http-equiv

TEMA 02 HTML: Elementos Bsicos

Aunque aqu se observen saltos de lnea en

TEMA 02 HTML: Elementos Bsicos

Cuerpo del Documento

TEMA 02 HTML: Elementos Bsicos

Trabajar con Texto

TEMA 02 HTML: Elementos Bsicos

Prrafos y Saltos de Lnea

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

Efectos simples en el texto

En sustitucin a las anteriores, se pueden utilizar otras,

TEMA 02 HTML: Elementos Bsicos

Se utilizan para escribir ttulos, subttulos, secciones, pies

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

No es necesario utilizar los caracteres para vocales

Nuevos Elementos en HTML5

Nuevos Elementos en HTML5

Otros elementos estructurales

Etiqueta inicial: obligatoria

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

Etiqueta inicial: obligatoria

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

Etiqueta inicial: obligatoria

TEMA 02 HTML: Elementos Bsicos

Trabajar con Listas

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

Etiqueta inicial: obligatoria

TEMA 02 HTML: Elementos Bsicos

Etiqueta inicial: obligatoria

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

Se utiliza para insertar una imagen

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos

TEMA 02 HTML: Elementos Bsicos