Icono del sitio imacreste.com

Mi primera página web con HTML 5

Iñigo Mezo Alvarez

Crear tu primera página web en HTML5 es un paso fundamental para adentrarte en el mundo del desarrollo web. HTML5 es la última versión del lenguaje de marcado utilizado para estructurar contenido en la web.

Este artículo te guiará paso a paso para construir una página web básica, aprender la estructura mínima requerida y entender cómo agregar elementos visuales como encabezados, párrafos y otros componentes.

¿Cómo puedo ayudarte a conseguir más clientes online?

  • A corto plazo (Publicidad en Google, Facebook, e Instagram).
  • A medio plazo (SEO local).
  • A largo plazo (Posicionó tu web).
  • Diseño página web, tienda online o landing page, si es necesario.
  • Herramientas de seguimiento y medición.
  • Diversificación: Marketing de contenidos, mail marketing, redes sociales, alta en directorios, etc.
  • Automatiza con IA: Optimiza tareas y aumenta tu productividad.
Generador de leads

¿Qué es HTML5 y por qué es importante?

HTML5 es la versión más reciente del lenguaje de marcado que estructura el contenido en la web. Se introdujo para mejorar la funcionalidad de las páginas web y hacerlas más accesibles.

Con HTML5, se pueden integrar fácilmente multimedia, como vídeos y audios, sin la necesidad de plugins adicionales. Además, incluye nuevas etiquetas semánticas que facilitan el SEO y hacen que el código sea más limpio y comprensible para los desarrolladores.

Usar HTML 5 ofrece numerosas ventajas, entre las cuales destacan:

Requisitos para crear tu primera página web con HTML5

Para crear tu primera página web en HTML5, necesitas algunas herramientas y conocimientos básicos:

Antes de sumergirte en el desarrollo de tu página web, es útil tener una comprensión básica de algunos conceptos clave:

Estructura básica de una página web en HTML5

HTML5 ha simplificado la creación de páginas web con una estructura clara y eficiente. El código mínimo que necesita tu página incluye las siguientes etiquetas clave:

HTML5: Elementos estructurales

Los elementos estructurales de HTML5 sonimportantes, no solo en el diseño web, sino también para mejorar el posicionamiento en los motores de búsqueda.

Estos motores se vuelven cada vez más inteligentes, pero necesitan comprender la relevancia del contenido, y podemos facilitarles esta tarea etiquetando adecuadamente la información.

Las etiquetas para dar estrucutra al contenido son:

DIV

Es un elemento utilizado para agrupar contenido en bloques o capas, lo que permite aplicar estilos o ubicaciones a todo el conjunto, como, por ejemplo, alinear el contenido a la derecha.

Por sí sola, esta etiqueta no genera diseño ni estructura, por lo que es necesario combinarla con reglas de CSS.

Antes de usarla, es importante evaluar si es más conveniente optar por las etiquetas que se describen a continuación.

SPAN

Se utiliza para agrupar contenido dentro de un párrafo, lo que permite dar un diseño especial a un fragmento de texto específico.

HEADER

Permite definir cabeceras dentro de una página.

Pueden existir múltiples cabeceras:

1- una principal para la página, que incluye la navegación, el logotipo, el h1, etc.

2-En los artículos (etiqueta article), cada uno puede tener su propia cabecera.

Los elementos que pueden tener Header y Footer son:

FOOTER

Es muy similar al HEADER, pero se utiliza para el pie de página. Dentro del body, se emplea para definir la parte final de cada página, que incluye el copyright y otras informaciones, como información sobre el copyright, aviso legal, protección de datos, etc.

Los elementos que pueden tener Header y Footer son:

SECTION

Diseñado para reducir el uso excesivo de divs. Se debe usar para dividir un documento en diferentes secciones, como una sección de noticias y otra de productos, que a su vez pueden estar separadas en header, div y footer.

Si tenemos varios elementos de este tipo (lo cual es muy común), es recomendable usar aria-labelledby para identificarlos, por ejemplo:

