Guía HTML y CSS en español
Una guía que te permitirá explorar el mundo de la programación HTML y CSS a fondo, para aprender a programar y descubrir como crear una página web desde cero.
Lo que vas a aprender
Descubrirás que significa html, qué es el código html, como programar en HTML y como dominar el lenguaje css para aprender a programar y crear una página web.
1
Introducción a HTML
1¿Qué es el código HTML?
Si pensamos en la web, que usamos todos los días, no podemos dejar de saber que es HTML y qué función cumple, precisamente porque es gracias a ella que todavía podemos crear y, por lo tanto, ver sitios web. El acrónimo HTML significa “ Hyper Text Markup Language “, que es un lenguaje de marcado para hipertextos, un lenguaje de marc...
Sigue leyendo
2¿Para qué sirve HTML?
La función de HTML es insertar contenido en páginas web y landing page para crear su esqueleto. Pero, ¿cómo insertamos este contenido? ¡Simple! Hacemos esto a través de archivos de texto compuestos por marcadores (tag) que colocan textos e imágenes. Luego pasaremos al diseño y formato de páginas conectadas entre s&iacut...
Sigue leyendo
3Contenido histórico sobre HTML
Las personas que lideraron y lideran la transformación de Internet son conocidas, piensa en Bill Gates y Steve Jobs, pero aquellos que desarrollaron su funcionamiento a veces son desconocidos y anónimos en una era tecnológica que ellos mismos han contribuido a crear. Una de estas personas es Tim Berners-Lee, creador de la World Wide Web, del HTTP (HyperText Transfer Pr...
Sigue leyendo
4Los mejores editores de texto
Quienes crean sitios web suelen contar con un Editor de Texto o IDE (Entorno de Desarrollo Integrado) para optimizar el flujo de trabajo diario. En internet existen muchos, como por ejemplo: Sublime Text, Atom, etc. Cada desarrollador tiene su propio estilo, por lo que la elección del editor HTML correcto es individual, pero lo que recomendamos en Aulab es Vis...
Sigue leyendo
2
La estructura de HTML
5El template HTML
La estructura de un documento HTML se compone de un contenedor <html> y dos secciones distintas, a saber, el <head> y el <body>. Imaginemos nuestra página HTML simple como un ser humano: está compuesta por la cabeza (head) y el cuerpo (body). Más concretamente en la metáfora, la cabeza representa el cerebro de nuestro ser, el conocimiento interno o ...
Sigue leyendo
6Tag y atributos
HTML (acrónimo de Hypertext Markup Language) es un lenguaje de markup compuesto por una serie de elementos, conocidos como tag y atributos, que forman el núcleo de la estructura de una página web, su esqueleto. Imaginémoslos como un conjunto de herramientas que nos permiten modelar nuestro documento. Por ejemplo, hay elementos que te permiten insertar im...
Sigue leyendo
7Tag genéricos
Por lo tanto, hemos comprobado que los tag son "etiquetas" que envuelven los elementos de nuestro código html y nos permiten darles una estructura lógica y jerárquica. Pero es precisamente en esta perspectiva que es muy importante hablar también de las llamadas etiquetas genéricas. Las etiquetas genéricas son etiquetas "neutrales&qu...
Sigue leyendo
8Tag metainformación
Seguramente habrás encontrado, al leer nuestras otras guías HTML, la palabra "metaetiquetas". De hecho, ya hemos hablado sobre las etiquetas y atributos html, pero ¿qué son específicamente las metaetiquetas? Nos parecía oportuno hablar de esto de una manera un poco más detallada para despejar tu mente. Las metaetiquetas (o, pr...
Sigue leyendo
3
Formato del texto en HTML
9Encabezados
Continuando con nuestra exploración de las etiquetas del lenguaje html, es imposible ignorar la explicación de los encabezados de las etiquetas. Muy trivialmente, las etiquetas de encabezados (por ejemplo, <h1> </h1>, pero por conveniencia las llamaremos "la h") se usan para definir títulos y subtítulos en una página html. Los motores ...
Sigue leyendo
10Etiquetas de texto y formato
Hay diferentes formas de insertar tus textos al escribir una página simple en html. Ya habrás entendido que necesitamos nuestras etiquetas para hacer esto. Las etiquetas necesarias para la integración de un texto en nuestra página son principalmente los encabezados - de los que ya hemos hablado - y los párrafos que identifican un párrafo en una pág...
Sigue leyendo
4
La representación de datos en HTML
11Listas en html
Empiezas ya a tener una idea mejor estructurada de cómo funciona el lenguaje html. Has aprendido su estructura, has conocido algunas de sus etiquetas y atributos y te sientes listo para comenzar. Aquí estamos: escribe una página simple en html. Supongamos que, para empezar a planificar tu primera página html, has pensado en crear un blog de cocina. Ha añadido&n...
Sigue leyendo
12Las tablas
Puede parecer, a primera vista, que una tabla puede no servirte mientras estás con la redacción de tu página html. En realidad, este no es el caso: intenta pensar, por ejemplo, en la parte de almacenamiento de datos de un sitio web de e-commerce: ¡aquí es cuando inmediatamente piensas cuánto es útil una tabla! La tabla html es...
Sigue leyendo
5
El layout en HTML
13Etiqueta de imagen html
Para hacer atractivas las páginas de un sitio web, no podemos limitarnos a insertar en ellas exclusivamente contenido textual. Por otro lado, nos encontramos en un período histórico donde nunca antes la cultura de lo visual había asumido tanta importancia. Cada usuario se sentirá atraído principalmente por la parte 'estética' de un sit...
Sigue leyendo
14Etiquetas semánticas
En el transcurso de las guías anteriores hemos hecho alguna referencia a las famosas "etiquetas semánticas". Hemos visto, hasta ahora, que nuestras etiquetas pueden, de hecho, dar una representación visual diferente cuando el navegador representa nuestra página html. Sin embargo, algunas etiquetas no se limitan a esta diferencia de interpretación: da...
Sigue leyendo
7
Introducción a CSS
16¿Qué es el lenguaje CSS?
Si te fascina el mundo del diseño web o tienes un poco de curiosidad por el sector de la programación informática, probablemente ya hayas oído hablar del término “lenguaje CSS”. Este término hace referencia a un lenguaje muy importante en el campo del desarrollo web. Es, de hecho, un lenguaje de estilo. ¿Qué significa? &ie...
Sigue leyendo
17¿Para qué sirve CSS?
Aunque ya hemos hablado un poco sobre por qué usamos el lenguaje CSS, ahora tratemos de dar una explicación un poco más técnica y profesional al respecto. Digamos, entonces, que con CSS podemos decirle a nuestro sitio web cómo debe mostrar la información y podemos almacenar comandos para elementos de estilo como fuentes, tamaños, animaciones, etc...
Sigue leyendo
8
Cómo escribir CSS
18Cómo insertar CSS en HTML
¿Quieres añadir algún lenguaje CSS a tu proyecto? ¡Perfecto! Hay 3 formas de incorporar CSS en nuestra página html: estilo en línea, incrustado y enlace externo. ¡Vamos a verlos! Estilo en línea Cuando hablamos de estilo en línea, pretendemos insertar CSS en una sola línea: la misma que el elemento que vamos a modific...
Sigue leyendo
19Selectores de CSS
Ahora que tiene claro qué es el lenguaje CSS y para qué sirve, e incluso cómo añadirlo en tu código, ¡solo tenemos que llegar al meollo del asunto! Cómo escribir el lenguaje CSS: la sintaxis CSS Hemos constatado que CSS es un lenguaje de estilo: como la propia palabra sugiere, por lo tanto, estamos ante un lenguaje real, es deci...
Sigue leyendo
20Especificidad y herencia CSS
Como se mencionó en las guías anteriores, CSS significa Cascading Style Sheet que, traducido, significa Hoja de estilo en cascada. Este concepto debe quedarte especialmente claro, ya que es un requisito previo para aprender de lo que hablaremos en esta guía. La característica principal de una hoja de estilo es el orden en que los selectores asignan las reglas css a ...
Sigue leyendo
9
Propiedad CSS
21Propiedad CSS: sus valores
A estas alturas seguramente habrás asimilado los conceptos cardinales básicos del lenguaje CSS. Pasemos ahora a explorar sus propiedades. Las propiedades CSS no son más que aquellas características a las que vamos a asignar valores que definirán el estilo concreto de nuestros elementos html. Ya hablamos de esto cuando te contamos sobre la sintaxis CSS. &ique...
Sigue leyendo
22Box model
Cada elemento html, más allá de su personalización mediante el lenguaje CSS, se encierra en una "box" que contiene el contenido (de cualquier naturaleza, desde un texto hasta una imagen) y, progresivamente, avanzando hacia el exterior, una serie de componentes: el padding, el borde y el margen. Con CSS podemos pasar a actuar cambiando las propiedades de estos...
Sigue leyendo
23Background CSS
Hemos dicho que el lenguaje CSS cuenta con numerosas propiedades. Una de las más utilizadas, es sin duda la propiedad genérica "background", que como su nombre indica, está relacionada con los fondos de los elementos de tu página web. Ahora bien, esta propiedad genérica se declina de varias formas, es decir que podemos tratar el fondo de un elemento de...
Sigue leyendo
24Fuente y texto CSS
El lenguaje CSS también nos permite personalizar las fuentes de los textos de nuestras páginas web. Veamos, en esta guía, cómo incorporar una fuente en nuestro proyecto, cuál es la sintaxis a utilizar para asignarla a un selector y cuáles son las propiedades para caracterizar su estilo. Importar una fuente Tenemos dos formas de importar un tipo de f...
Sigue leyendo
25Position CSS
La propiedad position dentro del lenguaje CSS se utiliza para modificar el posicionamiento de un elemento en nuestra página web; sin embargo, solo no es suficiente para lograr el objetivo: por lo tanto, se usa con otras propiedades direccionales: top,right,bottom,left y z-index. En total, la propiedad position tiene 5 valores posibles: static: cada elemento ...
Sigue leyendo
26Pseudo-clases y pseudo-elementos
Pseudo-clases ¿Recuerdas cuando hablamos sobre los selectores de CSS en las últimas guías? No hemos mencionado deliberadamente un tipo: los selectores de pseudoclases. Los selectores para pseudoclases son selectores CSS precedidos por dos puntos y se utilizan para seleccionar elementos en función de determinadas condiciones. Vayamos en orden: ¿qu&ea...
Sigue leyendo
27Animaciones y transformaciones CSS
Hasta ahora hemos hablado un poco sobre cómo diseñar nuestros elementos html. ¿Y si te dijéramos que no necesariamente tienes que crear páginas estáticas? Aunque Javascript es el lenguaje soberano para integrar las animaciones, incluso nuestro amigo CSS puede darnos grandes satisfacciones. En esta guía hablaremos sobre cómo animar y hacer ...
Sigue leyendo
10
Layout responsive
-cover-thumb.jpg)
28Flexbox CSS
Si has llegado hasta aquí leyendo nuestras guías de lenguaje HTML, seguramente recordarás que algunos elementos de los que hemos hablado tienen un comportamiento de bloqueo: como ya se explicó, esto significa que los navegadores agregan automáticamente una línea en blanco antes y después de cada elemento del género, tal que el efecto resultan...
Sigue leyendo
29Media Query
Hablando del flexbox te hemos mostrado un concepto fundamental en el diseño de un sitio web; incluso antes de comenzar a escribir código para crear un sitio web, de hecho, debe cuidar el diseño con minucias. Es por eso que introdujimos el concepto de diseño "mobile-first" en la última guía. ¿No te acuerdas? No te preocupes, lo volvemos a ...
Sigue leyendo