Excelente, ya he hecho varios cursos, y es la primera vez que se toman el tiempo de darnos a entender qué es un atributo y un elemento.
Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Anatomía de una etiqueta de HTML
10/55Recursos
Una etiqueta HTML puede tener tantos atributos como desees, y cada atributo tiene su propia función. En el siguiente ejemplo, veremos la forma en la que se compone una etiqueta HTML:
- No todas las etiquetas llevan una etiqueta de cierre. Las que llevan un cierre son aquellas que albergan un contenido que nos dice a dónde nos va a llevar (nombre de la página, nombre del link).
- Lo que va dentro de la etiqueta de apertura es un atributo (nombre del atributo = href y el valor del atributo es la url).
- El contenido + la etiqueta = Elemento
Aporte creado por: Rudy Minaya, Andrea Otalora.
Aportes 179
Preguntas 15
Ordenar por:
Hola les comparto mi apunte sobre la anatomía de una etiqueta de HTML.
.
Una etiqueta puede tener tantos atributos como desees, y cada atributo tiene su propia función, recomiendo mucho la documentación de Mozilla Developer porque están muy bien explicadas cada etiqueta HTML, y te dice desde qué atributos puede llevar hasta qué hijos puede tener
Este profesor es de los mejores que hay en platzi
Muy bien que se haga una pequeña pausa para explicar la anatomía que tienen las etiquetas en HTML, ahora si.
A seguir Aprendiendo 💚
otra imagen de ejemplo
Mis apuntes de esta clase 🗒✍ espero les sirva🥳💚
Excelente!!, me parece muy bien que le den un espacio a explicar este tipo de detalles, con esto nuestros conocimientos serán mas consistentes. gracias.
Algunas etiquetas de html deben tener etiqueta de cierre por que tienen un contenido. El Opening Tag contiene atributos y valores (pueden ser varios en algunas etiquetas o dependiendo de la etiqueta)
Les dejo un link con una documentación breve sobre la anatomía de una etiqueta. Es de Mozilla dev
Una lista de referencia de etiquetas HTML para el que le sirva.
Estas imágenes también me sirvieron mucho para entender sobre la anatomía de las etiquetas:
Por acá les comparto la anatomía de un elemento de HTML. Esto es super importante y es bastante útil entender que todo, desde el inicio de la etiqueta hasta el final de la misma es el elemento. Entender esto ayudará cuando se apliquen estilos en CSS.
Dejaré esto que te puede servir
Buen día a todos
El ejemplo como lo explica el profesor pero realizado desde el reto.
Estructura de la etiqueta:
Y es allí donde nos redirecciona:
Espero que les guste la carne molida jajajaja.
RESUMEN CLASE 10:
ANATOMIA ETIQUETA
DE HTML
Una etiqueta HTML puede tener tantos atributos como desees.
-
Cada atributo tiene su propia función.
-
No todas las etiquetas llevan una etiqueta de cierre.
-
Las que llevan un cierre (nombre de la página, nombre del link).
-
Lo que va dentro de la etiqueta de apertura es un atributo. (nombre del atributo = href y el valor del atributo es la url).
El contenido + la etiqueta = Elemento
Es importante recordar que una etiqueta puede tener varios atributos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<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>
<main>
<section>
<article>
<h2>Lista de metas por cumplir:</h2>
<hr>
<h3>Este año</h3>
<ol style="line-height: 1.5;">
<li>Poder ayudar a mi familia a estar tranquila económica y psicológicamente</li>
<li>Terminar 7 escuelas de PLATZI en un año.</li>
<li>Poder certificarme como angloparlante</li>
<li>Tener puntaje perfecto en el técnico del SENA</li>
<li>Tener una buena base de libros leidos en el año</li>
<li>Hacer todos los trabajos que me he propuesto</li>
<li>Poner mi empeño en mejorar todos los días mis habilidades de programación</li>
<li>Independizarme</li>
<li>Ser más responsable</li>
<li>Ser un ejecutivo</li>
</ol>
<h3>Para el 2022</h3>
<ol style="line-height: 1.5;">
<li>No perder la independicia</li>
<li>Pagarme mi propio plan de PLATZI</li>
<li>Seguir refinando mi Inglés</li>
<li>Tener muy buen rendimiento laboral</li>
<li>Seguir con mi pasión para programar</li>
<li>Empezar a buscar trabajo en Japón</li>
<li>Al final de año, ya estar en Japón</li>
</ol>
<hr>
<h3>Todas estas metas, tienen como principio</h3>
<hr>
<h2>Disciplina, Pulcritud y Excelencia</h2>
</article>
</section>
</main>
</body>
</html>
Hecho con HTML y CSS en Codepen.io
ANATOMÍA DE UNA ETIQUETA
- No todas las etiquetas llevan una etiqueta de cierre, las que llevan un cierre son aquellas que llevan un contenido que nos dice a dónde nos va a llevar (nombre de la pág, nombre del link).
- Lo que va dentro de la etiqueta es un atributo (nombre del atributo = href y el valor del atributo es la url).
- El contenido + la etiqueta = Elemento
Es fundamental tener las bases para ser unos profesionales en el desarrollo web.
Excelente explicación para los elementos de HTML, me queda claro y ya ando emocionado por ver todo lo demás que se puede lograr. #RoadToCode2.0
Les paso el resumen de la clase compañeros 😃
📝 Una etiqueta HTML tiene una etiqueta de apertura y cierre, no todos cumplen este principio.
siempre es importante aprender cada parte de lo que escribimos
las eqiquetas tienen apertura, pero no todas tienen cierre, las que lo tienen son las que tienen contenido, el elemento es toda la etiqueta en si, el atributo tiene al nombre del atributo y el valor del atributo que seria la url a donde nos lleva, por ejemplo, las etiquetas de ancla, lugo esta el contenido que es lo que se ve luego en la pagina
Esta es una etiqueta simple de Html, pero es una de las mas usadas
<a href="https://google.com">Ir a Google</a>
Como se puede observar el tenemos diferentes propiedades:
- Nombre de la etiqueta (a) : Con HTML5 puedes darle el nombre que quieras, pero existen etiquetas reservadas de html que tienen efectos interesantes mas info
- Contenido (Ir a Google): Es la parte visible al usuario de una etiqueta, según que etiquetas utilices, tienen un estilo pre definido. Pero puedes cambiarlo con css
- Atributos (href=“https://google.com”): un atributo es una señal que dejamos en el código, como referencia, que podemos utilizar para poder controlar eventos o estilos. Puedes poner tantos como quieras
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="description" content="SUPER MARKET SHOPPING" />
<meta name="robots" content="index,follow" />
<title>List SuperM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header>
<h1>lista compras en soriana</h1>
</header>
<main>
<ul>
<li>comida</li>
<ol>
<li>agua simple</li>
<li>chesco</li>
<li>caguamas</li>
<li>
<a
href="https://laverdadnoticias.com/__export/1618353718929/sites/laverdad/img/2021/04/13/caguamas-cerveza-video-viral_crop1618353671627.jpg_682596610.jpg"
>caguamas
</a
>
</li>
<li>volt</li>
</ol>
<li>aseo</li>
<ol>
<li>escoba</li>
<li>fabuloso</li>
</ol>
<li>extras</li>
<ol>
<li>condones</li>
<li>cigarros</li>
<li>
<a
href="https://www.eleconomista.com.mx/__export/1578028873960/sites/eleconomista/img/2020/01/02/shutterstock_379502587.jpg_1093282975.jpg"
>cigarros
</a
>
</li>
</ol>
</ul>
</main>
<footer>
<p>creado con amor</p>
</footer>
</body>
</html>
Negrita
Subrayado
Itálica
tachado
No sabía que ésto era Markdown!!!
Este profesor tiene un mentón capaz de hacer templar a barbilla roja
Chicos les dejo un enlace a un sitio donde pueden investigar un monton de cosas sobre etiquetas, es una guia muy completa
https://developer.mozilla.org/es/
Cuando las etiquetas tienen una etiqueta de apertura y de cierre llevan un contenido, a la etiqueta y todo el contenido se le llama elemento, lo que va dentro de la etiqueta se le llama atributo, existen atributos vacíos atributos que solo llevan una letra o una palabra o atributos compuestos que llevan el nombre del atributo y el valor del atributo.
Html es super interesante, muchos frameworks de desarrollo usan su estructura para crear componentes o Widgets, ahora todo me cuadra
Son ideas mías o el profesor parece uno de los miembros de los power rangers??
** Las partes principales del elemento son: **
- La etiqueta de apertura:
Consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—. - La etiqueta de cierre:
Es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—. - El contenido:
Este es el contenido del elemento, que en este caso es sólo texto. - El elemento:
La etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
Los elementos pueden también tener atributos, que se ven así:
Saludos compañeros dejo mis Apuntes en Notion
https://www.notion.so/Anatomia-de-una-etiqueta-d0185a2d96264d1399e89ccb182d38fd
Interesante la Anatomía de las etiquetas de HTML.
Que buena explicación
Perdon solo como un Breack, si pones el video en velocidad 0.5x es como hablaria el profe estando Ebrio, jejeje Ahora continua estudiando cariño.
Con paciencia y salivita …. decía mi abuela.
Estructura de la etiqueta de html
ejemplo:
Diego eres el mejor explicando. Ojalá hubiese arrancado con este curso! Como sufrí con los Frontend Developer. Este curso viene excelente!
Anatomy of an HTML element:
Hola aquí dejo mi trabajo :)
Información importante
C:\Users\USER\Desktop\luismoran\tallerindex.html
Veo a muchas personas que comparten contenido que dejan en los archivos de contenido del curso y otros comparten la información que se encuentra en la parte inferior de la pantalla de video y se los atribuyen como propios. Qué falta de honestidad.
HTML Element(openingTag(atttribute( name + value))
Subo la imagen del ejercicio
Es importante conocer esta estructura para futuros proyectos!
Una etiqueta puede tener tantos atributos como desees, y cada atributo tiene su propia función
Nota:
No todas las etiquetas tienen etiquetas de cierre y es importante que podamos diferenciar cuales si y cuales no.
Clase 10 - Anatomía de una etiqueta de HTML
¿Cuál es la anatomía de una etiqueta HTML?
- Etiqueta de apertura.
- Atributo.
- Nombre del atributo.
- Valor del atributo.
- Atributo.
- Contenido.
- Etiqueta de cierre
¿Qué tipos de atributos hay en HTML?
- Compuestos
- Vacíos.
¿Qué es un atributo compuesto?
- Es un atributo que tiene un valor.
¿Qué es un atributo vacío?
- Es un atributo que no tiene ningún valor, solo su nombre
¿Cómo se le conoce a una etiqueta HTML compuesta por todas sus partes?
- Elemento.
Etiqueta HTML explicación
En este documento se encuentran todas las etiquetas de HTML muy bien explicadas:
https://developer.mozilla.org/es/docs/Web/HTML/Element
Un buen resumen de la anatomia de una etiqueta
Este curso me esta encantando.
Excelente explicación con las etiquetas HTML, solo les decia parametros como en programación
![]()
file:///C:/Users/Diana/Desktop/MIS%20PROYECTOS/index.htlm.html#
Anatomia de las etiquetas
Anatomía de la etiqueta <a>
<a href=”link”> El texto </a>
Toda la linea le tomamos cómo un elemento.
Todo lo conformado en <a href=”link”> se denomina opening tag es lo que da inicio al elemento.
El contenido lo podemos encontrar en el espacio entre los dos tags es decir: El texto
Y el close tag es lo que cierra el elemento es decir: </a>
Dentro del opening tag podemos encontrar dos segmentos: NAME y VALUE
El name se refiere a el “a href” que denomina que función estamos usando y el value es el “link” dentro de este tag.
Características principales de una etiqueta HTML:
Hasta ahora no entendia bien cual era la anatomia correcta de HTML, con esta clase ya me quedo mas que claro ❤️
Las clases han sido excelentes para mí, dado que está explicado cada elemento y para que sirve, en mi forma de aprender es genial contar con toda esta información.
Explicacion muy clara, excelente profesor.
<html lang=“es”></html>
<head>
</head>
<body>
<header>
<h1>supermacado patito</h1>
<h2> lista de productos existente</h2>
<nav>
<ul>frutas</ul>
<ol>
<li>pera </li>
<a
href=https://www.youtube.com/watch?v=CoAXr9tcyIs
target="_blanck"
>
<li>mango</li>
<a
href=https://www.youtube.com/watch?v=c4hsun-IURM
target="_blanck"
>
<li>durazno</li>
<a
href=https://www.youtube.com/watch?v=XxlbQs7jO08
target="_blanck"
>
<li>fresa</li>
<a
href=https://www.youtube.com/watch?v=SB0QCUkf-n4
target="_blanck"
>
</ol>
<ul>verduras</ul>
<ol>
<li>tomate</li>
<a
href=https://www.youtube.com/c/TomateHelado
target="_blanck"
>
<li>pimenton</li>
<a
href=https://www.youtube.com/watch?v=oH1lnWUzGkY
target="_blanck"
>
<li>cebolla</li>
<a
href=https://www.youtube.com/watch?v=xFeyZQ2tNZQ
target="_blanck"
>
</ol>
<ul>carnes</ul>
<ol>
<li>pollo</li>
<a
href=https://www.youtube.com/watch?v=pS73hquOCcg
target="_blanck"
>
<li>gallina</li>
<a
href=https://www.youtube.com/watch?v=cZhm3S63tYY
target="_blanck"
>
<li>res</li>
<a
href=https://www.youtube.com/watch?v=cZhm3S63tYY
target="_blanck"
></a>
</ol>
</footer>
</body>
</html>
Interesante!!
Información resumida de esta clase
#EstudiantesDePlatzi
Una etiqueta está constituida de la siguiente manera
- Etiqueta de apertura
- Atributo
- Elemento
- Etiqueta de cierre
Muchas gracias
Dejo screen shot de mi lista de compras.
Les comparto esta imagen !
Distinguir los atributos y su función en HTML son importantes en el momento de aplicarlo en un desarrollo web, porque de ahi sabremos que elementos podremos distinguir y luego incluir.
Me dió curiosidad saber a dónde llevaba ese link, lo dejo por si quieren curiosear xd
LISTO PARA PRESENTAR EL QUIZ
-
Tiene una etiqueta de apertura (opening tag) y una cierre. No todas llevan etiqueta de cierre. En este caso porque necesita que dentro del enlace haya texto de explique a dónde nos dirige al hacer clic. Ese es el contenido.
-
La etiqueta y contenido se llama elemento.
-
Lo que va dentro de la etiqueta se denomina atributo. En este caso lleva el nombre del atributo (href) y el valor (la url).
Aquí encontrarás buena documentación en español de Html
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML
Las etiquetas pueden tener varios atriutos (como el codigo más abajo), que pueden ser muy largas (como en código más a abajo), que se pueden volver dificiles de leer en un editor de código (como no está en el codigo mas abajo).
<a href="https://www.directoalpaladar.com/recetario/15-recetas-ajo-como-protagonista-capaces-cautivar-a-victoria-beckham" target="_blank" title="15 recetas con ajo como protagonista">Ver recetas con ajo</a>
Este “desorden” para leer es un poco engorroso y se puede solver separando con saltos de línea cada atributo de cada etiqueta
<a
href="https://www.directoalpaladar.com/recetario/15-recetas-ajo-como-protagonista-capaces-cautivar-a-victoria-beckham"
target="_blank"
title="15 recetas con ajo como protagonista"
>Ver recetas con ajo</a>
Igualmente para VS Code existe Prettier que hace una “embellecimiento” del codigo (en preworking esta el dato para instalación), y este es uno los casos en que es útil esta extensión.
Fácil y claro de entender, para poder recordarlo más fácil
Otro ejemplo como aporte:
- Las etiquetas pueden tener multiples atributos, y hay casos en los que los atributos pueden no llevar un valor.
Ahora tiene un poco mas de sentido y mas claro cuando freddy en el curso de programacion hablaba de atributos a las funciones 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?