SlideShare uma empresa Scribd logo
1 de 19
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>
Sintaxis: Etiqueta Simple
<Etiqueta_Inicio>
También existen etiquetas simples las cuales se componen solo de la parte de 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.
Atributos:
Atributo Operación Valores
align Alinea el párrafo center
left
right
justify
Ejemplos.
<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>
<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> Texto párrafo </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
letra
{1, 2, 3, 4, 5, 6, 7}
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 de tipo y
tamaño de la letra.
Configuración del
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 Código Hexadecimal.
Color mediante nombre del color.
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
horizontal) del separador.
Valor entero en pixeles o en
porcentaje
size Determina la altura o espesor
del separador.
En pixeles
noshade Si se aparece este atributo se
elimina la sombra del separador
Ninguno
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 Negritas
Texto en estilo Normal
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 Subrayado.
Texto estilo Normal.
Etiquetas anidadas.
Secuencia de apertura: <b> <i> <u>
…
secuencia de cierre: </u> </i> </b>
1 2 3
3 2 1
1 2 3 3 2 1
Esto aplica para todas las etiquetas de
formato de texto.

Mais conteúdo relacionado

Mais procurados (20)

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
 
Html
HtmlHtml
Html
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
HTML
HTMLHTML
HTML
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
html
htmlhtml
html
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Html
HtmlHtml
Html
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5
 
Conceptos básicos y etiquetas
Conceptos básicos y etiquetasConceptos básicos y etiquetas
Conceptos básicos y etiquetas
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
 
Fichas de html 2014
Fichas de html 2014Fichas de html 2014
Fichas de html 2014
 
Texto del manual de html
Texto del manual de htmlTexto del manual de html
Texto del manual de html
 
Guia básica html
Guia básica htmlGuia básica html
Guia básica html
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Html
HtmlHtml
Html
 

Semelhante a 02 texto (20)

Html 01
Html 01Html 01
Html 01
 
HTML
HTMLHTML
HTML
 
Manual intencivo de htlm
Manual intencivo de htlmManual intencivo de htlm
Manual intencivo de htlm
 
Primera Clase de xhtml
Primera Clase de xhtmlPrimera Clase de xhtml
Primera Clase de xhtml
 
Clase1
Clase1Clase1
Clase1
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
 
Lenguaje HTML y CSS
Lenguaje HTML y CSSLenguaje HTML y CSS
Lenguaje HTML y CSS
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Manual html
Manual htmlManual html
Manual html
 
Curso html
Curso   htmlCurso   html
Curso html
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Primera clasee
Primera claseePrimera clasee
Primera clasee
 
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)
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 

Último

DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdfBIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdfCESARMALAGA4
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptAlberto Rubio
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdfOswaldoGonzalezCruz
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteJuan Hernandez
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIATRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIAAbelardoVelaAlbrecht1
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALEDUCCUniversidadCatl
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfDaniel Ángel Corral de la Mata, Ph.D.
 
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfluisantoniocruzcorte1
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...fcastellanos3
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfvictorbeltuce
 
Los Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadLos Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadJonathanCovena1
 

Último (20)

DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdfBIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
BIOLOGIA_banco de preguntas_editorial icfes examen de estado .pdf
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
 
PPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptxPPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptx
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parte
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIATRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
TRIPTICO-SISTEMA-MUSCULAR. PARA NIÑOS DE PRIMARIA
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
 
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
 
Los Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadLos Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la Sostenibilidad
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 

02 texto

  • 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> Sintaxis: Etiqueta Simple <Etiqueta_Inicio> También existen etiquetas simples las cuales se componen solo de la parte de 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. Atributos: Atributo Operación Valores align Alinea el párrafo center left right justify Ejemplos. <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> <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> Texto párrafo </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 letra {1, 2, 3, 4, 5, 6, 7} 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 de tipo y tamaño de la letra. Configuración del 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 Código Hexadecimal. Color mediante nombre del color.
  • 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 horizontal) del separador. Valor entero en pixeles o en porcentaje size Determina la altura o espesor del separador. En pixeles noshade Si se aparece este atributo se elimina la sombra del separador Ninguno 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 Negritas Texto en estilo Normal
  • 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 Subrayado. Texto estilo Normal.
  • 19. Etiquetas anidadas. Secuencia de apertura: <b> <i> <u> … secuencia de cierre: </u> </i> </b> 1 2 3 3 2 1 1 2 3 3 2 1 Esto aplica para todas las etiquetas de formato de texto.