El lenguaje HTML (Hypertext Markup Language) es un lenguaje interpretado por los navegadores web.

Estos navegadores lo que consiguen es hacer que podamos ver como una página normal, lo que de otra manera podría parecernos chino. Muchas letras, etiquetas y atributos que a simple vista no tiene ningún tipo de sentido.

El lenguaje HTML, utiliza etiquetas para darle a conocer al navegador como debe de salir por pantalla la información que ponemos. Las etiquetas se ponen siempre entre menor que (<) y mayor que (>). Las etiquetas pueden tener atributos, información adicional que ayuda a que salga como a nosotros nos interesa, o bien para decirle al navegador donde está la información necesaria para verse correctamente.

Cuando trabajamos con un editor de texto y guardamos para que se vea en una página web la extensión del archivo tiene que ser html o html. También hay que tener en cuenta que haciendo las páginas de esta manera todos los saltos de línea, separaciones de más de un espacio, tabuladores y demás formateo del texto no tienen ninguna repercusión en el resultado, no los interpreta para cada una de estas cosas tenemos una etiqueta diferente.

Siempre que una etiqueta tiene atributos diferentes, estos se escriben poniendo el nombre del atributo, un igual y el valor deseado entre comillas. Como en el ejemplo bgcolor="ff3434". Lista de colores RGB.

Cuando trabajamos en HTML, los colores normalmente se dan en formato RGB, y suelen decirse utilizando seis carácteres; los dos primeros para la cantidad de rojo (Red), los dos del medio para el verde (Green) y los dos último el azul (Blue). Así podemos llegar a generar más de 16 millones de colores diferentes. También aceptan algunos en inglés, pero por norma general es mucho mejor utilizar el código RGB.

Hay dos tipos de etiquetas:

Principales etiquetas HTML

[cerrada] Esta es la primera etiqueta que ponemos siempre. Nos indicael lenguaje en el que estamos trabajando, que por ahora nosotros vamos a utilizar este, HTML.

[cerrada] La etiqueta de cabecera le indica al navegador como se debe comportar y dónde debe ir a buscar cosas necesarias para la correcta visualización de nuestra página web.

[cerrada] Etiqueta más importante que se pone dentro del head, esta etiqueta es el nombre de la web, este título es el que aparece en la pestaña de navegación.

[abierta] Cuando queremos utilizar las letras que nos ofrece Google y que se verán en todos los ordenadores ya que las coge de internet, tenemos que añadir una línea de código que podemos encontrar en la misma página donde las vemos. Basta con entrar en quick-use y elegir que tipo queremos, si HTML, Jscript o @import para los CSS. Es tan fácil como copiar y pegar.

[cerrada] Puede ser que a veces a la hora de hacer nuestro sitio web dejemos cosas indicadas, como que hace un apartado, porque es así y no de otra manera o lo que nos interese; para ellos tenemos los comentarios son trozos de texto que no saldrán por pantalla pero que cuando miramos el código si que aparecen. La manera de poner comentario es muy sencilla comienza con <!-- y terminaría con -->, todo lo que se ponga en medio será comentario. También sirve a la hora de modificar una web para deshabilitar el contenido que no queremos que salga.

[cerrada] Esta es la etiqueta más importante, en ella es donde pondremos todo lo que va a salir por pantalla en nuestra web. Esta etiqueta tiene diferentes atributos:

  • background: será la imagen que queramos que salga de fondo.
  • bgcolor: un color sólido para poner de fondo, podemos tener estos dos a la vez. Si no ponemos nada el color de fondo será blanco.
  • text: color en el que vamos a escribir a no ser que le digamos otra cosa. Si no ponemos nada el color por defecto es el negro.
  • link: color en el que saldrán los enlaces.
  • alink: color en el que saldrán los enlaces que estemos pulsando, enlaces activos.
  • vlink: color de los enlace que ya hayamos visitado.

Con la llegada de los CSS todas estas etiquetas están en desuso.

[cerrada] Estas siete etiquetas diferentes se utilizan para hacer encabezados, cada una es mayor que la siguiente, siendo la más pequeña la H7. Sólo se les puede poner un atributo y es la alineación:

  • align: puede tener cuatro valores, Left, valor por defecto a la izquierda. Center para escribir centrado. Right lo pone todo alineado a la derecha. Y Justify que hace que todas las líneas empiecen y acaben igual.

Tipo h1

Tipo h2

Tipo h3

Tipo h4

Tipo h5
Tipo h6

P

[cerrada] Etiqueta para hacer párrafos. Esta etiqueta es de las más utilizadas, la separación entre párrafos diferentes es el doble que el de un salto de línea. Igual que las etiquetas H su único atributo es el align.

[abierta] Nos sirve para poner saltos de línea, es decir pasar a la siguiente línea pero sin tener que cambiar de párrafo. La principal diferencia entre esta y la etiqueta P, es la separación que dejan. No tiene atributos, hereda los atributos del último P que hayamos puesto.

[todas estas son cerradas] Estos formatos nos permiten hacer que las letras tenga una apariencia diferente a la normal. Tenemos varios:

  • b: para poner la letra en negrita, del inglés bold. NEGRITA
  • i: utilizado para hacer las letras en cursiva, italics. CURSIVA
  • u: subrayada, de underlined. SUBRAYADA
  • s: letra tachada, de stroke (palo). TACHADA
  • big: hace que la letra sea un poco más grande. GRANDE
  • small: hace la letra un poco más pequeña. PEQUEÑA
  • sup: la pone un poco más arriba que las demás. Superíndices. SUPERÍNDICES
  • sub: la pone un poco más abajo. Subíndices. SUBÍNDICES
  • blink: hace que las letras parpaden, no funciona en la mayoría de navegadores. PARPADEO

[abierta] Con esta conseguirmos tener una línea horizontal en nuestra página web.

Atributos:

  • Width: cuanto queremos que tenga de ancho, puede ser un número concreto de píxeles o un porcentaje de la pantalla, si es con porcentaje se adaptará al tamaño de la ventana.
  • Size: el grosor de la línea, mientras mayor sea más gorda será.
  • Color: el color del que queremos que salga la línea.
  • Noshade: para que no salga con sombra, según que navegadores o que coportamientos tengamos puede salir como con sombra, sólo se ve el borde, si no queremos que pase se pone esta palabra. Este atributo va sin el igual ni nada más, simplemente se escribe noshade.
  • Align: la posición que ocupa la línea, por defecto está centrada a no ser que digamos lo contrario.

[cerrada] Las listas en HTML pueden ser de tres tipos listas ordenadas (ordened list OL), listas desordenadas (unordened list UL) y las listas de definición (definition list DL).

Tanto en las listas ordenadas como en las desordenadas para poner un elemento se utiliza la etiqueta cerrada LI, lo que se ponga a continuación será un elemento de la lista.

Las listas ordenadas, son aquellas que saldrán con un número o letra que da el orden de lo que estamos haciendo, se pone cuando no es lo mismo estar en una posición que en otra. Atributos:

  • type: según como queramos que haga el orden, puede ser números (valor por defecto) se pondría un 1, número romanos en mayúsculas o minúsculas I o i, y letras también en mayúsculas o minúsculas A o a.
  • start: para decir en que valor tiene que empezar la lista.
  • reversed: para que la lista vaya al revés (soportado en HTML5).
  • Dentro de cada li se puede cambiar el type así como el orden que lleva, para cambiar el orden sería tan fácil como utilizar el atributo value.

Por su parte las listas desordenadas, se ponen cuando da igual el orden de los elementos que contienen, y van precedidas por un símbolo. Para modificar el símbolo se utiliza el atributo:

  • type: dentro de este tipo podemos utilizar disc, circle y square, un disco pintado, un círculo o un cuadrado. También podemos modificar cualquier elemento de la lista si ponemos el type en los elementos li.

Para acabar las listas tenemos las de definición. Dentro de estas tenemos tres etiquetas diferentes, la DL para indicar cuando empieza el bloque de definición, la DT para poner la palabra que tenemos que definir (definition term) y la DD para poner la definición de la palabra (definition description). Con estas listas conseguimos tener la palabra a definir al margen y la definición un poco más para dentro en la hoja.

[abierta] Esta etiqueta nos sirve para insertar imágenes en una web. Vamos a ver que posibilidades nos ofrece:

  • width: anchura que va a tener la imagen.
  • height: algura de la imagen. Si ponemos sólo uno de estos dos parámetros la imagen se proporciona, si ponemos los dos la imagen se puede deformar.
  • alt: etiqueta de la imagen, para navegadores que no soportan imágenes o para la accesibilidad de los ciegos a la web.
  • border: grosor del borde, el color del borde será el último color que hayamos utilizado para la font y no hayamos cerrado, sino negro.
  • align: en que zona se alineará la imagen, puede ser top que alinea la parte superior de la imagen con el texto que tiene al lado. Bottom lo alinea en la parte inferiro, left la pone en la parte izquierda, right en la derecha y middle, que lo alinea en la parte central de la imagen.
  • hspace: separación vertical hasta otro elemento de la web.
  • vspace: separación horizontal.

[cerrada] Esto es una marquesina, texto que se va a mover en la pantalla. También en las marquesinas podemos añadir imágenes o lo que nos de la gana. Nos encontramos con bastantes opciones diferentes:

  • width: ancho de la marquesina, el trozo que queremos que vuele.
  • height: altura de la marquesina, lo que ocupa verticalmente.
  • bgcolor: color de fondo que va a tener.
  • direction: en que sentido se mueve nuestra marquesina, puede ser left o right.
  • behavior: el comportamiento que va a tener, hay de tres tipos, scroll comportamiento básico va pasando y saliendo de nuevo. Slide, se mueve hasta el final y para, alternate va y viene.
  • loop: cuantas veces queremos que repita.
  • scrolldelay: intervalo de tiempo en milisegundos entre un cambio de posición y el siguiente.
  • scrollamount: cuantos píxels avanza en cada salto.
  • hspace: separación vertical hasta otro elemento de la web.
  • vspace: separación horizontal.

[cerrada] Las tablas son una de las etiquetas más completas, ya que dentro de ellas nos podemos encontrar con diferentes elementos. Su estructura básica es: <table><tr><td></td></tr></table>, donde table es la etiqueta de la tabla, tr sirve para definir filas y td para definir celdas de información/contendio. Veamos más atributos y subetiquetas de table:

  • Etiqueta <tr>: para definir filas.
  • Etiqueta <td>: para definir celdas dentro de una fila.
  • Tanto en la etiqueta table, como en la tr y el td, podemos poner el bgcolor: color de fondo para toda la tabla, para toda la fila o para una casilla concreta.
  • width: la anchura, se puede definir tanto en la tabla entera como en una celda, todas las celdas de una columna tendrán el mismo ancho. Se puede poner en píxels o en porcentaje.
  • frame: atributo que se pone en la etiqueta table puede tener varios valores; void, que no tengamos bordes en la tabla, box que estén los cuatro bordes, above sólo el de encima, below el de debajo, lhs el de la izquierda, rhs el de la derecha, hsides los dos laterales, vsides los dos verticales.
  • rules: para poner los bordes de las casillas que tiene dentro la tabla; none sin bordes, all todos, cols entre columnas, rows entre filas y groups para los grupos.
  • border: tamaño del borde de las celdas.
  • cellspacing: separación entre las diferentes celdas.
  • cellpadding: separación desde el borde de la celda hasta el contenido de la misma.
  • th: es una fila que nos servirá de encabezado para la tabla, sale con la letra en negrita y centrada dentro de cada celda.
  • caption: será el título de la tabla, se pone después de la etiqueta tabla.
  • colspan: se utiliza para unir diferentes celdas horizontalmente, este atributo se utiliza sólo en los td.
  • rowspan: une celdas de diferentes filas, es decir verticalmente, se utiliza sólo en los td.

A

[cerrada] Con esta etiqueta conseguimos hacer enlaces, pueden ser internos o externos, es decir hacia nuestra misma web o hacia otra.

  • href: la dirección a la que queremos que salte, hay que poner el protocolo que utiliza, si es una web http://, si es para descargar algo ftp://. Ejemplo: <a href="http://www.marca.com">, con esta etiqueta haríamos un enlace hacia el periódico marca.
  • name: para definir un "apartado" en nuestra misma web, después estos nombres podrán ser utilizados como destino de nuestros enlaces.
  • target: donde queremos que cargue la web. _blank para que lo haga en una ventana nueva y no machaque la nuestra. _parent en la ventana superior, si trabajamos con marcos. _self en la misma ventana.