Es el momento de descubrir todo acerca de la maquetación HTML: su definición, su funcionamiento y también aprenderemos sobre las mejores prácticas en la maquetación HTML. Dado que se refiere al diseño visual de un sitio web, es tan crucial como su estructura; el estilo de un sitio puede ser un aspecto clave para enriquecer la experiencia del usuario.
Ver índice del contenido
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.
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.
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:
¿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!
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.
Desarrolladores Web.
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.
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.
Hola Jorge!
Los Metas en el <head>, en esta ocasión la intención es enfocarse en la maquetación.
Saludos.
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!
Muchas gracias por la dedicación que le pusiste para que el curso sea tan entendible y fácil, ¡ 100% recomendable!, vamos por más…
Excelente el contenido del curso de verdad que pude interiorizar muchos conceptos que no tenía claro por qué y cuando utilizarlos, muchas gracias a los desarrolladores que tienen esta página, seria genial un curso de php
Gracias Alfredo!
Esperamos sacar más cursos pronto.
¡Saludos!
Nunca puedo dejar de agradecer a quien desinteresadamente emplea su tiempo y parte de su vida a comunicar a sus semejantes sus conocimientos.
Muchas gracias.
Buenas noches para todos los creadores de este curso,!!..Muy buenas las lecciones!!..Por cuestiones de trabajo,lo habia dejado un»tiempito»,ahora ya puedo decir que lo terminé!…Y en verdad felicitarlos porque apesar de todos los inconvenientes que se me presentaron,aprendí mucho!!..Ahora voy por el HTML5 si Dios me lo permite!!..Felicitaciones!!..Se les agradece los esfuerzos de enseñar a los que no sabemos nada!!!…Dios los bendiga grandemente!!.