Yo hice un HTML CheatSheet con las etiquetas más utilizadas.
Espero los ayude😄
¡Nunca paren aprender! (Y practicar) ✨🦄
Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Index y su estructura básica: head
7/55Recursos
Aportes 622
Preguntas 183
Ordenar por:
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
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>
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.
¡Nota importante! La longitud de la meta descripcion no debe de superar los 155 caracteres.
La etiqueta meta descripcion de platzi tiene 151 caracteres
Esta página me ha ayudado mucho para conocer las etiquetas HTML y su tipo de display 😀
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 😃.
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
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" />
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 😄
<meta name="viewport" content="width=device-width, initial-scale=1.0">
En VSC podemos digitamos “<!-- -->” y con eso podremos hacer comentarios dentro de nuestro código, sirve mucho para cuando estamos iniciando y poder guiarnos que hacemos.
Saludos 😄
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
Alt + shift + A
Con esa combinación de teclas pueden hace comentarios en Visual Studio Code.
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
Les comparto mis add-ons para solo HTML y CSS. Tengan una mejor experiencia.
Les recomiendo mucho es esta extensión para que puedan indentar correctamente y no se piedan mucho
Su código se veria algo así
Tienen que entrar a curiosear esa tabla. Es interactiva, le das clic a un elemento y te dice su función.
.
.
👇 Créditos para saber de la página.
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:
- Convierte la imagen (jpg o png) a un archivo .ico en este conversor online -> https://www.favicon-generator.org/
- Descarga el .ico
- El .ico necesita de estar en la misma carpeta que el index.html, descargalo directamente ahí o corta y pega
- Agrega una nueva referencia dentro del <head> con esta linea:
<link rel="shorcut icon" href="nombre_del_.ico" type="image/x-icon">
- Guarda y abre o recarga el html en el navegador
Listo! 🥳
Toda la página va entre las etiquetas de html, con el atributo lang que sirve para definir el idioma:
<html lang="es">
</html>
Html se separa en 2, el head que es la parte en la que irán todas las definiciones y links que ayudarán a la página a mejorar, y el body en el que irá todo lo visible o lo que se va a mostrar al usuario:
<head>
</head>
<body>
</body>
Dentro del head van diferentes etiquetas como son:
La etiqueta meta UTF-8 se encarga de brindar una definición de caracteres basado en en código ASCII a nuestra página.
<meta charset="UTF-8" />
La etiqueta meta con atributo name, nos ayuda con la descripción de nuestra página que muestra el navegador y nos ayuda en el posicionamiento.
<meta name="description" content="Esta página te mostrará fotos de gatos" />
La etiqueta meta con atributo robots, nos ayuda a que los bots de los navegadores acomoden nuestra página para brindar la parte que está buscando el usuario.
<meta name="robots" content="index,follow" />
La etiqueta title, nos ayuda a mostrar el titulo de nuestra página en la parte superior de la pestaña del navegador.
<title>Platzi</title>
La etiqueta meta con viewport ayuda a la página a ser responsiva (A adaptarse a la pantalla en la que se esta mostrando).
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Con link stalesheet vinculamos nuestra página de estilos css.
<link rel="stylesheet" href="./css/style.css" />
desafio
Vengo del futuro. El curso de prework está sumamente confuso, tiene desorganizada la ruta de aprendizaje y las explicaciones son muy complicadas para los que estamos empezando de 0.
¿Por que el archivo principal de nuestro sitio web se llama index?
Porque es la página que el servidor va a buscar por default para mandar al usuario en a primera carga. Y si no la encuentra vamos a tener que decirle al server cual es la que queremos que muestre. y si no le indicamos cual mandar primero y no encontró el index el server va a mandar la estructura de carpetas de nuestro sitio web.
**Estructura Básica del Header: **
<html lang="en"> <!-- 2 -->
<head> <!-- 3 -->
<meta charset="UTF-8"> <!-- 4 -->
<meta name="description" content="descripción breve"> <!-- 5 -->
<meta name="robots" content="index, follow"> <!-- 6 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 7-->
<title>Document</title> <!--8 -->
<link rel="stylesheet" href="style.css"> <!-- 9 -->
</head>
<body> <!-- 10 -->
</body>
</html>```
1. Esta línea le dice al navegador que nuestro sitio web usa el estándar HTML5
2. Es la etiqueta padre que va a contener todas las demás etiquetas de nuestro archivo. El atributo lang nos permite indicarle al navegador el idioma del contenido de esta página esto permite a al navegador saber cual es el contenido que puede que ocupemos traducir
3. Aquí va todo lo que es importante para el navegador, para poder mostrar nuestro sitio de la forma en la que nosotros lo construimos pero que no es visual para el usuario final.
*Ej. nuestros archivos css, las fuentes, librerías etc.*
4. Esta es una etiqueta meta, nos permite indicar la codificación de caracteres utilizada
5. Nos permite describir brevemente el contenido de la página web
6. Le indica a los robots que pueden ayudarnos a colocar en los resultados de búsqueda según nuestro contenido.
7. Para controlar el tamaño y escala del viewport (toda el área del navegador donde se renderiza nuestro sitio).
8. Nos permite dar un título a nuestra pagina, el titulo se muestra en los tabs del navegador.
9. Nos permite cargar dependencias para el correcto funcionamiento de nuestro sitio ej. Archivos
10. *A*quí va toda la estructura de la parte visual es decir todo lo que el usuario si va a poder ver.
*Ej. textos, imágenes videos.*
La primera vez que comparto mis apuntes
Es initial-scale=“1.0” para que no se confundan, lo más probable es que se le fue una letra demás.
Por fin un curso donde detallen la importancia de los metadatos, llevo mucho buscando esto y por fin lo encuentro.
Vengo del Curso de frontend developer y me doy cuenta de que Diego es un gran profesor. Sería ideal que él dictara ese curso.
Para ver mejor las tabulaciones o indentaciones, les super recomiendo esta extensión de VS code, es maravillosa.
Les recomiendo instalar la tipografía Jetbrains Mono, tiene distintas ligaduras y es muy bonita.
Pueden dar clic aquí
Index y su estructura básica
- editor de texto: VS Code
- index.html, siempre es la primera página, es la que el servidor busca al abrir un proyecto
-<!Doctype html>: indica que es HTML 5 - <html lang=“es”>. indica el idioma
- <head>: cosas importantes para el navegador que el usuario no ve
- <meta>: información para el navegador, se cierra sola
- <meta charset UTF-8>: entender caracteres especiales
- <meta name =description content="">: El navegador ayuda a encontrar cierta información, ayuda en SEO
<meta name=“robots”> index,follow autorizando
-<meta name="viewport content width=device-width, inicisla-scale=1.0>
<link>
-<title> - <body> : lo visible para el ususario
- tabulador: indica que etiquetas son principales
- algunas etiquetas se autocierran
Es fundamental que el primer archivo HTML de nuestra pagina se llame “index.html”, ya que esta es la pagina que el servidor buscara para abrir.
La primera linea de codigo que hay que escribir es <!DOCTYPE html>, ya que esto le dira al navegador que todo lo que va a leer es html5.
En la segunda linea va a ir <html> </html>, esto es llamado contenedor padre o contenedor principal. Este contenedor va a tener todas las etiquetas y contenido que tengamos en nuestro proyecto. Este contenedor lleva un atributo especial llamado lang=“es” el cual le dice al navegador en que idioma esta el contenido (en este caso español). Quedaría como <html lang=“es”>
Luego de colocar lo anterior, pasaríamos a agregar una etiqueta <head> y una etiqueta <body> con sus respectivos cierres. Es importante dejar un espacio llamado tabulacion para que sea mas legible el codigo. Esto no lo nota el navegador, pero es importante para que tu puedas notar cual es el orden.
La mayoria de las etiquetas necesitan que se cierren colocando un </>, pero tambien hay ciertas etiquetas que se autocierran, como la doctype.
El head y el body son contenedores hermanos. En la etiqueta de head ira todo lo que es importante para el navegador para poder cargar el proyecto como nosotros lo construimos pero que no es visual para el usuario final. EJ: Fuentes, librerias externas, css, dependencias, etc, tienen que ir ligados al head, pero el usuario final no va a ver esto.
Lo que el usuario va a ver es todo lo que esta dentro del body: Todas las imagenes, el texto, los videos, las cosas interactivas, etc.
Esto es similar al cuerpo humano, el head sería como el cerebro, y el body es como las manos, los brazos, etc.
Dentro del head, va a ir una etiqueta que se autocierra llamada <meta>. En este primer meta le pondremos <meta charset=“UTF-8”> . El utf-8 sirve para que el navegador entienda caracteres especiales como la ñ, la ü, etc.
El segundo meta será <meta name=“description”> el cual indicará que estás colocando la meta descripción para la busqueda en google. En el mismo meta colocarás un content="…" el cual sera el texto de la descripcion
Luego, agregarás un <meta name=“robots” content=“index, follow” /> el cual le dira a google que crawlee tu web
Luego agregaremos un <title> dentro de head donde pondremos el titulo de nuestra pagina, lo que sale arriba en la pestaña.
Luego un <meta name=“viewport content=width-device-width, initial-scale=1.0”/> el cual es OBLIGATORIO para poder crear un sitio responsive.
Luego un <link rel=“stylesheet” href=“style.css”> para el css. la etiqueta link tiene 2 atributos, el rel que le dice que el documento que va a cargar es una hoja de estilo. El href es una referencia de donde se encuentra el documento.
Para empezar a construir una pagina web es esencial conocer su estructura.
-
La primera página que creamos en cualquier proyecto será la página nombrada index.html ya que será la pagina por default que el servidor buscará al subir nuestro proyecto a internet.
Recuerda que html es un lenguaje de marcaje de texto por lo que al crear nuestro index.html es indispensable escribir como primer declaración el tipo de versión HTML que se está redactando en el documento en este caso.
<!DOCTYPE html> -
En segundo lugar hay que indicar el inicio de la estructura de la página, para esto se usa la etiqueta principal
<html></html> -
Lo tercero es indicar las etiquetas de
<head></head><body></body>👉 Recuerda que estamos estructurando etiquetas que delimitan partes de la página web, por tanto una buena practica para mantener visible los limites de estas secciones es mantener alineado el inicio el fin de las etiquetas para que no perdamos el hilo y sepamos reconocer que etiqueta esta dentro de cual.
En este caso nuestro documento inicial esta quedando así.
<!DOCTYPE html> <html> <head> <!--Recuerda que todo lo que queda contenido dentro del inicio y cierre de una etiqueta que emparentado en ella --> </head> <body> <!--Los cometarios etiquetados no aparecen visibles al publicarse la página del lado del cliente--> </body> </html>Donde podemos notar 2 cosas,
- Existen etiquetas dentro de HTML que no se cierran como el caso de la declaración del tipo de html
<!DOCTYPE html> <head></head>y<body></body>se encuentran al mismo nivel, dado que se consideran etiquetas hermanas hijas del mismo padre dentro de<html></html>
- Existen etiquetas dentro de HTML que no se cierran como el caso de la declaración del tipo de html
-
En el head van todos los archivos importantes para que nuestro proyecto funcione correctamente, algunos como: Estilos, fuentes, descripciones, librerías, etc. Es la parte no visible de nuestra página.
Aquí inicia el aporte de John Cardenas
<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">
<!--Enlaza archivos de estilos u otros archivos que necesitemos en nuestro proyecto-->
</head>
He visto varios cursos de html y ninguno fue tan enfático y preciso como Granda con la explicación de los metadatos sobre todo para posicionar mejor la página ante las búsquedas web.
Index y estrucutura basica: En el head van todos los archivos importantes para el correcto funcionamiento de nuestra plataforma pero que no deben ser visibles por lo usuarios. Algunos de estos archivos pueden ser:
* Frameworks
* Librerías
* Estilos
* Fuentes
* APIs
Les dejo la mejor pagina web para aprender tanto html como cualquier lenguaje de programación. Cuentan con toda la documentación ! y es super facil de usar.
Mis apuntes de la clase:
En Visual Studio Code, puedes simplificar este paso escribiendo html:5 y tabulador, auto-completara la estructura básica.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>```
Clase 7 - Index y su estructura básica: head
¿Por qué el archivo principal de HTML se debe llamar index?
- Porque es el nombre que por defecto el servidor busca para abrir un sitio web, de lo contrario debemos de especificar al servidor el nombre del archivo que debe de abrir por defecto.
¿Qué pasa si el servidor no encuentra el archivo HTML con nombre por defecto ni el que le indicamos?
- Se abrirá la estructura de carpetas y archivos del proyecto, lo cual no queremos.
¿Para qué nos sirve la etiqueta <!DOCTYPE html>?
- Con esta etiqueta le informamos al navegador que la versión del archivo html es la versión 5.
- Sintaxis:
<!DOCTYPE html>
¿Para qué nos sirve la etiqueta <html>?
- Esta etiqueta nos sirve como contenedor padre, y dentro de ella debemos escribir todo el contenido de la página web.
- Sintaxis:
<html> </html>
¿Para qué nos sirve el atributo lang en la etiqueta <html>?
- Para indicarle al navegador el idioma en el que está escrito la página web. Además es lo que permite que el navegador nos pregunte si queremos traducir la página web.
- Sintaxis
<html lang="en"> </html>
¿Por qué el tabulador es importante en HTML?
- Nos permite tener una mejor lectura del código.
- Podemos identificar qué elemento está dentro de un elemento.
- Nos aseguramos de que las etiquetas se abran y se cierren correctamente.
¿Qué tipos de etiquetas existen?
- Etiquetas que tiene pareja de cierre.
- Etiquetas que se cierran solas.
¿Cuáles son las etiquetas que debemos de escribir dentro de la etiqueta <html>?
- <head>
- Sintaxis:
<head> </head>
- <body>
- Sintaxis:
<body> </body>
¿Las etiquetas <head> y <body> son hermanos?
- Sí.
¿Qué tipo de contenido debemos de agregar a la etiqueta <head>?
- En esta etiqueta debemos de escribir todo el contenido que es importante para que el navegador muestre el contenido de la página web como nosotros queremos.
¿El contenido de la etiqueta <head> es visual?
- No, hay sus excepciones pero la mayoría de lo que se escriba acá el usuario no lo va a ver. Por ejemplo:
- Dependencias.
- Fuentes.
- Archivos CSS.
¿Qué tipo de contenido debemos de agregar a la etiqueta <body>?
- En esta etiqueta debemos de escribir todo el contenido que el usuario va a ver en la página web. Por ejemplo:
- Textos.
- Imagenes
- Videos.
- Links.
- Formularios.
¿Cómo se les conoce a las etiquetas que agregamos en la etiqueta <head>?
- Se les conoce como etiquetas meta.
¿Cuáles son las etiquetas meta que debemos agregar a nuestra etiqueta <head>?
<meta charset="UTF-8">
<meta name="description" content="Descripción de la págia web">
<meta name="robots" content="index-unfollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
¿Qué tipo de etiquetas son las etiquetas meta?
- Etiquetas que se cierran solas.
¿Qué símbolo podemos escribir en las etiquetas que se cierran solas para indicar que están cerradas y en qué lugar debemos hacerlo?
- El slash (/). Este símbolo debemos escribirlo luego el nombre de la etiqueta y debe estar separada por un espacio del nombre de la etiqueta.
¿Para qué nos sirve la etiqueta <meta charset=“UTF-8”>?
- Esta etiqueta nos permite hacer que el navegador pueda entender caracteres especiales.
¿Qué caracteres especiales nos permite entender y mostrar el estándar UTF-8?
- Acentos (palabras con tildes)
- Las letras ñ Ñ.
- Emojis.
¿Qué significa que al momento de entrar a una página web en español nos aparezca con símbolos raros?
- Que nos se agregó la etiqueta:
<meta charset="UTF-8">
¿Qué otros estándares de caracteres especiales podemos usar?
- UTF-16
- UTF-32
- Pero se debe de tener en cuenta que estos poco se usan.
¿Para qué nos sirve la etiqueta <meta name=“description” content= “descripción de la página”>?
- Esta etiqueta nos permite agregar una descripción a la página web, además de que nos ayuda a posicionar nuestra página web en los buscadores.
¿Para qué nos sirve la etiqueta <meta name=“robots” content=“index-follow”>?
- Esta etiqueta nos permite dar la autorización al navegador para que todos los buscadores sigan nuestra página y nos ayude a posicionarla mejor en algunas búsquedas.
¿Cómo podemos indicarle al navegador que no dé la autorización a los buscadores de seguir nuestra página web?
- Con la etiqueta:
<meta name="description" content="Descripción de la págia web">
¿Para qué nos sirve la etiqueta <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>?
- Nos permite escalar mejor el texto y las imágenes de la página web para que se vean mejor si se accede desde una pantalla con un tamaño muy pequeño.
¿Qué es el viewport?
- Es el ancho total de la pantalla.
¿Todos los proyectos web que hagamos deben ser responsive (versión para móvil)?
- Sí.
¿Aparte de las etiquetas meta, qué otras etiquetas podemos agregar a la etiqueta <head>?
<title> </title>
<link rel="stylesheet" href="archivo-CSS.css">
¿Para qué nos sirve la etiqueta <title>?
- Para agregar un texto a manera de título en la pestaña de la página web.
¿Para qué nos sirve la etiqueta <link rel=“stylesheet” href=“archivo.CSS.css”>?
- Nos permite agregar archivos CSS a nuestra página web.
¿Para qué nos sirve el atributo rel=“stylesheet”?
- Nos permite indicarle al navegador el tipo de documento que debe cargar, en este caso una hoja de estilos o css.
¿Para qué nos sirve el atributo href=“./carpeta/archivo-CSS.css”?
- Para indicarle al navegador el nombre y la ruta del archivo css que queremos que cargue.
No tendría que tener instalado el editor de texto porque se supone que este es un “curso básico definitivo de HTML y CSS desde cero” no veo coherencia en saltar de un curso a otro
📦 Organizar los elementos de forma adecuada permite facilitar el desarrollo.
Muchas gracias por esta clase, aprendí sobre la etiqueta description y la etiqueta robots.
No las había visto y ahora las implementare en los proyectos.
Si alguien quiere leer mas sobre el meta robots les dejo este enlace
No conocía sobre las etiquetas meta de ‘description’ ni ‘robots’ 😮
Si no han configurado su entorno de trabajo para la web les recomiendo iniciar con este curso: https://platzi.com/clases/prework-windows/
al parecer esta mal escrito la palabra initial y falta la diagonal antes del > para cerrrar
Dejo este sitio que tiene un listado de todas las etiquetas HTML, te explica para qué sirven, qué atributos pueden recibir y su comportamiento con respecto a la posición que ocupan.
¡Como si fuese una tabla periódica de los elementos, esta página nos presenta todas las etiquetas HTML con su correspondiente descripción! https://allthetags.com/
<!DOCTYPE html> "para indicar que el código está HTML 5 * esta etiqueta no se cierra"
<html lang="es"> "lang= language para indicar el lenguaje, español, inglés, etc."
<head>
"Todo lo que es importante para el navegador para cargar el proyecto, pero no es visual para el usuario final , dependencias, librerías externas, CSS, etc."
"Meta: etiquetas metatags o metadatos, Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc. Etiquetas meta (se cierra sola)"
"https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/los-meta-tags-mas-importantes-y-su-funcion/ (me metas importantes)"
<meta charset="UTF-8"> "con el atributo charset="UTF-8" nos va a permitir que el navegador pueda entender caracteres especiales como ñ, acentos, emojis, etc."
<meta name="description" contetnt="Esta página te mostrará fotos de gatos">
<meta name="robots" content="index,follow"> "autorizar que los robots de los buscadores coloquen nuestra página con relación a la búsqueda que hacen. Index, follow para que la búsqueda tenga que ver con nuestro contenido. "
<title>Es mi página</title> "Para colocar el título de la página"
<meta name=viewport content="wight=device-width, inictial-scale=1.0"> "este meta permite que la página se pueda escalar a un dispositivo movil"
<link rel="stylesheet" href="style.css"> "etiqueta para agregar el CSS, atributo rel(indica el tipo de documento que va a cargar "hoja de estilos") y href indica la referencia en donde se encuentra el documento, ./ para referenciar"
Comparto una pagina donde está la documentación de html
https://devdocs.io/html/
Esta herramienta les puede ayudar si olvidan algo de código en html
https://htmlreference.io/
y esta si olvidan en css
https://cssreference.io/
Vengo del futuro para una recomendación necesaria en esta parte. Seguro están haciendo apuntes, pero también pueden hacer apuntes en el mismo código.
.
- Resaltan el código
- Ctrl + C + k
- Listo, ya está comentado
.
Esto ayudará a que cuando lean una código sepan de que trata y el navegador no lee los comentarios, así que pueden escribir lo que quieran
Sí que estaba esperando esta clase!
Tuve que pausar y hacer el curso de preework jaja
no les pasó?
Like si eres de los que ha tenido que ir al curso de prework y volver.
El Curso de Prework es muy complejo si recién estas entrando a este mundo, primero deberías aprobar el Curso de Introducción a la terminal y linea de comandos.
Suerte con el de Prework "(
Hola compañeros les comparto mi código y las anotaciones espero que les ayude
<!-- le dice al nevegador que va a ser un archivo de html 5 -->
<!DOCTYPE html>
<!-- es un contenedor, adonde tendremos nuestra página -->
<!-- el lang, le ponemos el idioma en el que estara nuestra página -->
<html lang="es">
<!-- el usuario no va a ver esta sona -->
<!-- aqui vamos aponer todo lo que nesesita nuestra paguina para que funcione -->
<head>
<!-- le dice al navegador como manejar nuestro proyecto -->
<!-- para que identifique los acentos, y todo el lenguaje español -->
<meta charset="UTF-8" />
<!-- ponemos la descripcon de nuestra paguina -->
<meta name="description" content="esta página te mostrara fotos de gatos">
<!-- le decimos a los robots de busqueda, que estamos autorisando que acomoden nuestra paguina con relacion a la busqueda que se hace -->
<meta name="robots" content="index,follow" />
<!-- el tiyulo de nuestra paguina web -->
<title>Es mi página</title>
<!-- el meta para proyectos responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheet: que vamos a cargar estilos, href: la ruta -->
<link rel="stylesheet" href="./css/styles.css">
</head>
<!-- esto va a estar visible para el usuario -->
<body>
</body>
</html>
Para los que empiezan a programar es importante tener en cuenta que hay atajos de teclado para escribir mucho más rápido en visual, acá dejo un video donde los explican bien:
https://www.youtube.com/watch?v=Sf6ENcesVcs&list=PLKEhkynvt-h5sveQhQKjcQdMM3RZdfFQM
Acá dejo notas de más atajos de teclado para visual:
https://drive.google.com/drive/folders/1HTw7SKH1oVCUzbod3EduCkU6Yr9i3CMq?usp=share_link
La página de “index” es el archivo HTML principal que se carga cuando se visita un sitio web. La estructura básica del archivo index HTML se compone de dos partes principales: el encabezado (head) y el cuerpo (body).
- La sección del encabezado (head) de la página de “index” contiene información sobre la página que no se muestra en la pantalla, pero que es importante para los motores de búsqueda, los navegadores y los desarrolladores. Algunos elementos comunes que se encuentran en la sección del encabezado de la página de “index” incluyen:
Título de la página:
- Se especifica dentro de la etiqueta <title> y es el texto que aparece en la pestaña del navegador. Es importante elegir un título descriptivo y conciso que refleje el contenido de la página.
Metadatos:
- Los metadatos proporcionaron información adicional sobre la página, como la descripción y las palabras clave que se utilizan para mejorar el SEO. Se define mediante las etiquetas <meta> y se colocan en la sección del encabezado.
Enlaces a archivos CSS y JavaScript:
- Estos archivos se utilizan para dar formato a la página y agregar funcionalidad, como animaciones o interacciones de usuario. Los enlaces a estos archivos se definen mediante las etiquetas <link> y <script> , respectivamente.
Icono de la página:
- El icono de la página, también conocido como favicon, es una pequeña imagen que se muestra en la pestaña del navegador y en los resultados de búsqueda. Se define mediante la etiqueta <link> y se coloca en la sección del encabezado.
Otras etiquetas personalizadas:
- Los desarrolladores pueden utilizar etiquetas personalizadas para agregar información adicional a la sección del encabezado, como etiquetas de seguimiento de análisis web o etiquetas de verificación de propiedad de sitios web.
> En resumen, la sección del encabezado (head) de la página de “index” contiene información importante que ayuda a los motores de búsqueda, navegadores y desarrolladores para entender el contenido de la página. Algunos elementos comunes que se encuentran en la sección del encabezado incluyen el título de la página, metadatos, enlaces a archivos CSS y JavaScript, icono de la página y etiquetas personalizadas.
I´m back!! 😄
¿Fui la única en pausar esta clase e ir hacer el curso de Prework? LOL
Nunca pares de aprender!! 😃
Hola amigos.
Yo estoy usando este metodo, quizá a alguien se le facilite tambien, con control K y control C consecutivamente, estoy comentando cada linea o cada código, para tener presente para que sirve cada uno. Espero les sirva.
Estructura básica de un documento HTML
<!DOCTYPE html>
Esta etiqueta le dice al navegador que el código que está leyendo es HTML5. Otro dato es que hay etiquetas que se abren y que se cierran como “html”, “head”, “body”, etc, pero hay otras como ésta que se autocierran.
<html lang=“es”>
Este es el contenedor padre, va a tener todo el contenido, todas la etiquetas de nuestro proyecto. Y éste tiene un atributo llamado “lang”, que le dice al navegador el lenguaje del contenido de la página web. Cuando abrimos por ejemplo una página en ingles y el navegador nos ofrece traducirla a español, es gracias al atributo “lang”.
<head></head> <body></body>
head y body son contenedores hermanos, en la etiqueta de head va a ir todo lo que es importante para el navegador, para poder cargar en el navegador todo nuestro proyecto, pero la información no es visual para el usuario. Todas las dependencias, algunas librerías externas, las fuentes, la relación con nuestro CSS, tienen que ir ligados en el “head”, aquí lo vamos a mandar a llamar. Cabe mencionar que tenemos que dejar un espacio para lograr la indentación, lo que se llama tabulador, para que sea más fácil de leer nuestro código, al navegador ésto no le importa, pero a nosotros los humanos sí.
En cuanto al body, aquí va a ir todo el contenido que el usuario final va a poder ver, por ejemplo imagenes, vídeos, textos y todas las cosas interactivas van a estar adentro del “body”
Etiquetas <meta>. Éstas van a ir adentro del head
Las etiquetas “meta” le van a dar cierta información al navegador para que sepa como tratar nuestro proyecto.
<meta> es una etiqueta que se cierra sola, como buena costumbre podemos colocar o no el / (slash) al cerrar la etiqueta.
<meta charset=“UTF-8” />
La primera etiqueta meta lleva el atributo “charset” y éste va llevar un valor llamado “UTF-8”, que sirve simplemente para que el navegador entienda carácteres especiales como “ñ”, un acento u otros símbolos de diferentes idiomas, con el UTF-8 también se pueden usar emojis y el navegador los va a renderizar como tales.
<meta name=“description” content=“Esta página te mostrará información de manicuria” />
Otro meta es el name=“description”, el description es importante, es parte del CEO, nos va a ayudar a que el navegador cuando el usuario busque cierta información en el mismo navegador, en la descripción que vamos a tener de nuestra página pueda salir ésa información, es decir, de que es nuestra página.
La descripción la colocamos con el atributo content y como valor la descripción de nuestra página.
<meta name=“robots” content=“index-follow”/>
Otro meta es name = “robots” , nos va a ayudar para los robots de posicionamiento, por ejemplo, cuando estamos utilizando Google y estás haciendo una busqueda, si pones JS y pones aprendizaje en línea, hay ciertos robots que nos ayudana posicionarlas páginas que tienen algo que ver con ésto. Nosotros podemos decirle a nuestro proyecto que de autorización para que los robots nos ayuden a posicionarnos en las búsquedas.
Colocamos robots, porque hay muchos y en diferentes navegadores.
La forma en que los autorizamos es con content=“index-follow”.
<title>Es mi página</title>
Es el título de la página, el que se ve en la pestaña del navegador.
<meta name=“viewport” content=“width-device-width, inictial-scale=1.0” />
Éste meta es para los proyectos que son “responsive”, y actualmente todos los proyectos son “responsive”.
viewport significa el tamaño de la pantalla.
content aquí viene el contenido, vamos a decirle al navegador que el “width=device-width, inictial-scale=1.0”, es muy importante que coloquemos éste meta, porque éste meta nos va ayudar que si éste proyecto se abre desde una página web puede escalarse un poco las imágenes y el texto y se pueda ver mejor desde diferentes dispositivos móviles.
<link rel=“stylesheet” href="./style.css" />
Con la etiqueta link vamos a agregar el documento CSS, la etiqueta tiene dos atributos:
“rel” va a indicar que el documento que vamos a cargar es una hoja de estilo
"href" es la referencia, la URL del documento, su ruta
Para incorporar la hoja de estilos:
escribimos “./” nos va a salir el CSS que tenemos dentro del proyecto.
Para los que buscan mas información sobre la etiqueta robots aquí esta la documentación de google
Recuerden que pueden agregar comentarios a sus líneas de código !
se ve muy saturado pero ayuda si estas comenzando para que sepas para que sirve cada línea
se hace con " ALT + Shift + A "
Your welcome jaja
Aqui les dejo el codigo comentado. Saludos.
En esta pagina pueden encontrar todas las etiquetas HTML y si son de tipo (inline o block) y también las que no se cierran.
Es bueno tener una herramienta para conocer las etiquetas HTML y también saber como se comportan en el navegador. si ocupan todo un bloque o no.
Comparto las principales etiquetas vistas en esta lección en modo resumido.
Existen una gran cantidad de etiquetas para escribir nuestro marcado, especialmente desde la llegada de HTML5, pero es posible que tu página este escrita utilizando mayormente etiquetas del tipo <div>, sin aprovechar las opciones semánticas que HTML5 nos ofrece.
La semántica hace referencia al significado de las palabras y al significado de las oraciones, por ejemplo, cuando leemos un texto coherente, que utiliza palabras y oraciones adecuadas y que le dan sentido a lo que leemos.
De igual forma, HTML nos brinda una serie de etiquetas con mayor significado, para cada parte, sección, o elemento de nuestra página, y que, aunque en la práctica no generen un resultado distinto al de usar una etiqueta <div> como contenedor para todo, pueden darle mayor significado a nuestro código, así como algunas otras ventajas.
Esta es la página más útil que he encontrado para tener referencia gráfica e interactiva de qué significa cada etiqueta: https://allthetags.com/
Hola a todos, les comparto una página muy útil para HTML
https://htmlreference.io/
Les dejo del codigo comentado según las explicaciones que han dado en la clase
<!DOCTYPE html>
<!-- Declaracion de tipo de documento. Indica al programa a que lenguaje o bajo que sintaxis escribiremos el codigo que sigue -->
<html lang="es">
<!--Establece el lenguaje en que se escribira el contenido la pagina web: Espanol = "es". Ingles= "en"--> -->
<head>
<!-- Se abre la etiqueda head. Todo lo que este dentro de esta etiqueta llevara una sangria (o tab) para que quede claro al programador y su equipo, la organizacion general del codigo y sea mas facil editarla en el futuro-->
<meta charset="UTF-8" />
<!-- Distribucion de caracteres aplicada. La UTF-8 permite la lectura de caraceres en idioma espanol: [ñ], [ü], vocales con acento como [ó]). Tambien existe UTF 16 y 32 pero no son muy utilizadas-->
<meta name="description" content="Renderizado de fotos de gatitos" />
<!-- Descripcion de la pagina que aparecera en el buscador al momento de mostrar la pagina debajo de su nombre. Si se omite esta instruccion, en la descripcion se mostrara un extracto del primer parrafo de texto.-->
<meta name="robots" content="index, follow">
<!-- Permitir o no permitir el rastreo por los bots de busqueda de la pagina que se esta creando -->
<title>Gatos siendo renderizados</title>
<!-- Titulo de la pagina a visualizarse en la pestana del navegador -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tamano de la pantalla. content="width=device-width indica que el tamano se ajuste al tamano del dispositivo que abra la pagina (telefono inteligente, tablet, computadora).
initial-scale=1.0 indica que se procurara que el programa tenga escala de 1 (que el contenido de texto de la pagina no se muestre ni muy grande [escala 2, 3...] ni muy chico (0.5, 0.4...) -->
<link rel="stylesheet" href="./css/style.css">
<!-- Permite colocar una hoja de estilos incorporada. Esto permite modificar la forma de visualizar el mismo contenido (agregar colores, tipo de letra, etc) -->
</head>
<!-- Se cierra la etiqueta head -->
<body>
<!-- Se vera en las siguientes clases -->
</body>
</html>
<!-- Se cierra la interpretacion de codigo html -->```
Les comparto esta page esta interesante 😊!, es una especie de cheatsheet categorizados para HTML
.
aqui
Buena clase
A quien pueda interesar un pequeño resumen.
A los que este tomando apuntes en word o google, les recomiendo que los tomen en el mismo editor Visual studio creando un archivo .md
En VS Code si escribes html sale la opción de html:5 que permite colocar la estructura básica de una página.
UTF-8 – Navegador entienda caracteres especiales.
<meta name=“description” content="Esta página te mostrará fotos de gatos> SEO
<meta name=“robots” content=“index, follow”> SEO
<meta name=“viewport” content=“width=device-width, inicial-scale = 1.0”> escalarse en pantalla en dispositivos moviles
Para poner un favicon en HTML es así
Y te quedara así
Poniendo en práctica las etiquetas y los comandos de git, para no olvidarlos
En el lenguaje de la vida están los “BUENOS MODALES”, en el lenguaje de programación debemos tener las “BUENAS PRACTICAS”.
Chicos, volví del futuro. Andaba en producción, y ese codigo de adaptación de paginas web es SUPER UTIL
me toco pausar e ir a prework jajajajaja
Por acá mi código de la clase ❤️
<!DOCTYPE html> <!--Indica al navegador que mi código es HTML5, esta etiqueta se autocierra-->
<!-- Contenedor padre, el LANG le dice al navegador qué idioma tiene el proyecto--->
<html lang="es">
<!-- Contenedor de Encabezado, lleva todo lo que no es visual, por ejemplo el CSS.
Lo importante para que el proyecto cargue bien --->
<head>
<meta charset="UTF-8">
<!-- Ayuda a que el navegador entienda caracteres especiales y emojis (UTF-8)-->
<meta name="description" content="Esta página te muestra a mis gatos">
<!-- Ayuda con el SEO. Es la descripción de la página -->
<meta name="robots" content="index, follow">
<!-- Robots de posicionamiento de búsqueda. Si no quiero esto, coloco unfollow-->
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
<!--Para proyectos responsive. Viewport: tamaño de la pantalla de izquierda a derecha.
De no tenerlo en dispositivos mobile las letras saldrán muy pequeñas y el user deberá hacer zoom-->
<link rel="stylesheet" href="./CSS/style.css">
<!-- Me permite agregar el CSS o la Hoja de Estilos-->
<title> <!--Título de mi proyecto-->
Mi Gato es Hermoso
</title>
</head>
<!-- Cuerpo de la página--->
<body>
</body>
</html>
El espacio se llama, “Indentacion”
<title> son los mejores </title>
Lineas de código
<!DOCTYPE html>
*<html lang=“es”>
**<head>
***<meta charset=“UTF-8”>
***<meta name=“description” content=“tipo de contenido que saldrá/>
***<meta name=“robots” content=“index,follow”>
***<title>Es mi pagina </title>
***<meta name=“viewport” content=“width=device-width, inicial-scale=1.0”>
***<link rel=“stylesheet” href=”./Style.css">
*= # de espacios
me sorprende la complejidad de programar pero a la vez me sorprende y me emociona
waow esta clase fue increible.
mucho contenido que vale “oro”.
<meta name=“viewport” content=“width=device-width, inicial-scale=1.0”>
Esta etiqueta fué las más que costo aprenderla-
HTML
Estructura de etiqueta
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?