Está en la página 1de 19

HTML

Formato al texto

Etiquetas.
La unida bsica del lenguaje HTML son las etiquetas.
Una etiqueta es una cadena formada por los smbolos de menor y mayor y entre ellos una cadena que determina el nombre de la etiqueta.

< Nombre_de_la_etiqueta >

Generalmente las etiquetas se utilizan como delimitadores, por lo cual una etiqueta esta compuesta de una parte que indica el inicio u el complemento que indica la finalizacin. Sintaxis: Etiqueta con inicio u fin <Etiqueta_Inicio> Texto contenido < / Etiqueta_Fin>

Tambin existen etiquetas simples las cuales se componen solo de la parte de inicio.
Sintaxis: Etiqueta Simple <Etiqueta_Inicio>

Atributos de las etiquetas.


Las etiquetas contienen una serie de parmetros para poder personalizar la operacin que deslizan. Estos parmetros son llamadas Atributos de la etiqueta. Los atributos son parmetros que se configuran en el momento de generar una etiqueta.

Sintaxis:
< Etiqueta atributo1= Valor atributo2=Valor > Texto Contenido </Etiqueta>

Notas:
1. El atributo se genera del par nombre = Valor 2. El valor del atributo siempre se escribe entre comillas. 3. Los atributos son denotados dentro de la etiqueta de inicio.

4. Los atributos se separan entre ellos a travs de espacios en blanco.

Estructura de un documentos HTML.


La estructura bsica de un documentos HTML esta compuesto por una secuencia de etiquetas. A continuacin se muestra la estructura bsica de un documentos HTML.
<html> <head>

Datos de configuracin del documento.


</head>

<body> Cuerpo del documento.

</body>
</html>

1. La etiqueta <html> indica el inicio de un documento HTML. 2. La etiqueta <head> es util, para configurar datos acerca del documento 3. La etiqueta <body> agrupa a todo el contenido del documento

Etiquetas para Prrafo.


Etiqueta para delimitar prrafo.

<p> Texto prrafo </p>


Operacin Valores
center left right justify

Atributos: Atributo
align

Alinea el prrafo

Ejemplos.
<p>Es un discurso ciertamente muy interesante de un innovador que comenta su forma de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros, sujeto cada vez con mucha mayor frecuencia a ms cambios. </p>

<p align=center>Es un discurso ciertamente muy interesante de un innovador que comenta su forma de afrontar los cambios en un camino profesional, como el de cualquiera de nosotros, sujeto cada vez con mucha mayor frecuencia a ms cambios. </p>

Etiqueta para Encabezados.


Para generar encabezados en un documento HTML, se utilizan las etiquetas de encabezado. Las etiquetas de encabezado formatean el texto en estilo negritas y con un tamao de fuente especifico. Sintaxis:

<hn>Texto de encabezado del documento </hn>


donde:

h. Indica que se esta generando un encabezado o titulo. n. Es un numero entero que indica el tipo de encabezado
Valore posibles para n = {1, 2, 3, 4, 5, 6} Al terminar la etiqueta de encabezado, se genera automticamente un salto de lnea. Atributos.
Atributo align Operacin Alinea el encabezado Valores center left right justify

Encabezados. Ejemplos
Encabezado 1, tamao fuente: 6 Encabezado 2, tamao fuente: 5 Encabezado 3, tamao fuente: 4

Encabezado 4, tamao fuente: 3 Encabezado 5, tamao fuente: 2 Encabezado 6, tamao fuente: 1

Encabezados. Ejemplos

Por default: Si no se indica una alineacin se aplica alineacin a la izquierda

Formato del texto.


Cuando se requiere personalizar el formato del texto en documentos HTML, se utilizan varias etiquetas, una de las mas importantes es la etiqueta <font>
La etiqueta font permite configurar: 1. 2. Tipo de letra. Color de la letra

3.

Tamao de la letra

Sintaxis.

<font>Texto para formatear</font> Atributo face size Operacin Determina tipo de letra Determina el tamao de la letra Valores Fuentes del sistema cliente {1, 2, 3, 4, 5, 6, 7}

color
Importante.

Configura el color de la letra

Tabla de colores HTML

El conjunto de fuentes, es aquel que existe en el equipo donde ser reproducido el documento HTML.

Configurando tipo de letra

Tipo: Arial black Tipo: times New Roman Tipo: symbol

Configurando tipo de letra


Se pueden configurar varios tipos de letras, as en caso que el equipo cliente no cuente con la primera tendr la opcin de ejecutar alguna de la lista de configurada.

Fuente conocida por el diseador, pero no conocida por el equipo cliente

En este caso se muestra que el tipo de letra: miFuente no existe en el equipo cliente, pero se ejecuta la configuracin de una segunda fuente para el texto

Tamao de la letra.
Para determinar el tamao de la letra se utiliza el atributo size de la etiqueta <font>.

Configuracin del tamao de la letra.

Configuracin de tipo y tamao de la letra.

Configuracin del Color de la letra.


Para determinar el color de la fuente se realiza mediante el atributo color de la etiqueta <font>. El valor para el atributo se puede proporcionar con el nombre del color (en ingles) o con un valor hexadecimal.

Color mediante nombre del color.

Color mediante Cdigo Hexadecimal.

Saltos de lnea.
En un documento HTML, los saltos de lnea se generan en los siguientes casos: 1. 2. Despus de una etiqueta prrafo <p></p> Despus de una etiqueta de encabezado <hn></hn>

Para genera explcitamente un salto de lnea, se utiliza la etiqueta <br>


Sintaxis. Lnea del documento <br> <br> lnea del documento <p>prrafo del documento</p> <br><p>prrafo del documento</p> <br><br><br>

Importante.

Como se puede observar esta etiqueta no cuenta con inicio y fin, pues es una solo (inicio)

Separador Vertical
La etiqueta <hr> permite agregar separadores verticales en un documento HTML. Sintaxis.

<hr>
Atributos. Atributo width size noshade align Operacin Determina el ancho (longitud horizontal) del separador. Determina la altura o espesor del separador. Si se aparece este atributo se elimina la sombra del separador Alineacin del separador Valores Valor entero en pixeles o en porcentaje En pixeles Ninguno Alinea el separador (solo si no esta al 100% de ancho)

Texto en negritas.
La etiqueta <b> permite aplicar estilo negritas al texto del documento HTML. Sintaxis. <b>Texto para formatear</b>

Texto en estilo Normal

Texto en estilo Negritas

Texto en Cursivas.
La etiqueta <i> permite aplicar estilo cursivas al texto del documento HTML. Sintaxis. <i>Texto para formatear</i>

Texto estilo normal

Texto estilo Cursivas

Texto Subrayado.
La etiqueta <u> permite aplicar estilo subrayado al texto del documento HTML. Sintaxis. <u>Texto para formatear</u>

Texto estilo Normal.

Texto estilo Subrayado.

Etiquetas anidadas.
1 2 3 Secuencia de apertura: <b> <i> <u> secuencia de cierre: </u> </i> </b> 3 2 1

Esto aplica para todas las etiquetas de formato de texto.