Curso de HTML para principiantes, parte V

legamos a la última entrega de HTML para principiantes. Ya hemos cubierto todos los conceptos básicos, y en nuestra entrega anterior avanzamos un poco más y revelamos los detalles de las tablas, además de hablar sobre la forma correcta de subir archivos de imágenes a la web  y la creación de listas. En el día de hoy, abarcaremos uno de los temas más complicados pero también útiles: los formularios.

Hace algunas semanas también les compartimos una lista sobre cómo hacer formularios online sin necesidad de saber de código. Estas opciones también son válidas, pero en ese caso, les recomendamos dejar de leer aquí mismo.

Dentro de HTML tenemos la posibilidad de crear una especie de aplicación web muy básica con código, estos serían los formularios. Generalmente se los usa para eso: formularios de contacto, de consulta, de sugerencias, etc. Su uso está muy abarcado porque ha ido reemplazando al atributo mailto del que les hablamos en el apartado sobre enlaces, dado que varios bots usaban estas direcciones de correo detectándolas en el código para enviar spam.

Tenemos dos tipos de formularios: los formularios simples y los formularios avanzados. Comenzaremos por los simples.

Formularios simples

Se crean usando nada más que dos etiquetas, <form> e <input>. <form>, por supuesto, será la etiqueta que le indique al navegador que está por comenzar un formulario. Y es imperativo que la cerremos cuando termine. Dentro de <form> encerraremos todos los campos que queramos que estén incluidos en el formulario. Con <input>, como veremos a continuación, vamos a poder definir dichos elementos, y son bastantes.

Antes de pasar a estos elementos, deberíamos repasar los atributos que se le pueden sumar al formulario:

• action: con este atributo vamos a indicar la URL donde queremos que se procesen los formularios. Generalmente tendrá la extensión .php.
• method: aquí tendremos dos opciones de atributo, post o get. Dependerá del tipo de método que se use para enviar el formulario. Generalmente, para los formularios de contacto, se usa post, porque permite el envío de mucha más información. Además, los datos enviados por get luego se pueden ver en la barra del navegador, como por ejemplo sucede con Google que emplea este método.
• accept: con este atributo definimos cuáles son los formatos de archivos aceptados por el formulario.

Existen otros atributos, pero estos son los más populares. De hecho, los más usados son action y method.

Elementos de un formulario

Ahora pasaremos a repasar los diferentes elementos que pueden estar incluidos dentro de la etiqueta <input>. Esta es la etiqueta fundamental para crear elementos, con algunas excepciones, así que es importante no olvidarlo. Primero comenzaremos detallando los atributos que puede tener <input> para luego hablar bien de los elementos.

Estos atributos son:

• type: aquí vamos a ingresar qué tipo de elemento queremos. Es el atributo más importante. Con text, passwork, checkbox, submit, reset, y más, podemos armar un formulario simple de contacto.
• name: este atributo le asigna un nombre al elemento, y también es fundamental.
• value: cuando ingresamos este atributo, es para poner un valor inicial dentro del elemento. Por ejemplo, si tenemos una lista del 1 al 10 y queremos que comience con uno, el atributo deberá decir value=”1”.
• size: aquí delimitaremos el tamaño de caracteres que debe tener el campo, en el caso de texto y contraseña, y el tamaño de píxeles que debe tener el cuadro en el resto.
• maxlenght: la cantidad máxima de caracteres permitida en un campo.
• checked: cuando estamos usando checkboxes, este atributo permite predeterminar cuál estará seleccionada de antemano.
• disabled: nos permite deshabilitar un elemento del formulario.
• readonly: permite que creemos un elemento que sea sólo lectura.
• src: nos permite crear botones con imágenes, se usa para el botón del formulario y tiene que estar acompañado por una URL.
• alt: como sucede con este atributo, podemos agregar un texto descriptivo.

Ahora que ya conocemos los atributos, podemos avanzar con los tipos de elemento de formulario que definimos en el código a través del atributo type.

El primero de estos tipos es el campo de texto, el elemento más usado en los formularios. Nos permite crear un cuadro de texto vacío para que, por ejemplo, el usuario pueda insertar su nombre de usuario. En el código, veremos algo así –digo algo así porque falta agregar párrafos y texto; este código es simplemente para ver cómo funcionan las etiquetas y cómo deben ser ordenadas, si lo llevamos a un navegador no funcionará y se verá horrible:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”nombre” />
</form>

</body>
</html>

Aquí vemos cómo quedaría el resultado, pasado al navegador:

Dentro del mismo sentido, casi sin variaciones excepto con el atributo, tenemos a las contraseñas. Estas se deben crear claramente usando el atributo password, y el código no se diferencia demasiado del de texto. Aquí vemos el ejemplo anterior, con el agregado de una contraseña:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<p>Nombre
<input type=”text” name=”nombre” /></p>
<input type=”passwork” name=”Contraseña” />
</form>

</body>
</html>

Ahora avanzamos con las checkboxes, otro clásico de internet, que en realidad no son para nada difíciles de crear. Como pueden intuir, tenemos que usar el atributo checkbox, y luego ir enumerando cada uno de los elementos que queremos que tenga. Es algo engorroso porque hay que usar la etiqueta cada vez que queremos agregar una opción. Para que no sean separados con demasiado espacio, tenemos que añadir además la etiqueta <br />. Siguiendo con nuestro ejemplo:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
</form>

</body>
</html>

Similares a las checkboxes, tenemos a los radiobuttons, que a diferencia de los anteriores son mutuamente excluyentes. Esto quiere decir que no podemos elegir múltiples opciones, sino únicamente una sola. El tipo de atributo que usamos es radio, y el código nos estaría quedando de esta manera:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” />Mujer
</form>

</body>
</html>

Ahora podemos avanzar a los botones. Tenemos dos, submit y reset. Uno de ellos nos permitirá enviar la información del formulario, y el otro nos permitirá borrar todos los valores para volver a una instancia original. La diferencia reside en cómo completemos el atributo type. Si es con submit, enviaremos, y si es con reset, borraremos. Antiguamente se usaban los dos botones pero hoy en día se ha perfeccionado y casi nadie usa reset, sobre todo porque los formularios no se crean únicamente con HTML sino que están apoyados por PHP y JavaScript. Igualmente, aquí está el ejemplo:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer
<input type=”submit” name=”enviar” value=”Enviar” />
</form>

</body>
</html>

También se pueden agregar otros botones usando el tipo de atributo button, pero este tipo de botones únicamente son útiles si los combinamos con JavaScript. Con este código podemos programar para que el botón haga lo que necesitemos que haga.

Formularios avanzados

Ahora pasaremos a los formularios un poco más avanzados. Para poder avanzar necesitamos conocer más etiquetas, una de las más importantes es <fieldset>. Con esta etiqueta podemos agrupar partes del formulario y sumar la etiqueta <legend> para darles un título. Dentro del abanico de posibilidades también encontramos los menús desplegables y las cajas de texto.

Para crear un menú, tenemos que usar no la etiqueta <input> sino la etiqueta <select> y para crear un cuadro de texto, no nos confundamos con <text>, ahora tenemos que usar <textarea>. Dentro de nuestro código anterior, estas nuevas adiciones se verían así:

<html>
<head><title>Ejemplo de formulario</title></head>
<body>

<form>
<input type=”text” name=”Nombre” />
<input type=”passwork” name=”Contraseña” />
<input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <br />
<input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <br />
<input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 <br />
<input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre
<input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer
<input type=”submit” name=”enviar” value=”Enviar” />
<select name=”pais>
<option value=”España”>España</option>
<option value=”Argentina”>Argentina</option>
<option value=”Portugal”>Portugal</option>
<option value=”Chile”>Chile</option>
<textarea name=”comentarios” value=”Deje sus comentarios” cols=”10” rows=”5”></textarea></form>

</body>
</html>

Con esto ya podemos crear un formulario completísimo.

Curso de HTML para principiantes, parte IV

Las imágenes en HTML

Las páginas web no podrían existir sin imágenes. Hoy en día, la importancia de lo visual en las páginas web es obvia. Pero las imágenes tienen que estar subidas de una manera determinada para poder funcionar de forma efectiva. Tenemos dos formas de incluir imágenes, dependiendo del tipo de imágenes que queremos usar. Por eso, vamos a comenzar con la diferenciación entre estos tipos.

Por un lado, tenemos las imágenes de contenido. Estas son imágenes que se incluyen directamente en el código HTML y que deberían servir para proporcionar información adicional. No siempre sucede, pero ese es el espíritu. Por otra parte, tenemos las imágenes de decoración o adorno que se insertan directamente en el código CSS y que no tienen que ver con lo que estamos tratando en este momento. Este tipo de imágenes están insertadas en las hojas de estilo.

Nos dedicaremos, entonces, a las imágenes de contenido. Estas se insertan a través de la etiqueta <img>, que a su vez cuenta con una serie de atributos comunes que podemos usar, como la alineación, bordes, etc. Pero además, la etiqueta <img> cuenta con atributos específicos que es importante que usemos, muchas de las veces. Estos atributos son:

• src: se trata de la URL desde donde estaremos “levantando” la imagen. Puede ser un servidor propio o ajeno, pero es importante que la fuente de la imagen esté siempre activa para evitar errores. Por eso es recomendable usar un servidor propio.
• alt: este es uno de los atributos más importantes de la imagen, y ya en nuestra guía de buenas prácticas para escribir HTML mencionábamos que tenemos que agregarlo por cuestiones de validación y accesibilidad. Nunca debe ser olvidado.
• longdesc: este es uno de los atributos menos usados, pero nos permite acceder a una descripción de la fotografía en una determinada URL.
• name: se trata del nombre de la imagen, como pueden haber adivinado, y es el nombre que aparecerá cuando apoyamos el cursor sobre la imagen.

La etiqueta <img> cuenta con dos atributos más que pueden ser usados para “editar” la imagen desde el código. Estos son width y height, pero no es recomendable usarlos dado que casi siempre deforman la imagen. Si necesitamos usar una foto de un ancho de 450 píxeles, no tenemos que determinar esto desde el HTML, sino que tenemos que editar la foto usando un programa alternativo, y luego subirla. Las ediciones de imágenes se tienen que hacer de forma paralela. Además de usar píxeles, también podemos indicar estas medidas en forma de porcentaje.

En definitiva, los atributos “obligatorios” son src y alt. No pueden dejar de estar en todas las imágenes que subimos al servidor. En cuanto al formato en que tiene que estar la imagen, depende de uno, pero tengamos en cuenta que al estar trabajando con web podemos tener limitaciones de peso de subida desde nuestro propio servidor, y también tenemos que hacer que la imagen cargue rápidamente para nuestros usuarios. Por eso, es mejor usar los formatos más livianos para la web, en 72dpi (o píxeles por pulgada) y en formato PNG o JPG.

Las listas

Otra gran forma de usar HTML es a través de las listas. Se trata de agrupar una serie de textos en un conjunto ordenado o desordenado, que se podrá ver de forma diferente en el resultado final. Por este motivo, tenemosdos tipos de listas que se manejan con etiquetas diferentes: se tratan de las listas ordenadas y de las listas desordenadas. También tenemos la opción de sumar un tipo diferente, las listas de definición, pero al no ser tan usado no estaremos viéndolo en profundidad aquí.

Comenzaremos por las listas desordenadas. Este tipo de listas es el más implementado dada su sencillez. La etiqueta con la cual podemos formar listas desordenadas es un elemento de bloque, y sus dos etiquetas principales son <ul> y <li> (etiqueta que comparte con la lista ordenada). En definitiva, una lista desordenada tendrá este aspecto en el código:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

Notemos que cada una de las etiquetas <li> tiene que estar cerrada. Una vez que tengamos todo dentro de este código, este será el resultado:

• Elemento 1
• Elemento 2
• Elemento 3

Pasaremos ahora a las listas ordenadas. La etiqueta contenedora cambia, dado que será <ol>, pero el mecanismo es básicamente el mismo. Esta es una porción de código para una lista ordenada:

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

Y el resultado será:

1. Elemento 1
2. Elemento 2
3. Elemento 3

La diferencia entre las listas ordenadas y desordenadas, además de la obviedad, es que tiene un atributo que nos permite cambiar las viñetas o números que ordenan. Para poder usar a, A, o I en lugar de 1., podemos usar el atributo start.

Las tablas

Finalmente, llegó la hora de uno de los asuntos más “complicados” del HTML. Puede que sea difícil de resolver en un primer momento, pero rápidamente nos acostumbraremos. Las tablas pueden usarse en el sentido tradicional, para organizar información, pero dentro de una página web también pueden usarse para organizar secciones como el header, el footer, el banner, etc. Básicamente nos dicen dónde deberían ir las cosas.

Usar tablas para organizar páginas web es un acercamiento muy 90’s a la cuestión. Hoy en día la práctica utilizada es crear contenedores div en CSS para poder ubicar las partes de la página de forma correcta. Pero las tablas mantienen una cierta utilidad.

Las tablas están incluidas en HTML desde sus primeras versiones para facilitar el manejo de datos. Pero pueden causar que el producto final de nuestro trabajo sea demasiado pesado y tarde demasiado tiempo en cargar en el navegador, más si lo complementamos con imágenes y otros recursos. Cuando creamos una tabla en HTML, básicamente estamos usando los mismos elementos de siempre que nos permiten crear filas y columnas, encabezados, y más.

Tenemos varios tipos de tablas. Comenzaremos con las tablas simples. En este caso, se componen de tres etiquetas, y no tienen demasiada dificultad. Más adelante hablaremos de atributos y otras cuestiones específicas. Las tres etiquetas son:

• <table>, para delimitar el comienzo y fin de una tabla
• <tr>, que delimita el comienzo de cada fila
• <td>, que determina el contenido de cada celda.

Puede ser algo confuso, pero pensemos que <tr> es table row, por lo que es la fila, y <td> es table data.

Una tabla en HTML se forma de esta manera:

<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

El resultado final será este:

Para seguir avanzando, podemos complejizar la tabla usando otras etiquetas y atributos específicos de las tablas. Por ejemplo, la etiqueta <th> se usa dentro de <tr> como reemplazo de <td>, y es una etiqueta de encabezado de tabla. Si la usamos, el texto que ingresemos en esta etiqueta se verá luego destacado. Las propiedades de este destaque se pueden definir a través de CSS.

Esto nos lleva a hablar de los atributos específicos de las tablas. Aunque hay muchos, mencionaremos los más imprescindibles, los que nos permitirán jugar más con las tablas y hasta con la estructura de un sitio web, si es que queremos crear uno para practicar. Estos atributos son muy importantes para la creación de tablas complejas.

• colspan: se trata del número de columnas que tiene que ocupar la celda. Si quiero tener una celda más grande, que ocupe 2 columnas mientras el resto ocupa una sola, tengo que usar este atributo seguido por la cantidad de columnas: colspan=”2”.
• rowspan: en el mismo sentido que el anterior atributo, tenemos que usar rowspan para fusionar celdas en una fila.

Estos dos atributos nos permiten crear tablas complejas y organizar la información de forma diferente. También se pueden usar otros atributos, pero no son tan comunes.

• abbr: es el atributo que describe el contenido de la celda
• headers: nos muestran las celdas que actúan como cabeceras.

Curso de HTML para principiantes, parte III

DOCTYPE

Antes de ponernos a hablar sobre el DOCTYPE, creo que es momento de recomendar un artículo de nuestro compañero Eduardo donde nos cuenta un poco más sobre las buenas prácticas a la hora de escribir HTML. Una de ellas, la primera, de hecho, es declarar el DOCTYPE correcto. Esto es fundamental, y se nos puede pasar de largo si no tenemos cuidado –aunque generalmente, herramientas como Dreamweaver y similares nos insertan el código de DOCTYPE de forma automática-.

El DOCTYPE es, básicamente, una forma de indicarle al navegador la versión de HTML que estamos usando. Es como una especie de identificador que le permite al browser saber con qué está lidiando. Para poder explicar un poco mejor el DOCTYPE, tenemos que meternos un poco en el mundo de XML. Si no lo habíamos dicho antes, ahora es un buen momento: el XHTML, la versión más usada del código hoy en día, es un derivado del lenguaje XML, y como tal toma muchas de las características de su sintaxis.

Dentro del XML, una de las cosas más importantes a tener en cuenta es el Document Type Definition, o DTD, que es un documento que nos indica las normas y prohibiciones que tiene que tener un documento en la web o en el entorno en el que estemos. Por ejemplo, si vamos a trabajar con discos, podemos hacer a través del DTD que uno de los campos obligatorios sea el nombre.

Tomando el DTD de estos documentos, el estándar XHTML nos permite usar 3 versiones diferentes, que veremos ahora. Lo que tenemos que tener en cuenta es que la etiqueta DOCTYPE se incluye fuera de la etiqueta <html>, es lo único que va por fuera, dado que es un indicativo para el navegador más que otra cosa.La inclusión de la etiqueta <doctype> antes de <html> es algo fundamental que no puede faltar en ninguna página web.

Volviendo a los tipos de DOCTYPE, en realidad dependen de la versión de HTML que estamos usando en el momento. Tenemos tres tipos: Strict, Transitional y Frameset. Por supuesto, cada una de estas varía dependiendo de la versión, por lo que recomendamos que antes de poner un DOCTYPE consultemos con W3Schools para saber si lo estamos haciendo de forma correcta. Usualmente, los documentos de Dreamweaver cuentan con un DOCTYPE transicional.

Así como siempre tenemos que cerrar todas las etiquetas que abrimos, también es importantísimo poner el DOCTYPE antes de la primera etiqueta.

Los vínculos

Uno de los aspectos más importantes del HTML son los vínculos. De hecho, son algo así como su gracia, porque uno de los propósitos principales de este lenguaje es la creación de hipertexto. Cuando se incorporó el HL (Hyper Link) al HTML, el éxito estaba garantizado. Los vínculos también pueden llamarse enlaces, y hoy en día forman una parte crucial del ecosistema de internet, además de generar toda una mentalidad diferente a la hora de leer. Pero eso lo podemos dejar para otra ocasión.

Tenemos que tener en cuenta que un enlace tiene un destino y un final. El recorrido no importa, pero cada una de estas puntas son denominadas anclas, o anchors en inglés. Hablaremos más en profundidad dentro de algunas líneas, pero primero repasaremos qué es y cómo funciona una URL. Seguro ya damos por sentado que sabemos qué es y qué hace, pero seguramente tenemos una vaga idea de cómo funciona.

Las Uniform Resource Locator son una forma de identificar cada uno de los recursos presentes en internet. Como tales, no pueden ser compartidas por diferentes recursos, son identificaciones únicas. Además de servir como identificador, para el usuario son una forma rápida de acceder a un sitio, dado que de otra forma tendríamos que ingresar una importante colección de números. Las URL se componen de diferentes  partes:

• El protocolo: se trata del mecanismo implementado por el navegador para acceder a un determinado sitio web. Los más conocidos son, por ejemplo, HTTP y HTTPS.
• El servidor: es el lugar donde se encuentra almacenado el sitio al que queremos acceder. El nombre de cada servidor permite que el navegador identifique dónde queremos ir cada vez que ingresamos un determinado nombre.
• La ruta: una vez que le indicamos al navegador el protocolo y el servidor, quizás también tengamos que agregar una ruta para identificar una parte o página específica dentro del sitio. Por ejemplo, para acceder a nuestra sección sobre redes sociales, tendrían que sumar a la URL la ruta /redes-sociales.

Estos son los tres componentes principales de una URL, aunque también hay otros, como por ejemplo:

• La consulta: esto seguramente lo han visto varias veces en búsquedas que se realizan en blogs, dentro de la URL se puede visualizar como ?=búsqueda=bitelia. Las palabras están siempre separadas por estos dos caracteres, = y & (para agregar una nueva variable).
• La sección: también dentro de cada página web podemos, a través de la URL, acceder a una determinada sección de una misma página. Dentro de la URL está simbolizado con el #, y pueden probarlo por ustedes mismos haciendo clic en “Comentarios” para que los lleve directamente al fondo de la página.

Ahora que ya tenemos bien comprendidas las URLs podemos comenzar con los vínculos. Entender que es una URL antes es importante porque son las URLs las que estarán insertadas en el vínculo, y son la forma que tenemos de darle a entender al navegador que queremos ir a otra parte.

Tipos de vínculos

En esta sección de nuestro curso ahondaremos en los diferentes tipos de vínculos que tenemos disponibles gracias a HTML. Se trata de los vínculos relativos, los vínculos absolutos y los vínculos de email. Cada uno tiene un código propio, aunque similar, y hay que tener cuidado con no confundirlos. También tienen atributos propios, que debemos usar para dejar en claro cómo queremos que se comporte el navegador ante la presencia de un link.

En una página web lo más probable es que usemos vínculos absolutos todo el tiempo, así que nos concentraremos en esta parte. Para poder crear un hipervínculo, tenemos que usar el código <a>, pero acompañado de determinados atributos. Un hipervínculo normal que nos lleva a otra página web es:

<a href=”http://www.bitelia.com/”>Esto es un hipervínculo</a>

Como podemos ver, la etiqueta <a> está acompañada del atributo que marca la dirección o URL a la cual tiene que dirigirse el enlace. Dentro del interior de la etiqueta aparecerá el texto que más tarde estará destacado en el texto como hipervínculo.

