Estructura de una página web en html

Sonia Viviana Perdomo Cáceres

12-03-2018
Simón Bolívar
Arauca-Arauca
Informática
 Tabla de Contenidos

Capítulo 1 definicion e Introducción de la información general ......................................... 3

Título 2 concep de paguina web .................................................................................. 3.2
Título 2 ejemplos relacionados .................................................................................... 3.3
Título 3imagenes y partes de la paguina web en html . .............¡Error! Marcador no
definido..4
Título 3 su escructura. ........................................... ¡Error! Marcador no definido..5
 Capítulo 1

definición e Introducción e información general

Título 2 concepto de página web

se conoce como página web al documento que forma parte de un sitio web y que suele

contar con enlaces (también conocidos como hipervínculo o links) para facilitar la

navegación entre los contenidos una página web a un documento disponible en Internet,

o World Wide Web (www), codificado según sus estándares y con un lenguaje específico

conocido como HTML. Es algo a lo que estamos acostumbrados a acceder si leemos este

artículo pero no todos conocen realmente su funcionamiento. A estos sitios se puede

llegar a través de los navegadores de Internet, que reciben la información del

documento interpretando su código y entregando al usuario la información de manera

visual.
Título 2 ejemplo relacionados

Ejemplos de página WEB

Página Web Estática: Las páginas web estáticas son aquellas realizadas en HTML que
pueden mostrar en alguna parte de la página objetos en movimiento tales como banners, gifs
animados, videos, etc.

Página Web Animada: Las páginas web animadas son aquellas que se realizan con la
tecnología FLASH, ésta permite que una página web presente el contenido con ciertos efectos
y animaciones en algunos de los sectores de la página o bien puede estar toda la página hecha
en este lenguaje. El uso de esta tecnología permite diseños más vanguardistas, modernos y
creativos.

Página Web Dinámica: Existen muchos lenguajes de programación que son la base para la
mayoría de páginas web dinámicas. Las que destacamos aquí son los lenguajes PHP y ASP.
Estos lenguajes permiten una perfecta estructuración del contenido. Por una parte crearíamos
la estructura de las páginas web, y por otra almacenaríamos el contenido en determinados
archivos. A partir de ahí, crearíamos el código de llamada que insertaría el contenido en la
propia página web estructurada. Este es el principio básico que siguen los lenguajes de
programación. A partir de aquí se desarrollan aplicaciones para poder gestionar el contenido
a través de un panel de control, dando lugar a nuevos tipos de página web que leeremos a
continuación.

Portal: Es un sitio web que en su página principal permite el acceso a múltiples secciones
que, por lo general, son foros, chats, cuentas de correo, buscador, acceso registrado para
obtener ciertas ventajas, las últimas noticias de actualidad… un sinfín de recursos para
brindar al usuario la mejor experiencia de búsqueda para una temática en particular o para
una temática muy amplia. Estamos hablando de dos tipos diferenciados de portal: Portal
Horizontal, se reconoce por su temática variada con el fin de captar el mayor tráfico de
internautas posible. Son un ejemplo de esta modalidad, los portales de Lycos, Yahoo,
Altavista, MSN, etc. Por otra parte, tenemos el Portal Vertical, que se centra en ofrecer
contenido de una temática en particular, de este modo podemos hablar de Portal Inmobiliario,
Portal de Comercio, Portal Laboral, etc.

Tienda virtual o Comercio electrónico: Como su nombre indica, se trata de un sitio web
que publica los productos de una tienda en particular en Internet. Permite la compra on-line
a través de VISA, domiciliación bancaria o transferencia por norma general. Ofrece al
administrador un panel de gestión para poder subir los productos, actualizarlos, eliminarlos,
etc.Página Web con

Gestor de Contenidos: Se trata de un sitio web cuyo contenido se actualiza a través de un

panel de gestión por parte del administrador del sitio. Este panel de gestión suele ser muy
intuitivo y fácil de usar. En aquellas páginas web que requieran una actualización constante
se suele incorporar este panel de gestión para que pueda controlarse día a día por parte del
cliente.

Sitio weblog (o blog): Nace de la definición de un diario, en donde la persona inserta

información a través del tiempo, solo que esto se hace público y las demás personas pueden
acceder a este y comentar sobre lo que leen. Este diario se encuentra acomodado de tal forma
que lo primero que aparece es lo último que se publicó. Ejemplos: Blogger, Xanga.
[[LiveJournal], [[WordPress], www.x0101.com.

Sitio de empresa: usado para promocionar una empresa o servicio.Sitio de comunidad

virtual: un sitio donde las personas con intereses similares se comunican con otros,
fomentando de esta forma la comunicación digital y la cultura digital. Por ejemplo: MySpace,
Facebook,Hi5, Multiply, Orkut.

Sitio de desarrollo: un sitio el propósito del cual es proporcionar información y recursos

relacionados con el desarrollo de software, diseño web, etc.

Sitio de descargas: estrictamente usado para descargar contenido como software, demos de
juegos o fondos de escritorio: Download, Tucows, Softonic, Baulsoft. En algunos de los
casos estos sitios solamente se encargan de recopilar la información pero los enlaces son
externos y por lo general apuntan a la página WEB del creador (o proveedor) de la descarga.

Sitio de juego: un sitio que es propiamente un juego o un “patio de recreo” donde mucha
gente viene a jugar, como MSN Games, Pogo.com y los MMORPGs VidaJurasica,
Planetarion y Kings of Chaos.

Sitio de noticias: Es un sitio dedicado a mostrar noticias y comentarios. Este tipo de sitio
WEB promete ser el reemplazo de los periodicos y noticieros, debido a la facilidad de acceso
y a la alta interacción con el usuario final.

Sitio pornográfico (porno): muestra imágenes y vídeos de contenido sexual.

Sitio buscador: un sitio que proporciona información general y está pensado como entrada
o búsqueda para otros sitios. Un ejemplo puro es Google, y el tipo de buscador más conocido
es Yahoo!.

Sitio shock: incluye imágenes o otro material que tiene la intención de ser ofensivo a la
mayoría de visitantes. Ejemplos: rotten.com, [ratemypoo.com].

Sitio personal: Mantenido por una persona o un pequeño grupo (como por ejemplo familia)
que contiene información o cualquier contenido que la persona quiere incluir.

Sitio Web 2.0: un sitio donde los usuarios son los responsables de mantener la aplicación
viva, usando tecnologías de última generación: pikeo, flickr

Sitio wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia).
Este usuario se basa en la idea de que sean los usuario quienes alimenten y mejoren los
contenidos almacenados en el sitio.

Sitio político: un sitio web donde la gente puede manifestar su visión política. Ejemplo: New
Confederacy.

Sitio de Rating: un sitio donde la gente puede alabar o menospreciar lo que aparece.

Sitios Educativos: promueven cursos presenciales y a distancia, información a profesores y

estudiantes, permiten ver o descargar contenidos de asignaturas o temas.

Sitio Spam: sitio web sin contenidos de valor que ha sido creado exclusivamente para
obtener beneficios y fines publicitarios, engañando a los motores de búsqueda.

Rich Internet Applications (Aplicaciones de Internet Enriquecidas) son un nuevo tipo de

aplicaciones con más ventajas que las tradicionales aplicaciones Web. Esta surge como una
combinación de las ventajas que ofrecen las aplicaciones Web y las aplicaciones
tradicionales. Estas buscan atraer a los usuarios por medio de contenidos más atractivos e
interactivos. Este tipo de sitios puede ser producido a través de herramientas como Adobe
Flex o Silverlight (tecnología de Microsoft).
Título 2 imágenes y partes de la página web

PAGUINAS
Título 3 estructura de una página web en htmal

Estructura de una página web en htmal

Una estructura HTML se empieza con la etiqueta <HTML> y acaba con </HTML>.

Todo lo que esté en medio será la página web. Dentro de <HTML></HTML> se

encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la

página. Aquí irán cierta información que no es directamente el contenido de la página.

Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto

se estudiará en capítulos venideros). La primera que se suele estudiar es

