Maquetación con HTML

💡 HEY!! Antes de que continúes en tu aventura con la programación, te dejo esta herramienta que te será de utilidad en tu camino: las 44 etiquetas HTML que usarás en desarrollo web

Freddy te vamos a extrañar!!! nos deja en muy buenas manos del profe David que también es muy Bueno💚

Aquí les vengo a dar una nueva recomendación 😁😁😁

Recuerdan que en clases pasadas Freddy utilizaba estos signos (//) en el código de JavaScript. Así es, el famoso comentario.

Esta es una herramienta muy útil que es utilizada en el proceso de desarrollo, ya que nos ayuda a dejarnos a nosotros mismos notas de ciertas funcionalidades de código o simplemente para llevar un registro mas ordenado de este mismo incluso para realizar algunas pruebas.

Lo bueno es que la mayoría de lenguajes de programación tienen esta funcionalidad lo único que cambia son los signo con los que indicamos el comentario.

Html

<!-- AQUI VA MI COMENTARIO -->

CSS

/* Aquí va mi comentario */ 

Lo mejor de todo es que Visual Studio Code tiene Shorthands o atajos de teclado para que esto sea mas rápido. Tenemos 2 formas :

Seleccionar la parte que queremos comentar **oprimir ctrl + k y luego ctrl + c ** y automáticamente se comentara la parte que hallamos seleccionado. Tambien podemos utilizar ctrl y la tecla que tiene el simbolo de cerrar llave, este >>" }" y se nos generara un apartado para escribir nuestro comentario.

Ahora es tu turno manos al codigo !!! 💚💚💚

por Dios Estoy recibiendo clases con Timotheé Chamalet!!!:VV

Estoy en clase de: Nuevo Curso Práctico de JavaScript con el profe Juan. Es un excelente maestro y aprenderán mucho.

¡Hola, chicos y chicas! Quisiese agregar algo un poco fuera de la clase, pero que es importante. Debemos valorar a cada profesor, Freddy es MUY bueno. Sin embargo, los demás también lo son a su estilo. Juan es increíble. Diego es increíble. Óscar en increíble. En general cada uno es muy especial.
 
¡Nunca paren de aprender! 💚

No sabia que el chico de stranger things daba clases de programacion…

• MAQUETACIÓN: Crear la estructura de el contenido de una página web.

• La etiqueta span es un contenedor en línea genérico para redactar contenido, que no representa inherentemente nada.

Sí usas atom al seleccionar una etiqueta, atributo o elemento. El programa te dice lo que significa e incluso puedes averiguar más dando click a more

Estoy paseando por la sección de preguntas de cada clase para tratar de ayudar y este hombre no deja ni una sin responder jajajaj

Nota:

La etiqueta <h1> solo se utiliza una vez por cada documento HTML 

Les comparto mis notas de clase, por ahora estan en construcción mientras voy avanzando!
Enjoy

cada clase de este curso es muy emocionante, felicidades a Platzi por ser una plataforma referente en el aprendizaje online.

etiquetas HTML

Apertura y cierre
La apertura y el cierre siempre llevan el nombre de la etiqueta HTML que usarás, y son las que sirven para delimitar el contenido de la misma.

Atributo y valor
El atributo son distintos ingredientes o modificaciones que puedes hacer a la etiqueta. Como por ejemplo colocarle un ID, especificar algún evento (como los casos de onsubmit y onclick), o modificar el aspecto visual (como cambiarle el color a un texto).

El valor es la especificación de estas modificaciones. ¿Qué debe suceder después del onsubmit? ¿Qué color debe tener el texto? ¿Qué ID tendrá la etiqueta?

Contenido
Es la información que queremos que sea afectada por la etiqueta con sus modificaciones (atributos).

querido Juan!! tantos años trabajando juntos y es la primera vez que tomaré clase contigo. me emociona aprender de ti 💚

Que es maquetar

Es definir la estructura y el contenido de la pagina web.

Atributos

Un atributo es un valor adicional que se le da a la etiqueta

El atributo ID

Con este atributo diferenciamos una etiqueta de otra, le damos un nombre un identificador.

Dinamico

Un valor dinamico es algo que va a cambiar, que no se queda asi por siempre o es estatico

Etiquetas

<section></section> // Me divide o secciona la pagina web.

<span></span> //Permite hacer cambios a una parte de un parrafo, dentro de una linea.

👉🏽 Buenas practicas y adicionales:
→ No poner espacios en los nombres de ID.
→ Envolver los botones con una etiqueta <p>
→ Separar la web en secciones, de ser necesario

Enlaza la llama

me cae bien esta combinacion de Timotheé Chamalet con sub urban, muchas gracias nuevo profe

Amigo sinceramente haces un trabajo excelente , creí que cuando se fuera Fredy no entendería al resto de profesores pero me equivoque , tu le metes un entusiasmo que me motiva y eres excelente explicando un abraso 😊

Yo le agregue los tipo aire y trueno de una 😅

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>MOKEPON!</title>
</head>
<body>
<h1>MOKEPON! 🌱🔥💧🌪⚡</h1>

    <section id="seleccionar-mascota">
        <h2>Elige tu mascota:</h2>
    </section>

    <section id="seleccionar-ataque">
        <h2>Elige tu ataque:</h2>
       
        <p>Tu mascota tiene <span>3</span> vidas</p>
        <p>La mascota del enemigo tiene <span>3</span> vidas</p>

        <p>
            <button>FUEGO 🔥</button>
            <button>TIERRA 🌱</button>
            <button>AGUA 💧</button>
            <button>AIRE 🌪</button>
            <button>TRUENO ⚡</button>
        </p>
    </section>

    <section id="mensajes">
        <p>Tu mascota atacó con FUEGO🔥, la mascota del enemigo atacó con TIERRA🌱 - GANASTE🎇</p>
    </section>

    <section id="reiniciar">
        <button>Reiniciar⛔</button>
    </section>

</body>

</html>

// Hola Team, les recomiendo escribir las variables y textos en INGLÉS para ir practicando. Así matan dos pájaros de un tiro 🤖```

SECTION, se usa para dividir secciones de un documento, en varias pestañas

ID="" Es un atributo, sirve para dar un nombre unico e irrepetible a algo( como una cedula )

<section id=“seleccionar-ataque”> ( asi quedaría, section ahora tiene un nombre unico y podemos reconocerlo)

H1, se usa para un solo titulo principal, si quiero usar mas títulos H2, las veces que quiera

P, se usa para texto, párrafos

SPAN, Sirve para dar estilo y manipular un texto en particular con JavaScript.

Hay ciertas maneras para escribir codigo html mas rapido.
En html podemos utilizar multiplication(*) para decir cuantas veces queremos crear una etiqueta, por ejemplo: En el caso de requerir 5 etiquetas de “section”, podemos utilizar:
(Es importante darle a enter al terminar de escribir para ejecutar el codigo)

section*5

Resultado:

    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>

Tambien podemos crear una etiqueta y asignarle una clase o id a la vez, agilizando el proceso. Por ejemplo: en el caso de querer crear la seccion “elige tu mascota”, podemos utilizar el .(punto) sirve para asignar una clase y el # para asignar una id. ejemplo:

section.elige-tu-mascota

Resultado:

<section class="elige-tu-mascota"></section>

Tambien podemos crear etiquetas y sus hijos, por ejemplo: digamos que quieres crear una seccion que tenga 1 boton adentro (utilizaremos < o > para determinar si una etiqueta es mas grande (una etiqueta padre o hija) que otra. Podemos ejecutar:

section>button

Resultado:

    <section>
        <button></button>
    </section>

Ahora, ¿que sucede si queremos crear una etiqueta padre y varios hijos dentro, pero con diferentes hijos, no como antes (section>button*3), si no que queremos crear mas cosas dentro ademas de botones? pues podemos utilizar el +
el cual nos permite agregar otros hijos dentro del contenedor

section>button*3+p

Resultado:

    <section>
        <button></button>
        <button></button>
        <button></button>
        <p></p>
    </section>

Ahora, con esto ya aprendido, podemos combinarlo todo y modificarlo segun nuestras necesidades:

section*2>h2+p+p+button*3

Resultado:

    <section>
        <h2></h2>
        <p></p>
        <p></p>
        <button></button>
        <button></button>
        <button></button>
    </section>
    <section>
        <h2></h2>
        <p></p>
        <p></p>
        <button></button>
        <button></button>
        <button></button>
    </section>

📌 Maquetar es crear y definir la estructura y el contenido de la página web

Creo que es importante saber que <H1> podemos ponerlas muchas veces y no tendremos problema, pero es una mala práctica y es lo que no nos cuentan desde el principio.
Para ayudar con el SEO de la página.

me encanta la energ[ia con la que explicas, muy diferente a Freddy , cada uno tiene su toque

banda extraño a freddy:(

Profe demasido carismatico!. Demasiado entretenida aprendiendo 😃

¡Las clases con el profe Juan son geniales! Me parece muy divertida su forma de explicar, están logrando que me guste mucho todo esto y que lo vea con otra faceta🎉

Muy buena clase, ya quería recibir una clase con el profe juan.

MOKEPON! 🔥💧🌱

Juan David me acuerdo cuando eras estudiante en Platzi y me gusta verte dando clases.

Me encanta demasiado el entusiasmo que tiene el profesor, hace que tambien tenga el mismo entusiasmo para seguir aprendiendo en el curso. Muy buen profesor

section: es una etiqueta que permite dividir en secciones nuestra pagina web, permitiendo dar una estructura mas ordenada a la vista del usuario.

span: etiqueta que permite envolver un elmento que deseamos sea dinamico, es decir que cambie en el tiempo o por la interaccion del usuario según los eventos que este realice

Excelente el nuevo profe!
Seguimos aprendiendo.

Me encantó la energia con la que explica todo. Yame agrada mucho este profesor jsjsjsjsjs
Platzi se luce con sus cursos

Llegue a Platzi por un tuit de este curso, todo bien hasta que llegue a esta sección. No entendi nada, ya que el profesor da por hecho que sabemos muchos comandos que él utiliza sin explicar para qué sirven. Me frustre mucho y me desilusione de la plataforma, sin embargo, encontré la versión anterior de este curso, impartido por Freddy, y ahora sí entendí esta sección. Tuve que saltarme esta sección. simplemente no pude, los invito a revisar este tipo de cosas, mas en un curso introductorio, ya que puede hacer que muchos se desilusionen de platzi. Saludos.

Tengo que decir que Fredy explica e imparte muy bien todo su conocimiento, pero debo resaltar al profesor Juan David, explica muy detalladamente todo y la verdad me parece excelente. La mejor forma de aprender es llendo paso a paso y detallando hasta lo mas minimo y con paciencia, ya que todos tenemos un nivel y velocidad de entendimiento muy diferente, a veces cuando se explica de forma muy general muchas cosas quedan pequeños vacios que el dia de mañana se convierten en grandes inconvenientes y eso hace que a las personas les de pereza continuar aprendiendo… Siempre he pensado que la profesion de la enseñanza es muy bonita y un buen profesor nunca se olvida, porque son tus profesores los que marcan el camino que vas a seguir en tu futuro.

Espero que Platzi continue con estos formatos de enseñanza tan amenos y con profesores de tan alta calidad humana.

Gracias.

El profe me cayó super bien, es genial!!! y le entiendo muy fácil

Me gusta la actitud del profesor!! que genial de verdad!!

Si te pasa que siempre que quieres comentar el código te confundes o no recuerdas como se comenta, solo tienes que seleccionar las líneas a comentar y darle ctrl + tecla que cierra la llave. Lo que hace esto es comentarte las líneas sin importar en que lenguaje estés trabajando

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>MOKEPON! 🔥💧🌱</title>
        <script src = "./js/mokepon.js"></script>
    </head>
    <body>
        <h1>MOKEPON ! 🔥💧🌱</h1>

        <section id = "seleccionar-mascota">
            <h2>Elige tu mascota:</h2>
            mascotas

            <button>Seleccionar</button>
        </section>

        <section id = "seleccionar-ataque">
            <h2>Elige tu ataque:</h2>

            <p>Tu mascota tiene <span>3</span> vidas</p>
            <p>Las mascotas del enemigo tiene <span>3</span> vidas</p>

            <p>
                <button>Fuego 🔥</button>
                <button>Agua 💧</button>
                <button>Tierra 🌱</button>
            </p>  

        </section>

        <section id = "mensajes">
            <p>Tu mascota atacó con FUEGO, las mascota del enemigo atacó con TIERRA - GANASTE 🎉🎉</p>
        </section>

            <!--Hipodoge -> Agua
            Capipepo -> Tierra
            Ratiqueya -> Fuego
            Langostelvis -> Agua y Fuego
            Tucapalma -> Agua y Tierra
            Pydos -> Tierra y Fuego-->
        <section id = "reiniciar">
            <button>Reiniciar</button>
        </section>
              
    </body>
</html>

Apenas llevo la primera clase de esta sección del curso básico de programación y me encanta el estilo de este profe.

Cuando hablamos de MAQUETACIÓN o maquetar quiere decir: CREAR o seguir creando la estructura o el contenido de la página html.

El audio esta muy bajo de origen, no es necesario ajustar sus audífonos/bocinas.

Jajaja el profe es Timothee Chalamet.

Así va nuestra estructura:

Mejor profe que ya tuve !!! Excelente clase! Saludos desde Brasil!

si escriben por ejemplo
section#reiniciar

vscode genera la etiqueta con el id ya incluido

<section id="reiniciar">👌</section>

Hola. Que buen profe es Juan David!. Le estoy entendiendo muy bien. Le deseo muchos exitos!

El profe Juan David se nota que sabe, me gusta su metodología a la hora de explicar. Vamos por la meta! 💪🫡

Me entusiasma mucho las siguientes clases con el profe Juan, se le nota el entusiasmo al explicar, y de paso explica muy bien.

Fredi y Juan David fueron mis primeros profes

desplazaron a fredy

Profeeeee, muchas graciassss!!! Que bonito ver una persona tan joven dando estas clases. :3

Vaya, por ahora todo me parece complicado. Voy a tener que repetir la clase unas cuantas veces. Gracias por la clase.

hola, como aporte queria decirles, que para hacer el juego propio de uno, cambien ciertas cosas, y agreguen comentarios que les ayude a recordar como han ido estructurando todo. Me encanto la clase

me encanta

Un pequeño comentario para precisar sobre HTML:
Si observan, el inicio de la declaración de un HTML comienza por

<!DOCTYPE html>

Es la declaración del tipo de documento en la actual versión HTML5. En versiones pasadas HTML4 (y anteriores) la declaración era más extensa. Ej:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ://www.w3.org/TR/html4/loose.dtd">

Afortunadamente vivimos en un mundo mejor donde se pueden simplificar estas declaraciones.
Adicionalmente, toda la estructura de HTML se puede crear en Visual Studio Code escribiendo el símbolo de exclamación ( ! ) y presionando Enter. Esto es gracias al complemento Emmet.
.
Por último, para los que algunas vez hayan escuchado de HTML y se pregunten porque el profesor Juan usa <section> y no <div>. Esto se debe a que HTML5 trae nuevos elementos (o tags) para favorecer la semántica y facilitar la lectura del código. Lo que antes se hacía con puros div ahora se puede hacer con section, article, etc. Para más información pueden complementar esto en el Curso Definitivo de HTML y CSS

Como que el fuego le gana a la tierra?. si yo tiro tierra al fuego el fuego se apaga, pero si tiro tierra al agua se mezclan y queda empate 🤓🤓

Me encanta que empezemos a crear proyectos de manera profesional 😁😁

Es interesante como el profesor David explica como usar la primera parte de la estructura HTML. Sabia algo de ese tema, pero nada con respecto al formato y la forma del diseño de este. Siempre terminaba mareado con el Frontend, pero ahora si le estoy captando bien y eso me gusta.

A este parcero se le nota mucho lo colombiano. Y explica con mucho entusiasmo; se ve que lo disfruta y eso hace dar más ganas de aprender. Por más profes así. 📈👨🏽‍🏫

No conocía al profesor Juan David Castro, me encanta su dinamismo y su actitud, adicional se nota su amplio conocimiento el cual sé que nos compartirá y nos aportará para crecer en este nuevo mundo al que nos hemos lanzado con toda 😃 Nunca pares de aprender 😃

¡El profesor Juan David es un crack! Me gusta que enseñen HTML.

Increíble en pocos minutos se maquetó toda la estructura del juego, grande

No sabia q Timotheé Chamalet era profesor de platzi xdd

Practicamente es lo mismo a PIEDRA, PAPEL Y TIJERAS, pero con figuras y otras estructuras que complementa una página web.

Hola , solo quiero decir que estoy muy agradecido con Platzi, viendo que carera escoger para la Universidad , encontré a Platzi , y que suerte la mía , gracias a los cursos de Google y el mismo Platzi , me estoy decidiendo que hacer , mientras nunca paro de aprender.

Buen relevo, Juan DC por Freddy.
Es un gran profe!!

“Lo que lanzamos en las fiestas” JAAJAJAJAJA

Excelente profesor, un gusto y que bueno imparte sus conocimientos.

Una cosa que en serio me gusta de Platzi es que no solo es marketin barato, ellos cumplen lo que te venden y sobretodo con la mejor actitud posible y no hablo solo de Freddy. Es cierto, él es un plus pero todos te enseñan de la forma más amigable posible lo que facilita muchísimo el aprendizaje y lo convierte en algo divertido así logrando que nuestro cerebro lo asocie con diversión y productividad. Gracias por todo

Gracias, Freddy, gracias!
Juan David es un excelente maestro.

Con este Juan, hize el de Piedra papel o tijeras en yt xd, de ahí conocí platzi, todo un capo

primera clase con este profesor Y ME ENCANTA SU ESTILO DE ENSEÑANZA creo que se entiende muy bien

Siiiii, Juan David, de los mejores profesores de Platzi

Excelente primera clase con el prof Juan!!

Es solo la primera clase, pero los ánimos y el empeño que Juan David demuestra en cada explicación son bastantes energéticos, qué buen comienzo de la segunda sección de este curso!!!

Mandaron a dormir en paz al Freddy no😨😨

Me encanto la clase, que nivel: comparto mi codigo ( he hecho modificaciones para sentir que estoy investigando y aprendiendo por mi cuenta y haciendo el juego diferente)
<html>
<head>
<meta charset=“utf-8” />
<title>MOKEPON GAME</title>
<script src=""></script>
</head>
<body bgcolor="#5A6973">
<h1><center><n>Bienvenido Mokepon 🔥💦🌵🌪️</n></center></h1>
<section id=“Selecciona-guerrero”>
<h2><center><p style=“color:#0F84D3”> Elige tu guerrero: </p></center></h2>

      Guerrero

      <button>Seleccionar</button>
      
    </section>
    <section id="Seleccionar-ataque">
      <h2><center> Escoge el ataque: </center></h2>
        <p><b>Tu mascota tienes <span>5</span> vidas </b></p>
        <p><b>La mascota contricante <span>5</span> vidas </b></p>
        <p>
          <button> Fuego 🔥</button>
          <button> Agua 💦</button>
          <button> Tierra 🌵</button>
          <button> Aire 🌪️</button>

        </p>

    </section>
    <section id="mensajes">
      <p> Tu guerrero ataco con FUEGO, el Guerrero del enerigo ataco con tierra - GANASTE 🎉🎈   </p>
    </section>
    <section id="reiniciar">
      <button> Reiniciar </button>
    
    </section>

</body>
</html>

Hey chicos, no es por quitarles la creatividad… pero si apenas van empezando en esto sean fieles a la idea de mokepon; si lo personalizan al antojo de su creatividad, después no encontrarán la solución tan fácilmente… se los digo, porque he decidido casi que volver a empezar. 🥲

hola si no tiene mucha experiencia en cogido y variables les recomiendo que sigan las instrucciones paso a paso incluso con el mismo nombre de las varibales que los profesores, mas adelante el codigo empieza a cambiar drasticamente y se pueden confundir con los nombre, yo hiba en la clase 55 y me toco devolverme por que no encontre el error que tenia, en verdad les digo que despues de la clase 43 las cosas se ponen feo

Piedra papel demanda

Les recomiendo esta extensión de Visual Studio Code para poder ver sus proyectos en vivo sin tener que actualizar a cada rato la página.

Claramente estoy haciendo el codigo como “Pokemon”

La energía al dar la clase inspira.

Maquetación
Definir la estructura y contenido de una página web.

Excelente la pasion que le pones es de verdad la clave.
Aprender de forma energetica.
Gracias por una clase tan apasionante

Más información de:

• section https://developer.mozilla.org/es/docs/Web/HTML/Element/section
• span https://developer.mozilla.org/es/docs/Web/HTML/Element/span