HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 127
Visitas el mes pasado: 354
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Llamamos estilo del texto a todo aquello que tiene que ver con su presentación: Es decir, color, tamaño, tipo de letra (o fuente), alineación, sangrías, márgenes, y otros elementos que sin ser el texto propiamente dicho, contribuyen a que se vea de una determinada manera.
Lo normal es definir todos estos parámetros mediante el lenguaje CSS, ideado para este fin, y mediante el cual podemos definir el estilo de una sola etiqueta o de varias a la vez.
Sin embargo el HTML es anterior al CSS, por lo que cuando se creó, se definieron también muchos de estos parámetros mediante etiquetas especiales o atributos.
Aunque lo habitual es emplear el código CSS (el cual lo veremos en los siguientes temas) para estas tareas, el lenguaje HTML conserva también una serie de etiquetas y atributos que pueden utilizarse para definir el estilo de los textos. Tal como hemos explicado anteriormente, esto se debe a que el lenguaje CSS se creó más tarde, y por tanto HTML ya tenía anteriormente etiquetas de estilo.
No está de más conocer estas etiquetas, aunque sean poco usadas (ya que normalmente usaremos código CSS). Es por esto por lo que la mayoría del texto que sigue en esta página está en color azul, para indicar que lo que aquí explicamos no es imprescindible, aunque no está de más saberlo.
Además de la etiqueta <center>
que ya hemos visto, podemos
utilizar el atributo align="..."
con las etiquetas de párrafo y
de título (p, h1, h2, ...
). Sus valores pueden ser: left
(izquierda), center
(centrado), right
(derecha) y
justify
(justificado). Veamos un ejemplo:
El código de la siguiente página:
<html> <head> <title>Ejemplo</title> </head> <body> <p align="left">Texto alineado a la izquierda.</p> <p align="center">Texto alineado al centro.</p> <p align="right">Texto alineado a la derecha.</p> </body> </html>
En el navegador lo veremos como en el siguiente enlace:
Supongamos que tenemos un texto en el que hay por este orden: 3 párrafos alineados
a la derecha, dos párrafos centrados, tres párrafos alineados a la izquierda. Podemos
escribir el código con el atributo align
en cada uno de los párrafos, o
agrupar todos los párrafos con los mismos atributos bajo una misma etiqueta: la etiqueta
<div> ...</div>
El código en este segundo caso sería:
<html> <head> <title>Ejemplo</title> </head> <body> <div align="left"> <p>Texto alineado a la izquierda.</p> <p>Texto alineado a la izquierda.</p> <p>Texto alineado a la izquierda.</p> </div> <div align="center"> <p>Texto alineado al centro.</p> <p>Texto alineado al centro.</p> </div> <div align="right"> <p>Texto alineado a la derecha.</p> <p>Texto alineado a la derecha.</p> <p>Texto alineado a la derecha.</p> </div> </body> </html>
Esta página la veremos así en el navegador: Ver ejemplo
La etiqueta div en si misma no cambia el texto, pero establece divisiones dentro del mismo, de manera que podemos organizarlo en secciones, y dar a cada sección un estilo diferente. La etiqueta divnos sirve para dividir la página en sus distintos bloques, poder maquetar página y aplicarle a cada bloque un estilo diferente. Veremos todo esto más adelante, en el manual de CSS.
Totalmente en desuso, su uso puede ser complicado, actualmente la etiqueta font es sustituida totalmente por código CSS; sin embargo nada nos impide poder usarla.
Mediante la etiqueta font
y sus atributos podemos variar el estilo del texto.
Esta es una etiqueta en línea y en sí misma no cambia el texto, pero puede llevar atributos que varían el estilo del texto:
El atributo face="Tipo de letra"
muestra el tipo de letra, sus valores son el
nombre del tipo de letra que queremos usar. Este tipo de letra debe tenerlo instalado
el usuario en su ordenador, de no ser así mostrará el tipo de letra que se muestra
por defecto. Podemos poner varios tipos de letra separados por comas, En este caso el navegador
comprobará si dispone del primero, y si no es así, pasará al segundo, y así sucesivamente.
veamos un ejemplo:
<p><font face="Comic Sans MS,arial,verdana">Este texto tiene otro tipo de letra</font></p>
En el navegador lo veremos así:
Este texto tiene otro tipo de letra
El tamaño de letra se contola con el atributo size="num"
. El valor es un número del
1 al 7 siendo el 1 el valor más pequeño y el 7 el más grande. El valor predeterminado es el 3.
También podemos marcar el valor de forma relativa, mediante los valores +1, +2, -1, -2, etc.
en este caso el tamaño será mayor o menor que el precedente, en tantos puntos como hayamos
marcado con el número. Veamos un ejemplo:
<font size="5">Este texto tiene la letra más grande</font>
En el navegador lo veremos así:
Este texto tiene la letra más grande
El color de letra se controla con el atributo color
. el valor puede escogerse
entre una lista de colores (nombre en inglés) o mediante el método RGB, que puede ser
RGB decimal, hexadecimal, o porcentual. Los nombres de colores disponibles
y cómo funcionan estos métodos, los explicaremos más adelante. Así, pues,
para poner un texto en rojo tenemos distintas opciones:
<font color="red"> texto en rojo <font>
<font color="rgb(255,0,0)"> texto en rojo <font>
<font color="#ff0000"> texto en rojo <font>
<font color="rgb(100%,0%,0%)"> texto en rojo <font>
En todos los casos anteriores el texto se vería así:
texto en rojo
La mayoría de las etiquetas vistas aquí sobre el estilo en la actualidad son sustituidas por el código CSS (el cual se verá más adelante).
Mención especial merece la etiqueta <div> ... </div> la cual nos será muy útil más adelante para dividir la página en secciones.
En la siguiente página seguiremos viendo algunas etiquetas y atributos usados para cambiar el estilo del texto.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com