HTML - Hyper Text Markup Language

He creado esta web para enseñar a los programadores principiantes, pero también a los que tienen una experiencia básica, como crear paginas web. Cuando terminaras de leer esta web sabrás como usar HTML para crear un sitio web básico. Elije tu nivel y empieza a aprender.

  • Las instrucciones del Principiante - Para aquellos que comienzan a aprender a hacer páginas web usando HTML. El HTML esta a la base de del Internet tal y como lo conocemos. Todas las paginas web usan HTML en su estructura.
  • Tutorial HTML - HyperText Markup Language o mas corto HTML. Para los que comienzan con una experiencia básica en HTML. HTML a aparecido como una modalidad de presentación para la información, estructurándola por títulos párrafos etc. Para la personalización de dichos elementos recomendamos usar CSS.

HTML - Resumen de etiquetas y atributos

Mas abajo he hecho una corta lista con los códigos HTML mas usados. Puedes añadir esta pagina a favoritos para que te sea mas fácil volver cuando no sabes como construir una etiqueta HTML o simplemente no te acuerdas.

HTML - Elementos

Los principales elementos en HTML son <html>, <head>, <title>,y <body>. Mas abajo tienes un ejemplo de como construir una pagina web.

html<html>
	<head> 
		<title>Mi primera pagina web usando códigos html!</title>
	</head> 
	<body> 
		Hola chicos! Aquí pondré el contenido de la pagina HTML.
	</body> 
</html>

HTML - Párrafo

html<p>Este es un simple párrafo en HTML.</p>
<p align="left">Este es un párrafo alineado a la izquierda.</p>

Demo

Este es un simple párrafo en HTML.

Este es un párrafo alineado a la izquierda.

Para alinear los elementos html vamos a utilizar la etiqueta align con los atributos: left, right, center, justify.

HTML - Titulos

html<h1>Esta es la etiqueta HTML para el titulo mas grande</h1>

Otras etiquetas para definir títulos o encabezados en html son: h1, h2, h3, h4, h5, h6. El titulo definido con h1 es el mas grande y el que esta definido con h6 es el mas pequeño.

Html - Linebreak / Salto de linea

<br /> es un salto en linea. El espacio entre "br" y "/" es la diferencia entre HTML 4 y codigo valido XHTML.

HTML - Linea horizontal

<hr /> se usa para dibujar una linea horizontal. El espacio entre "hr" y "/" es la diferencia entre HTML 4 y código valido XHTML.

HTML - Listas

Una simple lista en html es de forma:

html<ol>
	<li>El primer elemento html en la lista</li>
	<li>El segundo elemento html en la lista </li>
	<li>El tercer elemento html en la lista </li>
</ol>

El ejemplo de arriba es un ejemplo de lista html ordenada. Otros tipos de listas html son: listas no ordenadas y lista de definiciones.

HTML - Enlaces

html<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Sube al principio del articulo </a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Contacta con nosotros </a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>

Arriba he puesto un ejemplo de un vinculo html normal, un vinculo entre dos secciones en la misma pagina, un vinculo que enlaza con una dirección de correo y un vinculo que enlaza una imagen. Aunque ya no se usa en html merece ser mencionado.

html<base href="http://www.tutorialehtml.com/">

Base href ha sido sacado del index de las etiquetas de HTML 5.

HTML - Imágenes

html<img src="img//html_image.jpg" alt="Html Image" width="100" height="50"  align="center" />

Se recomienda la alineación de las imágenes con la ayuda de CSS. Lo que transformaría el código html de arriba en:

html<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />

HTML - Formularios

Esto es solo un ejemplo de código html usado para crear un formulario. Es lo que un usuario podría usar para introducir la información. Pero para procesar dicha información necesitamos un achivo.php que la mandara a la base de datos, enviara por correo, etc.

html<form method="post" name="formulario" action="archivo_que_procesara_el_formulario_html.php">
	<!--los campos de texto usados para introducir información-->
	<input type="submit" value="Mandar">
	<input type="reset" value="Borrar" />
</form>

HTML - Campos de texto

Mas abajo tienes unos cuantos ejemplos de campos de texto en html.

html<input type="text" size="10" maxlength="40" name="nombre"> - -> campo de texto normal 
<input type="password" size="10" maxlength="10" name="contraseña"> --> contraseña
<input type="radio" name="color" value="rojo"> --> buton radio
<input type="checkbox" name="si" value="si"> --> cuadro de selección 
<select name="selecciona">  --> menú drop-down
   <option>Html 4.1</option> 
   <option>Html 5</option> 
</select>

HTML - Tablas

La estructura básica de una tabla en html es la siguiente:

html<table>
   <tr> 
      <th>Columna 1</th>
      <th>Columna 2</th>
   </tr>
   <tr>
      <td>Fila 1 Celda 1</td>
      <td>Fila 1 Celda 2</td>
   </tr>
   <tr>
      <td>Fila 2 Celda 1</td>
      <td>Fila 2 Celda 2</td>
   </tr>
</table>

Html - Bgcolor

Bgcolor se usa para establecer el color de fondo. Aquí dejo unos ejemplos de como usarlo:

html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.

Html - Background

Para poner una imagen de fondo usaremos el siguiente código html.

html<table background="img/pattern.jpg">

HTML - Comentarios

html<!-- Este es un simple comentario html-->

Html - Embed (Música y audio)

Para insertar música en un documento usaremos la etiqueta html embed, de la siguiente manera

html<embed src="ejemplo.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />

Html - Object (Vídeo)

Para insertar vídeo en un documento usaremos la etiqueta object, de la siguiente manera:

html<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	
	<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

HTML - Negrita

html<b>texto en negrita en html</b>
<strong>texto en negrita en html</strong>

HTML - Cursiva

html<i>italic</i>
<em>emphasized</em>

HTML - Subscript, Superscript, Striketrough

En traducción libre, indice, exponente y texto cortado. Aunque no se usan mucho, merece la pena mencionarlos.

html<sub>indice!</sub>
<sup>exponento</sup>
<del>texto cortado</del>

HTML - Subida de archivos y campos escondidos

El formulario de abajo se usa para subir un archivo al servidor. No olvides que es solo la parte html. Para hacerlo funcional tendrías que procesarlo usando php, asp, etc.

html<form method="post" action="archivo_que_procesara_el_formulario_html.php"> 
	<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 
	<input type="file" />
	<input type="submit" value="Enviar">
	<input type="reset" value="Borrar" />
</form>