Tarea de Inv. 1 Estructura Web

2019-3 SEP-DIC
ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ANGEL DANIEL FLORES RESENDIZ
DESARROLLO DE APLICACIONES WEB
1.- PARCIAL
ITIC 1011_V
Tarea de Investigación 1
¿QUÉ ES EL MAQUETADO EN HTML?
La maquetación o también llamada diagramación de una página web es quizás la parte

más importante del proceso de diseño de una página web, esta etapa del diseño es
realizado por los diseñadores a cargo del proyecto y suele ser crucial para el éxito del
proyecto.
En esta etapa se organiza todos los elementos de la futura página web, se estructura de
manera gráfica los contenidos escritos, imágenes, video, títulos, enlaces, menús, botones,
formularios, y todo aquel elemento que haya sido considerado en la lista de
requerimientos del proyecto.
Estrictamente el proceso de maquetar, sólo se refiere al acto de estructurar la página web,

distribuir y organizar los elementos y los espacios de la página. Sin embargo, este
proceso se mejora cuando la maquetación se convierte en una previsualización del sitio
web, es decir, además de estructurar y organizar los elementos, también se elige una
paleta de colores, y se diseña ya sea en papel o en algún editor gráfico la visión final del
sitio web.
Actualmente la maquetación se realiza utilizando capas (<div>), también llamadas

divisiones o contenedores. La colocación de las capas en la página se realiza a través de
CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a
otro con el menú en la parte superior, sólo cambiando la hoja de estilos.
¿CUÁL ES LA ESTRUCTURA DE UNA PÁGINA HTML5?
Tiene un valor semántico
Anteriormente la estructura de una web se hacía con uso de cajas de contenido llamadas
div donde para diferenciar una de otras se utilizaban id o un class.
Cuando nació HTML5 trajo consigo las nuevas etiquetas de maquetación donde ya se
identificaba de una mejor manera cada elemento, ya no es necesario utilizar tantas cajas
de contendió div por que ya existen etiquetas para cada elemento.
30 de agosto de 2019
PROF. VALERIANO VILLEGAS JOSE ALBERTO
2019-3 SEP-DIC

1.- PARCIAL
ITIC 1011_V
Ejemplo en imagen de una estructura de una página HTML5 con las nuevas etiquetas.
El verdadero poder de HTML5 está en CSS3, JavaScript. También tenemos dos

tecnologías que son estándares para poder realizar gráficas: SVG
para gráficas vectoriales y Canvas para gráficas que son realizadas con mapas de bits.
¿PARA QUÉ SIRVE CADA ETIQUETA DE LA ESTRUCTURA DE UNA PÁGINA HTML

5?
ELEMENTOS BÁSICOS QUE TIENE QUE TENER UN SITIO WEB
<!DOCTYPE html>
Esta es la primera declaración de nuestro documento de Html5, y con esto le estamos

diciendo a los navegadores web que sigue una estructura determinada, en este caso
lenguaje html en su versión 5.
<html lang=»es»>…</html>
Podrás notar que la siguiente línea es <html> y cierra con </html>, esto indica el comienzo
y final del documento, todo lo que esté fuera de estas líneas se ignora. Podemos agregar
dentro de la etiqueta el lenguaje en este caso lang=»es» que significa español (no te
traducirá el texto de ingles a español, es para que el navegador web y Google (me refiero
a los buscadores) detecten que se trata de una página en español)
2019-3 SEP-DIC

1.- PARCIAL
ITIC 1011_V
<head>…</head>
Es la cabecera del documento, aquí nosotros ponemos información importante que lee el
navegador web y Google, ya veremos que podremos agregar palabras claves, el título del
sitio, la descripción, los estilos en Css, etc.
<body>…</body>
Es el cuerpo por lo tanto aquí está todo lo que verá el usuario en el navegador web, aquí
determinamos la estructura de nuestro sitio web, los textos, las imágenes, botones,
enlaces, etc.
Ejemplo de Imagen de un sitio muy simple desarrollado con la estructura de Html5
¿QUÉ IMPORTANCIA TIENE EL DISEÑO EN UNA PÁGINA WEB?
Porque si una página web que solo se dedica al código, el resultado es visto por toda la
red, miles de páginas web que carecen de correlación, páginas que no llevan un sentido
común ni un diseño homogéneo.
La principal importancia de un diseño o la maquetación de un sitio web, es el hecho de

organizar y previsualizar la futura página, tener un mapa de cómo debemos hacer el
trabajo, donde colocar los elementos, los colores y el tipo de programación se usará.
15 ETIQUETAS BÁSICAS Y SU USO
DOCTYPE
<!DOCTYPE html>
2019-3 SEP-DIC

1.- PARCIAL
ITIC 1011_V
La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que
este es un documento HTML.
Además, es necesario para la comunicación entre el navegador y servidor.
HTML
1<html></html>
Delimita el documento HTML.
Atributo para destacar

LANG
1<html lang="es"></html>
Indica el lenguaje de contenido del código.
HEAD
1<head></head>
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene
información como scripts, metadatos, estilos, ubicación de documentos de estilos, título
de la página, etc.
META
1<meta name="description" content="Descripción de la WEB">
Las metas etiquetas se utilizan para identificar propiedades del documento como por
ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.
Usos para destacar

META CHARSET
1<meta charset="UTF-8">
Establece el tipo de codificación del documento.
META TITLE
1<meta name="title" content="Título de la WEB">
Contiene el título que se mostrará en los buscadores.
2019-3 SEP-DIC

1.- PARCIAL
ITIC 1011_V
META DESCRIPTION
1<meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
LINK
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet"
1
type="text/css"/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este
documento.
Atributo para destacar

HREF
Especifica la url donde se localiza la hoja de estilo.
BODY
1<body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos
ver en nuestro navegador. Imágenes, textos, enlaces, video, etc.…
HEADER
1<header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele
encontrar el título, el logotipo y poco más.
NAV
1<nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces
internos para movernos entre nuestras diferentes secciones del sitio web.
A
1<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.
2019-3 SEP-DIC

1.- PARCIAL
ITIC 1011_V
Atributos para destacar.

HREF
Dirección URL hacia la que apunta el enlace.
H1, H2, H3, H4, H5, H6

1<h1>Título de la WEB</h1>
2<h2>CONTENIDO PRINCIPAL</h2>
3<h3>Testimonios</h3>
4<h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más
importante y H6 el menos importante.
SECTION
1<section></section>
La etiqueta section engloba una sección de texto, imágenes y otros elementos que
guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o
encabezado.
ARTICLE
1<article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y
ordenar los contenidos en su interior.
DIV
1<div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.
P
1<p></p>
Entre las etiquetas P colocaremos un párrafo de texto.
IMG
1<img src="http://dominio.com/imagen.jpg" alt="paisaje">
2019-3 SEP-DIC

1.- PARCIAL
ITIC 1011_V
Esta etiqueta coloca una imagen en el documento mediante un enlace.
Atributos para destacar.

ALT
Representa el texto alternativo, muy importante para que los buscadores puedan obtener
información de la imagen.
SRC
URL donde se encuentra la imagen.
ASIDE
1<aside></aside>
Contiene información no vital o que no está estrechamente relacionada con el contenido

principal de la página como podrían ser banners de anuncios, citas o enlaces externos.
FOOTER
1<footer></footer>
Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar

los enlaces a textos legales, el copyright, etc.

Tarea de Inv. 1 Estructura Web

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tarea de Inv. 1 Estructura Web

Hochgeladen von

Copyright:

Verfügbare Formate

2019-3 SEP-DIC

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

La maquetación o también llamada diagramación de una página web es quizás la parte

Estrictamente el proceso de maquetar, sólo se refiere al acto de estructurar la página web,

Actualmente la maquetación se realiza utilizando capas (<div>), también llamadas

¿CUÁL ES LA ESTRUCTURA DE UNA PÁGINA HTML5?

Tiene un valor semántico

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

El verdadero poder de HTML5 está en CSS3, JavaScript. También tenemos dos

¿PARA QUÉ SIRVE CADA ETIQUETA DE LA ESTRUCTURA DE UNA PÁGINA HTML

ELEMENTOS BÁSICOS QUE TIENE QUE TENER UN SITIO WEB

Esta es la primera declaración de nuestro documento de Html5, y con esto le estamos

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Ejemplo de Imagen de un sitio muy simple desarrollado con la estructura de Html5

¿QUÉ IMPORTANCIA TIENE EL DISEÑO EN UNA PÁGINA WEB?

La principal importancia de un diseño o la maquetación de un sitio web, es el hecho de

15 ETIQUETAS BÁSICAS Y SU USO

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Además, es necesario para la comunicación entre el navegador y servidor.

Delimita el documento HTML.

Atributo para destacar

Indica el lenguaje de contenido del código.

Usos para destacar

Establece el tipo de codificación del documento.

Contiene el título que se mostrará en los buscadores.

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Es el texto que se muestra bajo el título en los motores de búsqueda.

Atributo para destacar

Especifica la url donde se localiza la hoja de estilo.

Representa un enlace o hipervínculo.

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Atributos para destacar.

Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6

Entre las etiquetas P colocaremos un párrafo de texto.

ING. EN TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos para destacar.

URL donde se encuentra la imagen.

Contiene información no vital o que no está estrechamente relacionada con el contenido

Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar

Das könnte Ihnen auch gefallen