Curso de HTML y CSS para bloggers 2: marcado de texto
24.11.15
¿Problemas al editar el texto de las entradas de tu blog? ¿No puedes controlar los saltos de línea ? En esta nueva lección conoceras las etiquetas HTML aplicables a textos. Podrás revisar el código de tus entradas, resolver errores y mejorar su apariencia.
Es muy probable que tu gestor de contenidos como Blogger o Wordpress tenga un editor de entradas con funcionalidades similares a un editor de textos. De manera intuitiva es posible colorear el texto, hacerlo más grande, crear listas, etc. ¡Estupendo! Pero no siempre se aplican bien, sobretodo si se realizan muchos cambios. Por suerte en la mayoría de los CMS podemos activar la edición en código HTML. Así descubrimos que el editor lo que hace es simplemente introducir etiquetas por nosotros, codificar el texto en lenguaje HTML, que es lo que el navegador realmente leerá y mostrará en la pantalla de nuestros lectores.
En la lección anterior definimos una web como una gran matrioska. Cada elemento que la forma debe encerrarse entre una etiqueta de entrada y otra de salida. También vimos la estructura de una web, que se compone de cabecera o head y un cuerpo o body. Es en el cuerpo donde se define todo el contenido de la web como textos e imágenes.
<!DOCTYPE html>
<html>
<head>
<title>Mi página</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
La mayor parte de una web o un blog está formada por texto, y por tanto nos será de gran ayuda conocer los elementos y etiquetas que lo estructuran y marcan. La manera más clara de ver como actuan y se muestran es realizar una web de prueba. Para ello abre la aplicación Bloc de notas de Windows o la Textedit de Mac y copia el código anterior a este párrafo.A medida que lees esta lección ve copiando los códigos de ejemplo entre las etiquetas <body>....</body>.Puedes ir guardando el archivo con la extensión .html. Éste se abrirá por defecto en tu navegador y podrás ver como va mostrando cada elemento.
Etiquetas para estructurar el texto
Títulos: <h1>, <h2>,<h3>, <h4>, <h5>, <h6><h1> Este es el título principal de la página.</h1> <h2> Este es el título de nivel 2 </h2>Para marcar títulos se emplea la etiqueta < h> seguida de un numero que marca su nivel de importancia, del 1 al 6. El número uno corresponde al título principal de la página, y los números siguientes a títulos de importancia decreciente. Por defecto el navegador muestra los títulos en negrita y un tamaño de texto proporcional a su importancia.
La etiquetas de título al principio de la página se tienen muy en cuenta por los buscadores, influyendo en su clasificación y recomendación por éstos.
Párrafo: <p>
<p>Esto es un primer párrafo , con texto falso Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p> <p>Esto es un segundo párrafo. Pellentesque congue aliquam erat, sed rhoncus turpis hendrerit in.</p>La lectura de textos en pantalla suele ser más ardua que en papel, y ello exige párrafos cortos, separados por líneas vacias. Esta etiqueta nos permite esta necesaria división del texto en párrafos.
Cita: <blockquote>
<p>Según Séneca:</p> <blockquote>Largo es el camino de la enseñanza por medio de teorías; breve y eficaz por medio de ejemplos.</blockquote>Esta etiqueta responde a la necesidad de citar texto de otros autores en artículos o informes. El texto se mostrará en un párrafo aparte con una generosa sangría izquierda.
Separador horizontal:<hr/>
<hr/>Una recta horizontal puede ser útil para definir visualmente un cambio de contenido. Para que el navegador muestre una fina línea sólo debes escribir esta etiqueta, que es única y no encierra ningún contenido.
Listas
HTML también nos permite agrupar palabras o frases en forma de listado. Un uso muy frecuente lo encontramos en los menús, que no dejan de ser un listado de diferentes categorias.De las tres opciones que ofrece el lenguaje HTML para crear listas las más frecuentes son las no ordenadas y las ordenadas. La diferencia entre ellas está en cómo se mostrará cada categoría. En la primera aparecerán precedidas por un circulito, en las listas ordenadas se enumeraran de forma creciente.
Lista ordenada: <ol>
<ol>
<li>Primer plato</li>
<li>Segundo plato</li>
<li>Postres</li>
</ol>
Lista no ordenada: <ul><ul>
<li>Harina</li>
<li>Azúcar</li>
<li>Sal</li>
</ul>
Cada elemento de la lista debe ser asímismo marcado por etiquetas li, recuerda que los elementos html pueden anidarse, colocarse unos dentro de otros. Observa por ejemplo como los elementos de la lista se encierran dentro de una etiqueta de entrada <ul> y una de cierre </ul>. Esto nos permite además generar un listado con subcategorias.<ol>
<li>Primer plato
<ul>
<li>sopa</li>
<li>macarrones</li>
<li>ensalada</li>
</ul>
</li>
<li>Segundo plato</li>
<li>Postres</li>
</ol>
Las etiquetas anteriores se encargan de estructurar el contenido de la
web, pero a su vez muestran una apariencia predefinida por el navegador.
Cada elemento ocupa todo el ancho de pantalla en el orden dado, de
arriba a abajo, son los elementos llamados de bloque. Marcar la importancia de ciertas palabra: <strong>, <em>
En un artículo es muy frecuente marcar en negritas o cursivas ciertos textos. HTML nos permite hacerlo mediante las etiquetas <strong> y <em>. Estos elementos no introducen saltos de párrafo como los anteriores, sino que se insertan en el mismo flujo de texto y se llaman por ello elementos en línea.<p>Podemos marcar texto como <em>importante</em> y como <strong>muy importante</strong></p>El texto encerrado entre estas etiquetas se mostrara en cursiva y negrita respectivamente. El editor de entradas de Blogger utiliza las etiquetas <i> y< b> para el mismo efecto a nivel visual, pero a diferencia de las anteriores no remarcan la especial significación del texto.
Si se utiliza las etiquetas <strong> y <em> los programas de síntesis vocal que leen páginas web a personas con deficiencias, entonaran con más énfasis las palabras marcadas así. Igualmente se mostraran a los buscadores como elementos de significación especial.
Espacios en blanco y saltos de párrafo: <br/>
Cuando estructuramos un texto y queremos que su aspecto sea cuidado debemos tener en cuenta los llamados espacios en blanco: espacios, tabulación, retornos de carro (intros). A diferencia de un programa editor de textos HTML ignora los espacios en blanco sobrantes. Es decir los espacios múltiples, las tabulaciones, y los intros que introduzcas en el texto son ignorados al mostrarse en el navegador.Por tradición el cambio de párrafos en un texto escrito se suele marcar de dos maneras: se deja una línea en blanco entre cada párrafo o se sangra un poco la primera línea de cada párrafo. En internet es más recomendable y común ver la primera opción. La etiqueta de párrafo ya deja un espacio posterior y anterior para generar esa línea vacia en blanco.
El problema que nos podemos encontrar es que nuestro gestor de contenidos no use la etiqueta de párrafo. El editor de Blogger por ejemplo introduce la etiqueta <br/> cada vez que presionamos la tecla intro o return. Esta etiqueta genera un salto de línea, de manera que para conseguir una línea vacia deberemos introducir dos etiquetas seguidas.
<p>Esto es un primer párrafo, con texto falso Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et odio sodales, tristique mauris eget, eleifend tellus. Suspendisse potenti. <br/> <br/> Esto es un segundo párrafo. Pellentesque congue aliquam erat, sed rhoncus turpis hendrerit in. Vestibulum posuere justo erat, ac imperdiet lorem semper in.</p>Muchos de los problemas de espaciado en la edición de un post se pueden solventar con una cuidadosa revisión en HTML de la presencia de estas etiquetas.
Y hasta aquí hemos visto las etiquetas más comunes para estructurar y dar formato a un texto. Evidentemente el aspecto de estos elementos se puede personalizar, pero para ello recurriremos a otro lenguaje. Actualmente se aboga por separar claramente lo que es estructura, codificándolo mediante HTML, de lo que es presentación aplicando reglas de estilo CSS. Considera pues que la función principal de éstas etiquetas es la de estructurar el contenido, y que más adelante nos encargaremos de su aspecto.
Cómo ejercicio final te animo a que en el siguiente post que redactes pases a la edición HTML y revises qué etiquetas el editor ha ido introduciendo entre tu texto. Veras que los enlaces y las imágenes aparecen con una gran cantidad de código. No te apures, en la próxima lección nos encargaremos de ello.
Dudas, aportaciones... Sientete invitad@ a comentar aquí abajo.
21 comentarios
gran post Minerva, como siempre ;)
ResponderEliminar(no me gusta dejar comentarios tan cortos, pero no puedo añadir nada más...)
Lo breve si breve dos veces bueno ;)
EliminarGracias
Con tus explicaciones HTML es muchos más fácil! Gracias :)
ResponderEliminarBesitos!
Ese es el objetivo, que se pierda el miedo al código, no es tan fiero como lo pintan!
EliminarQue bien Minerva, me encanta esto del html, lo veo un poco lioso porque estoy empezando, pero es que lo explicas tan bien jejejejeejejeje Es la primera vez que experimento esto y me va costando. Pero voy tomando nota. Espero que sigan así las demás lecciones. Saludos guapa :D
ResponderEliminarEsta parte a lo mejor es un poco más rollo, pero cuando llegemos al CSS verás que es hasta divertido, tener el control del aspecto de tu blog!!
Eliminar¡Muchas gracias, Minerva! Voy a tener que estudiarme muy bien el post porque yo soy de las típicas que meten la pata cuando escribo mis posts: que si se me separan mucho las líneas, que si se me ponen muy juntitas (ya les pregunté si pasaban frío jajajaja, pero ni por esas... ) Al final de tanto toquetearlo acabo por dejarlo como está y rezar porque mis rukkifans se centren más en lo bonito del post que en la estructura desacorde de las frases jajajaja...
ResponderEliminar¡Un muackiles, guapura!
A mi me pasa muy a menudo, toco mucho el texto con el editor, que si corto, pego, borro, hago y rehago..Al final expediente X asegurado, y sino te metes en el inframundo del código no se resuelve la incognita ;)
Eliminarpara entender esto necesito 2 cafés y un cuaderno para anotar porque te juro que antes aprendo alemán.
ResponderEliminarAun así lo guardo porque seguro que me sirve, lo de las líneas de momento no me ha pasado jeje
besotes!
Pues nada, ir haciendo cafeteras ;) pero te aseguro que es más lo que abulta que la dificultad en si. Todo es empezar ;)
EliminarMe encantó!! Todo tan claro y bien explicado. Hasta me has descubierto una etiqueta....jaja. Un beso y comparto.
ResponderEliminarMe encantó!! Todo tan claro y bien explicado. Hasta me has descubierto una etiqueta....jaja. Un beso y comparto.
ResponderEliminarEstupendo! Me alegra ser de ayuda!
EliminarUff un buen post, yo uso siempre strong para destacar mis palabras claves. Gracias por tu ayuda.
ResponderEliminarHola Minerva, aunque no es el tema exacto de tu entrada, por si puedes ayudarme, estoy intentando poner en html un recuadro a un texto, para poder crear algo resaltado en un post sin recargar, lo estoy haciendo en html, en wordpress, y lo veo bien en el post, pero cuando le doy a editar, en web se ve todo el texto borroso, sabes porque puede ser esto?
ResponderEliminarqueria escribirte en el post como estoy poniendo el html para hacer el recuadro, pero no se porque si lo incluyo no me deja publicarlo :(, te explico que lo estaba haciendo como si fuera una tabla, pero con una sola cajita.
podrias ayudarme?
mil gracias!
Hola. La edición en html en cada gestor es un poco diferente. De todas maneras escribeme en el formulario de contacto, si puedes adjuntando link a tu blog!
EliminarHola. La edición en html en cada gestor es un poco diferente. De todas maneras escribeme en el formulario de contacto, si puedes adjuntando link a tu blog!
EliminarRecién descubro tus post y me parecen excelentes!
ResponderEliminarNo se si aun me leeras, espero que si. Me encanto la prueba, solo que en las palabras con tilde me aparece un signo de interrogación blanco dentro de un rombo negro. Porque sera esto? �
Gracias infinitas.
Hola, he tardado un poco en responder. Descubrí relativamente hace poco que no se me notificaban los comentarios como antes. No sé muy bien a que se debe ese error pero apunta a un problema de codificación. Revisa que tengas en el head la etiqueta meta charset="UTF-8"
EliminarJusto este dia he visto su web. Deseo rehacer mi blog. Usted puede ayudarme?? Gracias Minerva. Tenga usted un excelente dia!!
ResponderEliminarHola, estoy por comenzar el módulo de desarrollo de aplicaciones multiplataforma acá https://modulosgrado.com/Modulo-grado-superior-Desarrollo-de-aplicaciones-multiplataforma.html pero me gustaría saber ¿Cuánto gana un desarrollador de aplicaciones web?.
ResponderEliminar