El lenguaje de marcado HTML
Antes de comenzar con WordPress, vamos a presentar los lenguajes con los que diseñamos las páginas Web: HTML y CSS.
Encima del banner del curso, tienes el menú (botones azules) para acceder a los distintos temas y apartados del curso
1.1 Introducción y objetivos
Para sacar el máximo partido a WordPress es aconsejable que conozcamos los elementos esenciales de los lenguajes HTML y CSS. Nos ayudará a crear mejores páginas y a tener un mayor control sobre el diseño de las mismas.
Alguien preguntará: ¿pero no aprende uno a utilizar un gestor de contenidos como WordPress para evitar ‘enredarse’ con esos lenguajes? Bueno, en cierta manera sí y no.
Sí, porque no tenemos que memorizar y conocer al detalle la sintaxis de estos lenguajes; WordPress nos permite crear páginas web de forma muy intuitiva con una interfaz gráfica fácil de entender.
Por otro lado, vamos a trabajar mejor con WP si comprendemos qué estamos haciendo, o mejor dicho, qué está haciendo el programa por nosotros. Además, nos permitirá construir páginas cada vez mejor diseñadas.
Veremos que HTML y CSS son lenguajes de marcado, de menor complejidad que los lenguajes de programación y su aplicación está al alcance de una persona sin especiales conocimientos informáticos.
En resumen, estos dos primeros temas no son un curso completo sobre estos lenguajes, sino una introducción para que nos sintamos cómodos trabajando con ellos a través de WP. En este primer módulo entenderemos en qué consisten las páginas web y conoceremos más en detalle HTML.
Para ello veremos:
- Qué papel juegan los lenguajes HTML y CSS en las páginas web.
- Qué es y cuáles son las características principales de HTML.
- Cuál es la estructura de una página web: secciones principales, metainformación y contenido.
- Cómo se crea una página web: editores de código y visuales. Conoceremos el editor de WordPress: TinyMCE.
- Elementos (etiquetas) más utilizados de HTML.
1.2 Analogía HTML y CSS
Vamos a emplear una analogía que nos puede ayudar a comprender mejor el papel de cada uno de estos lenguajes.
Imaginemos una noticia en un periódico que llega al redactor jefe tal como aparece en la imagen de abajo, como ‘texto sin formato’ (parte superior izquierda).
Vemos que el texto es legible, pero no tiene ninguna estructura y no es fácil comprenderlo, al menos en una lectura rápida.
El redactor, para preparar el artículo para su publicación, marca con rotuladores la estructura de la misma: dónde empieza y acaba la noticia, y sus diferentes partes (titulo, subtítulo principal, la fuente de la que proviene la noticia y los distintos párrafos que la componen…).
Esta analogía no pretende ser un fiel reflejo del proceso de publicación en un periódico, tan solo una situación que podamos entender fácilmente.
Una vez marcada su estructura y de acuerdo al espacio del periódico donde se vaya a publicar y las normas de estilo de dicho periódico, se definirá qué presentación tendrá cada elemento, por ejemplo, su disposición en la página (‘layout’) o las tipografías a utilizar (parte derecha de la imagen).
Siguiendo con la analogía, este marcado de la estructura del contenido de la noticia podríamos haberlo hecho de una manera más precisa, utilizando etiquetas de inicio y fin para cada elemento que ha identificado el editor. Para ello, utilizaremos brackets (paréntesis angulados) ‘< >’.
A partir de este ejemplo, veamos el paralelismo que guarda con HTML y CSS. Si nos fijamos en la siguiente imagen:
Imagen: marcado de una noticia con etiquetas. Similitud con HTML
El lenguaje HTML juega el papel de las marcas o anotaciones que realizaba el redactor: definen la estructura del documento, la semántica del contenido, lo que podríamos denominar el marcado lógico del documento.
Si vemos con más detenimiento, las etiquetas que identifican el fin de un elemento llevan el carácter ‘/’. Podemos ver que marcamos un inicio y fin de la noticia con las etiquetas <article> y </article>. Podemos ver marcas que parecen definir secciones de la página (<header>, <div class=»contenido»>, <div id=»fuente»>) y distinguir etiquetas para títulos y subtítulos (<h1>, <h2> y <h3>) y para los párrafos (<p>).
A partir de este marcado HTML, el lenguaje de hojas de estilo (CSS) nos permitiría definir la apariencia de dicha página web, mediante la aplicación de determinadas reglas de estilo. Por ejemplo, que todo lo incluido en el <div class=»contenido»> se presente en 2 columnas.
1.3 ¿Qué es HTML?
Una vez presentados los conceptos generales, vamos a dar definiciones más precisas.
HTML son las siglas de: Lenguaje de Marcado de Hipertexto (‘HyperText Markup Language’).
No es propiamente un lenguaje de programación, sino de marcación, diseñado para estructurar páginas web mediante etiquetas.
Veremos que las páginas web son documentos de texto con una extensión particular ‘.html’
Estas etiquetas no se visualizan en el navegador (Chrome, Firefox, Edge/IE, Safari…), pero le indican qué tipo de contenido es para que pueda tratarlo y mostrarlo adecuadamente; por ejemplo si es una cabecera, un párrafo o una tabla.
Uno de esos elementos es el enlace de hipertexto, la seña de identidad del HTML. Vinculan a esa página con otras páginas, permitiendo al usuario ‘navegar’ a través de esa web y hacia otros sitios web externos.
Para ir o navegar entre páginas se utiliza el protocolo HTTP. No necesitas conocerlo, simplemente saber que es un sistema de comunicación con el cuál el navegador puede enviar una petición a un servidor web para obtener una página allí almacenada, y éste le responde remitiéndole esa página (fíjate cómo aparece en las URL o direcciones web: http://www.web.com)
Daremos algún detalle más de este sistema de peticiones en el tema 3.
Aunque originalmente el HTML permitía también indicar el formato de presentación, lo que denominamos marcado físico, a partir de la versión 4 esa función se encomendó a un lenguaje de presentación específico. Se trata del lenguaje CSS, al que se conoce también como ‘Hojas de Estilo‘.
Estándares y versiones
Tanto HTML como CSS son especificaciones del W3C (Consorcio de la WWW), organismo encargado de coordinar y establecer los estándares en Internet. Lo han definido muy acertadamente como «la ONU de Internet» ya que no siempre todos sus integrantes, por ejemplo las empresas que desarrollan los navegadores, han seguido a rajatabla sus recomendaciones.
Es conocido el caso del navegador Internet Explorer (de Microsoft), o de Netscape, que no implementaban algunas de esas normas o creaban otras particulares, lo que hacía que unas páginas se vieran bien o mal, según el navegador utilizado. Exigía realizar ‘trucos’ o una codificación específica de HTML según donde se fuera a visualizar la página.
Esto ha mejorado, y tanto Edge (sucesor de IE) como las versiones modernas de los navegadores más populares se adhieren a estas normas. Una página codificada según los estándares se verá bien en todos ellos.
Versiones HTML (y CSS)
Vamos a mencionar brevemente la trayectoria de HTML (en Internet tienes mucha información al respecto si tienes curiosidad).
La 1ª versión de HTML se publicó en 1989 y en las posteriores ha ido evolucionando, incorporando nuevas etiquetas, desaconsejándose el uso de otras y separándose las funciones de presentación en favor del lenguaje CSS (al principio HTML también se encargaba de eso).
En el 2000 se creó un estándar XHTML que convivió unos años con HTML. Básicamente era un HTML con normas más estrictas, por ejemplo, todas las etiquetas debían cerrarse y escribirse en minúsculas (esto último se ha adoptado como una buena práctica en HTML aunque no es obligatorio).
La línea de XHTML se abandonó en favor de la versión HTML5 que es el estándar actual y tiende a simplificar la escritura de las etiquetas.
Respecto CSS hay dos versiones: CSS2 y CSS3 (esta última no sustituye, sino que introduce nuevas propiedades). Los navegadores más modernos han ido incorporando las funcionalidades propuestas en HTML5 y CSS3, aunque no todas están soportadas.
WordPress trabaja con versiones actualizadas. En cualquier caso los navegadores implementan la llamada compatibilidad hacia atrás, es decir, que elementos ya obsoletos de HTML siguen funcionando bien. Podemos encontrar webs con versiones antiguas de HTML o con una ‘mezcla’ de distintas versiones en la misma página, sin que haya problema para visualizarlas.
1.4 Elementos de HTML y creación página web
Las páginas HTML se construyen con elementos que son identificados mediante etiquetas. Estos elementos pueden definir:
1) Los ‘contenedores’ principales de la propia página (algo así como el armazón) Toda página HTML debe tener al menos esta estructura:
A estos elementos añadiríamos al inicio del todo, antes de la etiqueta <html>, el Doctype de la página, que indica la versión de HTML que se está utilizando. En HTML5 se ha simplificado a la etiqueta: <!DOCTYPE html>.
Tienes un video a continuación explicando todo esto.
2) Las distintas partes del contenido de la página: un encabezamiento un párrafo, una lista, una tabla, una imagen, un enlace,… (veremos más adelante las más comunes)
3) Información sobre la página (las meta-etiquetas ó ‘metatags’) que no se muestra por el navegador (p.ej.: el autor, descripción, conjunto de caracteres empleados,…).
Salvo algunas pocas excepciones, la parte de contenido que define una etiqueta se delimita mediante una etiqueta de apertura y otra de cierre: <nombre_etiqueta>texto o parte
de la página</nombre_etiqueta>
Ejemplos: <h1>Esto es un título de nivel 1</h1> ; <p>Esto es un párrafo</p>
Atributos
Las etiquetas pueden incluir información adicional mediante unos elementos denominados atributos. Estos atributos permiten:
Que un mismo elemento se presente o sea tratado de forma diferente.
P.ej: <h1 style=»font-size: 18px;»> (el atributo style indica que el elemento h1 tenga un tamaño de letra de 18 pixels)
Especificar algún valor necesario para ese elemento.
P.ej: <a href=»http://www.digitallearning.es»>Nuestra Web</a>
(el valor del atributo ‘href’ indica a qué página enlaza ese vínculo)
La estructura general de una etiqueta con atributos sería:
Creación de página HTML
Para crear una página HTML simplemente debemos generar un documento de texto que incluya el contenido de la página, estructurado con las etiquetas adecuadas, y guardándolo con la extensión ‘.html‘.
Podemos empezar haciendo una prueba con algún editor de textos simple, como el ‘Bloc de Notas’ (o Notepad), que viene instalado por defecto en Windows o bien alguno equivalente si utilizas otro sistema operativo, como Gedit o Kedit para Linux o el TextEdit para OS X.
Puedes ver todo esto en el video «Creando una página Web» en este mismo tema, donde también comentamos la estructura de una página que hemos visto en el apartado anterior.
En cualquiera de ellos abrimos el programa (en Windows sería: Inicio > Accesorios > Bloc de Notas) y creamos una sencilla página como esta:
Como ves, al fichero lo hemos llamado «prueba.html» y para guardalo con ese nombre hemos cambiado la extensión que el bloc de notas pone a los ficheros de texto «.txt» por la extensión «.html«. Al guardar, también elegiremos la opción de codificación «UTF-8«, en vez de la de «ANSI» que es la que sale por defecto.
1.5 Etiquetas más comunes de HTML
Vamos a listar algunos de los elementos más utilizados de HTML con una pequeña descripción y ejemplo de cada uno.
Nota: aparte de estos breves ejemplos, a lo largo del tema, en varios apartados y videos veremos ejemplos del uso de estos elementos que presentamos aquí
| Elemento/Etiqueta | Descripción |
| <title></title> | Título de la página que se muestra en el navegador
Ej: <title>Mi primera página web</title> |
| <hx></hx> | Encabezamientos o títulos de orden/nivel x (x = 1, 2, 3, 4, 5 ó 6)
Ej: <h2>Título de nivel 2</h2> |
| <p></p> | Párrafo
Ej: <p>Esto es un párrafo de un texto.</p> |
| <br> (o <br/>) | Salto de línea (no tiene etiqueta de cierre).
Ej: <p>Vamos a forzar un salto de línea.<br>Esto aparecería en la siguiente línea de la página.</p> |
| <hr> (o <hr/>) | Línea horizontal, utilizada normalmente como separador de secciones en una página. Ej: <p>Utilizamos una linea horizontal para separar este último párrafo.</p> <hr/> <h3>Título de otro apartado de la página.</h3> |
| <div></div> | División de la página: define un área/sección como contenedor en bloque. Suelen ir con un atributo id o class para ser tratados luego con CSS (o JavaScript) Ej: <div id=»ejemplo»> <p>Esto es un contenedor ‘div’ con dos párrafos.</p> <p>Podría tener más elementos en él: listas,imágenes,….</p> </div> |
| <span></span> | Selecciona/delimita una porción de contenido. Es un contenedor en línea (por ejemplo una parte del texto de un párrafo). Suelen ir con un atributo class o style (Veremos después el uso de span con CSS) Ej: <p>En este párrafo incluimos un ‘span’ <span style=»color: red»>que permite cambiar el color de esta parte del texto</span> dejando el resto igual.</p> |
| <table></table> | Tabla |
| <tr></tr> | Fila de la tabla |
| <td></td> | Celda de la tabla (cada celda genera una columna en la tabla). Ej: <table> <tr><td>Celda 1.1</td><td>Celda 1.2</td></tr> <tr><td>Celda 2.1</td><td>Celda 2.2</td></tr> </table> |
| <ul></ul> | Lista no numerada. Ej: <ul> <li>Item 1 de la lista</li> <li>Item 2 de la lista</li> </ul> |
| <ol></ol> | Lista numerada. Ej: <ol> <li>Item 1 de la lista</li> <li>Item 2 de la lista</li> </ol> |
| <li></li> | Cada elemento (ítem) de la lista (como hemos visto en los ejemplos anteriores) |
| <img> (o <img />) | Imagen. En esta etiqueta deberemos indicar cuál es el fichero imagen que utilizamos. Para ello empleamos el atributo src (source: fuente), donde incluimos la URL (dirección) absoluta o relativa del fichero.
Ej: <img src=»http://www.nombre_web.com/img/Imagen1.jpg»>(dirección absoluta) <img src=”img/Imagen1.jpg”>(dirección relativa) |
| <a></a> | Enlace. En esta etiqueta debemos indicar la página web a la que enlazamos. Para ello usamos el atributo href, donde incluimos la URL (dirección) absoluta o relativa de dicha página. También es posible crear enlaces internos a zonas dentro de la propia página con el atributo name.
Ej: <a href=”http://www.digitallearning.es”>Digital Learning</a> |
| <em></em> | Texto enfatizado (itálica)
Ej: <p>En este párrafo incluimos una palabra <em>enfatizada</em> que aparecerá en itálica.</p> |
| <iframe></iframe> | Permite insertar otro documento (otra página web, un video…) en esa página web. El recurso externo a insertar se indica en el atributo src. Se visualiza en un marco cuyo tamaño podemos definir mediante los atributos width (anchura) y height (altura)
Ej: |
| <strong></strong> | Texto enfatizado (negrita)
Ej: <p>En este párrafo incluimos una palabra <strong>enfatizada</strong> que aparecerá en negrita.</p> |
| <! – – – – > | Comentarios. Para incluir notas aclaratorias en el código de la página (no se procesan ni se muestra en el navegador)
<!– Esto es un comentario, que no se muestra en |
Con HTML5 se incorporaron nuevos elementos, por ejemplo para mejorar la semántica de los documentos que hasta ahora se hacía principalmente con div, o para incluir video y audio. Las nuevas etiquetas más significativas son:
| Elemento/Etiqueta | Descripción |
| <section></section> | sección dentro la página. Podríamos decir que tiene la misma finalidad que la etiqueta DIV, es decir, definir un bloque al que se le pueda aplicar un estilo determinado (mediante CSS). |
| <header></header> | se utilizará para indicar la cabecera de la página o de una sección de ella, donde normalmente aparece el logo o título del sitio web, o también donde se suele poner el menú de navegación. No confundir con la sección <head></head> |
| <nav></nav> | delimita la sección de navegación de una página: menú, enlaces |
| <article></article> | podemos definirlo como un elemento contenedor de información que pueda considerarse una unidad por si misma (el ejemplo típico es el de un artículo o noticia). En una documento HTML puede haber más de un contenedor article |
| <aside></aside> | delimita una especie de bloque o barra lateral. Puede servirnos para incluir información complementaria al contenido principal de la página: elementos que ayuden en la navegación, menús de opciones, enlaces diversos. |
| <footer></footer> | para indicar el pie de página de la página o sección, donde suelen aparecer datos relacionados con la empresa, datos de contacto, copyrights, aunque se le pueden dar otros usos. |
| <audio> | para insertar pistas de audio con un reproductor (botones de start, stop…) |
| <video> | para insertar videos con un reproductor (puedes ver un ejemplo del uso de este elemento en el video «Tablas y videos |
Tablas
Por ser un elemento muy utilizado con múltiples opciones, vamos a detallarlo algo más.
Al final del tema tienes un video donde vemos como crear una tabla con el editor TinyMCE de WP y el etiquetado HTML que genera
En la imagen vemos la representación de una tabla muy simple, de dos filas y dos columnas, visualizando los elementos que corresponden a las etiquetas:
- <table>…</table>: entre estas etiquetas de apertura y cierre definimos toda la tabla.
- <tr>…</tr>: entre estas etiquetas definimos cada fila de la tabla (tr = ‘table row’, es decir, ‘fila dela tabla’)
- <td>…</td>: entre estas etiquetas definimos cada celda de la tabla (td = ‘table data’, es decir ‘dato de tabla’).
Vemos que no existe ninguna etiqueta ‘columna’. En su lugar empleamos las ‘celdas’ definidas en cada ‘fila’ para delimitarlas.
Hay algunas etiquetas adicionales que podemos utilizar para definir o diferenciar algunas partes de la tabla. Estás no son imprescindibles como las tres etiquetas que hemos visto antes, pero pueden sernos de utilidad según el tipo de tabla que estemos elaborando.
- <theader>, <tbody> y <tfoot>: nos permiten diferenciar la cabecera, cuerpo y pié de una tabla, respectivamente.
- <th>: la utilizamos en vez de <td> si queremos diferenciar que celda o celdas, son títulos de la tabla (th = table header)
- <caption>: si queremos asignar y mostrar un título general a la tabla
También pueden realizarse tablas con estructuras más complejas, por ejemplo uniendo columnas o filas mediante los atributos ‘colspan’ y ‘rowspan,’ respectivamente, en la etiqueta.
Referencias: Webs donde podemos consultar todos los elementos HTML
Hay muchos sitios en Internet donde puedes encontrar información sobre los elementos HTML. Nosotros hemos escogido tres destacados por ser muy conocidos, estar actualizados a las últimas especificaciones de HTML5 y además presentar cada uno características diferentes.
W3Schools
Es una de las referencias más populares, aunque no es oficial ni tiene que ver con el organismo W3C. Era criticada por contener información poco rigurosa, pero ha mejorado en este aspecto y quizás sea la más fácil y clara de consultar si estás empezando. Incluye ejemplos y un editor online para comprobar de forma rápida los distintos elementos: https://www.w3schools.com/tags/default.asp
La pega es que está en inglés, aunque hay una versión en español (traducción automática) pinchando en el icono ‘mundo’ que aparece en la parte derecha de la barra de navegación superior. No es perfecta, pero te puede ayudar si te cuesta entender algo.
MDN (Mozilla Developer Network)
Tienes un listado completo de las etiquetas de HTML en esta página de Mozilla (los creadores de Firefox), donde además marcan los nuevos elementos HTML5. Si pinchas en cualquier etiqueta te llevará a una descripción más detallada con un ejemplo de uso o incluso los atributos que puede tener:
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
W3C
La referencia oficial de la W3C para HTML5, además de estar en inglés, es menos ‘amigable’ para consultar. Por supuesto es la fuente más fiable, y hay quien preferirá acudir a ella cuando se trate de ver exactamente la estructura y definición de un elemento HTML. Puedes consultarla aquí: https://www.w3.org/TR/2016/REC-html51-20161101/index.html#contents y dirigirte a la sección 4 (menú de la izquierda) donde se detallan todos los elementos.
Cheat sheet (chuletas) y tablas periódicas de elementos HTML
Como curiosidad, incluimos otra forma de consultar los elementos HTML, distribuidos a modo de tabla periódica como la de los elementos químicos, donde pinchas en cualquier etiqueta y obtienes información sobre ella. Aquí tienes algunas que hemos seleccionado:
- Versión de José Román (en español y con bastante información adicional al pinchar en cada elemento, lo que lo convierte en un tutorial completo de HTML)
- Versión de Mike Riethmuller’s (una de las primeras, en inglés)
- Versión de M.A. López Torralba (traducción al español de la original de Josh Duck, ya no disponible)
Por último, si consultas con Google (o el buscador que uses) «chuleta HTML» ó «cheat sheet HTML» y te vas a la pestaña de imágenes, seguro que te aparecen muchas hojas donde tienes resumidas las etiquetas más importantes de forma muy compacta. Si hay alguna que te guste, guárdala o imprímela para tenerla a mano.
1.6 Elementos bloque/en linea. Atributos id/class. Caracteres especiales
Elementos de bloque y en línea
Un concepto importante que influye en las propiedades y tratamiento de los elementos de contenidos, es la clasificación que HTML hace de ellos en dos grupos:
Elementos de bloque
- Empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea.
- Pueden contener elementos en línea
- Algunos pueden contener a su vez otro elementos de bloque (por ejemplo, el elemento div, que se utiliza como contenedor y que veremos más adelante)
- Los bloques se apilan de arriba a abajo, es decir, cada uno ocupa todo el ancho de la página, colocándose debajo del bloque que le precede en el código HTML.
- Ejemplos: encabezamientos, párrafos, listas, tablas, divisiones,..
Elementos en línea
- Ocupan el espacio necesario para mostrar su contenido
- No pueden contener elementos de bloques
- Siguen un flujo izquierda-derecha y arriba-abajo, es decir, se colocan al lado derecho del anterior elemento en línea, salvo que no haya suficiente espacio disponible, en cuyo caso se colocarán debajo, lo más a la izquierda posible.
- Ejemplos: enlaces, imágenes, énfasis,…
En el apartado de estilos (CSS), al explicar el modelo de cajas, volveremos sobre estas características y el tratamiento que tienen a la hora de disponer los elementos en la página.
Atributos id y class
Los elementos HTML pueden contener atributos como vimos en la estructura general de una etiqueta en un apartado anterior:
Hemos visto ya algunos atributos como href que no permite indicar la URL que estamos vinculado en un elemento enlace (<a href=»….»>) o el atributo src que nos permite indicar el path o ubicación de la imagen (<img src=»…»>). Pues bien, otros dos atributos muy utilizados en HTML son id y class, que nos permiten identificar un elemento.
¿Para qué queremos identificar un elemento? Pues para poder actuar selectivamente sobre él, bien aplicándoles estilos de presentación CSS, como veremos en el siguiente tema, o para manipularlo de alguna forma a través por ejemplo del lenguaje de programación JavaScript (esto es algo que no veremos, pero que en WordPress utilizaremos implícitamente sin darnos cuenta)
El atributo id identifica de forma unívoca un elemento HTML dentro de una página web, es decir, solo tendrá un valor y no podemos utilizar el mismo valor del atributo id dos veces o más en una página web: <p id=»principal»>……..</p>
El atributo class en cambio si puede tomar más de un valor (basta con separarlos con un espacio en blanco) y además puede repetirse en cualquiera de los otros elementos HTML que haya en la página. Ejemplo de codificación válida:
<p class=»destacado urgente»>…..</p>
<img class=»destacado» ……..>
<a class=»destacado nuevo»……>
Ambos atributos pueden estar en un mismo elemento. Por ejemplo: <p id=»principal» class=»destacado»>….</p>
Por tanto, con ‘id’ identificamos a un solo elemento que luego podemos seleccionar para aplicarle algún tipo de transformación.
Con ‘class’ podemos utilizar identificaciones genéricas, de manera que luego podamos seleccionar a varios elementos a la vez y manipularlos de la misma forma, por ejemplo, haciendo que los que sean de la clase ‘destacado’ se muestren en un tamaño más grande
Caracteres especiales
Hay algunos caracteres especiales como ‘espacios en blanco’, símbolo ‘&’, vocales acentuadas,…que pueden necesitar un tratamiento especial en HTML. Para ello se emplean los denominados ‘Entidades de Caracteres HTML‘ que son unos códigos que reemplazan a esos caracteres o símbolos. Por ejemplo, la «á» (a acentuada) se puede escribir en HTML como «á» o el símbolo «&» como «&«.
Aunque con WordPress no nos debemos preocupar, porque su editor ya hará esta conversión automáticamente, es conveniente conocer su existencia para que sepamos qué son al inspeccionar el código HTML de las páginas que creemos en WP o por si en algún caso particular no se está visualizando bien un carácter en el navegador.
En Internet puedes consultar la lista completa de entidades de caracteres, como en esta tabla. Son las que aparecen en las columnas HTML número y HTML nombre. Ambas son equivalentes, aunque se emplea más la versión 2ª por ser más fácil de identificarlas (si se tiene una cierta práctica!).
Los caracteres o situaciones donde puede ser necesario utilizar estos códigos son:
- Al incluir caracteres que tienen un significado en HTML y podrían confundirse con partes de ese lenguaje. Por ejemplo, para los paréntesis angulados que se emplean en las etiquetas HTML, el «<» se traduce por ‘<‘ y el «>» por ‘>‘
- Puede que no se tomen en cuenta los espacios en blanco si son más de uno seguido. Si es así, podemos introducir el código equivalente ‘ ‘.
- Introducir caracteres/símbolos que no están en nuestro teclado. Por ejemplo, el símbolo de copyright © lo podemos incluir con ‘©‘. De todas maneras veremos que el editor de WP nos permite insertar estos símbolos especiales con una tabla gráfica de forma muy sencilla.
- Emplear caracteres del lenguaje que no pertenecen al conjunto mínimo común ASCII. Esto puede ser el caso de las vocales acentuadas o la ñ, particulares del español o por ejemplo la ç ó los acentos circunflejos en otras lenguas.
En cualquier caso, siempre es recomendable utilizar el conjunto de caracteres UTF-8, que es más mucho amplio y recoge los caracteres de todos los idiomas. Para ello:
- Si elaboramos nuestra página web con un editor de texto, elegir que la guarde con codificación ‘UTF-8’ (algunos lo guardan por defecto en ‘ANSI’)
- Que introducimos en la sección <head> de nuestra página la meta etiqueta: <meta charset=»UTF-8″>
1.7 El editor de WordPress: TinyMCE
En una tabla anterior hemos presentado las etiquetas más comúnmente utilizadas en HTML, además del enlace donde puedes consultar la lista completas. Ahora llega el momento de practicar un poco con ellas y para ello vamos a elegir el editor que incorpora WordPress, para que así de paso te vayas ya familiarizando con él.
Tienes también un video donde explicamos este editor TinyMCE y creamos una sencilla página web con diversos elementos HTML.
Hemos de advertir que con este editor no vamos a elaborar páginas web ‘completas’ en el sentido de que solo vamos a crear la parte correspondiente a la sección <body>, es decir, la que se muestra en el navegador del usuario. Esta es una particularidad de WordPress, ya que no vas a escribir nunca directamente las secciones previas (doctype, <html> y <head>), porque es algo de lo que se encarga él automáticamente.
De todas maneras, haremos algún ejemplo donde completaremos esas páginas con un editor de textos. Además, comprobaremos que aunque solo se cree el <body>, esas páginas son visualizables abriéndolas directamente en un navegador, ya que estos son muy flexibles a la hora de interpretar una página HTML, aunque esta tenga errores o carezca de algunos elementos básicos.
1.7 El editor TinyMCE
Este editor no es exclusivo de WordPress. Es un software de código abierto que se puede descargar y configurar según interese, pero para facilitar las cosas hemos preparado una página donde puedes trabajar online directamente con él:
https://www.digitallearning.es/curso-wp/EditorTinyMCE_WP.html
Cuando empecemos a crear paginas con WordPress verás, que salvo alguna pequeña diferencia, el interfaz y las funcionalidades son casi las mismas, así que lo hemos elegido como una buena práctica para ir ya familiarizándonos con él.
Eso sí, con esta herramienta solo crearemos las etiquetas correspondientes a la sección <body>, que es la que ve el usuario en su navegador. Cuando necesitemos crear una página html ‘completa’ con todas las secciones (doctype, html, head), utilizaremos el editor más simple que tenga nuestro sistema operativo. En el caso de Windows sería el Bloc de Notas (Notepad).
Si quieres usar algún editor más avanzado, hay buenas opciones gratuitas en todos los sistemas: Notepad++, Geany, Atom, Sublime…, además de editores online, pero no vamos ocuparnos de ellos. Para WordPress no es necesario e introduciría una complicación adicional al curso. Lo comentaremos en un foro del curso como ampliación a este tema.
El interfaz (menús, botones) del editor TinyMCE es muy similar a alguno de los procesadores de texto que seguro habrás utilizado (Word, Writer,…) aunque mucho más simple, y con alguna diferencia puntual.
Lo primero que vemos es que no presenta un menú desplegable en la parte superior (las típicas opciones: Archivo, Edición, Ver,…) sino solo botones distribuidos en 3 filas. Así es como se presenta en la versión estándar de WordPress, aunque veremos que se puede incluir ese menú y botones adicionales más adelante.
La 1ª fila presenta 3 botones. Es en la única donde hay algunas diferencias con el editor de WP. Los explicamos a continuación:
- El primer botón nos permite insertar contenido multimedia: imágenes o videos utilizando una URL o un código de inserción (lo veremos más adelante en el caso de los videos con el elemento ‘iframe’). En WP aunque podemos hacer lo mismo, sobre todo con los videos, en el caso de las imágenes normalmente las subimos a nuestro servidor web y desde allí las incluimos en nuestra página.
- El 2º botón nos permite ver en un pop-up (ventana emergente) el código HTML que se está generando. En WP esto se visualiza pulsando una pestaña.
- El botón 3º nos previsualiza la página en un pop-up, como si fuera un navegador. En WP hay un botón específico de ‘previsualizar la página’ que la muestra en una nueva pestaña del navegador
En la 2ª fila, los botones nos deberían ser familiares:
Por orden de izquierda a derecha indicamos sus funciones y los elementos HTML que incluyen en la página:
- Énfasis (efecto negrita). Incluye la etiqueta <strong>
- Énfasis (itálica). Incluye la etiqueta <em>
- Tachado de texto. Incluye la etiqueta <span> con un estilo en línea (lo veremos en la parte de CSS)
- Creación de lista no numerada. Incluye las etiquetas <ul> (para toda la lista) y <li> (para cada item de la lista). Podemos escoger el tipo de viñeta por defecto (disco) o elegir del menú desplegable: viñetas tipo círculo, disco o cuadrado. Si elegimos la opción del desplegable incluirá un estilo CSS en línea a las etiquetas <li>
- Creación de lista numerada (con varias opciones: numeración normal, romana,…). Incluye la etiquetas <ol> (lista) y <li> (item). Al igual que en las listas numeradas, esas opciones particulares se incluyen como estilo en línea CSS.
- Cita en bloque (para citar un autor u otros textos), Incluye la etiqueta <blockquote>
- Linea horizontal (divisoria). Incluye la etiqueta <hr/>
- Alineaciones a derecha, centrada o a izquierda. Las alineaciones se incluyen como un estilo CSS en línea.
- Inserción de enlace,. Incluye una etiqueta <a> con la URL a la que enlazamos en el atributo href (ejemplo: <a href=»http://www.ugr.es»>)
- Eliminación de enlace. Borra simplemente la etiqueta <a> correspondiente.
La 3ª fila también nos debe resultar familiar:
Igualmente por orden las describimos brevemente:
- Permite incluir distintos formatos, como por ejemplo añadir un título o encabezamiento, tal como vemos en la imagen abajo. Es un botón desplegable donde hay opciones que ya estaban en otros botones y algunas nuevas, como por ejemplo incluir un superíndice o un subíndice o un formato de código de programación.
- Subrayado (no es aconsejable utilizarlo en la web, ya que se suele reservar para los textos que son un enlace y puede causar confusión)
- Justificación del texto
- Color de texto: al desplegar, vemos una paleta estándar de colores, y una opción ‘personalizar’ que nos da acceso a muchos más colores.
- Pegar texto desde una fuente externa (por ejemplo Word o Writer)
- Limpiar el formato del texto seleccionado (elimina los estilos que se hayan por ejemplo incluido al pegar de una fuente externa)
- Inserción de símbolos.
- Quitar o añadir sangría al texto
Prueba directamente con diversos botones, y comprueba con el botón ‘<>’ el código que se va generando.
Anexo: Editor TinyMCE avanzado
En el siguiente enlace puedes encontrar una versión más completa que hemos preparado del editor TinyMCE. Incluye opciones adicionales a través de una barra de menú como algunos botones más: https://www.digitallearning.es/curso-wp/EditorTinyMCE_WP_avanzado.html
Aparte de permitir configurar algo más los estilos de letra (elegir tipografía y su tamaño o incluso color de fondo) destaca porque permite insertar tablas a través de una opción de menú y de un botón. En la imagen de abajo puedes ver la creación de una tabla de 4 filas y 4 columnas utilizando la opción de menú:
y abajo puedes ver el resultado:
- Pestaña visual: la tabla es el rectángulo de lineas discontinuas que aparece a la izquierda con una barra de botones abajo (para borrar y añadir tablas o filas y columnas dentro de la tabla ya creada)
- Código fuente: código HTML generado que corresponde al etiquetado de una tabla de 4 filas (<tr>…</tr>) con 4 columnas (las 4 celdas <td>…</td> que hay en cada fila). Cada celda se ha ‘rellenado’ con un espacio en blanco (código HTML: ):
Con la tabla creada, ya puedes introducir textos o números en las celdas o incluso arrastrar con el ratón desde uno de los pequeños cuadrados de los vértices y agrandar o reducir el tamaño de la tabla.
Para dar formato a esa tabla creada (colores, bordes,…) ya es necesario el uso de estilos CSS. Lo iremos viendo a lo largo del curso (por ejemplo tienes un video en el tema 7 donde se formatea la presentación de una tabla).
Esta versión del editor también la podemos conseguir en WordPress mediante un ‘plugin’. Lo veremos más adelante en el curso.