El text normal. Agrupacions de contingut

El paràgraf

Tot text, per defecte, hem d'incloure'l en un paràgraf. L'estil bàsic de tot un lloc web ve definit per aquest estil de paràgraf, que regeix per excel·lència tot el seu contingut textual.

Per definir un paràgraf farem servir l'etiqueta <p> per obrir el paràgraf i l'etiqueta </p> per tancar-lo.

Mai no hem d'oblidar de tancar el que hem obert, tal com ja hem après en el Mòdul 1 (la mateixa etiqueta que obre, ha de tancar).

<div>, el contenedor HTML por excelencia

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.

Exemples de <div> simples, amb text:

Exemples de <div> amb color de fons:

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.

Exemple de <div> simple, amb imatge:

Hemos definido un <div> mayor, de color gris, al que hemos colocado una imagen.

Llistes

Llistes sense ordre

Per fer la típica llista d'ítems, un sota de l'altre, farem servir letiqueta <ul>.

Sempre vigilarem que, si l'hem obert, hem de, obligatòriament, tancar-la. Perdona la insistència però aquest és un principi bàsic i, per experiència, molt fàcil d'oblidar.

Exemple de llista sense ordre

Podem tenir tres coses:

• Salut
• Diners
• Amor

Fuente: Molts ho afirmen...

Llistes ordenades

Quan vulguem que la llista d'ítems sigui ordenada, amb números correlatius, farem servir l'etiqueta <ol>.

No ens caldrà escriure cap número ja que el llenguatge HTML els va colocant per nosaltres, aunque tengamos centenares de ítems y, ¡sin equivocarse nunca!

És fantàstic quan les màquines treballen per a nosaltres!

Exemple de lista sense ordre

Podem tenir tres coses:

1. Salut
2. Pau interior
3. Amor

Font: És millor pau que diners...

Si ho volem, podem fer llistes amb números romans.

Exemple de llista ordenada amb números romans

1. Salut
2. Diners
3. Amor
4. Pau

Font: Amb els quatre és millor :-)

Cada ítem de llista (ordenada o no)

Per indicar cadascun dels ítems d'una llista, sigui ordenada o no, fem servir l'etiqueta <li>.

Perdona: recorda't de tancar-la, sempre :-)

Cambio de tema

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.

Exemple de cambio de tema

Aquí va el primer tema.

---

Aquí va el segundo tema.

Font: Sense font.

Las entidades HTML

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 Exemple 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 <

Algunos Exemples de entidades

• Personaje Nombre de la entidad
• É É
• é eacute
Ê Ecirc ê ecirc
• È È
è egrave
• ⇌ ⇌
Ë Euml ë euml
• € €
• ® ®

Si quieres saber todas las entidades: Entidades HTML5

Els elements de capçalera en la web

Les capçaleres són els títols i subtítols

Els elements de capçalera estableixen els sis nivells bàsics de títols i subtítols en un document.

Mitjançant els títols, en els seus diferents nivells d'importància, podem definir l'esquelet del document, la seva estructura bàsica.

1. <h1> és el títol de major importància el qual, por defecte, es el que té un cos de lletra més gran.
2. i <h6> és el títol de menor importància (cos de lletra més petit).

Un element de capçalera descriu breument el tema de la secció que introdueix.

Segons el full d'estils CSS que utilitzem, l'aspecte d'aquestes capçaleres podrà variar molt, però s'aconsella que sempre es facin servir les jerarquies semàntiques establertes per l'estàndard HTML: el nombre després de la <h indica l'ordre de rellevància del contingut.

<h1>

És el títol principal d'una pàgina HTML. Se aconseja que hi hagi una sola frase etiquetada com <h1>. Google la considera el títol de la pàgina. Y de títol, només n'hi pot haver un!

Exemple de h1

<h2>

Són els títols de seccions principals dins d'una pàgina. Entorn dels <h2> s'estructura tot el contengut.

Exemple de h2

<h3>

Són los subtítulos de cada <h2>.

Exemple de h3

<h4>

Són els subtítulos de cada <h3>.

Exemple de h4

Les dues petites: <h5> i <h6>

Aquestes dues etiquetes indiquen apartats cada vegada menors. Poden representar diferents nivells d'informació, com peus de foto, llegendes, etc. segons s'hagi definit en els estils de la pàgina web o de la publicació online.

Exemple de h5

Exemple de h6

Etiquetas semánticas

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.

La negrita

Usamos la etiqueta <strong>

Es bien sabido que la negrita, llamada bold en inglés, representa un texto especialmente importante.

La cursiva

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.

Texto pequeño

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.

Exemple 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

Subíndices y superíndices

Usaremos la etiqueta <sub> para los subíndices.

Usaremos la etiqueta <sup> para los superíndices.

Exemple de índices

Subíndices

Se usan para algunos textos especializados₁ que requieren de citas₂

Superíndices

Se usan para valores de exponentes en matemáticas, grados de temperatura y también en textos especializados³.
a² = b² + c²
El agua hierve 100^o centígrados.

1) Valor del 1
2) Valor del 2
3) Valor del 3

L'etiqueta <span>

La farem servir per ressaltar un text en concret dintre d'un paràgraf sense ser les típiques negreta, cursiva, etc.

Podrem aplicar aquesta etiqueta a una paraula o una frase sencera, o fins i tot, a una única lletra.

La forma de canviar el color del text a les paraules del paràgraf de sobre ha esta fent servir aquesta etiqueta <span>, amb un identificador que defineixi el color:

• Una paraula ressaltada en groc.
• Una una frase sencera ressaltada en bourdeus.
• Fins i tot, una sola lletra, ressaltada en verd.

El salto de línea, sin cambiar de párrafo

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.

Exemple 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.

Las secciones de una buena página HTML5

"Divs" amb nom propi

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.

Un cuerpo tiene tres partes

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.

<header>

Define la cabecera de una página. Acostumbra a contener:

• El logotipo
• El título del sitio web
• El menú de navegación

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 Exemple el logotipo o el menú, con un solo cambio, se actualizaría todo el sitio web. Pero esto, ya lo veremos más adelante.

<body>

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.

<footer>

Define el pie de cada página. Acostumbra a contener:

• el mapa del sitio
• los derechos de autor
• algunos enlaces a información legal
• direcciones diversas, tanto dentro del sitio como fuera él.

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 Exemple 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.

<main>

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.

<section>

Define una sección en un documento.

<nav>

Define un <div> especial que solamente contiene menús con enlaces de navegación.

<article>

Define contenido autónomo que podría existir independientemente del resto del contenido.

<aside>

Define contenidos poco relacionados con el resto del contenido de la página. Si se quitara, el contenido restante seguiría teniendo sentido.

Un editor de texto HTML: la mejor opción

Pasar de código propietario a código sin misterios

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.

Podemos ver el código en nuestro CMS

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.

Pero, ¿para qué escribir nosotros el código?

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.

¡Copiar y pegar tiene sus problemas!

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.

Pero, ¡no pasa nada!

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!

Escribir texto directamente en el editor

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.

Volcado de textos desde otros programas

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:

1. Copia el texto del Word, la web o cualquier otra fuente.
2. Pégalo en tu programa de SimpleText (TextEdit, Bloc de notas, etc.) Allí, lo conviertes a "texto sin formato" (eliminarás, así, todas las etiquetas raras con las que venía de origen el texto.
3. Crea un nuevo documento en Sublime Text, pega el texto copiado y guarda el archivo con la extensión .html (si no pones la extensión, la potencia del programa no funcionará).
4. ¡Ahora toca retocarlo a placer! Aplica las etiquetas que ya has aprendido hasta ahora y, si te hace falta alguna más, pues, ya sabes, entras en Google y lo buscas. Hay de todo. Y más.
5. Cuando ya lo hayas validado, entra en tu CMS introduciendo las claves de acceso.
6. Añades una nueva página^** a tu sitio y pegas el código, verificando antes, SIEMPRE, que esté activada la etiqueta HTML. Ya lo veremos más en concreto en el video.
7. Guarda la página como borrador y ve a la parte pública para ver cómo se comporta.
8. Haces los retoques necesarios en el editor (no te desanimes: siempre hay que hacer retoques, incluso en las mejores familias :-)
9. Importante: los retoques nunca deben de hacerse en el editor del CMS, sino obligatoriamente en Sublime Text. Sólo así conservarás la última versión del texto en el editor con colores que te guían.
10. Ve y vuelve varias veces hasta dar el texto por acabado. Una vez conseguido, respira, primero, y guarda la página sin ser borrador (en Wordpress, selecciona, en "Estado": "Publicada" y, luego, clica en el botón azul de "Actualizar").
11. Perdón: casi siempre, una vez validado, te darás cuenta de que algo falla: no pasa nada. Vuelve a repetir el proceso, sin ningún stress. Es mejor eso y volverlo a hacer, a que alguien te diga: "Esto está mal" (que, aunque lo diga para ayudarte, ¡da una rabia!, principalmente cuando estás trabajando para un cliente).

** 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.

Trabajando con Sublime Text

Nueva página de descarga

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

Introducción al Sublime Text

Recordemos aquí el video sobre Sublime Text del módulo anterior. Si lo tienes fresco, puedes saltarlo, y ver el video siguiente.

Resumen y ejercicios prácticos

Recopilemos la información

1. Hemos visto las diferentes formas con las que el estárdar HTML agrupa los contenidos.
2. Hemos entendido cuáles son los elementos de cabecera en una página web de forma que el texto tenga lógica para el usuario y para Google :-)
3. El HTML5 ha introducido muchas etiquetas semánticas, en relación a versiones anteriores.
4. Cuales son las secciones de una buena página HTML5 para que Google nos la indexe bien y aparezca en las primeras posiciones!
5. Diferentes opciones para editar texto HTML. La mejor: una forma combinada, tal como se muestra en el segundo video de esta página.
6. Hemos aprendido a trabajar con Sublime Text 2: introduciendo contenidos cortos y largos.
7. Resumen y ejercicios prácticos

Fins aquí el mòdul núm. 3

Pots fer un comentari d'aquest mòdul. Com estem preparant el material següent, ens ajudarà molt la teva opinió, si és sincera.

Seguim!