Saltar navegación

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

Listas HTML - 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 27 de septiembre de 2024 por Pedro Luis L.

16 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, vamos a continuar con nuestro pequeño curso de HTML. 00:00:00
Acordaros que el otro día, o en el otro vídeo, habíamos visto cómo poner los textos en negrita, en itálicas, o sea, en cursivas, en negrita, e itálica, etcétera, etcétera, etcétera. 00:00:05
Vamos a continuar con los apuntes. 00:00:16
Bueno, esta etiqueta que viene a continuación, font, actualmente no se usa. 00:00:18
Los navegadores la soportan, pero actualmente no se usan. 00:00:23
Si hay que cambiar el tipo de letra, usamos el CSS, las hojas de estilo. 00:00:25
Pero el navegador lo soporta. Para cambiar el tamaño de la letra o el tipo de letra se usa font, que está indicando que vas a cambiar el tipo de letra, el tamaño del tipo de letra, el color y por último, esto que pone face, el último atributo, este que pone face, este indica el tipo de letra. 00:00:30
Si es TinyRomance, si es Arial, si es Courier, si es Calibri, hay un montón de tipos de letra, pues este indica el tipo de letra. 00:00:50
Esto actualmente no se usa en HTML directamente, lo usamos a través del CSS. 00:00:58
Y luego tenemos, y esto sí se usa en muchos, las listas. 00:01:04
Tenemos dos tipos de listas. 00:01:07
Vamos a hacer un ejemplillo. 00:01:08
Vamos a ver si está funcionando esto. 00:01:10
Vamos a hacer un ejemplillo. 00:01:11
Vamos a crear aquí una página. 00:01:14
Va a ser página 5. Voy a borrar todo, incluso la extensión. Página 5.html. Abro página 5. La abro con mi editor favorito. La abro con mi editor favorito. 00:01:16
Eso son los ensayos. Eso que veis ahí son los ensayos. Me ha abierto una página que no quería. Esta no me interesa. Vamos a ver. Aquí. Vale. 00:01:34
Bueno, vamos a crear la página web. Voy a usar una plantilla que tengo aquí preparada en este editor. Ya vimos que los editores, la gran mayoría, o prácticamente todos, pueden usar plantillas. 00:01:45
Plantillas que tú te creas y manejas como quieras. Yo me he creado, por ejemplo, la plantilla HTML5, que lo que hace es meterme ya directamente el código que yo le pida. 00:02:04
entonces le vamos a poner un título a la página que va a ser página 5 00:02:14
¿de acuerdo? y ahora en esta página 5 00:02:17
bueno voy a cambiar el título 00:02:22
el título extra lo voy a llamar listas 00:02:24
por curiosidad, para el que quiera conocerlo 00:02:30
este editor es el B 00:02:32
bueno el Neo B, pero que es lo mismo 00:02:35
y por ejemplo puedo ver las plantillas 00:02:38
aquí está las custom, me he creado yo una plantilla 00:02:41
mía propia, me he creado una plantilla propia 00:02:44
y esta plantilla por ejemplo 00:02:51
esto lo he escrito yo 00:02:54
se pueden meter plantillas 00:02:56
y aquí por ejemplo le he dicho que cuando ponga HTML5 00:02:57
pues me escriba todo esto 00:03:00
fijaos estos parámetros dólar 00:03:02
dólar es para meter 00:03:04
tú cosas 00:03:06
lo que yo escriba aquí va a aparecer automáticamente 00:03:07
aquí, no sé si os habéis fijado 00:03:10
no sé si os habéis fijado 00:03:12
que cuando yo he puesto HTML5 00:03:15
yo he puesto tabulador 00:03:18
lo que escribí aquí sale abajo, ¿lo veis? 00:03:20
¿Lo veis lo que sucede ahí? 00:03:24
Cuando yo escribo o borro, lo que escribo en un lado aparece en el otro. 00:03:26
Eso es porque en mi plantilla 00:03:30
le he dicho que lo que escriba aquí, en este sitio, 00:03:32
lo veis aquí, aparezca también aquí. 00:03:36
Y luego esto que pone $0 es donde quiero que quede la posición final del cursor. 00:03:40
Yo lo que hago es que escribo aquí, 00:03:45
cuando acabo 00:03:46
pulso tabulador, me salta al siguiente 00:03:49
dólar que haya, si hay dólar 2 salta 00:03:51
al dólar 2, si hay dólar 3 salta al dólar 3 00:03:53
ya sucesivamente 00:03:55
y luego cuando pongo dólar 0 00:03:58
está la posición final del cursor 00:04:00
también le he puesto otro que es el Loren Ixson 00:04:01
la plantilla, es el Loren Ixson, el típico 00:04:03
Loren Ixson, que esa es para 00:04:06
meter texto al azar 00:04:09
si pongo Loren 00:04:10
y pulso tabulador 00:04:12
pues me mete 00:04:17
de Loren Nixon. Bueno, voy a deshacer los cambios, o mejor dicho, voy a cepillarme 00:04:19
todo esto de aquí, que no me interesa, y vamos aquí 00:04:23
a nuestra página. Sigamos. Las listas. 00:04:28
Bueno, sigamos. Estábamos viendo las listas. Tenemos listas no ordenadas. 00:04:33
Las listas no ordenadas, pongo ul 00:04:36
y ya estoy diciéndole al navegador que voy a meter una lista no ordenada. Cuando pongo 00:04:40
li, le estoy diciendo que estoy introduciendo un elemento de la lista. 00:04:45
Por ejemplo, voy a hacer la lista de la compra, voy a comprar pan, leche, pescado, ¿de acuerdo? Aquí le he metido una lista. Si yo voy y abro mi página web, no habéis caso de eso, que eran los ensayos, bueno, pues tengo aquí mi lista de la compra. 00:04:48
pan, leche, pescado 00:05:16
¿puedo meter una lista dentro de la lista? 00:05:17
por supuesto que puedo meter una lista 00:05:21
dentro de una lista 00:05:22
pongo aquí dos puntos 00:05:23
Li, pescado, pues tengo las sardinas 00:05:27
tengo 00:05:31
truchas 00:05:35
ahí se me ha olvidado el marisco 00:05:38
que es importante el marisco 00:05:42
¿de acuerdo? pues voy haciendo como mi lista de la compra 00:05:44
si voy al navegador 00:05:48
veis que dentro del pescado 00:05:51
he metido una lista dentro de la lista. 00:05:54
Fijaos que ha cambiado el simbolito, ¿no? 00:05:57
Que aquí pone un... 00:05:58
Ha cambiado el simbolito. 00:05:59
Aquí pone un círculo negrito 00:06:01
y aquí pone un círculo así en blanco, ¿no? 00:06:04
Que sepáis que se pueden meter listas dentro de listas. 00:06:07
O sea, no hay problema ninguno en meter una lista dentro de una lista. 00:06:11
Por ejemplo, 00:06:14
aquí el marisco. 00:06:16
Pues puedo meter otra lista más, perdón, 00:06:18
puedo meter otra lista más dentro de una lista. 00:06:21
O sea, puedo meter tantas listas como quiera, unas dentro de otras. 00:06:23
ul, li, y dentro del marisco pues tengo las gambas, ¿no? 00:06:28
¿Qué más? Pues los mejillones, ¿de acuerdo? Pues hay todo el marisco que quieras meter. 00:06:37
Si os fijáis, cuando me vaya mi ejemplo de página web, veis que dentro del marisco me ha metido otra lista. 00:06:50
O sea, puedo meter una lista dentro de una lista dentro de una lista. 00:06:58
Podría continuar con mi lista original. 00:07:01
Fijaros que mi lista original empieza aquí arriba y acaba aquí. 00:07:03
Y esta lista va de aquí hasta aquí. 00:07:10
¿De acuerdo? 00:07:13
Mi lista original, este sería el último elemento que he metido. 00:07:14
Pues puedo meter más elementos. 00:07:18
Voy a buscar carne. 00:07:20
Es la lista de la compra que estoy haciendo. 00:07:22
Cuando recargo, veis que ha añadido la carne. 00:07:25
Esto es una lista no ordenada. 00:07:28
¿Existen más tipos de lista? 00:07:30
Pues sí. 00:07:32
Aparte de la lista ordenada, tengo la lista que se llama no ordenada. 00:07:33
Perdón, la lista. 00:07:37
He hecho la lista no ordenada, la que acabo de hacer. 00:07:38
Tengo la lista ordenada. 00:07:41
En la lista ordenada puedo enumerar los elementos de la lista. 00:07:42
O sea, en lugar de poner puntitos, voy a poner 1, 2, 3, 4. 00:07:47
Nos vamos aquí. 00:07:51
Pongo 1, o L. 00:07:54
O L es para lista ordenada. 00:07:58
ul para lista no ordenada, ul para lista ordenada 00:08:00
order list, y esto es un order list 00:08:04
un order list, order list, ¿de acuerdo? 00:08:08
order list, un order list, sería el memo técnico de esto 00:08:11
bueno, pues meto el elemento de la lista, pues puede ser primer elemento 00:08:15
segundo elemento 00:08:18
y puedo meter el tercer elemento 00:08:25
ahí lo tengo 00:08:34
tengo mi lista ordenada 00:08:38
donde he puesto los elementos 00:08:42
primer elemento, segundo elemento, tercer elemento 00:08:44
fijaos que voy como intentando 00:08:46
esto se llama intentar, o sangrar el código 00:08:48
fijaos que aquí he dejado unos espacios 00:08:50
en blanco 00:08:52
para indicar que este li va dentro 00:08:53
del ol, he dejado más espacios en blanco 00:08:56
¿lo veis? 00:08:58
muchos editores te lo hacen automáticamente 00:09:00
pero si no lo hace automáticamente 00:09:02
se lo tienes que poner tú 00:09:03
¿veis que ha metido como espacios en blanco? 00:09:05
se puede meter como espacios en blanco 00:09:07
para indicar que un elemento está metido 00:09:11
dentro de otro. De hecho hay lenguajes de programación como el Python que es obligatorio 00:09:14
meter los espacios en blanco. Esto se llama 00:09:18
intentar. Y es muy importante intentar bien el código para que sea legible. 00:09:23
Luego puede ser que en algún sitio te machaquen 00:09:27
mucho porque no intentas bien el código. 00:09:30
Bien, pues ya tenemos nuestra lista. 00:09:34
Si la recargamos, vais a ver que aparece primero, segundo, tercero. 00:09:37
Hay más cosas. Puedo cambiar el tipo de la lista. 00:09:44
Vamos a volver aquí a los apuntes. 00:09:47
¿Veis que pone aquí el atributo type? 00:09:49
Bueno, tengo el atributo circle, this y square. 00:09:51
Para las listas sin ordenar. 00:09:55
Voy a una lista sin ordenar. 00:09:57
Por ejemplo, la primera. 00:09:58
Aquí. 00:10:04
Y pongo type. 00:10:05
Vamos a poner square. 00:10:07
¿De acuerdo? Type square. 00:10:09
Fijaos que en la lista eran circulitos y la he cambiado. 00:10:15
¿Veis que ha cambiado cuadraditos? 00:10:19
¿Lo veis? 00:10:21
Que ha cambiado cuadraditos. 00:10:22
¿Vale? 00:10:24
Con type cambio el tipo de la lista. 00:10:25
Tengo circle, dix y square. 00:10:26
En las numeradas también puedo cambiar el tipo. 00:10:29
Y aquí es más divertido. 00:10:31
Tengo el type. 00:10:32
Se pone type. 00:10:33
Me voy a mi lista ordenada. 00:10:35
Pongo aquí type. 00:10:36
Bueno, por defecto habéis visto que ha puesto 1, 2, 3. 00:10:38
Si pongo una a, 00:10:40
si pongo una a, 00:10:45
Fijaos, pone 1, 2, 3. Si le doy a recargar, ponéis A, B, C. 00:10:45
Aquí pone lo que podéis poner. Si ponéis un 1, va a poner 1, 2, 3, 4. 00:10:51
Si ponéis una mayúscula, A, B, C, D, E en mayúsculas. 00:10:55
Si ponéis una A minúscula, A, B, C, D con minúsculas. 00:11:00
Y si ponéis una I minúscula o una I mayúscula, lo pone en números romanos. 00:11:06
Voy a poner una I minúscula y vais a ver que lo pone en números romanos. 00:11:11
Ahí lo tenéis, en números romanos. ¿Lo veis? 00:11:19
Si ponéis en I mayúscula, pues lo ponéis en romanos en mayúscula. 00:11:21
Hay otro atributo que es interesante, que es estar. 00:11:25
El atributo estar te dice hasta dónde, por qué elemento quieres que empiece la lista. 00:11:29
Aquí ha empezado por 1. 00:11:33
Véis que empieza por el 1 en números romanos. 00:11:35
Pero si le pongo estar y le digo que empiece por el 3, 00:11:37
atención, voy a recargar, fijaos que este es el 1, 00:11:46
pues cuando doy a recargar, se ha convertido en 3, 4, 5 en números romanos. 00:11:49
¿Vale? 00:11:56
O sea, el start sirve para donde, a partir de qué número, puedo empezar la lista. 00:11:57
O quiero empezar la lista. 00:12:02
Y luego también tengo el orden. 00:12:03
Este que pone... 00:12:05
Si pones reverse set, se añade esta cosa aquí, reverse set, cambia el orden. 00:12:07
3, 2, 1. 00:12:13
¿De acuerdo? 00:12:15
Hay otra lista que no se suele usar mucho, porque actualmente lo usamos todos con div, 00:12:16
que es menú. 00:12:21
que menú cuando pones menú es una lista igual y en css le puedes convertir en un menú habitualmente 00:12:22
vamos a usar un 10 y un link no nos vamos a complicar tanto si veis la mayoría de páginas 00:12:32
web esto no lo suelen usar otra cosa que tenéis que conocer aunque tampoco se usa mucho la lista 00:12:38
de definir de definiciones que se mete con dl es para meter definiciones de palabras por ejemplo 00:12:43
Quieres definir patata y cebolla, ¿no? Pues pones DL, DL, entre DT, entre DT. 00:12:49
Pones aquí, bueno, donde pone término 1 pondrías la palabra que quieres definir, cebolla. 00:12:58
Y pondrías aquí DD, pues hortaliza, que crece, etcétera, etcétera, etcétera. 00:13:02
Lo pones aquí en el DD. 00:13:06
Patata, quieres definir patata, por donde pone término 2 pones aquí patata, los DT, 00:13:09
y aquí viene la definición de patata, pues es un tubérculo que crece, etcétera, etcétera, etcétera. 00:13:14
¿De acuerdo? 00:13:20
Vais a ver que no se usa mucho, pero que sepáis que existe. 00:13:21
Bueno, los hiperlaces ya lo hemos visto. 00:13:27
Voy a cortar aquí el vídeo y vamos a continuar con las imágenes. 00:13:29
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
16
Fecha:
27 de septiembre de 2024 - 10:01
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
13′ 34″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
22.00 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid