Hola en esta ocasión vamos a ver las etiquetas para manejar textos con nuestros documentos HTML5 ya que en muchas ocasiones nos vamos a presentar con que vamos a usar texto ya se para títulos, párrafos, palabras en negritas y otras más frecuentes así que veámoslas para ver cómo se coloca para cada una de ellas así que comencemos.
Empezamos viendo lo que son los títulos ese tipo de texto necesita estar bien ubicado que generalmente es arriba de todos los textos así que veamos lo que se necesita para colocar
Títulos
Y son las etiquetas
H1 H2 H3 H4 H5 H6
Estas seis etiquetas sirven para colocar títulos o también si gustas subtítulos porque si colocamos uno dentro de h1 va a ser más grande que si colocamos uno en H2 así que va de forma descendiente y así es como se logra
Un ejemplo sencillo es lo siguiente:
<h1>Titulo con un H1</h1> <h2>Titulo con un H2</h2> <h3>Titulo con un H3</h3> <h4>Titulo con un H4</h4> <h5>Titulo con un H5</h5> <h6>Titulo con un H6</h6>
como se ve cada uno:
Puedes ver como se ve de forma descendiente y que automáticamente se le da como una fuente y también un texto en negritas
Nota: hay que tener en cuenta que no en todos los navegadores que existen dan la misma tipografía y o el tamaño así que no te fíes mucho de ellos prueba con varios:)
Ahora que ya sabemos cómo trabajar en ello vamos con los párrafos así que trabajemos en ellos
Bueno para los párrafos es solo con :
<p>Este es el primer parrado</p> <p>Este es el segundo parrafo</p>
Puedes ver que si creas otro párrafo se separa ósea que se escribe otro detrás de otro y así debería de ser muy fácil distinguir de entre párrafos así que mejor vemos un ejemplo:
Y bueno hay otras muchas más que se pueden tocar pero mejor te muestro la etiqueta para que sirve, un ejemplo en código y por ultimo un ejemplo de como se ve para que veas lo útil que es cada una de ellas así que comencemos:
Estilos de fuentes:
b :esta etiqueta sirve para colocar texto en negritas se puede meter dentro de un parrafo:
<b>Este texto se vera en negro</b>
i :esta etiqueta pone el texto en italica y tambien puede ir dentro de un span o de un parrafo:
<i>Este texto se ve en italica</i>
u : esta etiqueta subraya el texto y tambien pueder ir dentro de un parrafo o span
<u>se ve este texto subrayado</u>
em : esta etiqueta sirve para enfatizar el texto y al igual puede ir dentro de un parrafo o span
<em>este texto se ve enfatizado</em>
strong : esta etiqueta agrega fuerte al texto pueder ir en parrafo o span
<strong>Este texto se ve Fuerte</strong>
code: Esta etiqueta agrega fuente code al texto y bueno igual que los demas
<code>Este texto tiene fuente code</code>
cite: esta etiqueta coloca fuente Citation al texto
<cite>Texto con fuente Citation</cite>
kbd :esta etiqueta agrega fuente Keyboard al texto
<kbd>Texto con fuente Keyboard </kbd>
samp :esta etiqueta agrega la fuente Sample al texto
<samp>Texto con fuente Sample</samp>
tt :esta etiqueta agrega la fuente Teletype al texto
<tt>texto con fuente Teletype </tt>
big :esta etiqueta agrega texto grande
<big>Texto grande</big>
small : esta etiqueta converte texto a pequeño
<small>texto chico</small>
sub: converte el texto en subindice
<p>texto<sub>subindice</sub></p>
sup : convierte texto en superindice
<p>texto <sup>superindice</sup></p>
Tamaño de fuentes:
y tambien esan la etiquetas para lo que es el tamaño de fuentes asi que veamosla:
font size: aui le tenemos que agregar un atributo asi que veamos el codigo:
<p>texto <font size=4>con tamaño distinto</font> </p>
Tipo de fuentes:
al igual que vimos que con font size de puede modificar el tamaño del texto se puede cambiar el tipo de fuente y es con:
font face
<p>texto <font face="verdana">con distinta fuente</font> </p>
continuamos con bloques
vimos como son los parrafos pero no vimos los atributos que le podemos atribuir , ya sabes que id y class son por defecto pero tambien estan
align="left" , align="right" ,
align="center" y align="justify"
y bueno como lo indica sus letras en ingles es el de aliniar el parrafo ya sea para izquierda, derecha, centrar o jutificar respectivamente
<p align="left"> <b>parrafo aliniado a la Izquierda:</b> <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p> <p align="right"> <b>parrafo aliniado a la Derecha:</b> <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p> <p align="center"> <b>parrafo aliniado a la Centro:</b> <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p> <p align="justify"> <b>parrafo aliniado a la Justificado:</b> <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
tambien en ocaciones queremos mostrar codigo o te preguntaras de que forma muestro codigo sin que el navegador lo renderise como tal asi que la ayuda viene de
pre :etiqueta que ayuda a mostrar codigo html5
<pre> <p>hola este es un parrafo que si muestra las etiquetas p</p> </pre>
tenemos otra etiqueta la cual es:
blockquote: etiqueta que coloca una tabulacion en la izquiera y en la derecha que en muchas ocaciones es muy util
<blockquote> este es una cita </blockquote>
y por ultimo tenemos dos grandes que nos ayudan mucho y son el br y el hr
br:etiqueta que coloca un salto de linea
<p>parrafos separados mas de lo normal por br</p> <br> <br> <br> <br> <p>parrafos separados mas de lo normal por br</p>
hr: etiqueta que coloca una linea ocupando toda la pagina o todo su contenedor
<p>parrafos separados por hr</p> <hr> <p>parrafos separados por hr</p>
esta etiqueta tambien se puede agregar atributos como ancho, posicion, color:
<p>parrafos separados por hr</p> <hr align="right" width="66%" color="#0000ff"> <p>parrafos separados por hr</p>
saludos
No hay comentarios:
Publicar un comentario