Estructura de un documento HTML
Enviado por fredy19s • 30 de Noviembre de 2013 • Tutorial • 1.501 Palabras (7 Páginas) • 307 Visitas
Programación Web
1
HTML
Introducción
El HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un
conjunto de etiquetas que sirven para definir la forma en la que presentar el texto y otros
elementos de una página.
El HTML se creó en principio con objetivos divulgatorios. No se pensó que la web llegara a
ser un área de ocio con carácter multimedia, de modo que, el HTML se creó sin dar
respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente
que lo utilizaría en el futuro. Sin embargo, pese a esta deficiente planificación, sí que se
han incorporado modificaciones con el tiempo, estos son los estándares del HTML.
Numerosos estándares se han presentado ya, sin embargo se puede encontrar
información actualizada en www.w3.org, donde se publican estándares sobre todo lo
relacionado con tecnologías para el world wide web (www).
El HTML es un lenguaje fácil de aprender, lo que permite que cualquier persona, aunque
no haya programado en su vida pueda enfrentarse a la tarea de crear en web. HTML es
fácil y pronto dominaremos este lenguaje. Más adelante se conseguirán resultados
profesionales gracias a la capacidad de diseño y tu vena artística.
Una vez que conocemos el concepto del HTML, vamos a ver un poquito de cosas más. Este
lenguaje se escribe en un documento de texto, por eso se necesita un editor de texto para
escribir una página web. Así pues, el archivo donde está contenido el código HTML es un
archivo de texto, con la peculiaridad, que tiene extensión .html o .htm (es indiferente cuál
de ellos usar). De modo que cuando programemos en HTML trabajaremos en un notepad
por ejemplo y guardaremos los archivos como “mipagina.html”.
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags).
ETIQUETAS
Funcionan de la siguiente manera:
<nombre_etiqueta atributo=”XXXX”> Este es el inicio de una etiqueta.
</nombre_etiqueta > Este es el cierre de una etiqueta.
Programación Web
2
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Lo
que haya entre ambas etiquetas estará influenciada por ellas. El atributo es opcional y es
acorde a la etiqueta que estemos referenciando, estos atributos definen características
específicas como color, ancho, alto, alineación, etc… aspectos que se retomarán en
sesiones siguientes.
ESTRUCTURA DE UNA PÁGINA
Todo documento HTML está formado por los bloques. En primer lugar se debe especificar
que el archivo de texto que se está escribiendo es un documento HTML, para ello se
utilizarán las etiquetas <HTML>:
<HTML>
Código de la página
</HTML>
El código de la página está formado a su vez por dos grandes bloques, el encabezado y el
cuerpo de la página (contenido). El encabezado se delimita por la etiqueta <head> y el
cuerpo por la etiqueta <body>:
Encabezado
<HEAD>
Elementos de encabezamiento
</HEAD>
En el encabezamiento se introduce toda aquella información que afectará a toda la página.
En un principio se limitará al título de la página que se indicará con la etiqueta <title>:
Título del documento
<TITLE>
Título de la página
</TITLE>
El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás
cuando añadan nuestra página a su bookmark (o agenda de direcciones) o en la pestaña
de título en el explorador.
Programación Web
3
Cuerpo
<BODY>
Cuerpo de la página
</BODY>
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto,
imágenes, etc.)
Ejercicio 1. Estructura de un documento HTML
La estructura de un documento HTML queda de esta manera:
<HTML>
<HEAD>
<TITLE> Mi primera página Web </TITLE>
</HEAD>
<BODY>
Hola a todos, como han deducido por el título esta es la
primera página web que hago, espero que les
guste. Robbie.
</BODY>
</HTML>
TABLAS
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada,
organizado en filas y columnas. Algo importante es que no utilizaremos las tablas para
organizar la página completa (esto se hace en la actualidad mediante CSS, es decir hojas
de estilo. Para crear una tabla se hace necesario usar la etiqueta <table>
<TABLE>
Otras etiquetas
</TABLE>
Programación Web
4
Dentro de la tabla se define la estructura cuanto al total de filas y columnas:
Filas
<TR>
Otras etiquetas
</TR>
La etiqueta TR permite la inserción de una fila en la tabla, por cada fila se hace necesaria
definir un TR (para N cantidad de filas N cantidad de TR).
Columna
<TD>
Contenido de la celda
</TD>
La etiqueta TD permite la definición de una columna (celda - casilla) dentro de una fila, la
etiqueta TD va incluida dentro de un TR. En ahí donde se ubica el contenido en la tabla.
Ejercicio 2. Tablas
Creación de una tabla de 2 filas y 3 columnas
Columna 1 Columna 2 Columna 3
F1 - C1 F1 – C2 F1 – C3 Fila 1
F2 - C2 F2 – C2 F2 – C3 Fila 2
<TABLE> Inicio de la tabla
<TR> Inicio de la primera fila
<TD>F1-C1</TD> Primera columna de la primera fila
<TD>F1-C2</TD> Segunda columna de la primera fila
<TD>F1-C3</TD> Tercera columna de la primera fila
</TR> Fin primera fila
<TR> Inicio de la segunda fila
<TD>F2-C1</TD> Primera columna de la segunda fila
<TD>F2-C2</TD> Segunda columna de la segunda fila
<TD>F2-C3</TD> Tercera columna de la segunda fila
</TR> Fin segunda fila
</TABLE> Fin de la tabla
Programación Web
5
Para poder visualizar los bordes de las tablas, se hace necesaria la utilización de
un atributo a la etiqueta.
Borde de una tabla
Para
...