Clase 18 de 56 • Curso Definitivo de HTML y CSS
Contenido del curso
Zoe Uribe Eugenio
Julián Ramírez
Rafael Amed Valenzuela Gonzalez
John Cardenas
Joel Dominguez Merino
Joaquim jair merlo luque
Julian David Orozco Colorado
Andres Felipe Rodriguez Hernandez
sergio chambi
Cristhyan Pacheco
Ali Hilario
iecgerman .
Joshua Ortiz Rosales
Cristian Ramos
Pablo Perez Lee
Joaquín Rafael Montes
iecgerman .
Pablo Díaz de Valdés
JeanCarlos Atoche Pascual
Luis Hernandez
Anthony Smith Quispe De la cruz
César Palma
Edison Manrique
Héctor Tello
Hollman Andres Barbon Florez
Héctor Tello
Ronaldo
Iván Enzo Sarapura
JeanCarlos Atoche Pascual
Nicoll Idaly Angulo Mejia
Luis Palomo
Rodolfo Sebastian Herrera Hernández
FREDDY NILSON HOME VILLA
Fabian Flores
Velazquez Pedro
Fabian Flores
Gianfranco Iván Misari Ortega
Juan Sebastián Sierra Morales
Jose Luis Grande Acevedo
Max Camargo
Juan Manuel Velez
Jimmy Buriticá Londoño
Lorraine Gelis Díaz
Kevin Andres Curruchich Xocop
Ithzamary Vilchis Garcia
En VSC para Windows 10 , para convertir el código en comentarios es
CTRL+K .... CTRL+C
alert("Gracias");
:D
Tambien puedes usar CTRL + / y lo convierte en comentario :)
Para seleccionar varias palabras iguales y modificarlas al mismo tiempo en VScode pueden usar control + D
Un excelente dato!
<h1>Gracias<h1>
Para comentar en Windows es “SHIFT+ALT+A”
Gracias!
gracias por el aporte !
Hola, encuentro muy útiles estos atajos: !Algunos atajos de selección
Espero les sirva 😄
¡Excelente! Gracias.
Eres la ostia, todavía ni he visto la clase y me puse a leer los comentarios y me topo con este super tip.
¿Como le haces para hacer un mini video en gif?
FIELDSET -> nos da un borde en el formulario. y poder seccionar un formulario LEGEND -> nos permite ponerle como un titulo al formulario
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendario de clases de PLATZI</title> </head> <body> <h1>Calendar</h1> <form action=""> <fieldset> <legend>Calendario PLATZI (<b>primera forma</b>)</legend> <label for="hora">hora :</label> <input type="time" id="hora" name="hora"><br><br> <label for="dia">Dia :</label> <input type="date" id="dia" name="dia"><br><br> <label for="semana">Semana :</label> <input type="week" id="semana" name="semana"><br><br> <label for="mes">Mes :</label> <input type="month" id="mes" name="mes"><br><br> <input type="submit" value="Enviar" name="enviar"> </fieldset> </form><br><br> <form action=""> <fieldset> <legend>Calendario PLATZI (<b>segunda forma</b>)</legend> <label for="calendario">Calendario :</label> <input type="datetime-local" id="calendario" name="calendario"><br><br> <input type="submit" value="Enviar" name="enviar"> </fieldset> </form> </body> </html>
asi quedarian
porque 2 etiquetas <br><br> ?? y ninguna con cierre , yo se que no se cierran pero es buena practica colocar <br/>
esas 2 etiquetas juntas agregan 2 saltos acaso ??
gracias por el dato, quedan mucho mejor.
Este curso está genial! Hasta ahora usaba la etiqueta <p> para todo jajaja, ya era hora de aprender buenas prácticas y nuevas etiquetas. Es increible la profundidad a la que se puede llegar con html.
x2 😝
De momento he hecho 3 cursos de HTML completos en Platzi. Diego es el que mejor imparte las clases y estructura el contenido en mi opinión.
concuerdo con tigo
diego el mejor parcero
Buenas comunidad, tras ver esta clase me surgieron dos dudas:
Ahora bien respecto a mi segunda duda: Por lo visto label no es una etiqueta obligatoria, esta pensada para facilitar la navegación a los usuarios y además para usuarios que tienen dificultades para teclear bien las regiones pequeñas(como las checkboxes).
Solo no es recomendado usar ids con css, es muy específico es mala práctica
La etiqueta name se usa para identificar a ese input en un servidor.
La etiqueta label es para agregarle una descripción por fuera al campo y que el usuario sepa qué escribir. No hay mucho que describir de un botón que dice enviar.
Cabe aclarar que los tipos de inputs utilizados en esta clase NO funcionan en Firefox.
Cordial saludo Hector
Que opción recomiendas en ese caso, ya que yo uso
<button>Enviar</button>
Slds
Es que los inputs utilizados en esta clase no funcionan en firefox, al intentar ver la página desde firefox, firefox solo los muestra como si queran in textbox más, en cambio en chrome sí funcionan bien. Recomendaría utilizar sólo chrome, o utilizar inputs que sean compatibles con la mayoría de navegadores.
aaaah banda 48 horas para volverme desarrollador web
Hoy tienes otras 48 horas xd
Éxitos compañero!!
jajajajaj
Con un poco de css queda linda
Ya que estamos con esto de los comandos aquí va mi aporte:
Con Alt + Flecha arriba/Flecha abajo : pueden mover la línea, o líneas, de arriaba abajo o al revés
Con Alt + Shift + Flecha arriba/Flecha abajo: Puede copiar toda la línea, o líneas que tengan seleccionadas o en las cuales estén parados hacia arriba o abajo.
A la larga se hace mucho más fácil cuando tienen que escribir mucho código.
<input type="button"> <!-- Crea un input de tipo boton --> <input type="checkbox"> <!-- Crea un checkbox --> <input type="color"> <!-- Crea un input para que el usuario seleccione colores --> <input type="date"> <!-- Crea un input para que el usuario introduzca una fecha --> <input type="datetime-local"> <!-- Crea un input para que el usuario introduzca una fecha mas especifica --> <input type="email"> <!-- Crea un input para que el usuario introduzca su email --> <input type="file"> <!-- Crea un input para que el usuario introduzca un archivo --> <input type="hidden"> <!-- Crea un input oculto --> <input type="month"> <!-- Crea un input para que el usuario introduzca un mes --> <input type="number"> <!-- Crea un input para que el usuario introduzca numeros --> <input type="password"> <!-- Crea un input para que el usuario introduzca una contraseña --> <input type="radio"> <!-- Crea un input de tipo radio (parecido a checkbox) --> <input type="range"> <!-- Crea un input de tipo rango --> <input type="reset"> <!-- Crea un boton para resetear el contenido del formulario llenado por el usuario --> <input type="search"> <!-- Crea un input de tipo search para buscar contenido --> <input type="submit"> <!-- Crea un boton para enviar los datos del formulario --> <input type="tel"> <!-- Crea un campo para añadir un numero de telefono --> <input type="text"> <!-- Crea un campo para añadir texto --> <input type="time"> <!-- Crea un campo para añadir una hora --> <input type="url"> <!-- Crea un campo para añadir una URL --> <input type="week"> <!-- Crea un campo para añadir una semana --> <input type="disable"> <!-- Crea un campo de tipo inhabilitado --> <!-- Creacion de un formulario, existen varios parametros --> <form method="POST" action="" autocomplete="off"> <!-- Para añadirle un titulo al input --> <label for="nombre-input"> <span>Nombre input</span> <input name="nombre-input" type="text" placeholder="Nombre input"> </label> </form> ```
Gracias.
Notas de la clase
como se llama la aplicacion que utilizas para tomar notas?
One note de Windows y las capturas de pantalla para el código son con la extensión CodeSnap de Visual Studio Code
Para los que tengasn teclado Microsoft en español Ctrl + "tecla donde esto }"
Un aporte más
Resumen
Se utilizaron los siguientes tipos de inputs para hacer un calendario:
Componentes independientes:
Componentes integrados:
Los datos se envían con el input:
Vamos a poner form que es nuestra etiqueta principal que se convierte en el contenedor de nuestro formulario completo, vamos a hacer un formulario tipo calendario en donde vamos a pedir la hora, el dia, la semana y el mes para que el usuario pueda decirnos en que dia, semana, mes quiere llegar y de igual forma para poderse retirar. En caso de que quisiéramos mandar esta información para eso vamos a utilizar otro atributo que se llama name y el name va a ser igual el mismo atributo de form y id
<label for="hora"> <span>Hora</span> <input type="time" id="hora" name="hora" /> </label> <label for="dia"> <span>Día</span> <input type="date" id="dia" name="dia" /> </label> <label for="semana"> <span>Semana</span> <input type="week" id="semana" name="semana" /> </label> <label for="mes"> <span>Mes</span> <input type="month" id="mes" name="mes" /> </label>
Vamos a utilizar otro input con un tipo que se va a llamar submit, que lo que va a hacer es vas a ver en el navegador como se va a renderizar este input en particular, quiere decir enviar
<input type="submit" />
Otra forma de colocar esto es:
<form action=""> <label for="calendario"> <span>Calendario</span> <input type="datetime-local" name="calendario" id="calendario" /> </label> <input type="submit" /> </form>
En el type se pone datetime-local, le estamos diciendo que queremos el tiempo fecha de nuestra área local, con eso pregunta dia mes año y hora, 4 cosas en un solo input.
Gran aporte!
Me esta explotando la cabeza, he utilizado js, he hecho todo al revés, no solo para el usuario es mas cómodo, es que también nosotros estamos mas satisfechos con el resultado
Si me gustan mucho los cursos de Platzi, te enseñan buenas practicas.
Chicos, un dato. En VSC colocando html:5 y enter te renderiza toda la estructura del html.
:D
Son las maravilas de Emmet :)
Les comparto algunos tipos de input
<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week">
