Mi primera página web con HTML

genial hasta ahora, gracias por ayudarnos a reforzar conceptos basicos. Muy entusiasmada por aprender a maquetar por primera vez 😃
Es mi primera semana en platzi

El profesor disfruta enseñar , eso es increíble ¡¡

Recuerdo cuando comencé a aprender HTML pese a que muchos dicen que es algo muy fácil a mi se me complicaba aveces entender cuando usar una u otra etiqueta, por que dicen que no usar muchos divs, cuando se tenia que usar un atributo u otro y en especial recuerdo que no entendía la diferencia entre los atributos href y src.
Si te identificaste con algo de eso, calma, todo es práctica y conforme vayas tomando los cursos y vayas practicando, todo ira quedando más claro.
Éxitos a los que apenas van empezando en esto 😃

En el minuto 10:34 al 10:50 del video quiero aclarar algo:
Eso de que Retax dice de que hay que usar un forward slash “/” y varios profesores en otros cursos de HTML también hacen uso de esta entre comillas “buena práctica” no es más que una confusión sobre cómo el estándar interpreta la presencia de este símbolo en estos casos específicos, en realidad esto era una práctica que se hacía en HTML4 y XML y el uso de “/” era válido para cerrar etiquetas que se cierran solas. No obstante, en HTML5 esto no tiene ningún significado ya que el lenguaje no le da un significado especial y es igual de válido no incluir el “/”, pero como muchas personas lo hacen porque los profesores dicen que es una buena praćtica, lo cual no es cierto y creo que hay que aclararlo para que no anden con esa carga que en realidad no será necesaria solo en casos muy puntuales.
|
Quizás la razón por la que aún se usa es porque librerías como React.js necesitan el uso de este símbolo para que el código funcione. Pero decir que es necesario cerrarla porque en HTML5 es una buena práctica es totalmente falso. HTML5 no es XML ni HTML4, y HTML tampoco es JSX (extensión que se usa en React)
|
Así que por el amor a Dios, tengan criterio cuando vayan a usar esta etiqueta “/”, que a menos que su página se rompa si no la agregan (como al estar trabajando con React), no es necesario agregarla, de lo contrario editores como Atom y Code incluirían el “/” en sus templates de código. Aquí les dejo una documentación para que se informen bien, es más, también les dejo el w3 validator para que vean ustedes mismos la advertencia que les tira la consola cuando incluyen el "/"

Conclusión: No cerrar las etiquetas que se cierran solas a menos que tu programa lo requiera, para todos los demás casos, HTML5 especifica que esta “buena práctica” ya no es necesaria tal cual se puede leer en la X roja al final de la primera imagen.

|
Para extender mi explicación, en la segunda imagen que pueden ver abajo, en el primer caso, la etiqueta img no está cerrada con "/"
En el segundo caso, la etiqueta img se cierra con “/”, pero esto rompe la imagen debido a que el valor del atributo src no está cerrado entre comillas, esto es válido en HTML5 para algunos casos según la misma especificación, pero en este caso el uso de “/” puede romper los valores de atributos que no están encerrados entre comillas simples o dobles.

w3 validator github
Si tienen dudas, el comentario mejor votado de esta discusión debería aclarar tus preguntas sobre el uso de “/”
|
**Si aun insisten en cerrar las etiquetas que se cierran solas con “/”, tal cual como hacen Retax, JuanDC y Diego y casi todos los profesores en la escuela de desarrollo web de Platzi, entonces es mejor

1. Encerrar los valores de atributos ya sea con comillas simples o dobles siempre que sea posible y
2. Separar el “/” del valor del último atributo con un espacio de por medio.**

Mi primera página web con HTML

¿En dónde puedo encontrar todas las etiquetas HTML?

• Documentación Oficial de MDN Web Docs (Etiquetas HTML)→ Aquí podemos encontrar documentación acerca de todas las etiquetas HTML. Está en varios idiomas, incluido el español.
• También podemos utilizar el navegador para revisar etiquetas específicas, por ejemplo: “Cuál etiqueta de html puedo utilizar para escribir texto”

Creación de primer archivo HTML

• Descarga de Archivos de la clase: index.html + carpeta: imágenes

Crearemos nuestro primer archivo index.html en VSCode.

En VSCode podemos escribir un atajo de teclado en nuestro archivo HTML, solo tenemos que escribir:! y se creará la plantilla (bolierplate) del documento

Imaginemos que queremos contruir una casa al estilo Americano, entonces HTML seria la equivalencia a esto que estamos viendo, un monton de barrotes de maderea formando una ESTRUCTURA sobre la cual despues afinaremos para tener una hermosa casa.

CSS es lo que nos ayudara a que la casa se vea “bonita” y JAVASCRIPT es lo que nos ayudaria a generar interaccion, que cuando se precione un apagador se prenda o apague la luz, al interactuar con un grifo salga o deje de salir agua etc.

Vengo de casi tirar la toalla en programación con el curso practico de javascript, pero conseguir este curso me está volviendo a motivar y querer aprender más, más profesores así que hagan ejemplos prácticos en lo laboral porfavor

HTML utiliza “marcas” para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen “elementos” especiales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li> y muchos otros

🍃 Algunas de las etiquetas de HTML que más se utilizan

Aquí tienes una lista de algunas etiquetas que se utilizan comúnmente en HTML semántico moderno:

1. <header>: Define la cabecera o encabezado de una página o sección.
2. <nav>: Define una sección de navegación.
3. <main>: Define el contenido principal de una página.
4. <section>: Define una sección temática de contenido.
5. <article>: Define un contenido independiente y autónomo.
6. <aside>: Define contenido relacionado o complementario al contenido principal.
7. <footer>: Define el pie de página de una página o sección.
8. <h1> a <h6>: Define los encabezados de diferentes niveles, donde <h1> es el más importante y <h6> es el menos importante.
9. <p>: Define un párrafo de texto.
10. <ul>: Define una lista no ordenada.
11. <ol>: Define una lista ordenada.
12. <li>: Define un elemento de lista en <ul> o <ol>.
13. <a>: Define un enlace o hipervínculo.
14. <img>: Inserta una imagen.
15. <div>: Define un contenedor genérico para agrupar contenido.
16. <span>: Define una sección en línea o un fragmento de texto sin un significado específico.
17. <form>: Define un formulario interactivo.
18. <input>: Define un campo de entrada dentro de un formulario.
19. <button>: Define un botón interactivo.
20. <table>: Define una tabla de datos.
21. <tr>: Define una fila en una tabla.
22. <td>: Define una celda de datos en una tabla.
23. <label>: Etiqueta para un campo de entrada en un formulario.

Estas son solo algunas de las etiquetas más comunes en HTML semántico moderno. Hay muchas más etiquetas disponibles en HTML para adaptarse a diferentes necesidades y estructuras de contenido. Recuerda que es importante utilizar las etiquetas de forma adecuada y semántica para mejorar la accesibilidad y comprensión del contenido por parte de los usuarios y motores de búsqueda.

La extensión “Indent Rainbow” en Visual Studio Code resalta las indentaciones y bloques de código anidados con colores, mejorando la legibilidad del código. Ayuda a identificar fácilmente la estructura del código y evita errores de indentación. Es útil en lenguajes que dependen de la indentación y en proyectos extensos o colaborativos.

en caso de que quieras entrar al directorio externo a tu ubicacion utiliza: …/

Etiqueta HTML Descripción

<html>	Define el comienzo y el final de un documento HTML.
<head>	Contiene información meta sobre el documento HTML.
<title>	Define el título del documento.
<body>	Contiene el contenido visible del documento.
<h1> a <h6>	Define encabezados de diferentes niveles.
<p>	Define un párrafo de texto.
<a>	Crea un enlace a otra página o recurso.
<img>	Inserta una imagen en el documento.
<ul>	Crea una lista desordenada.
<ol>	Crea una lista ordenada.
<li>	Define un elemento de lista en una lista desordenada u ordenada.
<div>	Crea una división o contenedor genérico.
<span>	Define una sección en línea dentro de un bloque.
<table>	Crea una tabla con filas y columnas.
<tr>	Define una fila en una tabla.
<td>	Define una celda de datos en una tabla.
<th>	Define una celda de encabezado en una tabla.
<form>	Crea un formulario interactivo.
<input>	Crea un campo de entrada de datos.
<button>	Crea un botón interactivo.
<textarea>	Crea un área de texto multilínea.
<select>	Crea un menú desplegable.
<option>	Define una opción en un menú desplegable.

me siento sabio porque estoy aprendiendo algo nuevo, pero a la vez me siento confundido porque hay cosas que todavía no entiendo.

• HTML: <html></html> es la etiqueta principal que define el documento HTML.
• head: <head></head> es la etiqueta que contiene información meta sobre el documento, como la codificación de caracteres y otros datos que no se muestran en el navegador.
• meta charset utf-8: <meta charset="utf-8"> es una etiqueta que define la codificación de caracteres utilizada en el documento. UTF-8 es una codificación de caracteres que permite representar la mayoría de los caracteres utilizados en la mayoría de los idiomas.
• title: <title></title> es la etiqueta que define el título del documento, el cual aparece en la pestaña del navegador y en los resultados de búsqueda de Google.
• body: <body></body> es la etiqueta que contiene todo el contenido visible del documento HTML, como texto, imágenes, videos, etc.
• header: <header></header> es una etiqueta que se utiliza para definir la cabecera o encabezado de una sección o página web.
• div: <div></div> es una etiqueta que se utiliza para dividir el contenido en secciones o grupos, lo que permite aplicar estilos o formatos específicos a cada sección.
• img src: <img src="ruta-de-la-imagen"> es una etiqueta que se utiliza para insertar imágenes en una página web. El atributo “src” se utiliza para especificar la ubicación de la imagen en el servidor.

Logre hacer el ejercicio, un avance significativo para mi

me gusta cuando somos novatos somos muy optimista y a la larga cuando entras a la curva de aprendisaje te das cuenta que no sabes casi nada y te viene el bajon pero despues aprendes algo a profundida y te sientes mejor

Hice mi curso de Programación basica pero desafortunadamente no seguí reforzando conociemientos. Estoy muy interesada en este curso me gusta mucho. Gracias Carlos por reforzas temas estoy muy emocionada.

Gracias a Dios estoy dando mis primeros paso

Por si quieren profundizar el ¿Por qué se nombra a la página principal de nuestro sitio web como index.html? les comparto un artículo que me encontré vagando por la web.

dejo una sugerencia ya que deberian explicar la carpeta de imagenes se guarda en la misma carpeta donde esta en index.html porque si solo se coje la carpeta de imagenes y se va a l programa visual code no va a reterizar la imagen en la navegador

Genial, hoy tambien inicie en este mundo de la programación!

me aparecio en el navegador afhafhafhfasfjakhfjafafdf

Me encanta la pasión con la que imparte la clase y como resultado de ello, me contagió e hizo sumergirme en el desarrollo de páginas web.

excelente profesor 😃

Gracias profe, excelente forma de hacerlo agradable.

Definitivamente me encanta esta profesión!! lo mejor de lo mejor

en vsc pueden usar la extensión golive que automáticamente abre su página y la actualiza cuando la guardan,

si usamos la extensión Live Server podemos ver en el navegador el HTML sin necesidad de estar recargando la pagina

lo que nos puede ayudar mucho a saber cual debemos usar en preguntándole a ChatGPT

Excelente!

En este paso, cuando escribo el nombre de la carpeta de imagenes, no me despliega la opción tal como se ve en la clase y no se genera un vinculo con el archivo. ¿Que debo hacer?

Para no tener que refrescar la pagina cada vez que hagas un cambio instala la extensión “Live Server" los pasos son

• Dirígete a la sección de rojo
• En la sección naranja busca Live server
• Lo instalas y verificas en la sección amarilla que este
• Reinicias y luego en la parte inferior derecha en la sección verde veras la palabra Go Live le das clic para iniciar

Ya Platzi nos da una lista de las etiquetas que mas se usan.

Saludos Carlos sos un Crack!

https://platzi.com/blog/etiquetas-html-debes-conocer/?utm_source=google&utm_medium=cpc&utm_campaign=19643931773&utm_adgroup=&utm_content=&gclid=EAIaIQobChMI3e-g_LGY_QIVKxXUAR1F4g1NEAAYASAAEgKz4_D_BwE&gclsrc=aw.ds

Es realmente complicado hasta asociar los dedos y conocimientos básicos

yo recien inicio y podre reforzar conocimientos previos, sera una gran aventura

para corres la pagina web les recomiendo descargar una extensión de vscode “live server”

GENIAL!! Hasta aquí todo bien, clásico buscar en google jejej😄

Estoy disfrutando y aprendiendo mucho con cada clase:D

gran explicación 👌🏻

Muy al detalle, excelente.

Excelente clase

que gran explicacion de cada etiqueta desde html, head, body!
gracias

Que lindo recordar esto después de tanto tiempo

♥

Me gusta mucho este curso. El profesor enseña muy bien.

¡Excelente explicación! muy buen profesor 😄
Super importante y recomendado ir haciendo las prácticas con código mientras él explica 😄

Mi segundo DIa de estudio y estoy muy entusiamado

me encanto la parte, mi foto de linkedin! , los ejemplos con los michis son lo mejor. Muy amena la clase, gracias Retaxmaster

Eso de que Retax dice de que hay que usar un forward slash "/" para cerrar etiquetas que se cierran solas y varios profesores en otros cursos de HTML también hacen uso de esta entre comillas "buena práctica" no es más que una confusión sobre cómo el estándar interpreta la presencia de este símbolo en estos casos específicos, en realidad esto era una práctica que se hacía en HTML4 y XML y el uso de "/" era válido para cerrar etiquetas que se cierran solas. No obstante, en HTML5 esto no tiene ningún significado ya que el lenguaje no le da un significado especial y es igual de válido no incluir el "/", pero como muchas personas lo hacen porque los profesores dicen que es una buena praćtica, lo cual no es cierto y creo que hay que aclararlo para que no anden con esa carga que en realidad no será necesaria solo en casos muy puntuales. Quizás la razón por la que aún se usa es porque librerías como React.js necesitan el uso de este símbolo para que el código funcione. Pero decir que es necesario cerrarla porque en HTML5 es una buena práctica es totalmente falso. HTML5 no es XML ni HTML4, y HTML tampoco es JSX (extensión que se usa en React) Así que por el amor a Dios, tengan criterio cuando vayan a usar esta etiqueta "/", que a menos que su página se rompa si no la agregan (como al estar trabajando con React), no es necesario agregarla, de lo contrario editores como code incluirían el "/" en sus templates de código. Aquí les dejo una documentación para que se informen bien, es más, también les dejo el [w3 validator](https://validator.w3.org/nu/#textarea) para que vean ustedes mismos la advertencia que les tira la consola cuando incluyen el "/" Y si aun tienen dudas, el comentario mejor votado de [esta discusión](https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5) debería aclarar tus preguntas sobre el uso de "/"

También puedes encontrar las etiquetas en htmlreference.io

Para mayor inspiración, ver la serie The Billion Dollar Code, la encuentran en Netflix, está buenísima.

Genia la clase. Muy entusiasmada con la clase.

Aqui vamos con toda la motivación. Excelente el profe.

muy buen profesor