HTML5

HTML es un "lenguaje" que permite crear documentos para web. Permite indicar dónde queremos cada elemento (párrafos, negritas, itálicas, imágenes, etc). Sólo se encarga de lo estructural, y aunque es posible definir el estilo de esta estructura directamente en cada uno de los elemento de HTML, esta practica es ampliamente rechazada, pues por practicidad y capacidad de escalabilidad, se recomienda que el diseño, colores y tamaños sean responsabilidad de CSS. Cada elemento que es creado en HTML es representado por una etiqueta, es decir, una palabra encerrada entre corchetes angulares (signos de desigualdad matemática "< >"), y toma la forma en el DOM (Document Object Model, ó documento web) de una "caja", la cuál puede ser moldeada, redondeada, alterada u ocultada, pero es importante contemplar que el espacio que ocupa todo elemento es representado por un objeto cuadrado o rectangular. Cada etiqueta tiene un sentido semántico que se ve representado en una palabra que tiene relación con el objeto a crear. Así, si deseamos crear un botón, existe la etiqueta <button> y si queremos crear un párrafo de texto como el que lees actualmente debes usar la etiqueta <p> (p = paragraph, párrafo en inglés). No obstante, una vez agotadas todas las etiquetas semánticas que tenemos a nuestra disposición, tenemos dos objetos "comodín" que pueden asumir el rol que deseemos, y cuyo límite está directamente delimitado por nuestra imaginación. Estos comodines son la etiqueta <div>, para elementos que busquen abarcar toda el área disponible, y la etiqueta <span>, para elementos que ocupan solo el espacio necesario, permitiendo a otras etiquetas ubicarse al lado del elemento en cuestión. Spoiler Alert: todas las normas son modificables con CSS.

                            

                                                            <!-- HTML -->

                                <p>Párrafo</p>

                                <button>Botón</button>

                                <section>Secciones</section>

                                <nav>Barras de navegación</nav>

                                <div>La imaginación es el límite</div>

Conceptos necesarios

Para comenzar, definamos 2 conceptos: - Sintaxis, son las reglas y principios sobre cómo construir expresiones interpretables por el lenguaje humano ó, en este caso, el digital. Nos indica pues, las diversas palabras reservadas, expresiones especiales y recursos que el lenguaje pone a nuestra disposición. - Semántica, es el significado atribuible a expresiones sintácticamente bien formadas. Es decir, no basta con conocer las palabras y recursos del lenguaje elegido, pero además debemos crear el conjunto instrucciones con unas determinadas normas, a fin de que puedan ser correctamente interpretadas.

Creando Elementos

Como se indicó anteriormente, todo elemento HTML es creado utilizando una palabra reservada encerrada entre corchetes angulares ( "< >"). En casi todos los casos, las etiquetas tienen una apertura y un cierre, dando origen a dos tipos de etiquetas. Las etiquetas cerradas, las cuales cuentan con la apertura (<p>); el contenido de la etiqueta que se escribe inmediatamente después que ella; y su cierre el cual es similar a la apertura, pero adicionalmente debe llevar una barra diagonal (</p>). Y las etiquetas abiertas, las cuales no requieren un cierre, y sin embargo se aconseja colocar la barra diagonal al final de las mismas para aumentar la compatibilidad con otros lenguajes. Para conocer todas las etiquetas que pueden ser creadas, te dejamos el siguiente botón que te llevará a una excelente biblioteca virtual que recopila toda la documentación necesaria para el uso de HTML (y muchos lenguajes más).

w3schools | HTML

                            

                                                            <!-- Etiqueta Cerrada -->
                                <p>Hola y Bienvenidos :D</p>

                                <!-- Etiqueta Abierta -->
                                <input value="Hola y Bienvenidos :D"/>

Atributos de los Elementos

Dentro de cada apertura de etiqueta HTML se pueden colocar palabras especiales que permiten, como su nombre lo indica, dotar al elemento creado de un conjunto de propiedades con funciones inherentes al atributo asignado. Observemos el siguiente Ejemplo:

                            

                                                            <!-- Etiqueta SIN atributos -->
                                <p>
                                    párrafo
                                </p>

                                <!-- Etiqueta con el atributo de clases -->
                                <p class="p-vert">
                                    párrafo
                                </p>

                                <!-- Etiqueta con atributos de clase e identificador -->
                                <p id="p-1" class="p-vert">
                                    párrafo
                                </p>

Cada uno de estos atributos tiene una función definida y algunos de ellos son obligatorios para el correcto funcionamiento de algunas etiquetas, o necesarios para tener un buen puntaje de SEO (ranking de posicionamiento de tu página web en los buscadores). Dentro de los atributos opcionales más importantes a tener en cuenta (y todos son importantes), podemos destacar 2: - id, atributo que debe asignarse de manera única por página web(no por sitio web, sino en cada documento), debido a que este atributo identifica al elemento, lo cual permite usarlo o modificarlo únicamente a él. - class, su función es asignarle una clase al elemento, lo cual es una "palabra especial" creada por el usuario para poder ubicar a este, y todos los elementos que tengan dicha clase, para ser modificados desde la hoja de estilos (CSS). Estos serán los más usados en el diario porvenir de nuestra aventura como desarrolladores web, sin embargo, y antes de mostrar algunos ejemplos de atributos obligatorios, queremos una vez más, brindarte un enlace a w3schools, donde podrás encontrar todos los atributos que existen, y cuales elementos pueden contenerlos.

