Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

HTML
Elementos básicos

Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007

Párrafos

El texto del cuerpo se estructura en párrafos.

Los párrafos se identifican como elementos de tipo P
y contienen texto y otros elementos.
<P>Ante la ley hay un guardián. Un campesino se
presenta ante el guardián y pide entrar en la
ley. Pero el guardián le dice que por el
momento no puede dejarlo entrar. Tras
reflexionar, pregunta si lo dejarán entrar más
tarde.</P>
<P>-Es posible -dice el guardián-, pero ahora
no.</P>
El texto de los párrafos se muestra, si no se indica otra
cosa, con el formato por defecto del navegador,
dejando una línea de espacio entre ellos.

El lenguaje HTML: Elementos básicos HTML: 1 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Saltos de línea forzados

Para forzar un salto de línea dentro de un párrafo se

utiliza el elemento BR, un elemento especial que, al no
tener contenido, no tiene etiqueta de cierre asociada.
<P>Ante la ley hay un guardián. Un campesino se
presenta ante el guardián y pide entrar en la
ley. Pero el guardián le dice que por el momento
no puede dejarlo entrar.<BR>
Tras reflexionar, pregunta si lo dejarán entrar
más tarde.<BR>
-Es posible -dice el guardián-, pero ahora
no.</P>
Se pasa a la siguiente línea sin dejar una en blanco entre
medias, como se hace entre las líneas de los párrafos.

El lenguaje HTML: Elementos básicos HTML: 1 - 2

Espacios en blanco

Varios espacios en blanco seguidos son interpretados

por el navegador como un único espacio en blanco.
En los documentos HTML no sirve de nada colocar varios
espacios normales para separar partes del texto

La referencia de carácter &nbsp;

Espacio en blanco que no se puede ignorar y unión entre
la palabra que le precede y la que le sigue (misma línea)
(espacio en blanco inseparable).
<P>Ante la ley hay un&nbsp;&nbsp;guardián. Un
campesino se presenta ante el guardián y pide
entrar en la ley. Pero el guardián le dice que
por el momento no puede dejarlo entrar.</P>
Las palabras “un” y “guardián” estarán separadas por
dos espacios y siempre en la misma línea

El lenguaje HTML: Elementos básicos HTML: 1 - 3

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Encabezamientos

Tipos especiales de párrafos que se han de mostrar con

características de formato diferentes.
HTML define seis tipos de elementos para construir
párrafos que sean encabezamientos (títulos) de
secciones o epígrafes de la página
Elementos de encabezamiento predefinidos:
H1 H2 H3 H4 H5 H6
El tamaño para cada uno es distinto, siendo el mayor el
de tipo H1 y el menor el de tipo H6
<H1>Encabezamiento de tipo H1</H1>
<H2>Encabezamiento de tipo H2</H2>
<P>Párrafo normal.</P>
<H3>Encabezamiento de tipo H3</H3>
<H4>Encabezamiento de tipo H4</H4> ...

El lenguaje HTML: Elementos básicos HTML: 1 - 4

Encabezamientos

Encabezamientos.html

El lenguaje HTML: Elementos básicos HTML: 1 - 5

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 El formato predeterminado para el texto

A menudo, los valores del formato predeterminado del

navegador indican que el texto normal se ha de mostrar
con Times New Roman como fuente, en un tamaño de 10
puntos, en color negro sobre fondo blanco, ajustando las
líneas al margen izquierdo, ...
Cada tipo de párrafo (P, H1, ...) tiene establecidas unas
propiedades de formato predeterminadas particulares y
distintivas.
Se pueden cambiar los valores de las propiedades del
formato predeterminado del navegador con alguna
opción del propio navegador (por ejemplo, Herramientas |
Opciones de Internet en IE), pero no es buena idea delegar el
formato del texto en los valores predeterminados del
navegador.

El lenguaje HTML: Elementos básicos HTML: 1 - 6

El formato predeterminado para el texto

Se pueden especificar explícitamente en el documento

HTML las propiedades de formato que se deberán usar
de forma predeterminada para el texto.
Como esas propiedades afectarán a todo el cuerpo del
documento, se establecen en la sección de cabecera
(son ajustes globales).
Para establecer propiedades de formato predeterminadas
para un determinado tipo de párrafo se usa un elemento
STYLE dentro de la sección de cabecera del documento:
<STYLE>
ETIQUETA { propiedad: valor; propiedad: valor;
...; propiedad: valor }
</STYLE>
A continuación se muestran las propiedades de formato
más comunes que se usan en los elementos STYLE.

El lenguaje HTML: Elementos básicos HTML: 1 - 7

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Propiedades de formato: elemento STYLE

Fuente FONT-family: fuente

Valores de fuente: Arial Times Verdana ...
Se pueden incluir varios nombres de fuentes separados
por comas, con el fin de que si no está disponible una
se use la siguiente.
Tamaño FONT-size: tamaño
Valores de tamaño: en puntos 10pt 12pt ...

Color color: color

Valores de color: rgb(r,v,a) o #RRVVAA
r, v, a cantidad de rojo, verde y azul
(entre 0 y 255 cada uno)
RR, VV, AA cantidad de rojo, verde y azul
(en hexadecimal, 00 a FF cada uno)

El lenguaje HTML: Elementos básicos HTML: 1 - 8

Propiedades de formato: elemento STYLE

Ajuste a márgenes text-align: ajuste

Valores de ajuste: left right center justify
(izquierda, derecha, centrado o a ambos márgenes)

Sangría de la primera línea text-indent: espacio

Margen izquierdo margin-left: espacio

Margen derecho margin-right: espacio

Valores de espacio: en píxeles 10px 15px

El lenguaje HTML: Elementos básicos HTML: 1 - 9

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Ejemplo de uso del elemento STYLE
<HTML>
<HEAD>
<TITLE>El elemento STYLE</TITLE>
<STYLE>
P { FONT-family: Century Schoolbook, Times New Roman;
FONT-size: 10pt;
color: rgb(0,0,128);
text-indent: 15px;
text-align: justify;
margin-left: 10px }
H1 { FONT-family: Arial;
FONT-size: 12pt;
color: rgb(128,0,128) }
</STYLE>
</HEAD>
<BODY> ...

El lenguaje HTML: Elementos básicos HTML: 1 - 10

Ejemplo de uso del elemento STYLE

STYLE.html

El lenguaje HTML: Elementos básicos HTML: 1 - 11

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Elementos de frase

<P>Con STRONG se pone <STRONG>negrita</STRONG>,

con U se <U>subraya</U> y con EM se pone
<EM>cursiva</EM>.</P>
<P><CITE>El elemento CITE se usa para
citas.</CITE></P>
<P><DFN>El elemento DFN se usa para
definiciones.</DFN></P>
<P><CODE>El elemento CODE se usa para
representar código de programa.</CODE></P>
<P><SAMP>El elemento SAMP se usa para
representar la salida producida por
programas.</SAMP></P>
<P><KBD>El elemento KBD representa texto a
introducir por el usuario.</KBD></P>
Algunos elementos apenas se usan y a los navegadores
se les permite elegir las características de formato.

El lenguaje HTML: Elementos básicos HTML: 1 - 12

Elementos de frase

DeFrase.html

El lenguaje HTML: Elementos básicos HTML: 1 - 13

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Ejercicio sobre formatos

Formatos.html

El lenguaje HTML: Elementos básicos HTML: 1 - 14

Ejercicio sobre formatos: indicaciones

Encabezamientos H1:
Arial a 16 puntos en color (0, 128, 128).

Encabezamientos H2:
Courier New a 14 puntos en color (192, 0, 128).

Párrafos normales (P):

Century Schoolbook,
con Times New Roman como alternativa,
a 12 puntos, en color (0, 0, 192),
ajustado a ambos márgenes y
con el margen izquierdo a 10 píxeles del borde.

Pulsa para obtener un archivo de partida Æ

El lenguaje HTML: Elementos básicos HTML: 1 - 15

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Hipervínculos

Tipos de hipervínculos más usuales:

9 Vínculo a una página de otro sitio web
(ruta remota del documento, http://...)

9 Vínculo a otra página del mismo sitio web

(ruta local del documento desde la carpeta del actual).
9 Vínculo de envío de mensaje de correo a destinatario.
9 Vínculo a un marcador definido en la misma página.

Todos los hipervínculos se crean con elementos A

(ancla), especificando el destino con el atributo href:
<A href="...">texto del vínculo</A>

Destino del hipervínculo

El lenguaje HTML: Elementos básicos HTML: 1 - 16

Vínculos a otras páginas locales

Basta asignar al atributo href el nombre del archivo

HTML, con extensión y ruta si procede.
Para archivos situados en carpetas diferentes:
Aunque se puede incluir la ruta absoluta
(C:/Mis webs/Personal/Fotos/álbum.htm),
lo más habitual es especificar una ruta relativa
(Fotos/álbum.htm, siendo Personal la carpeta actual)
Ventaja: si se desplaza el sitio web completo a otra
carpeta, los vínculos seguirán funcionando.
<A href="Fotos/álbum.htm">Algunas fotos</A>
<A href="../Prof/index.html">Mi web
profesional</A>
<A href="C:/Otras webs/juan/index.htm">La web de
Juan</A>

El lenguaje HTML: Elementos básicos HTML: 1 - 17

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Vínculos a mensajes de correo y a marcadores

Vínculo de envío de mensaje de correo:

<A href="mailto:nombre@servidor.es">Contacta</A>
Marcadores:
En cualquier lugar de un documento, con el fin de poder
indicarlo en un vínculo como destino del vínculo (se
mostrará la parte del documento a partir del marcador)
Para establecer el marcador se usa el atributo name:
<A name="segunda">Segunda parte</A>
El marcador queda colocado en ese sitio. Para ir ahí:
<A href="#segunda">Ir a la segunda parte</A>
<A href="../articulo.html#segunda">...</A>
<A href="http://ucm.es/doc.htm#segunda">...</A>

El lenguaje HTML: Elementos básicos HTML: 1 - 18

Ejercicio sobre vínculos

Hiper.html

rgb(128,0,128)
Tamaño: 16pt

rgb(0,150,150)
Tamaño: 14pt

Century
Schoolbook
o Times New
Roman
Tamaño: 12pt

Hipervínculos a las secciones

Archivo de partida Æ

El lenguaje HTML: Elementos básicos HTML: 1 - 19

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Ejercicio sobre vínculos

Hiper.html

Margen izq.
de 15px

Margen izq.
de 30px

Hipervínculo a otra web Hipervínculo de envío de correo

El lenguaje HTML: Elementos básicos HTML: 1 - 20

Formato de página

<BODY background="escudo.gif" bgcolor="#FFFFFF"

link="#008000" vlink="#008080" alink="#FF0000"
text="#000080" leftmargin="150">
9 background: imagen de fondo.
9 bgcolor: color de fondo.
9 link: color de los vínculos no activados.
9 vlink: color de los vínculos ya activados.
9 alink: color de los vínculos cuando son activados.
9 text: color del texto.
9 leftmargin: margen a la izquierda del texto.
Líneas separadoras (elemento vacío): <HR>

El lenguaje HTML: Elementos básicos HTML: 1 - 21

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Alineación y tamaño de fuente

<P>Alineado a la izquierda (por defecto)</P>

<P align="center">Centrado</P>
<P align="right">Alineado a la derecha</P>
<P align="justify">Ajustado a ambos márgenes:
estrecha la ventana para poder comprobarlo.</P>
Tamaño de fuente expresado de forma absoluta:
<FONT size="N">...</FONT>
Con N entre 1 y 7 (el tamaño normal es 3).
Tamaño de fuente expresado de forma relativa
(respecto del tamaño normal o base):
<FONT size="N">...</FONT>
Con N igual a -2, -1, +1, +2, +3 o +4.

El lenguaje HTML: Elementos básicos HTML: 1 - 22

Prueba de tamaños de fuente

<HTML>
<HEAD><TITLE>Tamaños de fuente</TITLE></HEAD>
<H1>Tamaños</H1>
<P><FONT size="1">Absoluto1</FONT><FONT
size="2">Absoluto2</FONT><FONT
size="3">Absoluto3</FONT> <FONT
size="4">Absoluto4</FONT><FONT size="5">
Absoluto5</FONT><FONT size="6">Absoluto6</FONT>
<FONT size="7">Absoluto7</FONT></P>
<P><FONT size="-2">Base-2</FONT><FONT size="-
1">Base-1</FONT><FONT size="3">Base</FONT><FONT
size="+1">Base+1</FONT><FONT size="+2">Base+2
</FONT><FONT size="+3">Base+3</FONT><FONT
size="+4">Base+4</FONT></P>
</BODY>
</HTML>

El lenguaje HTML: Elementos básicos HTML: 1 - 23

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Prueba de tamaños de fuente

Tamaños.html

El lenguaje HTML: Elementos básicos HTML: 1 - 24

Imágenes

<IMG src="ucm.jpg" alt="Universidad Complutense

de Madrid">
No hay marca de cierre para IMG. Atributos:
9 src: ubicación del archivo de la imagen.
9 alt: texto que se mostrará en lugar de la imagen
o como pista.
Especificación de anchura (relativa) y altura (absoluta):
<IMG src="ucm.jpg" width="100%" height="400"
alt="Universidad Complutense de Madrid">
Ajuste de la imagen y espacio a respetar alrededor:
<IMG src="ucm.jpg" align="right" hspace="10"
vspace="10" alt="UCM">
También se pueden usar left (por defecto) y center

El lenguaje HTML: Elementos básicos HTML: 1 - 25

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Imágenes

Borde para la imagen:

<IMG src="ucm.jpg" border="2" alt="Universidad
Complutense de Madrid">

Alineación del texto respecto de la imagen:

<P><IMG src="ucm.jpg" align="bottom"
alt="Universidad Complutense de Madrid">UCM</P>
El texto ("UCM") sigue junto al borde inferior de la
imagen. También se pueden usar middle (en el medio)
y top (junto al borde superior).

El lenguaje HTML: Elementos básicos HTML: 1 - 26

Universidad Complutense de Madrid Universidade Federal de Santa Catarina