Aprendiendo HTML5: Tutoriales, cursos y dudas

  • Autor Autor KatsuCoder
  • Fecha de inicio Fecha de inicio
KatsuCoder

KatsuCoder

Alfa
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hey Corders!

Quiero compartir hasta el momento mi trayectoria de aprendizaje en HTML5. Pues deseo aprender todo lo necesario para poder tener un gran avance significativo.
Empecé estudiando de manera independiente con tutoriales en YouTube, me recomendaron varios y pues hay una que creo la mayoría conocerán un video de 6 horas que hay en YouTube explicando HTML --> Curso de 6 Horas. Un poco confuso, no desmerito para nada el trabajo de el, de hecho aún me guio con este youtuber.

Después al tiempo adquirí un curso completo en UDEMY, el profesor que enseña en esta área HTML5 explicó en 6 videos cortos. Lo que no había podido comprehender con el YouTube.
ibb.co

imagen hosted at ImgBB

Image imagen hosted in ImgBB
ibb.co ibb.co

Ahora pues necesito saber que me falta aprender de HTML5, anexo puntos de las cosas que me gustarían aprender:
  • ¿Qué es y cómo se usa la etiqueta <div>?
  • Deseo saber las reglas de HTML, ya que a medida que voy aprendiendo, me he enterado que hay etiquetas que no puedo usar en ciertos campos, como por ejemplo meter la etiqueta <head> <p> hey coders </p> </head> [Tengo entendido que eso no es permito hacer] "Esto es un ejemplo a lo que quiero dar a entender"
  • La etiqueta <main> tengo entendido es para contenido principal, ¿ Si tengo o quiero crear columnas como un periódico puedo usar la etiqueta <main>?
  • ¿En que orden se puede usar la etiqueta <img> y diferencia entre <svg? Ejemplo: si tengo una imagen y uso la etiqueta <img src="rutax.jpg" . svg es un diseño y direccion de una imagen e icono?
  • En formularios Tengo la etiqueta <textarea> y deseo que en el campo haya escrito de manera que pueda indicar "escribe aqui" se puede hacer <textarea>Escribe aqui</textarea> pero al dar clic en el campo al usuario le tocaría borrar lo que hay en el espacio, en cambio usando la etiqueta, <label>Nombre</label> <input type="text" placeholder="Tu Nombre"> al dar clic en el campo, desaparece lo que esta adentro "Tu nombre". Pensé que al usar la etiqueta textarea y agregarle lo mismo input y placeholder funcionaria y si lo hace pero tengo entendido que no es la manera correcta de hacer eso.
Se que tendré mas dudas, y pues hasta el momento son estas, Quiero aprender a hacer mas cosas y necesito dominar HTML para poder continuar o que me recomendarían?

Me he enterado que para aprender HTML y comprehenderlo es necesario de CSS, es decir a medida que voy estudiando entenderé al mismo tiempo de ambos.
Anexaré mi código de estudio que tengo para que lo miren y es lo básico hasta el momento que he podido entender.

Gracias Coders! y moon-ra.
 

Adjuntos

Última edición:
Hola katsu.
No es que yo sepa todo, pero déjame ver como puedo ayudarte:
- <div> es un contenedor estándar, puedes usarlo para lo que te plazca. Hasta para crear figuras cuando estés mas ducho en css. Pero como ya te dije no expresa ninguna estructura semantica, es simplemente un contenedor y ya. Por cierto, que es análogo a <span>, solo que <div> es block y <span> es inline.
- Las "reglas" son enteramente semánticas, te las puedes saltar cuando gustes. Pero siempre usa el sentido común: "Tiene sentido para mi, meter un parrafo <p> dentro de un encabezado <head>?"
- <main> es para un contenido que semanticamente sea principal. De hecho tu puedes tener un main dentro de un main dentro de un main. Pero tienes que asegurarte que de verdad sea un contenido principal, ok? Sino no tiene sentido. La contraparte de <main> es <aside> que es el contenido que no es principal y por lo tanto puede ser escapado por dispositivos de lectura para personas invidentes o ignorado por arañas.
- En principio no deberías mezclar de esa forma <img> con <svg>, son dos etiquetas bien distintas. <img> es simplemente para enlazar una imagen que se mostrara de alguna manera en tu vista. <svg>... svg es un universo, por los momentos dejala ir. Ya tendrás tiempo para juguetear con ella.
- <textarea> debería agarrar el atributo placeholder, asi el usuario no tiene que borrar nada.

Y finalmente si, trata de ir incorporando las 3 tecnologías poco a poco (html, css, js), eso te ayudará a ver mejor el campo antes de sembrar.

Saludos amigo 😉

PD: Seguro llegará gente mas veterana a enseñarte cosas con mas sentido que lo que acabo de escribir, pero espero al menos haberme dado a entender.
 
moon-ra dijo:
Hola katsu.
No es que yo sepa todo, pero déjame ver como puedo ayudarte:
- <div> es un contenedor estándar, puedes usarlo para lo que te plazca. Hasta para crear figuras cuando estés mas ducho en css. Pero como ya te dije no expresa ninguna estructura semantica, es simplemente un contenedor y ya. Por cierto, que es análogo a <span>, solo que <div> es block y <span> es inline.
- Las "reglas" son enteramente semánticas, te las puedes saltar cuando gustes. Pero siempre usa el sentido común: "Tiene sentido para mi, meter un parrafo <p> dentro de un encabezado <head>?"
- <main> es para un contenido que semanticamente sea principal. De hecho tu puedes tener un main dentro de un main dentro de un main. Pero tienes que asegurarte que de verdad sea un contenido principal, ok? Sino no tiene sentido. La contraparte de <main> es <aside> que es el contenido que no es principal y por lo tanto puede ser escapado por dispositivos de lectura para personas invidentes o ignorado por arañas.
- En principio no deberías mezclar de esa forma <img> con <svg>, son dos etiquetas bien distintas. <img> es simplemente para enlazar una imagen que se mostrara de alguna manera en tu vista. <svg>... svg es un universo, por los momentos dejala ir. Ya tendrás tiempo para juguetear con ella.
- <textarea> debería agarrar el atributo placeholder, asi el usuario no tiene que borrar nada.

Y finalmente si, trata de ir incorporando las 3 tecnologías poco a poco (html, css, js), eso te ayudará a ver mejor el campo antes de sembrar.

Saludos amigo 😉

PD: Seguro llegará gente mas veterana a enseñarte cosas con mas sentido que lo que acabo de escribir, pero espero al menos haberme dado a entender.
Hacer clic para expandir...
Gracias moon-ra
Yo deseo saber es el uso como tu explicas de la etiqueta.
<div>
Si por ejemplo puedo separar un párrafo de otro con líneas etc.
Ya que se que puedo hacer esto con <section>
Mi interés es poder tener el código organizado, que la etiqueta div tenga el uso adecuado ejemplo:
¿div se usa para maquetar el contenido?
Es decir con este puedo organizar las etiquetas section - article - aside.
Mira mi código con el cual he aprendido hasta el momento.

El conocimiento es poder moon-ra
tu experiencia vale mucho para mi. Saludos!
 

Adjuntos

Sugerencias:
- Mete los items del <nav> en listas, eso apoya el sentido semantico.
- Para usar las etiquetas semanticas solo piensa en cual es tu contenedor principal <main>, contenedor secundario <aside>, pie de pagina <footer>, navegación <nav>, encabezado <head>... <section> se usa un poco a discreción. En fin, hay un montón pero siempre usa tu mejor criterio: "Que expresa esta etiqueta?", "Tendra sentido aqui?".
- Ayuda hacer el arbol primero, para tener una idea de la macroestructura de la pagina, luego le metes el contenido.

Lo que preguntabas de que pito toca el <div>... es amigo del atributo class, cuando vayas a enlazarlo con un css, y del atributo id, cuando vayas a controlarlo con js. De resto no da sentido semántico.

No se si me explique XD
 
moon-ra dijo:
Sugerencias:
- Mete los items del <nav> en listas, eso apoya el sentido semantico.
- Para usar las etiquetas semanticas solo piensa en cual es tu contenedor principal <main>, contenedor secundario <aside>, pie de pagina <footer>, navegación <nav>, encabezado <head>... <section> se usa un poco a discreción. En fin, hay un montón pero siempre usa tu mejor criterio: "Que expresa esta etiqueta?", "Tendra sentido aqui?".
- Ayuda hacer el arbol primero, para tener una idea de la macroestructura de la pagina, luego le metes el contenido.

Lo que preguntabas de que pito toca el <div>... es amigo del atributo class, cuando vayas a enlazarlo con un css, y del atributo id, cuando vayas a controlarlo con js. De resto no da sentido semántico.

No se si me explique XD
Hacer clic para expandir...
Entonces tu me indicas que no hay regla para usar la etique div. Solo es para poder organizar mejor mi codigo?
 
No necesariamente para organizar mejor el codigo..
Ve, imaginate al <div> como si fuera una pieza de LEGO (valga la cuña). Es una pieza cuya funcion queda limitada por tu imaginacion.
Un caso uso puede ser, ponerle un atributo class y meter toda una seccion ahi. Luego podemos desde css hacer referencia a esa clase y controlar los estilos de esa seccion.
Otro caso uso es ponerle un id y controlarlo con js usando el getElementById y, que se yo, borrarle el contenido que tenia y ponerle uno nuevo.
En fin, no tiene sentido semantico, pero eso no significa que no sea tremendamente util.
De hecho, es de lo mas normal anidar un <div> dentro de una tag semantica para solventar esa falta de identidad.
 
1- La etiqueta <div> no tiene valor semántico, esto quiere decir que si lo usas o no, esto no afectará la semántica o seo en tu página. Es usado para agrupar contenido (mayormente para darle un estilo especifico).

2- La etiqueta <head> solo es usada para la información importante de tu página como la meta descripción, agregar link de estilos CSS, título de la página, el viewport etc... Contenido descriptivo. Ojo está etiqueta es diferente a <header> (que va dentro de la etiqueta <body>), en este caso si puedes usar una etiqueta <p> dentro, y las etiquetas que desees, claro está, que aporte valor semántico.

3- La etiqueta <main> literalmente se traduce principal por lo que es usado para todo el contenido relevante de tu página, puedes crear todas esas columnas dentro de una etiqueta <main>.

3- No hay un orden de uso en la etiqueta <img>, la diferencia de img a svg es que img solo muestra una imagen mediante una ruta pero esta imagen debe existir (sea que esté en tu web u otro servidor), en el caso de svg, es que es una imagen creada a partir de trazos y formas. Aquí un ejemplo:
IMG_20220327_213630.webp

Adobe illustrator te permite exportar en svg, algo adicional es que con svg puedes redimensionar al tamaño que desees sin perder calidad y con un peso muy inferior al de una imagen. Img y svg son dos cosas diferentes.

4- En la etiqueta <textarea> al igual que un <input> puedes usar un placeholder="texto que desees".

PD: Espero esto te ayude.
 
Kevin Ramos dijo:
1- La etiqueta <div> no tiene valor semántico, esto quiere decir que si lo usas o no, esto no afectará la semántica o seo en tu página. Es usado para agrupar contenido (mayormente para darle un estilo especifico).

2- La etiqueta <head> solo es usada para la información importante de tu página como la meta descripción, agregar link de estilos CSS, título de la página, el viewport etc... Contenido descriptivo. Ojo está etiqueta es diferente a <header> (que va dentro de la etiqueta <body>), en este caso si puedes usar una etiqueta <p> dentro, y las etiquetas que desees, claro está, que aporte valor semántico.

3- La etiqueta <main> literalmente se traduce principal por lo que es usado para todo el contenido relevante de tu página, puedes crear todas esas columnas dentro de una etiqueta <main>.

3- No hay un orden de uso en la etiqueta <img>, la diferencia de img a svg es que img solo muestra una imagen mediante una ruta pero esta imagen debe existir (sea que esté en tu web u otro servidor), en el caso de svg, es que es una imagen creada a partir de trazos y formas. Aquí un ejemplo:
Ver el archivo adjunto 722127
Adobe illustrator te permite exportar en svg, algo adicional es que con svg puedes redimensionar al tamaño que desees sin perder calidad y con un peso muy inferior al de una imagen. Img y svg son dos cosas diferentes.

4- En la etiqueta <textarea> al igual que un <input> puedes usar un placeholder="texto que desees".

PD: Espero esto te ayude.
Hacer clic para expandir...
Adicionalmente me gustaría comentarte de una pagina buena para aprender HTML5, esta página se llama W3schools.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba