Manual de HTML para principiantes - Dando formato al texto sin hojas de estilo

9 - Dando formato al texto sin hojas de estilo

[editar]
Tutorial creado por t0m|ta. Extraido de: http://www.tomatoma.ws/manuales.php
07 de Marzo de 2006
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.
|| 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&eacute;n hemos cambiado el color
del texto y lo de los <a href="#">enlaces</a> Pulsa sobre el enlace para ver c&oacute;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> ||


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

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



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



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



Ahora todo junto

|| Código: ||
|| <font face="Verdana, helvetica, sans serif" size="12" color="blue"></font> ||
[editar]

30 opiniones

www.poderparavencer.com

explendido
T.T

necesito crear una pagina web para aprobar programacion... ayuda!!!
enlases pagina web

porfis ehenme la mano para hacer mi pagina web
enlases

no de como hacer uno para empesar que sea de lo mas sencillo plis
buscando

busca
1 2 3 4 5 6 | siguiente >

Tutoriales relacionados con 'Manual de HTML para principiantes'

¿Quieres hacerte una página web y no sabes ni por dónde empezar? Aquí tienes lo... Más »
El principal objetivo es introducir y discutir el modo principal[2] PSGML de Emacs y las... Más »
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es... Más »
ASP (Active Server Pages) es la tecnología para la creación de páginas dinámicas del lado... Más »
El Jargon File contiene un montón de definiciones del termino "hacker", la mayoría basadas en... Más »

Autor y licencia de 'Manual de HTML para principiantes'


Tutorial de t0m|ta. Extraido de: http://www.tomatoma.ws/manuales.php CopyLeft
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.