Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

Funciones de las etiquetas HTML más importantes

8/43

Lectura

Al hacer en nuestro editor de código html:5 vemos que nos aparece la siguiente estructura:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Veamos la descripción de estos elementos:

Funciones de las etiquetas-01.png

Si por ejemplo queremos añadir en nuestro documento estilos o JavaScript, lo hacemos con las etiquetas <style> y <script> respectivamente, que a su vez deben ir dentro de la etiqueta raíz <html>, algo así:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
    /* Aquí iría nuestro CSS */
</style>
<script>
    // Aquí debería ir nuestro JavaScript
</script>
<body>
  
</body>
</html>

Descripción de algunos elementos vacíos:

Funciones de las etiquetas-02.png

Descripción de las etiquetas semánticas para la estructura base de nuestra página:

Funciones de las etiquetas-03.png

Descripción de otras etiquetas muy usadas:

Funciones de las etiquetas-04.png

Aportes 370

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Me gustaría hacer unas aclaraciones que al menos desde mi punto de vista son importantes.

  1. <!DOCTYPE html> no es una etiqueta, simplemente es una instrucción que se le da al navegador para informarle que versión de HTML estaremos usando.

  2. En la parte donde se nos menciona las etiquetas semánticas, hace falta agregar la etiqueta <main></main> en la cual se agrega el contenido principal del que nuestro sitio web habla.

Por ejemplo:
Si estamos realizando un sitio web de venta de apartamentos, nuestra información principal sería los precios, características del apartamento, etc., todo esto iría dentro de la etiqueta <main></main>, ya que es el contenido principal de nuestro sitio web.

  1. También, para usar la etiqueta <section></section> se deben cumplir ciertos requisitos:

    • Debe ser el inicio de otro tema diferente al principal.
    • Dentro de la etiqueta <section></section> se debe iniciar con un heading, diferente a <h1></h1>
  2. Solamente debe existir una etiqueta <h1></h1> por documento, ya que esta etiqueta marca el título de nuestra página, es decir que en el documento index.html, nosotros.html, contacto.html (ejemplos de secciones en nuestro sitio web), deben existir solamente un <h1></h1>

  3. También en la descripción de la etiqueta <button></button> se nos menciona algo llamado “acción”, actualmente, esto ya no se utiliza, ya que las “acciones” se controlan desde JavaScript.

Espero evitar confusiones y ayudar a aclarar dudas a personas, ya que a pesar de que HTML puede ser “relativamente sencillo”, muchas veces te puedes topar con dudas y es mejor aclararlas desde el comienzo, así no arrastras errores en tu proceso de aprendizaje.

(si existe algún error de explicación, con gusto lo arreglo)

En caso del poema, el problema sugerido con la etiqueta <br>, me gustaría agregar la etiqueta <pre> que resuelve este problema de una manera más sencilla. Tal como define la W3C, es una etiqueta que conserva tanto los espacios como los saltos de línea. Así por ejemplo,

<pre>
	Las rosas son rojas,
	Las violetas son azules...
</pre>

Proporcionaría la misma salida.

Genial! Aunque me gustaría hacer unas correcciones:

Por buenas prácticas y para evitar problemas, head y body deberían ser las únicas 2 etiquetas hijas de html, esto significa que ni script ni style deberían estar al mismo nivel que el body.

Por buenas prácticas, la etiqueta style debe escribirse justo antes del cierre de head y la etiqueta script justo antes de cierre de body, en el caso de script es lo más importante, pues al ponerlos antes del cierre del body nos ahorramos problemas con JavaScript después:D! El ejemplo correcto sería este:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* Aquí iría nuestro CSS */
  </style>
</head>
<body>
  <script>
    // Aquí debería ir nuestro JavaScript
  </script>
</body>
</html>```

Recordemos que los meta datos siempre van dentro de las etiquetas head, ya que en esta etiqueta va todo lo que no se visualizará en nuestra página web, algunos metadato son:

META CHARSET
<meta charset=”utf-8″/>
Nos sirve para que el navegador interprete todos los caracteres que utilizamos en nuestro idioma, como nuestra letra Ñ, además de poder interpretar todos los idiomas existentes.

META AUTOR
<meta name=”author” content=”Nombre del autor del sitio web”/>
Nos sirve para identificar al autor de un sitio web y solo debe escribirse una metatag como esta en la página.

META DESCRIPTION
<meta name=”description” content=”Descripción del sitio web”/>
Nos ayuda a mostrar en los resultados de búsqueda de que trata nuestro sitio web.

META KEYWORDS
<meta name=”keywords” content=”Palabras clave del sitio web”/>
Nos ayuda a declarar las palabras clave de nuestro sitio web para que sea facil de encontrar

un ejemplo de la etiqueta antes mencionada seria la palabra “PLATZI” ya que puede que las personas no sepan como se escribe correctamente, entonces las palabras clave podrían ser “PLATZI” “PLATSI” “PLACSI” “PLAXI”, como son palabras clave, declaradas en el meta anteriormente mencionado, la gente puede acceder a PLATZI de forma precisa.

Espero les guste mi aporte.

¡Excelente!
Algunos puntos que me gustaría aportar:
<html lang=“en”> - en esta etiqueta lang=“en” hace referencia a que en el documento estaremos usando el idioma inglés (lo cual en principio no es porque estamos haciendo el curso en español)… aquí podemos cambiar en por es. Creo que sería una buena práctica si estamos construyendo un sitio en español.
<meta charset=“UTF-8”> - cuando construimos un sitio web que requiere carácteres que no tenemos en el idioma inglés, por ejemplo la ñ y las tildes, necesitamos aclararle al navegador que queremos usar un formato de codificación de carácteres que sí incluya estos; en este caso UTF-8 es un formato que lo incluye. Si quitas este meta de tu documento y pruebas colocarle tildes y ñ a un texto, es posible que no aparezcan*.
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”> - aquí le indicamos a nuestra página cómo debe comportarse el ancho del contenido en los dispositivos. Viewport se refiere al área visible de nuestra página en la pantalla del usuario. width=device-width le indica que el ancho de la página será igual al ancho de la pantalla del dispositivo del usuario. initial-scale es el nivel zoom qué tendrá la página cuando empiece a cargar el contenido.
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”> - básicamente Internet Explorer era un bicho raro que leía las páginas de forma distinta a otros navegadores. Entonces hay que indicarle que somos friendly con el bicho raro.

  • Tengo entendido que algunos navegadores ya pueden reconocer los caracteres aún si no especificamos el charset.

Quiero aportar algo, he leido que las etiquetas de style y script van dentro de la etiqueta head
los unicos dos hijos que ha de tener html son **head ** y body, segun la estructura de arbol HTML.

Aquí les dejo algunas cosas que les pueden servir:

Diferencias entre los atributos href y src
href: nos sirve para añadir enlaces de referencias a nuestra etiqueta, y src nos sirve para cargar recursos en esta.(Esto puede parecer sencillo, pero cuando empece me confudía con ello así que…)

La importancia de La etiqueta <meta>
Esta etiqueta nos sirve para incluir metadatos, pero… ¿Qué son estos metadatos? basicamente son datos que describen a otros datos o archivos(que son un conjuto de datos), sabiendo esto podemos decir que la etiqueta meta nos sirve para ingresar datos que describan nuestra pagina web o documento HTML.
Bueno… ¿Y para qué queríamos hacer esto?:
Simple, con esto podemos decir que nuestra web usa la codificación UTF-8 o UTF-16 o cualquier otra. Tambien es una importante herramienta que nos ayuda con el SEO puesto que estos meta datos no afectan el aspecto o funcionamiento de nuestra app web debido a que estos no son visibles para el usuario común, pero sí para los algoritmos de los buscadores. Sabiendo esto podemos añadir por ejemplo la descripción de nuestro sitio o palabras claves de este para ayudar a los buscadores a posicionarnos según la busqueda que haga el usuario.

¡Importante!
Si nos olvidamos de poner este metadato:
<meta name=“viewport” content= “width=device-width, initial-scale=1.0”> nuestra web no va a ser capaz de ajustarse a otras pantallas. (Super importante para cuando esten haciendo Responsive Design)

me gustaria hacer un aporte, en la parte de añadir archivos externos a nuestro documento HTML, debemos tener el cuenta el proceso de renderizado del navegador, la manera optima de hacerlo, es añadir linkear el archivo .css dentro de la etiqueta <head> pero el archivo externo de JavaScript deberia ser cargado justo antes del cierre de la etiqueta </body> ya que afecta al rendimiento de nuestro sitio web al momento de cargar, se añade al final para cargar toda la interactividad y funcionalidad que hacemos con Js sin afectar el proceso de renderizado de nuestro sitio en el navegador.

Aquí algunas etiquetas que se utilizan para formatear texto, utilizadas como elementos hijos de un párrafo <p> una lista ordenada o desordenada, un encabezado <h#> o un link <a>:

Etiqueta <strong></strong> para hacer fuerte énfasis en el contenido que se encierra.
Etiqueta <b></b> para marcar en negritas el texto que se encierra. A diferencia de strong, esta no representa un énfasis en el contenido.
Etiqueta <i></i> para marcar el contenido en cursiva visualmente.
Etiqueta <em></em> para marcar el contenido en cursiva visualmente y además recalcar cierto énfasis en el contenido.
Etiqueta <mark></mark> para hacer marcado de texto.
Etiqueta <small></small> para presentar visualmente el texto en un tamaño pequeño al resto de nuestro contenido.
Etiqueta <del></del> para indicar que un texto ha sido borrado, aunque visualmente está representado con una línea sobre el texto.
Etiqueta <sub></sub> para indicar un texto subíndice.
Etiqueta <sup></sup> para indicar un texto superíndice.
Etiqueta <u></u> para hacer subrayado de texto.

muy buen lugar para regresar en el futuro

<h3>Para aquellos que tenga la duda sobre las diferencias entre las etiquetas <br> y <hr> les dejo un ejemplo sencillo:</h3>


Falto la etiqueta

<main></main>

la cual se utiliza para dar a entender en nuestra pagina al navegador que es lo mas importante y se puede usar tantas veces sea necesario pero se recomienda solo usar una y agregador todo dentro esta etiqueta diviendo con section, article o divs

Muy buen resumen, pero falto la etiqueta <main>
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/main

<hr/> crea una división

<body>
    <p>
        letras Arriva
        <hr/>
        Letras abajo
    </p>
</body>

creo que falto la parte mas importante (ironicamente jeje) de los elemntos semanticos del HTML, el main.

La etiqueta <style> va dentro de la etiqueta <head>. Solo es una observación.
w3c Reference

<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>

Porque las etiquetas <script> o <style> van dentro de la etiqueta <html> y no dentro del <head> o el <body>?

Cual es la diferencia entre un <button> con la propiedad onClick y un <input type =“button”/>?

Alguna vez escuché que ninguna etiqueta debería estar por fuera de head o de body, y veo que añades <script>… y <style>… al mismo nivel de ellas, creo que está incorrecto, y deberían estar dentro de head. Considero que es una buena practica.

Siempre es bueno repasar estos temas. Se aprenden cosas creíamos saber.

agrego que la etiqueta <hr> dibuja una linea de separación por defecto que se puede quitar o modificar en el archivo .css

Tener en cuenta el uso de las etiquetas y hacer el menor uso de contenedores como ‘<div></div>’ solo cuando sea necesario, hara que nuestra aplicacion tenga un semantica mas limpia y un SEO mas optimizado al navegador.

Comparto 😄

<!--Aquí definimos que el documento esta bajo el estandar HTML5-->
<!DOCTYPE html>  
<!--Representa la raiz de nuestro documento HTML. Todos los demás elementos deben ser descendientes de este elemento-->
<html lang="en">
<!--En el head siempre vamos a encontrar los metadados (Que se escriben en la etiqueta vasia <meta>) del documento que vamos a escribir, incluyendo tambien enlaces-->
<head>
    <!--Define los metadatos que no puede ser definidos usando otro elemento HTML, por ejemplo el tipo de codificación "UTF-8"-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--link usado para llamar conjunto de estilos ya definidos por nosotros-->
    <link rel="stylesheet" href="CSS/style.css">
    <!--Aquí definimos el titulo del documento, se ve en la parte de la pestaña del mismo-->
    <title>looking</title>
</head>
<!--Representa todo el contenido principal del documento-->
<body>
    
</body>
</html>

Importante que por buenas prácticas y temas de SEO, escribir solo un elemento <h1></h1> en todo el documento HTML.🚀

Un listado que pueden filtrar casi a su antojo para que sean facil de ubicar.
https://www.w3schools.com/tags/ref_byfunc.asp

Los que quieren conocer más sobre etiquetas HTML dejo un recurso de clases anteriores y un link que compartieron anteriormente también:
.
https://htmlreference.io/
https://allthetags.com/

Es un pequeño resumen, cumple su función. Para documentación más detalla, les recomiendo que consulten Mozilla Dev

Una pagina excelente para terminar de crear bases solidas, y adquirir mas conocimiento! ❤️
https://www.w3schools.com

Aquí les dejo un pdf con todos los atributos y etiquetas de html para que lo usen de guía mas adelante.
https://1drv.ms/b/s!Ami90c8CUaSPizaZfUc7BEMIfwQN

Yo quisiera saber para que sirven las meta etiquetas?:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

Cuando vi “HTML5” dije… ¿Porque lleva un 5? (no se si les paso a ustedes también) y busque a que se refería y encontré esto:

Cuál es la diferencia entre HTML y HTML5?
La diferencia es sumamente sencilla, HTML5 es una versión del lenguaje HTML. En esta versión se incorporaron nuevas etiquetas y api´s que brindan muchas mejoras con respecto a HTML4 (la versión anterior).

(Suena lógico), y donde encontré las diferencias también vienen las características de HTML5, les dejo la página por si quieren saber más:

https://luisforgiariniblog.com/cual-diferencia-entre-html-html5/

Hola, tengo una inquietud. ¿Es correcto colocar la etiqueta style por fuera del head?. Tengo entendido que las formas de manipular los estilos son:
-Desde un archivo css.
-Directamente en las etiquetas de los elementos en el body.
-Etiqueta style dentro del head.
Acabo de hacer una prueba colocando la etiqueta style entre el head y el body como está en el ejemplo, y al validar en html checker me genera error.

Muchas gracias.

y en https://htmlreference.io/
que es la referencia que nos dio la profe se encuentra mayor y mejor informacion

La etiqueta de <srcipt> afecta el perfomance de la página dependiendo del sitio donde se ubique. Se recomienda que se coloque antes del cierre de la etiqueda body.

tengo una duda en este punto con la posicion de dos etiquetas. En el curso de programacion basica Freddy nos dice que la etiqueta <script> va justo antes de terminar el body pero en este articulo observo que esta fuera del body y lo misma pasa con la etiqueta style. ¿Como se hace realmente? o mejor seria preguntar ¿cual es la buena practica para esto?

Me agrado la ayuda, sin embargo, pudieron colocarla en texto y no en imagen.

Como olvidar aquella espoca en la que comence a aprender html escribiendo en el bloc de notas

Buenas! Ya que no se pudo observar en este documento algún ejemplo del uso de la etiqueta <hr> me gustaría compartir el mío.

<body>
    <h1>Poema</h1><hr>
    <h3>Mariposas Azules</h3><hr>
    <p>
        <p>Mariposas azules<br>¿qué están diciendo?<br>que 
        doña primavera<br>ya está viniendo.</p><p>Pajaritos 
        del campo<br>¿qué están cantando?<br>que doña 
        primavera<br>ya está llegando.</p><p>Amigos felices
        <br>¿qué es lo que pasa?<br>llegó la primavera<br>¡y 
        está en la plaza!.</p>
    </p>
</body> 

Este código se observa de la siguiente forma en la página web:

Así, la etiqueta <hr> se utiliza para dibujar una línea horizontal que puede ser a su vez utilizada para definir diferentes bloques o secciones dentro de un mismo texto.

Otro ejemplo es:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>

<hr>

<h2>Next section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>

Y se observa así:

Aquí les dejo el enlace de form
https://www.w3schools.com/tags/tag_form.asp

Sin duda hay que saberlo de memoria

Muy buen tip

QUE BUENAS ESTAS NOTAS! GRACIAS!!!

Muchas gracias por el resumen

✍ Se me canso la mano de escribir todo esto en papel, pero es una buena forma de repasarlos y ayuda a recordarlos.
También añadí algunos comentarios y aportes de algunos compañeros de las discusiones.
Y algunas cosas las entiendo mejor que antes.

El atributo alt dentro de la etiqueta img también es importante para mejorar el posicionamiento en búsqueda de imágenes por lo cual, contribuye a la optimización sostenible de páginas web.

Gracias por la informacion ahorra tiempo

Conocer bien estas etiquetas de HTML es muy importante, no solo para codear, sino para mejorar la posición SEO en los buscadores ya que Google, Firefox, entre otros muestran los sitios que tengan una mejor estructura de HTML

Se siente genial aprender cosas nuevas 😄

Siempre he sabido que las únicas etiquetas hijas de la etiqueta html son head y body, por lo tanto las etiquetas de style y script deberían ir dentro de head o body y no como etiquetas hermanas

Para el tema de listas en HTML y la diferencia entre UL - OL - y el uso de DL - DT - DD ver el siguiente enlace LINK

¿Por qué usar la etiqueta DOCTYPE?
.
Básicamente porque no hacerlo provoca que el navegador entre en quirks mode, que es una herramienta retrocompatibilidad (compatibilidad con tecnologías web viejas) que podría interpretar tu código HTML y CSS de forma distinta a la que esperas.

colocando en practica las etiquetas… c:

muchas gracias por la aclaración, es muy útil

Hay un error, el elemento

<style>.... </style>

solo puede ser declarado en el encabezado del documento es decir dentro de

<head>... </head>

y en la imagen se declara bajo el head.

Para probar todos los comandos y trastear mientras se sigue el curso me está siendo bastante útil esta página que han mencionado en algún momento:
https://www.freecodecamp.org/

Me encantan los apuntes que das. Son super útiles.

Hola, me podrían ayudar diciéndome que hace lo siguiente. Se los agradezco.

<a target="_blank"></a>

Desconocia la etiqueta <aside>.

Excelente aporte.

Excelente, esta bastante completa la información 😄

excelentes definiciones

será posible guardar este documento como pdf??? quedo atenta!!! 😃

Alguien me puede explicar que son los metadatos?

Buen resumen, solo recomendar cerrar siempre las etiquetas vacias, como por ejemplo: <img /> <br /> <hr />

<header>
es
<head>

El atributo **++lang ++**tiene una relevancia particular cuando es usado en este elemento, ya que define el lenguaje del documento entero. Esto es particularmente importante para los usuarios que dependen de sintetizadores de voz, en la determinación de la pronunciación correcta.

una de las cosas que no me quedaban tan claras era el DocType, leyendo un poco por la red encontre lo siguiente:

¿Qué es el DTD que utilizamos en el Doctype?
Un DTD es la definición del tipo de documento. Por un lado tenemos el doctype que es la forma de declarar el tipo de documento, en el que hemos puesto la URL para acceder al DTD, o sea, al fichero en el cual se define la estructura del tipo de documento.

Así que, el DTD es dónde se define la estructura que debe tener el documento y utilizamos el doctype para informar qué DTD usamos.

El DTD es muy habitual en los lenguajes de marcado. Cualquiera puede crear un DTD, aunque cuando trabajamos con tecnologías públicas y muy extendidas como es el caso del HTML, XHTML, XML, etc. existen agrupaciones que se dedican a definir los estándares de los lenguajes. Es por eso que existe la W3C y sus diferentes DTD publicados, que utilizamos a modo de estándar tanto los programadores como los encargados de crear los navegadores.

En la etiqueta HTML se escribe el atributo “lang” con el código del idioma que se va a usar en la página, como por ejemplo “en” que hace referencia al idioma inglés, esto lo lee el navegador y así detecta en que idioma está el contenido. Otra cosa es que no es buena práctica poner las etiquetas style y script o cualquier otra etiqueta fuera de las etiquetas head o body.

Brutal infografia.

Muy buen detalle de cada concepto, ¿hay alguna manera de poder descargarlo para así poder consultarlo cuando sea necesario ?

creo que estos conceptos básicos así como les presentas valen oro.

Yo vengo desde 0 y la verdad, me estoy sintiendo muy a gusto con el curso. Gracias por tu claridad.

En HTML existen etiquetas mínimas dentro de un documento HTML bien formado. Adicional los elementos se usan a criterio de la representación que se le quiera dar al sitio.
Hay dos componentes muy importantes, la etiqueta que nos permite conectar a los archivos .css <style /> con los cuales le damos estilos al documento HTML.
La otra etiqueta importante con el curso es donde podemos conectar nuestros archivos javascript .js <script />.

Estos tres elementos integrados nos permitirán crear aplicaciones asombrosas!!!

Buen detalle. Con HTML5 tenemos nuevos elementos que nos ayudan a estructurar mejor nuestro sitio web.

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>```

