El HTML es el lenguaje básico de escritura en páginas web, se basa en un sistema de etiquetas y su principal característica son los enlaces a otras págines web.
En nuestras ediciones en HTML hemos empleado el Bloc de notas de Microsoft, pero existen múltiples herramientas posibles para crear este tipo de textos.
Vamos a hacer un repaso a todas las etiquetas que hemos usado, con ejemplos de archivos HTML.
(Nota: En las etiquetas aparece un asterisco que se escribe para que sean visibles en texto normal, cuando queramos emplearlas como texto HTML no debemos escribirlos)
- Un texto HTML siempre debe comenzar con la etiqueta <*html>, siendo ésta cerrada al final del documento por <*/html>.
- El encabezado de la página, en el que podemos incluir el título de la página y las etiquetas de la misma, abierto con <*head> y cerrado con <*/head>
- El título de la página lo escribiremos entre las etiquetas <*tittle> y <*/tittle>, las cuales deben estar dentro del encabezado. Descarga archivo de ejemplo
- Escribiremos todo el texto entre las etiquetas <*body> y <*/body>
- Dentro de la etiqueta Body, ya empleando texto, podemos hacer un salto de línea simplemente con la etiqueta <*br>
- También podemos añadir atributos a la etiqueta body, como el atributo bgcolor, que cambia el color de fondo de la página. Por ejemplo, <*body bgcolor="black"> y cerramos con <*/body>. Descarga archivo de ejemplo
- El atributo background sirve para colocar una imagen como fondo de la página. Por ejemplo, si tenemos un fichero en la misma carpeta que la página y se llama foto.jpg, escribiríamos <*body background="foto.jpg"> y cerraríamos con <*body>. Descarga archivo de ejemplo
- Podemos cambiar el color de todo el texto que aparecerá en la página con la etiqueta text. Por ejmplo, <*body text="white"> y cerraríamos con <*/body>
- Para cambiar el color de los enlaces no visitados de la página utilizaríamos la etiqueta vlink. Por ejemplo, <*body vlink="olive"> y cerrada con <*/body>
-Podemos cambiar el color de los enlaces activos, aunque éstos solo duran un segundo, mediante la etiqueta alink. Por ejemplo, <*body alink="black"> y cerraríamos con <*/body>. Descarga archivo de ejemplo
- Para delimitar los párrafos los escribiremos entre las etiquetas <*p> y <*/p>
- Para alinear los párrafos a un lado, a otro, o al centro escribiremos dentro de la etiqueta del párrafo, así <*p align>, y añadiremos el lugar en el que lo queremos alinear, a la izquierda <*p align="left">, al centro <*p align="center">, o a la derecha <*p align="right">. Descarga archivo de ejemplo
- Para que un texto aparezca como encabezado utilizaremos las etiquetas <*h> y las daremos un valor entre uno y seis, es decir, <*h1> y cierro con <*/h1>. Descarga archivo de ejemplo
- Para dar negrita a un texto lo escribiremos entre las etiquetas <*b> y <*/b>. Descarga archivo de ejemplo.
- Para subrayar un texto lo escribiremos entre las etiquetas <*u> y <*/u>
- Para escribir subíndices y superíndices, como en las fórmulas químicas, emplaremos las etiquetas <*sub> y <*/sub> para los subíndices y <*sup> y <*/sup> para los superíndices. Descarga archivo de ejemplo
- Para otorgar atributos a la fuente escribiremos la etiqueta <*font> y la cerraremos con <*/font> y escribiremos los atributos dentro de ellas
- El atributo face cambia el tipo de letra. Por ejemplo, <*font face="arial"> y cerraremos con <*/font>
- El atributo size ajusta el tamaño de la letra. Por ejemplo, <*font size=4> y cerraremos con <*/font>
- El atributo color cambia el color del texto. Por ejemplo, <*font color="red"> y cerraremos con <*/font>. Descarga archivo de ejemplo
- Para enlazar a otras páginas web o documentos desde nuestra página utilizaremos la etiqueta <*a> cerrada con <*/a> y para añadir el destino del enlace escribiremos el atributo href, quedando así <*a href="archivo ó dirección web">
- Podemos enlazar a párrafos dentro de nuestra página, para esto necesitaremos de dos etiquetas. Primero pondremos la etiqueta <*a name="p.ej.Final> cerrada por <*/a> en el lugar al que queramos trasladarnos, después añadiremos la etiqueta <*a href="#Final> cerrada por <*/a> al texto que queramos que enlace. Descarga archivo de ejemplo
- Para enlazar a documentos dentro de nuestro ordenador utilizaremos la etiqueta <*a href="nombre del archivo"> cerrada por <*/a> si éste está en la misma carpeta en la que la página, si no lo está debemos especificar el directorio, por ejemplo <*a href="Mis documentos/Trabajos/html.doc">. Descarga archivo de ejemplo
- Para enlazar a páginas web externas utilizaremos la etiqueta <*a href="http://www.nombredelapágina.com"> cerrada con <*/a>. Descarga archivo de ejemplo
- Para insertar una imagen de nuestro disco duro en la página web emplearemos la etiqueta <*img src="ruta del archivo">
- Podemos ajustar el tamaño de la imagen con los atributos height y width. Por ejemplo, <*img src="ruta del archivo" height="300" width="300">
- También podemos añadirle un borde, o hacer que desaparezca, con el atributo border. Por ejemplo, <*img src="ruta del archivo" border="1">
- Podemos alinear la imagen igual que un texto mediante el atributo align. Por ejemplo, <*img src="ruta del archivo" align="center">
- Para agregar tablas a nuestra páginas web usaremos la etiqueta <*table> cerrada con <*/table>. Para añadir una fila a la tabla escribiremos la etiqueta <*tr> cerrada con <*/tr> y añadiremos columnas con <*td> cerrada con <*/td>
- Por último, podemos añadir atributos a cada fila como align, background, bgcolor, height, width etc. dentro de la etiqueta <*td>. Descarga archivo de ejemplo
