SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
HTML

Formato al texto
Etiquetas.
La unida básica del lenguaje HTML son las etiquetas.
Una etiqueta es una cadena formada por los símbolos 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 finalización.

Sintaxis: Etiqueta con inicio u fin

                    <Etiqueta_Inicio> Texto contenido < / Etiqueta_Fin>

También 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 parámetros para poder personalizar la operación que
deslizan.
                    Estos parámetros son llamadas Atributos de la etiqueta.
Los atributos son parámetros 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 través de espacios en blanco.
Estructura de un documentos HTML.
La estructura básica de un documentos HTML esta compuesto por una secuencia de
etiquetas. A continuación se muestra la estructura básica de un documentos HTML.


              <html>
                        <head>
                                  Datos de configuración 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 Párrafo.
Etiqueta para delimitar párrafo.     <p> Texto párrafo </p>
Atributos:

   Atributo                        Operación                       Valores
     align                    Alinea el párrafo                     center
                                                                      left
                                                                     right
                                                                    justify
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 más 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 más 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 tamaño 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 automáticamente un salto de línea.

Atributos.

     Atributo                     Operación                                 Valores
       align                  Alinea el encabezado                          center
                                                                              left
                                                                             right
                                                                            justify
Encabezados. Ejemplos
                                 Encabezado 1, tamaño fuente: 6
                                 Encabezado 2, tamaño fuente: 5
                                 Encabezado 3, tamaño fuente: 4




Encabezado 4, tamaño fuente: 3

Encabezado 5, tamaño fuente: 2

Encabezado 6, tamaño fuente: 1
Encabezados. Ejemplos




          Por default:
Si no se indica una alineación se
 aplica alineación 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.   Tipo de letra.
           2.   Color de la letra
           3.   Tamaño de la letra

         Sintaxis.

                                 <font>Texto para formatear</font>

                Atributo                        Operación                           Valores
                  face                   Determina tipo de letra         Fuentes del sistema cliente

                  size                 Determina el tamaño de la              {1, 2, 3, 4, 5, 6, 7}
                                                 letra
                  color                Configura el color de la letra      Tabla de colores HTML

  Importante.
  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 opción de ejecutar alguna de la lista de configurada.




                                                                              Fuente conocida por el
                                                                         diseñador, 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 configuración de
      una segunda fuente para el
                  texto
Tamaño de la letra.
Para determinar el tamaño de la letra se utiliza el atributo size de la etiqueta <font>.




                                                                                    Configuración del
                                                                                    tamaño de la letra.




Configuración de tipo y
  tamaño de la letra.
Configuración 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 Código Hexadecimal.
Saltos de línea.
En un documento HTML, los saltos de línea se generan en los siguientes casos:
     1.   Después de una etiqueta párrafo <p>…</p>
     2.   Después de una etiqueta de encabezado <hn>…</hn>
Para genera explícitamente un salto de línea, se utiliza la etiqueta <br>

              Sintaxis.
                                     Línea del documento <br>
                                     <br> línea del documento
                                     <p>párrafo del documento</p>
                                     <br><p>párrafo 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                        Operación                           Valores
               width                 Determina el ancho (longitud    Valor entero en pixeles o en
                                      horizontal) del separador.              porcentaje
               size                 Determina la altura o espesor               En pixeles
                                          del separador.
             noshade                Si se aparece este atributo se              Ninguno
                                   elimina la sombra del separador
               align                   Alineación del separador      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




        1   2   3                 3   2     1


Esto aplica para todas las etiquetas de
           formato de texto.

Contenu connexe

Tendances (16)

Jessik
JessikJessik
Jessik
 
Jessik
JessikJessik
Jessik
 
word en ingles
word en inglesword en ingles
word en ingles
 
Tarea de informatica[1]
Tarea de informatica[1]Tarea de informatica[1]
Tarea de informatica[1]
 
Informatica para septimo grado
Informatica para septimo gradoInformatica para septimo grado
Informatica para septimo grado
 
Ejerciciosword
EjercicioswordEjerciciosword
Ejerciciosword
 
isai
isaiisai
isai
 
Funciones de texto
Funciones de textoFunciones de texto
Funciones de texto
 
Herramientas de word y sus
Herramientas de word y susHerramientas de word y sus
Herramientas de word y sus
 
Uso de los Estilos de Word
Uso de los Estilos de WordUso de los Estilos de Word
Uso de los Estilos de Word
 
Ejerciciosword
EjercicioswordEjerciciosword
Ejerciciosword
 
Html
HtmlHtml
Html
 
Conozcamos a Word
Conozcamos a WordConozcamos a Word
Conozcamos a Word
 
Final ofimatica
Final ofimaticaFinal ofimatica
Final ofimatica
 
Final ofimatica
Final ofimaticaFinal ofimatica
Final ofimatica
 
word
wordword
word
 

Similaire à Html 01

Similaire à Html 01 (20)

02 texto
02 texto02 texto
02 texto
 
HTML
HTMLHTML
HTML
 
Texto enrriquecido HTML
Texto enrriquecido HTMLTexto enrriquecido HTML
Texto enrriquecido HTML
 
html
htmlhtml
html
 
Inf2_ p1 a_exc2_danna
Inf2_ p1 a_exc2_dannaInf2_ p1 a_exc2_danna
Inf2_ p1 a_exc2_danna
 
Inf2 p1 a_exc2_danna
Inf2 p1 a_exc2_dannaInf2 p1 a_exc2_danna
Inf2 p1 a_exc2_danna
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
HTML
HTMLHTML
HTML
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Clase1
Clase1Clase1
Clase1
 
HTML
HTMLHTML
HTML
 
Tema 02 trabajando con texto en html
Tema 02 trabajando con texto en htmlTema 02 trabajando con texto en html
Tema 02 trabajando con texto en html
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
 

Html 01

  • 2. Etiquetas. La unida básica del lenguaje HTML son las etiquetas. Una etiqueta es una cadena formada por los símbolos 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 finalización. Sintaxis: Etiqueta con inicio u fin <Etiqueta_Inicio> Texto contenido < / Etiqueta_Fin> También existen etiquetas simples las cuales se componen solo de la parte de inicio. Sintaxis: Etiqueta Simple <Etiqueta_Inicio>
  • 3. Atributos de las etiquetas. Las etiquetas contienen una serie de parámetros para poder personalizar la operación que deslizan. Estos parámetros son llamadas Atributos de la etiqueta. Los atributos son parámetros 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 través de espacios en blanco.
  • 4. Estructura de un documentos HTML. La estructura básica de un documentos HTML esta compuesto por una secuencia de etiquetas. A continuación se muestra la estructura básica de un documentos HTML. <html> <head> Datos de configuración 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
  • 5. Etiquetas para Párrafo. Etiqueta para delimitar párrafo. <p> Texto párrafo </p> Atributos: Atributo Operación Valores align Alinea el párrafo center left right justify 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 más 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 más cambios. </p>
  • 6. 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 tamaño 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 automáticamente un salto de línea. Atributos. Atributo Operación Valores align Alinea el encabezado center left right justify
  • 7. Encabezados. Ejemplos Encabezado 1, tamaño fuente: 6 Encabezado 2, tamaño fuente: 5 Encabezado 3, tamaño fuente: 4 Encabezado 4, tamaño fuente: 3 Encabezado 5, tamaño fuente: 2 Encabezado 6, tamaño fuente: 1
  • 8. Encabezados. Ejemplos Por default: Si no se indica una alineación se aplica alineación a la izquierda
  • 9. 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. Tipo de letra. 2. Color de la letra 3. Tamaño de la letra Sintaxis. <font>Texto para formatear</font> Atributo Operación Valores face Determina tipo de letra Fuentes del sistema cliente size Determina el tamaño de la {1, 2, 3, 4, 5, 6, 7} letra color Configura el color de la letra Tabla de colores HTML Importante. El conjunto de fuentes, es aquel que existe en el equipo donde será reproducido el documento HTML.
  • 10. Configurando tipo de letra Tipo: Arial black Tipo: times New Roman Tipo: symbol
  • 11. 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 opción de ejecutar alguna de la lista de configurada. Fuente conocida por el diseñador, 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 configuración de una segunda fuente para el texto
  • 12. Tamaño de la letra. Para determinar el tamaño de la letra se utiliza el atributo size de la etiqueta <font>. Configuración del tamaño de la letra. Configuración de tipo y tamaño de la letra.
  • 13. Configuración 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 Código Hexadecimal.
  • 14. Saltos de línea. En un documento HTML, los saltos de línea se generan en los siguientes casos: 1. Después de una etiqueta párrafo <p>…</p> 2. Después de una etiqueta de encabezado <hn>…</hn> Para genera explícitamente un salto de línea, se utiliza la etiqueta <br> Sintaxis. Línea del documento <br> <br> línea del documento <p>párrafo del documento</p> <br><p>párrafo del documento</p> <br><br><br>… Importante. Como se puede observar esta etiqueta no cuenta con inicio y fin, pues es una solo (inicio)
  • 15. Separador Vertical La etiqueta <hr> permite agregar separadores verticales en un documento HTML. Sintaxis. <hr> Atributos. Atributo Operación Valores width Determina el ancho (longitud Valor entero en pixeles o en horizontal) del separador. porcentaje size Determina la altura o espesor En pixeles del separador. noshade Si se aparece este atributo se Ninguno elimina la sombra del separador align Alineación del separador Alinea el separador (solo si no esta al 100% de ancho)
  • 16. 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
  • 17. 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
  • 18. 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.
  • 19. Etiquetas anidadas. 1 2 3 Secuencia de apertura: <b> <i> <u> … secuencia de cierre: </u> </i> </b> 3 2 1 1 2 3 3 2 1 Esto aplica para todas las etiquetas de formato de texto.