Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML - Encabezados - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 10 de noviembre de 2020 por Fernando M.

139 visualizaciones

Más información Transcripción

Descargar la transcripción

Ahora vamos a ver cómo añadir encabezados dentro de la página web. Los encabezados son muy importantes porque es la forma de estructurar el código dentro de una página web y darle a entender al navegador qué es lo más importante y qué no. 00:00:00
¿Vale? Entonces, muy importante que esto lo sepamos utilizar y que lo apliquemos bien, ¿vale? Entonces, nos vamos a ir a nuestro editor, ¿vale? Como veis aquí, ¿vale? 00:00:14
Entonces, aquí tenéis el editor brackets, ¿vale? 00:00:28
Lo primero que vamos a hacer es crear una estructura de HTML, ¿vale? 00:00:39
Recuerdo que utilizando la extensión Emmet es poniendo HTML 2.5 00:00:42
Y luego le damos a la tecla tabulador, ¿vale? 00:00:49
Y nos aparece esto directamente 00:00:52
Yo voy a modificar el título, voy a poner aquí encabezados 00:00:54
de HTML, ¿vale? 00:00:59
Y lo primero que voy a hacer es crear una estructura 00:01:03
basiquita, ¿vale? 00:01:07
Para crear esa estructura, pues vamos a ver las etiquetas 00:01:10
de encabezado. Las etiquetas son muy sencillas porque son 00:01:13
H1 para el nivel 1, H2 para el nivel 2 00:01:16
y así consecutivamente hasta H6, ¿vale? 00:01:19
Entonces, yo por ejemplo 00:01:22
pondría aquí H1, pondría encabezado 00:01:25
1, ¿vale? 00:01:29
Y si yo ahora esto me lo copio y lo pego, seis veces, ¿vale? 00:01:31
Y yo cambio la etiqueta. 00:01:37
Cuatro, cinco y seis. 00:01:40
Fijaros que estas se me ponen en rojo porque no corresponde con la anterior. 00:01:42
Tengo que modificarlas también. 00:01:46
Dos, tres, cuatro, cinco y seis. 00:01:48
Y aquí lo mismo. 00:01:51
Cambio el contenido. 00:01:52
Ahí, ¿vale? 00:01:54
Guardo y actualizo mi página. 00:01:56
Y veis la forma que se nos queda en la estructura de la web, ¿vale? 00:01:58
Entonces, ahora vamos a crear una web con un poco de contenido. 00:02:04
Entonces, voy a comentar estos encabezados, ¿vale? 00:02:06
O los voy a utilizar. 00:02:09
Entonces, vamos a imaginarnos que... 00:02:11
Bueno, no, los voy a comentar mejor, ¿vale? 00:02:13
Para comentar, recuerdo que era el símbolo de menor, cierre de exclamación y dos guiones. 00:02:15
Y hasta donde quiero comentar, pongo los dos guiones y el símbolo de mayor que. 00:02:21
¿Vale? 00:02:27
Y entonces empezamos y ponemos una etiqueta H1, ¿vale? 00:02:28
H1 y aquí vamos a poner animales vertebrados, ¿vale? 00:02:33
Y para darle contenido voy a crear un texto aleatorio, ¿vale? 00:02:40
Para eso pongo en Google Loren Ipsum, me voy a Loren Ipsum Generator y aquí voy a marcar que quiero un párrafo. 00:02:44
Un párrafo. Le digo a generar y me genera un texto aleatorio que es el que voy a utilizar. Control, T, me vengo aquí, creo una etiqueta de párrafo y lo pego. Entonces fijaros, cuando yo tengo eso, actualizo mi web y esto es lo que me queda. 00:02:53
Y ahora continuamos. Vamos a añadir ahora una etiqueta H2, que sea características. Meto mi etiqueta de párrafo y pego mi texto oratorio. Y vuelvo a hacer lo mismo. Cojo H2 y pongo anatomía. Pongo mi etiqueta de párrafo, pego y tal que así. 00:03:16
¿Vale? Siguiente etiqueta, H2. Clasificación. Mi etiqueta de párrafo, texto oratorio. Y ahora añado una etiqueta H3. ¿Vale? ¿Por qué? Porque voy a poner diferentes animales vertebrados dentro de esa calificación. 00:03:43
Voy a poner, por ejemplo, los mamíferos, pongo un párrafo, porque yo ahora hablaría de los mamíferos, pongo otra etiqueta H3 para poner las aves, pongo un párrafo y pongo el texto aleatorio, pongo una etiqueta H3, pondría los peces, un párrafo y el texto aleatorio y una última etiqueta H3 y pondría anfibios y reptiles. 00:04:03
y pondría mi etiqueta 00:04:33
de texto de la página, ¿vale? 00:04:35
Guardo, control S para guardar 00:04:38
y actualizo la página. 00:04:40
Y veis que se nos queda así, ¿vale? 00:04:42
Ahora, esto es muy importante. 00:04:45
En HTML no se debe de utilizar 00:04:48
más de una etiqueta H1. 00:04:51
¿Por qué? 00:04:53
Porque los buscadores consideran que eso es 00:04:53
el contenido principal de la página. 00:04:56
Entonces se pueden volver locos. 00:05:00
Solo hay una forma de que podamos utilizar varias etiquetas H1. ¿Cómo es eso? Pues muy sencillo, ¿vale? Nos venimos a nuestro texto, nuestra página, perdón, y lo que vamos a hacer es meter la etiqueta section, ¿vale? 00:05:02
Esta etiqueta nos va a permitir tener varias etiquetas H1 dentro de la página web, ¿vale? 00:05:23
Entonces, yo, una vez que he metido esa etiqueta H1, me cojo todo el texto que había metido aquí, ¿vale? 00:05:30
Lo corto, control X, ¿vale? 00:05:37
Y lo pego dentro de section. 00:05:40
Y fijaros, está section y luego está todo lo que sería mi página web. 00:05:43
Yo la guardo, actualizo y fijaros que el encabezado H1 me ha cambiado, ¿vale? Estéticamente me ha cambiado, pero sigue siendo un encabezado H1, ¿vale? De cara a la página web sigue siendo un encabezado H1. 00:05:48
De tal forma que yo ahora aquí podría meter una sección nueva, ¿vale? Y lo que voy a hacer es meter, pues, lo mismo que teníamos antes, cojo esta clasificación, ¿vale? Control-C y lo pego, ¿vale? Y ahora en vez de ser animales vertebrados, lo tengo aquí, van a ser animales invertebrados. 00:06:06
Y en la clasificación, pues, lo voy a poner una nueva clasificación. Pondría yo aquí H3 y pondría artrópodos, ¿vale? Con su texto oratorio. Una etiqueta H3 con olíferos, con su texto oratorio. Y una etiqueta H3 con anélidos y equinodermos, con su texto oratorio. 00:06:28
¿Vale? Guardo, actualizo, ¿vale? Y fijaros que tenemos que animales vertebrados sería una etiqueta H1. ¿Vale? Una etiqueta H1. 00:07:02
Ahora, si yo fuera del section meto una etiqueta H1, ¿vale? Por ejemplo, meto el reino animal, ¿vale? Fijaros cuando ahora actualizo cómo se ve el reino animal. 00:07:15
Se ve más grande, ¿vale? ¿Por qué? Porque eso sería el encabezado, sería el encabezado principal de toda la página web. 00:07:28
Y luego cada sección tiene su propio encabezado, ¿vale? Son cosas diferentes. 00:07:36
Entonces es muy importante que utilicemos bien el elemento section y los elementos h1, h2, h3, etc. ¿Vale? 00:07:42
Bueno, espero que haya quedado claro y que lo utilicéis bien. 00:07:51
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
139
Fecha:
10 de noviembre de 2020 - 21:04
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
07′ 56″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
38.23 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid