SlideShare una empresa de Scribd logo
ELEMENTOS BÁSICOS Y ESTRUCTURA DE
         UNA PÁGINA WEB
             Adriana Farias
             Charly López
               1001 J.T.
•   Directivas
•   Piense en directivas o etiquetas como hablar con el browser, o sea es la manera de darle
    instrucciones.
•   Abajo se dan los siguientes ejemplos de directivas:
•   <HTML>
•   </HTML>
•   La primera directiva es de inicio y la siguiente es una directiva del cierre.
•   Para hacer una directiva de cierre, simplemente agregan un signo / a la directiva de
    inicio.
•   La mayoría de directivas, pero no todas tienen una directiva del cierre.
•   Las directivas o comandos se pueden realizar en mayúsculas o minúsculas.
ESTRUCTURA BÁSICA DE UNA PÁGINA WEB

•   (HTML)
•   (HEAD)
•   (TITLE)Titulo de la página</TITLE
•   (/HEAD)
•   (BODY)
•   (Aquí van las directivas del contenido de la página)
•   (/BODY)
•   (/HTML)
EXPLICACIÓN DE LA ESTRUCTURA BÁSICA
•   (HTML)(Principio del documento html)
•   (HEAD)(Inicia título)
•   (TITLE)(Titulo de la página (/TITLE)
•   (/HEAD)(Finaliza título)
•   (BODY)(inicia cuerpo del documento)
•   (aquí van las directivas del contenido de la página)
•   (/BODY)(Final del cuerpo del documento)
•   (/HTML)(Final del documento htlm)
•   Directiva <HTML>
•   Indica a la computadora que se trata de un programa HTLM.
•   Todo programa HTML tiene dos partes El encabezado especificado por la directiva
    <HEAD> y el cuerpo indicado por la directiva <BODY>
Directiva <HEAD>
•   Dentro se colocan las directivas para proporcionar información de la página a los
    buscadores robóticos de Internet y otras directivas como
    <TITLE>, <META>, <SCRIPT> y <STYLE> que a continuación se describen:
•   Directiva <TITLE>
•   Enseña el nombre de la página que se muestra en la barra de título del navegador
    (Browser) y no el nombre con que se guarda el archivo.
•   <TITLE>Titulo de la página</TITLE>
•   Directiva <META>
•   Proporciona información para que los programas de búsqueda (como
    google.com, yahoo.com, altavista.com) encuentren nuestra página.
•   A continuación se da un ejemplo de la aplicación de la directiva META:
•   Directiva <SCRIPT> (Este no es lenguaje HTML, y solo se dará un ejemplo)
•   Es empleada cuando agregamos programas con el lenguaje JAVA SCRIP, para incluir
    efectos visuales en la página y acciones.
•   Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al
    pasar el Mouse sobre ello.
•   <style>
•     <!--a:hover{color:RED; font-weight:; }-->
•   </style>
•   Directiva <STYLE>
•   Se utiliza para colocar Hojas de Estilo en Cascada (CSS),
•   Ejemplo: Las instrucciones descritas abajo, indican los atributos y características de la
    fuente de los textos de la página
•   <STYLE>
•     P {font-family:Arial; font-size:12pt; color:red; background-color:lime}
•   </STYLE>
•   Escriba las siguientes instrucciones en un editor de textos simple como Word pad ó Write
    o block de notas.
•   Ejemplo 1: Saltos de línea y de párrafos
Elementos básicos y estructura de una página web

Más contenido relacionado

La actualidad más candente

Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
Jarvi Daniel Zambrano Santana
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
duberlisg
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
Sandra Meza
 
ETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADAS
Sholucy
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
wladimirclipper
 
Deber de programacion web.
Deber de programacion web.Deber de programacion web.
Deber de programacion web.
hamintoperez
 
HTML
HTMLHTML
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOSCOMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
Jenny A
 
trabajo, lenguaje html
trabajo, lenguaje htmltrabajo, lenguaje html
trabajo, lenguaje html
Angie Yulexi Velez Bermudez
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
Wendy Navia Chambi
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
danneszm
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notas
Jessi De Jesus Torres
 
Programación en html 2
Programación en html 2Programación en html 2
Programación en html 2
luchopaisa
 
Moniquita
MoniquitaMoniquita
Moniquita
monica_mendoza
 
Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
Wendy Navia Chambi
 
Etiquetas html
Etiquetas html   Etiquetas html
Etiquetas html
Samanta Guerrero
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
Miguel Zapata
 
Etiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parteEtiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parte
Wendy Navia Chambi
 
HTML
HTMLHTML
Presentacion HTML
Presentacion HTMLPresentacion HTML
Presentacion HTML
dantemn
 

La actualidad más candente (20)

Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
ETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADAS
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Deber de programacion web.
Deber de programacion web.Deber de programacion web.
Deber de programacion web.
 
HTML
HTMLHTML
HTML
 
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOSCOMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
 
trabajo, lenguaje html
trabajo, lenguaje htmltrabajo, lenguaje html
trabajo, lenguaje html
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notas
 
Programación en html 2
Programación en html 2Programación en html 2
Programación en html 2
 
Moniquita
MoniquitaMoniquita
Moniquita
 
Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
 
Etiquetas html
Etiquetas html   Etiquetas html
Etiquetas html
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
Etiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parteEtiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parte
 
HTML
HTMLHTML
HTML
 
Presentacion HTML
Presentacion HTMLPresentacion HTML
Presentacion HTML
 

Destacado

Armas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilasArmas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilas
Javier Giner
 
Buscameaqui.net
Buscameaqui.netBuscameaqui.net
Buscameaqui.net
ambark15
 
axiología(h)
axiología(h)axiología(h)
axiología(h)
binomito
 
Metodos de busqueda en interned
Metodos de busqueda en internedMetodos de busqueda en interned
Metodos de busqueda en interned
feliandres12
 
Universo
UniversoUniverso
Universo
Ronhy LoBo
 
Importancia de los valores para una convivencia social
Importancia de los valores para una convivencia socialImportancia de los valores para una convivencia social
Importancia de los valores para una convivencia social
juliancito801
 
File30
File30File30
File30
42460
 
Histora y tendencias de la universidad 2013
Histora y tendencias de la universidad 2013Histora y tendencias de la universidad 2013
Histora y tendencias de la universidad 2013
Alexander Bejarano Gonzalez
 
Automatizacion y control
Automatizacion y controlAutomatizacion y control
Automatizacion y control
Claudio Ledesma
 
Trabajo de historia
Trabajo de historiaTrabajo de historia
Trabajo de historia
Vicente Ruiz Alvarado
 
Clase rrpp usmp sesión vii
Clase rrpp usmp sesión viiClase rrpp usmp sesión vii
Clase rrpp usmp sesión vii
magiancarlo
 
Animais clasificacion
Animais clasificacionAnimais clasificacion
Animais clasificacioncorcholis
 
5 temas específicos de
5 temas específicos de5 temas específicos de
5 temas específicos de
feliandres12
 
Los volcanesfcc2012
Los volcanesfcc2012Los volcanesfcc2012
Los volcanesfcc2012
Philip Castillo
 
Historia inalambricas matheumil
Historia inalambricas matheumilHistoria inalambricas matheumil
Historia inalambricas matheumil
Milton Mateus
 
Dif pobl y muestra
Dif pobl y muestraDif pobl y muestra
Dif pobl y muestra
Escarlett Hevia
 
Vitronet presentación
Vitronet presentaciónVitronet presentación
Vitronet presentación
victor emanuel rosales guereca
 
Trabajo de historia
Trabajo de historiaTrabajo de historia
Trabajo de historia
Vicente Ruiz Alvarado
 
Manual excel
Manual excelManual excel
Manual excel
carlosruizc
 
El misterio del nuevo ser en el hombre
El misterio del nuevo ser en el hombreEl misterio del nuevo ser en el hombre
El misterio del nuevo ser en el hombre
Alexander Bejarano Gonzalez
 

Destacado (20)

Armas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilasArmas silenciosas para guerras tranquilas
Armas silenciosas para guerras tranquilas
 
Buscameaqui.net
Buscameaqui.netBuscameaqui.net
Buscameaqui.net
 
axiología(h)
axiología(h)axiología(h)
axiología(h)
 
Metodos de busqueda en interned
Metodos de busqueda en internedMetodos de busqueda en interned
Metodos de busqueda en interned
 
Universo
UniversoUniverso
Universo
 
Importancia de los valores para una convivencia social
Importancia de los valores para una convivencia socialImportancia de los valores para una convivencia social
Importancia de los valores para una convivencia social
 
File30
File30File30
File30
 
Histora y tendencias de la universidad 2013
Histora y tendencias de la universidad 2013Histora y tendencias de la universidad 2013
Histora y tendencias de la universidad 2013
 
Automatizacion y control
Automatizacion y controlAutomatizacion y control
Automatizacion y control
 
Trabajo de historia
Trabajo de historiaTrabajo de historia
Trabajo de historia
 
Clase rrpp usmp sesión vii
Clase rrpp usmp sesión viiClase rrpp usmp sesión vii
Clase rrpp usmp sesión vii
 
Animais clasificacion
Animais clasificacionAnimais clasificacion
Animais clasificacion
 
5 temas específicos de
5 temas específicos de5 temas específicos de
5 temas específicos de
 
Los volcanesfcc2012
Los volcanesfcc2012Los volcanesfcc2012
Los volcanesfcc2012
 
Historia inalambricas matheumil
Historia inalambricas matheumilHistoria inalambricas matheumil
Historia inalambricas matheumil
 
Dif pobl y muestra
Dif pobl y muestraDif pobl y muestra
Dif pobl y muestra
 
Vitronet presentación
Vitronet presentaciónVitronet presentación
Vitronet presentación
 
Trabajo de historia
Trabajo de historiaTrabajo de historia
Trabajo de historia
 
Manual excel
Manual excelManual excel
Manual excel
 
El misterio del nuevo ser en el hombre
El misterio del nuevo ser en el hombreEl misterio del nuevo ser en el hombre
El misterio del nuevo ser en el hombre
 

Similar a Elementos básicos y estructura de una página web

Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
HugoDavidGonzalezCab
 
HTML
HTMLHTML
Temas de html
Temas de htmlTemas de html
Temas de html
Elis Menbri
 
1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html
Jeremias Morales
 
Producto 3
Producto 3Producto 3
Producto 3
EDuard Ortiz
 
Producto 3
Producto 3Producto 3
Producto 3
AndreaLara3333
 
Diseño de página web
Diseño de página webDiseño de página web
Diseño de página web
Marthalove
 
Producto 3
Producto 3Producto 3
Producto 3
LaloWR11
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
JohnWalker603627
 
Html
HtmlHtml
Programación para web
Programación para webProgramación para web
Programación para web
rdiazb
 
Html
HtmlHtml
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
albafa1995
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
maxfontana90
 
(producto 3)
 (producto 3) (producto 3)
(producto 3)
DAFNE DANIELA
 
Lenguaje Html
Lenguaje Html Lenguaje Html
Lenguaje Html
jonatan ibarra garay
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
emer cefas paz mendez
 
html
htmlhtml
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
JONNATAN TORO
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
Viviana Mercedes Ponce
 

Similar a Elementos básicos y estructura de una página web (20)

Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
HTML
HTMLHTML
HTML
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html
 
Producto 3
Producto 3Producto 3
Producto 3
 
Producto 3
Producto 3Producto 3
Producto 3
 
Diseño de página web
Diseño de página webDiseño de página web
Diseño de página web
 
Producto 3
Producto 3Producto 3
Producto 3
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
Html
HtmlHtml
Html
 
Programación para web
Programación para webProgramación para web
Programación para web
 
Html
HtmlHtml
Html
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
(producto 3)
 (producto 3) (producto 3)
(producto 3)
 
Lenguaje Html
Lenguaje Html Lenguaje Html
Lenguaje Html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 
html
htmlhtml
html
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
 

Más de adri9610

Tipos de servidores
Tipos de servidoresTipos de servidores
Tipos de servidores
adri9610
 
Diseño de la web
Diseño de la webDiseño de la web
Diseño de la web
adri9610
 
Taller info
Taller infoTaller info
Taller info
adri9610
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
adri9610
 
Dis
DisDis
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
adri9610
 
Términos de la web
Términos de la webTérminos de la web
Términos de la web
adri9610
 
Términos de la web
Términos de la webTérminos de la web
Términos de la web
adri9610
 

Más de adri9610 (8)

Tipos de servidores
Tipos de servidoresTipos de servidores
Tipos de servidores
 
Diseño de la web
Diseño de la webDiseño de la web
Diseño de la web
 
Taller info
Taller infoTaller info
Taller info
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Dis
DisDis
Dis
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
Términos de la web
Términos de la webTérminos de la web
Términos de la web
 
Términos de la web
Términos de la webTérminos de la web
Términos de la web
 

Elementos básicos y estructura de una página web

  • 1. ELEMENTOS BÁSICOS Y ESTRUCTURA DE UNA PÁGINA WEB Adriana Farias Charly López 1001 J.T.
  • 2. Directivas • Piense en directivas o etiquetas como hablar con el browser, o sea es la manera de darle instrucciones. • Abajo se dan los siguientes ejemplos de directivas: • <HTML> • </HTML> • La primera directiva es de inicio y la siguiente es una directiva del cierre. • Para hacer una directiva de cierre, simplemente agregan un signo / a la directiva de inicio. • La mayoría de directivas, pero no todas tienen una directiva del cierre. • Las directivas o comandos se pueden realizar en mayúsculas o minúsculas.
  • 3. ESTRUCTURA BÁSICA DE UNA PÁGINA WEB • (HTML) • (HEAD) • (TITLE)Titulo de la página</TITLE • (/HEAD) • (BODY) • (Aquí van las directivas del contenido de la página) • (/BODY) • (/HTML)
  • 4. EXPLICACIÓN DE LA ESTRUCTURA BÁSICA • (HTML)(Principio del documento html) • (HEAD)(Inicia título) • (TITLE)(Titulo de la página (/TITLE) • (/HEAD)(Finaliza título) • (BODY)(inicia cuerpo del documento) • (aquí van las directivas del contenido de la página) • (/BODY)(Final del cuerpo del documento) • (/HTML)(Final del documento htlm)
  • 5. Directiva <HTML> • Indica a la computadora que se trata de un programa HTLM. • Todo programa HTML tiene dos partes El encabezado especificado por la directiva <HEAD> y el cuerpo indicado por la directiva <BODY>
  • 6. Directiva <HEAD> • Dentro se colocan las directivas para proporcionar información de la página a los buscadores robóticos de Internet y otras directivas como <TITLE>, <META>, <SCRIPT> y <STYLE> que a continuación se describen:
  • 7. Directiva <TITLE> • Enseña el nombre de la página que se muestra en la barra de título del navegador (Browser) y no el nombre con que se guarda el archivo. • <TITLE>Titulo de la página</TITLE>
  • 8. Directiva <META> • Proporciona información para que los programas de búsqueda (como google.com, yahoo.com, altavista.com) encuentren nuestra página. • A continuación se da un ejemplo de la aplicación de la directiva META:
  • 9. Directiva <SCRIPT> (Este no es lenguaje HTML, y solo se dará un ejemplo) • Es empleada cuando agregamos programas con el lenguaje JAVA SCRIP, para incluir efectos visuales en la página y acciones. • Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al pasar el Mouse sobre ello. • <style> • <!--a:hover{color:RED; font-weight:; }--> • </style>
  • 10. Directiva <STYLE> • Se utiliza para colocar Hojas de Estilo en Cascada (CSS), • Ejemplo: Las instrucciones descritas abajo, indican los atributos y características de la fuente de los textos de la página • <STYLE> • P {font-family:Arial; font-size:12pt; color:red; background-color:lime} • </STYLE> • Escriba las siguientes instrucciones en un editor de textos simple como Word pad ó Write o block de notas. • Ejemplo 1: Saltos de línea y de párrafos