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.
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.
La influencia de los Navegadores en Internet
Repaso a la historia de navegadores como Internet Explorer, Firefox, Google Chrome o Safari, desde sus comienzos hasta la situación actual del mercado.
Posición de capas con CSS en la maquetación de páginas web
Profundizamos en los temas de posicionamiento de capas para que el diseño adquiera el formato deseado. Para ello se emplean atributos CSS, que permiten ubicar las capas en el lugar y en la forma deseada.
La propiedad overflow de CSS en la maquetación de páginas web
De gran utilidad y poco utilizada, la propiedad CSS2 “overflow” puede resultar de gran utilidad en la maquetación de páginas web.
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.
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.
Métodos para centrar verticalmente con CSS
Ofrecemos diversas técnicas y ejemplos para centrar verticalmente el contenido de una web mediante CSS.
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.
Herramientas de desarrollo de Mozilla Firefox: Firebug y Web Developer Toolbar
Explicamos como usar las mejores herramientas de desarrollo de Firefox: Firebug que se encuentra dentro de las herramientas indispensables para el desarrollo web. Y Web Developer Toolbar, que es una extensión diseñada para brindar herramienta de apoyo a los desarrolladores.
Como usar pseudo elementos CSS “:before” y “:after”
En este artículo damos a conocer los aspectos generales sobre el uso de los pseudo elementos “:before” y “:after”, así como su implementación en CSS.
Utilización de la repetición y posición de fondos en la maquetación de páginas web
Además de servir para dar la apariencia deseada, algunas propiedades de los fondos pueden ser empleadas para la maquetación de las páginas web.
Tamaño, margen, relleno y bordes de capas con CSS y HTML
Los conceptos de márgenes, relleno y bordes, sencillos en su naturaleza, son un verdadero rompecabezas para los que se inician en la maquetación. En este artículo damos una detallada explicación.
Compatibilidad de tu web con distintos navegadores
Podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer, Firefox, Opera, Safari y Mozilla.
Cómo mejorar la velocidad de carga de una web
Explicamos algunas de las técnicas más utilizadas para optimizar el rendimiento de un sitio web
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.
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.
Optimización de los archivos CSS
Cómo optimizar los archivos CSS para que pesen menos y no retarden la carga de la página.
CSS avanzado: todo sobre la propiedad display
Os enseñamos todo el potencial de la propiedad display para maquetar tus páginas web y formar las estructuras que necesites.
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.
Optimizar y editar imágenes para páginas web
Edición y uso de los distintos tipos de imágenes en la web, así como su optimización para que ocupen lo menos posible.
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.
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.
Estilo y estructura de enlaces con XHTML y CSS
En este artículo nos enfocamos en el estudio del Hipertexto (enlaces de texto), definiendo como estructurarlos y darles un diseño estético.
CSS avanzado: las propiedades counter-reset y counter-increment
Estas propiedades son de las de mayor complejidad en CSS, pero que pueden resultar muy útiles para algunos tipos de trabajos, sobre todo en maquetación de textos.
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á.
CSS avanzado: la propiedad “white-space”
Una propiedad poco utilizada, que permite al diseñador manejar los espacios en blanco y los saltos de línea de los textos incluidos en el código HTML.
HTML – XHTML Doctype o versión del documento de una página web
Antes de comenzar a hacer la página web en sí, tenemos que decirle al navegador qué versión de HTML vamos a utilizar para que sepa interpretarlo correctamente.
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.
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.
- 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.
- Una vez que se han obtenido los conocimientos fundamentales de HTML, el siguiente paso es aprender a utilizar CSS (Cascading Style Sheets – Hojas 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.