SlideShare uma empresa Scribd logo
1 de 27
• HTML es un lenguaje muy sencillo que nos permite preparar documentos
  Web insertando en el texto de los mismos una serie de marcas (tags) que
  controlan los diferentes aspectos de la presentación y comportamiento de
  sus elementos.
• Empiezan por la marca <HTML> y finalizarán con la marca </HTML> . Esta
  marca tan solo sirve como identificación del contenido del fichero para ciertos
  programas que realizan cambios masivos en muchas páginas a la vez.

• Los documentos escritos en HTML están estructurados en dos partes
  diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).
• Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes
  elementos:

• <TITLE>.- para dar nombre al documento.

• <META> para forzar a la página activa a ser cargada cada cierto tiempo.

• <BASE> para prefijar la dirección base de los documentos referenciados
  mediante un URL relativo.

  El fichero fuente de un documento HTML podrá
  contener comentarios explicativos que serán ignorados por el browser.
• La cabecera se emplea para facilitar información acerca del documento y
  está delimitada por <HEAD> prólogo </HEAD>.

• Normalmente esta información no se ve cuando se navega por el
  documento. Dentro de la cabecera se podrá definir una breve descripción
  que identifica el documento mediante las marcas <TITLE> y </TITLE>.
• El resto del documento, o sea, todo aquello que no pertenezca a la
  cabecera, residirá entre <BODY> y </BODY>. Esta es la estructura
  mínima que debe poseer todo documento HTML:
        <HTML>
        <HEAD>
        <TITLE>Estructura mínima de un documento HTML
        </TITLE>
        </HEAD>
        <BODY> Documento ...
        </BODY>
        </HTML>
• En el código fuente de una página HTM, los comentarios se
  introducirán entre las marcas: <!-- y -->. Todo texto situado entre
  dichas marcas será ignorado por el browser, y por tanto no será
  visible.

Ejemplo
                <!-- Esto es una línea de comentarios -->
• Para definir y separar bloques de texto se emplean una serie de marcas
  que definen párrafos, texto pre formateado o bloques con significado
  especial como direcciones o citas.
  Marcas de bloques:

                Párrafos. <P>
               Saltos de línea. <BR>
                Línea horizontal. <HR>
                Direcciones. <ADDRESS>
                Centrado de bloques. <CENTER>
• <P> se utiliza para separar párrafos. Dado que para el HTML todo
  el texto es continuo, necesitamos algún mecanismo para indicar el
  principio y el fin de un párrafo. Las marcas inicial y final
  son <P> y </P>.




• El elemento <BR> es vacío por lo que sólo tiene marca inicial.
  Indica un salto de línea.
• <HR> es un elemento vacío por lo que solo tiene marca inicial. Se
  emplea para separar bloques de texto representando una línea
  horizontal.




• El elemento <CENTER> centra los elementos situados entre sus marcas de
  apertura y cierre. Dichos elementos podrán ser: bloques de
  texto, tablas, enlaces, imágenes, formularios.
• En este apartado se indica cómo definir cabeceras
  mediante el elemento <Hn>, y cómo modificar el tamaño y
  color de algún grupo de caracteres mediante el
  elemento <FONT> y sus atributos SIZE y COLOR.
• El elemento <Hn> se utiliza fundamentalmente para escribir
  encabezamientos. Asigna un tamaño a los
  caracteres, dependiendo del valor n, el cual varía de 1 a 6.
• Los más grandes tienen valor 1 y los más pequeños valor 6.
• El texto entre estas marcas se trata en negrita. Se inserta
  automáticamente un salto de párrafo
La estructura de una tabla se define mediante:

•una marca de inicio de la tabla (TABLE),
•una marca de comienzo de una nueva línea (TR) y
•una marca de comienzo de una celda (TD).

Al final de cada uno de estos elementos se deberá definir la
marca de final correspondiente.
Se pueden definir además textos de cabecera en las celdas
(TH) y títulos para las tablas (CAPTION).
• Este elemento permite incluir una imagen en un
  documento. Vendrá siempre acompañado por el atributo
  SRC que indica la dirección del fichero gráfico que
  contiene la imagen:
      <IMGSRC="dirección_URL_del_fichero_gráfico">
Ejemplos: Imagen situada en un fichero local:
      <IMG SRC="images/wmelon.gif">
• Mediante el elemento <BODY> y el atributo BACKGROUND
  se permite utilizar una imagen residente en el servidor, o en
  un fichero local, como fondo de página.

  <BODYBACKGROUND="direccion_del_fichero_grafico">
• Ejemplo:
• <BODY BACKGROUND="images/blanco51.gif">
• Los gráficos animados en formato GIF permiten almacenar
  secuencias de imágenes en un solo fichero, las cuales forman
  animaciones que pueden ser visualizadas directamente por el
  browser. No hay que confundir estos gráficos con los vídeos en
  formato MPG que no son tratados por el browser sino por una
  herramienta

