HTML - Hyper Text Markup Language

  »   HTML  »   Tutorial 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. Cuándo terminarás de leer esta web sabrás cómo usar HTML para crear un sitio web básico. Elige 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 está a la base de del Internet tal y como lo conocemos. Todas las páginas 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

Más abajo he hecho una corta lista con los códigos HTML más usados. Puedes añadir esta página a favoritos para que te sea más fácil volver cuando no sabes cómo 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 página 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 - Títulos

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 título definido con h1 es el mas grande y el que está definido con h6 es el mas pequeño.

Html - Linebreak / Salto de linea

<br /> es un salto en línea. El espacio entre "br" y "/" es la diferencia entre HTML 4 y código válido XHTML.

HTML - Línea horizontal

<hr /> se usa para dibujar una línea horizontal. El espacio entre "hr" y "/" es la diferencia entre HTML 4 y código válido 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 artículo </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 vínculo html normal, un vínculo entre dos secciones en la misma página, un vínculo que enlaza con una dirección de correo y un vínculo 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 HTML5.

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, índice, 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>