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