iMeil - Tutorial Básico de HTML

English version

Tutorial Intermedio

Compártelo:

LECCIÓN 2

Para evitar escribir varias veces lo mismo, me enfocaré a la etiqueta "BODY" para incluir el contenido de la página.

<body>
</body>

Anota: "Lo que más se te antoje"

<body>
Lo que más se te antoje
</body>

Cada vez que agregues algo nuevo, salva tu documento, después, dá clic en el botón "Reload" (Actualizar) del navegador (supongo que tienes abierto tu documento en la pestaña (ventana) adicional de la lección anterior). Si no se muestran tus cambios actuales, al momento de dar clic en el botón Reload mantén presionada la tecla "Shift"

Lo primero que debes aprender es a cambiar los colores del fondo.

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

* bgcolor="#ffffff" (background="blanco") es el código del color blanco.

Se puede especificar una imagen para colocarla como fondo en lugar de un color sólido.

<body background="background4.jpg">
Lo que más se te antoje
</body>

Esta es la imagen del fondo que he empleado:

Para observar la forma en que se muestra la imagen usándola como fondo, haz click sobre la misma.

Es obvio que la imagen se coloca en forma de mosaico para cubrir toda la página. Pero si creas una imagen larga puedes obtener un efecto similar al que se muestra a continuación...

<body background="fondo.jpg">
Lo que más se te antoje
</body>

Haz clic aquí para ver esta forma de fondo.

Esta es la imagen que uso para ese fondo.

(su tamaño real es 1200x15 pixeles, pero la reduje a 400x15 pixeles para que se vea en cualquier resolución de pantalla)

Regresemos a la pantalla blanca

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Coloquemos algo en Negritas

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Lo que se dice al navegador es: en comenzar con negritas, y en detener las negritas.

Lo mismo aplica para las itálicas

<body bgcolor="#ffffff">
Lo que mas se te antoje
</body>

... y también para el subrayado

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Regresemos nuevamente a pantalla blanca sin formato en palabras...

<body bgcolor="#ffffff"> (bgcolor puedes colocarlo en mayúsculas )
Lo que mas se te antoje
</body>

Se puede usar una combinación de etiquetas si se desea.

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Este es un ejemplo de etiquetas combinadas. Si vas a usar etiquetas combinadas (lo que harás dentro de poco), entonces debes evitar confundir al navegador, las etiquetas deben ser combinadas no sobre puestas. Déjame explicarte lo que trato de decir...

<esto><aquello> </esto></aquello> Etiquetas sobre puestas... mal
<esto><aquello></aquello> </esto> Etiquetas combinadas... bien

Puedes cambiar el tamaño de las letras... es muy sencillo

Primero agrega las etiquetas de fuente
<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Después aplica el tamaño
<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Existen 7 tamaños de fuente

1 2 3 4 5 6 7

Dos aspectos importantes que deben tenerse en cuenta...

Una <ETIQUETA> le dice al navegador que haga algo. Un "ATRIBUTO" va dentro de la <ETIQUETA> y le indica al navegador "cómo" hacerlo.
El "VALOR POR DEFECTO" empleado por los navegadores se aplica cuando no se indica nada al respecto. Por ejemplo, el tamaño por defecto de las fuentes en los navegadores es 3. A menos que se establezca uno distinto seguirá siendo 3.

El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual representa el número 3 con el cógido de html) en color negro. Intenta colocar la fuente como Arial o Comic Sans...

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la fuente en la pc para poder visualizarla. Me explico, si tú tienes la fuente "XYZ" en tu pc y la colocas en tu página web, la podrás ver sin problemas, pero cuando un visitante llega y no tiene la fuente, no podrá ver ese tipo de letra que colocaste y será suplantada por la fuente por defecto de su sistema.

Se puede usar una combinación de fuentes que pueden resolver este problema, tal como en Quiero aprender HTML.

Para aquellos que no entienden qué ocurre aquí, tal como me pasó a mí, ésto es lo que sucede ===> El navegador busca por la fuente Arial, si la encuentra la usa, si no la encuentra buscará por Helvetica... si no la encuentra entonces buscará por Lucida Sans... y si no la encuentra entonces usará la fuente por defecto.

Un tip sobre la sintaxis... habrás notado que uso mayúsculas y minúsculas en las etiquetas. Hasta este punto puedes usar lo que desees, ya sea , o , pues representan lo mismo. Lo que no debes olvidar es colocar bien las comillas y los signos de mayor qué ">" y menor qué "<".

Personalmente te sugiero utilizar siempre los nombres de las etiquetas en minúsculas, pues los estándares establecidos por la W3C así lo exigen para validar HTML.

Se puede cambiar el color de la fuente...

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Se puede usar más de un ATRIBUTO en una <ETIQUETA>...

<body bgcolor="#ffffff#>
Lo que más se te antoje
</body>

Y más de una <ETIQUETA> a la misma sección...

<body bgcolor="#ffffff">
Lo que más se te antoje 
</body>

Recuerda, nuevamente, que las etiquetas deben ser combinadas y no sobre puestas...

<ETIQUETA1><ETIQUETA2> <ETIQUETA3>@ i-Meil</ETIQUETA3> </ETIQUETA2></ETIQUETA1>... correcto

<ETIQUETA3><ETIQUETA1> <ETIQUETA2>@ i-Meil</ETIQUETA2> </ETIQUETA1></ETIQUETA3>... correcto

<ETIQUETA3><ETIQUETA2> <ETIQUETA1>@ i-Meil</ETIQUETA3> </ETIQUETA1></ETIQUETA2>... mal

Los navegadores presentan una forma predeterminada para el color de la fuente, del link (vínculo), del link visitado y del link actual. Estos atributos predeterminados son...

Texto Negro
Link color Azul
Link visitado Púrpura
Link activo Rojo

Puedes modificar estos atributos predeterminados en la etiqueta <BODY>...

<body bgcolor="#000000" text="#ffff00" link="#ff0000" vlink="#800000" alink="#008000">
Lo que más se te antoje
</body>

donde vlink es Visited Link (link visitado) y alink es Active Link (Link activo o actual).

Ahora ya sabes un poco acerca de cómo modificar el color y presentación del texto. Vamos a la siguiente lección

Suscríbete al Newsletter
Proporciona tus datos

Políticas de privacidad
Sugerir a un amigo

[Lección 1] [Lección 2] [Lección 3] [Lección 4] [Lección 5] [Lección 6] [Comentarios]

La reproducción de este tutorial no está permitida, por favor, lee los siguientes links para mayor información:
Términos de uso / Políticas de privacidad