• Ejemplo:
  <IMG SRC="images/frogani.gif">
•   Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de
    objetos, pero la diferencia con los procesadores de texto es que no permite la numeración
    automática para niveles jerárquicos diferentes.

Define varios tipos de listas:Listas sin orden, sin numeración: <UL> , <LI>

•   Listas ordenadas, con numeración: <OL> , <LI>

•   Listas de directorio, similares a las listas sin orden: <DIR> , <LI>

•   Listas de menú , similares a las listas sin orden: <MENU> , <LI>

•   Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>

•   Cualquiera de los tipos de listas nombrados puede ser anidado.
• La marca <LI> es un elemento vacío, o sea, no requiere de marca de
  fin, y es común a las denominadas listas regulares




 • La marca <UL> permite generar listas no ordenadas, cada uno de los
   elementos de la lista irá precedido por un símbolo (fijo por defecto) que
   puede variar según el nivel de anidamiento de la lista.
• La marca <OL> se utiliza para una lista ordenada o
  numerada. Cada marca </LI> incrementará el número
  que se visualizará delante del elemento de la lista
• Las listas ordenadas no sólo se pueden ordenar con
  números. También se pueden utilizar letras y numeración
  romana tanto en mayúsculas como minúsculas. Para esto se
  utiliza el atributo TYPE del elemento <OL> con los siguientes
  valores:

•   TYPE=1 (por defecto) para números,
•   TYPE=A para letras mayúsculas,
•   TYPE=a para letras minúsculas,
•   TYPE=I para numeración romana en mayúsculas,
•   TYPE=i para numeración romana en minúsculas.
Programacion en html

Mais conteúdo relacionado

Mais procurados (19)

¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Páginas html
Páginas htmlPáginas html
Páginas html
 
Páginas web con html
Páginas web con htmlPáginas web con html
Páginas web con html
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
 
Los lenguajes de marcas
Los lenguajes de marcasLos lenguajes de marcas
Los lenguajes de marcas
 
Html
HtmlHtml
Html
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
Fichas de html 2014
Fichas de html 2014Fichas de html 2014
Fichas de html 2014
 
HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
 
HTML
HTMLHTML
HTML
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Creacion de una pagina web con el bloc
Creacion de una pagina web con el blocCreacion de una pagina web con el bloc
Creacion de una pagina web con el bloc
 
Html 000 fundamentos web - bib lioteca
Html 000   fundamentos web - bib liotecaHtml 000   fundamentos web - bib lioteca
Html 000 fundamentos web - bib lioteca
 
Ossa castro kevin alexander 26
Ossa castro kevin alexander     26Ossa castro kevin alexander     26
Ossa castro kevin alexander 26
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 

Semelhante a Programacion en html

Semelhante a Programacion en html (20)

Lenguaje HTML y CSS
Lenguaje HTML y CSSLenguaje HTML y CSS
Lenguaje HTML y CSS
 
Producto 3
Producto 3Producto 3
Producto 3
 
Producto 3
Producto 3Producto 3
Producto 3
 
Html
HtmlHtml
Html
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Conceptos basicos
Conceptos basicosConceptos basicos
Conceptos basicos
 
Conceptos basicos
Conceptos basicosConceptos basicos
Conceptos basicos
 
Html
HtmlHtml
Html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Html juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabadoHtml juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabado
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Producto 3
Producto 3Producto 3
Producto 3
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Clase 1 Pagina WEB.ppt
Clase 1 Pagina WEB.pptClase 1 Pagina WEB.ppt
Clase 1 Pagina WEB.ppt
 

Último

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
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
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
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfNataliaMalky1
 
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
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxc3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxMartín Ramírez
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfDannyTola1
 
Uses of simple past and time expressions
Uses of simple past and time expressionsUses of simple past and time expressions
Uses of simple past and time expressionsConsueloSantana3
 
PPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdfPPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdfEDILIAGAMBOA
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOweislaco
 
É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
 
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
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfAlfredoRamirez953210
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfTarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfCarol Andrea Eraso Guerrero
 

Último (20)

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
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
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
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
 
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
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptxc3.hu3.p1.p3.El ser humano como ser histórico.pptx
c3.hu3.p1.p3.El ser humano como ser histórico.pptx
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdf
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
Uses of simple past and time expressions
Uses of simple past and time expressionsUses of simple past and time expressions
Uses of simple past and time expressions
 
PPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdfPPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdf
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
 
É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
 
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDIUnidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
 
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
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfTarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
 

