Curso de HTML (página 2)

Partes: 1, 2, 3

o que veremos
más adelante.

4

CURSO DE HTML

Desde este punto de vista, estandarizar un sitio web con XHTML 1.0 strict, es la
mejor forma de crear una pagina web correcta con el DTD.
La codificación, como segundo componente de una declaración, es el formato
en el que se guardan los caracteres en el archivo. Se suele utilizar la Occidental
charset=iso-8859-1 o bien Unicode charset=utf-8.

< meta http – equiv =" Content – Type " content =" text / html ; charset =utf -8" />

Después de la declaración nos encontramos con la etiqueta < html> en la que
vamos a encontrar todo el contenido de la página web y a veces la indicación de qué
lengua estamos usando.

< html xmlns =" http :// www.w3.org /1999/ xhtml "xml: lang ="es" lang ="es">

en esta etiqueta vamos a encontrar 2 bloques:
< head>…< /head> que señala la cabecera del documento y encontramos metadatos,
scripts, enlaces a archivos externos de CSS, titulo, …
< body>…< /body> que contiene el cuerpo del documento, es decir, lo que
visualizamos en el navegador con el formato correspondiente.
2.2
Cabecera
El elemento < head> contiene información sobre el documento actual, como el
título, palabras clave que pueden ser de utilidad para motores de búsqueda, y otros
datos que no se consideran estrictamente parte del contenido del documento.

? Title
Es muy conveniente utilizar el elemento < title> para identificar los contenidos
de un documento.
? Metadatos
El elemento metadatos es un contenedor de metainformación sobre el
documento relacionado con el protocolo HTTP. Se utiliza para identificar al documento
y su contenido. Esta información es utilizada por lo buscadores e índices. Por ejemplo:
el autor, la fecha de caducidad, una lista de palabras clave, etc. Siempre van en la
etiqueta head. Esta especificación no define un conjunto normativo de propiedades.

Los atributos más importantes de los metadatos son:

• name: identifica la información que se va a exportar.
• content: contenido de la información.
• http-equiv: es el nombre de un comando HTTP.

Cada atributo va a especificar una pareja propiedad/valor. Por ejemplo, la
siguiente declaración establece un valor para la propiedad Author:

< META name="Author" content="Davor Rakleet">

El atributo name identifica la propiedad y el atributo content especifica el valor de la
propiedad.

5

CURSO DE HTML
2.3
Cuerpo
El cuerpo de un documento es la parte que contiene el contenido del
documento. El contenido puede ser presentado como un lienzo sobre el que aparece el
contenido: texto, imágenes, colores, gráficos, etc. Para agentes de usuario por voz, el
mismo contenido podría ser pronunciado.
El estilo que presentará el contenido de nuestra página web estará en un
archivo css, pero el contenido vendrá definido por los siguientes elementos:
•
•
•
identificadores de elementos como los atributos id y class
elementos en bloque (div) y elementos en línea (span)
encabezados (h1, h2, h3, h4, h5 y h6)
2.4
Ejemplo práctico
A continuación se propone un ejemplo resuelto con la una estructura básica de
una página web:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="content-type" content="text/html; charset=utf-8" />
< title>Aqui va el título de mi página web< /title>
< /head>
< body>
Aqui va el Contenido Principal de mi página web
< /body>
< /html>

Resultado:
6

CURSO DE HTML
2.5
Test
1. Para hacer una declaración, que doctype de los siguientes es el correcto:

< !DOCTYPE html PUBLIC "-//W2C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Cualquiera de los anteriores

2. En el elemento < head>:

Se incluye la etiqueta < hr>
Se incluye la etiqueta < h4>
Se incluye la etiqueta < bgcolor>
Ninguna de las anteriores

3. En un documento HTML podemos incorporar:

Hojas de estilo CSS
Formularios de contacto
Imagenes GIF
Todas las anteriores
7

CURSO DE HTML
2.6
Ejercicio
Le llamaremos ejercicio1.html, simplemente con un editor de texto (notepad,
bloc de notas, ultra-edit, etc) escribimos el código y lo guardamos con un nombre y
extensión html. Esto es interpretado por el navegador que tengamos instalado en
nuestro ordenador. Las características de esta página web son:
–
–

–
–

–
Utilizamos un DTD transitional.
En los metadatos:
. http-equiv=content-type
. content=text/html
. charset=iso-8859-1
El título del navegador es “Ejercicio 1”
En el body pondremos un encabezado tipo < h2>: “Los anuncios que impactan
en la web”
En dos párrafos (< p>) incluir el siguiente texto:
. El 92% cree que la publicidad online es un buen método para mantener sitios
gratuitos relacionados con el entretenimiento. También revela que la publicidad online
puede ser la herramienta de promoción más efectiva.
. Fuente: www.webtaller.com

Resultado:
8

CURSO DE HTML

3.- FORMATOS

Es muy conveniente conocer las etiquetas con las que dar formato a los textos,
ya que es la mayor parte del contenido de una página web. De esta forma podremos
estructurar el texto en párrafos, titulares, citas, etc para darles un estilo.
3.1
Formatos de párrafo
Los párrafos sirven para dar estructura al contenido. Vamos a ver a
continuación las etiquetas más importantes:
?
< p> y < /p>: Esta etiqueta enmarca un texto dentro de un párrafo. Crea un
salto de línea y además deja una línea en blanco antes de continuar con el resto
del documento.
Para una buena presentación visual de un párrafo hay que tener en cuenta
aspectos técnicos y de estilo como:
–
–
–
–
–
–
Tratamiento del espacio en blanco
Saltos de línea y cambio automático de línea
Justificación
División de palabras
Convenciones del idioma escrito y direccionalidad del texto
Formateo de los párrafos con respecto al contenido circundante
?
?

?

?

?
< center> y < /center>: Permite centrar el párrafo
< pre> y < /pre>: Esta etiqueta indica que el texto contenido está
"preformateado", es decir, ya viene con su fuente de letra, tamaño, etc. Por
tanto el navegador respeta la forma en que está escrito. Resulta útil a la hora
de representar código fuente.
< blockquote> y < / blockquote>: Se utiliza para citar un texto ajeno. Al
implementarse deja márgenes tanto a izquierda como a derecha.
< div align> y < /div>: Hay ocasiones en que el texto está compuesto por varios
párrafos, y que para poder darle el mismo estilo es conveniente incluirlos en
una capa contenedora o más conocida como div. El atributo a utilizar es align,
que permite justificar el texto del párrafo. Es un atributo que ayuda a posicionar
el párrafo a la izquierda (div align=left), a la derecha (div align=right), al
centro (div align=center) o a ambos márgenes (div align=justify).
Ejemplo:
< div align= “justify”>
< p>Aqui va el primer párrafo< /p>
< p>Aqui va el segundo párrafo< /p>
< /div>

< text-align> y < /text-align>: Indica la alineación del texto. Los valores que
admite son left, right, center y justify.
9