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.
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.
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>Este es un simple párrafo en HTML.</p>
<p align="left">Este es un párrafo alineado a la izquierda.</p>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<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.
<br /> es un salto en línea. El espacio entre "br" y "/" es la diferencia entre HTML 4 y código válido XHTML.
<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.
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<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<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;" />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>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>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>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.Para poner una imagen de fondo usaremos el siguiente código html.
html<table background="img/pattern.jpg">html<!-- Este es un simple comentario html-->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" />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<b>texto en negrita en html</b>
<strong>texto en negrita en html</strong>html<i>italic</i>
<em>emphasized</em>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>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>