Maquetación web en HTML

Es momento de conocer todo sobre la maquetación HTML, qué es y en qué consiste y además aprenderemos cuáles son las mejores prácticas que podemos realizar respecto a la maquetación en HTML, pues se trata del diseño de apariencia de una web, es tan importante como su estructura, el estilo de un sitio puede convertirse en un elemento fundamental a la hora de mejorar la experiencia de los usuarios.

Maquetación de página HTML

En HTML, la maquetación web básicamente se trata de proveer de estilo a los elementos de nuestra página web para que estos se vean lo más atractivo posible según sean los objetivos, esto implica un proceso creativo, en el que se definen colores, tamaños, márgenes, rellenos, bordes, hasta efectos especiales y mucho más.

Maquetacion HTML y diseño web
Imagen de maquetación HTML

Como hemos visto, con HTML podemos dotar de cierto estilo a nuestros elementos HTML mediante ciertos atributos, pero piénsalo bien, no sería para nada cómodo poner todos los estilos dentro de un atributo y aun peor si la estructura de nuestra página se va complicando aún más y más a medida que vamos añadiendo nuevos elementos.

¿Te imaginas tener que escribir el estilo de cada elemento de tu página en las etiquetas utilizando atributos? Realmente se convierte tedioso y más cuando tenemos tantos elementos y muchas páginas web en un misma carpeta.

Cómo maquetar una página HTML

Ahora pues bien, entendemos la necesidad de dotar de un estilo espectacular a nuestra página web hecha en HTML, sin embargo sabemos que realizar dicha tarea en el mismo documento HTML es una tarea que compromete la calidad de la estructura y es poco práctica.

Te recomendamos leer:  Introducción a HTML y al desarrollo web

Entonces ¿Cómo conseguimos que nuestra página HTML sea visualmente estética y atractiva?

Bueno, para eso existe otro lenguaje de estilos que se llama CSS. Rápidamente te comentaré de que se trata CSS y tengas una idea clara ya que este fantastico lenguaje de estilos da para otro curso.

CSS es el lenguaje de estilos que nos permite seleccionar los elementos HTML, una vez seleccionemos empezaremos a indicar las características o estilos que dicho elemento tendrá, como por ejemplo la posición, el color, el color de fondo, el borde, color de borde, grosor de borde, dimensiones, otras también como el margen de cada elemento, animaciones, efectos, etc., etc. Esas son solo un pequeño cacho de lo que CSS nos permite hacer.

Ejemplo de maquetación HTML y CSS

A modo de ejemplo veamos como se ve un código de estilo CSS para un párrafo HTML.

Código HTML

<p> CSS es el lenguaje de estilos mediante el cual controlaremos la apariencia de los elementos HTML de una página web, este un simple ejemplo de párrafo que será maquetada con CSS ¡VEAMOS!</p>

Código CSS

p {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: #0838c7;
    background-color: #6ceb6c;
    border-style: solid;
    border-color: #f50c0c;
    border-width: 2px;
    margin: 14px;
    padding: 20px;
    border-radius: 14px;
}

Si hechamos un vistazo al código CSS podemos notar que esta llena de instrucciones, propiedades y valores, pues es así como trabaja CSS.

Resultado:

Maquetación de Documento página HTML con CSS
Imagen de un elemento HTML maquetada con CSS

¿Qué acabamos de hacer? Pues es sencillo, simplemente le pusimos un estilo a un elemento HTML y en este caso a un párrafo. ¿Cómo lo hicimos? Te explicaré brevemente, ya que esto ya corresponde al curso de CSS, Verás, hemos creado un párrafo cualquiera en nuestro documento de HTML y para dotarle de estilo hemos empleado la etiqueta <style> dentro de la etiqueta <head> de nuestro documento HTML, dentro de la etiqueta <style> colocamos el código CSS que ves a lado del párrafo HTML, si guardas el documento y actualizas el navegador verás que se aplican los estilos al párrafo <p>, al final tu documento HTML se debería ver similar a:

<!DOCTYPE HTML>
<html>
  <head>
    <title> MI PRIMER TITULO </title>
<style>
p {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: #0838c7;
    background-color: #6ceb6c;
    border-style: solid;
    border-color: #f50c0c;
    border-width: 2px;
    margin: 14px;
    padding: 20px;
    border-radius: 14px;
}

</style>
  </head>

<body>

<p> CSS es el lenguaje de estilos mediante el cual 
controlaremos la apariencia de los elementos HTML 
de una página web, este un simple ejemplo de párrafo 
que será maquetada con CSS ¡VEAMOS!</p>

</body>

</html>

Si no logras obtener el resultado de la imagen, probablemente estas fallando en algo, pues copia y pega el código en tu documento y verás que si se puede conseguir. Si lograste, entonces ¡Eres genial!

Te recomendamos leer:  Cómo insertar una imagen en HTML

Con CSS también podemos apuntar los elementos únicos de nuestro documento HTML que están identificados con el atributo ID, también podemos apuntar los elementos que están identificados con un atributo CLASS y después de apuntarlos determinar las características y estilos que dichos elementos tendrán.

Conclusión sobre maquetación web

En fin CSS es el lenguaje de estilos que hará que nuestras páginas web se vean tan estéticas y atractivas como sea posible. De hecho, CSS podemos escribirlo dentro del mismo documento HTML como lo hicimos en el ejemplo, pero es más preferible crear un nuevo documento, un documento de estilos.

Pero todo ello lo veremos en el curso de CSS. Pero antes de ello termina con el curso html5, en el que veremos otros elementos que se añadieron y que enriquecerán ampliamente nuestro contenido.

Antes de que continúes con el curso HTML5 déjame

¡Fantástico! Antes de que continúes con el curso de HTML5, déjame felicitarte y darte un fuerte abrazo virtual por haber llegado hasta aquí. Sinceramente te lo mereces.

Alex HM.

Una vez que termines este curso y el curso de html5 seguramente estarás en la capacidad de construir la estructura completa de una página web. Luego de ello pasarás al cursos de CSS con el que aprenderás todo sobre estilos. o si has llegado hasta aquí por casualidad, puedes empezar a aprender CSS hoy mismo.

En el curso de HTML5 seguiremos aprendiendo novedosas etiquetas que harán de nuestro sitio web más atractivas y funcionales.

lecciones HTML
5 1 votar
Calificación
guest
3 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Jorge Oswaldo
Jorge Oswaldo
10 meses atrás

Muy bien, muy lindo el tema, genial para aprenderlo pero y el DOCTYPE y aún mas la descripción temática o el META; intente con algo desactualizado y todavía no puedo validarlo.

Desarrolladoresweb.org
Desarrolladoresweb.org
Reply to  Jorge Oswaldo
9 meses atrás

Hola Jorge!
Los Metas en el <head>, en esta ocasión la intención es enfocarse en la maquetación.
Saludos.

Last edited 9 meses atrás by Desarrolladoresweb.org
Gustavo Quintero
Gustavo Quintero
2 meses atrás

Excelente aporte maestro!
Soy ingeniero mecánico ansioso por aprender algo de programación. Su curso; contenido y forma de explicarlo me parecen muy apropiados y prácticos, gracias!

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5