HTML: anatomía de una página web

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.

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