Maquetación web en HTML

Anterior

Es momento de conocer todo sobre la maquetación HTML, que es y en que consiste y además aprenderemos cuales son las mejores practicas que podemos realizar respecto a la maquetación en html, pues es el 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:  Cómo poner hipervínculos o enlaces en HTML

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:

<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:  Estructura básica de un documento 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 ele 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.

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

lecciones HTML
Anterior
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

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

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