Activa JavaScript para disfrutar de los vídeos de la Mediateca.
HTML - Formateando texto - 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, pues en este vídeo lo que vamos a empezar a hacer es investigar o aprender sobre las diferentes etiquetas que hay para formatear textos en HTML, ¿vale?
00:00:00
Entonces, en este caso, de nuevo nos vamos a ir al editor brackets, ¿vale? Como veis aquí, yo he creado ya un archivo que lo he llamado pruebatextos.html, ¿vale?
00:00:12
prueba-textos.html y lo que vamos a empezar es aprender también a utilizar un complemento de este editor muy útil que se llama emet, con dos emes, ¿vale?
00:00:23
Como veis, por ejemplo, aquí. Entonces, ¿cómo funciona este complemento? Pues este complemento ayuda a escribir el código más rápido.
00:00:34
Entonces, si os acordáis, cuando hicimos la página web, la primera página web, nosotros poníamos la etiqueta, el doctype, poníamos la etiqueta html,
00:00:43
la etiqueta head, la etiqueta body, ¿vale? Entonces, esta extensión del bracket lo que nos permite es, pues, agilizar todo ese proceso, ¿vale?
00:00:51
Entonces, para nosotros escribir todo lo que habíamos escrito en el vídeo anterior, simplemente pondríamos HTML 2.5 y haríamos clic, perdón, no haríamos clic,
00:01:02
y pulsaríamos la tecla tabulador, que es la tecla que está a la izquierda de la Q, ¿vale? Entonces, fijaros que cuando yo pulso esa tecla,
00:01:15
automáticamente ya me sale todo lo que habíamos escrito antes, ¿vale?
00:01:21
Simplemente que en el idioma me aparece en inglés, ¿vale?
00:01:26
Entonces nosotros lo ponemos en castellano, es, ¿vale?
00:01:30
Y aquí cambiamos el título, ¿vale?
00:01:34
Lo que ahora voy a hacer es intentar que seáis capaces de ver al mismo tiempo
00:01:37
Esto es una extensión que tiene por defecto brackets, que es muy útil, ¿vale?
00:01:45
Entonces, si nos vamos a brackets, al editor, ¿vale?
00:01:54
Fijaros que aquí a la izquierda tenéis como una especie de rayo, ¿vale?
00:01:58
Que pone vista previa dinámica.
00:02:02
Entonces, si le dais...
00:02:05
Esto tarda un ratito, ¿vale?
00:02:07
Vale, entonces, como veis aquí, pues, lo que estoy ahora mismo viendo es una utilidad que tiene el brackets, de tal forma que yo cualquier edición que haga en la web se me ve directamente aquí reflejada, ¿vale?
00:02:10
De tal forma que, por ejemplo, si ahora este texto lo borro y digo hola, ¿vale? Fijaros que aquí en el título de la web se me cambia, ¿vale? Pero bueno, voy a dejar como lo tenía.
00:02:29
Y vamos a empezar a ver etiquetas de formato de texto, ¿vale? Entonces, vamos a ir explicando estas etiquetas, ¿vale? Que como digo, son muy importantes, ¿vale?
00:02:41
Y vais a ir viendo cómo se van a ir reflejando en el otro lado, ¿vale? De tal forma que nos sirve para ir haciendo nuestras pruebas de una forma bastante inmediata, ¿vale?
00:03:01
Entonces, en primer lugar, vamos a ver lo que son los comentarios, cómo meter comentarios en HTML, ¿vale? Igual que los metíamos en Python, pues en HTML podemos añadir comentarios que nos sirvan a nosotros para saber cuál es el contenido o qué queríamos hacer en alguna parte de la web, ¿no?
00:03:10
Entonces, para poner un comentario, pondríamos primero la etiqueta, primero el carácter de menor, luego pondríamos cierre de exclamación, dos guiones y ahora pondríamos el comentario.
00:03:28
Este texto es un comentario. Y luego, dos guiones y cerramos, ¿vale?
00:03:42
Entonces, fijaros que esto que acabamos de poner no aparece en nuestra página web, ¿vale? Por ningún lado, ¿ok?
00:03:49
¿Veis? Entonces, vamos a empezar a ver etiquetas que sí sirven, ¿vale? En primer lugar tenemos la etiqueta de los párrafos, que es, como decía, la tecla P, ¿vale?
00:03:56
Yo le pongo la tecla P y ahora aquí pondría, este es mi primer párrafo. Fijaros que ya directamente el brackets o marca que el párrafo ocupa todo el ancho de la web.
00:04:09
Esto es muy importante y luego explicaremos por qué hay diferentes tipos de etiquetas en función de su ubicación en la web, ¿vale?
00:04:22
Entonces, fijaros que el párrafo ocupa todo ese párrafo.
00:04:29
Si yo ahora pongo una nueva etiqueta P, ¿vale?
00:04:32
Y digo, este es mi segundo párrafo.
00:04:35
Fijaros cómo, al hacer clic en cada uno de ellos, son como zonas diferenciadas que ocupan todo el ancho de la web, ¿vale?
00:04:38
Más etiquetas importantes.
00:04:49
Pues, por ejemplo, vamos a coger un texto, el típico texto Loren Ipsum, ¿vale? Entonces, para eso, vamos a poner un párrafo y, si no me equivoco, aquí hay una opción de poner Loren Ipsum 10.
00:04:50
vamos a poner una etiqueta
00:05:09
como decía P
00:05:19
y lo que yo quiero ahora
00:05:21
vamos a ver
00:05:24
de donde puedo copiar un texto
00:05:31
pues copio un texto
00:05:33
lo voy a copiar a mi editor
00:05:37
y voy ahora mismo
00:05:40
estas etiquetas que he puesto aquí
00:05:44
las voy a quitar y ahora os explico
00:05:45
lo que son
00:05:47
fijaros que al poner
00:05:48
eso, ¿vale? Un párrafo nuevo que tengo aquí marcado, ¿vale? Y ahora vamos a explicar lo que son las etiquetas de salto de línea, que es la etiqueta BR,
00:05:52
de break, ¿vale? Entonces, si yo, por ejemplo, me vengo aquí y pongo una etiqueta BR, ¿vale? Fijaros que he tenido un salto de línea justo en la palabra
00:06:03
ut, ¿vale? ut enim, se me da la línea siguiente. Pero, todo sigue perteneciendo al mismo párrafo, ¿vale? Sigue siendo el mismo conjunto de contenido.
00:06:13
Yo puedo poner párrafo, puedo poner, perdón, saltos de línea donde quiera, ¿vale? Fijaros que si lo pongo aquí, produce un salto de línea, pero todo sigue
00:06:22
perteneciendo, como digo, al mismo párrafo, ¿vale? Entonces, ya tenemos primera etiqueta, etiqueta p, de párrafo, etiqueta br, que sería de etiqueta de salto
00:06:30
de línea, ¿vale? Y ahora vamos a ver cómo poner texto en negrita, ¿vale? Para eso vamos a utilizar una etiqueta que es la etiqueta B, ¿vale?
00:06:40
Yo puedo poner esa etiqueta B, lo puedo poner como elemento independiente, ¿vale? O lo puedo poner perteneciente dentro de un párrafo, ¿vale?
00:06:53
En este caso lo voy a poner como elemento independiente. Fijaros, yo pongo B, automáticamente el editor me rellena, ¿vale?
00:07:07
Y yo pondría aquí, este es mi texto en negrita, ¿vale? Fijaros que cuando yo marco esto, ahora no me aparece como si fuera un párrafo independiente,
00:07:14
Es decir, como si me ocupara todo el ancho de la página, ¿vale? De hecho, si yo ahora aquí pongo... Bueno, ahora explico lo que quiero explicar, ¿vale?
00:07:27
Vamos a poner un salto de línea, un break, ¿vale? Y justo debajo vamos a ver otra etiqueta, ¿vale? Que también es para negrita, que es la etiqueta strong, ¿vale?
00:07:39
Y ponemos esto también es texto en negrita, ¿vale?
00:07:53
¿Pero qué diferencia hay entre B, la etiqueta B y la etiqueta Strong?
00:08:00
Pues fijaros, la etiqueta Strong es una etiqueta que reconocen los buscadores, ¿vale?
00:08:05
Entonces es una etiqueta que sirve cuando nosotros queremos que cuando ponemos un texto en negrita dentro de una página web,
00:08:10
el buscador sea capaz de referenciar ese contenido, ¿vale?
00:08:17
Y que luego aparezca dentro de los buscadores, ¿vale?
00:08:21
Pues yo qué sé, imaginaros que hemos hecho una página web sobre medio ambiente, ¿vale? Y entonces, pues queremos que cuando la gente busque por palabra contaminación aparezca nuestra página web, ¿vale? Pues esa contaminación la pondríamos como Strong, ¿vale?
00:08:24
Pero si nosotros luego queremos poner un contenido en negrita, por lo que sea, yo qué sé, pues imaginaros que estamos hablando sobre, yo qué sé, sobre las aves, ¿no? En esa página web.
00:08:38
A ver, lo pondríamos en negrita, pero no lo pondríamos como strong, ¿vale? Porque no queremos que nos identifiquen nuestra web por eso, ¿vale?
00:08:51
Más etiquetas que podemos ver, ¿vale? Vamos a poner aquí un salto de línea, br, y vamos a ver la etiqueta para la cursiva, ¿vale? Para poner texto en cursiva.
00:09:01
Esa etiqueta es la etiqueta I, ¿vale? Ponemos I, esto es texto en cursiva, ¿vale? Y fijaros que sale en mi editor, en mi página web, sale en cursiva, ¿vale?
00:09:13
Pongo otro salto de línea y vamos a poner otra etiqueta de texto en cursiva, ¿vale? Que es la etiqueta EM, ¿vale? Que pasa algo parecido a lo que pasaba con la etiqueta STROM, ¿vale? Esto también es texto en cursiva, ¿vale? Y ponemos salto de línea.
00:09:33
Ahí es. Más etiquetas importantes. La etiqueta de resaltado, ¿vale? Si nosotros queríamos poner un texto resaltado, pondríamos un párrafo, por ejemplo, ¿vale? Quiero resaltar la palabra y ahora aquí ponemos la etiqueta Mark, ¿vale?
00:09:57
¿Vale? Entonces fijaros que aparece como si estuviéramos subrayando esa palabra, ¿vale? En amarillo. Más etiquetas para formato, ¿vale? Por ejemplo, para cambiar el tamaño, para poner un tamaño menor, ¿vale? Pues pondríamos un nuevo párrafo, ¿vale?
00:10:20
Fijaros que al poner el párrafo no tenemos que ir añadiendo salto de línea, él ya automáticamente mete ese salto de línea, que es importante, ¿vale? Y vamos a poner una etiqueta small, y aceptamos las condiciones del banco, por ejemplo, ¿vale?
00:10:50
Y esto nos produce un texto más pequeñito, ¿vale? Con la etiqueta small. Más etiquetas. Etiquetas de tachado. Por ejemplo, si nosotros queremos tachar un texto, ¿vale? Pues pondríamos nuestro párrafo, ¿vale? Y pondríamos para aprobar el proyecto de ley hace falta un 45% de los votos, ¿vale?
00:11:11
Entonces, ese 45 lo queremos borrar, ¿vale? Entonces lo pondríamos entre las etiquetas de del, ¿vale? Entonces fijaros que al añadir esto, ¿vale? Me aparece el 45% borrado, ¿vale?
00:11:40
Y si nosotros quisiéramos añadir un texto, ¿vale? Que sustituyera ese, ¿vale? Pues directamente lo que aquí, en vez de poner la etiqueta de del, ponemos la etiqueta de ins, ¿vale? Y ponemos del 60% de los votos, ¿vale? Y fijaros que aparece como subrayado, ¿vale?
00:12:01
¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más?
00:12:23
A ver que yo vea cosas que tengo que apuntar.
00:12:30
Vale, vamos a definirnos.
00:12:35
Voy a copiaros tres párrafos, ¿vale?
00:12:38
Que yo tengo aquí y que he sacado de Wikipedia, ¿vale?
00:12:41
Copio el primer párrafo.
00:12:49
Y lo copio ya con la etiqueta de...
00:12:52
Pongo primero, perdón.
00:12:55
las etiquetas P, ¿vale? Y copio el contenido de ese primer párrafo. ¿Vale? Entonces nos
00:12:58
vamos a Wikipedia y cogemos un texto cualquiera, pero que sea amplio, ¿vale? Que tenga gran
00:13:07
cantidad. Copiamos un segundo párrafo y copiamos un tercer párrafo aquí. ¿Vale? Entonces
00:13:12
Fijaros que vosotros lo que estáis viendo es una web donde hay tres párrafos claramente delimitados, ¿vale? Con una diferenciación propia de la etiqueta, ¿vale?
00:13:36
Y ahora imaginaros que yo quiero añadir una línea horizontal que separe un párrafo de otro porque tengan contenido diferente o por lo que sea, ¿vale?
00:13:44
Entonces hago Enter en Editor y añado la etiqueta que se llama HR, ¿vale? Y fijaros que aparece una línea horizontal, ¿vale? Que ocupa todo el ancho de la web, ¿vale?
00:13:52
Si yo aumento el tamaño de la web, el tamaño de la línea también aumentará, ¿vale?
00:14:05
Aumento el tamaño de la ventana, perdón, no el tamaño de la web.
00:14:10
Vale, más etiquetas, más etiquetas que tienen que ver con el texto, ¿vale?
00:14:15
Por ejemplo, vamos a poner un párrafo, ¿vale?
00:14:21
Ponemos un párrafo nuevo en nuestro editor y vamos a poner una cita, ¿vale?
00:14:27
Vamos a imaginarnos que estamos citando a alguien.
00:14:31
Y ponemos, mi disco favorito de U2, ¿vale? Es el Joshua 3, ¿vale? Y vamos a imaginarnos que nosotros queremos que ese nombre del disco, ¿vale? Sea una cita, ¿vale?
00:14:33
Entonces nos venimos y ponemos la etiqueta cita, ¿vale? Y el Joshua Tree lo metemos dentro del cita, ¿vale?
00:14:58
Entonces fijaros que no sale como en cursiva, ¿vale? Y es una forma de que luego en la página web eso almacene como que es una cita, como que no es texto en cursiva, ¿vale?
00:15:10
Hay que saber diferenciar cuando ponemos la etiqueta.
00:15:23
Más etiquetas, más etiquetas, más etiquetas.
00:15:27
Es importante.
00:15:30
Vale, otra etiqueta podría ser, por ejemplo,
00:15:34
una etiqueta para hacer un entrecomillado de una cita célebre de alguien, ¿vale?
00:15:38
Entonces, pues podríamos poner, por ejemplo,
00:15:43
tenemos un párrafo nuevo y le ponemos tal y como decía Aristóteles,
00:15:44
los puntos, ¿vale?
00:15:51
Y para poner esa cita ponemos una Q, la etiqueta Q, ¿vale? Y ponemos aquí somos lo que hacemos día a día, ¿vale? Entonces fijaros que nosotros al poner esto ya nos aparece entre comillas, ¿vale?
00:15:53
Si tenemos problemas con algunos navegadores, que puede ser que lo tengamos, ¿vale? Simplemente añadiremos un atributo sobre esta etiqueta, ¿vale? Que es el atributo Cite, ¿vale? Y entonces ponemos Cite y entre paréntesis la doble comilla, ¿vale?
00:16:07
¿Qué más? ¿Qué más etiquetas podemos ver? Pues, por ejemplo, podemos ver la etiqueta de otra forma de hacer citas, ¿vale? Citas literales.
00:16:28
Por ejemplo, imaginemos que nosotros queremos citar sobre un bloque, como un bloque de contenidos, queremos citar un texto Loren Ipsum. Entonces pondríamos la etiqueta P y dijimos, tal y como decía la página web generadora de texto aleatorio, dos puntos.
00:16:45
Y aquí vamos a añadir una etiqueta que se llama block quote. Y vamos a poner un atributo cite y ponemos, vamos a poner aquí, aquí pondríamos la página web de donde hemos sacado esas citas.
00:17:12
¿Vale? Y dentro del blog quote, pues pondríamos todo nuestro texto Loren Ipso. ¿Vale? De tal forma que lo que vosotros veis es todo lo que es la cita, pero así desplazada con un poco, como si hubiera un poco de sangría. ¿Vale?
00:17:31
Luego nosotros podríamos darle formato a esta cita, ¿vale? Más etiquetas. Vamos a ver, por ejemplo, el cómo poner su superíndice y su índice, ¿vale? Por ejemplo, vamos a poner la fórmula química del agua, ¿vale?
00:17:48
Ponemos un párrafo nuevo y decimos la fórmula química del agua es H. Recuerdo que el 2 es el subíndice, pues entonces pondríamos una etiqueta que sería sub.
00:18:05
¿Vale? Dos y el otro. Uy, el otro. ¿Vale? Y fijaros que nos aparece ese subíndice. ¿Vale? Y de la misma forma lo podríamos hacer para el superíndice. ¿Vale?
00:18:22
En este caso ponemos otra vez otra etiqueta de párrafo y ponemos el 13.000 en notación científica es 13 por 10 y ponemos sub 3, ¿vale?
00:18:38
Y fijaros que nos aparece el 3 en exponente, ¿vale?
00:19:11
Y por último, vamos a ver la etiqueta SPAM, ¿vale?
00:19:16
Y aquí voy a hacer un inciso o una parada para que distingamos entre lo que es una etiqueta SPAM y una etiqueta P, ¿vale?
00:19:25
Porque la SPAM en determinado momento se puede utilizar como una etiqueta de párrafo, ¿vale?
00:19:33
Pero para que veáis la diferencia, fijaros que si yo ahora aquí meto una etiqueta spam, y pongo este es un nuevo párrafo, fijaros que cuando yo ahora si hago un enter y añado una nueva etiqueta spam,
00:19:37
y pongo este es un segundo párrafo, fijaros como ese spam me aparece justo a continuación, no me aparece realmente como párrafo, ¿vale?
00:20:02
¿Esto por qué? Pues esto es porque la etiqueta spam siempre se autocompleta de forma horizontal, es decir, que no es como el párrafo que te va a ocupar siempre todo el ancho de la web, ¿vale?
00:20:21
No es como la etiqueta P. Por lo tanto, tenemos que saber cuándo utilizar la etiqueta SPAN y cuándo utilizar la etiqueta P. ¿Vale?
00:20:31
Si queremos que ocupe todo el ancho de la web, siempre va a ser una etiqueta P. ¿Vale?
00:20:38
Ventaja, que nosotros dentro de las etiquetas P podemos utilizar etiquetas SPAN. ¿Vale?
00:20:43
Entonces, fijaros, si yo ahora mismo este SPAN lo modifico y pongo una P, ¿vale?
00:20:48
Ahora el segundo párrafo se me ha ido abajo, ¿vale? Pero yo podría coger esto, cortarlo y pegarlo aquí, ¿vale? Y fijaros que me está apareciendo, ese span me está apareciendo dentro de un párrafo, ¿vale?
00:20:54
Y yo ahora a ese span le puedo meter, puedo editarlo, ¿vale? Y por ejemplo le puedo cambiar el color, ¿vale? Entonces yo podría poner aquí el atributo style, ¿vale? Y en entrecomillado pondría color, dos puntos.
00:21:09
Y fijaros que aquí me aparecen un montón de colores que yo puedo elegir, ¿vale? Pues yo qué sé, pues dar magenta, ¿vale? Y al elegir el dar magenta, pues veis como aquí me aparece y me cambia el color, ¿vale?
00:21:26
Bueno, esto sería en cuanto a una edición básica de texto, un formateo básico de texto. Luego vamos a entrar un poco más en detalle, bueno, un poco más en detalle, nos vamos a ver más formatos de texto en un siguiente vídeo, ¿vale? Para no acumularlo todo en un vídeo largo.
00:21:43
- Autor/es:
- Fernando Martínez Martí
- Subido por:
- Fernando M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 111
- Fecha:
- 2 de noviembre de 2020 - 21:48
- Visibilidad:
- Público
- Centro:
- IES EL BURGO - IGNACIO ECHEVERRÍA
- Duración:
- 22′ 07″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 307.30 MBytes
