Body HTML

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

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

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

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>
<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>
</header>
<nav>
<ul>
<li>INICIO</li>
<li>DOCUMENTOS</li>
<li>DIRECTORIO</li>
</ul>
</nav>
</body>
</html>

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>
</head>
<body>
<header>
</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:

PROGRAMACION II
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
</header>
<nav>
<ul>
<li>INICIO</li>
<li>DOCUMENTOS</li>
<li>DIRECTORIO</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Nota uno</blockquote>
<blockquote>Nota dos</blockquote>
</aside>
</html>
<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>
</head>
<body>

PROGRAMACION II
<header>
</header>
<nav>
<ul>
<li>INICIO</li>
<li>DOCUMENTOS</li>
<li>DIRECTORIO</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Nota uno</blockquote>
<blockquote>Nota dos</blockquote>
</aside>
<footer>
Correo: amarilis2020@gmail.com
Telefono: (062)515330
</footer>
</html>

Body HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Body HTML

Cargado por

Copyright:

Formatos disponibles

PROGRAMACION II

Ing. Elmer Chuquiyauri Saldivar 1

ESTRUCTURA MAS DETALLADA DEL CUERPO <body></body>

Figura Nº002-001. Estructura de una página web

Ing. Elmer Chuquiyauri Saldivar 2

Ing. Elmer Chuquiyauri Saldivar 3

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

Ing. Elmer Chuquiyauri Saldivar 5

Ing. Elmer Chuquiyauri Saldivar 6

Ing. Elmer Chuquiyauri Saldivar 7

Ing. Elmer Chuquiyauri Saldivar 8

También podría gustarte