Otro de los atributos más importantes de la etiqueta <a> es el target. Básicamente, el target indicará dónde tiene que ir el navegador hoy en día. Si es una nueva pestaña, una nueva ventana, o dentro de la misma ventana. Gracias a las ventajas de las pestañas hoy en día casi todos los navegadores modernos nos permiten obviar el target dado que se abrirán automáticamente en una nueva pestaña. Pero, por las dudas, el código para hacerlo es:

<a href=”http://www.bitelia.com/” target=”_blank”>Esto es un hipervínculo</a>

Unos párrafos atrás hablábamos del enlace como “destacado” en el texto. Esto se puede lograr a través de atributos, también, pero hoy en día es algo que genera un código muy pesado y desprolijo y es completamente evitable gracias a CSS.

Para ir cerrando el tema de los vínculos, también tenemos que tener el cuenta la etiqueta para enviar correos electrónicos. Para poder modificar un enlace tenemos que agregar algo de código a lo que vimos anteriormente:

<a href=”mailto:info@bitelia.com/”>Envíanos un correo</a>

En un documento HTML, cuando hacemos clic sobre este enlace se nos abrirá una ventana con el cliente de correo que tengamos por default en la computadora. Hoy en día no es recomendable por una serie de motivos, siendo la seguridad el más importante. Existe una infinidad de bots que recorre internet buscando correos electrónicos para SPAM, y además, los usuarios muchas veces no aprecian tener que abrir su cliente de correo electrónico de forma inesperada. Una de las prácticas usadas para reemplazar el mailto es el formulario, del cual hablaremos en la próxima entrega.

Las anclas

Seguramente han notado con anterioridad que, en Wikipedia, cuando hacemos clic en uno de los enlaces del índice, ubicado a principio de página, nos lleva no a un documento HMTL, sino a un sector dentro del mismo documento. Esto se puede lograr usando anclas, y es muy útil a la hora de diseñar páginas que contienen mucho texto y que necesitan de una buena división para no “marear” demasiado al usuario. Si vamos a crear una web, la idea es que sea cómoda y navegable, por supuesto.

El código para realizar anclas es muy simple, y a través de Dreamweaver el proceso también es súper fácil. Tenemos que tomarlo como un enlace perfectamente normal, pero con la diferencia de que en lugar de tener una URL, la etiqueta <a> tendrá un ancla, un lugar dentro del texto donde dirigirse. Ahora bien, para que este lugar pueda ser identificado tendrá que recibir una determinada etiqueta. Para eso, con cada ancla que usemos que tenemos que usar además una etiqueta id. Parece algo confuso al principio, pero ampliaremos.

Este es el código desde dónde vamos a partir. Imaginemos que es una pregunta en la sección de FAQ de una página:

<a href=”#ancla1”>¿Cómo voy hasta abajo?

<p id=”ancla1”>Pues poniendo un ancla.</p>

Si desguazamos las partes de las etiquetas, notaremos que el ancla superior está precedida por un #, que como dijimos antes en las URLs marca una determinada sección de un documento. Por otra parte, lo que estamos haciendo en el segundo pedazo de código es indicarle al navegador cuál es la identificación de ese determinado párrafo. Por ende, este párrafo en particular, marcado con la etiqueta <p>, es único en todo el documento, pues tiene el id “ancla1” que no le corresponde a ningún otro párrafo. Así es como, haciendo clic en el primer enlace, terminaremos en esta parte del documento.

La etiqueta id es también súper útil a la hora de diseñar con CSS, pero eso tendremos que dejarlo para otra entrega.

Como identificar la tecnología que usan los sitios web con Wappalyzer.com

Wappalyzer.com, es una extensión que funciona con los navegadores web Google Chrome y Firefox, su principal función es identificar software que usa el sitio web que visitas.
Esta excelente extensión identifica casi toda tecnología usada por los desarrolladores web, entre estas están; detecta CMS, sistemas de comercio electrónico, JavaScript, Frameworks,paneles de hosting, analítica web y mas.

Adicional a esto, en su sitio web publican constantemente estadísticas sobre el softwarepara aplicaciones web mas populares, comparación entre ellos y estadísticas de uso.
Wappalyzer.com, es la herramienta que necesitas si eres un desarrollador web, ya que tienes la ventaja de poder experimentar con muchas opciones que la competencia está usando.
Wappalyzer.com en Google Chrome: luego de instalar te muestra un icono en la parte superior derecha, al lado de la narra de direcciones, solo haz clic para desplegar el software detectado.

