Estás aquí: Inicio ‣ Módulo 3:Trabajar con texto en HTML5
Castellano | Català
Cualquier idea, simple o complicada, se expresa en palabras. De la misma forma, un sitio web o proyecto online de lo que sea, necesita un texto. Incluso, aunque preparemos un video, el eje del discurso acabarán siendo las palabras.
Hay pocas cosas en este planeta con tanto poder como las palabras.
Y en Internet son muchos los que han teorizado y explicado hasta la saciedad que el contenido es el rey. Google, por ejemplo, indexa el texto de todas las webs del mundo para presentarnos las páginas, de forma orgánica, según la calidad del texto escrito. ¿La calidad? Y la cantidad ¿no es importante? Lo es, pero menos. Con algoritmos matemáticos Google consigue saber hasta que punto tú sabes de lo que dices saber. Y según la veracidad de esto, (si no lo has copiado de ninguna parte y se trata de contenido original al menos, aparentemente) te pondrá más arriba o más abajo en las páginas de búsqueda.
Además, un texto maquetado con criterio, con las etiquetas HTML adecuadas, será destacado por el buscador y, en consecuencia, encontrado por aquellos que están buscando esa información.
Necesitamos, por lo tanto, escribir bien, textos originales y, además, saber usar las etiquetas HTML que procesan ese texto. De escribir bien, aquí, no podemos enseñarte. Pero de etiquetas, sí. No son tantas. Y son muy sencillas.
Presentamos aquí el módulo 3 del Nivel Básico.
El texto normal. Agrupaciones de contenido
Los elementos de cabecera
Etiquetas semánticas
Las secciones de una buena página HTML5
Un editor de texto HTML: la mejor opción
Trabajando con Sublime Text: introduciendo contenidos
Resumen y ejercicios prácticos
Todo texto, por defecto, debe de incluirse en un párrafo. El estilo básico de todo un sitio web viene definido por este estilo de párrafo, que rige por excelencia todo su contenido textual.
Para definir un párrafo usaremos la etiqueta <p> para abrir el párrafo y la etiqueta </p> para cerrar.
Nunca debemos olvidarnos de cerrar lo que abrimos, tal como ya hemos aprendido en el Módulo 1 (la misma etiqueta que abre, tiene que cerrar).
Seguramente ya habrás oido hablar de la etiqueta <div>. Es fundamental en toda página web. Una página web, generalmente, está llena de <div>.
Un <div> crea un contenedor en una página web.
El <div> no es una etiqueta semántica, por lo tanto el contenido de un <div> no tiene ninguna relevancia especial. Es, simplemente, un espacio (delimitado por la etiqueta que abre y la que cierra) en el que podemos incluir muchas cosas: palabras, párrafos, grandes o pequeñas secciones, imágenes, videos, etc.
Es fundamental cerrar los <div> (es fácil olvidarse :-( Por causa de la propia lógica del lenguaje HTML, un <div> sin cerrar provoca un descalabro considerable ya que los navegadores entienden que aquel contenedor no ha terminado y, por lo tanto, lo unen al siguiente, consiguiendo resultados absurdos, estresantes para el desarrollador y que incitan al "Cerrar página" al visitante.
Estos cuatro <divs> de arriba son dinámicos. Si actualizas la página ahora, verás que su tamaño se modifica. Este efecto es porque se ha aplicado al <div> una senzilla animación en Javascript. Más adelante -si resistimos tanto tú como yo- ya lo veremos.
Hemos definido un <div> mayor, de color gris, al que hemos colocado una imagen.
Para diferenciar un texto citado de otra fuente, usaremos la etiqueta <blockquote>.
De la misma forma, claro está, debemos colocar una etiqueta para cerrar: </blockquote>.
Ejemplo de blockquote Aquí esta la cita de un texto copiado de otra fuente. Puede ser muy extenso, o poco extenso. Conviene poner de donde lo hemos extraído. Fuente: tal página o tal otra
Ejemplo de blockquote
Para hacer la típica lista de ítems, uno debajo del otro, usamos la etiqueta <ul>.
Siempre vigilamos que, si la hemos abierto, tenemos que, obligatoriamente, cerrarla. Perdona la insistencia pero éste es un principio básico y, por experiencia, muy fácil de olvidar.
Ejemplo de lista sin orden Podemos tener tres cosas: Salud Dinero Amor Fuente: Muchos lo dicen...
Ejemplo de lista sin orden
Cuando queramos que la lista de ítems sea ordenada, con números correlativos, usamos la etiqueta <ol>.
No hace falta que escribamos ningún número, puesto que el lenguaje HTML los va colocando por nosotros, aunque tengamos centenares de ítems y, ¡sin equivocarse nunca! Es estupendo cuando las máquinas trabajan para nosotros.
Si lo desamos, podemos hacer listas con números romanos. En otro nivel del curso, veremos como se hace.
Ejemplo de lista ordenada con número romanos Salud Dinero Amor HTML5 Fuente: El cuarto elemento de la vida :-)
Ejemplo de lista ordenada con número romanos
Para indicar cada uno de los ítems de una lista, sea ordenada o no, usamos la etiqueta <li>.
Perdona: acuérdate de cerrarla, siempre :-)
Cuando queramos indicar que cambiamos de tema entre párrafos de una sección o artículo, usamos la etiqueta <hr>.
Ésta es de las pocas etiquetas que hace lo que hace, sin necesidad de cerrarse. No existe etiqueta de cierre, ni le hace falta. Es una de las pocas excepciones del lenguaje HTML.
Ejemplo de cambio de tema Aquí va el primer tema. Aquí va el segundo tema. Fuente: Sin fuente
Ejemplo de cambio de tema
Las entidades HTML son combinaciones de letras y símbolos que usaremos cuando queramos mostrar en pantalla algunos códigos especiales o grafías que no pertenecen al alfabeto latino internacional.
Un ejemplo de entidades son todas las letras con acentos, diéresis, cincunflejos, etc. También lo son algunos signos de puntuación o tipográficos y símbolos especiales que puden presentar un problema en HTML como las etiquetas de inicio y fin del propio código HTML < ó >, que podrían malinterpretarse y leerse como el inicio de una etiqueta.
La mayoría de letras con acentos y signos más usados, en HTML5 las podemos escribir tal cual y los navegadores más modernos ya sabrán interpretar bien estas entidades; navegadores más antiguos no sabrán representarlas y veremos cosas feas como estas:
Estos códigos pueden mostrarse como un código numérico aunque es más usual utilizar el nombre de entidad.
Para que la entidad funcione, debemos "encerrarla" en una etiqueta que abre y una que cierra, como siempre. En realidad no son etiquetas tal como ya hemos estudiado, pero tienen el mismo valor: abren la entidad y cierran. Estos símbolos son & y ;. De este modo, < se escribirá como < o <
Si quieres saber todas las entidades: Entidades HTML5
Los elementos de cabecera establecen los seis niveles básicos de títulos y subtítulos en un documento.
Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica.
Un elemento de cabecera describe brevemente el tema de la sección que introduce.
Según la hoja de estilos CSS que estemos usando, el aspecto de estas cabeceras podrá variar mucho, pero se aconseja que siempre se usen las jerarquías semánticas establecidas por el estandard HTML: el número despues de la <h indica el orden de relevancia del contenido.
Es el título principal de una página HTML. Se aconseja que haya una sola frase etiquetada como <h1>. Google la considera el título de la página. Y de título, solo debe haber uno.
Son los títulos de secciones principales dentro de una página. En torno de los <h2> se estructura todo el contenido.
Son los subtítulos de cada <h2>.
Estas tres etiquetas indican apartados cada vez menores. Pueden representar diferentes niveles de información, según se haya definido en los estilos del sitio web o de la publicacioón online.
La evolución de los estándares del lenguaje HTML ha tendido con los años a conseguir cada vez más un lenguaje semántico, es decir: las propias etiquetas indican a los buscadores la relevancia de cada fracción del texto, así como sus jerarquías e interelaciones.
Usamos la etiqueta <strong>
Es bien sabido que la negrita, llamada bold en inglés, representa un texto especialmente importante.
Usamos la etiqueta <em>
Representa un texto enfatizado, como un acento de intensidad. Lo usaremos para citas textuales en otro idioma y para la mención del nombre de un libro, publicación, etc.
Usamos la etiqueta <small>
La usaremos cuando queramos hacer un comentario aparte, para textos menos relevantes que el texto principal etiquetado entre dos etiquetas <p>. Podemos usar la etiqueta <small> para notas aparte, en definitiva para textos que no son esenciales para la comprensión del documento.
Más adelante veremos como, con toques de diseño con nuestro apreciado CSS, podemos aumentar el cuerpo y cambiar las características de esta etiqueta.
Ejemplo de texto small Es un texto más pequeño, ya predefinido por el estandar HTML. Si cambiamos su diseño, conviene no olvidar que este texto debe ser más pequeño que el cuerpo del texto normal, definido en <p> Fuente: Sin fuente
Ejemplo de texto small
Usaremos la etiqueta <sub> para los subíndices.
Usaremos la etiqueta <sup> para los superíndices.
Ejemplo de índices Subíndices Se usan para algunos textos especializados1 que requieren de citas2 Superíndices Se usan para valores de exponentes en matemáticas, grados de temperatura y también en textos especializados3. a2 = b2 + c2 El agua hierve 100o centígrados. 1) Valor del 1 2) Valor del 2 3) Valor del 3
Ejemplo de índices
Subíndices
Superíndices
Representa texto sin un significado específico. Lo usaremos cuando queramos aplicar a una palabra o frase algún estilo específico en CSS, sin tener que usar negrita, cursiva, ni ningúna otra estiqueta concreta.
La forma de subrallar las palabras del párrafo de arriba ha sido usando la etiqueta <span>.
Cuando queramos hacer un salto de línea sin cambiar de párrafo, usaremos la etiqueta <br>. Es muy importante usarla cuando hemos definido en los estilos de texto una separación para marcar los párrafos (algo totalmente recomendable en procesamiento de texto.)
Aplicando un <br> entre dos líneas, la segunda línea quedará pegada a la línia antecedente, sin que se marque la separación de párrafo.
Esta etiqueta es otra rara excepción: no necesita cerrarse, por lo que no existe su etiqueta de cierre.
Ejemplo de salto de línea 2 párrafos diferentes Párrafo 1. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo. En este caso hemos colocado una etiqueta </p> de cambio de párrafo Párrafo 2. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo. Los mismos párrafos, pero con salto de línea Párrafo 1. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo. En este caso hemos colocado una etiqueta <br> Párrafo 2. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo.
Ejemplo de salto de línea
2 párrafos diferentes
Párrafo 1. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo. En este caso hemos colocado una etiqueta </p> de cambio de párrafo
Párrafo 2. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo.
Los mismos párrafos, pero con salto de línea
Párrafo 1. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo. En este caso hemos colocado una etiqueta <br> Párrafo 2. Texto que muestra la diferencia entre un salto de línea y la separación de párrafo.
Todas las etiquetas que veremos en este apartado son, en realidad, <div> a los cuales el estandard HTML les ha ido asignando un nombre propio, debido a la función concreta que desempeñan. Buena parte de estas etiquetas son específicas del HTML5. Se trata de un avance inteligente que ha ido dotando de valor semántico a estas etiquetas HTML, antes insulsas, puramente arbitrarias.
Toda figura humana tiene cabeza, cuerpo y pies.
Basándose en esto tan intuitivo, las páginas HTML se estructuran en estas tres partes, con las etiquetas llamadas por el nombre en inglés: header, body y footer.
Es recomendable que una página web tenga un solo par de etiquetas <header>, un solo par de etiquetas <body> y un solo par de etiquetas <footer>, de la misma forma que una persona acostumbra a tener una cabeza, un cuerpo y un conjunto formado por dos pies.
Define la cabecera de una página. Acostumbra a contener:
Por ser un elemento repetitivo (normalmente, en un sitio web, todas las páginas tienen la misma cabecera), convendrá usar el lenguaje avanzado de PHP, el chef de cocina de nuestro CMS, para que, con una sola página PHP, podamos actualizar todas las páginas del sitio. De esta manera, si hubiera que cambiar, por ejemplo el logotipo o el menú, con un solo cambio, se actualizaría todo el sitio web. Pero esto, ya lo veremos más adelante.
Contiene el cuerpo de una página web, el contenido principal de cada documento HTML.
Aunque se subdivida en muchas secciones y divs, solo tendremos un <body> en un documento.
Define el pie de cada página. Acostumbra a contener:
Por ser un elemento repetitivo (normalmente, en un sitio web, todas las páginas tienen el mismo pie), convendrá usar el lenguaje avanzado de PHP, el chef de cocina de nuestro CMS, para que, con un solo elemento, podamos situarlo al pie de todas las páginas del sitio. De esta manera, si hubiera que cambiar, por ejemplo un teléfono o otro detalle pequeño, con un solo cambio, se actualizaría todo el sitio web. Esto también lo veremos más adelante.
Tal como indica la palabra, define el contenido principal en el documento, y se encuentra dentro del <body>. Existe sólo un par de etiquetas <main> en un documento.
Define una sección en un documento.
Define un <div> especial que solamente contiene menús con enlaces de navegación.
Define contenido autónomo que podría existir independientemente del resto del contenido.
Define contenidos poco relacionados con el resto del contenido de la página. Si se quitara, el contenido restante seguiría teniendo sentido.
Cuando escribimos y procesamos texto en un Word (aunque no nos demos cuenta), el programa va escribiendo, de forma oculta, un código propietario que nosotros no controlamos ni conocemos.
Un misterio. Propiedad de ellos.
Como ya hemos visto, en el editor de texto de un CMS, por el contrario, el sistema está escribiendo, por detrás, el código HTML. ¡Fantástico! Sin misterios y con firmeza. Sabemos lo que hacemos.
Ese código que fue creado, lo podemos ver clicando en la pestaña correspondiente (varía un poco según el CMS, pero son básicamente iguales). De esta forma, a medida que escribimos, el código se va añadiendo "por debajo".
Veremos cómo hacerlo en el video siguiente.
Entonces, si el editor ya edita el código, ¿para qué conocer HTML?
Escribir sin mirar “lo que hay debajo” nos puede traer muchos dolores de cabeza, puesto que a menudo tendremos etiquetas que no cierran, saltos de línea excesivos, cosas que se desplazan de la posición deseada, etc. Si no sabemos como “repararlo” estaremos perdidos, pues necesitaremos, a cada momento, o a un buen amigo con paciencia que nos eche una mano o a un desarrollador web que nos va a cobrar por ello. Y, a menudo, el problema no es tanto el precio -puesto que han bajado mucho- sino el tiempo que perderemos que, casi nunca, lo tendremos.
Además de esto, otro grave problema al que se enfrentan muchos profesionales al introducir textos en su CMS es que, normalmente, no se escribe directamente en el editor de texto sino que se usa Word, u otros programas de procesamiento de texto, como LibreOffice, etc. Y lo que se hace es usar el útil copiar y pegar. También se copia y pega de otras páginas web.*
Al copiar texto desde esos programas (y mucho peor desde la web) se nos pueden copiar etiquetas miles que te harán poner los pelos de punta, ya que tendrás que uniformizar el aspecto del texto y conseguir que te obedezca. Y eso, sin saber HTML, es casi imposible. De nuevo estarás perdido y angustiado.
* ¡Cuidado con copiar sin citar las fuentes! Conviene tener cuidado en respetar los derechos de autor. Primero por ética y, después, para que Google no penalice nuestra pagina por contener contenido duplicado.
Otra opción es decir: No pasa nada. Y vivir tranquilos.
¿Tranquilos?
No tan tranquilos, porque nuestra imagen online caerá en picado.
Para que nuestro proyecto online esté presente en Internet, además de muchísimos otros requisitos, necesitamos demostrar que somos cuidadosos con los demás.
Es como aquella persona que sabe mucho, pero te habla demasiado cerca y le huele mal el aliento. ¡Es de burros pensar que el aliento solo les huele mal a los otros :-) y a nosotros, nunca!
Por lo tanto, si la cantidad de texto no es muy grande, es más rápido y más fácil acostumbrarse a escribir directamente el código en un buen editor de texto, como Sublime Text, y después de verificado, copiarlo en el editor de textos de nuestro CMS (WordPress, Joomla, Prestashop, etc.).
Esto es lo que pretendo continuar enseñándote en este módulo.
Si la cantidad de texto es considerable, entonces no tendremos más remedio, si queremos ser productivos, que usar una combinación inteligente de varios mecanismos y programas. El proceso puede resumirse en los siguientes pasos:
** En Wordpress además de página también puede ser una entrada. En Joomla, se tratará de un nuevo artículo o módulo.
IMPORTANTE: La página actual para descargar el programa no es la que aparece en el video. La página actual para descargar la versión 2 del programa es esta: Descarga Sublime Text 2
Pero mejor será que descargues la versión 3, que es más ágil y actualizada: Descarga Sublime Text 3
Recordemos aquí el video sobre Sublime Text del módulo anterior. Si lo tienes fresco, puedes saltarlo, y ver el video siguiente.
Estoy con muchas cosas y me falta tiempo para terminar este curso. Pido disculpas... En el primer video anuncié que iba a publicar un módulo cada semana :-) Optimista!!!. Éste es un problema que acostumbro a tener: calculo que todo será más rápido, pero después, en la práctica, no me gusta hacer nada con prisa, tipo más o menos, y el tiempo va pasando, impasiblemente implacable.
Perdón!
Espero terminar el video pronto.
Un saludo, apreciado lector.
Puedes hacer un comentario de este módulo. Como estamos preparando el material siguiente, nos ayudará mucho tu opinión, si es sincera.
¡Seguimos!
El curso tiene 21 módulos, estructurados en 3 niveles:
Nivel básico: Los primeros 7 módulos. Nivel medio: Los 7 módulos siguientes. Nivel avanzado: Los últimos 7 módulos.
También puedes comentar en:
Este artículo lo ha escrito Josep Massó i Carreras (de pequeño, en casa y en la escuela me llamaban Pep). Me dedico al diseño y desarrollo web. Trabajo para mejorar la presencia en internet de empresas, federaciones, fundaciones, profesionales, autónomos...
Hay tres ámbitos que me apasionan:
“Cuida tu presencia en Internet.”
Sé ético y generoso(lo que plantamos hoy es lo que, tarde o temprano, acabaremos recogiendo).
© 2019 Cros i Massó