Programacion en html

  • 1.
  • 2. • HTML es un lenguaje muy sencillo que nos permite preparar documentos Web insertando en el texto de los mismos una serie de marcas (tags) que controlan los diferentes aspectos de la presentación y comportamiento de sus elementos.
  • 3. • Empiezan por la marca <HTML> y finalizarán con la marca </HTML> . Esta marca tan solo sirve como identificación del contenido del fichero para ciertos programas que realizan cambios masivos en muchas páginas a la vez. • Los documentos escritos en HTML están estructurados en dos partes diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).
  • 4. • Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes elementos: • <TITLE>.- para dar nombre al documento. • <META> para forzar a la página activa a ser cargada cada cierto tiempo. • <BASE> para prefijar la dirección base de los documentos referenciados mediante un URL relativo. El fichero fuente de un documento HTML podrá contener comentarios explicativos que serán ignorados por el browser.
  • 5. • La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. • Normalmente esta información no se ve cuando se navega por el documento. Dentro de la cabecera se podrá definir una breve descripción que identifica el documento mediante las marcas <TITLE> y </TITLE>.
  • 6. • El resto del documento, o sea, todo aquello que no pertenezca a la cabecera, residirá entre <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento HTML: <HTML> <HEAD> <TITLE>Estructura mínima de un documento HTML </TITLE> </HEAD> <BODY> Documento ... </BODY> </HTML>
  • 7. • En el código fuente de una página HTM, los comentarios se introducirán entre las marcas: <!-- y -->. Todo texto situado entre dichas marcas será ignorado por el browser, y por tanto no será visible. Ejemplo <!-- Esto es una línea de comentarios -->
  • 8.
  • 9. • Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto pre formateado o bloques con significado especial como direcciones o citas. Marcas de bloques: Párrafos. <P> Saltos de línea. <BR> Línea horizontal. <HR> Direcciones. <ADDRESS> Centrado de bloques. <CENTER>
  • 10. • <P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>. • El elemento <BR> es vacío por lo que sólo tiene marca inicial. Indica un salto de línea.
  • 11. • <HR> es un elemento vacío por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una línea horizontal. • El elemento <CENTER> centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrán ser: bloques de texto, tablas, enlaces, imágenes, formularios.
  • 12.
  • 13. • En este apartado se indica cómo definir cabeceras mediante el elemento <Hn>, y cómo modificar el tamaño y color de algún grupo de caracteres mediante el elemento <FONT> y sus atributos SIZE y COLOR.
  • 14. • El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamaño a los caracteres, dependiendo del valor n, el cual varía de 1 a 6. • Los más grandes tienen valor 1 y los más pequeños valor 6. • El texto entre estas marcas se trata en negrita. Se inserta automáticamente un salto de párrafo
  • 15.
  • 16.
  • 17. La estructura de una tabla se define mediante: •una marca de inicio de la tabla (TABLE), •una marca de comienzo de una nueva línea (TR) y •una marca de comienzo de una celda (TD). Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente. Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).
  • 18.
  • 19. • Este elemento permite incluir una imagen en un documento. Vendrá siempre acompañado por el atributo SRC que indica la dirección del fichero gráfico que contiene la imagen: <IMGSRC="dirección_URL_del_fichero_gráfico"> Ejemplos: Imagen situada en un fichero local: <IMG SRC="images/wmelon.gif">
  • 20. • Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de página. <BODYBACKGROUND="direccion_del_fichero_grafico"> • Ejemplo: • <BODY BACKGROUND="images/blanco51.gif">
  • 21. • Los gráficos animados en formato GIF permiten almacenar secuencias de imágenes en un solo fichero, las cuales forman animaciones que pueden ser visualizadas directamente por el browser. No hay que confundir estos gráficos con los vídeos en formato MPG que no son tratados por el browser sino por una herramienta • Ejemplo: <IMG SRC="images/frogani.gif">
  • 22.
  • 23. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes. Define varios tipos de listas:Listas sin orden, sin numeración: <UL> , <LI> • Listas ordenadas, con numeración: <OL> , <LI> • Listas de directorio, similares a las listas sin orden: <DIR> , <LI> • Listas de menú , similares a las listas sin orden: <MENU> , <LI> • Listas de definición, típicamente un glosario: <DL> , <DT> , <DD> • Cualquiera de los tipos de listas nombrados puede ser anidado.
  • 24. • La marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es común a las denominadas listas regulares • La marca <UL> permite generar listas no ordenadas, cada uno de los elementos de la lista irá precedido por un símbolo (fijo por defecto) que puede variar según el nivel de anidamiento de la lista.
  • 25. • La marca <OL> se utiliza para una lista ordenada o numerada. Cada marca </LI> incrementará el número que se visualizará delante del elemento de la lista
  • 26. • Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: • TYPE=1 (por defecto) para números, • TYPE=A para letras mayúsculas, • TYPE=a para letras minúsculas, • TYPE=I para numeración romana en mayúsculas, • TYPE=i para numeración romana en minúsculas.