La etiqueta <style> debe ir dentro de la etiqueta <head>, no fuera de ella; esto de acuerdo a la documentación de Mozilla Developer.

y con HTML:5 a un hay mas etiquetas que pueden ser utiles.

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

puedes encontrar todas las etiquetas con el usa en los siguientes inks:
https://htmlreference.io/
https://www.w3schools.com/TAGS/default.ASP

en ellos hay ejemplos y significados

Entre las etiquetas mas comunes utilizadas están también:
Para la parte del head:

  • <link>: Usada para enlazar JavaScript y CSS externos con el documento.
    Y para el body
  • <strong>: Representa un texto especialmente importante (negrita).
  • <table>: Representa datos con más de una dimensión (tabla).
  • <tr>: Representa una fila de celdas en una tabla.
  • <td>: Representa una celda de datos en una tabla.
  • <th>: Representa una celda encabezado en una tabla.

Desde hace muchos años tengo entendido que la etiqueta <style></style> va dentro de la etiqueta <head></head> y la etiqueta <script></script> va dentro del <body></body> y justo al final antes de cerrar. No entiendo porque ella dice que van afuera como si fueran hermanas de head y body y no hijas respectivamente.

me puse a probar un poco las etiquetas desde la clase pasada, les comparto por si quieren revisarle un poco

<!DOCTYPE html> 
<html lang="es">
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <script>
        function myFunction(){
            alert("Te pille loquito")
        }
    </script>
    <body>
        <h1>Mi primera Etiqueta :v hello there</h1>
        <div>
            <p>Este es un parrafo de prueba, shalalalalalala</p>
            <strong>No se pa que es esto jaja salu2</strong>
        </div>
        <aside> Me imagino que <br> un parrafo lateral , vamo a probar</aside>
        <blockquote>pa ve que es esto <br> <strong>que hubo parcero</strong> </blockquote>
        <section>Esta es una prueba
            <header style="background-color: aqua;">Que pasa si hago esto</header>
        <button onclick="myFunction()" >Clickeame ¬u¬</button>
        </section>
    </body>
</html> ```

😮 HTML5

Buen glosario para empezar a hacer maquetado.

En cuánto a la etiqueta <article> no me queda claro que es lo que significa que puede contener un área de la pagina que puede ser independiente del resto del contenido. Alguien tiene algún ejemplo que me permita entender esto mejor?

Buen aporte

NIce summary!!!

Conociendo información importante. Gracias!!

https://www.w3schools.com/tags/ Este es el link proporcionado en el resumen

Una gran informacion Gracias

Se que la palabra metadatos suena algo hacker pro linux, pero no, simplemente hace referencia información que debe ir al principio de nuestro documento para especificar que se va a comportar de una cierta manera, o que va a obtener una cierta información de un lugar específico.

Excelente, gracias por el resumen.

Creo que tambien es importante añadir la etiqueta <main></main> que sirve para encapsular el contenido principal del documento, donde adentro de este añadimos otro elementos como <section> o <articles>

Un pequeño aporte: