Saltar navegación

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

HTML - Listas - 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 17 de noviembre de 2020 por Fernando M.

173 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ahora vamos a explicar cómo se hace la lista en HTML, ¿vale? Las listas son muy importantes porque sirven para ordenar contenido, para explicar cosas o para dar una numeración o una lista ordenada con números, con letras o simplemente una lista con viñetas que pueden ser un carácter, un símbolo, ¿vale? 00:00:00
Entonces, nos vamos a ir a nuestro editor, al brackets, ¿vale? Vamos a seguir el procedimiento que seguimos siempre, que es crear la base del documento, que para eso hacíamos HTML 2.5, y le damos al tabulador, tecla de la izquierda de la Q, y nos aparece todo esto, ¿vale? 00:00:18
Entonces cambiamos el idioma, lo ponemos en castellano y aquí pondremos listas en HTML, ¿vale? Ya veis que se cambia también aquí en la ventana del navegador y ahora en el body empezamos poniendo una etiqueta H1, ¿vale? 00:00:40
Y va a ser creación y definición de listas en HTML, ¿vale? 00:00:56
Entonces, vamos a imaginarnos que yo quiero hacer unas listas para una receta de un bizcocho, ¿vale? 00:01:05
Entonces yo me pondría mi etiqueta H2 y diría, en primer lugar, ingredientes del bizcocho. 00:01:10
Y empezaría a crear mi lista. 00:01:20
¿Cómo creo mi lista? 00:01:23
Pues en primer lugar, esto va a ser una lista no ordenada, ¿vale? 00:01:24
Como va a ser una lista no ordenada, que simplemente va a tener puntos, lo ponemos con la tecla, con la etiqueta UL, de Unordered List, ¿vale? UL. Cierro, ¿vale? Y ahora dentro, cada elemento que yo quiera que pertenezca a esa lista, lo haremos con LI, ¿vale? Tal y como veis ahí. 00:01:27
Nosotros pondremos tantos elementos LI como queramos que haya en nuestro trabajo, ¿vale? 00:01:47
Entonces, yo por ejemplo, aquí pondría, pues primero pondría 3 huevos, ¿vale? 00:01:57
Luego pondría 200 gramos de harina. 00:02:05
Pondría 100 gramos de azúcar de caña 00:02:10
Pondría un sobre de levadura 00:02:18
3 ralladuras de limón 00:02:23
Y 2 cucharadas de aceite de oliva 00:02:32
¿Vale? 00:02:47
¿Vale? Eso en cuanto a lo que estábamos hablando de, lo diré, de lista no ordenada, ¿vale? Lista unordered list, ¿vale? Nosotros dentro de estas listas siempre podremos hacer lo que se llaman listas anidadas, ¿vale? 00:02:50
Es decir, que nosotros, por ejemplo, si yo quisiera decir que los 200 gramos de harina, 100 son de un tipo y 100 de otro, pues yo aquí me crearía otra lista no ordenada y dentro pondría elementos, por ejemplo, 100 gramos de harina de trigo y 100 gramos de harina de avena, ¿vale? 00:03:12
Y entonces fijaros que él directamente me marca el margen y me cambia el tipo de símbolo que va a utilizar en este caso, ¿vale? 00:03:33
Lo cual, pues, puede ser bastante útil porque nos permite a nosotros jugar con eso, ¿vale? 00:03:43
Entonces, vamos a imaginarnos que ahora lo que queremos hacer es una lista numérica en la que se diga la receta, pasos de la receta, ¿vale? 00:03:52
Y nos creamos una lista ordenada, para este caso va a ser la etiqueta OL de order list, ¿vale? Y ahora nos creamos los elementos y vamos a ver aquí una ventaja de la extensión 00:04:02
que nos permite crear elementos de una forma más rápida, ¿vale? 00:04:16
Si yo pongo li y pongo, por ejemplo, 5 y le doy al tabulador, ¿vale? 00:04:21
Fijaros que él directamente me crea los 5 elementos, ¿vale? 00:04:26
Y así, pues, quieras que no, pues vamos un poquito más rápido a lo que es la hora de escribir con el código, ¿vale? 00:04:30
Entonces yo aquí pondría tamizar la harina, mezclar huevos con la harina, 00:04:37
Añadir la levadura, añadir el aceite y el azúcar. 00:04:46
Y por último, hornear a 200 grados durante 20 minutos. 00:04:57
¿Vale? 00:05:08
Ahora, más cosas importantes que tenemos que saber, sobre todo para la lista ordenada. 00:05:10
yo me creo aquí una nueva lista ordenada 00:05:16
y si yo me creo 00:05:19
los elementos, me los voy a crear como antes 00:05:21
li3 por ejemplo, 3 elementos 00:05:23
perdón, si no se crea 00:05:25
li por 00:05:27
3, ahí, vale 00:05:31
y pongo por ejemplo 00:05:33
perro 00:05:35
gato 00:05:36
y pájaro 00:05:38
vale 00:05:40
fijaros que me aparece número 1, número 2 00:05:42
y el 3, que sería el gato, el pájaro 00:05:45
Entonces yo puedo cambiar el tipo de numeración, es decir, que en vez de utilizarme números me utilice letras. ¿Cómo hacemos eso? Pues ponemos el atributo type. Fijaros que cuando le doy al enter brackets ya me da las opciones que puedo seguir. 00:05:47
O los números normales, o letras mayúsculas, o letras romanas mayúsculas, o letras minúsculas, o letras romanas minúsculas, ¿vale? 00:06:03
Si yo elijo A, pues fijaros, me sale eso. 00:06:10
Yo también puedo cambiar el punto desde el que comienzo. En vez de comenzar en el 1, que en letras sería el A, puedo decirle, por ejemplo, que me comience en el número 3, ¿vale? 00:06:14
Entonces fijaros que ahora me empieza en la letra C, ¿vale? 00:06:25
¿Vale? Eso en cuanto a listas ordenadas y listas no ordenadas. 00:06:29
Luego tenemos otro tipo de listas especiales que son listas descriptivas, que son cuando nosotros queremos hacer una descripción de algo, ¿vale? 00:06:35
Por ejemplo, vamos a imaginarnos que queremos hacer una descripción, ¿vale? Ponemos la etiqueta para poner listas descriptivas en la DL, ¿vale? 00:06:42
Entonces, yo la pongo aquí y ahora pongo los diferentes elementos que quiero describir. 00:06:49
En primer lugar, DT, ¿vale? Y aquí pondría, por ejemplo, pues yo qué sé, el perro, ¿vale? 00:06:56
Y ahora, si yo quiero hablar de la descripción del perro, pondría, la descripción la haría con la etiqueta DD, ¿vale? 00:07:07
Y pondría, animal de compañía, muy cariñoso y fiel, ¿vale? 00:07:14
Ahora de la misma forma podría describir el gato, ¿vale? Gato, pongo etiqueta de T y pongo una etiqueta de D para hacer la descripción. Animal de compañía, poco cariñoso y poco fiel, ¿vale? 00:07:22
Y por último, bueno, y ya así seguiríamos todos, ¿vale? Fijaros que lo que esto produce es que la descripción aparece con un poco de sangría, ¿vale? Entonces, tendríamos nuestro perro como elemento a describir, el gato como elemento a describir y luego las descripciones, ¿vale? 00:07:42
Bueno, pues eso es todo en cuanto a lista, espero que haya sido útil, que os haya quedado claro y que la utilicéis, ¿vale? Seguimos. 00:08:06
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
173
Fecha:
17 de noviembre de 2020 - 19:37
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
08′ 15″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
23.29 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid