Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

HTML: anatomía de una página web

6/55
Recursos

HTML (HyperText Markup Language) es un lenguaje de marcado de texto. Se utiliza para darle una estructura al sitio web que estás visitando.

Estructura básica de HTML en una página Web

  • Container: contenedor principal
  • Header: cabecera de la página. Aquí usualmente encuentras el logo y el menú de navegación del sitio.
  • Main content: estructura principal. Por ejemplo, el feed o lista de publicaciones de una red social.
  • Sidebar: contenido secundario de una página, que usualmente se encuentra a los lados del contenido principal (o main).
  • Footer: pie de página. Esto se encuentra al fondo del sitio web, salvo en casos de sitios web donde el scroll (o navegación hacia abajo) es infinito, por ende, no tendría sentido ponerlo al fondo.

Las etiquetas en HTML nos ayudan a diferenciar en qué parte del contenido nos encontramos.

La web se conforma de tres conceptos:

  • URL: Uniform Resource Locator. El identificador único del sitio en el navegador (por ejemplo: https://platzi.com).
  • HTTP: Protocolo de transferencia de hipertexto. Es el estándar que se utiliza para enviar datos a través de paquetes entre el cliente y el servidor.
  • HTML: es el código que se emplea para estructurar el contenido de tu web, y darle sentido y propósito.

HTML son siglas que corresponden a Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto).

  • Hyper Text significa que el texto tiene interactividad, conexión con otros documentos.
  • Markup significa que le pone etiquetas a los elementos. Por eso también se le conoce como un lenguaje de etiquetas.
    HTML es un lenguaje interpretado. Además, HTML es un estándar, así que no importa desde qué navegador o dispositivo se ejecute, el código sigue siendo el mismo en cualquier sitio.

Aporte creado por: Obed Paz, Christian Tambo, Marcelo Chavarría

Aportes 1911

Preguntas 79

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Yo me encontré que la de CNN es muy parecida al ejemplo que nos compartió Diego 👇🏼

Un poco de su propia medicina 😃

La web se conforma de tres conceptos:

  • URL => Uniform Resource Locator.
  • HTTP => Protocolo de transferencia de hipertexto.
  • HTML

HTML es el código que se utiliza para estructurar el contenido de tu web, y darle sentido y propósito.

HTML son siglas, Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto).
Hyper Text  significa que el texto tiene interactividad, conexión con otros documentos.
_Markup _significa que le pone etiquetas a los elementos. Por eso también se le conoce como un lenguaje de etiquetas.
HTML es un lenguaje interpretado.
HTML es un estándar, así que no importa desde que navegador, que dispositivo se ejecute, es lo mismo en cualquier sitio. Sigue siendo el mismo código.

HTML (HyperText Markup Language) es un lenguaje de marcado de texto.

Anatomía de una página Web:

  • Container.- Contenedor principal
  • Header.- Cabecera de la página
  • Main content.- Estructura principal, por ejemplo el post de un red social.
  • Sidebar.- Contenido secundario de una página.
  • Footer.- Pie de página.

Hay etiquetas en HTML que nos ayuda a diferenciar en donde estamos.

Encontré un complemento de Google para tomar los pantallazos completos de las paginas, llamado GoFullPage, espero sea de gran ayuda para los que quieran hacer la tareita!! 💚

En esta pagina este es el HEADER

Este es el MAIN

Este es el FOOTER

Si la primera página web fue una página blanca con hipervínculos para saltar a otras páginas ¿Cómo es que tenía hipervínculos para saltar a otras páginas si era la primera página? ¿Había otra página antes de la primera página? Esta duda no me va a dejar dormir.

Estructura de HTML

Página de un periódico local

Página de mi canal

Este es el ejemplo que analice de un web https://duarte.com
Mantiene siempre fijo el diseño del footer y el menú en texto más no en diseño, el header lo personalizan acorde a cada sección y el sidebar solo en la sección del blog

Esta es una página estática

Tomé GitHub como ejemplo 😄


Me imagino que el footer de youtube debe estar dentro del menu de navegacion

Dejo más información sobre el tema, espero les sirva 😃

Listo, aquí esta mi resultado. 😁 Es sobre Machu Picchu el lugar que sueño conocer.

Hola! Estoy participando del challenge del 2022. Esta es mi tarea sobre esta clase:

Comparto la estructura de Gmail, a mí parecer 😁

Buenas tardes compañeros! comparto mi actividad desde Argentina. Elegí analizar la pagina de Ubisoft!
En la misma se distinguen claramente un Header con su logo y barra de navegación mas botones para ingresar al carrito y sign in y footer al final.
Lo que distingo (a criterio propio, corrigan si estoy entendiendo mal los conceptos) es que tanto Main Content como Sidebar son una fusión, donde el mismo main es un bar para scrollear.


Saludos!

  • La parte verde es el header con un menú de varias opciones y categorías.
  • La parte amarilla es el main content donde despliega muchas secciones con diferentes series y lo que he visto recientemente.
  • La parte anaranjada es el footer con datos de la aplicación y más info del servicio.


Estoy haciendo este curso por segunda vez

¿Qué opinan le agregarían algo?


Anatomía de página web de una librería 😃.

Dejo acá mi aporte con una página de un juego de rol argentino muy conocido que me gusta mucho
!

prometo hacer algo de la escuela de diseño para la próxima.

Corrijan me si está mal plis.

desarrolle una pequeña info para explicarles como procesa el navegador el css que usamos en nuestra web, esper que les guste 😃


HEADER, MAIN CONTENT

Hice el ejercicio con dos Web Apps.




Les recomiendo mucho realizar el ejercicio porque, les ayudará en futuros cursos como en: Figma, Ux Design…etc.

Mi aporte

Un pequeño aporte para seguir estudiando, dejare la otra parte al inicio de css.

https://learn.shayhowe.com/html-css/building-your-first-web-page/

Header y logo

Reto:

Reto1!!!

HTML: Lenguaje de marcado de texto

Anatomía de una página web:
<container>
<header>
<sidebar>
<main content>
<footer>

Quise probar con la página de ChatGPT3, es bastante sencilla entonces costó un poco identificar los elementos, pero yo lo deduje así:

Clase 6 - HTML: Anatomía de una página web


¿Qué significan las siglas HTML?

  • Hypertext Markup Language.

¿Cuál era la apariencia que tenía la primera página web que se creó?

  • Esta era una página totalmente blanca que contenía algunos hipervínculos.

¿Cuál es la función que tiene HTML que en sus inicios lo hizo tan revolucionario?

  • Los hipervínculos que nos permitían saltar de página en página.

¿Por qué es importante que entendamos la anatomía de una página web?

  • Porque seremos capaces de identificar las diferentes partes que componen una página web desde que está en su etapa de diseño.

¿Cuál es la anatomía básica de una página web?

  • Container (Contenedor).
    • Header (Encabezado).
      • Logo (O nombre de la empresa).
      • Navigation (Menú de navegación).
    • Main Content (Contenido principal).
      • Sidebar (Contenedor secundario).
    • Footer (Pie de página).

¿Todas las páginas web tienen como su anatomía la forma básica, por qué?

  • No, su ubicación no es importante a la hora de construir una página web, lo que sí debemos de tener en cuenta son las secciones especiales que necesita una página web y su orden orden.

¿Qué información contiene la sección Main Content?

  • La información principal de la página web.

¿Podemos dividir el contenido que tiene la sección Main Content en varias secciones?

  • Sí.

¿En qué lugar está el Footer de Facebook y por qué?

  • Este está en una barra lateral y el motivo de su ubicación es porque en Facebook existe algo llamado Scroll infinito, lo cual hace que nunca lleguemos al final de la página web.

Aquí mi aporte: Salió Petro y Madura… jaja


Hola, mi nombre es Delia, estoy muy agradecida de poder tomar este curso y me agrada mucho que tengamos que hacer trabajos,. Aquí está lo que encontré de una página que me gusta mucho, tiene el Header y el Main Content, eñ Footer está más abajo pero se tenía que hacer un poco de croll y no sse veía en Footer en la imagen de la primera página, por eso no estáaquí, pero identifiqué el Footer más abajo, en donde se encontraba información para cursos y datos de contacto.
Saludos cordiales
Delia

Youtube

El header es la parte donde esta el logo de youtube situado arriba a la izquierda junto con una barra de navegación para buscar videos y diferentes herramientas a la derecha.

El main content sería toda la parte en la que aparecen los videos y shorts.

Esta pagina no cuenta con un footer debido a que el scroll es infinito.

Anatomía Google Calendar



Pude encontrar el header, el main content y side bar.
Creo que en este caso la sección de comentarios era muy larga para encontrar el footer, no estoy seguro.

Creo que iría así la anatomía de LinkedIn

![](

Página de Fluency Academy

❤🐧❤

He aquí mi más sincera aportación, mis páginas favoritas ![]analizadas 😃

No estoy seguro si toda la parte de arriba de Mi cuenta y contáctanos sería una sidebar, o si sería un segundo navigation. Yo lo identifiqué como sidebar dentro del header.

Gracias Platzi

2 ejemplo


https://dictionary.cambridge.org/
El main contiene varias secciones como el buscador y otros artículos, pero no sé si hay un sidebar, ¿me pueden confirmar por favor?

Información resumida de esta clase
#EstudiantesDePlatzi

  • HTML - Hypertext Markup Language, es un lenguaje de marcado de texto

  • Etiqueta = Hipervínculo, es el que nos permite ir a otras páginas

  • Las páginas tiene una manera de ser o comportarse, no todas las páginas son iguales, pero si comparten una estructura

Hola a todos. Entré a la página de la NASA y claramente se identifican las partes de la página.

¿Html no es un lenguaje de programación porque no utiliza sentencias lógicas?

espero haberlas identificado bien jajaja

Lo realice con canva y si tiene una estructura muy parecida

Como ejemplos del ejercicio propuesto en la clase pongo primero a Youtube Esta bien detectado cada elemento?

El otro ejemplo que quise ver fue GitHub