Manual de HTML para principiantes - Dando formato al texto sin hojas de estilo
07 de Marzo de 2006
HTML
La W3C recomienda (y nosotros también) utilizar hojas de estilo para todo lo relacionado con la apariencia visual de los documentos html. En las nuevas especificaciones la mayoría de recursos de presentación visual han sido desaprobados.
Sin embargo, es conveniente conocerlos por lo que los vamos a agrupar en este capítulo
ATRIBUTOS DE LA ETIQUETA BODY
Los atributos de la etiqueta bodoy nos permiten controlar la apariencia del documento: bgcolor, background, text, link, vlink y alink. Todos están desaprobados.
Bgcolor: Controla el color de fondo del documento.
Background: Permite utilizar una imagen como fondo del documento. Se suele utilizar con imágenes que se repiten a lo largo y ancho del documento formando un mosaico, por ello se suelen utilizar imágenes muy anchas para que sólo se repitan hacia abajo.
Text: controla el color del texto del documento.
link: establece el color de los enlaces cuando todavía no han sido pulsados.
vlink: determina el color de los enlaces cuando ya han sido visitados.
alink: controla el color de los enlaces en el momento en que pulsan.
Veamos un ejemplo:
NOTA: En este ejemplo hemos quitado el enlace a la DTD de la W3C pues estamos utillizando elementos desaprobados por la W3C.
Aquí hemos establecido los colores con sus valores hexadecimales, pero también se pueden poner con el nombre: bgcolor="red".
Aquí tenéis una lista de los valores hexadecimales que corresponden a cada color.
Aquí tenéis una lista de los nombres de los colores.
MARGENES
Con lo fácil que resulta definir los márgenes con hojas de estilo, en cambio con HTML es un poco más complicado pues cada marca de navegador tiene sus propias etiquetas, así que para que se vea bien, hay que incluir información sobre los márgenes para cada navegador:
Para explorer:
leftmargin: Margen a los lados de la página.
topmargin: Margen superior.
Para Netscape:
marginwidth: Margen a los lados de la página.
marginheight: Margen superior
ALINEACIÓN
Con el atributo ALIGN, controlamos la alineación de los elementos en que lo utilicemos. Puede utilizarse en: CAPTION, IFRAME, APPLET, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1...H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD y TR.
Se puede alinear:
COLOR E IMÁGENES DE FONDO
En realidad ya lo hemos visto en los atributos de la etiqueta body, pero también se lo podemos poner a las tablas. Las tablas las veremos mucho más adelante, así que simplemente quedaros con la copla de que se pueden hacer cosas tan horrorosas como esta.
También podemos poner imágenes de fondo, tal y como vimos para la etiqueta body, también podemos ponerselas a las tablas:
CONTROLANDO LAS FUENTES
Nunca he entendido porqué le llaman "fuentes" al tipo de letra, pero en fin eso es lo que es.
Las fuentes se controlan con la etiqueta <FONT> y podría citar cientos artículos hablando sobre los problemas que acarrea esta etiqueta. Si no me hacéis caso en nada más, por favor controlad las fuentes con CSS (cuando aprendáis claro). La etiqueta <FONT> tiene 3 atributos
face: Controlas el tipo de fuente: arial, verdana, times new roman.
size: Controlas el tamaño de la fuente.
color: Controlas el color de la fuente.
Bueno esto de "controlas" es un decir, para que el usuario vea el tipo de fuente que has definido, tiene que tenerla instalada en su sistema. Si no la tiene, verá la que tenga el navegador definida por defecto, normalmente Times New Roman. Por eso se suelen definir tipos alternativos por si las moscas.
Ahora todo junto
Sin embargo, es conveniente conocerlos por lo que los vamos a agrupar en este capítulo
ATRIBUTOS DE LA ETIQUETA BODY
Los atributos de la etiqueta bodoy nos permiten controlar la apariencia del documento: bgcolor, background, text, link, vlink y alink. Todos están desaprobados.
Bgcolor: Controla el color de fondo del documento.
Background: Permite utilizar una imagen como fondo del documento. Se suele utilizar con imágenes que se repiten a lo largo y ancho del documento formando un mosaico, por ello se suelen utilizar imágenes muy anchas para que sólo se repitan hacia abajo.
Text: controla el color del texto del documento.
link: establece el color de los enlaces cuando todavía no han sido pulsados.
vlink: determina el color de los enlaces cuando ya han sido visitados.
alink: controla el color de los enlaces en el momento en que pulsan.
Veamos un ejemplo:
NOTA: En este ejemplo hemos quitado el enlace a la DTD de la W3C pues estamos utillizando elementos desaprobados por la W3C.
|| Código: ||
|| <html>
<head>
<title>colores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600">
Este documento utiliza un color de fondo. También hemos cambiado el color
del texto y lo de los <a href="#">enlaces</a> Pulsa sobre el enlace para ver cómo
cambia de <a href="#">color.</a>
</body>
</html> ||
|| <html>
<head>
<title>colores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600">
Este documento utiliza un color de fondo. También hemos cambiado el color
del texto y lo de los <a href="#">enlaces</a> Pulsa sobre el enlace para ver cómo
cambia de <a href="#">color.</a>
</body>
</html> ||
Aquí hemos establecido los colores con sus valores hexadecimales, pero también se pueden poner con el nombre: bgcolor="red".
Aquí tenéis una lista de los valores hexadecimales que corresponden a cada color.
Aquí tenéis una lista de los nombres de los colores.
MARGENES
Con lo fácil que resulta definir los márgenes con hojas de estilo, en cambio con HTML es un poco más complicado pues cada marca de navegador tiene sus propias etiquetas, así que para que se vea bien, hay que incluir información sobre los márgenes para cada navegador:
Para explorer:
leftmargin: Margen a los lados de la página.
topmargin: Margen superior.
Para Netscape:
marginwidth: Margen a los lados de la página.
marginheight: Margen superior
|| Código: ||
|| <body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600" topmargin="50" leftmargin="50" marginheight="50" marginwidth="50" >
<h1>Nuestro formulario</h1>
<p>EN UN LUGAR de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. </P>
<p>Miguel de Cervantes</p> ||
|| <body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600" topmargin="50" leftmargin="50" marginheight="50" marginwidth="50" >
<h1>Nuestro formulario</h1>
<p>EN UN LUGAR de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. </P>
<p>Miguel de Cervantes</p> ||
ALINEACIÓN
Con el atributo ALIGN, controlamos la alineación de los elementos en que lo utilicemos. Puede utilizarse en: CAPTION, IFRAME, APPLET, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1...H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD y TR.
Se puede alinear:
- A la Izquierda: "left". Ejemplo
- A la Derecha: "right". Ejemplo
- Al Centro: "center". Ejemplo
- Justificado en ambos márgenes: "justify". Ejemplo
|| Código: ||
|| <h1 align="center">Nuestro formulario</h1>
<p align="justify">EN UN LUGAR de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, ....</P>
<p align="right">Miguel de Cervantes</p> ||
|| <h1 align="center">Nuestro formulario</h1>
<p align="justify">EN UN LUGAR de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, ....</P>
<p align="right">Miguel de Cervantes</p> ||
COLOR E IMÁGENES DE FONDO
En realidad ya lo hemos visto en los atributos de la etiqueta body, pero también se lo podemos poner a las tablas. Las tablas las veremos mucho más adelante, así que simplemente quedaros con la copla de que se pueden hacer cosas tan horrorosas como esta.
|| Código: ||
|| <table bgcolor="#FF0000">
<tr>
<td bgcolor="#000000"></td>
<td></td>
</tr>
</table> ||
|| <table bgcolor="#FF0000">
<tr>
<td bgcolor="#000000"></td>
<td></td>
</tr>
</table> ||
También podemos poner imágenes de fondo, tal y como vimos para la etiqueta body, también podemos ponerselas a las tablas:
|| Código: ||
|| <table background="nubes.jpg">
<tr>
<td background="sol.jpg"></td>
<td></td>
<tr>
<tr>
<td bgcolor="#ffffff"></td>
<td></td>
<tr>
</table> ||
|| <table background="nubes.jpg">
<tr>
<td background="sol.jpg"></td>
<td></td>
<tr>
<tr>
<td bgcolor="#ffffff"></td>
<td></td>
<tr>
</table> ||
CONTROLANDO LAS FUENTES
Nunca he entendido porqué le llaman "fuentes" al tipo de letra, pero en fin eso es lo que es.
Las fuentes se controlan con la etiqueta <FONT> y podría citar cientos artículos hablando sobre los problemas que acarrea esta etiqueta. Si no me hacéis caso en nada más, por favor controlad las fuentes con CSS (cuando aprendáis claro). La etiqueta <FONT> tiene 3 atributos
face: Controlas el tipo de fuente: arial, verdana, times new roman.
size: Controlas el tamaño de la fuente.
color: Controlas el color de la fuente.
Bueno esto de "controlas" es un decir, para que el usuario vea el tipo de fuente que has definido, tiene que tenerla instalada en su sistema. Si no la tiene, verá la que tenga el navegador definida por defecto, normalmente Times New Roman. Por eso se suelen definir tipos alternativos por si las moscas.
|| Código: ||
|| <font face="Verdana, helvetica, sans serif"></font>
<font size="12"></font>
<font color="blue"></font> ||
|| <font face="Verdana, helvetica, sans serif"></font>
<font size="12"></font>
<font color="blue"></font> ||
Ahora todo junto
|| Código: ||
|| <font face="Verdana, helvetica, sans serif" size="12" color="blue"></font> ||
|| <font face="Verdana, helvetica, sans serif" size="12" color="blue"></font> ||
Valora este capítulo:
Autor y licencia de 'Manual de HTML para principiantes - Dando formato al texto sin hojas de estilo'
|
Opiniona sobre 'Manual de HTML para principiantes - Dando formato al texto sin hojas de estilo' (23)
Tu nombre debe tener tres caracteres como mínimo.
Es necesario que te des de alta con una cuenta de correo válida.
Es necesario que te des de alta con una cuenta de correo válida.
El contenido del título de tu opinión debe tener tres caracteres como mínimo.
Es obligatorio que selecciones una valoración del recurso.
El contenido del comentario de tu opinión debe tener tres caracteres como mínimo.
Opina sobre este tutorial |
Wikis relacionados con 'Manual de HTML para principiantes - Dando formato al texto sin hojas de estilo'
¿Quieres hacerte una página web y no sabes ni por dónde empezar? Aquí tienes lo...
Más »
Para realizar tu pagina Web necesitas en principio un editor de textos para escribir los...
Más »
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo...
Más »
Este tutorial explica a manejar textos en HTML, y empiesa con una introducción a todo...
Más »
Con el surgimiento de los servicios hypermediales, los recursos de este medio son un campo...
Más »
