Unidad 1.1: Lenguaje HTML

ContenidoIntroducción¿Qué es HTML?Versiones HTMLCaracterísticas del HTMLEtiquetas/AtributosEstructura de un documento

Definición de Tipos de Documentos (DTDs)Cabecera de un documento HTML

Etiqueta TITLE Etiqueta META

Elementos de HTMLTitulares/EncabezadosTamaños/tipos de letraTexto en colorPárrafos y líneaEnmarcado de textoTexto preformateadoOtros efectos en el textoCaracteres especialesComentarios 2

Introducción

En Español se traducen (HTML):LENGUAJE DE MARCACIÓN DE HIPERTEXTO.

HTML (HyperText Markup Language)Fue creado por el físico nuclear TIM BERNERS-LEE

el cual propuso diseñar un sistema de unificación del acceso a todos los datos que poseía el Centro Europeo para la Investigación Nuclear.(CERN)

3

Se comenzó así a desarrollar una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denominó:

HTTP (Hyper Text Transfer Protocol)que permitiría a todos los científicos del CERN, consultar

cualquier información de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN.

El sistema alcanzó un éxito enorme, tanto es así que se comenzó a definir un lenguaje de creación de documentos estructurados que vino a llamarse HTML

Introducción

4

Actualmente HTML es un Estándar Internacional (ISO/IEC 15445:2000), y es mantenido por el World Wide Web Consortium (W3C).

El Word Wide Web Consortium, (W3C) es un consorcio internacional donde las organizaciones miembro, personal a tiempo completo y el público en general, trabajan conjuntamente para desarrollar estándares Web.

http://www.w3c.es/

Introducción

5

HTML no es un lenguaje de programación, por lo que no es posible hacer un programa con este lenguaje. Para añadir alguna capacidad de proceso a una página Web es necesario recurrir a otros lenguajes, como Javascript o VBSscript.

Se debe considerar HTML como un lenguaje para estructurar documentos y hacer su contenido más accesible, pero resulta frustrante observar la misma página en otro navegador, ya que probablemente no se visualice correctamente y resulte una página poco estética.

¿Qué es HTML?

6

HTML es estandarizado y multiplataforma.

Un documento preparado utilizando marcas HTML puede ser leído utilizando una variedad de navegadores Web, como FireFox, Opera, Netscape, o Explorer.

Por ello, no conviene abusar de las capacidades específicas de un único programa de visualización. Es mejor utilizar una versión estándar del lenguaje, y desarrollar las páginas probándolas con los dos navegadores comerciales más utilizados: Netscape y Explorer. http://www.w3c.es/

¿Qué es HTML?

7

Es un lenguaje de marcas o etiquetas muy sencillo que permite describir hipertexto ( idea deTed Nelson ), es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...)

¿Qué es HTML?

8

La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho texto se realice por un programa intérprete especializado (como Explorer, Mozilla Firefox…).

¿Qué es HTML?

9

Los documentos HTML son ficheros de texto (ASCII) que se pueden crear con cualquier editor de texto (notepad, vi, emacs, ...)

No obstante, escribir y mantener un gran número de páginas a mano requiere esfuerzo y conocimiento en profundidad de HTML. Para evitar este problema existen editores visuales como Macromedia Dreamweaver, Microsoft FrontPage, etc., que permiten editar páginas Web de una forma similar a como se edita un documento de texto.

¿Qué es HTML?

10

Sin embargo, estos editores pueden llegar a generar código HTML de muy baja calidad sobre el que tarde o temprano habrá que realizar una operación de limpieza y reestructuración, utilizando un editor de texto.

La extensión de los ficheros que contienen código HTML es .html o htm.

¿Qué es HTML?

11

1993: Hypertext Markup Language (Primera versión), publicado por la IETF como Working-Draft (no era un estándar todavía)

Permitía principalmente el uso de párrafos, cabeceras, saltos de línea, imágenes, enlaces y listas de elementos. Además definía la Estructura Básica de Documento y se añadieron las etiquetas de negrita, itálica y formularios.

Versiones de HTML

12

1995: HTML 2.0, publicado por la IETF como documento RFC-1866.

Define los elementos de INPUT, SELECT y TEXTAREA. También se redefinen los enlaces, las listas de imágenes y las cabeceras.

Versiones de HTML

13

1997: HTML 3.2, publicado como Recomendación del W3C.

Añadió las tablas, los atributos de alineación y las imágenes de fondo, e incluyó scripts y hojas de estilo (CSS). Formalizó el uso de colores de fondo, textos y enlaces, así como tamaños de imágenes y alineaciones.

Versiones de HTML

14

1998: HTML 4.0, publicado como Recomendación del W3C.

Incorpora el uso de frames y la posibilidad de añadir objetos. Define las etiquetas DIV y SPAN, que usadas con CSS pueden crear nuevas etiquetas.

Versiones de HTML

15

1999: HTML 4.01, publicado como Recomendación del W3C.

2000: ISO/IEC 15445:2000 (basado en HTML 4.01 sintaxis estricta), publicado como ISO/IEC Estándar Internacional.

2000: XHTML 1.0, publicado como Recomendación del W3C (se revisó y volvió a publicar en 2002).

2010:HTML5

Versiones de HTML

16

A lo largo del desarrollo de esta unidad se utilizará el estándar de HTML 4.01 que es compatible con los navegadores Internet Explorer , Firefox , Netscape, Opera (programas que se utilizarán para visualizar los documentos realizados).

Versiones de HTML

17

Podemos encontrar el estándar "HTML 4.01 Specification" en http://www.w3.org/TR/html401/ (en inglés) y también en http://www.w3.org/MarkUp/html4-updates/translations#Spanish (en castellano).

En esta especificación nos encontraremos que algunos elementos son considerados como "deprecated" o "desaprobados", teniendo una alternativa en las Hojas de Estilo CSS que estudiaremos en otra unidad posterior.

Estas hojas de estilo nos ayudarán a realizar un código más limpio, profesional y reutilizable.

Versiones de HTML

18

Características del HTMLMultiplataformaSimpleNo es más que simple textoLibreNo diferencia entre

mayúsculas/minúsculas

19

EtiquetasUn documento realizado con lenguaje HTML constará de

dos elementos: los contenidos del documento y las instrucciones HTML que darán el formato adecuado a dichos contenidos.

Para delimitar los elementos se utilizan etiquetas o tags: <nombre-etiqueta> ABRE ETIQUETA

Elemento de contenido </nombre-etiqueta> CIERRA ETIQUETA

Ejemplo: <TITLE>Un título</TITLE>

20

EtiquetasExisten dos clases de etiquetas:

Etiquetas vacíasSe utilizan para introducir saltos de línea, líneas horizontales y otros elementos no asociados al formato de textos o imágenes.

Su formato es:

<etiqueta>

21

EtiquetasEtiquetas contenedorasConstan de una marca inicial y una marca final igual que

la inicial pero precedida del carácter “/”. Todo lo que esté incluido entre ambas marcas quedará sujeto al formato indicado por la etiqueta.

La mayoría de estas etiquetas pueden contener a su vez otras etiquetas de cualquiera de los dos tipos.

Su formato es:

<etiqueta>texto</etiqueta>

22

AtributosLas etiquetas pueden tener atributos que son una serie de

valores que harán que los efectos que producen las etiquetas varíen, ya sean colores, alineación, estilos, etc. Generalmente están formados por el nombre del atributo, que es una palabra reservada del lenguaje, el signo igual y el valor que toma entre comillas.

<etiqueta ATR1=”valor1” ATR2=”valor2”>Texto de ejemplo

</etiqueta>

23

Estructura de un documento html<html> (Etiqueta que indica que lo que viene a continuación es un documento HTML)

<head> (Etiqueta de apertura de la cabecera)Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecerá en la barra de título de la parte superior

</head> (Etiqueta de cierre de la cabecera)

<body> (Etiqueta de apertura del cuerpo)

Aquí va el contenido de la página que será lo que se presente en pantalla.

</body> (Etiqueta de cierre del cuerpo)

</html> (Etiqueta de cierre del documento)NOTA: Tanto las etiquetas de cabecera como cuerpo son opcionales, aunque se

deben incluir para estructurar el código. 24

La primera línea de un documento HTML debe especificar la versión en la que está desarrollado. Esto se consigue insertando una referencia a un documento donde se especifica formalmente la sintaxis y estructura de todos los elementos que se pueden utilizar en esa versión de HTML.

Este documento se llama DTD (Data Type Definition, en castellano Definición de Tipos de Documento).

La DTD indica qué elementos, atributos, etcétera, tiene un documento y cómo se anidan. En función de la DTD que se defina para ese documento, se permitirán o se prohibirán el uso de ciertos elementos.

25

Estructura de un documento htmlDefinición de Tipos de Documentos (DTDs)

La definición de la versión de un documento HTML tiene la siguiente estructura:

<!DOCTYPE HTML PUBLIC "FPI" "URI_DTD"> Donde:

FPI es el (Format Public Identifier o Identificador Público de Formato)

URI_DTD (URL de la DTD que define formalmente el FPI seleccionado) varían en función de las necesidades del documento. 26

Estructura de un documento htmlDefinición de Tipos de Documentos (DTDs)

Estructura de un documento htmlDefinición de Tipos de Documentos (DTDs)Los posibles juegos de valores para HTML 4.01 son:

27

FPI URI_DTD Tipo de Documento

"-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"

HTML estricto

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"

HTML transicion

al

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd"

HTML con marcos (frames)

Estructura de un documento htmlVeamos el código de una página Web simple:

28

Estructura de un documento htmlEjemplo:

Creamos una carpeta llamada HTML

Abrimos el bloc de notas, escribimos el siguiente ejemplo

Guardamos el fichero con el nombre practica.htm y comprobamos el resultado en el navegador

29

Estructura de un documento html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"><HTML>

<HEAD><TITLE>

Documento de prueba</TITLE>

</HEAD><!-- Esto es un comentario-->

<BODY><H1> Esto es una "demo" de documento HTML </H1> Esto es el más sencillo de los documentos HTML.

</BODY>

</HTML>

Guardamos el fichero con el nombre practica.htm y comprobamos el resultado en el navegador 30

Cabecera de un documento HTML <head>

La cabecera figura entre las etiquetas <HEAD> y </HEAD>. En ella se incluirán definiciones generales que afectan a todo el documento. Todas son opcionales y se utilizan en casos muy concretos.

Se pueden especificar el título, el autor y otras características que no se muestran físicamente en la página y que sirven para facilitar su indexación (son los meta tags).

En la cabecera también deben incluirse los scripts que necesite el documento, así como las definiciones de estilos (si se utilizan hojas de estilos). 31

Cabecera de un documento HTML <head>

Se coloca entre las etiquetas <TITLE> y </TITLE>. Debe guardar relación con el documento y ha ser lo más corto posible. El título es importante ponerlo por las siguientes razones:

Cuando se minimice la ventana del navegador en Windows, será lo que se muestre en la barra de estado.

Esta información es la que se muestra en el marcador de los navegadores

Cuando se imprima el documento aparecerá en la parte superior de todas las hojas impresas.

Algunos buscadores lo utilizan para identificar el documento. 32

Título del documento

Etiqueta METADentro de HEAD puede utilizarse otro elemento: META. Permite introducir información sobre un documento que no será visible en el navegador. La sintaxis de esta etiqueta es:

<META HTTP-EQUIV =”refresh” CONTENT=”nº de segundos; URL=nuevaURL”>

Ejemplo: <HEAD>

<META HTTP-EQUIV =”refresh” CONTENT=”5;URL=fichero.htm o direccion”></HEAD>

HTTP-EQUIV puede indicar: introduce un refresco automático en unos segundos o que se cargará otra

página transcurrido ese tiempo con el valor “refresh”. Por ejemplo, si se escribe:

<HEAD>

<TITLE>Cabecera del documento </TITLE>

<META HTTP-EQUIV="Refresh" CONTENT=“3">

</HEAD> Esto hace que el visualizador vuelva a cargar la página activa al cabo de 3

segundos.33

Etiqueta METAHTTP-EQUIV (continua):

También puede hacerse a una dirección:<HEAD>

<TITLE>Head de un documento </TITLE>

<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http:// www.google.es ">

</HEAD>

34

Etiqueta META Ejemplos de etiqueta <meta>:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Expires" content="Sat, 30 Jun 2001 12:00:00 GMT"> <meta http-equiv="Pragma" content="no-cache”> <meta http-equiv="refresh" content="segundos;url=nuevaURL"> <meta http-equiv="KEYWORDS" content="Lavadoras,neveras"> <meta http-equiv="Content-Language" content="es-ES">

35

1. PRACTICA HTML Vamos a crear una página web que contenga la imagen ranas.gif como

fondo y se refresque a los 3 segundos con otra URL, por ejemplo la pagina de google.

36

Cuerpo de un documento HTML <body>El cuerpo está delimitado por las etiquetas <BODY> y </BODY>, y

entre ellas estará el contenido de nuestra página Web. Así como la información de la cabecera no se visualizará en el navegador, toda la información del cuerpo la mostrará.

<HTML><BODY>

CUERPO DEL DOCUMENTO</BODY></HTML>

El cuerpo esta compuesto por párrafos, listas, títulos, líneas, imágenes, enlaces, etc., todo ello constituirá la página Web. Pero a todo esto se le puede dar un estilo utilizando los atributos de la etiqueta.

37

AtributosLos atributos de la etiqueta body son:bgcolor: (valor= color) define el color de fondo del

documentobackground: (valor = URL) indica la dirección web de la

imagen de fondo del documento. Si dicha imagen se encuentra en el propio servidor, se utilizará la dirección relativa (ruta del directorio)

text: (valor =color) establece el color en el que aparecerá el texto del documento

link: (valor= color) establece el color en el que aparecerá el texto de los enlaces del documento

vlink: (valor= color) determina el color en el que aparecerá el texto de los enlaces visitados del documento.

38

Cuerpo de un documento HTML <body>

Para ello se utiliza el atributo “BACKGROUND”, que nos permite poner una imagen como fondo de la página.

Si la imagen no rellena toda la ventana del Navegador la convertirá en un mosaico, repitiéndola tantas veces como sea necesario para cubrir toda la superficie de la ventana.

Si la página ocupa más de una ventana del Navegador al movernos por la página con las barras de desplazamiento, la imagen de fondo también se moverá acompañando los elementos de la página.

39

Establecer una imagen de fondo: background

Cuerpo de un documento HTML <body>

<HTML><HEAD>

<TITLE>MI PRIMERA PAGINA WEB</TITLE></HEAD><BODY BGCOLOR=”#FF0000” BACKGROUND=”fondo.jpg”>

</BODY>

</HTML>

40

Establecer una imagen de fondo: background

Cuerpo de un documento HTML <body>

El atributo BACKGROUND tiene a su vez otro atributo asociado llamado BGPROPERTIES. Este atributo solo tiene un valor FIXED, con esto lo que se consigue es obligar al Navegador a repetir la imagen que se pone de fondo solo en la ventana del Navegador y no en toda la página. Al mover las barras de desplazamiento el fondo estará fijo, consiguiendo un efecto muy estético en la mayoría de los casos.

Las imágenes de fondo deben permitir una correcta lectura de los textos y deben estar en el formato correcto.

(Este atributo no se visualiza con Netscape)41

Establecer una imagen de fondo: background

Cuerpo de un documento HTML <body>

Con el atributo BGCOLOR se puede indicar el color de fondo del documento en el caso de que no se haya indicado una imagen de fondo, o si esta imagen no puede obtenerse.

Los colores se pueden especificar de dos formas:Mediante el nombre del color en ingles.Mediante la intensidad, empleando valores en

hexadecimal (entre 00 y FF) de los componentes RGB (rojo, verde, azul). La nomenclatura utilizada sería #RRGGBB.

Existen tablas de colores en internet:http://www.webusable.com/coloursTable.htm http://ar.geocities.com/coloreshtml/ 42

Establecer un color de fondo: bgcolor

Texto en colorEstablecer el color del texto en el documento con el

atributo TEXT de la etiqueta BODY

Para establecer el color de primer plano para el texto se utiliza el atributo TEXT, pudiéndose especificar de las dos formas anteriormente mencionadas.

<BODY TEXT=”red">

</BODY>

43

Titulares/Encabezados Para definir distintos niveles de cabeceras, en HTML se utiliza el elemento

<Hx> </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

<html><head><TITLE>Titulares</TITLE></head>

<body><H1>Titular de primer nivel</H1><H2>Titular de segundo nivel</H2><H3>Titular de tercer nivel</H3><H4>Titular de cuarto nivel</H4><H5>Titular de quinto nivel</H5><H6>Titular de sexto nivel</H6>

</body></html>

NOTA: después del cierre con la etiqueta </Hx> automáticamente el visualizador inserta un salto de párrafo 44

Titulares/Encabezados

Los títulos aparecen por defecto alineados a la izquierda, para modificar esto se utiliza el atributo align y los valores center o right.

<H1 align=center> Texto en H1 centrado</H1><br> <H3 align= right> Texto en H3 a la derecha</H3>

La etiqueta <br> produce un salto de línea

45

ETIQUETA FONT: Tamaños de letra Para formatear el texto se utiliza la etiqueta <FONT >. Con el atributo SIZE=

valor, que es un número entre 1 y 7 ponemos el tamaño de la letra. El valor por defecto del texto es 3. Ejemplo:

<FONT SIZE=3>A</FONT><FONT SIZE=4>A</FONT><FONT SIZE=5>A</FONT><FONT SIZE=6>A</FONT><FONT SIZE=7>A</FONT><FONT SIZE=6>A</FONT><FONT SIZE=5>A</FONT><FONT SIZE=4>A</FONT><FONT SIZE=3>A</FONT>

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base. Por ejemplo estos dos valores dan el mismo resultado:

<FONT SIZE=5>ABCDE</FONT><FONT SIZE=+2>ABCDE</FONT>

46

ETIQUETA FONT: Tipos de letra Con el atributo FACE se puede forzar el tipo de letra que el diseñador de la

página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.

Si escribes <FONT FACE="arial">Texto de prueba con tipo ARIAL</FONT><br><FONT FACE="times new roman">Texto de prueba con tipo TIMES NEW

ROMAN</FONT><br><FONT FACE="courier new">Texto de prueba con tipo COURIER

NEW</FONT><br><FONT FACE="courier">Texto de prueba con tipo COURIER</FONT><br><FONT FACE="roman">Texto de prueba con tipo ROMAN</FONT><br><FONT FACE="small fonts">Texto de prueba con tipo SMALL FONTS</FONT>

Si se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene el próximo, etc. Así:

<FONT FACE="raro, courier" SIZE=4 COLOR="red">Texto de prueba con tipos alternativos</FONT>

47

ETIQUETA FONT: Texto en color Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo

COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los demás.

Si escribes: <B><FONT COLOR="red">Texto ROJO </FONT><br><FONT COLOR="blue">Texto AZUL </FONT><br><FONT COLOR="navy">Texto AZUL MARINO </FONT><br><FONT COLOR="green">Texto VERDE </FONT><br><FONT COLOR="olive">Texto OLIVA </FONT><br><FONT COLOR="yellow">Texto AMARILLO </FONT><br><FONT COLOR="lime">Texto LIMA </FONT><br><FONT COLOR="magenta">Texto MAGENTA </FONT><br><FONT COLOR="purple">Texto PURPURA </FONT><br><FONT COLOR="cyan">Texto CYAN </FONT><br><FONT COLOR="brown">Texto MARRON </FONT><br><FONT COLOR="black">Texto NEGRO </FONT><br><FONT COLOR="gray">Texto GRIS </FONT><br><FONT COLOR="teal">Texto TEAL </FONT><br><FONT COLOR="white">Texto BLANCO </FONT><br></B> 48

ETIQUETA FONT: Texto en color

Existen tablas de colores en internet:http://www.webusable.com/coloursTable.htm http://ar.geocities.com/coloreshtml/

Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores básicos, como los del ejemplo anterior, es más cómodo escribir el nombre aunque sea en inglés, pero para definir la intensidad se usa la codificación hexadecimal (entre 00 y FF) de los componentes RGB (rojo, verde, azul). La nomenclatura utilizada sería #RRGGBB.

49

ETIQUETA FONT

Por supuesto, existe la posibilidad de combinar los tres atributos modificadores en una misma etiqueta <font>.

<FONT FACE="arial" COLOR=”#0000ff” SIZE=”+2”> <p>Esto es más grande que el normal, Arial y azul. </p>

</FONT>

50

Párrafos Para delimitar un bloque de texto o párrafo usamos laetiqueta <p>texto del párrafo</p>. Visualmente equivale a pulsar dos veces la tecla Return.

Admite un atributo align con los valores left, center, right, justify (no en todos los navegadores).

51

Párrafos El elemento <P> admite el atributo: ALIGN=LEFT (por defecto),

ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirán así: <P ALIGN=LEFT>

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1

<P ALIGN=RIGHT>Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

<P ALIGN=CENTER>Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3

<P ALIGN=JUSTIFY>Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4

En el caso de utilizar alguno de estos atributos, es recomendable usar el cierre </P>

52

Saltos de línea<br> No tiene cierre (etiqueta simple). Si no se pone, todo

se escribe en la misma línea y el texto ocupará en función del tamaño de la ventana.

Se escribirá así: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

Texto 2

y este sería el resultado: Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

53

Párrafos Un elemento que se comporta de forma parecida a <P> es <DIV> que admite

los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER . Se escribe así:

<DIV ALIGN=LEFT>texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1

</DIV><DIV ALIGN=RIGHT>

texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2

< /DIV><DIV ALIGN=CENTER>

texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3

</DIV> 54

Párrafos Etiqueta <BLOCKQUOTE> que sirve para presentar párrafos indentados

(como si estuviesen tabulados). Se escribirá así:

<BLOCKQUOTE>texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto

<BLOCKQUOTE>texto texto texto texto texto texto texto texto texto textotexto texto texto texto texto texto texto texto texto texto

</BLOCKQUOTE></BLOCKQUOTE>

Fíjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres </BLOCKQUOTE> al final

55

Efectos del textoPara introducir una línea horizontal o regla (cambio de sección) en la

página se utiliza la etiqueta <HR> (Horizontal Rule). Por defecto, dicha regla será del ancho de la ventana del navegador, tendrá forma tridimensional e introducirá una separación equivalente a un cambio de párrafo.

Esta etiqueta posee tres atributos que modificarán el aspecto de la línea a dibujar:

SIZE : Indica el grosor de la líneaWIDTH: Indica la longitud de la línea. Puede expresarse en pixels o

en porcentaje respecto al tamaño de la ventana (para esto hay que preceder el valor con el símbolo %)

ALIGN: Establece la alineación de la línea. Admite los valores LEFT, RIGHT y CENTER.

NOSHADE: No requiere ningún valor y se utiliza para anular el efecto de relieve de la línea.

56

Efectos del texto Al igual que al texto, se le puede incluir un parámetro de color, pero no

funciona en todos los navegadores. También se puede cambiar su apariencia añadiéndole el atributo <NOSHADE>. Así:

<HR NOSHADE> El resultado es: le quita el efecto de sombra El elemento <HR> admite dos parámetros: WIDTH y SIZE. El primero define

la longitud de la línea y el segundo su ancho. No es obligado usar los dos a la vez

Por ejemplo, si escribes <HR WIDTH=400 SIZE=5> El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior,

en número de puntos (píxels), o en tantos por ciento referidos al ancho total de la ventana. Así:

<HR WIDTH=80% SIZE=5> Además se puede indicar su posición respecto a los márgenes de la ventana

con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:

<HR WIDTH=80% SIZE=5 ALIGN=LEFT>

