Curso de PHP para principiantes

[ Índice | Siguiente ]

Introducción a HTML

Contenido

1.- Introducción

2.- ¿Qué es HTML?

3.- Etiquetas básicas en HTML

3.1.- Ejemplo de documento HTML

a) Ejemplo de títulos y párrafos

b) Ejemplo de listas

c) Ejemplo de tabla

4.- HTML y el aspecto de un documento

1.-Introducción

Este capítulo es tan sólo una sencilla introducción al HTML. Si se desea profundizar se recomienda consultar algún tutorial sobre el tema. Tenemos disponible un curso sobre HTML en esta dirección:

http://www.geocities.com/g_urrutia/cursohtml/index.html

2.-¿Qué es HTML?

HTML (HyperText Markup Language) es un formato que se utiliza, principalmente, para la creación de páginas web. Un documento HTML no es un programa, es simplemente un conjunto de texto y etiquetas. Estas etiquetas se usan para definir la estructura del documento. Un ejemplo de documento HTML es el siguiente:

<html>
<head>

<title>Título de la página</title>
</head>
<body>
Cuerpo del documento.
</body>
</html>

Vamos a crear nuestro primer documento HTML. Crea un fichero de texto plano y copia el ejemplo anterior en él (usa el notepad o algún programa similar, no el Microsoft Word o el OpenOffice.org). Guarda el fichero con cualquier nombre; por ejemplo prueba.html.

Para visualizar un documento HTML correctamente es necesario un navegador (como el Mozilla, Firefox, Internet Explorer, Konqueror, Safari, Opera, etc...) que sea capaz de interpretarlo. Abre el archivo con tu navegador favorito para ver cómo queda.

Este ejemplo se vería así usando Firefox:

Vamos a ver a qué corresponde cada parte del documento HTML:

El texto que hemos puesto dentro de las etiquetas "title" es el que se muestra en la barra de título del navegador, en este caso "Título de la página".
Esta es la barra de navegación. Aquí se muestra el nombre y la dirección del fichero o sitio web que hemos abierto.
Aquí se muestra el texto que hemos puesto dentro de las etiquetas "body".

Existe una organización llamada W3Consortium (www.w3.org que es la encargada de definir los estándares del HTML. Este estandar es el que indica cómo se debe construir un documento HTML, qué etiquetas se pueden usar y cómo. Han publicado varios estándares, el último el 4.01. Anteriormente estuvieron el 4.0, 3.2, 3.0 y 2.0).

El problema del HTML es que cada compañía ha implantado cada estándar como ha querido, creando nuevas etiquetas que no venían en el original o modificando su comportamiento. El resultado de esto ha sido malo para el HTML. Y también para los diseñadores de webs; no es fácil hacer una página que se vea igual en todos los navegadores. Por eso cuando se crea una página hay que probarla en al menos dos navegadores.

3.-Etiquetas básicas en HTML

El HTML estándar tiene unas pocas etiquetas que, como hemos comentado anteriormente, definen la estructura de un documento.

<h1></h1> - Título de primer nivel.

<h2></h2>, <h3></h3> ... - Títulos de nivel inferior.

<p></p> - Párrafo.

<br/> - Salto de línea.

<ol></ol> - Etiquetas que encierran una lista numerada, por ejemplo (viene del inglés ordered list).

<ul></ul> - Etiquetas que encierran una lista sin numerar, por ejemplo (unordered list).

<li></li> - Estas etiquetas encierran a cada elemento de una lista (vale para cualesquiera de las dos anteriores).

<table></table> - Marcan el comienzo y el final de una tabla.

<tr></tr> - Indican cada fila de la tabla.

<td></td> - Encierran a cada elemento de la tabla.

<img src="../imagenes/cursophp/imagen.gif" alt="Texto alternativo/> - Etiqueta que permite añadir imágenes a un documento HTML. El parámetro src indica la ruta a la imagen que se quiere mostrar y el texto que contiene el parámetro alt se usa en caso de que no se pueda mostrar la imagen (también suele mostrarse al poner el ratón sobre la imagen).

Existen otras etiquetas pero estas son las de uso más común.

Nótese que cuando la etiqueta está desparejada, como en el caso de <br/> e <img/> llevan una barra justo antes del símbolo '>'.

3.1.-Ejemplo de documento HTML

Para entender cómo funciona el HTML basta con unos sencillos ejemplos.

a)Ejemplo de títulos y párrafos

<html>
<head>

<title>Título de la página</title>
</head>
<body>

<h1>Título de nivel 1</h1>

<h2>Titulo de nivel 2</h2>

<p>Primer párrafo.</p>

<p>Segundo párrafo.</p>

<h2>Otro título de nivel 2</h2>

<p>El último párrafo.</p>

</body>
</html>

b)Ejemplo de listas

<html>
<head>
<title>Título de la página</title>
</head>
<body>

<h1>Una lista sin numerar</h1>

<ul>
<li>Elemento 1</li>
<li>Elemento 1</li>
</ul>

<h1>Una lista numerada</h1>

<ol>
<li>Elemento 1</li>
<li>Elemento 1</li>
<li>Elemento 1</li>
</ol>

</body>
</html>

c)Ejemplo de tabla

<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Una tabla</h1>

<table>
 <tr>
  <td>Celda (1, 1)</td>
  <td>Celda (1, 2)</td>
 </tr>

 <tr>
  <td>Celda (2, 1)</td>
  <td>Celda (2, 2)</td>
 </tr>
</table>

</body>
</html>

4.-HTML y el aspecto de un documento

Los que estén acostumbrados al manejo de procesadores de textos probablemente se preguntarán cómo se cambia el tamaño del texto o el tipo de letra. A pesar de que durante una época un tanto "oscura" eso se hacía directamente con el HTML (usando la etiqueta FONT) esta práctica se está abandonando. Lo correcto es usar lo que se llaman "hojas de estilo".

Una hoja de estilo es un documento aparte (normalmente con extensión .css) que contiene la información del aspecto del documento: tipos de letra, tamaños, colores, negritas, etc. También se pueden poner los estilos dentro del mismo documento, en una sección del encabezamiento llamada STYLE (entre las etiquetas HEAD).

Por ejemplo podemos definir el estilo de los párrafos de la siguiente forma:

<html>
<head>
<title>Título de la página</title>

<style>
P {
 font-size: 12pt;
 font-family: Times New Roman;
}
</style>

</head>

<body>

<div class="estilo1">Estilo 1</div>

<div class="estilo2">Estilo 2</div>

</body>
</html>

El problema es que este va a ser el estilo para todos los párrafos del documento. Para solucionar esto podemos usar las etiquetas DIV y SPAN.

Las etiquetas DIV y SPAN permiten definir bloques de texto cada uno con su propio estilo. Un bloque de éstos se define así:

<div class="estilo">Bloque de texto</div>

Veamos un sencillo ejemplo:

<html>
<head>
<title>Título de la página</title>

<style>
.estilo1 {
 color: blue;
}
.estilo2 {
 color: red;
 font-size: 10pt;
}
</style>

</head>

<body>

<div class="estilo1">Estilo 1</div>

<div class="estilo2">Estilo 2</div>

</body>
</html>

y su resultado en el navegador:

Si se está interesado en las hojas de estilo se recomienda buscar en Google alguno de los múltiples manuales sobre el tema existentes.

[ Índice | Siguiente ]