Conceptos básicos de HTML5. Empezamos!
HTML5
Antes de conocer los conceptos básicos de HTML5 debes saber que el famoso HTML (HyperText Markup Language) o lenguaje de marcado, no es ni más o menos que el lenguaje utilizado para la creación de páginas web.
Tenemos que tener en cuenta que HTML no es un lenguaje de programación, ya que no tiene estructuras cómo un lenguaje de programación, como los bucles, las condiciones, las funciones, etcétera.
La web y el lenguaje HTML fueron inventados por Tim Berners-Lee a finales de los años 80. A finales de 1990, Tim Berners-Lee puso en marcha el primer servidor web usando un ordenador Next y En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.
Actualmente, la ultima version de este lenguaje es HTML5.
La web es una plataforma abierta basada en estándares aceptados, por eso las aplicaciones web se pueden utilizar desde cualquier ordenador con cualquier sistema operativo. Lo único que necesitamos es un navegador web, como Google Chrome, Microsoft Internet Explorer, Opera o cualquier otro similar. Pero, además, hoy en día no nos tenemos que condicionar solo al ordenador, también podemos usar las aplicaciones web desde otros dispositivos, como los teléfonos móviles o tablet.
Conceptos básicos de HTML5
HTML tiene su vocabulario y su gramática. El vocabulario son las etiquetas que se pueden emplear. La gramática son las reglas que establecen y cómo se deben utilizar las etiquetas para escribir un documento.
Un elemento se compone de una etiqueta inicial (o de apertura) y una etiqueta final (o de cierre). La etiqueta final se define con una barra inclinada y el nombre de la etiqueta inicial. La etiqueta inicial puede llevar atributos, pero la etiqueta final nunca lleva. En los atributos pueden llevar un valor.
<a href="https://comohacertuweb.com" class="enlace" title="Como hacer mi web">Como hacer mi web</a>
Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros.
<p>Este es el <strong>texto</strong> de mi <em>página web</em></p>
Para comenzar a crear una página web sencilla, debemos tener en cuenta tres elementos principales. Estos se conocen como tags o etiquetas, y podras construir tu propia página web sirviendote de ellos.
- HTML: es la etiqueta que define lo que envuelve al contenido total de la página.
- HEAD: es lo que se conoce como el encabezado de la página. Por lo general, se utiliza para incluir el nombre, descripción o palabras clave. Si se van a emplear hoja de estilos (conocidas como CSS), este será el lugar donde incluirla.
- BODY: o cuerpo. Es el sitio donde debes incluir la información y el contenido completo de la página. Todo lo que escribamos aquí se va a ver, se va a pintar en la página web
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primer documento</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
Etiquetas de encabezados o títulos
Las etiquetas de encabezados se utilizan para indicar las secciones y subsecciones de una página, textos o párrafos comunes de otros más importantes. Las etiquetas de las cabeceras serian: H1, H2, H3, H4, H5 y H6. Tienen un orden jerárquico, en el que H1 es el de mayor importancia.
<h1>Titulo de mi página</h1>
<h2>Sección de mi página</h2>
<h3>Contacto</h3>
Párrafos
Para poder escribir párrafos debemos utilizar las etiquetas de inicio y final <p> y </p>. Dentro de estas podemos usar las etiquetas <strong></strong> «destacar», para poner en negrita el texto, y <em></em> de «énfasis», para poner en cursiva. O incluso anidar las dos juntas, negrita y cursiva a la vez.
<p>Este es el <strong>texto</strong> de mi <em>página web</em>, y esto <strong><em>esta en cursiva y negrita</em></strong></p>
Enlaces
Los enlaces son el elemento principal que dota a la web su calificación de hipertexto, son los vínculos que se establecen entre nodos y facilitan la lectura secuencial o no secuencial de la web.
La web está formada por millones de documentos o páginas web, interconectados por millones de enlaces.
En las páginas web se pueden generar dos tipos de enlaces: los enlaces intradocumentales y los enlaces extradocumentales. Un hiperenlace puede hacer referencia a un punto determinado de la página que lo contiene, a otra página, a un punto declarado de otra página o a una página de otra web.
La etiqueta que se utiliza en HTML para definir un hiperenlace es <a></a>.
<h1 id="elpuntodemipagina">Tipos de enlaces</h1>
<a href="#elpuntodemipagina">Enlace a un punto de la misma página</a>
<a href="otra-pagina.html">Enlace a otra página</a>
<a href="otra-pagina.html#elpuntodemipagina">Enlace a un punto de otra página</a>
<a href="https://comohacertuweb.com">Enlace a otra página web</a>
Listas no ordenadas, ordenadas y de definiciones
Listas no ordenadas
<ul> es el acrónimo de «unordered list», lista no ordenada, en una lista no ordenada, el orden de aparición de los elementos no es importante, cada elemento de la lista se define con <li>, que es el acrónimo de «list item». Los elementos de la lista se indican con símbolos.
<h2>Lista no ordenada</h2>
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ul>
Listas ordenadas
<ol> es el acrónimo de «orden list», lista ordenada, en una lista ordenada, el orden de aparición de los elementos es importante, cada elemento de la lista se define con <li>, que es el acrónimo de «list item». Los elementos de las listas se indican con números o letras, por ejemplo, todo esto es una lista ordenada.
<h2>Lista ordenada</h2>
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
Una lista ordenada puede contener los siguientes atributos:
- start: Permite indicar el valor inicial en el que comienza la lista.
- type: Permite indicar el tipo de numeración, (1,2,3,4…), (A,B,C,D…) (I,II,II,IV…) (a,b,c,d…)
- reversed: Booleano que indica que la numeración será descendiente.
<ol type="1" start="4" reversed="reversed">
<li>Cuarto</li>
<li>Tercero</li>
<li>Segundo</li>
</ol>
Listas de definiciones
<dl> es el acrónimo de «description list», lista de descripción, que se compone de términos. Cada término puede poseer cero o más descripciones. Cada de la lista se define con <dt>, cada descripción de un término se define con <dd> y los elementos se indican con un aumento del margen izquierdo. La lista de descripción se emplea normalmente para definir un glosario o un diccionario.
<h2>Lista de definición</h2>
<dl>
<dt>Primer termino</dt>
<dd>Descripción primera</dd>
<dd>Descripción Segunda</dd>
<dt>Segundo termino</dt>
<dd>Descripción primera</dd>
<dt>Tercer termino</dt>
<dd>Descripción primera</dd>
<dd>Descripción Segunda</dd>
<dd>Descripción Tercera</dd>
</dl>
En HTML, también se pueden crear listas anidadas, que es simplemente una lista dentro de otra y se pueden combinar de cualquier forma, la lista que está dentro de otra se llama sublista.
<ol>
<li>Primero</li>
<li>Segundo</li>
<dl>
<dt>Primer termino</dt>
<dd>Descripción primera</dd>
<dd>Descripción Segunda</dd>
<dt>Segundo termino</dt>
<dd>Descripción primera</dd>
<dt>Tercer termino</dt>
<dd>Descripción primera</dd>
<dd>Descripción Segunda</dd>
<dd>Descripción Tercera</dd>
</dl>
<li>Tercero</li>
<ol type="1" start="4" reversed="reversed">
<li>Cuarto</li>
<li>Tercero</li>
<li>Segundo</li>
</ol>
</ol>
Creación de tablas simples
Las tablas son uno de los elementos fundamentales de HTML. Antes de que aparecieran las capacidades de CSS, (Cascading Style Sheets) u hoja de estilo en cascada, para realizar diseños espectaculares en las páginas web, las tablas eran la única forma de maquetar páginas web con diseños más o menos complejos. A día de hoy se recomienda solo utilizar tablas cuando tengas que utilizar tablas.
Las etiquetas <table></table> indican el inicio y el cierre de la tabla. <tr></tr> «table row» representa una nueva fila de la tabla y <td></td> «table data cell», es la etiqueta de último nivel y se traduce en una celda de datos en la tabla. Estas son las tres etiquetas fundamentales y las más empleadas.
Para añadir semántica a la tabla, contamos con la etiqueta <th></th>, «table header», que sustituye la etiqueta <td></td> para celdas de cabecera. Se puede utilizar en cualquier punto de la tabla, aunque su uso se recomienda para las primeras y las últimas filas y columnas.
También es posible agrupar filas en tres bloques de estilos.
- thead: agrupa una o más filas de cabecera.
- tbody: se utiliza para agrupar filas de cuerpo, aquellas que contienen el grueso de los datos.
- tfoot: agrupa las filas del pie de la tabla.
Otras etiquetas que podemos utilizar en nuestras tablas son:
- Caption: añade un título sobre la tabla.
- Colspan y rowspan: esperan un valor entero que especifique cuántas columnas o filas respectivamente ocupa la celda. Tenemos que tener cuidado, para que una celda pueda ocupar el espacio de otras, es necesario que ese espacio, este vacío, que no se llene.
<table border="1">
<caption>LISTA DE LA COMPRA</caption>
<thead>
<tr>
<th>UND.</th>
<th>ARTICULO</th>
<th>PRECIO</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2</th>
<td>Pan</td>
<td>0.45€</td>
<td>0.90€</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Tomates</td>
<td>0.25€</td>
<td>1.25€</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Galletas</td>
<td>2.50€</td>
<td>7.50€</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Aceite</td>
<td>5.75€</td>
<td>5.75€</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Leche</td>
<td>2.00€</td>
<td>4.00€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">SUBTOTAL</td>
<td>19.40€</td>
</tr>
<tr>
<td colspan="2">IVA</td>
<td>21%</td>
<td>4.07€</td>
</tr>
<tr>
<td colspan="3">TOTAL</td>
<td>23.47€</td>
</tr>
<tr>
<td colspan="2" rowspan="2">DATOS DEL CLIENTE</td>
<td colspan="2">FACTURACIÓN</td>
</tr>
<tr>
<td colspan="2">ENVÍO</td>
</tr>
</tfoot>
</table>
Formularios web
Los formularios HTML son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación. Permiten a los usuarios enviar información a un sitio web.
HTML5 ha agregado nuevos elementos, tipos de campo y atributos para expandirlos tanto como sea necesario y proveer así las funciones actualmente implementadas en aplicaciones web.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Formulario</title>
</head>
<body>
<h1>Complete el formulario</h1>
<section>
<h2>Contáctanos</h2>
<form action="" method="get" name="formulario" id="formulario">
<ul>
<li>Nombre: <input type="text" name="nombre" id="name" placeholder="Escriba su nombre" required></li>
<li>Apellido: <input type="text" name="apellido" id="apellido" placeholder="Escriba sus apellidos" required></li>
<li>Email: <input type="email" name="email" id="email" placeholder="Escriba su E-mail" required></li>
<li>Edad: <input type="number" max="65" min="18" name="edad" id="edad" placeholder="Escriba su edad" required></li>
<li>Mensaje: <textarea cols="40" rows="6" required></textarea></li>
<li><input type="submit" value="Enviar"></li>
</ul>
</form>
</section>
</body>
</html>
La estructura del formulario y sus atributos siguen siendo iguales que en especificaciones previas, sin embargo, existen nuevos atributos para el elemento <form>:
- Autocomplete: Puede tomar dos valores, «on y off». El valor por defecto en «on». Cuando se configura como «off» los elementos <input> pertenecientes a ese formulario tendrán la función de autocompletar desactivada, sin mostrar entradas previas como posibles valores. Puede ser implementado en el elemento <form> o en cualquier elemento <input> independientemente.
- Novalidate: Una de las características de formularios en HTML5 es la capacidad propia de validación. Los formularios son validados automáticamente. Para evitar este comportamiento, podemos usar el atributo «novalidate». Para lograr lo mismo para elementos <input> específicos, existe otro atributo llamado «formnovalidate».
El elemento más importante en un formulario es <input>
Este elemento puede cambiar sus caracteristicagracias al atributo «type» (tipo). este atributo determina qué clase de entrada se espera desde el usuario.
En HTML5 estos nuevos tipos no solo están especificando qué clase de entrada es esperada, sino también le dice al navegador qué debe hacer con la información recibida. El navegador procesará los datos de acuerdo al valor del atributo «type» y validará la entrada o no.
El atributo «type» trabaja junto con otros atributos adicionales para ayudar al navegador a limitar y controlar en tiempo real lo que introduzca el usuario.
- Tipo email: Casi todo formulario en la web ofrece un campo para introducir una dirección de email, pero hasta ahora el único campo disponible para esta clase de datos era «text». El tipo text representa un texto general, no un dato específico, por lo que antes de HTML5 teníamos que controlar la entrada de código JavaScript para estar seguros de que el texto introducido correspondía a un email válido.
Ahora el navegador se hace cargo de esto con el nuevo tipo email:
<input tipe="email" name="email" id="email">
El texto insertado en el campo generado por el código del ejemplo será controlado por el navegador y validado como un email. Si la validación falla, el formulario no se enviará.
La forma en la que cada navegador responderá a una entrada inválida no está determinada en la especificación de HTML5. Algunos navegadores mostrarán un borde rojo alrededor del elemento <input> que produjo el error y otros lo mostrarán en azul.
- Tipo search: El tipo «search» (búsqueda) no controla la entrada, es solo una indicación para los navegadores. Al detectar este tipo y campo, algunos navegadores cambiarán el aspecto del elemento para ofrecer al usuario un indicio de su propósito.
<input type="search" name="busqueda" id="busqueda">
- Tipo URL: Este tipo de campo trabaja exactamente igual que el tipo email, pero es específico para direcciones web. Está destinado a recibir solo URL absolutas y retomará un error si el valor es inválido.
<input type="url" name="url" id="url">
- Tipo tel: Este tipo de campo es para números de teléfono. A diferencia de los tipos email y URL, el tipo «tel» no requiere ninguna sintaxis en particular. Es solo una indicación para el navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que se ejecuta la aplicación.
<input type="tel" name="telefono" id="telefono">
- Tipo number: El tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributos nuevos que pueden ser útiles para este campo:
- Min: Determina el minimo valor aceptado para el campo.
- Max: Determina el máximo valor aceptado para el campo.
- Step: Determina el tamaño en el que el valor será incrementado o disminuido en cada paso. Por ejemplo si declara un valor de 5 para step en un camp que tiene un valor mínimo de 0 y máximo de 10, el navegador no le permitirá especificar valores entre 0 y 5 o entre 5 y 10.
<input type="number" name="numero" id="numero" min="0" max="10" sted="5">
- Tipo range: Este tipo de campo hace que el navegador construya una nueva clase de control que no existía previamente.
Este nuevo control le permite al usuario seleccionar un valor a partir de una seríe de valores o rango.
Normalmente, se muestran en pantalla como un puntero deslizable o un campo con flechas para seleccionar un valor entre los predeterminados, pero no existe un diseño estándar hasta el momento.
El tipo «range» usa los atributos min y max vistos previamente para configurar los límites de rango. También puede utilizar el atributo «step» para establecer el tamaño en el cual el valor de campo será incrementado o disminuido en cada paso.
<input type="range" name="rango" id="rango" min="0" max="10" slep="5">
- Tipo date: Algunos navegadores muestran en pantalla un calendario que aparece cada vez que el usuario hace clic sobre el campo.
El calendario le permite al usuario seleccionar un día que insertará junto al resto de la fecha.
Un ejemplo de uso es cuando necesitamos proporcionar un método para seleccionar una fecha para un vuelo o la entrada a un espectáculo.
<input type="date" name="fecha" id="fecha">
- Tipo week: Este tipo de campo ofrece una interfaz similar a «date», pero solo para seleccionar una semana completa. Normalmente, el valor esperado tiene la sintaxis 2022-W15 donde el año es 2022 y la semana la numero 15
<input type="week" name="semana" id="semana">
- Tipo month: Similar al anterior, este es específico para seleccionar meses. NormalNormalmente,mente el valor esperado tiene la sintaxis año-mes.
<input type="month" name="mes" id="mes">
- Tipo time: El tipo de campo «time» es similar a «date», pero solo para la hora. Toma el formato de hora y minutos, pero su comportamiento depende de cada navegador. Normalmente, el valor esperado tiene la sintaxis hora, minutos, segundos, pero también puede ser solo hora, minutos.
<input type="time" name="hora" id="hora">
- Tipo datetime: El tipo de campo «datetime» es para insertar fecha y hora completa, incluyendo la zona horaria.
<input type="datetime" name="fechahora" id="fechahora">
- Tipo datetime-local: El tipo de campo «datetime-local» es como el tipo anterior pero sin la zona horaria.
<input type="datetime-local" name="tiempolocal" id="tiempolocal">
- Tipo color: Además de los tipos de campo para la fecha y hora, existe otro tipo de campo que provee una interfaz predefinida similar para seleccionar colores.
Normalmente, el valor esperado para este campo es un número hexadecimal, por ejemplo #FF4000.
<input type="color" name="color" id="color">
Imágenes
Las imágenes son el elemento principal que confiere a la web su carácter de hipermedia, es decir, su capacidad de integrar en un único soporte, la página web, contenidos muy distintos como texto e imagen.
La etiqueta para insertar una imagen en HTML es <img>. La etiqueta <img> tiene dos atributos obligatorios, «src» indica la ruta en la que se encuentra la imagen, y «alt» el texto alternativo que se debe visualizar cuando la imagen cuando aún no se ha cargado o no se puede cargar.
La etiqueta <img> disfruta de los siguientes atributos, «width» y «height», para precisar las dimensiones de la imagen, el ancho y el alto.
<img src="tierra-espacio.png" width="800" height="400" alt="Tierra vista desde el espacio"/>
Esto mostrado es solo un comienzo, ya que en la actualidad HTML5 tiene más de 140 etiquetas disponibles. Por eso mi consejo es que sigáis aprendiendo y sobre todo practicando, practicando y practicando.
Si has llegado hasta aquí, tan solo darte las gracias por haber dedicado tu tiempo a leer este post dedicado a los conceptos básicos de HTML, si tienes cualquier duda o pregunta puedes ponerte en contacto conmigo, también decirte que puedes compartir este post y así hacer que más gente pueda leerlo y si ya te ha gustado mucho ¡Puedes invitarme a un café!
Comparte este contenido:
Deja una respuesta