<main> 
<h1>Título principal<h1>
<section aria-labelledby="seccion1"> 
<h2 id="seccion1">Título sección 1</h2> 
<p>Contenido</p>
</section> 
<section aria-labelledby="seccion2">> 
<h2 id="seccion2">Título sección 2</h2> 
<p>Contenido</p>
</section> 
</main>

NAV

Se utiliza para marcar una zona de enlaces, como el menú principal o los del sidebar (laterales) o del footer. Se puede incluir un nav dentro de header, footer, section y article.

Si hay varios elementos de este tipo, es recomendable usar aria-labelledby para identificarlos, como en el siguiente ejemplo:

<nav aria-labelledby="nav1"> 
  <h2 id="nav1">Menú navegación 1<h2>
  <ul>
    <li><a href="x.html">Enlace 1</a></li>
    <li><a href="x.html">Enlace 2</a></li>
    <li><a href="x.html">Enlace 3</a></li>
    <li><a href="x.html">Enlace 4</a></li>
  </ul>
</nav> 
<nav aria-labelledby="nav2"> 
  <h2 id="nav2">Menú navegación 2<h2>
  <ul>
    <li><a href="x.html">Enlace 5</a></li>
    <li><a href="x.html">Enlace 6</a></li>
    <li><a href="x.html">Enlace 7</a></li>
    <li><a href="x.html">Enlace 8</a></li>
  </ul>
</nav>

Si los menús se repiten, por ejemplo, en el lateral (sidebar) y en el footer, la etiqueta aria-labelledby debe tener el mismo nombre, ya que representan el mismo menú.

ARTICLE

Los articles son bloques de información, similares a las entradas de un blog, pero no se limitan a noticias; pueden incluir servicios, productos, enlaces a otras páginas, etc. La idea es que dentro de una sección haya diferentes articles, agrupados para una mejor organización.

HGROUP

Cuando hay varios encabezados seguidos, se deben agrupar con esta etiqueta.

<header>
   <hgroup><h1>Titular 1</h1><h2>Subtitulo noticia 1</h2></hgroup>
</header>

<header>
   <hgroup><h1>Titular 2</h1><h2>Subtitulo noticia 2</h2></hgroup> 
</header>

FIGURE

Si se tienen imágenes con título, descripción, copyright, etc., se debe agrupar todo el contenido relacionado con esa imagen bajo esta etiqueta.

<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Info de la imagen</figcaption>
</figure>

ASIDE

En ocasiones, al abordar un tema en una página, surge la necesidad de aclarar algo que no está directamente relacionado con el contenido principal. Para esto se utiliza esta etiqueta, que comúnmente se usa para establecer sidebars (laterales) con contenido más general.

Si hay varios elementos de este tipo, es recomendable usar aria-labelledby para identificarlos, como se muestra a continuación:

<aside aria-labelledby="sidebar1"> 
<h2 id="sidebar1">Título sidebar</h2> 
<p>Contenido sidebar</p>
</aside> 
<aside aria-labelledby="sidebar2"> 
<h2 id="sidebar2">ítulo sidebar</h2> 
<p>Contenido sidebar</p>
</aside>

MAIN

Se utiliza para establecer el bloque principal de la página, que debe explicar de qué trata el contenido que se está visualizando. Dentro de este bloque pueden incluirse etiquetas como: header, section, footer, article, etc.

Si hay varios elementos de este tipo, es recomendable usar aria-labelledby para identificarlos, como en el siguiente ejemplo:

<main aria-labelledby="title1"> 
<h1 id="sidebar1">Título 2</h1> 
<p>Contenido principal</p>
</aside> 
<aside aria-labelledby="title2"> 
<h1 id="sidebar2">Título 1</h1> 
<p>Contenido principal</p>
</aside>

FORM

Se utiliza para marcar un formulario.

<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="submit" value="Enviar">
</form>

Elementos básicos de un formulario en HTML:

<form action="html5-formularios.html" method="get">
<label form="nombre">Nombre:</label><label form="nombre">Nombre:</label> 
<input name="nombre" type="text"> 
<br><br>
<input type="submit" value="ENVIAR">
</form>

Form: Esta etiqueta define que estamos creando un formulario. Los atributos básicos son:

Label: Esta etiqueta relaciona los campos (inputs) con sus descripciones. Si tenemos dos campos, es necesario identificarlos para que el usuario sepa qué información debe ingresar en cada uno. El atributo «for» es de uso interno y se utiliza para identificar a qué campo se refiere el texto.

Input type=»text»: Los inputs son campos que el usuario debe completar.

Input type=»submit»:

Tipos de campos:

Algunos atributos:

Ejemplo:

<form action="html5-formularios.html" method="get" autocomplete>
<h3>text</h3>
<label form="nombre">Nombre:</label>
<input name="nombre" type="text" value="" readonly disabled size="40" maxlength="10" pattern="[A-Za-z]{3}" 
placeholder="First name">
<h3>radio</h3>
<input type="radio" name="gender" value="male" checked> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
<h3>select</h3>
<label form="cars">cars:</label>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<h3>textarea</h3>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<h3>datalist</h3>
<label form="nombre">Buscador:</label>
<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist> 
<h3>password</h3>
<label form="password">Keyword:</label>
<input type="password" name="psw" required> 
<h3>checkbox</h3>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car 
<h3>Color</h3>
<label form="color">Color:</label>
<input type="color" name="favcolor">
<h3>Fecha</h3>
<label form="date">Fecha:</label>
<input type="date" name="bday" min="2000-01-02">
<h3>datetime</h3>
<label form="datetime-">datetime:</label>
<input type="datetime-local" name="bdaytime">
<h3>email</h3>
<label form="email">email:</label>
<input type="email" name="email" autocomplete="off">
<h3>number</h3>
<label form="number">numero:</label>
<input type="number" name="quantity" min="1" max="25" step="3">
<h3>points</h3>
<label form="points">numero desde y hasta:</label>
<input type="number" name="points" min="0" max="100" step="10" value="30">
<h3>range</h3>
<label form="range">rango:</label>
<input type="range" name="points" min="0" max="10">
<h3>search</h3>
<label form="search">search:</label>
<input type="search" name="googlesearch">	 
<h3>time</h3>
<label form="time">Hora:</label>
<input type="time" name="usr_time">
<h3>url</h3>
<label form="url">url:</label>
<input type="url" name="homepage">
<h3>week</h3>
<label form="week">semana año:</label>
<input type="week" name="week_year">
<h3>file</h3>
<label form="fichero">ficheros:</label>
<input type="file" name="img" multiple>
<br><br>
<input type="submit" value="Submit">
</form>

Ver ejemplo formulario

Title y description

Title

Una página web se compone de varias páginas independientes accesibles mediante menús, enlaces y banners. Cada página tiene su propio código fuente, texto, imágenes y funcionalidad. Aunque visualmente similares, el contenido de cada página puede ser diferente.

El title identifica cada página. No se ve en la web, pero aparece en la pestaña del navegador y en los motores de búsqueda como Google. Debe ser claro y conciso, sin superar los 70 caracteres para garantizar una buena visualización.

El title es clave para el SEO, ya que ayuda a los buscadores a identificar el contenido de la página y posicionar palabras clave adecuadas. Es fundamental conocer a nuestros clientes y las palabras que utilizan para incluirlas en los titles.

Description

La meta descripción funciona de manera similar al title, con una extensión máxima de aproximadamente 150 caracteres. Aunque su relevancia para el posicionamiento en buscadores es menor, su impacto en la tasa de clics es significativo, ya que representa el texto que aparece debajo de la URL en los resultados de búsqueda.

<meta name="description" content="Expertos en diseño web en Bilbao. Ofrecemos desarrollo en WordPress, Prestashop y soluciones personalizadas. Solicite un presupuesto sin compromiso." />

Otras etiquetas de HTML5

<article>
<h1>Título</h1>
<p>Publicado el <time datetime="2017-07-21T22:10:00" pubdate>21 de Julio a las 22:10</time></p>
</article>
<menu type="toolbar">
    <li>Diseño Web</li>
    <li>Programación Web</li>
    <li>Desarrollo PHP</li>
</menu>
<details>
  <summary>Cuentas año 2015.</summary>
  <p> - Primer trimestre X</p>
  <p>Durante el primer trimestre se a obtenido...</p>
</details>
<p>Si queremos poner un enlace usaremos la etiqueta <mark>a</mark>.</p>
<ol reversed>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
<li>Lista 4</li>
<li>Lista 5</li>
</ol>
<p><a download href="pagina.pdf">Descargar</a></p>
<p><a ping="ping.php" href="pagina.html">Guardar en base de datos el clic.</a></p>

En este ejemplo al hacer clic en el enlace se ejecutara el fichero ping.php, el que podemos usar por ejemplo para guardar estadísticas de clic, actualizar un excel, o mandar un mail informativo.

<img src="ejemplo.jpg" data-autor="imacreste" />

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
<script>
$("#imagen").click(function() {    
var autor = this.getAttribute("data-autor");  
alert("El autor es: " + autor + "."); }); 
</script>

Editar el texto desde el navegador

Para que el usuario pueda editar un texto desde el navegador, hasta ahora era necesario añadir un formulario, que rellene los datos y envié la información. Ahora podemos hacerlo desde un párrafo, o un encabezado, veamos como:

<p contenteditable="true" spellcheck="false">Lorem Ipsum es simplemente el texto de relleno 
de las imprentas y archivos de texto. Continuacion...</p>

Arrastrar contenido HTML

Otra posibilidad que se ha mejorado y facilitado mucho es poder crear bloques que se puedan arrastrar.

<p>Lorem Ipsum es simplemente el texto de relleno <span draggable="true">de las imprentas y</span> 
archivos de texto.</p>

Si pasamos el ratón veremos cómo al pasar por encima de la etiqueta con el atributo cambia a flechita que indica que se puede mover, aunque para que sirva para algo se necesita javascript que veremos en otra entrada.

Evitar que un texto sea traducido

Actualmente es bastante frecuente que los usuarios tengan instalado un traductor en su navegador y que eso facilite la lectura de textos en otros idiomas, pero imagina que tenemos una página de un libro en el cual su título es importante que sea en el idioma de origen, y por tanto necesitamos que no sea traducido por estas herramientas, debemos usar el atributo translate de la siguiente forma.

<p>Lorem Ipsum es simplemente el texto de relleno <span translate="no">de las imprentas y</span> 
archivos de texto.</p>

Configuración del entorno de desarrollo

Para desarrollar tu primera página web de manera efectiva, es recomendable configurar un entorno de desarrollo local. Esto te permitirá probar tu código de manera eficiente sin necesidad de subirlo a un servidor en línea. Aquí te mostramos cómo hacerlo:

  1. Elige un software de servidor local: Las opciones más comunes son:
    • WAMP (Windows, Apache, MySQL, PHP): Ideal para usuarios de Windows, WAMP incluye todo lo que necesitas para ejecutar aplicaciones web.
    • MAMP (Macintosh, Apache, MySQL, PHP): Similar a WAMP, pero diseñado para usuarios de Mac.
    • XAMPP: Una opción multiplataforma que funciona tanto en Windows como en Mac y Linux.
  2. Descarga e instala el software: Ve al sitio web oficial del software que elijas y descarga la versión correspondiente a tu sistema operativo. Sigue las instrucciones de instalación.
  3. Configura tu servidor: Una vez instalado, abre el panel de control del servidor y asegúrate de que el servidor Apache esté en funcionamiento. Esto te permitirá acceder a tu página web localmente a través de http://localhost.
  4. Crea tu carpeta de proyecto: En la ruta de instalación del servidor local, busca la carpeta www (WAMP) o htdocs (MAMP/XAMPP). Crea una nueva carpeta para tu proyecto, por ejemplo, mi-primera-pagina-web.

Elegir un editor de código

Un buen editor de código puede hacer que tu experiencia de desarrollo sea mucho más fácil y eficiente. Considera las siguientes opciones:

Al elegir un editor, busca uno que se adapte a tus preferencias y estilo de trabajo.

Estructura de una página web en HTML 5

Al crear una página web en HTML 5, es esencial entender la estructura de archivos y carpetas que utilizarás. A continuación se presentan los archivos y carpetas más importantes:

  1. Archivo index.html: Este es el archivo principal de tu página web. Cuando alguien visita tu sitio, el navegador busca este archivo por defecto. Es aquí donde escribirás tu código HTML.
  2. Archivo style.css: Este archivo se utiliza para definir el estilo visual de tu página web. Puedes modificar colores, fuentes, márgenes y más utilizando CSS. Asegúrate de vincularlo a tu archivo HTML para que los estilos se apliquen correctamente.
  3. Carpeta img/: Es recomendable crear una carpeta para almacenar todas tus imágenes. Mantener tus recursos organizados te facilitará el acceso y la gestión.
  4. Archivo script.js (opcional): Si planeas añadir interactividad a tu página web con JavaScript, considera crear un archivo separado para tus scripts. Esto ayudará a mantener tu código HTML limpio y organizado.

Creando tu primer archivo HTML

Ahora que conoces los archivos y carpetas clave, es hora de crear tu primer archivo HTML. Sigue estos pasos:

Para empezar, abre tu editor de texto, escribe el código básico de HTML5 y guarda el archivo con la extensión .html. Por ejemplo, guárdalo como index.html. Asegúrate de que el tipo de archivo sea «Todos los archivos» o «UTF-8» en tu editor.

Comienza a agregar contenido usando las etiquetas básicas y otras como <h1> para el título principal, h2 para un subtítulo, <p> para los párrafos, y <strong> para resaltar texto. Por ejemplo:

<!DOCTYPE HTML>
<html lang="es-ES">
 <head>
  <meta charset="utf-8" />
  <title>Título de la web</title>
<meta name="description" content="Descripción del contenido de la página." /> 
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
  <h1>Títular</h1>
  <h2>Subtitulo</h2>
  <p>párrafo de <strong>prueba</strong></p>
  <script src="script.js"></script> </body>
</html>

Guarda el archivo y ábrelo en tu navegador escribiendo http://localhost/carpeta-del-archivo/index.html en la barra de direcciones. Deberías ver tu primera página web en acción.

Añadir estilos y funcionalidades (Scripts)

Para que tu página web sea más interactiva y visualmente atractiva, necesitarás incluir scripts y estilos adicionales. Aquí te explicamos cómo hacerlo correctamente:

  1. Vinculación de archivos CSS: Para aplicar estilos a tu página web, debes vincular tu archivo style.css en la sección <head> de tu archivo HTML. Si aún no lo has hecho, asegúrate de que el siguiente código esté presente:
   <link rel="stylesheet" href="style.css">
  1. Inclusión de scripts JavaScript: Si decides utilizar JavaScript, puedes agregar tus scripts en la parte inferior del archivo index.html, justo antes de la etiqueta de cierre </body>. Esto es recomendable para que el contenido HTML se cargue antes de que se ejecute el script, mejorando así el rendimiento de la página. Aquí tienes un ejemplo:
   <script src="script.js"></script>
  1. Usar CDNs (Content Delivery Networks): Para librerías populares como jQuery, puedes incluirlas directamente desde un CDN. Por ejemplo, para jQuery, puedes agregar lo siguiente antes de tu propio script:
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Incorporación de imágenes y multimedia

El uso de imágenes y contenido multimedia puede enriquecer la experiencia del usuario en tu página web. A continuación, te mostramos cómo hacerlo:

  1. Insertar imágenes: Para agregar una imagen a tu página, usa la etiqueta <img>. Asegúrate de que la imagen esté en la carpeta img/ que creaste anteriormente. Aquí tienes un ejemplo:
   <img src="carpeta-img/imagen.jpg" alt="Descripción de la imagen">

2. Incluir vídeos: Puedes añadir vídeos directamente a tu página utilizando la etiqueta <video>. Por ejemplo:

   <video controls>
       <source src="carpeta-video/video.mp4" type="video/mp4">
       Tu navegador no soporta el elemento de video.
   </video>

Esto permitirá a los usuarios reproducir el vídeo directamente desde tu página.

3. Incluir audios: Puedes añadir audios directamente a tu página utilizando la etiqueta <audio>. Por ejemplo:

<audio controls>
<source src="tiburon.mp3" type="audio/mp4">
</audio>

3. Incluir diseños gráficos con CANVA: El elemento canvas permite crear un entorno para realizar dibujos, incluyendo la posibilidad de generar efectos dinámicos. Su implementación es sencilla; solo es necesario definir las dimensiones del lienzo:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
El navegador que usas no soporta html5.
</canvas>

En este caso, se añade un borde y un mensaje alternativo para aquellos navegadores que no son compatibles con HTML5.

A partir de este momento, es posible comenzar a dibujar utilizando JavaScript. El script siempre debajo de la etiqueta canva. Por ejemplo, procederemos a crear un círculo:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

Un ejemplo avanzado sería un reloj diseñado con HTML5.

<canvas id="canvas2" width="400" height="400" style="border:1px solid #d3d3d3;">
El navegador que usas no soporta html5.
</canvas>
<script>
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

Ver ejemplo reloj con HTML5

Uso de CSS para estilizar tu web

CSS (Cascading Style Sheets) es la herramienta clave para mejorar la apariencia de tu página web. A continuación, te mostramos cómo empezar a estilizar tu página con algunas propiedades básicas:

  1. Seleccionar elementos: En tu archivo style.css, puedes seleccionar elementos HTML para aplicar estilos. Por ejemplo:
   body {
       background-color: #f2f2f1; /* Color de fondo */
       font-family: Arial, sans-serif; /* Tipo de fuente */
       color: #555; /* Color del texto */
   }

   p#intro {
       color: #115bff; /* Color del encabezado */
       text-align: center; /* Alineación del texto */
   }

   h2.estilo {
       line-height: 1.5; /* Espaciado entre líneas */
       margin: 2rem; /* Margen alrededor del párrafo */
   }
  1. Estilizar clases y IDs: Puedes crear clases e IDs para aplicar estilos específicos a ciertos elementos. Por ejemplo:
   <h2 class="estilo">Subtítulo con estilo</h2>
   <p id="intro">Esto es un párrafo</p>
  1. Usar medidas responsivas: Para que tu página web sea accesible en dispositivos de diferentes tamaños, utiliza unidades como porcentajes (%) o vw y vh (viewport width y viewport height) en lugar de píxeles. Esto asegurará que tu diseño sea flexible.

Añadir fuentes

La selección de la tipografía para un sitio web es un aspecto fundamental que impacta tanto en la estética como en la usabilidad. Generalmente, se recomienda utilizar una o, en el mejor de los casos, dos fuentes a lo largo de la página, ya que un exceso de tipografías puede generar confusión y dificultar la lectura.

Para establecer la fuente deseada, contamos con dos opciones principales:

Fuentes por defecto: Estas son las fuentes estándar disponibles en la mayoría de los sistemas operativos, tales como Arial, Helvetica, sans-serif y Verdana. Su implementación es sencilla y directa. Por ejemplo, para definir la fuente de los párrafos en CSS, se puede utilizar el siguiente código:

p {
    font-family: Arial, Helvetica, sans-serif;
}

En este caso, la fuente predeterminada es Arial; si el navegador no la encuentra, utilizará Helvetica y, en última instancia, una fuente sans-serif. Estas tipografías son muy similares y ampliamente utilizadas.

Fuentes personalizadas: Estas pueden ser gratuitas o de pago, y es posible encontrarlas en plataformas como Google Fonts. En este contexto, existen dos enfoques para integrar fuentes personalizadas en un sitio web:

