Cómo crear una página web en HTML: los códigos más necesarios

Por Felipe

Publicado en:

El desarrollo web ha evolucionado muchísimo desde sus orígenes, han nacido
varios lenguajes que nos permiten programar para la web, sin embargo, si
quieres comenzar a introducirte en este mundo, debes dar los primeros pasos y
empezar por aprender cómo hacer una página web en HTML.
A continuación, te vamos a dar una pequeña introducción básica de los
códigos para crear una página web en HTML.

 

 

El esqueleto de tu web

Para comenzar a crear una página web, lo primero que tienes que hacer es abrir tu editor de texto favorito (uno muy recomendado es Notepad++), crea a continuación un nuevo archivo y copia y pega el siguiente código:

<DOCTYPE html>

<head>

<title>Este es el título de mi web</title>

</head>

<body>

Bienvenido a mi sitio

</body>

</html>

 

La etiqueta <html> es obligatoria y te permite indicar que estás codificando en este lenguaje de marcado. La etiqueta <head> se utiliza para dar detalles al navegador sobre el contenido de la página. Almacena, por ejemplo, los metadatos que los motores de búsqueda necesitan para el SEO del sitio, como la descripción, las palabras clave o el tipo de codificación para los caracteres. Por su parte, la etiqueta <body> alberga todo el contenido visual, es decir, lo que se va a mostrar al usuario.

Tras guardar el archivo con la extensión .html, ya podrás abrirlo con un navegador, no obstante, esto tan solo es el esqueleto de tu primera página web, aún queda mucho trabajo para lograr que muestre todo lo que quieres.

 

Los códigos más comunes para crear una página en
HTML

Una vez que hemos aprendido las etiquetas que debe contener el esqueleto de
nuestra web, pasamos a conocer otros códigos comunes para crear una página
web. Algunas de las etiquetas más importantes son:

 

 

<ul>

<li>Contenedor: <div>Esto es un contenedor </div> Se trata de un contenedor que alberga a su vez otros elementos, como otros contenedores, párrafos, etc…</li>

<li>Párrafos: <p>Esto es un párrafo</p></li>

<li>Título: <h1>Esto es el título de un texto</h1></li>

<li>Subtítulo: Al igual que con el título, con los encabezados <h2> <h3> y sucesivos podemos estructurar en diferentes niveles de subtítulos, los textos.</li>

<li>Tablas: Se emplean las etiquetas <table>, <tr> y <td> para definir respectivamente la tabla, las filas y las celdas.</li>

<li>Enlaces: para los enlaces se utiliza la etiqueta <a>. Un ejemplo de enlace sería <a href=”https://enlace.com”>Esto es un enlace</a>

<li>Listas: Se crean con las etiquetas <ul>,<li>,<ol>. </ul>

 

Cómo hacer una tabla en HTML

Aunque a día de hoy el uso de tablas se ha quedado obsoleto, aún se
utilizan y para comenzar a aprender a crear páginas web, puede ser útil añadir
alguna tabla.
Para crear una tabla en HTML, en primer lugar, definiremos la tabla con la
etiqueta <table> y posteriormente iremos construyendo la tabla fila por fila, de
manera que cada vez que queramos añadir una fila nueva añadiremos un
elemento <tr> y dentro de cada &lt;tr&gt; iremos añadiendo las celdas de la tabla,
que se representan por <td>.
Un ejemplo sencillo. Queremos crear una tabla de 3 filas que contenga 4
celdas cada una. El código resultante sería el siguiente.

 

 

 

<!Doctype html>

<html>

           <head>

                      <title>Esto es el título de la web</title>  

          </head>

<body>

<table>

          <tr>

                 <td>Primero 1</td>

                 <td>Segundo 1</td>

                 <td>Tercero 1</td>

                 <td>Cuarto 1</td>

         </tr>

          <tr>

                 <td>Primero 2</td>

                 <td>Segundo 2</td>

                 <td>Tercero 2</td>

                 <td>Cuarto 2</td>

         </tr>

          <tr>

                 <td>Primero 3</td>

                 <td>Segundo 3</td>

                 <td>Tercero 3</td>

                 <td>Cuarto 3</td>

          </tr>

</table>

</body>

</html>

Desarrollar una web estática con códigos HTML es muy sencillo, sin
embargo, es importante que te entrenes lo suficiente para aprender a colocar
correctamente cada elemento en su sitio. Por otro lado, si quieres añadir estilos
a tu web, será necesario que aprendas también a codificar reglas con hojas de
estilo en cascada (CSS). ¡Enhorabuena, ya estás más cerca de convertirse en
desarrollador web!