Mini tutorial de HTML

1. General	4. Línea divisoria	7. Caracteres especiales
2. Enlaces	5. Saltos de línea	8. Imágenes
3. Párrafos	6. Varios espacios seguidos	9. Títulos (cabeceras)

General

• HTML es un lenguaje de marcas o etiquetas, no es un lenguaje de programación. Mediante esas etiquetas se indica al navegador cómo debe de mostrar el contenido de la página. Las etiquetas están incrustadas en el contenido, que no es más que texto simple.
• Acostúmbrate a poner las etiquetas HTML en minúscula. Ponerlas en mayúscula pertenece al pasado.
• En HTML el texto se interpreta todo seguido, todos los separadores de palabras (espacio, salto de línea, tabulador) se interpretan como un solo espacio. Por ejemplo:

  Hola, esto es      html
  Me	mola
  		

  El resultado sería:

  Hola, esto es html Me mola

  Para hacer saltos de línea, poner espacios consecutivos y cosas así hay instrucciones HTML que se ven más adelante.
• Si tu página está en un servidor Linux, entonces distinguirá entre mayúsculas y minúsculas. Por ejemplo, si tienes una imagen que se llama ConMayuscula.jpg en su dirección se tiene que poner ConMayuscula.jpg, no sirve conMayuscula.jpg ni conmayuscula.JPG

Enlaces

• Formato básico para insertar un enlace:

  <a href="direccion">Texto del enlace</a>

• Se verá el texto del enlace como enlace y al pinchar sobre él se abre la dirección.
• La dirección hay que ponerla completa si apunta a una página de otro sitio web (ejemplo: "http://www.myspace.com/mispace")

Párrafos

• Un párrafo se abre con <p> y se cierra con </p>. Ejemplo:

  <p>Esto es un párrafo.</p><p>Esto otro.</p>

  Aunque está todo escrito en la misma línea, el resultado será dos párrafos distintos separados:

  Esto es un párrafo.

  Esto otro

Línea divisoria

• Para poner una línea horizontal se puede poner:

  <hr />

  La línea se dibuja entre el contenido anterior a ella y el que le sigue, separándolos.

Saltos de línea

• Vamos a verlo directamente con un ejemplo:

  Frase con un <br />salto de línea

  Resultado:

  Frase con un
  salto de línea

Varios espacios seguidos

• Para poner varios espacios seguidos hay que utilizar el código HTML del carácter espacio, que es &nbsp;. Ejemplo:

  Frase con     espacio entre palabras

  Resultado:

  Frase con     espacio entre palabras

Caracteres especiales

• Hay caracteres que sólo pueden aparecer si ponemos su código HTML. Por ejemplo, los signos < y > siempre se interpretan como apertura y cierre de etiqueta respectivamente, para escribirlos en la página hay que utilizar &lt; y &gt;
  Hay otros caracteres especiales que para ponerlos necesitas conocer su código html Puedes verlos todos en http://www.ascii.cl/es/codigos-html.htm

Imágenes

• Formato para insertar una imagen:

  <img src=”direccion_de_la_imagen” alt=”texto_alternativo” title=”texto_emergente” />

  Donde:
  src .- dirección de la imagen, si está en tu página puede ser relativa, si no, completa. Por ejemplo (dirección relativa): src="images/mi_imagen.jpg"
  alt.- texto que aparecerá si la imagen no puede cargarse (requerido)
  title.- texto que aparecerá al poner el puntero sobre la imagen (opcional)
• El texto asignado a title se mostrará al dejar el puntero del ratón quieto encima de la imagen. Muchos desarrolladores empleaban alt para esto, ya que si no se indica title MS Internet Explorer usa en su lugar el texto alternativo, ¡pero esto no es correcto y el resto de navegadores no lo interpretarán así!

Títulos (cabeceras)

• Para poner un texto a modo de título (destacado) se utilizan las etiquetas h1, h2, h3… (h de "header")
  Hasta h6, pero normalmente no necesitarás más allá de h3:

  <h1>Título grande</h1>
  <h2>Título mediano</h2>
  <h3>Título pequeño</h3>