ETIQUETAS HTML
HTML no es considerado un lenguaje de programación pero si define la estructura que el navegador entiende para poder mostrarle al usuario la información debidamente organizada de una página Web, veamos las principales etiquetas que lo conforman:
MANEJO DE TEXTO
<hx></hx>
Esta etiqueta se conoce como etiqueta de encabezado, se utiliza para definir los títulos y subtítulos, y es posible mostrar el texto en seis tamaños distintos así:
<h1>Tamaño de la etiqueta h1</h1>
<h2>Tamaño de la etiqueta h2</h2>
<h3>Tamaño de la etiqueta h3</h3>
<h4>Tamaño de la etiqueta h4</h4>
<h5>Tamaño de la etiqueta h5</h5>
<h6>Tamaño de la etiqueta h6</h6>
<font size=”” color=”” face=””></font>
Esta etiqueta permite establecer el tamaño, color y tipo de letra, ejemplo:
<font size=»2″ color=»blue»>Texto formateado</font>
Esta etiqueta no es compatible con HTML5 por lo tanto se recomienda dar formato al texto haciendo uso de CSS.
<pre></pre>
Mediante esta etiqueta le decimos al navegador que deseamos mostrar en el documento HMTL un texto pre formateado, por ende será impreso con los espacios que contenga dicho texto.
<p></p>
Cuando deseamos escribir párrafos en HTML podemos hacerlo mediante la etiqueta p.
<center></center> Se utiliza para centrar texto.
<b></b> Se utiliza para colocar el texto en negrita.
<u></u> Subraya el texto.
<i><i> Coloca el texto en cursiva.
<s></s> Tacha el texto, esta acción la podemos realizar con al etiqueta <del>.
<sup></sup> Coloca el texto en superíndice.
<sub></sub> Coloca el texto en subíndice.
MANEJO DE LISTAS
Normalmente las listas se implementan en el diseño de menús para el usuario y son de tres clases: Ordenadas, Desordenadas y de Definición.
Listas Ordenadas:
Se declaran mediante la etiqueta <ol></ol> y se establecen ítems mediante la etiqueta <li></li> Ejemplo:
<ol>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ol>
Listas Desordenadas:
Se declaran mediante la etiqueta <ul></ul> y se establecen ítems mediante la etiqueta <li></li> Ejemplo:
<ul>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ul>
Listas de Definición:
Estas son utilizadas para definir términos, podemos declarar una lista de definición con la etiqueta <dl></dl> Los términos son establecidos con la etiqueta <dt></dt> y colocamos una definición con la etiqueta <dd></dd> Ejemplo:
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcación</dd>
<dt>PHP</dt>
<dd>Lenguaje de lado del servidor</dd>
</dl>
Ahora bien la diferencia entre los primeros dos radica en la forma en como son ordenados los ítems colocando números y viñetas, en la tercera forma se diferencia en que para cada palabra hay una definición colocada en forma de indentación.
MANEJO DE IMÁGENES
HTML también soporta la inserción de imágenes, las cuales podemos utilizar haciendo uso de la etiqueta <img> ejemplo:
<img src=»» alt=»»>
El tributo src define la ruta donde se encuentra nuestra imagen, el atributo alt es utilizado para mostrar un texto en caso de que la imagen no pueda cargar o al pasar el mouse por encima, este atributo es muy requerido para el SEO de un sitio, por ende podríamos tener:
<img src=»http://www.sitioweb.com/imagenes/logo.png» alt=»Logo Tipo»>
MANEJO DE TABLAS
Una de las formas de interactuar con grandes volúmenes de información es haciendo uso de tablas, en HTML podemos declarar una tabla haciendo uso de la etiqueta <table></table> podemos añadir filas con la etiqueta <tr></tr> y datos con la etiqueta <td></td>, también podemos definir los encabezados con <th></th> ejemplo:
<table>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>Dirección</th>
</tr>
<tr>
<td>Ivan David</td>
<td>Lopez Hoyos</td>
<td>Barrio San pedro</td>
</tr>
</table>
MANEJO DE HIPERVINCULOS
Los hipervínculos o enlaces nos ayudan a navegar entre documentos HTML y pueden ser declarados mediante la etiqueta <a href=””> que es utilizada para enlazar paginas externas o marcadores (anclas) dentro de un documento, ejemplo:
Hipervínculos Locales:
<a href=»#marcador»>Ir arriba</a>
Hipervínculos Externos:
<a href=»http://www.google.com»>Ir a Google</a>
Otras de los atributos importantes de esta etiqueta es el target que podemos definir como:
target=”blank_” Utilizada para abrir el vínculo en otra ventana.
target=”_self” Utilizado para abrir el vínculo en la misma ventana (Opción por defecto).
También podemos colocarle títulos a los hipervínculos con el atributo title
Veamos un ejemplo completo:
<a href=»http://www.google.com» title=”Haz click aqui” target=”_blank”>Ir a Google</a>
MANEJO DE FORMULARIOS
Los formularios son muy útiles para recolectar información que el usuario desea almacenar en nuestras aplicaciones y bases de datos, por supuesto que HTML provee la interfaz necesaria para la creación de formularios mediante la etiqueta <form></form> dentro de la cual podemos definir los controles con los que contará nuestro formulario
Ejemplo formulario de contacto:
<form action=»script.php» method=»POST»>
<label for=»nombre»>Nombres:</label>
<br>
<input type=»text» name=»nombre» required>
<br>
<label for=»email»>Correo Electrónico:</label>
<br>
<input type=»email» name=»email» required>
<br>
<br><label for=»mensaje»>Mensaje:</label>
<textarea name=»mensaje» id=»» cols=»30″ rows=»10″></textarea>
<br>
<input type=»submit» value=»Enviar»>
</form>
Como podemos observar las etiquetas form cuentan con un action que apunta a un script Php que se encarga de la lógica de negocios y recibir los datos, otro atributo de esta etiqueta es el method que define la forma en que se enviarán los datos y pueden ser de dos formas POST y GET, dentro de la etiqueta form encontramos el grupo de controles formados por inputs que pueden ser de tipo text (texto), date(fechas), email(correos electrónicos), submit(envío del formulario), también encontramos los textarea, select, así mismo si nos damos cuenta los input cuentan con la propiedad “required” la cual se encarga de validar que el tipo de dato de dicho campo sea el correcto y además que no se encuentre vacío.
Byspel