Creación y Estructura de un Archivo index.html Básico
Contenido del curso
María José Ledesma
Yo hice un HTML CheatSheet con las etiquetas más utilizadas. Espero los ayude😄 ¡Nunca paren aprender! (Y practicar) ✨🦄
Francisco Ezequiel Ferreyra
La crack de los resumenes.
Ambar Z. Alvarez Vélez
Gracias, Majo! <3
Yajayra Arauco Flores
Ambar Z. Alvarez Vélez
Gracias por tu aporte! :3
Luis Palomo
"Cómo estudiar en línea" ;)
Carlos Eduardo Gomez García
Les recomiendo más usar este meta viewport:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Algunos navegadores pueden causar problemas con el estilo de ciertos elementos en su versión responsive y la etiqueta que se enseñó aquí no es suficiente para arreglarlo, me pasó a mi y le pasó a muchas personas más que conozco, esta etiqueta que les comparto es casi mágica, créeme, te va a ahorrar dolores de cabeza
Carmen Álvarez M.
Gracias
Guillermo Alfonso Garza Del Prado
Gracias!
Larry Caycho
Efraín Hernández García
Mucho más descriptivo!
Ivan E. Batista-Ochoa
Este aporte está bien chévere. ¡Muchas gracias!
John Cardenas
En el head van todos los archivos importantes para que nuestro proyecto funcione correctamente, algunos como: Estilos, fuentes, descripciones, librerías... Es la parte no visible de nuestra página.
<!DOCTYPE html> <!--Le decimos al navegador que este archivo es del tipo html:5--> <html lang="es"> <!--Es la etiqueta "padre" donde vivirá nuestro proyecto. El atributo lang establece el idioma del sitio web. Debemos usarlo para que el navegador pueda traducir nuestra página--> <head> <meta charset="UTF-8" /> <!--Este atributo nos ayuda a la hora de incluir caracteres especiales y emojis en nuestro proyecto--> <meta name="description" content="Esta página te mostrará fotos de gatos" /> <!--Muestra una descripción de nuestro sitio en los buscadores--> <meta name="robots" content="index,follow" /> <!--Le dice a los robots de los navegadores que rastreen nuestra página y la muestran en las búsquedas--> <title>Mi página</title> <!--Título de nuestra página, no confundir con los H1-H6. Este titulo es el que ves en la pestaña del navegador--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--Nos ayuda a trabajar en proyectos reponsive--> <link rel="stylesheet" href="./css/style.css"> <!--Linkea/Enlaza archivos de estilos u otros archivos que necesitemos en nuestro proyecto--> </head>
Danilo Fernandez
Excelente practica, comentar.
sergio chambi
gracias por el aporte, lo estoy utilizando para mi apunte
Jesus Manuel Hernandez Diaz
Ya habia realizado otros cursos de html y css en platzi, me estaba pensando si verme este, con esa mentalidad de ya yo lo se todo de html y css, pero creo que esa mentalidad no ayuda y aqui estoy haciendo el curso aprendiendo cosas nuevas como lo de las meta etiqueta robost y description.
Consejo:Siempre es bueno ver cursos de los mismos temas puedes aprender algo nuevo que en otro no tocaron.
Carlos Fernando Aguilar González
Hola Jesus Manuel!
Completamente de acuerdo. Me gusta ver cursos diferentes aunque sean de un mismo tema o de la misma tecnología. Al final aprendes muchos detalles diferentes muy útiles.
Saludos
César Nehomar Laya Trujillo
Gracias por tu consejo, creo que no lo voy a olvidar.
Luis >
¡Nota importante! La longitud de la meta descripcion no debe de superar los 155 caracteres.
Alejandra Valentina Acosta Cuéllar
Gran detalle, muchas gracias!
Alan Rodrigo Ramirez Luna
Excelente, muchas gracias!
Matías Criado
Esta página me ha ayudado mucho para conocer las etiquetas HTML y su tipo de display 😀
Jorge Joel Anaya Moreno
Esto es muy útil cuando uno empieza a querer hacer cosas por su cuenta. Gracias por compartir
Raul Wabe
*si, bastante util!! gracias!!
Alejandro Ramos
Un detalle, en el minuto 14:38, lo correcto sería initial scale. Por si a alguien le puede causar confusión. Igualmente, muy buena clase 😃.
Joel Dominguez Merino
Buena observación arhcoder
La etiqueta quedaría así :D
<meta name="viewport" content="width=device-width, initial-scale=1.0">```
Carlos Fernando Aguilar González
Así me fijé.
Saludos
Luis Angel Rojas Estevez
Una linea, también importante, es insertar el favicon, pero te preguntaras ¿qué es el favicon? Es el icono que se encuentra del lado izquierdo de la pestaña del navegador, que esta junto al titulo de la página.
<link rel=”shortcut icon" href=”<ruta_del_favicon>”>
Se recomienda que el favicon sea en formato .png y con tamaños de 16x16 pixeles o 32x32 pixeles
Valentina Ubeda
gracias rey
Johan Fernando Romo Eligio
Gracias por el aporte, pero no estás usando comillas para los elementos dentro de la etiqueta, la sintaxis correcta es la siguiente:
<link rel="shortcut icon" href="my_image.png">
Jose Luis Grande Acevedo
Tu primer archivo html siempre tiene que llamarse index.html. Index va ser nuestra pagina inicial que el servidor va a buscar al momento que tenga que abrir un proyecto. Si esta pagina no existe nosotros tendríamos que decirle al servidor cual es la pagina que tiene que tomar en cuenta como que es su página de inicio.
Vamos a generar una línea de código que le va a decir al navegador que el código que está leyendo es html5 y esta es la línea de <!DOCTYPE html>, esta línea le dice al navegador todo lo que viene aquí es html5 así que entiende todas las etiquetas por html5. Existen etiquetas que se auto cierran.
Después tenemos que hacer un contenedor principal al que se le conoce como contenedor padre que es <html Lang=”es”></html>, este contenedor va a llevar todas las etiquetas que tengamos en nuestro proyecto y este lleva un atributo especial que se llama lang=”es”, que es lo que le dice al navegador cual es el lenguaje que tiene este proyecto ya sea inglés, español, etc.
Generaremos dos contenedores más, <head></head> y <body></body>. Estas dos etiquetas son contenedores hermanos, en la etiqueta head va a ir todo lo que es importante para el navegador para poder cargar el proyecto de la forma en la que nosotros lo construimos pero que no es visual para el usuario final. Esto quiere decir todas las dependencias, algunas librerías externas, por ejemplo, las fuentes, nuestro CSS tienen que ir ligados en el head, aquí es donde los vamos a mandar a llamar.
El usuario va a ver todo lo que esta adentro del body, va a ir todo el texto, todas las imágenes, todos los videos, todas estas cosas interactivas que va a tener el proyecto con el usuario va ir a dentro de el body.
En el head colocamos la etiqueta meta, esta etiqueta le va a dar cierta información al navegador para que sepa como tratar nuestro proyecto. Esta etiqueta se cierra sola. Esta etiqueta va a llevar un atributo que se llama charset, que va a llevar un valor que es UTF-8, que nos va a ayudar para que el navegador pueda entender caracteres especiales (ñ, ü, acentos, etc)
<meta charset="UTF-8" />
Otro meta que vamos a utilizar es el meta name description, esta parte del description es importante y esto nos va a ayudar, es parte de SEO, porque nos va a ayudar a que el navegador ayude a que cuando la gente busque cierta información en internet en la descripción que tengamos en nuestra pagina pueda salir esa información. Por ejemplo, podemos ponerle tipo content que es qué tipo de descripción queremos poner y nosotros podemos poner la descripción de nuestra página. Por ejemplo, si ponemos “Esta pagina te mostrara fotos de gatos” y si lo guardas es justo lo que te va a salir en la descripción cuando vayas a Google y busques la página. <meta name="description" content="Esta página te mostrara fotos de gatos" />
Tenemos otro meta, nos va a ayudar para la parte de los robots de posicionamiento de los navegadores, es decir cuando tu estas utilizando Google y estás haciendo una búsqueda si pones js o si pones aprendizaje en línea hay ciertos robots que nos ayudan a posicionar las paginas que tenga que ver con relación a esto, y nosotros podemos decirle a nuestro proyecto que le autorizamos a los robots poder ayudarnos a acomodar nuestra pagina para ese tipo de búsquedas, ese meta se va a llamar meta name robots, hablamos de muchos porque no solo existe el robot de Google existen otros buscadores en otro tipo de navegadores que podemos utilizar para poder hacer búsquedas específicas. Es decirles a todos los robots de los buscadores que estamos autorizando que puedan ayudar a colocar nuestra página con relación a la búsqueda que se hace. La forma de autorizarle es content index, follow. Quiere decir que en nuestro index tienes autorización de poder ayudarme a colocar nuestra pagina si hay alguna búsqueda que tenga que ver con nuestro contenido, esto es importante, si no queremos que esto salga se le pone un unfollow para que el robot no siga nuestro index. <meta name="robots" content="index, follow" />
Tenemos otro atributo que se llama title, es importante porque cuando vamos al navegador y entramos a una página, en la parte de arriba podemos ver el titulo de ese proyecto, ese titulo se coloca con el title.
<title>Es mi página</title>Tenemos otro meta, es muy importante para los proyectos que son responsive y actualmente todos los proyectos que tu hagas, todos los proyectos web tienen que ser 100% responsive, este meta es <meta name=””viewport”/>, viewport es simplemente el tamaño de la pantalla, es el widht de la pantalla completa y en la parte de content le vamos a decir al navegador que queremos que el widht sea igual a device-widht, initial-scale=1.0, es importante cuando inicies un proyecto ese meta exista, ya que nos va a ayudar a que si el proyecto se abre desde una pagina web pueda escalarse un poco el texto de las imágenes y la gente pueda verlo mejor desde un dispositivo mobile, si no tenemos esta línea y abrimos nuestra pagina en un dispositivo mobile se va a ver una letra muy chiquita y vamos a tener que darle zoom, esa es una super mala experiencia para el usuario. <meta name="viewport" content="widht=device-widht, initial-scale=1.0" />
Existen otras etiquetas que utilizamos para poder agregar el CSS, esa etiqueta se llama link, link va a tener dos atributos, el rel que le va a decir que el documento que va a cargar es una hoja de estilos y href que significa la referencia, en donde se encuentra ese documento, le ponemos la ruta. De esta forma ya tengo mi hoja de estilo incorporada a mi index.
<link rel="stylesheet" href="./css/style.css" />María José Ledesma
¡Genial aporte! 😄 ¡Nunca pares de aprender! (Y practicar) ✨🦄
SAMUEL DAVID APONTE RAYO
Muchas gracias bro!
Joel Dominguez Merino
En la escala inicial en el minuto 14:35 se enseño lo de initial-scale Fue un pequeño error de dedo que coloco una letra de mas. Les dejo la linea correcta por cualquier duda :D
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esther Janeth Machado Valenzuela
Gracias :D
Arath Astorga
Tabla periódica para HTML 😊️
María José Ledesma
¡Muchas gracias por este aporte! 😄 ¡Nunca pares de aprender! (Y practicar) ✨🦄
Esther Janeth Machado Valenzuela
wow gracias por el link 😊
Marlon Piero Rivera Centurión
Uriel Alfonso Velandia Donado
Gracias
Raúl Cordero Ibarra
¿Cómo haces para que cuando el texto es demasiado largo te aparezca en la siguiente linea? en mi caso tengo que estar haciendo scroll lateral para poder ver mi código cuando esta demasiado largo
Ambar Z. Alvarez Vélez
Hola! Les comparto esta pagina donde pueden encontrar gran parte de etiquetas HTML en forma de tabla periodica. Espero que les sirva como a mi me a servido! :3
Platzi Team
Excelente aporte compañera, Gracias 🙌🙌
Ernesto Jose Chicas Navarrete
Gracias Ambar
Daniel Torrealba Febres Cordero
Alt + shift + A
Con esa combinación de teclas pueden hace comentarios en Visual Studio Code.
victor Florez
Para Mac es Shift + Option + a
Cesar Arellano Hernández
afirmo
Fausto Emilio Salgado Morales
Les comparto un análisis de las etiquetas y un ejemplo práctico con la página de SpaceX :) .
Si lo quieres ver mejor puedes seguir el siguiente link :) https://www.canva.com/design/DAEGYFtX0k4/zKhIZgC8F4SXVOKK9ZVVVQ/view?utm_content=DAEGYFtX0k4&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink
Augusto Borromeo
Gracias. Muy buen ejemplo!
Edixon javier Pabon Lizcano
Gracias, esta muy bueno.
Zoe Uribe Eugenio
Les comparto mis add-ons para solo HTML y CSS. Tengan una mejor experiencia.
Jesus Velasco
tremenda extensión yo la combinaría con indent-raimbow para visualizar con colores la indentacion de nuestro proyecto
Josue Granados
Agregale un icono a tu página web!
Los favicon son iconos que se muestran a un lado del nombre del documento html en la pestaña del navegador y cuando agregas una pagina web a tu lista de favoritos.
Para agregarle un icono a tu html desde tu carpeta de imagenes haz lo siguiente:
<link rel="shorcut icon" href="nombre_del_.ico" type="image/x-icon">
Listo! 🥳
Héctor Eduardo López Carballo
Muchas gracias por tu aporte! Es muy valioso! 💪
Cristian Alejandro Velasco Cernas
Les recomiendo mucho es esta extensión para que puedan indentar correctamente y no se piedan mucho
Su código se veria algo así
Jhonatan Humberto Duque Correa
Muchas gracias!
