ETIQUETAS HTML

Color de fondo: bgcolor
El primer parámetro que debes conocer es el del color de fondo, el “bgcolor”. A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir:

<body bgcolor=”#FF0000″></body>

Imagen de fondo: background
Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta “background”. La etiqueta quedaría de la siguiente manera:

<body background=”URL”> </body>

Dónde leemos “URL” deberemos escribir la dirección de la imagen que queramos que sea nuestro fondo. Una cosa muy importante que debes saber es que si la imagen no es suficientemente grande para rellenar toda la página, la imagen se repetirá tanto a lo ancho como a lo largo hasta rellenar todo el espacio.

Color de texto: text
Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que sea nuestro texto. Esto lo definiremos con el parámetro “text”.

Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente:

<body text= “#000000”></body>

Headings

Nos definen el tamaño de un título o cabecera.

<h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título.

<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.

Ejemplo

Código

<html>
<head>
<title>Headings</title>
</head>

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Resultado

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Párrafos

Los párrafos se definen con la etiqueta <p>.

Ejemplo

Código

<html>
<head>
<title>Párrafos</title>
</head>

<body>
<p>Este es el primer párrafo.</p>
<p>Y este es el segundo párrafo.</p>
</body>
</html>

Resultado

Este es el primer párrafo.

Y este es el segundo párrafo.


Comentarios

La etiqueta <!– … –> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.

<!– Esto es un comentario. –>

* Nota que el signo de exclamación se coloca solo al principio del código.


Salto de línea

El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.

Ejemplo

Código

Esto es <br> un salto de lí<br>nea.

Resultado

Esto es
un salto de lí
nea.


Trazar una línea

La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.

La etiqueta <hr> no tiene cierre.

Ejemplo

Código

<hr>

Resultado


Tabla con las etiquetas básicas

Etiquetas Descripción Ej.
<h1> a <h6> Define el tamaño de los encabezados Ejemplo de las etiquetas <h1> a la <h6>
<p> Define un párrafo Ejemplo del uso de la etiqueta <p> </p>
<!– –> Define un comentario Ejemplo del uso de los comentarios en un código HTML
<br> Define un salto de línea Ejemplo del uso de un salto de línea dentro del código HTML
<hr> Define una línea horizontal Ejemplo de como definir una línea horizontal dentro del código

 

Formato básico del texto

HTML nos permite definir el formato de visualización del texto en la pantalla.

Muy útil para cuando queramos resaltar o enfatizar un texto en especial.

También muy usado para subrayar o escribir subíndices o superíndices.

Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos

Para ello utilizamos las siguientes etiquetas:

Ejemplo

Código

<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>

Resultado

Texto normal Texto en negrita
Texto normal Texto grande
Texto normal Texto enfatizado
Texto normal Texto en itálica
Texto normal Texto pequeño
Texto normal Texto fuerte
Texto normal Texto subíndice
Texto normal Texto superíndice
Texto normal Texto subrayado
Texto normal Texto tachado
Texto normal Texto teletipo


Etiquetas para dar forma al texto

Etiquetas Descripción
<b> Define un texto en negrita
<big> Define un texto grande
<em> Define un texto enfatizado
<i> Define un texto en itálica
<small> Define un texto pequeño
<strong> Define un texto fuerte
<sub> Define un texto subíndice
<sup> Define un texto superíndice
<ins> Define un texto subrayado
<del> Define un texto tachado
<tt> Define un texto de teletipo
<s> Define un texto tachado. Desaprobado. Use <del> en su lugar
<strike> Define un texto tachado. Desaprobado. Use <del> en su lugar
<u> Define un texto subrayado. Desaprobado. Use <ins> en su lugar

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: