diegoofernandez
Beta
Redactor
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
SOBRE ESTE CURSO
Hace unos meses he decidido, dejar de programar profesionalmente por periodo de tiempo indefinido, pero para mantenerme un poco en "forma" y por que creo que el conocimiento debe compartirse, he decidido realizar esta serie de tutoriales, ojalá a alguien le sea de utilidad o los pueda aprovechar.
INDICE
Formato de texto. Estilo negrita e italic y texto subrayado
Continuamos estudiando distintas formas de darle un formate a los párrafos y textos de nuestro sitio web.
En la clase de hoy vamos a ver como darle un estilo de negrita a nuestros párrafos, y también veremos como crear texto con estilo italic y con texto subrayado.
Texto en negrita.
Para lograr este objetivo, HTML nos provee dos etiquetas que tienen el mismo objetivo, dar formato negrita a nuesto texto, pero que entre si, estas etiquetas <strong> y <b> tienen una diferencia semántica.
A la etiqueta strong la utilizamos para indicar que el texto es fundamental o semánticamente importante para el texto circundante, en cambio, con b, no indicamos tal importancia y simplemente representamos un texto en negrita en pantalla.
Para entenderlo mejor, imaginemos que un programa de conversión de texto a voz va a leer nuestro texto, y este programa al leer la parte del texto rodeado con la etiqueta b no diría las palabras de manera diferente a cualquiera de las otras palabras del texto que no están rodeadas con la etiqueta b, es decir, no le agregaría ningún énfasis en la pronunciación. Sin embargo, al utilizar la etiqueta strong, el mismo programa diría esas palabras con un tono de voz diferente para transmitir que el texto es importenta de alguna manera.
Veamos un ejemplo de ambas etiquetas:
Esto dará el siguiente resultado:
Como vemos, visualmente ambas etiquetas nos formatean el texto específico en negrita, sin embargo, como mencionamos enteriormente, la interpretación de las mismas por parte del navegador es distinta. Lo recomendado hoy en día es utilizar solamente la etiqueta strong.
Texto en italic.
Al igual que con el caso de dar formato en negrita, también tenemos dos etiquetas para dar formato italic a nuestro texto, y estas son <em> e <i>.
¿Cual es la diferencia? em se utiliza para indicar que el texto debe ser mejor tratado, que debe tener un énfasis adicional, mientras que i, simplemente formateara el texto en italic sin indicar ese énfasis mayor en el mismo.
Veamos un ejemplo de ambas etiquetas:
Esto dará el siguiente resultado:
Como vemos el resultado visual con ambas etiquetas es el mismo, pero lo recomendable en la actualidad es usar solamente em.
Texto subrayado.
Con las clases que venimos viendo, y con los ejempos de esta misma clase, subrayar texto en nuestros documentos HTML se nos hace realmente sencillo, solo tenemos que conocer la etiqueta específica para esta tarea, la cual es: <u>, y la forma de usar la misma es identica a los ejemplos realizados aquí arriba, veamos un ejemplo:
Este código da como resultado en el navegador lo siguiente:
Espero se haya entendido, hasta la próxima 🙂
Hace unos meses he decidido, dejar de programar profesionalmente por periodo de tiempo indefinido, pero para mantenerme un poco en "forma" y por que creo que el conocimiento debe compartirse, he decidido realizar esta serie de tutoriales, ojalá a alguien le sea de utilidad o los pueda aprovechar.
INDICE
Formato de texto. Estilo negrita e italic y texto subrayado
Continuamos estudiando distintas formas de darle un formate a los párrafos y textos de nuestro sitio web.
En la clase de hoy vamos a ver como darle un estilo de negrita a nuestros párrafos, y también veremos como crear texto con estilo italic y con texto subrayado.
Texto en negrita.
Para lograr este objetivo, HTML nos provee dos etiquetas que tienen el mismo objetivo, dar formato negrita a nuesto texto, pero que entre si, estas etiquetas <strong> y <b> tienen una diferencia semántica.
A la etiqueta strong la utilizamos para indicar que el texto es fundamental o semánticamente importante para el texto circundante, en cambio, con b, no indicamos tal importancia y simplemente representamos un texto en negrita en pantalla.
Para entenderlo mejor, imaginemos que un programa de conversión de texto a voz va a leer nuestro texto, y este programa al leer la parte del texto rodeado con la etiqueta b no diría las palabras de manera diferente a cualquiera de las otras palabras del texto que no están rodeadas con la etiqueta b, es decir, no le agregaría ningún énfasis en la pronunciación. Sin embargo, al utilizar la etiqueta strong, el mismo programa diría esas palabras con un tono de voz diferente para transmitir que el texto es importenta de alguna manera.
Veamos un ejemplo de ambas etiquetas:
HTML:
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</b> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>Esto dará el siguiente resultado:
Como vemos, visualmente ambas etiquetas nos formatean el texto específico en negrita, sin embargo, como mencionamos enteriormente, la interpretación de las mismas por parte del navegador es distinta. Lo recomendado hoy en día es utilizar solamente la etiqueta strong.
Texto en italic.
Al igual que con el caso de dar formato en negrita, también tenemos dos etiquetas para dar formato italic a nuestro texto, y estas son <em> e <i>.
¿Cual es la diferencia? em se utiliza para indicar que el texto debe ser mejor tratado, que debe tener un énfasis adicional, mientras que i, simplemente formateara el texto en italic sin indicar ese énfasis mayor en el mismo.
Veamos un ejemplo de ambas etiquetas:
HTML:
<p>
Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</em> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Lorem ipsum dolor sit amet, <i>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</i> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>Esto dará el siguiente resultado:
Como vemos el resultado visual con ambas etiquetas es el mismo, pero lo recomendable en la actualidad es usar solamente em.
Texto subrayado.
Con las clases que venimos viendo, y con los ejempos de esta misma clase, subrayar texto en nuestros documentos HTML se nos hace realmente sencillo, solo tenemos que conocer la etiqueta específica para esta tarea, la cual es: <u>, y la forma de usar la misma es identica a los ejemplos realizados aquí arriba, veamos un ejemplo:
HTML:
<p>
Lorem ipsum dolor sit amet, <u>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</u> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>Este código da como resultado en el navegador lo siguiente:
Espero se haya entendido, hasta la próxima 🙂
