Grupo de Apoyo a la Teleenseñanza Fotos de la Universidad

 

Desarrollo web » Aspectos avanzados » HTML

HTML es el lenguaje con el que están construidas las páginas web generalmente y es el más estándar soportado por todos los navegadores web en una versión u otra del estándar.

En relidad un archivo HTML no es más que texto y etiquetas que indican cómo visualizar la página. Es por esto que no se ve igual una página vista en distintos navegadores ya que HTML sólo puede describir cómo se quiere que se vea la página pero el trabajo de generarla a partir del archivo es trabajo del navegador y pueden surgir diferencias en el proceso.

Vamos a ver cómo es una página web por dentro. Vamos a tomar como ejemplo una página web de ejemplo que hemos creado y que podéis ver en la siguiente imagen.

Web de ejemplo HTML básico

Si intentamos abrir una página web con un editor de texto como el simple Bloc de Notas veremos realmente cómo está formada.

Las etiquetas están encerradas entre los símbolos "<" y ">" y como vemos hay multitud de etiquetas distintas, por lo que en muchos casos usamos editores de páginas web visuales en los que no es necesario conocer las etiquetas ni para qué sirven cada una de ellas.

Una página web muy básica se puede componer de la siguiente manera

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Las etiquetas principales son <html> que indica el comienzo de la página y que se finaliza con </html> indicando el final de la página web. Dentro de esta etiqueta, un documento HTML se divide en una cabecera (encerrada entre las etiquetas <head></head>) y un cuerpo del documento -que es lo que veremos- (encerrado entre las etiquetas <body></body>).

Como se puede ver una página tiene un título que se encuentra dentro de la cabecera y encerrado entre las etiquetas <title></title>.

 

Otros elementos de una página web

 

Etiquetas con atributos

Podemos encontrarnos con etiquetas que contienen atributos, por ejemplo la etiqueta <body> puede contener atributos para poder especificar...

Un color de fondo: <body BGCOLOR="#FFFFFF">
Una imagen de fondo: <body BACKGROUND="imagen.jpg">

Saltos de línea

Para indicar un salto de línea con una etiqueta HTML deberemos poner <br> esto nos permitirá escribir frases con saltos de línea ya que el navegador no interpreta las pulsaciones de la tecla "INTRO" como saltos de línea.

Párrafos

Si queremos especificar un párrafo de texto deberemos encerrarlo entre las etiquetas <p> </p> como en el siguiente ejemplo.

<p> Lo que escribamos dentro lo verás como un párrafo aparte </p>

Imágenes

Se pueden insertar imágenes pero éstas estarán fuera del documento y lo único que haremos es especificar con una etiqueta la imágen que queremos que aparezca.

<IMG SRC="lecci3a.jpg" WIDTH=150 HEIGHT=110>

Como se puede ver hemos indicado también con los atributos WIDTH y HEIGHT el ancho y alto de la imagen. La imágen deberá estar en la misma carpeta que el archivo HTML.

Tablas

Las tablas son un elemento básico con el que se puede posicionar los contenidos y dividir las secciones de una página web. Una tabla la componen las siguientes etiquetas...

<table><td><tr></tr></td></table>

Las etiquetas <table> </table> encierran todo el contenido de la tabla. Las etiquetas <td></td> indican las columnas, cuantas más etiquetas de este tipo pongamos más columnas tendrá la tabla. Por último las etiquetas <tr></tr> indican las filas contenidas en la columna en la que están encerradas.

 

 

Es interesante conocer cómo están hechas las páginas web, pero en la mayoría de ocasiones nos será más rápido usar un editor de páginas web visual para crearla como si fuera un procesador de texto sin que tengamos que saber qué etiquetas está colocando internamente en el fichero.