Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En este video aprenderemos como añadir abreviaciones, direcciones, y más
En ocasiones necesitaremos añadir siglas o abreviar alguna palabra, y cuando hagas eso podrás usar la etiqueta abbr
Que significa en ingles abbreviation, o abreviación
Vamos a escribir un pequeño párrafo, para ver cómo se usa
Escribimos la etiqueta de párrafo y la cerramos, dentro de ella escribimos
Cuando eres mayor de edad puedes obtener un DNI
Y tenemos aquí unas siglas, que son DNI, así que vamos a colocar DNS dentro de la etiqueta para abreviaciones
Así que escribimos antes de DNS la etiqueta abbr y la cerramos justo después de DNI
Así que si guardamos, regresamos al navegador y refrescamos, podremos ver que tenemos nuestra nueva frase
Que dice cuando eres mayor de edad puedes obtener un DNI
Y aparentemente no hay nada especial con las siglas DNI, además de que esta en mayúsculas, pero eso es algo que nosotros hicimos por nuestra cuenta, colocarlo en mayúsculas
Esto quiere decir que la etiqueta abbr, es usada más que todo para añadir sentido semántico a nuestro documento
Opcionalmente, podríamos añadir el significado de las siglas usando el atributo title dentro de la etiqueta abbr
Así que vamos a nuestro editor y añadamos dentro de la etiqueta de apertura abbr el atributo title
Y vamos a colocar el significado de DNI, entre comillas colocamos el significado que en este caso es Documento nacional de identidad
Guardamos el documento, regresamos al navegador y refrescamos la página
Y como puedes ver nada luce diferente en un principio, pero si nos colocamos sobre las siglas DNI podrás que el atributo title se refleja, mostrándonos el significado de estas siglas
Lo siguiente en aprender es la etiqueta de direcciones físicas, o la etiqueta adress
Esta etiqueta se usa para añadir información de contacto
Vamos a regresar a nuestro editor de texto
Y vamos a crear un pequeño espacio aquí, para añadir nuestra etiqueta
Ahora colocamos nuestra etiqueta, y la cerramos
Y dentro de ella, vamos a colocar alguna información, vamos a colocar por ejemplo, nuestro nombre
Vamos a decir que vivimos en la calle 123 ejemplo, en la ciudad de valle tutorial
Y guardamos el documento
Regresamos al navegador y refrescamos la página
Y nada luce realmente especial con esta dirección, además de que se encuentra en cursiva
Podríamos hacer que se vea mejor, modificando su formato
Así que regresamos al editor de texto
Y vamos a añadir algunos saltos de línea, para ello usaremos una etiqueta llamada br
Que es una etiqueta vacía, es decir que no necesitamos colocar una etiqueta de cierre
Vamos a añadir esta etiqueta br al final de nuestro nombre, luego al final de nuestra dirección
Y no la añadiremos en la ciudad ya que de hecho no hay nada después de la ciudad así que no la necesitamos ahí
Y al regresar al navegador y refrescar
Podremos ver que ahora la dirección tiene saltos de línea, que coloca cada elemento de la dirección en una línea diferente
Ahora, si la etiqueta address se encuentra directamente dentro de la etiqueta body, como es en este caso
Puedes ver que la etiqueta address se encuentra directamente dentro de la etiqueta body
En este caso, esta información de contacto, sería la información de contacto de todo el documento
Pero si se encuentra dentro de otro elemento, por ejemplo si tenemos una lista de empleados, y colocamos sus direcciones a cada uno, entonces la información de contacto estaría relacionada únicamente con esa persona
Y no con el documento completo
Luego tenemos la etiqueta cite, esta etiqueta representa el nombre de un producto, por ejemplo
Un libro, una película, una canción o incluso cosas más específicas como el guion de un programa de televisión, el reporte de un caso legal,
Su uso puede ser bastante amplio
Así que vamos a escribir algún texto para ver cómo funciona en la práctica
Vamos a colocarnos bajo nuestra etiqueta address
Colocaremos un etiqueta p y la cerramos,  dentro colocamos un texto que dira en este caso
Mi libro favorito de Pablo Neruda es: Veinte poemas de amor y una canción desesperada
Ahora podemos añadir la etiqueta cite en esta oración, la añadiremos en el nombre del libro
Así que nos colocamos en el inicio del nombre de libro y colocamos la etiqueta cite y la cerramos al final del nombre del libro
Y si regresamos al navegador  y refrescamos la página
Podrás ver que ahora tenemos ese párrafo aquí
Que dice, mi libro favorito de pablo Neruda es veinte poemas de amor y una canción desesperada
Y puedes ver que el título del libro se encuentra en cursiva
Esto es un estilo añadido por el navegador, es el estilo por defecto que aplica a la etiqueta cite
Finalmente aprenderemos sobre la etiqueta wbr
La cuál representa un punto de quiebre en una palabra
Esto sirve cuando por ejemplo, tienes una palabra o una URL muy larga
Así que vamos a colocarnos después de nuestra última oración
Y digamos que tenemos la dirección de un sitio web muy larga, por ejemplo unsitiowebconunnombrededominiomuylargo.com
Entonces podemos añadir la etiqueta wbr en medio por ejemplo de este dominio
Vamos a colocarlo entre nombre y de dominio
De esa forma añadimos la etiqueta wbr, que es una etiqueta vacía, y no necesita una etiqueta de cierre, al igual que la etiqueta br
Guardamos nuestros cambios, regresamos al navegador y refrescamos
Y como puedes ver, ahora tenemos nuestro párrafo con la dirección de dominio bastante larga
Pero no tiene ningún salto de línea, eso es debido a que la etiqueta wbr no siempre añadirá un salto de línea, como lo hace la etiqueta br
Si aquí no tuviéramos más espacio horizontal para mostrar toda esta dirección, entonces la etiqueta wbr entraría en acción y añadiría un salto de línea, partiendo la dirección tal y como se lo hemos indicado
La partiría entre nombre y de dominio
Ya que es ahí donde colocamos la etiqueta wbr
Esta etiqueta no se usa muy regularmente
Pero es importante que la conozcas, por si en algún momento te encuentras en una situación como esta.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image