Cómo poner cursiva, negrita, subrayado, tamaño, tipo de letra y color del texto en HTML

Cómo poner cursiva, negrita y subrayado en HTML

Las cursivas, el subrayado y las negritas se utilizan para ofrecer una lectura más atractiva a un contenido digital. A continuación verás que todo post de un blog debe contener una negrita, una cursiva o un subrayado. Todas las agencias seo saben que esto además es positivo para tu posicionamiento seo. Os explicamos cómo y cuándo se debe utilizar estos formatos.

Cómo poner cursivas en HTML

Existen varias etiquetas para poner en cursiva un texto: <i> y <em>. Estas etiquetas deben ir siempre acompañadas de un cierre, por ejemplo:

<i>Así es como se pone un texto en cursiva<i>

<em>Y así también se pone un texto en cursiva</em>

Al igual que con otras etiquetas, em, además de mostrar un texto en cursiva, también está señalando a los buscadores que esa parte del contenido es relevante. La cursiva también es empleada para resaltar otras fuentes, nombres propios o bien palabras en otros idiomas:

En Estados Unidos al fútbol se le llama soccer.

Cómo poner negritas en HTML

Para poner negritas hay dos etiquetas que también han de tener su cierre: <b> y <strong>. Ejemplo:

<b>Así es como se pone un texto en negrita</b>

<strong>Y así también se pone un texto en negrita</strong>

Las dos etiquetas tienen la misma función pero la strong le da más fuerza de cara a los buscadores, por lo que sería aconsejable utilizar más esta etiqueta.

Cómo poner subrayado en HTML

Para poder subrayar un texto en html sólo existe una etiqueta: <u>. Y como el resto, debe tener también su etiqueta de cierre:

<u>Así es como se pone un texto con subrayado</u>

El subrayado se utiliza para resaltar muy bien un texto y a diferencia de la negrita, se emplea más en situaciones de frases largas, ya que en negrita quedaría muy cargante.

¡No olvides que estos recursos son de complemento y ayuda y se deben utilizar sólo en caso de necesidad y no ser demasiado agresivo con los buscadores!

Tamaños de letra

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno,donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Se escribirián así:

<H1>Tu TEXTO </H1>
<H2>Tu TEXTO </H2>
<H3>Tu TEXTO </H3>
<H4>Tu TEXTO </H4>
<H5>Tu TEXTO </H5>
<H6>Tu TEXTO </H6>

No hay que olvidar poner el cierre a cada elemento utilizado.

Cambiar el color a los TEXTOS HTML.

<font color="red">Este texto está en ROJO</font>

Este texto está en ROJO

<span style="color: #0105FF;">Texto en AZUL</span>

Texto en AZUL

<div class="sinlink"><br/><center><font size='4'><font color="Yellow">Texto AMARILLO</font></center></div>

Texto AMARILLO

Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

<font size=3>Tu TEXTO...</font>

Tu TEXTO...

Cambiar el tipo de LETRA.

<FONT FACE="arial">ARIAL.</FONT>

ARIAL.

<FONT FACE="times new roman">TIMES NEW ROMAN</FONT>

TIMES NEW ROMAN

<FONT FACE="courier new"> COURIER NEW</FONT>

COURIER NEW

<FONT FACE="courier">COURIER</FONT>

COURIER

<FONT FACE="roman">ROMAN</FONT>

ROMAN

<FONT FACE="small fonts">SMALL FONTS</FONT>

SMALL FONTS

<FONT FACE="tahoma">TAHOMA</FONT>

TAHOMA

<FONT FACE="impact">IMPACT</FONT>

IMPACT

Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño.

<FONT FACE="impact" SIZE=6 COLOR="red">

IMPACT

https://www.snsmarketing.es/blog/como-poner-cursiva-negrita-y-subrayado-en-html/
https://solamentecodigoshtmlbybcn.jimdo.com/tama%C3%B1os-y-tipos-de-letras-html/

Read more...

Cambiar el rótulo 'Mostrando entradas con la etiqueta'

En Blogger, cuando se accede a la página de cualquier etiqueta, nos sale en la parte superior un rótulo dentro de un recuadro gris, que nos indica que estamos viendo las entradas filtradas por esa etiqueta y adicionalmente un enlace para volver a la página de Inicio del blog (Mostrar todas las entradas).

Anteriormente vimos otro sistema que consistía en eliminar del todo el widget que genera este mensaje (status-message) y generar uno nuevo con nuestro propio código (Ver: Cabecera para páginas de etiquetas. Secciones del blog). pero lo de hoy será más sencillo porque iremos directamente al código del artilugio para cambiar allí sólo la parte que nos interesa.

Advierto que quizás no sea perfecto y que en algunas combinaciones de búsquedas + etiquetas + contenido nulo, el mensaje podría no quedar muy ajustado, pero la sencillez del cambio creo que compensa esos problemas menores... si se dieran.


La parte que nos interesa está en un includable que tiene id='status-message', por lo que editando nuestra plantilla HTML, pinchando en cualquier parte de la ventana o recuadro que contiene el código y pulsando CTRL+F, nos será fácil encontrarlo con el buscador interno de código y precisamente esa palabra clave: status-message. Luego sólo es cuestión de pinchar en la flecha a la izquierda si no aparece desplegado.

Nota: No uséis el buscador del navegador que es una de las cosas que he detectado que más problemas os genera.

En la mayoría de plantillas, será la tercera coincidencia encontrada y es inconfundible porque empieza por <b:includable id='status-message'> y no lleva barra de cierre al final (/). Este sería el artilugio original completo (para localizarlo bien y por si queréis revertir los cambios algún día):

<b:includable id='status-message'>
 <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
   <div class='status-msg-body'>
    <data:navMessage/>
   </div>
   <div class='status-msg-border'>
    <div class='status-msg-bg'>
     <div class='status-msg-hidden'><data:navMessage/></div>
    </div>
   </div>
  </div>
  <div style='clear: both;'/>
 </b:if>
</b:includable>

Lo que hay que cambiar es justo lo que he marcado en verde y lo que ahí escribamos será lo que saldrá dentro del recuadro gris. Podría ser un simple texto como "Mostrando entradas filtradas", pero también podemos usar algunos truquillos para que se vean datos adicionales.


Por ejemplo, la magia la hace en el siguiente caso las dos data que veis, que son respectivamente para mostrar la etiqueta seleccionada o la palabra insertada en un buscador interno básico.

Poniendo las dos, si una no existe porque estamos en página de etiquetas y no de búsqueda o viceversa, simplemente se mostrará una sí y la otra no. Adicionalmente he puesto un enlace para mostrar todas las entradas (con destino la página inicial) a similitud de lo que hace el artilugio original.

El resultado sería algo así como así como "Mostrando las recetas de pasta. Mostrar todas las entradas.".

Mostrando las recetas de <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>

Otra cosa útil sería ver el número de entradas como resultado del filtrado ("Viendo 5 artículos sobre libros"), para lo cual echamos mano de data:numPosts:

Viendo <data:numPosts/> artículos sobre <b><data:blog.searchQuery/><data:blog.searchLabel/></b>

Y ahora que conocemos esa variable que nos muestra el número de entradas ¿por qué no mostrar un rótulo distinto cuando se acaban? En este caso se vería el rótulo estándar y cuando avanzamos por recientes/antiguas, al llegar al final nos enseñaría un mensaje de que no hay más artículos para ver.

<b:if cond='data:numPosts == 0'>
 No hay más artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>.
<b:else/>
 Mostrando los artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas</a>.    
</b:if>

Por último, todo lo visto junto: condición para cuando no hay entradas y número de entradas junto con el nombre de la etiqueta o la palabra tecleada en el buscador, más un enlace al inicio:

<b:if cond='data:numPosts == 0'>
 No hay más artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>.
<b:else/>
  Mostrando <data:numPosts/> artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>    
</b:if>

Como es costumbre, en estos enlaces podéis ver la cosa funcionando: 1 y 2.

Creo que con esto quedará bastante completito, pero es que tampoco se me ocurría ninguna variante más ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Otros enlaces:

• Como modificar "Mostrando entradas con la etiqueta...
• Personalizar la barra de estatus en Blogger

Fuente: https://www.oloblogger.com/2013/11/cambiar-mostrando-entradas-status.html

Read more...

¿Estás buscando alguna de estas características de LinkedIn?

¿Estás buscando alguna de estas características de LinkedIn?

• Página de inicio
• Encontrar gente
• Encontrar trabajos
• Encontrar respuestas
• Encuentra empresas

• Mi cuenta
• Mi perfil
• Mis contactos
• Mi bandeja de entrada

• Herramientas
• Barra de herramientas de Outlook
• Barra de herramientas del navegador
• Sobre LinkedIn

Read more...

Como Bloquear y Desbloquear Gadgets en Blogger

¿Te ha sucedido que en un momento te aparecen gadgets, y no los puedes eliminar o no los puedes mover de un lado a otro, o en ocasiones quieres dejar un gadget de forma permanente en un lugar determinando? Hoy vamos a ver como hacer esto en el siguiente post.

Bloquear un Gadget en Blogspot.

Vamos a proceder a bloquear primeramente un gadget. Para ello nos vamos a nuestra cuenta de blogger, elegimos el blog en donde vamos a trabajar, (esto si administras varios), e ingresamos al blog.

Una vez que dentro, vamos a nuestro lado izquierdo de la pantalla y buscamos la pestaña "DISEÑO", e ingresamos.

Como en este caso vamos a bloquear un gadget, nos aparecerán de esta forma, por lo que podemos observar en la imagen, estos gadgets no están bloqueados.

Lo editamos y vamos a buscar en la barra de dirección, la ultima frase tal y como lo muestra la imagen, en mi caso seria el siguiente, "PlusFollowers1" esto varia en cada gadget, en mi caso seria esto.

Ahora lo copiamos y no vos a "PLANTILLA > EDITAR HTML " una vez que ya se haya cargado la pagina podremos observar todo el código html de nuestro blog, lo que haremos es presionar las teclas "Ctrl + F" y con esto obtendremos la opción de buscar.

En la opción buscar pegamos lo que hemos copiado "PlusFollowers1" y presionamos la tecla Enter. 

En la misma linea donde esta "PlusFollowers1" (en mi caso) cambiaremos la palabra "FALSE" y colocaremos la palabra "TRUE", sin quitar las comillas.

Ahora solo nos queda dar clic en guardar plantilla y ya tendremos bloqueado el gadget. Si vamos a Diseño y buscamos el gadget que bloqueamos, nos podremos dar cuenta que ya no se puede mover ni eliminar.

Desbloquear un Gadget en Blogspot.

Ahora para poder desbloquear un gadget, el procedimiento es el mismo que el anterior, solamente que ahora en lugar de cambiar de que diga "TRUE" vamos a colocar "FALSE", y guardamos la plantilla.

http://dinerointerptc.blogspot.com/2015/02/como-bloquear-y-desbloquear-gadgets-en-blogger.html

Read more...