Artículo original escrito por Vasyl Lagutin
Artículo original Web Development for Beginners – Learn Basic HTML and CSS to Build Your First Web Page
Traducido y adaptado por Santiago Yanguas

¿Te has preguntado alguna vez cómo se construyen y diseñan los sitios web? ¿Desea aprender el arte del desarrollo web, pero no es tan experto en tecnología, todavía?

Bueno, entonces este tutorial es para ti. Es una introducción al desarrollo web para principiantes, para que puedas aprender lo básico incluso si eres totalmente nuevo en el tema.

Conceptos básicos de HTML: la estructura de una página web

HTML significa Hyper-Text Markup Language. Antes de adentrarnos en el funcionamiento de HTML, vamos a tener una comprensión básica de lo que significa realmente Hyper-Text Markup Language.

El Hyper-Text se refiere a los hipervínculos que se ven en un texto, una imagen o un marcador que redirige a otra página, archivo, documento u otra parte de una página web.

Un lenguaje de marcado es simplemente un lenguaje informático que contiene etiquetas que definen elementos dentro de un documento. Un ejemplo de etiqueta podría ser el titular de un blog, que normalmente se escribe como una etiqueta h.

Hay más etiquetas, algunas de las cuales descubriremos más adelante.

Puedes pensar simplemente en HTML como la estructura de una página web. Supongamos que tienes que construir una casa. El primer paso de la construcción debe ser construir su estructura general, ¿verdad?

Diseñará el sótano, las paredes, el césped, el garaje, etc. Así es como puedes imaginar el HTML: son los bloques de construcción de una página web.

En un sitio web, puede contener la barra de navegación, el cuerpo principal/contenido, el pie de página, la barra lateral y todas las divisiones estructurales de la página. Todo ello con HTML.

Cómo empezar con HTML

Hay muchos editores de código, como VS Code, Sublime Text 3, Atom y Brackets. Todos estos pueden sonar extraños para ti. Así que empezamos usando Notepad que podemos usar de una forma u otra para escribir notas u otras cosas.

Veamos cómo se haría la estructura de una página web sencilla en HTML con código básico.

Vamos a diseñar una página web que tiene diferentes secciones: una barra de navegación, el cuerpo principal con un título, un párrafo, una imagen, y un pie de página.

<!DOCTYPE html>

<html>
    <head>
        <title>Título de la página</title>
    </head>
    <body>

        <nav>Esta es el Navbar de mi página web</nav>

        <h1>Mi primera título</h1>
        <p>Mi primer párrafo.</p>

        <img src = "https://miro.medium.com/max/1584/1*lJ32Bl-lHWmNMUSiSq17gQ.png"/>

        <footer>
          <p>Pie de página</p>
        </footer>

    </body>
</html>
Página basica

En el código anterior, la declaración <!DOCTYPE html> significa que este documento es un archivo HTML5.

El 5 de arriba solo se refiere a la versión, ya que HTML ha avanzado mucho y ha mejorado respecto a sus versiones anteriores. La versión 5 solo se refiere a su última versión estable. No tienes que preocuparte por las versiones anteriores.

<html> actúa como elemento raíz de todos los elementos (título, encabezados, párrafos, etc.) de una página web HTML.

<head> contiene la metainformación (información sobre datos como el autor, la fecha de caducidad, una lista de palabras clave, el autor del documento) de la página.

El <title> refiere al título de la página web, que se ve en el navegador cuando se abre una página web. Aquí hay un ejemplo para tu referencia. En esta imagen, Page Title se refiere a la etiqueta title.

Understanding%20Web%20design%20Basics%20with%20HTML%20&%20CSS%20f00187c06fae4c0582422f7947326b9b/Screenshot_(1313).png
Título de la página

<body> es donde está todo el contenido de tu página web, como el encabezado, los párrafos, las imágenes, toda la interfaz de usuario.

<nav> representa la barra de navegación, que debe estar en la parte superior, seguida del cuerpo de contenidos principal y por último, el <footer>.

El cuerpo principal está compuesto por un encabezado representado por una etiqueta <h1> (el 1 con la h representa el tamaño del encabezado. El tamaño del encabezado va de 1 a 6, siendo 1 el más grande y 6 el más pequeño). Le sigue una etiqueta <p> de párrafo, luego una etiqueta de imagen <img>, finalmente el pie de página, la última sección de una página web.

Observe que la etiqueta de la imagen tiene la palabra clave src que se refiere a la fuente de la imagen, que en este caso es una imagen tomada de la web. Por eso adjuntamos el enlace URL de la imagen.

Todas estas etiquetas comienzan con un mayor y menor que <>; también finalizan con un mayor y menor que </> con una barra inclinada de por medio, como puedes ver en los fragmentos de código.

Cómo guardar los archivos HTML y mostrar los resultados

Solo tienes que seguir estos dos pasos básicos para ver tu HTML como página web.

Understanding%20Web%20design%20Basics%20with%20HTML%20&%20CSS%20f00187c06fae4c0582422f7947326b9b/Screenshot_(1319).png
Página web
  1. Guarde su archivo HTML con la extensión .html. En el ejemplo que hemos utilizado, hemos guardado el archivo como Tutorial.html.
Understanding%20Web%20design%20Basics%20with%20HTML%20&%20CSS%20f00187c06fae4c0582422f7947326b9b/Screenshot_(1322).png
Página web
Understanding%20Web%20design%20Basics%20with%20HTML%20&%20CSS%20f00187c06fae4c0582422f7947326b9b/Screenshot_(1321).png
Página web basica

2. Abra el archivo en cualquier navegador (Chrome, Firefox, IE), y entonces podrá ver su página web HTML.

Resultados de nuestro diseño HTML básico

Understanding%20Web%20design%20Basics%20with%20HTML%20&%20CSS%20f00187c06fae4c0582422f7947326b9b/_C__Users_wel_Desktop_Tutorial.html_(2).png
HTML básico

Puedes ver claramente los resultados, aunque todavía no hay colores ni estilo. Aunque todavía se mira que la estructura está ahí - la barra de navegación, seguida por el cuerpo principal que contiene el contenido, luego por un pie de página en la parte inferior.

Cómo añadir colores, estilo y potencia al HTML con CSS

CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada), que son los archivos de hojas de diseño que añaden colores, estilo y potencia a los elementos estructurales de tu HTML.

Puede pensar en el CSS como la pintura, la decoración y los elementos de diseño que añade para que tu casa quede bonita.

Existen múltiples formas de añadir CSS a tu estructura HTML. Vamos a explorar la técnica más básica que es añadir CSS a través de la etiqueta <style>.

<head>
	<title>Título página</title>
    
    <style>

    body {
      background-color: lightblue;
      margin: 0;
      text-align: center;
    }

    nav {
     background-color: black;
     width: 100%;
     color: white;
     height: 50px;
     padding-top: 25px;
    }

    h1 {
     color: black;
    }

    footer {
     background-color: gray;
     color: white;
     padding: 5px;
    }

    </style>
</head>
CSS creado con la etiqueta style en el head

Explicación del anterior CSS

Puedes ver que hemos añadido el CSS a través de la etiqueta style dentro de la etiqueta head del documento en el código anterior. Esta es una forma básica de añadir CSS.

Vamos a desglosar y explorar las propiedades CSS que hemos utilizado en los cuatro elementos anteriores.

El elemento body

body {
  background-color: lightblue;
  margin: 0;
  text-align: center;
}
Estilo aplicado a body

El selector CSS del cuerpo se refiere a toda la estructura de la interfaz de usuario que vemos. Añade algunas propiedades de CSS:

  • background-color añade el color de fondo - aquí es azul claro.
  • margin que gestiona los espacios a ambos lados de la estructura de la página web.
  • text-aligned: center significa que todo el contenido estará alineado al centro en este caso.

Todo este CSS aplica a la página web, todos los elementos se enlazarán automáticamente estas propiedades generales CSS hasta que se especifiquen sus propias propiedades que difieran de estas globales.

El elemento nav

nav {
 background-color: black;
 width: 100%;
 color: white;
 height: 50px;
 padding-top: 25px;
}
Elemento nav de la página web

El selector nav se refiere a la barra de navegación de la página web, la cual aplica propiedades de diseño.

Hemos establecido el color de fondo en negro, su anchura en 100% para que ocupe todo el ancho, su color que representa el color del texto o enlaces dentro de la barra de navegación, su height(altura) en 50px y le hemos dado un padding-top de 25px.

El padding se refiere al espacio entre el contenido y el borde. Como queremos que el texto esté alineado al centro, tenemos que añadir un padding de la mitad de los píxeles de la altura real de la barra de navegación, es decir, 50px (altura de la barra de navegación) / 2 = 25px. Esto asegurará que el texto dentro de la barra de navegación esté alineado al centro.

Elemento h1

h1 {
 color: black;
}
Título h1

El selector h1 aplica CSS a la etiqueta h1 en el HTML. Por consiguiente la propiedad de color sea black(negro).

footer {
 background-color: gray;
 color: white;
 padding: 5px;
}
Pie de página en CSS

Este es el último selector que se refiere al pie de página de nuestra web. Aquí, hemos establecido un conjunto similar de propiedades que discutimos anteriormente para la navbar(barra de navegación), así que no hay nada realmente nuevo aquí.

¡Y eso es todo!

Qué aspecto tiene la página web después de añadir el CSS

Understanding%20Web%20design%20Basics%20with%20HTML%20&%20CSS%20f00187c06fae4c0582422f7947326b9b/_C__Users_wel_Desktop_Tutorial.html_(1).png
Página web con CSS

Ahora puedes ver cuánta vida puede añadirle el CSS a nuestra estructura básica de HTML. ¿No es increíble?

Estos son solo los fundamentos del diseño web, pero en realidad es bastante divertido una vez que los aprendes.

Conclusión:

Ahora que aprendiste los fundamentos del diseño de páginas web, puede ver lo accesible que puede ser, lo práctico que es y cómo se relaciona con muchos conceptos de la vida real, como la construcción de una casa.