57

Enmarcado de texto La Etiqueta <FIELDSET> permite rodear un texto con un marco, y

opcionalmente ponerle una etiqueta. <FIELDSET>

Esto es una prueba de enmarcado</FIELDSET>

Este elemento tiene un parámetro que permite etiquetar el recuadro: <LEGEND> Si se escribe:

<FIELDSET><LEGEND>Esto es una etiqueta</LEGEND>

Esto es una prueba de enmarcado</FIELDSET>

El parámetro <LEGEND> tiene tres atributos que indican la posición de la etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos los navegadores. Por ejemplo:

<FIELDSET> <LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND> Esto es una prueba de enmarcado</FIELDSET>

58

Texto preformateadoLa etiqueta <PRE> reproduce el texto tal y como éste se ha

introducido en el documento. Se utiliza para representar los espacios en blanco, los retornos de carro y las tabulaciones que contenga.

Se escribirá así: <PRE> 1 2 3 4 5 6 7 <B>Esto es una demostración de</B>

8 9 10 11 12 13 14 texto preformateado.

15 16 17 18 19 20 21 </PRE>

No se recomienda como forma rápida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentación.

59

Otros efectos en el textoUna o varias líneas de texto, una tabla, una imagen o cualquier otra

cosa pueden estar centradas respecto a los márgenes de la ventana. Esto afecta sólo a lo que hay entre <CENTER> y </CENTER>, pero no a todo el párrafo. Por ejemplo:

texto texto texto texto texto texto texto texto texto texto texto texto <CENTER>texto centrado texto centrado</CENTER>texto texto texto texto texto texto texto texto texto texto texto texto

Texto en negrita: <B>Texto en negrita</B>

Texto realzado: depende del navegador, su misión es enfatizar el texto afectado y esto se puede hacer poniendo el texto en negrita, subrayado o en negrita y subrayado.

<STRONG>Texto realzado</STRONG> Texto en itálica: cursiva

<I>Texto en itálica</I>60

Otros efectos en el texto

61

Otros efectos en el texto

La etiqueta <ACRONYM TITLE> permite mostrar una etiqueta que aparecerá al pasar el ratón por encima, pero sin cambiar de página ni abrir ninguna ventana nueva.

Por ejemplo, si escribes: <ACRONYM TITLE="Hyper Text Markup

Language">HTML</ACRONYM>

Al pasar el ratón sobre la palabra HTML, se verá su significado: Hyper Text Markup Language

62

CARACTERES ESPECIALESUna página web se ha de ver en países distintos, que

usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres.

Por ejemplo para escribir varios espacios en blanco seguidos, o los siguientes caracteres hay que usar los caracteres especiales que son una combinación de letras precedidas por & y terminadas en punto y coma:

< &lt;> &gt;& &amp;“ &quot;blanco forzado &nbsp; 63

CARACTERES ESPECIALESá &aacute;Á &Aacute;é &eacute;É &Eacute;ñ &ntilde;Ñ &Ntilde;¿ &iquest;¡ &iexcl;

64

CARACTERES ESPECIALESPor ejemplo, la "á" (a minúscula acentuada) se escribe

"&aacute;" de modo que la palabra página se escribiría en una página HTML de este modo:

p&aacute;gina

El conjunto de caracteres ASCII no es suficiente para un sistema de información global como la Web, de modo que HTML usa un conjunto de caracteres mucho más completo llamado Conjunto Universal de Caracteres (Universal Character Set, UCS)

Este estándar define un repertorio de miles de caracteres usados por comunidades de todo el mundo.

65

CARACTERES ESPECIALESLos navegadores deben saber en qué tipo de idioma

está escrito el documento HTML para poder interpretarlo correctamente. Para que los usuarios de otros pases (Japón por ejemplo) sepan qué juego de caracteres estamos usando hay que indentificarlo en la cabecera del programa con la siguiente Meta-instrucción que indica el juego de caracteres de Europa Occidental:

<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1”>

66

ComentariosPodemos incluir comentarios que no serán

interpretados por el navegador <!--Comentario -->

67