Vous êtes sur la page 1sur 15

i

ESTRUCTURA DE UNA PAGINA WEB EN HTML

Edith Yuliana Guzman Sucerquia


Grado 11b

Trabajo presentado a: Jogni Javier Nieves Santana

Institucin Educativa Simn Bolvar


Arauca
Informtica.
Septiembre de 2017

i
Introduccin

El Word Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi

infinita. Pero esta informacin debe estar ordenada de alguna forma de manera que sea posible

encontrar lo que se busca. La unidad bsica donde est almacenada esta informacin son las

pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones... e

incluso sonido y video.

(Ferrer, Manuales-LuCAS, 1998, pg. 1)

ii
Contenido
Introduccin .................................................................................................................................... ii
Captulo 1 HTML ........................................................................................................................... 1
1.1. Qu es? ............................................................................................................................... 1
1.2. Marcador HTML.................................................................................................................. 1
1.2.1. Elementos ..................................................................................................................... 2
1.2.2. Atributos ...................................................................................................................... 2
Captulo 2 Caractersticas ............................................................................................................... 4
2.1. Caractersticas del lenguaje HTML ..................................................................................... 4
2.2. Qu se necesita para crear una pgina web? ...................................................................... 5
2.3. Algunas razones para usar HTML ....................................................................................... 5
2.4. Las bases de HTML ............................................................................................................. 6
Captulo 3 Prrafos en HTML ........................................................................................................ 8
3.1. Saltos de lnea ...................................................................................................................... 9
3.2. Cmo se insertan prrafos .................................................................................................... 9
Captulo 4Qu es un ancla? ......................................................................................................... 10
4.1. Creando anclas ................................................................................................................... 10
4.2. Enlaces a anclas de otras pginas....................................................................................... 11
Referencias .................................................................................................................................... 12

iii
1

Captulo 1 HTML

1.1. Qu es?

HTML, sigla en ingls de HyperText Markup Language (lenguaje de marcas de

hipertexto), hace referencia al lenguaje de marcado para la elaboracin de pginas web. Es un

estndar que sirve de referencia del software que conecta con la elaboracin de pginas web en

sus diferentes versiones, define una estructura bsica y un cdigo (denominado cdigo HTML)

para la definicin de contenido de una pgina web, como texto, imgenes, videos, juegos, entre

otros. Es un estndar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW,

organizacin dedicada a la estandarizacin de casi todas las tecnologas ligadas a la web, sobre

todo en lo referente a su escritura e interpretacin. Se considera el lenguaje web ms importante

siendo su invencin crucial en la aparicin, desarrollo y expansin de la World Wide

Web (WWW). Es el estndar que se ha impuesto en la visualizacin de pginas web y es el que

todos los navegadores actuales han adoptado. (Mora, Wikipedia, 2002, pg. 1)

1.2. Marcador HTML

El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>,/). El

HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede

incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el

comportamiento de navegadores web y otros procesadores de HTML.8


2
HTML tambin sirve para referirse al contenido del tipo de MIME text/html o todava ms

ampliamente como un trmino genrico para el HTML, ya sea en forma descendida

del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente

de SGML (como HTML 4.01 y anteriores).

HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de

data y la declaracin de tipo de documento.

(Mora, Wikipedia, 2002, pg. 2)

1.2.1. Elementos
Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades

bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se

considere vlido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio

(por ejemplo, <nombre-de-elemento> ) y una etiqueta de cierre (por ejemplo, </nombre-de-

elemento> ). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido

est ubicado entre las dos etiquetas (por ejemplo, <nombre-de-

elemento atributo="valor">Contenido</nombre-de-elemento> ). Algunos elementos, tales

como <br> , no tienen contenido ni llevan una etiqueta de cierre.

(Mora, Wikipedia, 2002, pg. 3)

1.2.2. Atributos
En su mayora de los atributos de un elemento son pares nombre-valor, separados por un

signo de igual = y escritos en la etiqueta de comienzo de un elemento, despus del nombre del

elemento. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de
3
910
valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los

valores sin comillas es considerado poco seguro.11 En contraste con los pares nombre-elemento,

hay algunos atributos que afectan al elemento simplemente por su presencia12 (tal como el

atributo ismap para el elemento img ). (Mora, Wikipedia, 2002, pg. 3)


4
Captulo 2 Caractersticas

2.1. Caractersticas del lenguaje HTML

Pero empecemos ya con lo que nos interesa. Cmo se hace una pgina Web?

Cuando los diseadores del WWW se hicieron esta pregunta decidieron que se

deban cumplir, entre otras, las siguientes caractersticas:

El Web tena que ser distribuido: La informacin repartida en pginas no muy

grandes enlazadas entre s.

El Web tena que ser hipertexto y deba ser fcil navegar por l.

Tena que ser compatible con todo tipo de ordenadores (PCs, Macintosh,

estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-

DOS, UNIX, MAC-OS,...).

Deba ser dinmico: el proceso de cambiar y actualizar la informacin deba ser

gil y rpido.

Estas caractersticas son las que marcaron el diseo de todos los elementos del

WWW incluida la programacin de pginas Web. Como respuesta a todos estos

requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas

signican "lenguaje hipertexto de marcas".


5
Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial

en una pgina web con diferentes tipos y tamaos de letra, con imgenes

impactantes, animaciones sorprendentes, formularios interactivos, etc.

(Ferrer, Manuales-LuCAS, 1998, pg. 2 y 3)

2.2. Qu se necesita para crear una pgina web?

Una de las caractersticas de este lenguaje ms importantes para el programador es que no es

necesario ningn programa especial para crear una pgina Web. Gracias a ello se ha conseguido

que se puedan crear pginas con cualquier ordenador y sistema operativo. El cdigo HTML,

como hemos adelantado en el prrafo anterior, no es ms que texto y por tanto lo nico necesario

para escribirlo es un editor de texto como el que acompaan a todos los sistemas operativos:

edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por supuesto estos no son los

nicos editores de texto que pueden ser usados, sino cualquier otro. Tambin se puede usar

procesadores de texto, que son editores con capacidades aadidas, compo pueden ser Microsoft

Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones

automticas del cdigo HTML que no siempre son deseadas. En estos dos ltimos casos, tambin

hay que tener en cuenta que deberemos guardar el archivo en modo texto.

(Ferrer, Manuales-LuCAS, 1998, pg. 3)

2.3. Algunas razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e

inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes
6
ventajas: Seremos capaces de aprovechar todas las caractersticas de este lenguaje, incluso las

ms nuevas. 5 Introduccin al lenguaje HTML Aunque se use inicialmente un editor

WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el cdigo

que ste ha creado. As se pueden corregir errores o incluir etiquetas no soportadas por el editor.

No dependeremos de la disponibilidad de una herramienta concreta para poder crear pginas

web. Con un simple editor de textos ser suficiente. El principal problema de usar editores

conversores y WYSIWYG es la necesidad de trabajar con dos archivos fuentes por separado, por

un lado, el archivo del editor y por otro el archivo del cdigo HTML una vez generado, lo que

nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo, su utilidad es

innegable y su combinacin con un buen conocimiento del lenguaje HTML nos convertir en

unos grandes programadores de pginas Web capaces de realizar creaciones impactantes

visualmente y de gran calidad tcnica.

(Ferrer, Manuales-LuCAS, 1998, pg. 5 y 6)

2.4. LAS BASES DE HTML

Una vez repasadas unas nociones bsicas de HTML y de la programacin de pginas Web en

general entraremos de lleno en la programacin con este lenguaje. Pronto nos daremos cuenta de

la sencillez de este lenguaje lo que le convierte en un lenguaje muy fcil de aprender y que nos

permitir crear pginas con mayor facilidad an. Las rdenes de este lenguaje estarn formadas

por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura: O bien

esta otra: TEXTO Como vemos, la primera estructura est formada por una nica instruccin y la

segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre
7
ambas. 8 Introduccin al lenguaje HTML, Por ejemplo, para indicarle al navegador que

queremos que pinte una lnea horizontal debemos escribir:

As de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los smbolos menor que

(), todas las instrucciones de HTML deben ir encerradas entre estos dos smbolos. Pero las

etiquetas no se limitan a indicar ordenes tan sencillas, estas rdenes tienen en ocasiones

parmetros. Por ejemplo, la etiqueta tal y como lo hemos hecho anteriormente dara lugar a la

lnea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una lnea horizontal en

la pantalla. Esta lnea tiene un grosor predeterminado y un ancho variable en funcin del tamao

de la ventana del navegador.

(Ferrer, Manuales-LuCAS, 1998, pg. 8 y 9)


8

Captulo 3 Prrafos en HTML

Ha llegado el momento de aprender a introducir un texto en una pgina web, pero antes es

necesario comprender cmo ser interpretado este texto. Cuando un navegador lee el cdigo

HTML de una pgina y lo interpreta para mostrar la pgina, todos los espaciados mltiples,

tabulados o saltos de lnea que se haya incluido en los textos sern interpretados como un nico

espacio. Esta caracterstica suele sorprender (e incluso molestar) al principio, pero es innegable

que esta forma de actuar es necesaria y concuerda con el carcter descriptivo de HTML. La

mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de cdigo

que sern mostrados de la misma forma por el navegador, aunque algunos contengan saltos de

lnea, otros tabulados entre las palabras, etc.

El conductor del coche le pregunto si se encontraba mal

El conductor del coche le pregunt si se encontraba mal

El conductor del coche le pregunto si se encontraba mal

En estos ejemplos podemos observar diversos saltos de lnea y separaciones en el texto, sin

embargo, el navegador mostrar un solo espacio entre las palabras y producir saltos de lnea

donde sea necesario en funcin del tamao de la ventana.

(Ferrer, Manuales-LuCAS, 1998, pg. 21)


9
3.1. Saltos de lnea

En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo

un texto. En HTML para hacer esto puede usarse la etiqueta

. Cuando el navegador se encuentra con esta etiqueta provoca un salto de lnea y sigue mostrando

el contenido de la pgina. Veamos un ejemplo: Estaba internndose en lo desconocido.

Durante todo el trayecto hasta Woodfield no dej de pensar en los aspectos econmicos, con el

temor de estar cometiendo... En este texto podemos observar cmo tras el primer punto era

necesario un cambio de lnea, por lo que hemos usado.

(Ferrer, Manuales-LuCAS, 1998, pg. 22)

3.2. Cmo se insertan prrafos

Un prrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un prrafo

se usa la etiqueta p, situndose la instruccin de inicio al comienzo del prrafo y la instruccin de

fin tras la ltima frase. Entre ellas pueden insertarse tantos saltos de lnea como se deseen as

como muchos otros elementos HTML. A continuacin se muestra un ejemplo:

Estaba internndose en lo desconocido.

Durante todo el trayecto hasta Woodfield no dej de pensar en los aspectos econmicos, con el

temor de estar cometiendo...

Otra opcin hubiera sido crear un nico prrafo e insertar un salto de lnea tras la primera frase:

(Ferrer, Manuales-LuCAS, 1998, pg. 23)


10
Captulo 4Qu es un ancla?

Desde una pgina cualquiera y en cualquier lugar de ella se escribe el cdigo para crear un

enlace. Cuando se pulsa sobre el texto activo se salta al comienzo de otra pgina, tal y como

indica la flecha. Usando enlaces a anclas se puede cambiar este comportamiento. Un ancla es una

marca que se sita en un punto determinado de una pgina. Posteriormente se podr crear un

enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra pgina

se salta al lugar donde est el ancla, es decir, ya no se va al comienzo de la pgina como con los

enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que un enlace apunte al

lugar concreto de una pgina que se desee. (Ferrer, Manuales-LuCAS, 1998, pg. 42)

4.1. Creando anclas

Para crear anclas usamos, al igual que para crear enlaces, la etiqueta , sin embargo no debe

confundirse el lector porque aunque ambos elementos estn relacionados y se use la misma

etiqueta para crearlos las funciones 42 La primera pgina Web de cada uno son radicalmente

diferentes. Las anclas slo son marcas y son invisibles cuando visualizamos la pgina con el

navegador. Por esta razn las anclas no definen ningn texto activo. A pesar de ello es habitual

encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo: Comienzo

Este texto no tiene ningn significado especial y ser interpretado por los navegadores de igual

forma que el texto de alrededor. Como se ha adelantado en el ejemplo anterior, al crear anclas no

se emplea el atributo href. En su lugar se usa otro llamado name. Con este atributo se da un

nombre al ancla que luego nos servir para referirse a ella. Un ejemplo donde la utilidad de las

anclas se hace evidente es en aquellas pginas en las que nos encontramos una lista ordenada

alfabticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse
11
molesto. Pero usando anclas el autor de la pgina puede incluir todas las letras al principio de

manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de

la letra S.

(Ferrer, Manuales-LuCAS, 1998, pg. 47)

4.2. Enlaces a anclas de otras pginas

Tambin es posible crear un enlace a un ancla de otra pgina. Para ello hay que incluir la

pgina, bien sea mediante su direccin URL o mediante su ruta de directorios, y posteriormente

poner el smbolo # seguido del nombre del ancla. En este caso es obligatorio poner el nombre

del archivo, aunque sea index.html. Siguiendo con el ejemplo anterior para crear un enlace a los

trminos que empiezan por S de la pgina donde se situ el ancla puede emplearse el siguiente

cdigo: Letra S Suponiendo que el diccionario estaba en un archivo llamado a-z.html en el

servidor de nombre www.ozu.es [http://www.ozu.es]. La estructura de los enlaces es ligeramente

ms complicada que los anteriores. Para crearlos hay que seguir los siguientes pasos: 47 La

primera pgina Web 1. Se parte de un ancla existente en otra pgina o se crea uno 2. Se crea un

enlace a esa pgina 3. Se aade a la direccin del enlace el smbolo # seguido del nombre del

ancla En primer lugar deberemos crear un ancla en la pgina objetivo. Despus deberemos

escribir el enlace con la sintaxis explicada anteriormente indicando el nombre de la pgina y el

nombre del ancla. La flecha de la figura 2.16 nos indica el salto que se producir al pulsar sobre

el enlace. Ya no iremos al comienzo de la pgina como pasaba con los enlaces normales sino que

iremos al lugar concreto que hemos elegido (y donde hay un ancla). (Ferrer, Manuales-LuCAS,

1998, pg. 48)


12
Referencias

Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de


http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Ferrer, J. (1998). Manuales-LuCAS. Recuperado el 01 de 09 de 2017, de
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Mora, S. L. (2002). Wikipedia. Recuperado el 01 de 09 de 2017, de
https://es.wikipedia.org/wiki/HTML
Mora, S. L. (2002). Wikipedia. Recuperado el 01 de 09 de 2017, de
https://es.wikipedia.org/wiki/HTML
Mora, S. L. (2002). Wikipedia. Recuperado el 01 de 09 de 2017, de
https://es.wikipedia.org/wiki/HTML
Mora, S. L. (2002). Wikipedia. Recuperado el 01 de 09 de 2017, de
https://es.wikipedia.org/wiki/HTML

Vous aimerez peut-être aussi