Wappalyzer.com en Firefox, función igual que en Chrome, solo que no tiene que hacer clic en ningún icono, ya que muestra todo lo detectado en la misma barra de direcciones.

Por último, funciona con todas las versiones de ambos navegadores, inclusive con las versiones experimentales.

Enlace | Wappalyzer

Curso de HTML para principiantes, parte II

Estructura de un documento

Para que un navegador pueda leer de forma correcta un documento HTML, por supuesto tiene que tener un determinado orden, y la información tiene que estar encerrada en las etiquetas correctas. De nuevo, insistimos en la importancia de cerrar todas las etiquetas que se hayan abierto alguna vez.

Los documentos HTML se dividen en dos partes, el encabezado y el cuerpo. En la entrega anterior, les hablamos sobre la importancia que tenía la etiqueta <head> antes de que comience <body>. Ahora vamos a explicar un poco más al respecto. Pero antes, debemos aclarar que todos los documentos HTML se abren con la etiqueta <html> y finalizan con </html>. Puede que podamos ver el formato bien si lo probamos de forma local, pero es inaceptable -¡bajo ningún punto de vista!- comenzar un documento sin agregar esta etiqueta.

Como decíamos, la etiqueta <head> marca el comienzo del encabezado. En esta sección del documento encontraremos todos los elementos de la página que no van a ser visibles para el usuario pero que serán interpretados por el navegador. Por ejemplo, los scripts de JavaScript, la metadata, el título de la página, etc. Aquí también estará incluido el código CSS que le dará el diseño a la página. Lo que nos lleva a hacer una aclaración que profundizaremos en otra entrega: ya no son los ’90 y no estamos hosteando nuestras páginas en Geocities. No uses el HTML para intentar hacer un diseño “bonito”.

La segunda parte del documento es el cuerpo, cuyo comienzo está marcado por la etiqueta <body>. Aquí estarán todos los contenidos que serán visibles para el usuario. Por eso, todo lo que sea JavaScript, CSS, no puede estar incluido dentro del cuerpo –exceptuando enlace de los JavaScript externos antes de cerrar el cuerpo-. Las etiquetas están hechas para que podamos trabajar tranquilos y tener todos nuestros espacios bien estructurados.

Etiquetas importantes

Antes de comenzar a enumerar las etiquetas más populares tenemos que hacer una aclaración sobre los tipos de elementos que puede contener una etiqueta. Cada etiqueta puede contener dentro de sí otra etiqueta que marque determinadas características semánticas. Por ejemplo, dentro de la etiqueta <p> (deparagraph o párrafo) puedo sumar la etiqueta <font> para determinar la tipografía, la etiqueta <em> para enfatizar o <strong> para poner en negritas.

En el antiguo HTML, el más primitivo, estas dos últimas etiquetas que mencionamos estaban consideradas como un aspecto de diseño y se identificaban como <b> (de bold) e <i> (de italic). Hoy en día esto se define a través de CSS y lo que nosotros hacemos con HTML es dar una explicación semántica a ese cambio en el formato del texto. Así es como enfatizamos, pero no ponemos en negrita, porque luego a través de CSS podemos crear una regla para que todas las negritas tengan una tipografía y color diferentes, por ejemplo.

Volviendo al tema principal, esto de etiquetas dentro de etiquetas sucede porque tenemos dos tipos de elementos que el navegador puede diferenciar. Se trata de los elementos en línea o inline elements y loselementos en bloque o block elements. La diferencia entre ambos es que los elementos en bloque siempre ocupan todo el espacio del bloque, hasta el final de la línea, mientras que los elementos en línea solamente ocupan el espacio que tienen determinado. La gran mayoría de los elementos en bloque pueden contener en su interior elementos en línea, pero no así al contrario. Así, yo puedo tener un <em> dentro de un <p>, pero no viceversa.

Pasamos entonces a enumerar y describir las etiquetas más importantes de un documento HTML:

