HTML – Etiquetas y atributos
Mas abajo he hecho una corta lista con los codigos html mas usados. Puedes añadir esta pagina a favoritos para que te sea mas facil volver cuando no te acuerdes de un HTML o cual sea el caso.
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>
<head>
<title>Mi primera pagina web usando codigos html!</title>
</head>
<body>
Hola chicos! Aqui pondre el contenido de la pagina html.
</body>
</html>
|
HTML – Parrafo
| |
<p>Este es un simple parrafo en HTML </p>
<p align="left">Este es un parrafo alineado a la izquierda.</p>
|
Para alinear los elementos html vamos a utilizar la etiqueta align con los atributos: left, right, center, justify.
HTML – Titulos
| |
<h1>Esta es la etiqueta HTMl que se usa para mostrar el titulo mas grande </h1>
|
Otras etiquetas para marcar titulos en html son: h1, h2, h3, h4, h5, h6. El titulo marcado con h1 es el mas grande y el que esta marcado con h6 es el mas pequeño.
Html – Linebreak
<br /> es un salto en linea. El espacio entre "br" y "/" es la diferencia entre HTML 4 y codigo valido XHTML.
HTML – Linea orizontal
<hr /> se usa para dibujar una linea orizontal. El espacio entre "hr" y "/" es la diferencia entre HTML 4 y codigo valido XHTML.
HTML – Listas
Una simpe lista en html es de forma:
|
|
<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
|
|
<a href="#top">Sube al pricnipio del articulo </a> (<a name="top"></a>)
<a href="mailto:admin@ejemplo.com" >Contacta con nosotros </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 dirreccion de correo y un vinculo que enlaza una imajen. Aunque ya no se usa en html merece ser mencionado.
HTML – Imagenes
| |
<img src="img//html_image.jpg" alt="Html Image" width="100" height="50" align="center" />
|
Se recomienda la alineacion de la simagenes con la ayuda de CSS. Lo que transformaria el codigo html de arriba en:
|
|
<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;"/>
|
HTML – Formularios
Esto es solo un ejemplo de codigo html usado para crear un formulario. Es lo que un usuario podria usar para introducir la informacion. Pero para procesar dicha informacion necesitamos un achivo.php que la mandara a la base de datos, enviara por correo, etc.
|
|
<form method="post" name="formulario" action="archivo_que_procesara_el_formulario_html.php">
................. los campos de texto usados para introducir informacio .........
<input type="submit" value="Mandar">
<input type="reset" value="Borrar" />
</form>
|
HTML – Campos de texto
| |
<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 seleccion
<select name="selecciona"> --> menu drop-down
<option>Html 4.1</option>
<option>Html 5</option>
</select>
|
HTML – Tablas
La estructura basica de una tabla en html es la siguente:
| |
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
|
Html – Bgcolor
Bgcolor se usa para establecer el folor de fondo. Aqui dejo unos ejemplos de como usarlo:
| |
<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.
|
Html – Background
Para poner una imajen de fundal usaremos el siguente codigo html.
| |
<table background="img/pattern.jpg">
|
HTML – Comentarios
| |
<!-- Este es un simple comentario html-->
|
Html – Embed (Musica)
Para inserar musica en un documento usaremos la etiqueta html embed, de la siguente manera
| |
<embed src="bad_boy.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />
|
Html – Object (Video)
Para inserar video en un documento usaremos la etiqueta object, de la siguente manera:
| |
<object width="425" height="344">
<param name="allowFullScreen" value="true"></param>
</embed>
</object>
|
HTML – Negrita
| |
<b>texto en negrita en html</b>
<strong>texto en negrita en html</strong>
|
HTML – Inclinado
| |
<i>italic</i>
<em>emphasized</em>
<blockquote>blockquote</blockquote>
<address>address</address>
|
HTML – Subscript, Superscript, Striketrough
En traduccion libre, indice, exponento y texto cortado. Aunque no se usan mucho, merece la pena mencionarlos.
| |
<sub>indice!</sub>
<sup>exponento</sup>
<del>texto cortado</del>
|
HTML – Upload 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 funccional tendrias que procesarlo usando php, asp, etc.
| |
<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>
|
