HTML básico en 4 pasos + Ejemplos prácticos

Introducción 

Actualmente son millones de empresas las que se dedican a hacer páginas webs para clientes finales. Como cliente final de estas empresas, dejar tu negocio en manos de un tercero tiene sus cosas buenas y sus cosas no tan buenas. En Cimas Digital además de ayudarte aportando el tiempo que te falta para crear tu sitio web, en este post queremos ayudarte en tus primeros pasos en el mundo de la programación web.

 

Ahora bien, ¿cómo puedo hacer yo una página web?, ¿qué tecnologías debo utilizar?, ¿cuál de ellas debo estudiar primero? La respuesta a estas preguntas no es tan complicada. La tecnología principal que se utiliza en el diseño web es HTML (HyperText Markup Language) y en este post vamos a enseñarte lo necesario para dominar este lenguaje con unos sencillos pasos y ejemplos para que puedas llevarlo a la práctica.

¿Qué es HTML?

HTML o Lenguaje de Marcas de Hipertexto es un lenguaje de marcas basado en etiquetas o tags que sirve para ordenar y maquetar el contenido de una página web.

 

¿Por qué es importante el HTML? 

La maquetación de una web es más importante de lo que te imaginas ya que de ello depende la facilidad con la que los usuarios interactúan con una página web, el posicionamiento web, etc.

 

Primeros pasos con HTML

No necesitamos un curso entero, ni todo un mes de tutoriales para entender estos 4 sencillos pasos. Con ellos, vas a aprender todo lo necesario para crear tu primera pagina con html5 y así comenzarás a sumergirte en el maravilloso mundo del programación web. 

 

Paso 1 : Etiquetas

 

Todo el contenido de nuestra web está englobado en etiquetas, por tanto, si queremos poner un título, una imagen, un enlace… debemos meterlo entre una etiqueta de apertura y una de cierre. Toda etiqueta debe comenzar con el símbolo “<y terminar con el símbolo “/>. Para verlo más claro, ahí va el primer ejemplo:

<h1>Esto es una prueba</h1> Vista interior de la página web (esto sería lo que el usuario no ve).

Esto es una prueba Vista real de la página web (lo que ve realmente el usuario).

 

Este ejemplo se divide en 2 partes: Las etiquetas y el contenido. Tenemos una etiqueta de apertura ”<h1>” y una etiqueta de cierre “</h1>”  y dentro de estas etiquetas encontramos el contenido que el usuario verá en la página web, en el caso del ejemplo, un título para la web. Si abrimos una etiqueta siempre debemos cerrarla una vez hayamos terminado de crear su contenido. 

Además de la etiqueta de título (primer ejemplo), en HTML encontrarán muchas más etiquetas diferentes. Algunas de ellas son: 

 

  • <img>: Etiqueta de imágenes. Esta etiqueta siempre lleva el atributo “src” donde se debe poner la ruta o enlace a la imagen que queremos mostrar al usuario. Ejemplo:

<!–  Imagen que se encuentra en la misma ruta que nuestro archivo .html →

<img src=»imagen.png»  />

<!– Imagen que se encuentra en una página de internet →

<img src=»https://cimasdigital.com/images/prueba.png»/>

 

  • <h1>, <h2>, <h3>: Etiquetas para títulos. Cuanto más pequeño sea el número, más grande es el título. Ejemplo:

 

<h1>Esto es una prueba</h1>

<h2>Esto es una prueba</h2>

<h3>Esto es una prueba</h3>

<h4>Esto es una prueba</h4>

 

 

  • <a>: Etiquetas para enlaces. Se utilizan para crear enlaces en nuestra web y siempre llevan el atributo href. Ejemplo:

 

<a href=”https://cimasdigital.com”> Enlace a CimasDigital </a>

El usuario lo vería de la siguiente manera: Enlace a Cimas Digital

Las palabras en azul son clicables, es decir, si el usuario hace clic ahí se le redirigirá a la web.

 

 

  • <p>: Etiquetas  para párrafos. Sirve para crear párrafos. Cuando estamos creando una web tenemos que utilizar diferentes títulos y párrafos y en HTML habrá que especificar cada uno según sus etiquetas.

 

<p> Esto es una párrafo de prueba </p>

 

 

  • <div>: Son cajas para separar información dentro nuestra página y poder manejarla con más facilidad a la hora de crear estilos sobre ellos o poder moverlas a nuestro gusto.

 

<div>

<h1>Esto es una caja con un título</h1>

</div>

 

Si quieres ampliar información sobre las etiquetas de HTML existentes puedes echar un vistazo a esta página web en la que vas a encontrar todas las etiquetas que existen en estos momentos para htm5 y una pequeña de descripción de cada una para saber en qué momento utilizarlas.

 

Paso 2: Atributos

 

Los atributos sirven para configurar las etiquetas html a nuestro gusto o configurar valores adicionales como la ruta o el enlace donde se encuentra nuestra imagen, el enlace donde nos debe redirigir nuestra página al pulsar sobre un texto, etc. 

Los atributos van englobados dentro de las etiquetas y los parámetros de dichos atributos siempre en comillas : ””. Ejemplo:

<p  id=”Prueba > Esto es una prueba </p>

En este ejemplo lo que se encuentra en negrita sería nuestra etiqueta (en este caso un párrafo), que como hemos explicado antes siempre lleva una etiqueta de apertura y otra de cierre. Lo que se encuentra en color rojo es el atributo, dicho atributo se compone de 2 partes: 

 

  • id= : nombre del atributo seguido del símbolo “=”. Todo atributo debe empezar siempre de la misma manera, lo único que cambia es el nombre del atributo dependiendo del que queramos usar. 

 

  • “” : Las comillas dobles o simples (se pueden utilizar las 2) sirven para englobar el valor que contiene el atributo. El valor siempre debe ir englobado entre comillas ya que si no ponemos las 2 comillas se producen errores y el resultado puede no ser el deseado. 

 

A continuación veréis un ejemplo de una etiqueta con 2 atributos para explicar mucho mejor lo que hemos comentado anteriormente.

<img src=»imagen.png» alt=»imagen de prueba» />

El ejemplo mostrado es una imagen con 2 atributos, el primero (src) se utiliza para poner la ruta donde se encuentra imagen. En este caso la imagen se encuentra en la misma carpeta que nuestro archivo html. 

El segundo, es un atributo para describir una imagen mediante un texto. Los atributos siempre deben ir separados mediante un espacio de su etiqueta html o de su siguiente atributo si tuviera varios. Los parámetros del atributo siempre deben ir entre comillas.

En este enlace se encuentran todos los atributos que pueden llevar las etiquetas html y para qué se debe usar cada uno de ellos.

 

Paso 3: Estructura

 

Para que un usuario vea una página html correctamente en cualquier navegador debe tener una estructura determinada. Esta estructura está basada en 3 etiquetas principales: html, head, body. Ejemplo de una estructura principal: 

 

<html>

    <head></head>

    <body></body>

</html>

 

Como podéis ver en el ejemplo anterior, una etiqueta puede tener una o varias etiquetas en su interior. Se pueden anidar tantas etiquetas como queramos siempre y cuando todas las etiquetas hijas estén cerradas.

Para que podáis ver lo correcto y lo que no es correcto, os dejamos un ejemplo de una estructura mal planteada. Esto llevará a error y a no poder visualizar la web.

<html>

<head>

</html>

 

Tenemos una etiqueta padre (html) y una etiqueta hija (head). 

 

!!! IMPORTANTE !!!

Si la etiqueta hija no está cerrada antes de cerrar el padre, se producirá un fallo y no se verá el contenido de nuestra web. Para ello debemos cerrar todas las etiquetas hijas antes de abrir otra etiqueta o cerrar el propio padre.

 

HTML

 

Es la etiqueta principal y donde se engloba todo el contenido de la página web. No tiene atributos y simplemente debemos poner una etiqueta de apertura al principio y una cierre al final de nuestro archivo.

 

head

 

La etiqueta head sirve para dar información a nuestra página como puede ser el título, el idioma de la página web o para referenciar archivos y utilizar su contenido dentro del html. Las etiquetas más utilizadas para la cabecera son: 

  • <meta> : Sirve para entregar información a los navegadores sobre el contenido de nuestra página.
  • <link> : sirve para añadir archivos a nuestra página.
  • <title> : título principal de nuestra página.

 

body

 

En esta etiqueta es donde vamos a englobar todo el contenido que queremos que vean nuestro usuarios como, por ejemplo, las imágenes, los textos, los enlaces, etc. El body también se debe estructurar. Si estructuramos nuestra web trabajamos de forma más fácil y rápida a la hora de crear o modificar contenido porque sabemos en todo momento en el bloque que estamos trabajando. Estos bloques se dividen en: 

  • Cabecera <header> : Parte superior de nuestra página en donde normalmente se engloba el nombre y el logo de nuestra empresa.
  • Menú <nav>: Menú de navegación para interactuar por nuestra web. 
  • Contenido principal <article>: En esta sección englobamos toda la información de nuestra web.
  • Pie de página <footer>: contacto, ubicación, política de cookies etc.

 

Paso 4: Útiles

 

Existen muchas herramientas para que el desarrollo de una página web sea mucho más sencillo. Estas herramientas son editores de código que automatizan tareas como cerrar etiquetas, detectar fallos, etc.

A nosotros la que más me gusta es Visual Studio Code. Os dejamos un enlace directo donde se puede descargar. Es totalmente gratuito y tiene muchos plugins para cualquier tipo de lenguaje de programación.

También existen millones de páginas donde poder ver ejemplos por si te atascas con tu desarrollo. No dudes nunca en buscar en Google porque seguro que alguien ha tenido tu mismo problemas (lo decimos por experiencia), y si sabes inglés será mucho mejor que busques la información en ese idioma porque encontrarás un flujo de información mucho mayor. 

Os dejamos varios enlaces que os pueden servir de gran ayuda:

 

Por último, os dejamos algunos ejemplos para que puedas practicar.

 

Ejemplos prácticos

En este apartado realizaremos una batería de ejercicios para que comiences tu andadura en html. Son ejercicios básicos en los que crearemos nuestra primera página html e iremos añadiendo información como título de la página, imágenes, listas, etc. Es importante que sigas los ejercicios por el orden en que están presentados ya que alguno de ellos pueden depender del anterior.

 

Ejercicio 1

 

En este primer ejercicio realizaremos nuestra primera página html. Lo más recomendable es crear una carpeta donde vamos a guardar el archivo y las imágenes a utilizar. 

Pulsamos: Botón derecho  > Nuevo > Documento de texto. Cambiamos el nombre del archivo y su extensión por: index.html.

Para ello es recomendable que actives la configuración que permite ver las extensiones de los archivos. Dentro de nuestra carpeta pulsamos en Archivo > Opciones > Ver. 

Nos aparece la ventana de la imagen, el check marcado en color amarillo debe estar deshabilitado. Una vez tengamos nuestro archivo creado, lo recomendable es abrirlo con un editor de código ya que trabaja mucho mejor visualmente. Ahora vamos a crear las 3 etiquetas principales de una página html: html, head y body.

 

Nuestras etiquetas deben quedar así:

<html>

    <head>  

    </head>

    <body>

</body>

</html>

 

Por último vamos crear un título para nuestra página. Para el título utilizaremos la etiqueta title que se encuentra dentro de nuestro head.

<html>

   <head>

      <title> Ejercicios Cimas Digital

   </head>

   <body>

 

   </body>

</html>

 

Una vez hemos acabado con el ejercicio, pulsamos doble click sobre nuestro archivo y se debería abrir nuestro navegador mostrando lo siguiente:

Como se puede ver en la imagen la pestaña contiene el título que hemos puesto en el head. En mi caso Ejercicios Cimas Digital.

 

Ejercicio 2

 

En este ejercicio vamos aprender a crear título de diferentes tamaños. Si hemos realizado el ejercicio anterior ya tendremos una página html sobre la que trabajar.

Abrimos nuestro archivo y dentro de la etiqueta body creamos una etiqueta h1 con el título que deseamos poner, en mi caso Hola Mundo.

      <body>

       <h1>Hola Mundo</h1>

   </body>

 

Una vez realizamos el ejercicio abrimos el archivo y el resultado debe ser el siguiente:

Realiza el ejercicio el ejercicio con todos los h que existen (h1, h2, h3, h4, h5, h6) y podrás comprobar el tamaño de cada de ellos en tu página para usarlos a tu gusto. Realiza el ejercicio despacio y cerrando bien todas las etiquetas. Inténtalo tu mismo antes de mirar la solución. El resultado debe parecerse a lo siguiente:

 

Solución

<html>

   <head>

       <title>Ejercicios Cimas Digital</title>

   </head>

   <body>

       <h1>Hola Mundo</h1>

       <h2>Hola Mundo</h2>

       <h3>Hola Mundo</h3>

       <h4>Hola Mundo</h4>

       <h5>Hola Mundo</h5>

       <h6>Hola Mundo</h6>

   </body>

</html>

 

Ahora vamos a meter una foto a nuestra página. Para seleccionamos la foto que queremos incluir y la introducimos en la carpeta donde se encuentra nuestra página.

Entramos en el código de nuestra página y creamos un etiqueta img con un atributo src con el nombre de nuestra imagen.

<img src=»CimasDigital.jpg» />

Abrimos nuestra página y el resultado debe ser el siguiente:

Por último vamos a crear una lista de elementos no ordenadas y un enlace a nuestra página. Para ellos debemos crear la etiqueta ul, en caso de que la lista sea ordenada la etiqueta será ol. Dentro de dicha etiqueta vamos a crear una etiqueta li para cada fila de nuestra lista. 

<ul>

<li>Primero</li>

<li>Segundo</li>

</ul>

Ahora vamos a crear un Enlace a Cimas digital. Para ello creamos una etiqueta a con un atributo href donde pondremos el enlace de la página y el nombre que queremos que vean los usuarios a pulsar sobre el.

<a href=»http://cimasdigital.com/»>Cimas Digital</a>

El aspecto final de vuestra página tras realizar todos los pasos del ejercicio debe ser este:

 

 

Y hasta aquí el primer post de Cimas Digital. Esperamos que os haya gustado tanto como a nosotros poder daros este primer empujón hasta el mundo de la programación. Podéis dejarnos en comentarios todas las dudas que queráis que os resolvamos.

¡Darle mucha caña!

 

 

 

¡Vota!
1 Comentario
  • Un comentarista de WordPress
    Publicado a las 19:02h, 08 febrero Responder

    Hola, esto es un comentario.
    Para empezar a moderar, editar y borrar comentarios, por favor, visita la pantalla de comentarios en el escritorio.
    Los avatares de los comentaristas provienen de Gravatar.

Deja un comentario

Pin It on Pinterest

Este sitio web utiliza cookies tanto propias y de terceros para analizar sus navegación y ofrecerle un servicio más personalizado y publicidad acorde a sus intereses. Continuar navegando implica la aceptación de nuestra Política de Cookies. Saber más

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar