Activa JavaScript para disfrutar de los vídeos de la Mediateca.
HTML - Elemento Div - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Bueno, ahora vamos a ver el elemento div, ¿vale? D-I-V.
00:00:00
Este elemento antiguamente se utilizaba mucho en HTML porque servía para organizar las páginas web, ¿vale?
00:00:07
Actualmente ya no se utiliza porque se utilizan elementos propios de HTML5 para organizar la página, pero es importante que lo veamos, ¿vale?
00:00:14
Antiguamente, como veis por ejemplo en esta imagen que os pongo en el navegador, ¿vale?
00:00:23
No sé si se estará viendo, un segundito. Ahora, ¿vale? Como veis aquí, para hacer una estructura como la que veis en el navegador, ¿vale? Con una cabecera, una barra de navegación, contenido principal, barra lateral y pie de página, esto se hacía con elementos TIP, con diferentes elementos TIP, ¿vale?
00:00:28
¿Qué pasa? Que cuando evoluciona HTML y llega a HTML5, se crean elementos estructurales, lo que se llaman elementos semánticos propios para esa zona.
00:00:48
Hay un elemento propio para la cabecera, un elemento propio para la barra de navegación, para el contenido principal, etcétera, etcétera, ¿vale?
00:00:59
Que veremos en la siguiente lección.
00:01:05
Pero, aún así, todavía se sigue utilizando DIP.
00:01:08
Principalmente cuando queremos hacer alguna modificación de CSS, ¿vale?
00:01:12
Alguna modificación de estilo para alguna zona concreta, ¿vale?
00:01:18
Por eso es importante que lo veamos y que sepamos que ese elemento div está ahí, ¿vale?
00:01:23
¿Cómo se hace eso? ¿Cómo se genera?
00:01:30
Pues lo mismo, nos vamos a ir a nuestra brackets, ¿vale?
00:01:33
Vamos a guardar un archivo, yo lo he llamado elementos-div.html, ¿vale?
00:01:36
Y simplemente nos creamos una página web, como siempre, html 2.5, y vamos a llamarlo a esto, bloque genérico de contenido, ¿vale?
00:01:42
Y vamos a poner, y aquí dentro simplemente lo que vamos a poner es una etiqueta div, ¿vale?
00:01:56
Y dentro de esa etiqueta div vamos a poner una etiqueta pen, ¿vale?
00:02:06
Y ponemos un texto lorem, un texto aleatorio, ¿vale?
00:02:11
Para que emet nos genere automáticamente texto aleatorio ponemos lorem y le damos al tabulador, ¿vale?
00:02:14
Y veis que nos ha generado un párrafo completamente automático.
00:02:21
Y ahora aquí ponemos otra etiqueta p de la misma forma, ¿vale?
00:02:26
Uy, me he equivocado.
00:02:30
Entonces, si nosotros nos fijamos, estéticamente no hay mucha diferencia a lo que hacíamos antes,
00:02:31
porque realmente no la hay, estéticamente no la hay.
00:02:47
Pero sí es importante, o sí la hay, de cara a los navegadores, ¿vale?
00:02:50
Los navegadores sí que procesan mucho mejor la información HTML5 cuando se utilizan los elementos estructurales que vamos a ver en la siguiente lección, en el siguiente vídeo, ¿vale?
00:02:54
Entonces, quiero hacer especial hincapié a eso, ¿vale?
00:03:06
Que el div, aunque no es imprescindible, se utiliza, ¿vale?
00:03:09
Pero que tenemos que utilizar los elementos propios de HTML5, ¿vale?
00:03:15
Cuando nosotros hagamos modificaciones en el estilo sobre un determinado div, ¿vale?
00:03:19
Aquí dentro añadiremos los atributos class, ¿vale?
00:03:27
O los atributos id, ¿vale?
00:03:31
Pero esto vamos a hacer más hincapié sobre ello cuando veamos hojas de texto, ¿vale?
00:03:33
Bueno, pues espero que haya quedado claro lo que es el elemento div y ahora empezaremos con los elementos semánticos estructurales.
00:03:40
- Autor/es:
- Fernando Martínez Martí
- Subido por:
- Fernando M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 138
- Fecha:
- 1 de diciembre de 2020 - 20:00
- Visibilidad:
- Público
- Centro:
- IES EL BURGO - IGNACIO ECHEVERRÍA
- Duración:
- 03′ 47″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 11.65 MBytes
