Etiquetas para formatear textos

Bienvenidos a un nuevo tutorial y sección en MuOnline Tutoriales.
En esta nueva sección aprenderemos todo lo relacionado al lenguaje PHP y HTML, de esta manera podrán incrementar sus conocimientos y aplicarlos en sus diseños web para el MuOnline.
Como primer tutorial, lo que veremos será un puñado de etiquetas que sirven para formatear textos. Estas etiquetas lo que nos permite será darle diferentes estilos o como dice el título, formatear los textos.
Por ejemplo, veamos la siguiente imagen:

Imagen de texto no formateado

Y ahora veamos esta otra:

Imagen de texto formateado

1) ¿Notan la diferencia?, A simple vista pueden ver que el color es diferente, si poner las dos imágenes juntas, tambien podrán ver que el tamaño es totalmente diferente, y finalmente el estilo de letra o fuente es diferente.
¿Qué fue lo que hice?; la respuesta es simple, apliqué etiquetas a mi texto, el cual le dieron el estilo que yo buscaba y queria.
2)¿Cómo es la sintaxis de estas etiquetas?
Por el momento lo que deben saber es que las etiquetas se aplican de la siguiente forma:

<ETIQUETA>Textos Afectados por la Etiqueta</ETIQUETA>
3)Ahora que tenemos un idea básica sobre las etiquetas, veamos la gran diversidad de ellas que podemos emplear:
<b>Este texto se vera en negrita</b>

Entonces todo lo que pongamos entre las etiquetas <b> </b> se verá en negrita, de esta manera podemos resaltar una palabra dentro de un texto o párrafo.
Como podrán observar una etiqueta debe ser abierta y luego cerrada, la sintaxis debe ser exacta, ya que no hay variantes de éstas.
Para cerrar una etiqueta, basta con agregar una "/" delante de ella.
Continuando con el mismo ejemplo, nos quedaría asi </b>
4)A continuación les dejo una lista variada de diferentes etiquetas:
A)
<B>negrita</B>>
Ejemplo: Este texto se ve en negrita
B)
<U>subrayado</U>
Ejemplo: Este texto se vera subrayado
C)
<I>cursiva</I>
Ejemplo: Este texto se vera en cursiva
D)
<S>tachado</S>
Ejemplo: Este texto se vera tachado
E)
<BIG>Texto mas grande</BIG>
Ejemplo: Este texto se vera mas grande
F)
<SMALL>Texto mas pequeño</SMALL>
Ejemplo: Este texto se vera mas pequeño
G)
<center>Este texto se vera centrado </center>>
Ejemplo:
Este texto se vera centrado
H)
<div align="left"> Este rexto se vera alineado a la izquierda </div>
Ejemplo:
Es texto se vera alineado a la izquierda.
I)
<div align="right"> Este rexto se vera alineado a la derecha </div>
Ejemplo:
Es texto se vera alineado a la derecha.
J.1)
<font size="1">Texto </font>
Ejemplo: Este texto tiene un tamaño 1
J.2)
<font size="2">Texto </font>
Ejemplo: Este texto tiene un tamaño 2
J.3)
<font size="3">Texto </font>
Ejemplo: Este texto tiene un tamaño 3
J.4)
<font size="4">Texto </font>
Ejemplo: Este texto tiene un tamaño 4
J.5)
<font size="5">Texto </font>
Ejemplo: Este texto tiene un tamaño 5
J.6)
<font size="6">Texto </font>
Ejemplo: Este texto tiene un tamaño 6
J.7)
<font size="7">Texto </font>
Ejemplo: Este texto tiene un tamaño 7
K)
<font color="blue">Texto de color azul </font>
Ejemplo: Este texto se vera color azul
L)
<font face=”verdana”>Texto escrito en verdana </font>
Ejemplo: Este texto se vera con una fuente verdana
Eso es todo por ahora, más adelante veremos otro tipo de etiquetas, atributos y combinaciones de estas.

Codigo.txt [8 KB]

¿Necesitas ayuda? Visita www.iceventas.com y nosotros lo hacemos por ti.

Se han publicado un total de 2 comentarios en Mu Online Tutoriales :

15 de octubre de 2014, 9:23

Muy bueno no había visto este tutoriales antes, tuve que aprender por mi mismo que son algunos códigos que veía en los PHP viendo sus resultados en la web. Con esto ya se un poco mas, genial gracias por los aportes.

15 de octubre de 2014, 10:01

Anónimo : Saludos

Publicar un comentario en la entrada