El documento describe las etiquetas HTML más importantes para estructurar el cuerpo de una página web. Explica que la etiqueta <body> delimita el contenido visible de la página y que etiquetas como <header>, <nav>, <section>, <aside>, y <footer> se pueden usar para dividir la página en diferentes secciones como encabezado, navegación, contenido principal, barra lateral y pie de página. También proporciona ejemplos de código HTML que ilustran cómo utilizar estas etiquetas para diseñar la estructura básica
0 calificaciones0% encontró este documento útil (0 votos)
44 vistas8 páginas
El documento describe las etiquetas HTML más importantes para estructurar el cuerpo de una página web. Explica que la etiqueta <body> delimita el contenido visible de la página y que etiquetas como <header>, <nav>, <section>, <aside>, y <footer> se pueden usar para dividir la página en diferentes secciones como encabezado, navegación, contenido principal, barra lateral y pie de página. También proporciona ejemplos de código HTML que ilustran cómo utilizar estas etiquetas para diseñar la estructura básica
El documento describe las etiquetas HTML más importantes para estructurar el cuerpo de una página web. Explica que la etiqueta <body> delimita el contenido visible de la página y que etiquetas como <header>, <nav>, <section>, <aside>, y <footer> se pueden usar para dividir la página en diferentes secciones como encabezado, navegación, contenido principal, barra lateral y pie de página. También proporciona ejemplos de código HTML que ilustran cómo utilizar estas etiquetas para diseñar la estructura básica
El documento describe las etiquetas HTML más importantes para estructurar el cuerpo de una página web. Explica que la etiqueta <body> delimita el contenido visible de la página y que etiquetas como <header>, <nav>, <section>, <aside>, y <footer> se pueden usar para dividir la página en diferentes secciones como encabezado, navegación, contenido principal, barra lateral y pie de página. También proporciona ejemplos de código HTML que ilustran cómo utilizar estas etiquetas para diseñar la estructura básica
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 8
PROGRAMACION II
HTML (HyperText Markup Language), Lenguaje de marcado de hipertexto <body> Esta etiqueta delimita el cuerpo del documento HTML, permite visualizar todo el contenido de la página web como texto, imágenes, videos, etc. Esta etiqueta tiene atributos, algunas de ellas: bgcolor: define el color de fondo de la página. text: especifica el color del texto de la página. link: color de los vínculos en la página. alink: color del vínculo actual o activado en la página. vlink: color del vínculo ya visitado. background: establece una imagen de fondo en la página web. style: permite definir estilos de diseño que afectaran toda la página.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description" content="Ejemplo de HTML5" /> <meta name="keywords" content="HTML5, CSS3, Javascript" /> <title>EJEMPLO 00001</title> </head> <body> BIENVENIDO AL CURSO DE PROGRAMACION II <body>
</html>
Para el color en una página web se especifica el color deseado con el nombre del color en inglés (blue, black, etc.) o mediante números hexadecimales con a la siguiente estructura: #RRVVAA (R=rojo, V=verde, A=azul). Por ejemplo, para obtener el color negro, la estructura sería #000000 y para el blanco #FFFFFF, técnicamente.
Ing. Elmer Chuquiyauri Saldivar 1
PROGRAMACION II
ESTRUCTURA MAS DETALLADA DEL CUERPO <body></body>
En versiones anteriores a HTML5 la parte visible se estructuraba o diseñaba con las etiquetas <table> y <div>, pero con la nueva versión incorporo nuevos elementos que ayudan a identificar cada sección de la página y del cuerpo. Una página o aplicación web se divide entre varias áreas visuales para mejorar la interactividad del usuario. Las etiquetas que representan cada nuevo elemento de HTML5 están íntimamente relacionadas con estas áreas. Un diseño de una página puede presentar la estructura de la Figura Nᴼ002-001
Figura Nº002-001. Estructura de una página web
Ing. Elmer Chuquiyauri Saldivar 2
PROGRAMACION II
Algunos diseños:
Figura Nº002-002. Ejemplo de una página web con una estructura descrito
Figura Nº002-003. Ejemplo de una página web con una estructura descrito
Ing. Elmer Chuquiyauri Saldivar 3
PROGRAMACION II
La Figura Nᴼ002-001, se podría representar con las siguientes etiquetas en HTML5
Figura Nᴼ002-004: Etiquetas en HTML5 de cada sección de la página web
Ing. Elmer Chuquiyauri Saldivar 4
PROGRAMACION II
<header> En HTML5 se incorporó esta etiqueta <header>, que sirve para poner títulos, subtítulos, logos de la página, no debe confundirse con <head> que sirve para construir la cabecera del documento, en código seria asi:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description" content="Ejemplo de HTML5" /> <meta name="keywords" content="HTML5, CSS3, Javascript" /> <title>Titulo de la Pagina Web</title> </head> <body> <header> <h1>TITULO DE LA PAGIAN WEB</h1> </header>
<body>
</html>
<nav> Esta etiqueta sirve para agregar una barra de navegación en la página web, en código seria así:
. . . <body> <header> <h1>TITULO DE LA PAGIAN WEB</h1> </header> <nav> <ul> <li>INICIO</li> <li>DOCUMENTOS</li> <li>DIRECTORIO</li> </ul> </nav> </body> </html>
Ing. Elmer Chuquiyauri Saldivar 5
PROGRAMACION II
<section> Con esta etiqueta según la sección del diseño de la Figura Nᴼ002-001, se delimita información más relevante de la página web puede ser diseñada en diferentes formas. Un ejemplo se ve en el siguiente código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description" content="Ejemplo de HTML5" /> <meta name="keywords" content="HTML5, CSS3, Javascript" /> <title>Titulo de la Pagina Web</title> </head> <body> <header> <h1>TITULO DE LA PAGIAN WEB</h1> </header> <nav> <ul> <li>INICIO</li> <li>DOCUMENTOS</li> <li>DIRECTORIO</li> </ul> </nav> <section>
</section>
</html>
<aside> En el diseño planteado en la Figura Nᴼ002-001, la columna Barra Lateral, que está al lado derecho de la sección Información Principal, generalmente se podría poner notas no tan relevantes con la información principal o lo que se considere conveniente. Esta etiqueta también se puede utilizar para poner información u otras cosas en la parte derecha de la Información Principal por lo tanto <aside> solo describe la información que contiene y no el lugar dentro de la estructura, este elemento se puede utilizar también dentro <section>. Ejemplo en el siguiente código:
Ing. Elmer Chuquiyauri Saldivar 6
PROGRAMACION II
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description" content="Ejemplo de HTML5" /> <meta name="keywords" content="HTML5, CSS3, Javascript" /> <title>Titulo de la Pagina Web</title> </head> <body> <header> <h1>TITULO DE LA PAGIAN WEB</h1> </header> <nav> <ul> <li>INICIO</li> <li>DOCUMENTOS</li> <li>DIRECTORIO</li> </ul> </nav> <section>
<footer> Esta etiqueta nos permite poner información en la parte final de la página web según el diseño planteado en la Figura Nᴼ 002-001, tal como se muestra en el código siguiente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description" content="Ejemplo de HTML5" /> <meta name="keywords" content="HTML5, CSS3, Javascript" /> <title>Titulo de la Pagina Web</title> </head> <body>
Ing. Elmer Chuquiyauri Saldivar 7
PROGRAMACION II
<header> <h1>TITULO DE LA PAGIAN WEB</h1> </header> <nav> <ul> <li>INICIO</li> <li>DOCUMENTOS</li> <li>DIRECTORIO</li> </ul> </nav> <section>
