Saltar navegación

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

HTML - Elementos Semánticos Estructurales - 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 1 de diciembre de 2020 por Fernando M.

128 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver cómo hacer una web con elementos semánticos estructurales. 00:00:01
Que esto ya he dicho que es muy importante porque en HTML5 ayuda a los navegadores a saber qué contenido tiene cada una de las secciones. 00:00:07
Lo que antiguamente se hacía con div, pero la evolución de HTML permite ayudar en ese procesamiento a los navegadores. 00:00:17
¿Vale? Entonces, lo que voy a hacer es habilitaros aquí, esto sería el bracket, le voy a poner el navegador, ¿vale? 00:00:25
Y vamos a partir un poco de la imagen que explicábamos en la lección anterior, ¿vale? 00:00:37
Donde veíamos que antiguamente una estructura como la que veis se hacía con etiquetas div, ¿vale? 00:00:43
donde a cada uno se le daba un ID diferente, pues tendríamos ID de cabecera, ID de barra de navegación, 00:00:49
ID de contenedor, ID del pie, del lateral, ¿vale? 00:00:54
Lo que pasa es que esa etiqueta TIC no está diciendo qué tipo de contenido es el que tiene realmente esa sección, ¿vale? 00:00:57
Por lo tanto, eso dificultaba el procesamiento. 00:01:07
¿Qué consigue HTML5? 00:01:10
Pues consigue añadir algo como lo que veis en esta imagen, ¿vale? 00:01:12
Es decir, etiquetas que identifican cada una de las zonas de forma independiente, ¿vale? 00:01:18
Y eso, pues al final, no es más que una mejoría en cuanto al procesamiento de esa web, ¿vale? 00:01:26
Entonces, es importante que eso lo entendamos, ¿vale? 00:01:37
Es decir, es importante que utilizamos esta sección. 00:01:42
No necesariamente una web tiene que seguir una estructura como la que estáis viendo aquí, ¿vale? 00:01:44
Es decir, el pie no tiene por qué ir abajo y la cabeza arriba, todo puede ir en el mismo lado, 00:01:48
la barra de navegación no tiene por qué estar arriba, sino que puede estar en un lado, ¿vale? 00:01:56
Es decir, no tiene por qué ser tal y como lo veáis, pero sí que esos elementos estructurales van a definir el tipo de contenido que hay dentro, ¿vale? 00:01:59
Bueno, pues vamos a hacer un pequeño ejemplo sobre esto. 00:02:10
Ese ejemplo va a ser un blog, por ejemplo, de información sobre perros. 00:02:14
Entonces lo que yo he hecho es que miro a Pixabay y dentro de Pixabay me he descargado imágenes de perros. 00:02:20
Ya recuerdo como simplemente ponemos aquí dogs y os descargáis las imágenes de perros que os gusten. 00:02:30
Yo ya las he descargado y al descargarlas las he guardado dentro de mi carpeta Images. 00:02:37
¿Vale? Recuerdo que tiene que estar dentro de la carpeta IMAGEN, ¿vale? 00:02:44
Así que darle al pausa al vídeo, descargaros las imágenes y luego continuamos, ¿vale? 00:02:47
Entiendo que ya habéis descargado esas imágenes, entonces abro el navegador como el que veis aquí, me he creado un fichero 00:02:54
y ojo que esto ya es importante porque vamos a empezar a nombrar los ficheros como se tienen que nombrar. 00:03:01
El nombre de nuestra página web de inicio, de cualquier sitio web, se tiene que llamar index.html, ¿vale? 00:03:06
Entonces, creáis una página web y la llamáis index.html. 00:03:17
Y ahora nos vamos a nuestro navegador, ¿vale? 00:03:21
Bueno, nuestro navegador, perdón, al brackets y ponemos html 2.5 y le damos al tabulador, ¿vale? 00:03:25
Y nos aparece la estructura de esta página de la web, como siempre. 00:03:33
En el idioma ponemos español, ¿vale? 00:03:38
Y en el título, pues vamos a poner elementos semánticos estructurales en HTML, ¿vale? 00:03:42
Y ahora, en el body, vamos a empezar poniendo la cabecera de nuestro sitio web, ¿vale? 00:03:55
Entonces, para poner la cabecera, bueno, primero voy a indicar que aquí voy a poner la cabecera, voy a poner una etiqueta donde pongo cabecera en nuestro sitio web, ¿vale? 00:04:03
Y ahora, para poner la cabecera, voy a poner la etiqueta header, ¿vale? Que identifica la cabecera, ¿vale? 00:04:16
Esta etiqueta header puede estar también en otras zonas, se puede repetir varias veces, tanto para la barra de navegación como para el contenido, etcétera, etcétera. 00:04:25
De hecho, durante este ejemplo la vamos a repetir varias veces, ¿vale? 00:04:33
En este caso aquí, lo que voy a poner va a ser el logotipo de la web, que puede ser una imagen, o puede ser un texto, lo que sea, ¿vale? 00:04:37
Y lo voy a poner con un enlace, con una etiqueta. 00:04:44
Recuerden, para poner el enlace, la etiqueta A, ¿vale? 00:04:47
Entonces pongo la A y voy a poner HB, ¿vale? 00:04:50
Como argumento del enlace, voy a poner la almohadilla, ¿vale? 00:04:57
Para que vuelva al inicio de la web. 00:05:01
y cierro, voy a poner el nombre logotipo, ¿vale? 00:05:02
Por lo tanto aquí sería donde aparecería ese logotipo de nuestra web, ¿vale? 00:05:08
Continuamos. 00:05:18
Lo siguiente que vamos a poner ahora es una barra de navegación, ¿vale? 00:05:18
Insisto, esto que estoy haciendo ahora mismo lo estoy haciendo únicamente en contenido HTML. 00:05:23
Cuando nosotros empezamos a añadir hojas de estilo es cuando todo esto va a tomar forma, color y estéticamente va a quedar mucho más moderno y avanzado, ¿vale? 00:05:29
No penséis que esto va a ser el resultado final de una página web, ¿vale? 00:05:40
Entonces, ponemos comentarios y le vamos a poner barra de navegación. 00:05:44
Y la barra de navegación se pone con la etiqueta nav, ¿vale? 00:05:49
Y dentro de esa etiqueta nav lo que voy a hacer es poner una lista, ¿vale? Una lista no ordenada, ¿vale? Es decir, una lista con viñetas, con símbolos, ¿vale? Recuerdo que para eso lo hacíamos con la etiqueta ul, ¿vale? 00:05:56
Y ahora dentro ponemos li. Voy a poner 4 categorías, o li, 4, tabulador. No, perdón, esto era, así no era. Era li por 4 y ahora tabulador. Ahí lo veis, ¿vale? 00:06:13
¿Y qué voy a poner dentro? 00:06:29
Pues voy a poner 00:06:32
Enlaces, ¿vale? 00:06:32
Porque como esto es una barra de navegación, pues pondría enlaces 00:06:37
Y lo mismo, lo que me voy a poner 00:06:39
Pongo mi etiqueta A 00:06:41
HR, como ahora mismo no tengo 00:06:42
A dónde hacer el enlace, pues voy a poner 00:06:45
La almohadilla 00:06:47
¿Vale? Y dentro, pues pondría 00:06:50
Inicio 00:06:52
Me voy a copiar todo esto 00:06:52
Pongo todo en la etiqueta A 00:06:55
y me lo llevo aquí, a cada uno de los elementos, y voy a poner inicio, categorías, acerca de, y contacto, ¿vale? 00:06:59
Ya, si os vais fijando, en mi página web tendría el logotipo, luego tendría mis botones de mi barra de navegación, ¿vale? 00:07:16
Es decir, que ya estaríamos comparando con la estructura que estamos haciendo, ya tendríamos los dos primeros elementos, la cabecera y la barra de navegación, ¿vale? 00:07:25
Ahora vamos a continuar y lo que vamos a añadir va a ser el contenido principal. 00:07:37
Vamos a empezar a añadir contenido principal. 00:07:43
Entonces ponemos mi comentario, ¿vale? 00:07:45
Contenido principal. 00:07:49
Y lo primero que vamos a poner es una cabecera, una etiqueta de cabecera, H1, ¿vale? 00:07:50
Que va a ser el nombre de la web, Portal Canino, ¿vale? 00:07:57
Y lo primero que vamos a hacer es añadir una sección, ¿vale? 00:08:05
Dentro de esa sección vamos a tener un primer grupo de contenido, ¿vale? 00:08:13
O vamos a poner, dentro de esa sección va a tener un título propio, ¿vale? 00:08:20
¿Cómo ponemos ese título propio? 00:08:29
Pues ponemos primero un header dentro de esa sección, ¿vale? 00:08:31
Ya le hicimos que la etiqueta header se puede utilizar varias veces. 00:08:35
Y ahora pondríamos una nueva etiqueta H1. 00:08:38
Recuerda que podemos poner varias etiquetas H1 porque estamos poniendo secciones dentro, ¿vale? 00:08:42
Entonces aquí pondríamos una etiqueta de adiestramiento, ¿vale? 00:08:48
Y ahora, dentro de esa sección que es donde está el adiestramiento, vamos a poner, por ejemplo, artículos, ¿vale? 00:08:57
Vamos a poner un primer artículo, ¿vale? 00:09:05
Que yo pondría ahora mismo un artículo de clase vacío, ya veremos esto en la parte baja de estilo, ¿vale? 00:09:10
Y el título de este artículo, que ahora sí lo pondría con una etiqueta H2, porque está dentro del adiestramiento, pondría técnicas para adiestrar a tu perro, ¿vale? 00:09:16
Justo debajo me pongo un párrafo 00:09:32
Donde pongo, por ejemplo 00:09:36
Noviembre 00:09:40
2020 00:09:42
Por 00:09:43
Y voy a poner el nombre del autor 00:09:46
Como si fuera un enlace 00:09:48
De nuevo pongo almohadillas porque no estoy poniendo 00:09:49
El enlace a ningún sitio ahora mismo 00:09:54
Y pondría 00:09:57
Fernando Martínez 00:09:58
¿Vale? 00:10:00
lo pondría 00:10:01
y es el 1 00:10:03
¿vale? 00:10:05
y debajo 00:10:09
me voy a poner una imagen 00:10:10
para poner una imagen, recuerdo, etiqueta 00:10:11
img, luego ponemos el src 00:10:13
que es donde estaría ubicada 00:10:16
la imagen y entre comillas 00:10:17
nos vamos a la imagen 00:10:19
en este caso, dentro de imágenes voy a poner 00:10:21
el perro 1 00:10:24
¿vale? la imagen que he descargado del perro 1 00:10:24
ponemos el atributo 00:10:27
alt y voy a poner 00:10:29
imagen de un perro y vamos a ponerle un estilo para fijarle el tamaño, ¿vale? 00:10:31
Y lo vamos a fijar el tamaño al 30%, ¿vale? 00:10:40
Y justo debajo ponemos una etiqueta P con un texto Loren, un párrafo y ponemos un segundo 00:10:47
párrafo también con un texto, ¿vale? De tal forma que lo que veis el resultado sería 00:10:55
esto, ¿vale? Que me ha salido una imagen más enorme porque aquí no va Widows, va 00:11:02
Wid, ¿vale? Ahora, ¿vale? Para fijaros que sale mi perrito, ahí chiquito, ¿vale? Ahora 00:11:11
vamos a añadir otro artículo más 00:11:23
¿vale? dentro de esta sección, pues ponemos 00:11:25
otra etiqueta article 00:11:27
¿vale? de nuevo 00:11:28
dejamos la clase vacía 00:11:31
¿vale? 00:11:32
y ponemos una nueva etiqueta 00:11:36
y ahora ponemos por ejemplo el título 00:11:39
¿cuál es la mejor edad 00:11:42
para adiestrar 00:11:44
un perro? 00:11:45
de nuevo ponemos 00:11:50
fecha, pues por ejemplo 00:11:51
29 de noviembre 00:11:53
2020 00:11:55
por Fernando 00:11:58
Y aquí ponemos 00:12:07
para no indicar ningún enlace. 00:12:10
¿Vale? 00:12:13
Ponemos una nueva imagen. 00:12:15
¿Vale? En este caso 00:12:17
va a ser el perro 2. 00:12:19
Ponemos la etiqueta 00:12:22
al y ponemos 00:12:23
este es otro perro. 00:12:24
¿Vale? 00:12:27
Recuerda que esto era en caso de que no cargara bien la imagen o para aquella gente que utiliza dispositivos que te describen las páginas web porque son invidentes, ¿vale? 00:12:29
Y luego metemos el atributo style con el parámetro width al 30%, ¿vale? Para que quede la imagen chiquitita. 00:12:41
Y por último hacemos lo mismo, añadimos dos párrafos, ¿vale? Contexto aleatorio. 00:12:51
Y en ambos casos, como suele ocurrir en la mayoría de los blogs, vamos a añadir una última zona, que no tiene por qué estar dentro de un párrafo, ¿vale? 00:12:59
Que va a ser un enlace, ahora mismo sin ningún lugar, ¿vale? 00:13:13
Para leer más acerca de este artículo, ¿vale? 00:13:19
Y esto, tal y como está, me lo copio al siguiente artículo. 00:13:24
Así, ¿vale? 00:13:32
Y veis que lo que tenemos son mito de imágenes, mito de entradas de blog, donde vemos el contenido de técnicas para adiestrar a tu perro y cuál es la mejor adictividad para adiestrar a tu perro. 00:13:34
Continuamos añadiendo contenido. Vamos a añadir una sección nueva. 00:13:49
Secciones podemos hacer tantas como queramos. 00:13:54
Entonces le dimos una nueva sección. 00:13:57
Y esta sección va a tener su propia cabecera. 00:14:01
esa cabecera va a tener 00:14:04
un encabezado 00:14:09
de nivel 1, H1 00:14:13
y lo vamos a llamar alimentación 00:14:15
y dentro pues hacemos el mismo proceso 00:14:16
vamos a definir 00:14:21
un artículo 00:14:22
artículo de clase 00:14:24
vacía ahora mismo 00:14:27
vale 00:14:28
y dentro pues metemos una etiqueta H2 00:14:30
que va a ser la importancia 00:14:33
de una buena alimentación 00:14:36
Vamos a poner una etiqueta P para poner la fecha, por ejemplo, 20 de noviembre de 2020, por, si volvemos a hacer el mismo protocolo, esto lo podéis copiar de las entradas anteriores si queréis, ¿vale? 00:14:37
y añadimos una imagen 00:14:57
el tercer perrito que habíamos descargado 00:15:08
src 00:15:11
centro de imágenes 00:15:12
perro3 00:15:14
este es el último perro 00:15:15
último perrito 00:15:22
y como estilo pues lo mismo 00:15:25
tenemos 00:15:28
al 30% 00:15:29
y de nuevo 00:15:32
añadimos dos párrafos 00:15:39
de texto aleatorio 00:15:41
que lo que podemos hacer aquí es copiarlo 00:15:42
de arriba y así tardamos menos 00:15:45
copiar y pegar 00:15:47
sacarlo 00:15:48
¿vale? 00:15:50
y veis que el resultado que nos queda 00:15:53
es una tercera zona 00:15:55
¿vale? 00:15:59
vale, ¿por qué sale? 00:16:05
fijaros que alimentación sale de un tamaño diferente 00:16:07
¿por qué? pues porque he metido una sección 00:16:09
dentro de una sección. Eso es un error mío, ¿vale? 00:16:11
Entonces me voy a llevar esta etiqueta sección 00:16:13
que era de la sección anterior 00:16:15
y la voy a poner después de ártico. 00:16:17
¿Vale? Ahí. 00:16:20
Fijaros ahora que la alimentación ha crecido 00:16:21
al mismo tamaño que ahí también, ¿vale? 00:16:23
Eso sí es un error también. 00:16:26
Vale. 00:16:29
Pues con eso, por ejemplo, ya tendríamos 00:16:31
ya habríamos contemplado 00:16:33
¿dónde estoy? 00:16:35
Aquí. Ya habríamos contemplado 00:16:37
toda esta parte, ¿vale? 00:16:39
Ahora vamos a hacer la barra lateral. 00:16:42
Que, insisto, esta barra lateral ahora mismo va a aparecer justo debajo, ¿vale? 00:16:44
Porque no estamos personalizando nada de la ubicación de las zonas, ¿vale? 00:16:48
Esto lo haremos, eso como digo, lo haremos con las hojas de estilo. 00:16:53
Entonces, nos venimos y justo después de la sección, de la última etiqueta section, ¿vale? 00:16:56
Vamos a poner un comentario para decir que esto va a ser la barra lateral, ¿vale? 00:17:02
Y ponemos la etiqueta aside. 00:17:07
¿Vale? Vamos a poner una clase vacía. Por esto ya lo completamos. ¿Vale? Y aquí, pues por ejemplo, podemos ahora poner una etiqueta de, ¿vale? Que ponga artículos recientes. ¿Vale? 00:17:11
Y dentro de esos artículos recientes, pues ponemos una lista no ordenada con varios elementos, ¿vale? Por ejemplo, con 5 elementos, ¿vale? Que al final van a ser enlaces a artículos recientes que nosotros tengamos en la web, ¿vale? 00:17:32
y ponemos 00:17:50
y esto ahora lo copiamos y lo pegamos 00:17:54
en todas las entradas 00:18:01
¿vale? ok 00:18:03
y por último nos quedaría 00:18:08
el pie de página ¿vale? 00:18:13
pues entonces ponemos aquí 00:18:15
pie de página 00:18:16
de la web 00:18:18
añadimos 00:18:20
el pie con la etiqueta 00:18:23
puter ¿vale? 00:18:25
y ponemos un párrafo nuevo 00:18:27
vamos a poner en tamaño pequeño 00:18:28
¿vale? 00:18:30
Y ponemos aspersand copy, que es para que aparezca el símbolo de copyright 2020, ¿vale? 00:18:34
Todos los derechos reservados, ¿vale? 00:18:46
Y fijaros que no aparece abajo del todo ese, ¿vale? 00:18:50
¿Ok? 00:18:57
Esto sería la estructura básica de una página web. 00:18:59
Y con esto daríamos por fin quitado todo lo que es la parte de HTML. 00:19:03
y a partir de aquí entraremos con contenido más avanzado con contenido de hojas de estilo es decir 00:19:09
cogeremos estos elementos de esta web e iremos haciendo modificaciones avanzadas sobre su estilo 00:19:17
iremos añadiendo algunos efectos algunas animaciones etcétera etcétera vale bueno pues espero que 00:19:23
os haya quedado claro más o menos cómo hacer contenido con páginas web y repaséis todos los videos 00:19:31
que hemos ido viendo hasta ahora, ¿vale? 00:19:38
Un saludo, chicos, chicas. 00:19:41
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
128
Fecha:
1 de diciembre de 2020 - 20:02
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
19′ 43″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
58.89 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid