Categoría: Manual de HTML y CSS

Manual de maquetación web con XHTML y CSS – como hacer una pagina web con HTML y CSS desde cero. Pasar un diseño web a HTML y CSS.

¿Quieres aprender a construir tu página web? ¡Bien! estás en el lugar adecuado.

Maquetación web

Si quieres aprender a maquetar una página web, no dejes esta guía, explora los contenidos de abajo para saber todo lo que necesitas.

Los artículos incluyen muchos ejemplos de código para que puedas usarlos en tu web.

Tutoriales sobre maquetación web

En la actualidad CSS es un estándar, por lo que se encuentra totalmente aceptado por todos los navegadores y la comunidad de diseñadores.

Gracias a eso ahora podemos manipular la posición de cada elemento HTML mediante el uso de estilos.

Esto no sólo reduce dramáticamente el tamaño y peso de los sitios, si no que representa un código más flexible, manejable y sobre todo entendible y fácil de editar.

Historia de CSS y HTML

La aparición de las hojas de estilo en cascada significó un cambio radical en la maquetación de páginas web. La aparición de los div (abreviatura de divisiones) sustituyó y mejoró la maquetación hecha con tablas.

Las capas, reemplazaron a las tablas dotando a los diseñadores de páginas web de una herramienta de mucha mayor flexibilidad que permite una mayor eficiencia en el trabajo.

Mientras que para realizar cambios en una serie de páginas, un diseñador debía cambiar el código de todas ellas, con el empleo de las hojas de estilo solo debe cambiar unas pocas líneas, sobre todo si ésta se encuentra en un archivo separado del código HTML.

 

¿Qué se necesita para maquetar un sitio web?

Iniciarse en la mauetación web implica necesariamente un proceso de aprendizaje.

Todo diseñador web debe conocer al menos dos lenguajes de programación web: HTML y CSS , que son indispensables y complementarios.

  1. La primera tarea que se debe emprender, es aprender el lenguaje HTML, para lo que recomendamos leer la guía que puedes encontrar en el siguiente enlace: conceptos básicos de HTML.
  2. Una vez que se han obtenido los conocimientos fundamentales de HTML, el siguiente paso es aprender a utilizar CSS (Cascading Style SheetsHojas de Estilo en Cascada).

CSS es un lenguaje que permite al diseñador web dar la apariencia visual desea a sus páginas.

Con un correcto marcado html, puedes crear páginas muy diferentes usando tan solo CSS.

Además, CSS permite mantener separados los contenidos de la presentación, emplear el mismo código en varias páginas, modificar la presentación de la página sin afectar a los contenidos y viceversa y da un mayor control al diseñador sobre los estilos y formatos de sus páginas.

El lenguaje CSS es algo más difícil que HTML, pero a la vez es más divertido. Llegar a tener un conocimiento avanzado sobre CSS requiere mucha experiencia y tiempo, uno se da cuenta conforme va aprendiendo que en realidad le queda mucho por entender y a veces el límite sólo lo pone la imaginación. Se pueden hacer cosas increíbles sólo con CSS.

El aprendizaje del lenguaje CSS tiene una utilidad adicional, y es que puede considerarse un paso intermedio antes de comenzar a estudiar otros lenguajes más avanzados.

¿Qué es HTML?

El lenguaje HTML consta de una serie de comandos u órdenes que los navegadores pueden interpretar, por lo que puede decirse que una página web es un documento donde se escriben contenidos y una serie de instrucciones para indicarle al navegador como debe mostrarlos.

A través del lenguaje HTML podemos comenzar los primeros pasos en la maquetación web.

Tal como se describe en conceptos básicos sobre HTML, para comenzar a realizar nuestras primeras prácticas solo es necesario emplear un editor de texto y un navegador.

El lenguaje HTML está compuesto por etiquetas que no son más que instrucciones que le indican al navegador qué hacer.

Algunas de estas etiquetas son instrucciones puntuales, por lo que se componen de una sola instrucción o etiqueta, mientras que otras pueden tener una extensión ilimitada, por lo que es necesario introducir una etiqueta de apertura y otra de cierre, limitando la extensión de la instrucción.

Es aconsejable tener a mano (impreso o en el propio ordenador, como les resulte más cómodo) un listado de las etiquetas HTML para realizar cuantas consultas necesitemos.

¿Qué es CSS?

Al igual que el lenguaje HTML, el lenguaje CSS solo requiere el empleo de un editor de texto simple y un navegador, si bien es cierto que resultan de mucha utilidad algunos programas que están creados exclusivamente para crear hojas de estilo.

HTML y CSS son lenguajes complementarios, ya que, a pesar de que pueden realizarse páginas web sólo con HTML, esto no es lo más conveniente ni lo más aconsejable, la presentación visual del sitio dejará mucho que desear.

El lenguaje CSS se emplea exclusivamente para definir como se va a presentar el contenido de la página. Esto puede llevarse a cabo dentro del documento HTML, dentro de cada etiqueta de ese documento o bien como parte de un archivo anexo a la página web.

Mediante el empleo de CSS, se puede organizar la página disponiendo el lugar y la extensión que ocupará cada elemento y el formato de los mismos e incluir imágenes, videos..  y definir como se mostrarán cada uno de ellos.

La base de una web es HTML y CSS

CSS, junto con HTML, es la herramienta básica para la maquetación de páginas web.

Sus capacidades para manejar los elementos artísticos y de formato permiten hacer mejores diseño web de una manera simple y eficiente.

Y con la llegada de CSS3 el campo de posibilidades se ampliaron aún más, haciendo la maquetación más flexible y optimizada, puesto que muchas veces nos ahorramos el uso de imágenes para efectos como degradados, sombras o bordes redondeados.

Tu habilidad para manejar con propiedad CSS y HTML crear la gran diferencia entre un sitio normal y uno con el toque experto de creatividad que atrae al visitante. Y además bien construido para brindar la mejor experiencia.

Desde que se creó CSS como la herramienta que iba a facilitar la tarea al diseñador, se sospechaba que su crecimiento no iba a tener límites.

Es así que CSS3 está vigente desde hace mucho y ha se está trabajando en el borrador de CSS4, con novedades que hacen todavía más accesible la presentación elegante y profesional de tus páginas. Prácticamente, no hay excusas. Todo depende de tu imaginación.

Otros lenguajes

En la medida que las exigencias del diseño van avanzando, se hará necesaria la inclusión de otros lenguajes, como javascript, php, y otros, ya que con HTML y CSS se consiguen páginas estáticas, donde el usuario se encuentra limitado a ver o escuchar el contenido.

Algunas páginas web requieren que los usuarios interactúen, envíen datos, llenen formularios, etc., lo que solo es posible incluyendo otros lenguajes como PHP.

Si bien es cierto que hoy en día la mayoría de páginas web funcionan gracias a gestores de contenido (CMS), que son aplicaciones prefabricadas en las que la parte de programación y diseño está ya creada por defecto, y normalmente se personalizan/modifican para usarse.

Por ejemplo, este portal está creado bajo WordPress, que es la plataforma de blogs más conocido actualmente.

El diseño es propio y gran parte de la programación que trae la aplicación está modificada, pero el dinamismo del sitio y su complejidad no serían posibles sin el uso de WordPress, y WordPress funciona con PHP y MySQL.

En este punto el maquetador puede plantearse dar el salto al desarrollo web, y aprender estos lenguajes de programación, o bien puede comenzar a trabajar mano a mano con programadores que tendrán muchos más conocimientos que él en estos lenguajes, y dedicar todo ese valioso tiempo que emplearía en aprender a programar a impulsar su negocio.

Si quieres aprender a maquetar una página web, no dejes esta guía, explora los contenidos de arriba para saber todo lo que necesitas.