Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net






Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 127

Visitas el mes pasado: 354

logo
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.




2. Insertar textos en HTML (V)

2.5 Estilo de texto I.

html

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.

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.


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:

Ver ejemplo


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 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.


Etiqueta font

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:

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.

Estilo de texto II



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com