@font-face {
font-family: 'fuente';
src: url(carpeta/fuente.eot);
src: url(carpeta/fuente.svg);
src: url(carpeta/fuente.ttf);
}
@font-face {
font-family: 'fuenteBold';
src: url(carpeta/PfennigBold.eot);
src: url(carpeta/PfennigBold.svg);
src: url(carpeta/PfennigBold.ttf);
}

En este ejemplo, se cargan dos variantes de la misma fuente: una normal y otra en negrita. Si se desea utilizar cursivas, es necesario descargar e instalar esa variante adicionalmente. A partir de este momento, la fuente se puede utilizar en el CSS con la siguiente regla:

p {
font-family: fuente;
}

Integración de Google Fonts: Para agregar una fuente de Google Fonts sin necesidad de descarga, se debe buscar la tipografía deseada, seleccionar la opción para añadirla haciendo clic en el botón correspondiente en la parte superior derecha, y revisar las fuentes añadidas en la sección «family selected».

Google Fonts proporcionará un enlace que debe incluirse en las páginas donde se desee utilizar la fuente. Es recomendable limitar la carga de esta línea a las páginas específicas que la necesiten, para optimizar la velocidad de carga y evitar penalizaciones en el rendimiento SEO. Un ejemplo del enlace a incluir sería:

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Y para aplicar la fuente:

p {
    font-family: Lato;
}

Es importante tener en cuenta que no todas las fuentes ofrecen soporte para caracteres latinos. Además, si se requiere utilizar variantes como negritas o cursivas, se debe verificar que la tipografía elegida sea compatible con estos estilos.

La elección adecuada de la tipografía no solo mejorará la estética de la web, sino que también contribuirá a una experiencia de usuario más satisfactoria.

Uso de javascript para dar interacción a tú web

JavaScript es un lenguaje de programación que se utiliza principalmente para hacer que las páginas web sean interactivas y dinámicas. Es uno de los tres pilares fundamentales del desarrollo web, junto con HTML y CSS.

Mientras que HTML estructura el contenido y CSS lo estiliza, JavaScript permite manipular el contenido y responder a las acciones del usuario.

Ejemplo práctico: Cambiar el color de un elemento al hacer clic

A continuación, te muestro un ejemplo práctico donde usaremos JavaScript para cambiar el color de un encabezado al hacer clic en él.

HTML: Crea un archivo index.html con el siguiente contenido:

   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Ejemplo de JavaScript</title>
       <style>
           h1 {
               color: blue; /* Color inicial del encabezado */
           }
       </style>
   </head>
   <body>
       <h1 id="miEncabezado">Haz clic en mí para cambiar mi color</h1>
       <script src="script.js"></script>
   </body>
   </html>

JavaScript: Crea un archivo script.js con el siguiente contenido:

   // Selecciona el encabezado por su ID
   const encabezado = document.getElementById("miEncabezado");

   // Añade un evento de clic al encabezado
   encabezado.addEventListener("click", function() {
       // Cambia el color del encabezado
       encabezado.style.color = encabezado.style.color === "blue" ? "red" : "blue";
   });

Usabilidad y accesibilidad en el diseño web

La usabilidad se refiere a lo sencillo que es para los visitantes navegar por el sitio y utilizar sus funciones.

Para mejorar la usabilidad, puedes:

  1. Simplifica la navegación con menús claros.
  2. Utiliza un diseño coherente en todas las páginas.
  3. Asegúrate de que el contenido sea fácil de leer.
  4. Optimiza la velocidad de carga del sitio.
  5. Realiza pruebas de usuario para identificar áreas de mejora.
  6. Usar la técnica de card sorting que consiste en clasificar y organizar información de manera colaborativa utilizando tarjetas físicas o virtuales.

La accesibilidad busca garantizar que todas las personas, incluidas aquellas con discapacidades, puedan acceder y comprender el contenido.

Para mejorar la accesibilidad, puedes:

  1. Utiliza texto alternativo para imágenes.
  2. Asegúrate de que el contraste entre el texto y el fondo sea adecuado.
  3. Implementa subtítulos en vídeos.
  4. Facilita la navegación mediante teclado.
  5. Proporciona descripciones claras y concisas del contenido.

Ambos elementos son importantes porque fomentan la inclusión y permiten que un mayor número de usuarios interactúe con el sitio, mejorando su eficacia y el alcance del mensaje.

Pruebas y solución de problemas

Una vez que hayas desarrollado tu página web, es crucial probarla para asegurarte de que funcione correctamente. Aquí hay algunos pasos a seguir:

  1. Verificar el Código: Utiliza herramientas como el Validador de HTML del W3C para asegurarte de que tu código HTML sea válido y no contenga errores.
  2. Probar en Diferentes Navegadores: Abre tu página en diferentes navegadores (Chrome, Firefox, Edge) para verificar que se vea y funcione como esperas en cada uno.
  3. Revisar la Responsividad: Asegúrate de que tu diseño se vea bien en diferentes tamaños de pantalla. Puedes usar las herramientas de desarrollo en los navegadores para simular diferentes dispositivos.
  4. Recoger Feedback: Si es posible, pide a amigos o colegas que revisen tu página web y ofrezcan comentarios. Esto puede ayudarte a identificar problemas que quizás no hayas notado.

Preguntas frecuentes

¿Necesito conocimientos previos en programación para crear una página web?

No es necesario tener conocimientos previos en programación. HTML 5 es un lenguaje accesible para principiantes, y con un poco de práctica, podrás crear tu propia página web.

¿Puedo usar HTML 5 para crear páginas web?

Sí, HTML 5 es ideal para crear aplicaciones web interactivas. Junto con CSS y JavaScript, puedes desarrollar aplicaciones ricas en funcionalidades.

¿Qué debo hacer si mi página web no se ve bien en dispositivos móviles?

Asegúrate de utilizar un diseño responsivo y prueba tu página en diferentes dispositivos. También puedes utilizar media queries en CSS para ajustar el diseño según el tamaño de pantalla.

¿Dónde puedo alojar mi página web una vez que esté lista?

Hay múltiples opciones de alojamiento web, tanto gratuitas como de pago. Algunas opciones populares incluyen GitHub Pages, Netlify, hostinger, y Bluehost.

Conclusión y consejos

Crear tu primera página web con HTML 5 es un proceso emocionante que abre las puertas a un mundo de posibilidades en el desarrollo web. Te dejo unos consejos finales:

  1. Practica Regularmente: Cuanto más practiques, más cómodo te sentirás con HTML 5 y CSS. Trata de crear diferentes tipos de páginas y experimenta con elementos multimedia.
  2. Mantente Actualizado: El desarrollo web está en constante evolución. Suscríbete a blogs, sigue tutoriales y participa en comunidades para aprender sobre las últimas tendencias y tecnologías.
  3. Utiliza Recursos en Línea: Hay numerosos recursos gratuitos y pagos en línea que pueden ayudarte a mejorar tus habilidades. Plataformas como freeCodeCamp, Codecademy, y W3Schools son excelentes lugares para comenzar.
  4. No temas pedir ayuda: Si te encuentras con problemas, hay muchas comunidades en línea, como Stack Overflow, donde puedes hacer preguntas y recibir apoyo de otros desarrolladores.
  5. Diviértete: Finalmente, recuerda que crear una página web debe ser una experiencia agradable. Diviértete explorando tu creatividad y expresándote a través del diseño y desarrollo web.
Compartir entrada:

Publicaciones relacionadas:

  1. Temas WordPress ¿Qué son?
  2. Introducción a los filtros en jQuery
  3. Editar una pagina web desde el navegador Chrome
  4. Optimización de página web – Solucionar problemas Core Web Vitals
  5. ¿Cómo hacer una migración de una página web sin perder posicionamiento web?
Salir de la versión móvil