Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Html

Html: Formato básico de texto

Etiquetas mas utilizadas en HTML para dar formato a un texto. Maqueta correctamente tus textos para conseguir cautivar a tu lector.

11 diciembre, 2010
en Html
1
Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)
Share on FacebookShare on Twitter

Hemos visto como ejemplo algunas etiquetas que permiten dar formato a nuestro texto. Ahora veremos con más detalle las más utilizadas y ejemplificaremos algunas de ellas posteriormente.

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, cursiva (itálica) …

Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.

Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo cambiamos de línea.

Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.

Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal.

Para introducir un texto alineado a la izquierda escribiríamos:

 

<p align="left">Texto alineado a la izquierda</p>

Para alinear al centro:

 

<p align="center">Texto alineado al centro</p>

Para justificar a la derecha:

 

<p align="right">Texto alineado a la derecha</p>

Ver ejemplo

En cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left (alinear a la izquierda)

El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.

Así, el código:

 

<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>

es equivalente a:

 

<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>

Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado. De esta forma aligeramos un poco el código consiguiendo que la página pese menos y sea cargado más rápido por el navegador. La velocidad con la que carga una página es muy importante, a nadie nos gusta esperar para ver el contenido de una web, sobre todo si llegamos a ella desde un buscador. Solemos hacer click, si tarda mas de 5 segundos solemos pinchar en otra. Hemos perdido un visitante.

Resumen del Contenido

  • Ejemplo práctico:
  • Headings, encabezados
  • Otras etiquetas

Ejemplo práctico:

Para practicar realizar el siguiente ejercicio. Construir una página que tenga, por este orden:

2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda

Ver ejercicio funcionando

Headings, encabezados

Los encabecados nos definen el tamaño de un título o cabecera que podemos utilizar

<h1> nos dá el tipo de letra más grande.

<h6> nos dá el tipo de letra más pequeño.

HTML agrega automaticamente un espacio antes y después de cada título.

<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio. No es bueno abusar de los encabezados, en su justa medida es mas que suficiente.

Ejemplo de como colocar los encabezados

 

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

Ver un ejemplo funcionando

Otras etiquetas

Dejo por aquí algunos de las etiquetas más utilizadas, para ver su funcionamiento solamente tienes que probar

 

<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>

Veamos como queda

Etiquetas: encabezadosHTMLtexto
ANUNCIO
Post anterior

Elementos y etiquetas de HTML

Próximo Post

Html: color, tamaño y tipo de letra

Otros Posts

Web semantica con HTML5

Enlace para llamar por teléfono HTML5

13 marzo, 2016
1

¿Sabes marcar un número de teléfono desde un enlace? Te decimos como hacerlo con una etiqueta HTML5

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Manual HTML: Cómo insertar espacios en blanco y saltos de línea

20 febrero, 2016
0

Continuamos con nuestro manual de HTML, en esta ocasión veremos los espacios en blanco y los saltos de línea. en su día ya vimos como dar formato básico a un texto con HTML, hoy terminaremos...

Por favor logueate para comentar

Recomendados

Algunas herramientas SEO muy útiles

¿Por qué Google no indexa mi contenido correctamente?

18 abril, 2020
Reglas CSS por defecto para los navegadores

CSS: Textos con sombra, contornos, …

20 febrero, 2011
Reglas CSS por defecto para los navegadores

Errores mas comunes al utilizar CSS

20 febrero, 2011
Cómo guardar imágenes optimizadas para la web

Cómo guardar imágenes optimizadas para la web

24 octubre, 2019

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .