¿Qué es HTML y CSS? ¿Para qué sirven?

2/23
Recursos

Aportes 75

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Esta es la imagen que más se suele usar para describir qué es HTML, CSS y JavaScript 👇
.

.
Dejemos por ahora de lado a JavaScript y centrémonos en lo que nos importa 👀. Está bien representar a HTML como “el esqueleto” y a CSS como “la parte visual”, pero… ¿Realmente qué significa todo esto? 👇
.
Cuando hablamos de “esqueleto” nos referimos a que es la estructura de nuestro contenido. Es decir, es cualquier cosa que queramos poner en nuestra página web. Por ejemplo, imagina que quieres poner un botón… ¿Cómo lo haces? ¡Con HTML! Imagina que necesitas poner una caja de texto para que el usuario escriba, ¿cómo lo harías? 🤔… ¡Con HTML! ¿Y si quieres poner un título cómo lo harías?.. Tú sabes la respuesta 😉.
.
HTML nos permite poner dentro de nuestra página web cualquier cosa que queramos poner. Básicamente usar HTML es decirle al navegador: “oye quiero que pongas esto, esto y esto otro”, eso es todo 😄.
.
¿Y CSS? 🤔… Bueno, el navegador te pondrá los estilos por defecto. Con CSS puedes literalmente agarrar cualquier cosa que hayas puesto con HTML y decirle:
.

“Quiero que tengas este color de fondo, también quiero que tengas este tamaño y quiero que tengas bordes redonditos porque se ven bien cool 😎”.

.
¡Sí! Con CSS puedes personalizar tus elementos, o sea, darle estilos. Por eso decimos que “CSS” es la parte visual 💅.
.
Por cierto, aunque el home de Platzi cambió, quiero que vean cómo incluso entre diferentes versiones de la misma página lo que es HTML y CSS siempre se van a conservar 👀. ¡Es que HTML y CSS son los dioses de la web! Gracias a ellos dos podemos hacer páginas web. Y sí, todas… TODAS las páginas web tienen HTML y CSS 😏
.

Les dejo este ejemplo divertido que me encontré 😄

Les comparto, mis apuntes. 😄

HTML

Son siglas en ingles de HyperText Markup Language o Lenguaje de Marcado de Hipertexto.

¿Para qué sirve?

Nos sirve para estructurar toda nuestra página web, si hacemos la referencia con el cuerpo humano es como el sistema óseo, lo vamos a utilizar para colocar texto, imágenes, botones, videos, etc. Nos da una estructura inicial.

CSS

Son siglas en inglés de Cascading Style Sheets u Hoja de estilos en cascada.

¿Para qué sirve?

Lo usaremos para darle vida a nuestros sitios web, si hacemos referencia con el cuerpo humano sería el aspecto ya sea la altura, contextura física, color de piel, cabello, etc.

Nos permite estilizar todo nuestra estructura de HTML ya sean textos, imágenes, botones, etc.

HTML y CSS

Estos son un gran complemento, trabajan juntos.

HTML: nos ayuda a darle una estructura a nuestra página web.
CSS: Nos ayuda a darle estilos a los componentes de la estructura del HTML.!

Un pequeño resumen:

Apuntes de la clase:
HTML

  • HTML: lenguaje de marcado de hipertexto

  • HTML nos sirve para estructura nuestra pagina web.

CSS

  • CSS: hojas de estilo en cascada

  • CSS: nos permite estilizar nuestros textos, imágenes, etc.

Herramientas de Google Chrome

  • Podemos hacer clic derecho en una página e inspeccionar como está construida

  • Por un lado arriba veremos el código HTML, las etiquetas.

  • Y en la parte de abajo veremos el código CSS, las propiedades y sus valores.

Ahh! El antiguo Home! Me gustaba más, personalmente. Podía repasar contenido de los aportes de los compañeros cuando alguien mas comentaba

  • HTML (lenguaje de marcas de hipertexto), es el lenguaje donde se define la información o el contenido del documento, el formato de los archivos es .html

  • CSS (cascading style sheets), el lenguaje donde se especifica el diseño del documento, maneja todo lo relacionado con la parte visual, el formato de los archivos es .css

  • JavaScript, el lenguaje que hace que todo sea interactivo, es realmente el lenguaje de programación que nos permite crear sitios web, el formato de los archivos es .js

El ejemplo del lego con que Platzi tambien explica ayuda mucho

HTML es un lenguaje de marcas de hipertexto, y aquí es donde se estructura toooda la página web. CSS nos da la vida a nuestras páginas web agregando estilos a TODOS los elementos que se insertan al documento html.

Les comparto esta página en donde pueden encontrar mucha documentación sobre desarrollo web.
Espero que les sirva 😄

HTML y CSS, son fáciles de entender y de usar, o al menos en mi experiencia lo fue … talvez, no para todos.

Práctica 1. Repitiendo los pasos vistos en clase, realice una inspección al sitio web de platzi y explica un bloque de código css de su preferencia.

Ejemplo:

.Question-answer {
    color: #8da2c0;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #8da2c0;
    border-radius: 0.5rem;
    padding: 12px 40px 12px 12px;
}


Este bloque de código contiene las características de estilo que tendrá toda caja en el html que asginemos con el nombre .Question-answer, entiéndase una caja como un div en el html (al menos eso es lo que entiendo al momento de hacer este aporte)

El bloque CSS inicia donde abren las llaves y finaliza donde cierran (duh), dentro de el se definen características como el color que está dado por su valor equivalente en código ASCII, el tamaño de la fuente, la cual esta dada en la unidad de medida rem, el alto de la linea (no se especificamente a que linea se refiere), el borde de la caja donde se aloja todo el contenido del div , el radio del borde (tampoco me queda claro como se mide) y el padding que son algo asi como márgenes alrededor de la caja.

Podemos observar a detalle la definición de un padding en el siguiente enlace:

https://developer.mozilla.org/es/docs/Web/CSS/padding

HTML es un lenguaje de marcado utilizado para definir la estructura y contenido de una página o documento web.🦴

El CSS es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML).🎨

HTML = Es un lenguaje de marcado de hipertexto. Nos ayuda a estructurar una página web.
CSS = Sus siglas en significan Hojas de Estilo en Cascada. Es el lenguaje que le da vida a nuestros sitios webs.

me encanta volver y poder seguir la ruta que deje hace un par de meses y volver a retomar con cursos actualizados

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Yo quiero una silla como la de Esteff, se ve muy comoda.
Excelente curso, soy backend y siempre le tengo cierto miedo al front

Me encanto la forma de explicar cada concepto, muy genial la profe 😃

HTML: es la estructura a nuestra página web es como el esqueleto.
CSS: Nos ayuda a darle estilos a los componentes de la estructura del HTML. - aporta el diseño/estilo del sitio web.

HTML marca la estructura con etiquetas
CSS define los estilos con reglas
JS permite programar interactividad y funcionalidad

Platzi en los videos deberian agrandar la letra y no utilizar fondos negros con letras oscuras…La vista primero…

Excellent

html es el esqueleto como esta estructurado y css es el diseño que se da

Conceptos básicos que vale la pena volver a ver una y mil veces… 🤓

Geniales las clases relacionadas para ver el potencial que abarca HTML & CSS. Abre el panorama para posteriormente ver que camino seguir.

HTML y CSS

HTML: Estructura

Usa etiquetas HTML para marcar el contenido, es así que le dice al navegador cual es un link, cual es una imagen, cual es un texto, cual es una cabecera, etc.

CSS: Apariencia

Haciendo uso de las etiquetas, clases, pseudoclases e identificadores, asigna colores, tamaños, animaciones, etc a la estructura generada con HTML.

Para que se pueda entender fácilmente, hice este resumen espero les ayude 😃

Html

Es un lenguaje de marcado de hipertexto, que sirve para estructurar una página web, siendo un esqueleto

CSS

es el que da diseño, Hojas de estilo en cascada que le da vida al esqueleto

Siempre se usa de ejemplo para explicar el HTML, CSS y JS a una persona. A mi me gusta imaginarme el sitio web como una casa. Me explico:
HTML: Son las puertas, ventanas, mesas, sillas, etc. Los elementos que conforman la clasa.
CSS: Son el color de la puerta, el tamaño de la mesa, la posicion de la ventana, etc. Viene a ser las caracteristicas visuales de los elementos de la casa.
JS: Seria la automatizacion de la apertura y cierre de cortinas y ventanas, etc. Viene a ser el control sobre los elementos que conforman nuestra casa. (Una casa del futuro, llegado a este punto)

¿Qué es HTML y CSS? ¿Para qué sirven?

HTML: Lenguaje de marcado de hipertexto, esto nos indica que HTML nos va a servir para estructurar toda nuestra página web.

CSS: Hojas de estilo en cascada, nos va a dar vida a todos nuestros sitios web. Con CSS podemos estilizar la estructura que creamos con HTML, como pueden ser textos, imágenes, botones etc.

HTML: Lenguaje de marcado de hipertexto. Es el que se encarga de estructura la página web.

CSS: Hojas de estilo en cascada. Es el que se encarga de estilizar la estructura construida con HTML.

excelente resumen. me encanta las clases de la profe

Me gustó mucho lo sencillo que la profe hace ver el contenido del curso.

HTML es la base y esqueleto 💀 de la pagina web, mientras que el CSS seria la apariencia que va a tener la pagina web 👨🏻‍🦰

Ame el cuadernito

Estefany enseña muy bien! Se ha convertido en una de mis maestras favoritas 😄

Significado de HTML y CSS

Una explicacion fabulosa de lo que es CSS y HTML, son la pareja perfecta.

De acuerdo al temario se parece mucho al Curso definitivo de html y css pero creo que siempre es bueno ver otra versión para reforzar temas y una explicacion diferente.

A pesar de tener base en HTNL Y CSS recomiendo llevar este curso mas no saltarse al curso DIFINITIVO

Html: con el voy hacer los planos y estructurar las ideas de como va ir mi pagina.
Css: Con el voy darle estilo, color, dimensiones, acomodar las ideas que ya tenia planeado en html.
y mas adelante.
JavaScript: con el voy a poder darle mas vida a mi pagina, dandole complementos y interactuar con ella.

Hola 😄 hice esta imagen con figma, para representar como se puede ver una estructura en html. Espero que les sirva 😃

press ❕
press Tab
👇👇👇
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>

</body>
</html>

Lo que importa es lo de adentro

Viva HTML

Acabo de descubir que con la consola aparte de poder ver todo el codigo de una web, puedes irte a la parte del style (está en la parte de abajo cuando abres la consola en la pestaña Elements) y activar o desactivar lineas de codigo que están ahi programadas. Esto cambia la apariencia porque literal estás modificando el css de la pagina de platzi (Obvio solo en tu navegador)

No lo sabía y me parece genial.

HTML: Es aventar las cosas dentro de mi cuarto.
CSS: Acomodar las cosas de mi cuarto.

BUena explicacion

HTML: Estructura
CSS: Estilos
JS: Dinamismo

Se ve muy entretenido este curso

Conceptos para recordar siempre

HTML: "Lenguaje de Marcado de Hipertexto"
En inglés: “HyperText Markup Language”
.
HTML:
Con este lenguaje se construyen las páginas web, esto nos indica que básicamente, que HTML nos va a servir para crear la estructura de toda nuestra página web.
.
.
**CSS: **"Hojas de Estilo en Cascada"
En inglés: “Cascading Style Sheets”
.
CSS:
Es el lenguaje de estilos utilizado para escribir la presentación de documentos HTML o XML. Que es en realidad lo que le va a dar vida a todas nuestras páginas o nuestros sitios web.

explicadito bien menudito. espero aprender cosas nuevas sobre css

HTML: Lenguaje de marcado de Hipertexto-> estructura inicial
CSS: hojas de estilo en cascada, estilizar-> texto, imágenes, etc.

me encanta este curso , aparte es nuevo

Las bases para iniciar en el mundo del desarrollo web. ¡¡A darle!!

cuando primero haces el curso de html y css, y despues ves este curso se siente extraño

aprender HTML es escencial para poder trabajar con diferentes lenguajes de programación no solo js, es muy intiutivo aunque no se dejen engañar es mas que solo poner texto

HyperTextMarkedLanguage
Leguage marcado de hipertexto

Cascading Style Sheet

Hojas de estilo de cascada!

Excelente clase. Estoy totalmente de acuerdo con que el inspector de elementos es nuestro mejor amigo. Lo uso día a día en mis desarrollos para absolutamente TODO. Debuggear, hacer animaciones, posicionar, y más.

Éxitos

html, es la estructura de la pagina, css es hacer esa estructura bonita ❤️

Aqui dejo algunas buenas prácticas de HTML, por si les sirve, es de este articulo

Declara el DOCTYPE

<!DOCTYPE HTML>

Cierra las etiquetas

<div>
<p>Contenido</p>
<p>Contenido</p>
</div>

<aside>
✅ Es de reseñar que en HTML5 se agregaron las etiquetas vacías

</aside>

Uso del atributo ALT en imágenes

Utilizar esta característica optimiza el acceso debido a que, por ejemplo, los usuarios utilizan la información que aparece en atributo de imágenes, para ubicarse en el contenido de las imágenes.

<img src=”img/logo.png” alt=”Logo”>

Etiquetas semánticas y evita la Divitis

Divitis se define como la técnica en la cual se utilizan divs para sistematizar toda la información del sitio web. Y es que si bien esta técnica puede funcionar, no es considerara una buena prácticas HTML avanzado, pues perjudica la legibilidad y recarga al código.

<header></header>
<nav></nav>
<main>
<article></article>
<article></article>
</main>
<footer></footer>

😊

  • HTML: Es un lenguaje de marcado de impertexto, nos sirve para estructurar la información en nuestra pagina web.

  • CSS: Hoja de estilo en cascada, nos sirve para darle estilo a nuestras paginas web (color, tipo de letra, posición, etc.).

Super tierna la explicación del equeletito 😍

HTML = Hyper Text Markup Language
Nos sirve para la estructura de la Pagina o sitio web

Definición de HTML

Como visualizar el inspector de elementos.

QUE ES HTML Y CSS

Html lenguaje marcado de hipertexto

estructura de nuestra pagina inicial

Css Hojas de estilo en cascada

lenguaje que le da vida a nuestro esqueleto html

  • colores
  • tamaños
  • ubicaciones
  • mas

La estructura y el estilo sin vida no son nada, por ello es necesario aprender JS