• <html>: esta etiqueta es la encargada de marcar el comienzo y el final del documento.
• <head>: está encargada de delimitar el encabezado. Aquí encontraremos información sobre la página que es importante para el navegador y para el funcionamiento de la página, pero invisible para el usuario.
• <title>: se incluye dentro del encabezado y es la encargada de titular la página. Nosotros podremos ver el nombre en la pestaña del navegador.
• <body>: marca el comienzo del documento y del contenido que podrá ver el usuario. Dentro de la etiqueta del cuerpo se encuentran todas las etiquetas que marcan la estructura y el formato de la página.
• <p>: etiqueta de párrafo. Esta etiqueta marca el comienzo y el final de un párrafo. Podemos hacer un texto continuo de varios párrafos sin usarla y veremos que el navegador no diferencia donde comienza uno y termina el otro. Esta etiqueta tiene varios atributos de formato que se pueden aplicar, como veremos más adelante.
• <h1>, <h2>, etc: son las etiquetas de los encabezados. A no confundir con la etiqueta <head>, estas etiquetas están contenidas dentro del cuerpo y sirven para crear títulos y subtítulos. A través de CSS se les puede dar atributos diferenciados.
• <table>: sirve para crear tablas dentro del documento. En los comienzos de internet, para poder darle un formato más atractivo a las páginas, se solía usar tablas HTML para crear las estructuras. Esto por supuesto le daba un peso impresionante a las páginas y era muy desprolijo, afortunadamente en el presente nos manejamos con DIV, aunque no corresponde a este curso. Las tablas, sorprendentemente, se siguen usando para crear páginas web, aunque no es recomendable.
• <form>: es la etiqueta que marca la creación de un formulario. Ahora bien, hay muchas formas de crear formularios online, y si estamos recién comenzando con HTML solamente se debería usar para practicar y nada más. Esta etiqueta tiene muchas etiquetas propias como <input> que permiten al usuario completar campos.
• <iframe>: con esta etiqueta podemos insertar páginas web completas dentro de otras páginas web. Puede servir para crear galerías de imágenes, entre otras cosas. Hoy en día su implementación máxima es en las pestañas de Facebook, con una versión mucho más moderna pero con el mismo espíritu.
• <a>: esta es la etiqueta de los vínculos. Se puede enlazar a documentos HTML externos o a diferentes partes del mismo documento a través de anclas.  Por ejemplo, el menú de cada artículo de Wikipedia, cuando es muy extenso, se maneja con anclas. Cada vez que hacemos clic en uno de estos títulos el ancla nos llevará a la parte del documento a la que queremos ir.

Estas no son las únicas etiquetas HTML disponibles para un documento. A medida que vamos avanzando, vamos necesitando más etiquetas. Pero cuantas más sumamos, como por ejemplo en el caso de las tablas, más pesado será el documento y más tardará el navegador en abrirlo. La idea es hacer un sitio liviano y evitar el uso gratuito de etiquetas.

Atributos

Finalizaremos nuestra entrega de hoy con los atributos de las etiquetas. Ya se pueden ir imaginando por el nombre de qué se trata. Lo que hacen los atributos es darle al navegador información adicional sobre la etiqueta para que sea leída correctamente y nuestra página sea más completa. Los atributos son una forma de personalizar las etiquetas HTML.

Cada etiqueta HTML tiene una lista de atributos que puede ser usado. Generalmente se repiten de etiqueta a etiqueta pero algunos atributos no funcionarán en determinadas etiquetas. Los atributos que sirven para todas las etiquetas se denominan atributos comunes y en poco tiempo los tendremos memorizados. A su vez, estos atributos comunes se dividen en core, internationalization y scripting. En HTML Help pueden encontrar una lista completa con todos los atributos de este tipo.

Ahora bien, hoy en día los atributos más usados son id y class. El atributo id nos ayuda a crear un identificador único de la etiqueta, que la diferenciará del resto del documento. Con el atributo class estamos generando una clase de etiquetas, que se diferenciará del resto. La diferencia fundamental entre class y id es que varias etiquetas pueden tener la misma clase, pero el id será único de una etiqueta en particular.

¿Por qué son los más populares? Pues bien, son los más usados en CSS y en JavaScript. A través de id y class podemos crear diferentes reglas de CSS para crear formatos. Y debido a la existencia de estos dos atributos, los atributos que se solían aplicar a las etiquetas <body> o <p> ya no se usan más. Por ejemplo, si antes queríamos cambiar la tipografía de un único párrafo en todo el documento, teníamos que usar la etiqueta <font> dentro de <p> para poder hacerlo, y sumar varios atributos. Con CSS podemos crear en el HTML un id para el párrafo particular que queremos modificar, y nos estaremos ahorrando buenas líneas de código además de peso en el documento.