<title></title>, que indica el título de la página (lo que el navegador pone en la parte

superior izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página:

fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página

anterior, el siguiente código, podemos cambiar el título de la página.

Estructura básica

Cada página comienza con: < HTML > .

A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .

Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las
instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.

La página acabará con < /HTML > .

Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>

Cabecera

La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD
> Sus componentes son opcionales. El más importante es <TITLE> , que permite
escribir el título del documento. El título no se muestra en la página, sino en la parte
superior de la ventana del visualizador, como identificador en los bookmarks y en
la history list. Se utiliza de la siguiente forma:
<HEAD>
<TITLE>Título del documento HTML</TITLE>
</HEAD>

Cuerpo

Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes
atributos:

BACKGROUND="imagen": define el fondo. Más adelante veremos más

sobre imágenes.

BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si

ésta imagen no puede obtenerse.. Más adelante veremos más sobre colores. Por ahora
nos basta saber que para los colores básicos se puede utilizar su nombre en inglés:
white, blue, red, green ...

TEXT="######": color del texto. Por defecto será negro.

LINK="######": color de los links. Por defecto será azul.

VLINK="######": color de los links visitados. Por defecto será violeta.

Las páginas web mantienen una estructura muy sencilla que debemos respetar,
para que los navegadores sean capaces de presentarla. No podemos comenzar
nuestra página con una etiqueta de párrafo, por ejemplo, sino que debemos indicar
qué tipo de página estamos generando, qué información adicional llevará y dónde
comienza el contenido que debe ser mostrado.

De este modo, cualquier página web incluirá al menos las siguientes etiquetas:

<html> y </html> colocadas al principio y fin del documento indican dónde comienza y
finaliza la página web.

<head> y </head> definen un espacio en el que incluiremos contenidos que no se van a

mostrar directamente en el navegador, sino que sirven para describir determinados
aspectos del documento, como su título, autor, los estilos que emplearemos, pequeñas
funciones que se deben realizar, etc.

<body> y </body> en su interior se incluye la información que se mostrará en el

navegador. Es el contenido real de la página, estructurado mediante las diferentes
etiquetas.

Junto a las tres etiquetas anteriores podemos encontrar algunas más que son importantes
para que la web se interprete correctamente:

<!DOCTYPE> y <?xml> son dos etiquetas que indican qué tipo de documento estamos
generando y a qué normas se ajusta. Normalmente serán siempre iguales y será nuestro
editor el que se encargue de colocarlas al principio de la página, cuando sea necesario.

Probando la página web

Vamos a intentar probar nuestra página anterior siguiendo estos pasos:

Abriremos un editor de texto sencillo, como el "Bloc de notas" en

Windows o el "Editor de textos" de Linux. En su interior copiaremos y
pegaremos el texto anterior o bien lo escribiremos desde cero. En este
segundo caso debemos prestar mucha atención, para no escribir mal
ninguna etiqueta.
2. A continuación guardaremos la página web en alguna carpeta de nuestro ordenador. El
nombre del archivo debe terminar en .html o en .htm. Así, podemos emplear el
nombre index.html, que es el que se suele asignar siempre a nuestra página web
principal.

Nota: Los nombres de los archivos de las páginas web deberían escribirse siempre en
minúsculas, sin espacios y sin caracteres especiales, reduciéndolos a letras y números y,
si acaso, algún guión alto o bajo. De ese modo no tendremos problemas al subir nuestras
páginas a un servidor web.
3. Usando nuestro explorador de archivos, accederemos a la carpeta en cuestión; debemos
tener a la vista el archivo y podremos hacer doble clic sobre él para que se abra dentro de
nuestro navegador.
Si todo ha ido bien, veremos una página web en nuestro navegador. Aquí han sucedido
muchas cosas que se pueden ir destacando:

El navegador no muestra el texto que hemos escrito en el documento html; sólo el

contenido que aparece dentro del <body>, del cuerpo de la página.

En la pestaña podemos ver el título de la página, que coincide exactamente con lo que
establecimos mediante el elemento <title> incluido en la cabecera de la página (<head>).

Merece la pena fijarse en la URL de nuestra página web, es decir, la dirección única.
Como nuestro archivo no está colocado en Internet o en un servidor, la dirección no
comienza con http://, sino que veremos que empieza con file:// seguido de la ruta
necesaria para llegar al archivo.

Aquí podríamos dar por concluido nuestro trabajo. Si hemos comprendido cómo funciona
el modelo de etiquetas y de prueba en el navegador, sólo nos queda comenzar a conocer
diferentes etiquetas para que los documentos se muestren tal y como nosotros queremos.

Con esta prueba ha quedado demostrado también que el uso de un editor más sofisticado
es totalmente opcional, aunque la realidad es que se simplifica notablemente la
incorporación de etiquetas, sobre todo aquellas que no se usan con frecuencia.