Saltar navegación

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

Más sobre enlaces y formatos de texto - 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 25 de septiembre de 2024 por Pedro Luis L.

10 visualizaciones

Más información Transcripción

Descargar la transcripción

Vamos a continuar con nuestro pequeño tutoría sobre HTML. 00:00:01
Estuvimos viendo en el vídeo anterior los enlaces, los hiperenlaces. 00:00:09
Bueno, nos quedó un par de cosas por contar de los hiperenlaces. 00:00:14
Bueno, vamos a volver a nuestro pequeño proyecto. 00:00:18
Aquí tengo nuestras páginas, ¿de acuerdo? 00:00:22
Y voy a crear una nueva página, por ejemplo, aquí dentro. 00:00:25
¿De acuerdo? 00:00:28
crear nueva, archivo de texto, página 4, y acordaos que tenemos que quitar la extensión txt y ponerle la extensión html. 00:00:31
La editamos, yo estoy usando Kate, pero podéis usar el editor que más os apetezca, y voy a crear una página web. 00:00:44
Bueno, creo mi página web, aquí la tengo, la pongo a veces de la cuenta. 00:00:52
He creado mi página web. Vamos a ponerla en grande que se vea. El título va a ser página 4. Bueno, de momento esto todavía no lo hemos visto. 00:01:00
Bueno, vamos a llamar la página de contenido. Vamos a suponer que tengamos una página muy grande. A veces cuando tenemos una página muy grande nos interesa tener enlaces dentro de la misma página. 00:01:16
O sea, podemos poner arriba un índice y luego que salte a las distintas partes de la página. 00:01:27
Por ejemplo, si tengo aquí un p, ¿de acuerdo? 00:01:34
Si tengo aquí un párrafo, aquí en el párrafo meto un enlace, ahref igual barra a, 00:01:41
y aquí voy a poner enlace al final de la página, por ejemplo. 00:01:54
que suele ser habitual, enlace al final de la página 00:02:01
bueno, pues lo que tendré que poner al final de la página 00:02:07
es otro tag 00:02:11
otra etiqueta 00:02:14
a de enlace 00:02:16
y en lugar de cherez voy a poner name 00:02:20
y aquí voy a poner un nombre 00:02:22
voy a llamarlo por ejemplo final 00:02:25
y aquí voy a poner almohadilla final 00:02:28
con lo cual estoy diciendo que salte esta almohadilla 00:02:31
esta almohadilla significa que salte 00:02:34
al nombre que le he indicado aquí 00:02:37
y ese nombre 00:02:39
está indicado por este atributo name 00:02:42
o sea, cuando yo le dé aquí a este enlace 00:02:45
va a saltar a la posición de esto de aquí 00:02:48
claro, esto 00:02:51
si lo pongo así, tal cual no va a tener ningún efecto 00:02:53
si lo abro, vais a ver 00:02:57
bueno, como ya estoy 00:03:04
Porque como aquí está la página y el final va a estar aquí, pues no tiene ningún efecto. Entonces lo que voy a hacer es meterle un poquito más de texto. Voy a meterle un poquito más de texto. A ver, ¿dónde está? Aquí. Vamos a meterle un poquito más de texto. 00:03:05
Vamos a meterle un Loren Ixun. El Loren Ixun es un texto que no significa nada. Lo vais a ver en muchos editores. Lo usaban los antiguos impresores, los que imprimían libros, para hacer pruebas de texto. 00:03:23
entonces se ha quedado la tontería de que 00:03:39
actualmente seguimos usando el Oren Ixun 00:03:41
pues muchos editores ya tienen 00:03:43
preparado el Oren Ixun 00:03:45
que es este texto aquí 00:03:47
al azar, que le dice tonterías 00:03:48
básicamente, para que 00:03:51
practiquemos, bueno, le meto aquí el Oren Ixun 00:03:52
guardo 00:03:55
podéis poner el Oren Ixun 00:03:57
o si no queréis poner el Oren Ixun 00:03:59
pues simplemente texto al azar 00:04:00
vale, voy a mi página web 00:04:02
voy a mi página web 00:04:05
No sé por qué me lo he puesto aquí. 00:04:13
La página web. 00:04:16
Voy a mi página web. 00:04:18
Control O. 00:04:19
Voy a abrir mi página web. 00:04:22
La página 4. 00:04:24
Abro la página 4. 00:04:29
Venga, ya tengo una página muy grande, con mucho contenido. 00:04:30
Entonces, cuando pulso aquí en el enlace al final de la página, 00:04:33
veis que me salta al final de la página. 00:04:37
Le podría meter un enlace al principio de la página. 00:04:38
Me vengo aquí. 00:04:42
Necesitaré otra etiqueta arriba. 00:04:44
arriba de la página necesitaré otra etiqueta 00:04:47
a name igual a inicio puedo poner en el 00:04:51
nombre de la etiqueta aquí lo que me apetezca el nombre que me dé la gana 00:04:59
ahora muy importante si he puesto aquí inicio cuando quiera hacer el enlace voy 00:05:03
a meterle un enlace al inicio de la página 00:05:08
Vamos a meterle un p, vamos a meterle aquí el enlace a href="a", y aquí hay que poner almohadilla inicio, y entonces va a saltar al inicio de la página. 00:05:12
Recargo la página. Ah, bueno, espera, que no he puesto aquí nada, que no he puesto aquí, sale vacío. Vamos a poner ir al inicio, ir al inicio de la página. 00:05:32
Bueno, recargo aquí la página, si le pincho al final va al final y aquí en este enlace de ir al inicio va al inicio. 00:05:45
Si pusiera otro nombre por en medio, por aquí en medio, pues podemos saltar al medio. 00:05:52
Me voy aquí al medio del texto, pongo aquí a name, igual, voy a llamarle medio, 00:05:59
y le puedo meter un enlace, por ejemplo aquí, al medio de la página. 00:06:05
Esto va a ser saltar al medio. 00:06:20
Y aquí tengo que poner href igual a medio. 00:06:24
Si le doy, ves que pone saltar al medio y me salta al medio. 00:06:35
Donde esté ese enlace que habrá metido por aquí en medio. 00:06:39
Aquí he visto ya los enlaces. 00:06:44
Hay otra posibilidad más que no hemos visto de los enlaces. 00:06:46
Y es que puedo abrir muchas páginas web cuando les das. 00:06:50
se van a otra, te abren aquí 00:06:53
otra pestaña. Normalmente, si yo le meto aquí 00:06:56
un enlace, voy a meterle aquí un enlace 00:06:57
a Google, por ejemplo. 00:07:00
Voy a ir a Google. 00:07:04
Aquí pongo la charla. Pongo la página 00:07:07
de Google. Google. 00:07:11
Bueno, aquí me falta una barra. 00:07:18
Bueno, 00:07:21
una curiosidad. Muchos editores 00:07:21
te permiten, ¿veis esta cosita que ha aparecido aquí? 00:07:23
Esta cosita te permite 00:07:26
poner 00:07:27
tus propios 00:07:29
como resúmenes, como plantillas, tus propias plantillas. 00:07:31
Entonces yo puedo aquí añadir una plantilla, esta va a ser la plantilla A 00:07:37
y cuando le pulse me ponga AHREF igual, comillas, comillas, barra A. 00:07:41
¿De acuerdo? Aquí que se ponga, por ejemplo, bueno, lo voy a dejar así. 00:07:53
Entonces, cuando yo escriba A, ¿veis lo que va a pasar? Va a hacer eso. 00:07:59
aquí ha creado mi nueva plantilla de código y entonces yo puedo llegar y decir clima y ya me 00:08:04
mete la plantilla de código que creado lo tienen muchísimos editores vale prácticamente todos bueno 00:08:12
pues si mete un enlace a google si mete un enlace a google vais a ver que me la abre en la misma 00:08:18
página me lo abre exactamente la misma página pero yo quiero que me abra esta página en una 00:08:30
pestaña para los podemos poner target igual a blanca a blanca de acuerdo ábreme lo en una 00:08:36
pestaña en blanco esto significa ábreme lo en una pestaña si lo guardo y recargo y ahora le 00:08:48
doy vais a ver que me ha respetado la pestaña actual y me lo ha abierto en una pestaña nuevo 00:08:56
más elementos html que tenemos por aquí bueno si nos vamos a los apuntes bueno aquí tenemos 00:09:02
estábamos aquí que habíamos hecho habíamos puesto nuestra barra de navegación ya han metido enlaces 00:09:09
tenemos más muchos más elementos mirad si vamos a los apuntes tenemos las cabeceras que es aquí 00:09:15
a continuación las cabeceras las cabeceras sirven para meter texto resaltado muy resaltado es como 00:09:21
los títulos. El h1 sería el título mayor, el h2 el subtítulo, el h3 el subtítulo de subtítulo, 00:09:30
el h4 subtítulo, subtítulo, subtítulo y así sucesivamente. Fijaros, vamos a meter por ejemplo 00:09:37
Por ejemplo, un H1. Vamos a meter un H1. H1. El H1 va a ser título H1. Aquí vamos a poner un H2. H2. Título H2. 00:09:43
Vamos a meter un H3. Título, H3. Yo puedo meter un H4. Vamos a meterle todos. Título, H4. Un H5. Título, H5. Y el H6. Título, H6. 00:10:06
Bueno, aquí tengo los títulos 00:10:39
Vamos a ver cómo queda nuestra maravillosa página web 00:10:42
Aquí tenemos todos los títulos 00:10:45
Si os fijáis, el título 1 está como muy resaltado 00:10:48
Título 2, menos, menos, menos, menos, menos 00:10:52
Hasta que casi se confunde 00:10:55
Vais a ver que esto de los títulos, las hojas de estilo 00:10:58
Lo tratan de una forma curiosa 00:11:01
Ahora cuando si nos vamos a nuestro 00:11:04
le metemos la hoja de estilos a nuestra página web la w3 css vais a ver que los títulos de forma 00:11:07
diferente eso bueno eso nos puede convenir más cositas que tenemos por aquí bueno bueno el 00:11:14
párrafo ya lo hemos visto con p meto un par y compré esto tenéis aquí a continuación será el 00:11:22
bloque de texto con p meto párrafos que ya hemos visto y compré meto texto pre formateado fijaros 00:11:30
aquí en el lower nixon este, el lower nixon que he puesto 00:11:36
tiene un formato, fijaos que aquí, esto es un salto 00:11:40
de líneas, son líneas diferentes, bueno, no, perdón, lo ha metido todo de golpe 00:11:45
lo ha metido todo de golpe, bueno, mira, va a quedar mejor, mirad 00:11:48
fijaros, esto sería toda una línea seguida, esto 00:11:52
toda otra línea seguida, y el navegador, fijaos que lo junta todo 00:11:56
el navegador, cuando vamos a verlo, fijaos que ha puesto todo el texto 00:12:00
pegadito, uno detrás de otro. Con el pre 00:12:04
el texto se muestra tal como lo escribimos. 00:12:07
Fijaros, si pongo aquí un pre, va a aparecer el texto 00:12:12
tal como lo escriba. Estoy escribiendo aquí un texto 00:12:18
aquí como muy al azar. De hecho, lo voy a hacer con los dos, con el p también. 00:12:22
Fijaros, voy a meter el mismo texto con el pre 00:12:32
y con el p, para que veáis la diferencia. Fijaros, es exactamente el mismo texto. 00:12:34
este con el pre y este con el p 00:12:39
o si nos vamos a 00:12:42
nuestro cargo aquí 00:12:44
fijaros, el pre me respeta 00:12:58
el formato que haya puesto 00:13:01
lo pone tal cual lo he puesto yo 00:13:02
aquí, fijaos que lo pone tal cual lo he puesto 00:13:05
aquí y el p no, el párrafo 00:13:07
el párrafo que es 00:13:09
este de aquí, coge y lo pone todo seguido 00:13:11
que eso puede estar bien porque 00:13:13
luego vais a ver que 00:13:14
el código html se genera a través 00:13:16
de plantillas y programas 00:13:19
Y entonces, al juntar estas plantillas y programas, pues queda el texto hecho un desastre. 00:13:20
Pero el navegador es capaz de interpretarlo de forma que quede todo continuo y que quede bien, todo seguidito. 00:13:27
Más elementos. 00:13:33
Bueno, br es un salto de línea. 00:13:36
br es un salto de línea. 00:13:39
Si pongo aquí, por ejemplo, aquí, un br, br, esto es un salto de línea. 00:13:41
Vais a ver que aquí va a meter, va a coger esta primera línea de Lorentz-Zoom y después va a meter un salto de línea. 00:13:54
¿Veis esta primera línea? Pues ahora cuando le dé a recargar, ¿veis que la ha metido ahí? 00:14:01
Verro significa cambia de línea, salta de línea. Aunque aquí está todo seguido. 00:14:08
Si lo veis aquí, está todo seguido. ¿De acuerdo? El zoom parece que no está seguido, pero está todo seguido. 00:14:13
Es para meter saltos de línea. A veces puede interesar meter una separación o lo que sea. 00:14:20
Por ejemplo, aquí se mete otro br. 00:14:28
Vais a ver que el texto, ¿veis lo que ha pasado? 00:14:35
Se han abierto varias líneas. O sea, se han abierto concretamente dos. 00:14:40
Si le meto una más, para que se vea el efecto, veis que se abre una más. 00:14:43
O sea, el br abre líneas. ¿Qué más tenemos? 00:14:50
¿Qué más elementos tenemos? 00:14:53
Bueno, hr es una línea horizontal. 00:14:55
sirve como separador. 00:14:58
HR nos sirve como separador. 00:15:03
Es una línea horizontal. 00:15:06
Lo vais a ver aquí. 00:15:07
¿Veis esa línea que ha aparecido aquí? 00:15:09
HR es una línea horizontal. 00:15:11
Nos puede servir de separador. 00:15:14
Bueno, a veces nos interesa poner textos en negrita, 00:15:17
en superíndice, índice... 00:15:23
Bueno, un montón de formatos. 00:15:25
Pues tenemos aquí todos estos. 00:15:27
que os tenéis que saber. 00:15:30
Que os tenéis que saber. 00:15:32
Vamos a empezar por los más fáciles. 00:15:33
El B, la negrita. 00:15:35
El B. 00:15:37
No sé por qué me está mostrando todo el texto en negrita. 00:15:38
A ver, si me ha escapado un B. 00:15:41
No. 00:15:43
Por ejemplo, me lo parece a mí. 00:15:44
Bueno, el B sirve para mostrar un texto en negrita. 00:15:45
Si yo pongo aquí un B, 00:15:49
y un B, B de bold, 00:15:52
esa B es de bold, en inglés significa negrita, 00:15:55
¿Vale? Esta vez de bold 00:15:58
Pues si yo pongo una B 00:16:00
¿Veis que la he puesto en negrita? 00:16:02
¿Veis que ese Ixun está más resaltado que el resto? 00:16:06
¿De acuerdo? 00:16:11
El B pone en negrita 00:16:12
¿Qué más tenemos? 00:16:14
El I lo pone en itálicas, en cursivas 00:16:16
Esto es I de itálico 00:16:19
¿Veis? Lo he puesto aquí en cursiva 00:16:34
¿Puedo poner en negrita y cursiva? 00:16:36
Sí, perfectamente 00:16:40
Fijaros, si pongo un B y después un I y luego los cierro correspondientemente, fijaros que los tengo que cerrar en el mismo orden. 00:16:42
Esto estaría mal, ya lo he puesto mal. 00:16:52
Fijaros que cerro primero el B y luego el I. 00:16:55
Cuando su orden de aparición es primero el B y luego el I, entonces hay que cerrarlos por orden. 00:16:58
Cerraría primero el I y luego el B. 00:17:05
¿De acuerdo? 00:17:08
O sea, esto si lo viésemos en código, como vemos aquí los informáticos, si lo viésemos en código, esto deberíamos verlo así, ¿vale? Así se interpreta mejor, ¿vale? Abro el B, cierro el B, abro el I, cierro el I, ¿vale? Pues vais a ver que dolor sale en negrita y cursiva. 00:17:08
Ahí lo veis, negrita y cursiva 00:17:31
¿Qué más? 00:17:34
La U, subrayadas 00:17:36
Pues puedo meter una subrayada 00:17:37
La subrayada no se suele usar mucho 00:17:43
Porque se puede confundir con los enlaces del navegador 00:17:46
¿Veis? Ahí 00:17:49
Se puede confundir con los enlaces del navegador 00:17:51
No se suele usar mucho la subrayada 00:17:54
Pero se puede usar 00:17:55
Actualmente se usa menos 00:17:56
Pero al inicio de la serie de la teleinformática 00:17:57
Todos los enlaces iban subrayados 00:18:00
Entonces para no confundirlos 00:18:01
os podemos mezclar. Bueno, y tenemos más todos estos que tenéis que saberos. Superíndice, subíndice, énfasis. Bueno, muchas de estas vais a ver que son muy parecidas al B y al I. 00:18:03
Lo vamos a diferenciar cuando le metamos una hoja de estilos, porque, por ejemplo, strom indica un énfasis más. 00:18:19
Strom, si lo uso, vais a ver que no se diferencia de las negritas. 00:18:27
Strom no se diferencia nada de las negritas. 00:18:36
¿Veis? Este es strom. 00:18:41
Esto luego con una hoja de estilos puede hacer que el strom se diferencie de la negrita, 00:18:44
metiéndole un color de fondo o con un color diferente o un tipo de letra diferente, lo que sea. 00:18:49
de acuerdo 00:18:55
code, mira este es interesante 00:18:56
bueno, cita para una cita 00:18:59
dnf para un término 00:19:00
code, este es interesante, este es para indicar 00:19:03
que muestra código 00:19:05
muestra código 00:19:06
y aquí iríamos, nuestro código 00:19:09
system 00:19:18
out 00:19:20
print, para el que no lo sepa esto es 00:19:21
bueno, esto es java 00:19:24
aquí metería un código de java 00:19:26
por ejemplo 00:19:30
lo veis ahí que lo ha puesto 00:19:32
como 00:19:35
lo ha puesto en un tipo de letra 00:19:36
de ancho 00:19:39
igual 00:19:41
en un tipo courier, fijaros que la E 00:19:42
tiene el mismo tamaño que la M en este tipo de letra 00:19:45
y aquí por ejemplo 00:19:48
esta M tiene un 00:19:49
tamaño mayor que las vocales 00:19:51
¿vale? 00:19:54
lo pone en un tipo de letra de tamaño fijo 00:19:55
¿vale? que viene genial para código 00:19:57
for 00:20:01
y igual a 0, y 00:20:05
menor que 10, y más más 00:20:08
esto, ni caso 00:20:11
vale, para que veáis código 00:20:12
ahora cuando veáis código 00:20:15
vale, pues ahí lo pone, de acuerdo 00:20:16
fijaros que código no me respeta 00:20:20
no me respeta 00:20:22
como el pre, esto sería 00:20:24
más lógico meter un pre 00:20:26
para representar código 00:20:27
vale, cuando quiera 00:20:33
presentar código, lo metería en un code y luego en un pre. 00:20:35
¿Vale? ¿Qué más cositas 00:20:38
tenemos aquí? Bueno, 00:20:39
salida... Bueno, tenéis aquí un montón 00:20:41
de valores que hay que saberse. 00:20:43
Mira, del. Del es 00:20:46
un texto tachado. Vamos a usar 00:20:47
del. 00:20:49
Del. 00:20:52
Por ejemplo, este. 00:20:53
Del. 00:20:56
Barra del. Eso ir probando 00:21:00
y vais viendo la diferencia. 00:21:02
¿Ves que lo ha tachado? 00:21:04
Es un texto tachado. 00:21:06
Bueno, pues con esto, este vídeo, seguiremos viendo los elementos. 00:21:08
Ya nos queda ver, pues, todos estos elementos. 00:21:14
Qué serán las etiquetas, las listas, las imágenes, cómo se meten las imágenes, las tablas. 00:21:17
Y muy importante, muy importante, los formularios. 00:21:27
¿De acuerdo? Vamos a continuar con eso. 00:21:31
De momento deberéis practicar con todo esto y haceros vuestra propia página web con la hoja de estilos, haciendo de cero, explorad vuestro editor de código, yo estoy usando el Kate, pero vosotros podéis usar, o mejor deberíais usar el Visual Studio y vais a ver que el Visual Studio también tiene cosas como esta y mucho más potentes. 00:21:32
Vamos a poner aquí la relación. 00:21:55
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
10
Fecha:
25 de septiembre de 2024 - 9:57
Visibilidad:
Público
Centro:
IES VILLABLANCA
Descripción ampliada:
Fe de erratas:
En el minuto 10 falta por cerrar las etiquetas de las cabeceras:
<h1>Título h1</h1>
<h2>Título h2</h2>
<h3>Título h3</h3>
<h4>Título h4</h4>
<h5>Título h5</h5>
<h6>Título h6</h6>
Duración:
22′
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
52.37 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid