En este artículo, te mostraremos todo sobre HTML y CSS. Estos lenguajes son clave para crear sitios web desde el principio.1 Aprenderás los fundamentos para controlar la forma, contenido y diseño de páginas web profesionales. Nos introduciremos en lo básico de HTML y CSS, explicando cómo trabajan juntos y las herramientas que necesitas.

Después, explorarás las partes esenciales de HTML: elementos, etiquetas y atributos. También aprenderás a dar estilo con CSS. Hablaremos de temas avanzados como el modelo de caja y diseño responsive. Con este conocimiento, podrás volverte un experto en el diseño web front-end.

Puntos Clave

  • HTML y CSS son lenguajes fundamentales para el desarrollo web1
  • Aprenderás a dominar la estructura, el contenido y el diseño de sitios web
  • Profundizarás en los elementos, etiquetas y atributos clave de HTML
  • Conocerás las diferentes formas de aplicar estilos con CSS
  • Abordaremos temas avanzados como el modelo de caja y el diseño responsivo

¿Qué son HTML y CSS?

HTML es clave para crear sitios web.1 Define lo que vemos en un navegador. Permite añadir títulos, textos, enlaces e imágenes a nuestras páginas.

Definición de HTML

CSS mejora la apariencia de nuestras páginas HTML.1 Define el diseño de colores, tipografía, espacios y más. CSS y HTML unen fuerzas para hacer que un sitio luzca bien.

Definición de CSS

Usamos HTML y CSS juntos en el desarrollo web.1 Mientras que HTML organiza el contenido, CSS decide cómo se ve. Así creamos sitios atractivos y fáciles de ver en web.

Propósito y uso conjunto

Herramientas de Desarrollo de Chrome

Las Herramientas de Desarrollo de Google Chrome son esenciales para desarrolladores web. Permiten ver el código HTML y los estilos CSS de páginas web.1 Solo haz clic derecho en la página y después en «Inspeccionar». Se abrirá una ventana con dos secciones. La superior muestra el código HTML y abajo los estilos CSS usados.

Estas herramientas son clave para aprender, arreglar errores y mejorar el código de tu página. Son muy valiosas en el proceso de desarrollo web.

Fundamentos de HTML

Los archivos HTML contienen elementos HTML que crean la página web.1 Cada elemento tiene su etiqueta. Por ejemplo,

,

Etiquetas HTML

Las etiquetas definen elementos en la página. Tienen un inicio, como

, y un final, como

2

Atributos HTML

Cada elemento puede tener atributos. Estos dan información extra. Se añaden en la etiqueta de inicio, como class=»titulo-principal».1 Algunos atributos populares son class, id, style, lang, src y href.

Idioma en HTML

Se puede marcar el idioma de la página con el atributo lang y el c�digo. Es vital para la accesibilidad y entendimiento de los lectores.1

Enlaces en HTML

Usa el elemento y el atributo href para enlazar. Por ejemplo, freeCodeCamp enlaza a freeCodeCamp en español.1 También sirve para enlazar a otras secciones o páginas de tu sitio web.

Comentarios en HTML

Se pueden añadir comentarios en HTML para explicar el código. Se colocan entre . Son muy útiles para documentar el trabajo.1

Listas en HTML

Puedes hacer listas ordenadas (

    ) y no ordenadas (
    ). Usa

  • para cada ítem de la lista. Así, muestras orden o sin orden con números o viñetas.1

    Imágenes en HTML

    1 Pero es clave añadir alt como texto alternativo. Se usa si la imagen no carga o para ayudar a lectores con discapacidades.

HTML y CSS desde Cero: Guía Completa para Principiantes

Esta guía completa de1 HTML y CSS es ideal para quienes empiezan. Te mostrará cómo crear webs profesionales desde el principio. Aprenderás paso a paso los básicos de HTML y CSS. Todo para que puedas hacer tus propias páginas web.3 Veremos desde la base hasta diseños avanzados. Te convertirás en un experto en desarrollar la parte visual de sitios web.

HTML (1 HyperText Markup Language) es clave en el desarrollo web. Define el aspecto y el contenido de cada página.1 CSS (Cascading Style Sheets) añade estilo a los elementos. Funciona en equipo con HTML.1 Los archivos HTML terminan en .html y los de CSS en .css.

3 HTML y CSS son fáciles de entender, especialmente al empezar. Son lógicos y claros.3 Practicar y probar es vital para mejorar. Te abre las puertas a cosas más complicadas.

1 Los elementos de HTML se escriben con etiquetas de apertura y cierre. Por ejemplo,

Mi página web

.1 Atributos como class, id, style, lang, src, y href son comunes.1 Lang se usa para indicar el idioma de la página, como es.

1 Se usa el para hacer enlaces en HTML, con href indicando la URL. Por ejemplo, freeCodeCamp.1 Los comentarios se añaden así: <!-- y -->. No se ven en la página final.

  1. 1 Azul
  2. 1 Verde
  3. 1 Negro

1 Para añadir imágenes en HTML, usamos . Src es donde está la imagen y alt es una descripción.1 Los estilos CSS van en línea o en .

Introducción a CSS

CSS nos ayuda a dar estilo a los sitios web después de definir su estructura con HTML. Es un lenguaje de reglas para estilizar los elementos de la web. Hay tres maneras claves de aplicar estos estilos en CSS.

Tres opciones para aplicar estilos CSS

  1. Estilos en línea: Comienzas aplicando estilos directamente a elementos HTML. Lo haces con el atributo style. Por ejemplo: <p style="color: azul; font-size: 16px;">Este párrafo tiene estilos en línea.</p>.
  2. Estilos internos: Definimos los estilos en la sección <head> del HTML con la etiqueta <style>. Por ejemplo: <style>p { color: azul; font-size: 16px; }</style>.
  3. Estilos externos: Creamos un archivo CSS aparte, con extensión .css, y lo vinculamos al HTML con <link>.1 Es la mejor manera para aplicar estilos CSS y personalizar elementos HTML.

Usando estas opciones, puedes dar estilo CSS y personalizar HTML como prefieras. Sin embargo, se aconseja usar estilos externos. Ayudan a mantener el código más ordenado y fácil de modificar.

Selectores CSS

Los selectores CSS son herramientas clave. Nos dejan seleccionar los elementos HTML para danarles aplicar estilos. Hay muchos tipos como de etiqueta (p), de clase (.mi-clase), de ID (#mi-id), de atributo ([type=»text»]), y descendentes (div p).1 Con todos estos, podemos aplicar estilos de manera precisa en nuestra web.

Tipo de selectorEjemploDescripción
Selector de etiquetapSelecciona todos los elementos <p> de la página.
Selector de clase.mi-claseSelecciona todos los elementos que tienen el atributo class="mi-clase".
Selector de ID#mi-idSelecciona el elemento que tiene el atributo id="mi-id".
Selector de atributo[type=»text»]Selecciona todos los elementos que tienen el atributo type="text".
Selector descendentediv pSelecciona todos los elementos <p> que son descendientes de un elemento <div>.

4 Con estos selectores, es fácil aplicar estilos de manera precisa en nuestra página web.

selectores CSS

Propiedades y valores CSS

CSS nos ayuda a cambiar los colores en una página web. Podemos elegir entre muchos tipos, como los hexadecimales o por nombre. Esto aplica a los elementos visibles, no solo al texto, como en el color de fondo o borde.5

Colores

Con CSS, también controlamos cómo se ven las letras. Podemos decidir la fuente, tamaño, grosor, estilo y cómo se alinean. Así, hacemos que el texto se vea de la forma que queremos.5

Fuentes

Además, podemos cambiar los fondos de la página. Hay propiedades para elegir el color, imagen, repetición y tamaño del fondo. Con esto, logramos fondos que hacen nuestra web más atractiva.5

Fondos

Modelo de caja CSS

Cada elemento HTML se ve como una «caja». Incluye contenido, relleno, borde y margen. Esta es la esencia de modelo de caja CSS.6 Podemos ajustar width, height, padding, border y margin. Así diseñamos cómo se ven y dónde están los elementos en la página.6

Cajas en bloque siempre cambian de línea si hay espacio en su contenedor. Mientras, cajas en línea se quedan en la misma línea si no hay un salto forzado.6 Solo se usa width y height en cajas de bloque.6

El modelo de cajas CSS estándar suma el ancho del contenido con relleno y borde. Esto da el tamaño completo de la caja.6 Para otro enfoque, el modelo de cajas alternativo en CSS prefiere box-sizing: border-box.6 Navegadores usualmente eligen el modelo estándar, pero se puede preferir el alternativo al configurar box-sizing.6

Posicionamiento en CSS

CSS maneja la ubicación de los elementos en una web por medio de propiedades especiales. Esas propiedades son position, top, right, bottom y left.7 Hay varios tipos de posicionamiento, como static, relative, absolute, fixed, y sticky. Cada uno sirve para lograr distintos diseños y distribuciones.8

El posicionamiento relativo es fácil de usar. Ayuda a cambiar la posición de un elemento respecto a donde normalmente estaría.9 Luego está el absoluto, que coloca un elemento en un sitio específico de la página. Este sitio se mide en relación a su primer padre con una posición diferente de la estándar.9 También tenemos el fijo, que deja el elemento en un lugar específico pero respecto a la ventana del navegador.9 Por último, el pegajoso, que mezcla el relativo y el fijo, moviendo y luego fijando el elemento en cierta posición de la ventana.9

Es bueno recordar que, aunque útil, usar demasiado posicionamiento CSS puede traer problemas. Estos problemas podrían ser en la complejidad del código o en su mantenimiento a largo plazo.9 Para organizar y posicionar bien, se recomienda el uso de sistemas de rejilla o grid systems. Se pueden usar frameworks como Bootstrap o crear diseños propios.9 No olvides que el diseño debe verse bien en todos los dispositivos. Para eso, ajusta el posicionamiento con media queries dependiendo del tamaño de pantalla.9 Finalmente, al posicionar, es vital que el rendimiento de la web no se vea afectado negativamente. Para ello, evita usar ciertas propiedades en elementos que varían mucho en tamaño o posición.9

ubicación elementos

Diseño responsivo con CSS

Para que las páginas web se vean bien en cualquier pantalla, usamos CSS diseño web adaptable. Usamos em y rem, puntos de interrupción y cuadrículas flexibles. Así, nuestro sitio se adapta a computadoras, tabletas y dispositivos móviles.10

Em y rem cambian con el tamaño de fuente, lo que es genial para ajustarse. Las media queries cambian los estilos según la pantalla, ayudan a que se vea bien en todo.11

Con cuadrículas flexibles de flex, podemos mover y alinear cosas fácilmente. Esto se ajusta muy bien a cualquier tamaño de pantalla.1112

Estas técnicas de diseño web responsivo aseguran que todo se vea bien en muchos dispositivos. Van desde computadoras grandes hasta pequeños smartphones.1011

Frameworks y preprocesadores CSS

Además de las funcionalidades básicas de CSS, hay herramientas poderosas como frameworks (Bootstrap, Foundation, Bulma) y preprocesadores (Sass, Less, Stylus). Ayudan a hacer el diseño y desarrollo web más fácil.13 Ofrecen componentes listos para usar, variables y otras funciones que hacen el trabajo más rápido y mejoran el manejo del código CSS.

Los frameworks CSS contienen componentes y estilos ya hechos. Ayudan a crear interfaces de usuario que se ven bien en todo tipo de pantalla.14 Estas herramientas incluyen diseño que se adapta, como consultas de medios y sistemas de cuadrículas. Así, los profesionales pueden centrarse en la funcionalidad de su trabajo.

Por otra parte, los preprocesadores CSS como Sass, Less y Stylus ofrecen un paso extra antes del CSS final. Añaden funciones avanzadas como variables, mixins y simplifican la manera de trabajar con el código.13 Estas herramientas hacen que el desarrollo web sea más eficiente. También ayudan a mejorar los estilos CSS para tener un código más limpio y fácil de mantener.

Enlaces de origen

  1. https://www.freecodecamp.org/espanol/news/aprende-html-y-css-curso-desde-cero/
  2. https://www.byronvargas.com/web/como-empiezo-a-aprender-html-desde-cero/
  3. https://www.byronvargas.com/web/donde-programar-html-y-css/
  4. https://fastercapital.com/es/contenido/CSS–Mejora-de-HTML-con-CSS–una-guia-para-principiantes.html
  5. https://eliseovega.github.io/css_generalidades.html
  6. https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/The_box_model
  7. https://dev.to/lupitacode/guia-completa-y-practica-sobre-posicionamiento-css-fundamentos-17c
  8. https://es.linkedin.com/pulse/posicionamiento-en-css-para-principiantes-guía-paso-fernando-campos
  9. https://nelkodev.com/blog/maquetacion-y-colocacion-de-posicionamiento-css-una-guia-completa-para-el-posicionamiento-en-css/
  10. https://kinsta.com/es/blog/diseno-de-paginas-web-sensibles/
  11. https://freecodecamp.org/espanol/news/diseno-web-responsive-como-hacer-que-un-sitio-web-se-vea-bien-en-telefonos-y-tabletas/
  12. https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Introduction
  13. https://es.bitdegree.org/tutoriales/preprocesador-css
  14. https://ortamarco.me/blog/guia-completa-de-css-para-2024

Deja un comentario