¡Nos movemos hacia adelante y hacia arriba para hacer que HTML y HTML5 entren sólidamente en la materia gris entre sus oídos! En este magnánimo tutorial de HTML, cubriremos muchas características relacionadas con el texto para darle a su contenido en línea esa salsa especial. Algunas personas optan por la salsa Peppery Sriracha, mientras que yo creo que iré con Franks Red Hot. ¿Has probado esas cosas en Bacon? ¡Es impresionante! Ahora que sus papilas gustativas están preparadas, ¡sigamos con el texto en HTML!
Trabajar con saltos de línea HTML
El navegador generalmente será el factor determinante sobre dónde ajustar las líneas de texto en su página en función del tamaño del dispositivo que mira el contenido, el CSS en uso, el tamaño de los caracteres, etc. Si prefiere tener más control sobre cómo sucede esto, puede insertar su propio salto de línea haciendo uso de la confiable etiqueta <br> . Seguramente ha utilizado esta técnica al intentar formatear su texto.
En este pequeño fragmento de HTML aquí, veremos cómo el navegador maneja la poesía fluida y observaremos dónde se ajustan las líneas. Una vez completado, podemos insertar una etiqueta <br> después de cada punto de la prosa para ver qué sucede. Observe el saltamontes.
Pon tu frase
Los elementos de frase pueden marcar el texto en el documento según su caso de uso. Al hacer esto, el navegador y los motores de búsqueda comprenden mejor el significado semántico de los elementos, que de otra manera no se verían evidentes en la visualización de la página web. Usted está familiarizado con estos, por supuesto, al ser testigo del gran uso de negrita, énfasis y otras etiquetas de frase. A continuación, se muestra un fragmento de algunos elementos de frase utilizados con frecuencia en HTML.
¡Oye, eso es genial! Sí, sí, es mi amigo. Como puede ver aquí, esta es una pantalla básica. No hay nada como la belleza de un fragmento de HTML renderizado en el navegador sin absolutamente ningún estilo. Al usar la frase elementos en HTML, podemos dar significado a los elementos, separados de la visualización de dichos elementos. Ahora, por supuesto, puede diseñar cualquiera de estos elementos al contenido de su corazón, de la misma manera que lo hace el increíble Twitter Bootstrap Framework , pero en este caso simplemente estamos teniendo una revisión amistosa de lo que está disponible en HTML básico.
Controlando la fuente
HTML le brinda la capacidad de controlar muchas cosas sobre la fuente del texto en la página, incluso sin CSS. Por qué querrías hacer esto? En realidad, no estoy seguro, CSS es la forma mucho más poderosa de hacer algo como esto, pero HTML proporciona esta capacidad, así que lo veremos. En realidad, puedo pensar en uno realmente interesante y asombroso, y esa es la etiqueta <s> Strikeout </s> . Veamos ahora todas las otras opciones disponibles para nosotros.
Así que ahí lo tienes, puedes ver que tenemos varias formas interesantes y significativas de marcar la fuente en la página web cuando sea necesario.
Utilice la marca para resaltar el texto
Es posible que haya visto esta técnica utilizada en todas esas páginas de ventas de una página de mierda en Internet. Conoces los que te dan diez millones de razones por las que necesitas su widget / producto de información / artículo inútil, y todas las demás líneas de texto están resaltadas con un fondo amarillo. Bueno, amigo, ahora tendrás la capacidad de ser igual de molesto haciendo un uso generoso de la etiqueta html <mark> </mark> . Simplemente lo agregaremos a un HTML existente de antes y veremos qué sucede.
¡Usando encabezados en su página web!
Los encabezados son una manera fantástica de agregar estilo a su contenido, además de decirle a los motores de búsqueda qué es importante en su página web. Los diversos encabezados asignan diferentes tamaños en función de cuál de las seis opciones de encabezado disponibles utilice. El encabezado es un elemento de nivel de bloque y puede incluir otros elementos de nivel de bloque si es necesario. Vea las seis opciones aquí.
Si utiliza correctamente los diferentes encabezados, se asegurará de que la página web siga un esquema o una jerarquía útil. Una vez más, esta estructura ayuda tanto al lector como a los motores de búsqueda a digerir correctamente su contenido al máximo.
Comillas y citas en HTML
Las citas y las comillas son comunes en la industria de la publicación web. Es fácil agregarlos directamente al HTML usando el elemento <q> en su página. El beneficio es que agrega un significado adicional a la cita más allá de la presentación en la página, al igual que los muchos elementos de Frase que vimos anteriormente.
Rocas de texto preformateado
Si programa en PHP, probablemente esté familiarizado con la práctica etiqueta <pre> . Al usar la etiqueta <pre> en las pruebas, la salida de la matriz y la salida del objeto al navegador se vuelven mucho más legibles. En este caso, solo estamos analizando el uso de la etiqueta <pre> en algunos HTML. Lo que hace es básicamente desactivar la compresión automática de espacios en blanco que tiene lugar en el navegador al renderizar HTML. De esta manera, puede crear algún texto en el editor que se mostrará en función de cómo configuró exactamente el contorno utilizando el espacio en blanco incluido. Verás esto a menudo cuando la gente usa caracteres de texto para crear ilustraciones geniales.
Notarás que el código anterior no tiene etiqueta <pre> . La primera captura de pantalla muestra que el navegador golpea nuestro formato de texto, pero si agregamos la etiqueta <pre> al HTML, el resultado es bueno.
Tipos de lista en HTML
HTML proporciona buenas formas de presentar contenido en listas. En este ejemplo, echaremos un vistazo a las listas ordenadas, las listas desordenadas, así como a la lista de definiciones infrautilizada.
Podemos ver cómo se muestran estos elementos en el navegador aquí. Nuevamente, esto es HTML básico, por lo que la presentación es un poco sosa. En la naturaleza, la mayoría de los diseñadores web usarán CSS para hacer que los elementos de la lista se vean súper elegantes. A menudo, los elementos de la lista se utilizan simplemente como elementos organizativos, y el CSS que se les aplica oculta su lista real como la naturaleza.
Controlar la dirección del texto en HTML
Aunque probablemente no exista una gran necesidad de controlar la dirección del texto cuando se usa el inglés en su sitio web, puede ser útil para otros idiomas como el hebreo. En este caso, el texto se escribe de izquierda a derecha. ¡Confuso si me preguntas! Al establecer la etiqueta bdo, o anulación bidireccional, el texto aparecerá invertido en la página. Veamos los resultados al aplicar esto a algún HTML existente.
Sugerencia de salto de palabras
Puede haber ocasiones en las que desee controlar cómo se ajusta una cadena larga de texto en la página. Puede hacer esto con suaves guiones o la etiqueta <wbr> . La diferencia es que el soft hypen & shy; romperá la cadena y agregará un guión en el punto de ruptura. La etiqueta <wbr> divide la palabra en el punto especificado, sin agregar un guión. Puede probar esto en su HTML y ver el resultado.
Personajes de Ruby
Ruby es un lenguaje de programación súper popular con una amplia aceptación debido al marco de Ruby on Rails. Sin embargo, este Ruby no se refiere al lenguaje de programación. En este caso, Ruby Characters se refiere a anotaciones que muestran la pronunciación. HTML tiene una etiqueta <ruby> que le permite hacer uso de estas anotaciones en su página web.
0 Comentarios