Elementos básicos y estructura de una página web
Transcript of Elementos básicos y estructura de una página web
![Page 1: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/1.jpg)
Adriana Farias
Charly López
1001 J.T.
ELEMENTOS BÁSICOS Y ESTRUCTURA DE UNA PÁGINA WEB
![Page 2: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/2.jpg)
• 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.
![Page 3: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/3.jpg)
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)
![Page 4: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/4.jpg)
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)
![Page 5: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/5.jpg)
• 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>
![Page 6: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/6.jpg)
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:
![Page 7: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/7.jpg)
• 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>
![Page 8: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/8.jpg)
• 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:
![Page 9: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/9.jpg)
• 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>
![Page 10: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/10.jpg)
• 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
![Page 11: Elementos básicos y estructura de una página web](https://reader036.fdocuments.es/reader036/viewer/2022083001/557ba3a5d8b42ac9248b5256/html5/thumbnails/11.jpg)