Aprende Web
Crea y diseña tus sitios en la Web.
Manual de HTML
HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
Ültima modificación: 29-01-2016.
Visitas este mes: 112
Visitas el mes pasado: 178
WEB-GRAFÍA
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
- Desarrollo Web: manual de HTML
- Desarrollo Web, por Rubén Álvarez
- Cómo crear tu Web: curso de HTML
- ComoCrearTuWeb, Por Georgens
- Libros Web: introducción a XHTML
- Libros web, por Javier Eguíluz Pérez
- Curso de HTML: AulaFácil
- www.aulafacil.com
- Curso de html: Programación Web
- www.programacionweb.net
- WebEstilo: manual de html
- www.webestilo.com
- W3 schools; HTML Tutorial
- www.w3schools.com
- Tutorial html
- Juan José López García
Universidad de Murcia - Introducción al lenguaje html
- wikilearning
Donativos
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.
2. Insertar textos en HTML (V)
2.5 Estilo de texto I.
Definició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.
Formas de definir el estilo
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.
No obstante en HTML también podemos definir muchos de estos parámetros, mediante etiquetas o atributos diseñados para este fin.
Aunque lo habitual es emplear el código CSS (el cual lo veremos en los siguientes temas) para estas tareas, en HTML también hay una serie de etiquetas y atributos que pueden utilizarse para definir el estilo de los textos. Esto es debido 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 después no los vayamos a utilizar casi nunca (ya que normalmente usaremos código CSS). Debemos saber que existen, y aunque nosotros no los usemos, podemos encontrarlos en cualquier otra página que queramos modificar.
Atributos de estilo
Alineación
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:
Etiqueta div: Divisiones
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, las cuales serán múy útiles para su organización, tal como veremos más adelante.
Etiqueta font
Mediante la etiqueta font y sus atributos podemos variar el estilo del texto.
en sí misma no cambia el texto, pero puede llevar atributos que varían el estilo del texto:
Tipo de letra: font face
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
Tamaño de letra: font size
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
color de letra: font color
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:
- Nombre en inglés:
<font color="red"> texto en rojo <font> - RGB decimal:
<font color="rgb(255,0,0)"> texto en rojo <font> - RGB hexadecimal:
<font color="#ff0000"> texto en rojo <font> - RGB porcentual:
<font color="rgb(100%,0%,0%)"> texto en rojo <font>
En todos los casos anteriores el texto se vería así:
texto en rojo
Resumen
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.
imprimir esta página
Página creada por ANYELGUTI.
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