w3schools | Atributos

                            

                                                            <!-- La Etiq. <a> sirve para crear links, la dirección de ese link se coloca en el atributo "href" -->

                                <a href="www.w3schools.com">
                                    Click me!
                                </a>

                                <!-- La Etiq. <img> sirve para crear imágenes, y es obligatorio que cuente con el atributo "src" (source, fuente en inglés) pues es el que indica el lugar donde se encuentra ubicada la imagen que deseas mostrar -->

                                <img src="my-project/img/hola.jpg" />

                                <!-- Además y a pesar de ser "opcional", para mejorar tu SEO, todas las imágenes deben tener el atributo "alt", el cuál debe ser una breve descripción de la imagen a mostrar -->
                                
                                <img src="..." alt="emoticono de saludo" />

Las Convenciones son un grupo de acuerdos y normas tácitas que aunque no interfieren con la semántica del lenguaje, buscan la estandarización del mismo con el fin de crear código limpio, entendible y escalable. Es por ello que en aras de promover las buenas practicas, a continuación expondremos algunas de las convenciones que existen para HTML.

1. Siempre se debe declarar el tipo de documento en la primera línea en el documento:

                            

                                                            <!DOCTYPE html>

2. Usar nombres de elementos en minúsculas: Aunque HTML5 permite mezclar letras mayúsculas y minúsculas en los nombres de elementos. Se recomienda usar nombres de elementos en minúsculas pues es más fácil de escribir y luce más limpio.

                            

                                                            <!-- Bien :) -->
                                <div>Mira las etiquetas.</div>

                                <!-- regular :( -->
                                <DIV>Mira las etiquetas.</DIV>

                                <!-- Por favor, no x_x -->
                                <DiV>Mira las etiquetas.</dIv>

3. Cerrar todos los elementos HTML: En HTML5, no es necesario cerrar todos los elementos como por ejemplo la etiqueta <p>, pero es recomendable cerrar todos.

                            

                                                            <!-- Válido pero no recomendado -->
                                <section>
                                    <p>Esto es un párrafo.
                                </section>

                                <!-- Válido y recomendado -->
                                <section>
                                    <p>Esto es un párrafo.</p>
                                </section>

4. Usar nombres de atributos en minúsculas:

                            

                                                            <!--  Permitido  -->
                                <div CLASS="menu">

                                <!--  Recomendado  -->
                                <div class="menu">

5. Usar comillas en los valores de atributos: HTML5 permite atributos sin comillas, sin embargo se recomienda el uso de comillas debido a que es más fácil de leer y además, debe usarse si el valor contiene espacios.

                            

                                                            <!-- Funciona pero no es recomendable -->
                                <table class=striped>

                                <!-- Esto no funciona porque el valor contiene espacios -->
                                <table class=table striped>
                                
                                <!-- Funciona sin problemas, por eso es lo recomendado -->
                                <table class="table striped">

6. Espacios y Signos de Igualdad: HTML5 permite los espacios alrededor de los signos igual (=), pero sin los espacios es más fácil de leer y agrupa mejor las entidades.

                            

                                                            <!-- Funciona pero es confuso para leer -->
                                <link rel = "stylesheet" href = "styles.css">

                                <!-- Funciona y es fácil de leer -->
                                <link rel="stylesheet" href="style.css">

7. Indentación: Es la sangría que debe llevar todo elemento "hijo", anidado dentro de un elemento "padre". Es utilizada para mejorar la legibilidad del código fuente por parte de los programadores, y en algunos lenguajes es parte de la semántica del código, por lo cual dejaría de ser considerada una convención, pues pertenece a la sintaxis necesaria del lenguaje.

                            

                                                            <!-- Funciona pero es confuso para leer -->
                                <section>
                                <article>
                                <p></p>
                                </article>
                                </section>

                                <!-- Funciona y es fácil de leer -->
                                <section>
                                    <article>
                                        <p></p>
                                    </article>
                                </section>

¡Pasemos a la Acción!, a continuación te dejamos una serie de ejemplos de código HTML5 junto con su resultado, además de consejos adicionales a tener en consideración.

1. Elementos Interactivos: Botones, enlaces, iconos. Todos los elementos necesarios para que el usuario interactúe dinámicamente con la página

                            

                                                            <!-- Enlaces con su atributo "href" -->
                                <a href="https://www.google.com/" target="_blank">Click me!</a>
                                <!-- tip: Si usas el atributo "target" y le das el valor "_blank" el enlace abrirá en otra pestaña -->

                                <!-- Botones con su atributo "type" -->
                                <button type="button">Botón</button>
                                <!-- tip: Si define el "type" de un botón va a poseer diversas propiedades. type="submit" envía un formulario, type="reset" reinicia los valores del formulario -->

Click me!

2. Elementos para Ingreso de Datos: Ingreso de texto, ingreso de imágenes, selectores, y agrupaciones de estos que forman formularios completos para que los usuarios ingresen datos

                            

                                                            <!-- Input es el elemento básico para ingreso de datos -->
                                <input type="text" name="dni" placeholder="Escribe Aquí" />

                                <!-- Select crea un selector desplegable -->
                                <select name="dni">
                                    <option value=""> Seleccione </option>
                                    <option value="123456"> Juan </option>
                                    <option value="654321"> Maria </option>
                                </select>
                                <!-- tip: todas las <option> necesitan el atributo "value", no importa si está vació-->

                                <!-- textarea es parecido a un input, pero su tamaño puede ser reajustado por el usuario, pues está pensado para textos grandes -->
                                <textarea name="dni" placeholder="Reajusta mi tamaño"></textarea>

                                <!-- tip: TODOS los elementos de ingreso de datos necesitan el atributo "name", pues será "el nombre" que almacenará valor del elemento. Con el atributo "placeholder" colocas un texto por defecto para cuando tu campo esté vacío, solo funciona en Input y Textarea, para select, puedes dejar la primera opción como el preview -->

3. Elementos de multimedia o de texto: Ingreso de Imágenes, videos, párrafos y en general, todo lo que necesitas para brindarle información al usuario

                            

                                                            <!-- <img> permite crear imágenes, siempre debe ir acompañado del atributo ALT debido a la SEO -->
                                <img src="../src/img/antico.png" alt="Icono de Antwoord Lab" width="30" height="30" />

                                <!-- <p> permite crear secciones de texto, NO Obstante.. -->
                                <p>El atributo Alt permite mostrar un texto provisional mientras carga la imagen</p>

                                <!-- El texto puede ser creado dentro de cualquier elemento -->
                                <span>Elemento <span></span>

El atributo Alt permite mostrar un texto provisional mientras carga la imagen

Elemento <span>

4. Elementos de organización: Cuando requieres que tu página tenga un orden especifico, puedes recurrir al elemento <table>, pues crea una grilla preformateada para colocar tus elementos, no obstante ese sistema se considera un tanto obsoleto, y se recomienda usar las herramientas de organización que conoceremos al aprender CSS.

                            

                                                            <!-- <table> tiene su propia semántica y atributos -->

                                <!-- Apertura y cierre -->    
                                <table>
                                    <!-- Cabeza, cuerpo y pie (opcionales) -->
                                    <thead>
                                        <!-- <tr> table row (fila, imperativo)  -->
                                        <tr>
                                            <!-- <th> para cabeceras, <td> para datos (imperativo) -->
                                            <th colspan="2"> Cabecera </th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody>
                                        <tr>
                                            <td> dato 1 </td>

                                            <td> dato 2 </td>
                                        </tr>
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <!-- Colspan indica el tamaño de espacio a ocupar  -->
                                            <!-- Según la cantidad de columnas de la tabla -->
                                            <td colspan="2"> Pie </td> 
                                        </tr>
                                    </tfoot>
                                </table>

Cabecera
dato 1	dato 2
Pie

Acabamos entonces de exponer los elementos básicos que te brindan el punto de partida para la investigación, desarrollo y práctica en la creación de una página web. Te recordamos que aún hay mucha información por descubrir, y que puedes servirte de páginas como w3schools.com ó la sección de Desarrolladores de Mozilla.

¡Visita estos sitios para ampliar tus conocimientos!.

Llegado a este punto, y teniendo una base conceptual sobre HTML, no nos queda más que alentarle a poner los conocimientos adquiridos en práctica. Para ello se requiere de 2 cosas:

- Un Editor de texto, pues aunque para comenzar puede hacer uso de bloc de notas, la realidad es que existen herramientas que le facilitaran el trabajo de edición de su código. Entre las más recomendadas destacamos 2.

Sublime Text Visual Studio Code

- Habilitar la extensión de los archivos. Todos los archivos tienen una extensión, un valor que indica a qué tipo pertenece el archivo en cuestión. Por ejemplo, los documentos de Microsoft Word terminan en ".doc", las imágenes, usualmente tienen el formato ".jpg" ó "png", e incluso, uno de los formatos de compresión de música más reconocidos es el ".mp3". Usualmente no vemos estas extensiones, pero son necesarias pues los archivos que pretendemos que sean interpretados por nuestro navegador a la hora de practicar, deben tener la extensión ".html". Además, por convención, el nombre de archivo no debe contener caracteres especiales ni letras que no existan en inglés y debe estar en minúsculas. Para poder habilitar las extensiones de los archivos te brindamos a continuación un video corto.

Ver Extensiones

¿Qué es HTML5?

Sintaxis y Semántica

Conceptos necesarios

Creando Elementos

Atributos de los Elementos

Convenciones

Ejemplos

¡Visita estos sitios para ampliar tus conocimientos!.

«La única forma de aprender desarrollo web es, desarrollando»

Una vez asimilada y practicada la información anterior, es momento de conocer al resto de la estructura estética de un sitio web. Aprendamos CSS: