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.

Optimizar páginas web para imprimir

Cuando el contenido ofrecido resulta interesante, el usuario puede querer imprimirlo. Para ello es necesario que se optimice la página para su impresión.

Conceptos básicos de HTML

No te pierdas nuestra guía sobre los fundamentos de HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creación de páginas web.

¿Crear tu página web o contratar a un profesional?

Ahorrar tiempo o dinero, un dilema difícil de contestar de manera rápida. A continuación analizamos los distintos factores que nos ayudarán a determinar cuál de éstas dos opciones es la mejor para nuestro negocio.

Tres herramientas para potenciar tu sitio web con Wix

En esta ocasión os explicamos 3 de las nuevas herramientas de Wix, que te van a permitir crear contenido dinámico en tu web, mejorar el SEO o incluyo contratar los servicios de otros profesionales especialistas en Wix.

Uso de selectores CSS

Estudiamos el uso correcto de selectores, abarcando desde los selectores de tipo básico, hasta pseudoselectores, operadores y expresiones regulares.

¿Cómo darle un uso apropiado a CSS3?

CSS3 nos ha brindado muchas nuevas herramientas que nos permiten crear grandes efectos, pero es muy probable que les estemos dando un enfoque inadecuado, en este artículo tratamos de definir un uso correcto.

La propiedad float de CSS

Explora las múltiples posibilidades que ofrece para el diseño de páginas web el uso correcto de la propiedad float al momento de aplicarse a los elementos que forman parte en nuestro layout.

Como estructurar un email con HTML

El correo electrónico es una de las herramientas más utilizadas en Internet, sin embargo muchos tienden a construirlos de manera errónea, para evitar eso en este artículo explicamos cómo se debe estructurar un correo con HTML.

Como crear listas con HTML y CSS

Las listas HTML representan uno de los principales medios para presentar contenido en una página web, en este artículo estudiamos como agregarlas a nuestro código y darles un estilo adecuado, además de dar muchos ejemplos prácticos de su uso.

Como hacer layouts con HTML y CSS

Conoce los conceptos fundamentales de un buen layout: como “padding”, “border” y “margin”, así como los distintos tipos de posicionamiento y estructuramos un layout sencillo.

Guía de CSS para principantes

Vemos conceptos básicos para maquetar páginas web con CSS. Guías que nos ayudarán a crear hojas de estilo limpias y optimizadas.

Cómo dar estilo a textos con CSS y HTML

Estudiamos las etiquetas HTML más importantes para dar formato a los textos de una web, así como darles estilo a través de CSS. También las recomendaciones generales para diseñar y estructurar buenos textos.

Crear formularios con XHTML y CSS

Guía completa sobre los formularios HTML y CSS. Aprende a crear este elemento fundamental para la interacción con el usuario en nuestros sitios web.

CSS Media queries

En este artículo explicamos como adaptar nuestros sitios al tamaño de la ventana del navegador y de los dispositivos mediante los “media queries” de CSS.

CSS avanzado: la propiedad “content”

Una de las propiedades menos conocidas de CSS 2.1, pero que tiene un potencial enorme. En un futuro no muy lejano, cuando la mayoría de los navegadores respeten los estándares, su uso seguramente se incrementará.

Manejo de JavaScript con XHTML

El manejo de scripts es una parte fundamental para lograr un balance adecuado en el frontend de nuestros sitios, en este artículo vemos como conjuntar XHTML y Javascript.

Depuración de errores en códigos CSS

Encontrar los errores que se producen en los códigos CSS, es una de las tareas más arduas que tienen los diseñadores. Aquí damos algunos consejos sobre como hacerlo más sencillo.

Sintaxis de CSS

Estudiamos la sintaxis básica del código con CSS, explicando lo que es una regla, un selector, una propiedad y sus valores.

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.