Sie sind auf Seite 1von 57

www.monografias.

com
Disear una pgina web en lenguaje HTML
1. Utilizas los elementos fundamentales del diseo de una pgina Web
. Diseo de una pgina web
!. Manejar los elementos bsi"os del lenguaje HTML en la "rea"i#n de pginas web
$. Te%to en HTML
&. Tablas
'. Listas
(. Mar)uesinas
*. +tras eti)uetas ,tiles
-ubm#dulo
./+.0-1T+2 Al trmino del submdulo, sers competente para disear y crear una pgina web en
lenguaje html.
El presente submdulo tiene como objetivo prepararte para ue aprendas a disear y estructurar una
pgina web. !or lo ue como proyecto elaborars el diseo de una pgina web personal en cdigo "#$% en
el editor de te&to bloc de notas con las caracter'sticas siguientes( )na pgina principal ue incluya(
* Encabe+ado
* ,mgenes
* "iperv'nculos a otras pginas web
* "iperv'nculos a tus pginas.
* -pcin para enviar un correo
)na segunda pgina, en la ue apliues las tablas
. por /ltimo una pgina, en la ue apliues listas.
%as tres pginas deben de estar enla+adas entre s' y a una pgina en internet.
3+M.4T45316-2
)tili+a procedimientos y herramientas para el desarrollo de documentos electrnicos de acuerdo a los
reuerimientos.
!rograma y administra pginas web para la difusin y captacin de la informacin.
Elabora pginas web con animaciones interactivas de aplicacin general y espec'fica, en un ambiente
multimedia.
3+5T451D+-2
0.0 )tili+ar los elementos fundamentales del diseo de una pgina web.
0.1 $anejar los elementos bsicos del lenguaje "#$% en la creacin de pginas web.
63T171D6D 1
4n binas realiza la le"tura de las "ompeten"ias )ue se pretende al"anzars al t8rmino del
subm#dulo. .osteriormente responde las preguntas 9 termina "omentando tus respuestas a
tra:8s de una dis"usi#n guiada por el do"ente a la :ez )ue atiendes las e%pli"a"iones 9 ejemplos
del mismo.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
0.2 34u competencias voy a desarrollar5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
1.2 3!ara u me van a servir5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
72 3En u momento las puedo aplicar5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
63T171D6D
4n binas "omenta los lugares por los )ue ;as na:egado en internet 9 trata de re"ordar lo )ue
;as obser:ado en "uanto a la estru"tura< informa"i#n< enla"es et". de "ada uno de los sitios
)ue ;as :isitado 9 responde las siguientes preguntas< posteriormente en una llu:ia de ideas
guiada por el do"ente "omenta el tipo de pgina )ue te gustar=a disear 9 men"iona 8l >por
)u8?
0.2 34ue entiendes por una pgina web5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
1. 34u tipo de informacin tiene las pginas web ue has visitado5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
666666666666666666666666666666666666666666666666666666
7. 34u diferencia encuentras entre una pgina web y un sitio web5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
666666666666666666666666666666666666666666666
8. 34u tienen en com/n los sitios web ue has visitado5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
6666666666666666666666666666666666666666666666666666666
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
9. 3!ara u crees ue sirve una pgina web5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
6666666666666666666666666666666666666666666666
:.2 34u te gustar'a ue tuviera la pgina web ue disears5
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
Utilizas los elementos fundamentales del diseo de una pgina
Web
63T171D6D !
.ara ini"iar una pgina web< primero debes de "ono"er sus "ara"ter=sti"as 9 las reglas bsi"as )ue
debes de seguir para disearla< por lo tanto realiza la le"tura Qu es HTML? 9 elabora un
resumen. .regunta a tu profesor las dudas )ue te :a9an surgiendo.
34u es "#$%5
!ara abreviar una larga historia, podemos decir ue un cient'fico llamado #im ;erners2%ee invent "#$%
all por 0<<=. El objetivo era facilitar a cient'ficos de diferentes universidades el acceso a los documentos de
investigacin de cada uno de ellos. El proyecto obtuvo un &ito mucho mayor del ue #im ;erners2%ee
nunca hubiese llegado a imaginar. Al inventar "#$%, este cient'fico sent las bases de la web tal y como la
conocemos en la actualidad.
"#$% es un lenguaje ue hace posible presentar informacin >por ejemplo, investigaciones
cient'ficas? en ,nternet. %o ue ves al visuali+ar una pgina en ,nternet es la interpretacin ue hace el
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
navegador del cdigo "#$%. !ara ver el cdigo "#$% de una pgina slo tienes ue dar clic en la opcin
@Aer@ de la barra de men/s y elegir @Bdigo fuente@ >en ,nternet E&plorer?.
Ci uieres crear sitios web, no hay otra solucin ue aprender "#$%. ,ncluso si usas un programa
como Dreamweaver, por ejemplo, para la creacin de sitios web, poseer unos conocimientos bsicos de
"#$% hace la vida mucho ms fcil y tus sitios web mucho mejores.
"#$% es la abreviatura de @"yper#e&t $arE2up %anguage@, es decir, @%enguaje de marcado
hiperte&tual@, y esto ya es ms de lo ue necesitas saber a estas alturas. En todo caso, para mantener un
buen orden, necesitas conocer su significado con mayor detalle.
Hiper @H9perA2 Es lo contrario de lineal. %os programas de la computadora se ejecutaban de forma
lineal( cuando el programa hab'a ejecutado una accin segu'a hasta la siguiente l'nea, y despus de
sta a la siguiente, y a la siguiente, "#$%, sin embargo, ahora es diferente( se puede ir a donde
uno uiera cuando uno uiera. .
Te%to @Te%tA( Ce refiere al te&to de la pgina web.
Mar"ado @MarBCupA2 Es lo ue haces con el te&to. Ce marca el te&to del mismo modo ue en un
programa de edicin de te&tos con encabe+ados, vietas, negrita, etc.
Lenguaje @lenguajeA2 4s lo ue es "#$%. Este lenguaje hace uso de muchos trminos en ingls.
>3ules son las "ara"ter=sti"as del lenguaje HTML?
Este lenguaje ser el encargado de convertir un inocente archivo de te&to inicial en una pgina web con
diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones sorprendentes, formularios
interactivos, etc.
Estas caracter'sticas son las ue marcaron el diseo de todos los elementos del FFF incluida la
programacin de pginas Feb.
% a pgina Feb tiene ue ser distribuida( %a informacin repartida en pginas no muy grandes
enla+adas entre s'.
Debe ser fcil navegar por la pgina.
#iene ue ser compatible con todo tipo de ordenadores >!Bs, $acintosh, estaciones de trabajo,
etc.? y con todo tipo de sistemas operativos >Findows, $C2D-C, )G,H, $AB2-C, etc.?
Debe ser dinmico( el proceso de cambiar y actuali+ar la informacin debe ser gil y rpido.
Ieglas bsicas en el diseo
0. #ener algo interesante ue decir en tu !JK,GA web(
1. #odo el mundo ya conoce las herramientas de b/sueda. "a+ ue tus enlaces sean pertinentes al
tema ue estas tratando.
7. Iecuerda ue no en todos los ;uscadores aparecen igual( Go hagas ue tu pgina dependa
demasiado de ciertos comandos "#$% ue pueden no aparecer en todos los buscadores. Algunos
buscadores pueden no aceptar tus grficas, as' ue proporciona te&tos alternativos.
8. $antn tu pgina con un m&imo de 09L en imgenes o fraccinala si sta es muy grande.
9. Go usar grficas de otros autores si no est autori+ado( "ay muchas fuentes de grficas gratis.
#ambin e&isten graficadores sencillos con los ue puedes crear #us propias grficas.
:. Ieconocer el trabajo de los dems( Ci alg/n @Citio@ te ayud de alguna manera a construir tu
pgina, entonces br'ndale un enlace
M. Bolocar fecha de la /ltima revisin( ,ndica cundo se reali+ la /ltima revisin. Esto har ue las
personas se motiven a leer tu pgina.
N. Aerifica sus enlaces peridicamente( Go dejes ue e&piren sus enlaces durante largos per'odos de
tiempo. Ievisa su valide+.
<. Ce abierto a comentarios o sugerencias(Especifica v'nculos de correo electrnico o, si es posible,
formularios de realimentacin.
0=.!ractica el "#$%( )sa los editores solo cuando cono+cas los principios bsicos del "#$%.
63T171D6D $
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Despu8s de ;aber realizado la le"tura< reda"ta tu resumen
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
6666666666666666666666666666666666666666666666666666666666666666666666666666666
63T171D6D 15T4D/6D+/6
.6/T4 1
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
6 partir de este momento :as a empezar "on la estru"tura de tu pgina web para
eso es ne"esario )ue te organi"es en e)uipo de tres integrantes para )ue
reali"es la le"tura Eestructura de una pgina web a la par )ue :as desarrollando
las a"ti:idades referentes al diseo de tu pgina "omo son2
4legir posibles temas a tratar en la pgina web
3lasifi"a los temas
4s"oge un tema para tu pgina web
Definicin de la ,nformacin a publicar.
>Fu8 fuentes de informa"i#n tengo?
Escalabilidad
.lanifi"a"i#n
Definicin del diseo
.regunta al profesor todas las dudas )ue te :a9an surgiendo.
www.monografias.com
Diseo de una pgina web
Antes de entrar de lleno en lo ue ser la construccin de la pgina web, desarrollaremos la
metodolog'a para el diseo de las mismas. Es importante ser originales para estructurar sus contenidos,
redactar sus te&tos, agregar imgenes, enla+ar las pginas, etc,
1. 4legir posibles temas a tratar en la pgina web
Empie+a hacindote esta pregunta 3De u puedo hablar en mi pgina web5 3Bul es la temtica ue
voy a trabajar5 !ara contestar estas preguntas haremos un listado de posibles temticas ue te
puedan interesar para reali+ar la pgina web. $s adelante iremos eliminando y aadiendo otras seg/n
los factores ue vamos a tener en cuenta y seg/n cul sea tu objetivo( ganar muchas visitas, ganar
mucho dinero, o cualuiera ue sea el fin de tu pgina web.
T4M6- D4 4G4M.L+- 6
65+T6 TU- .+-1HL4- T4M6-
%enguaje "#$%
Bapacitacin de ,nformtica
$i artista favorito
!ortafolio de evidencias de mis materias
Gegocio familiar
$i ciudad
$i escuela
Blasifica los temas
Es importante saber el tipo de Feb ue ueremos crear, es el punto de partida ue afecta a todas las
etapas posteriores de creacin, reali+aremos un diseo, aplicaciones, navegabilidad adecuadas al tipo
de Feb seleccionada, Ejemplos(
2 Citio Feb comercial. 2 Citio Feb profesional.
2 Citio Feb de informacin. 2 Citio Feb de ocio.
4G4M.L+-2 3
3L6-1I1363105
%enguaje "#$% Citio Feb profesional
Bapacitacin de ,nformtica Citio Feb profesional
$i artista favorito Citio Feb de ocio
!ortafolio de evidencias de mis materias Citio web de informacin
Gegocio familiar Citio Feb comercial
$i ciudad Citio web de informacin
$i escuela Citio web de informacin
AG-#A #)C #E$AC . B%AC,O,BA%-C CEKPG C) #,!-.
@3omo se muestra en el ejemploA
M1- T4M6- 6
3L6-1I1363105
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
7.2 Escoge un tema para tu pgina web
El factor ms importante, es, ue el tema nos apasione. De modo ue de la lista de temas ue tengo, voy a
ordenarlos Ceg/n me gusten. >El tema ue uede primero es sobre el ue desarrollars tu pgina web?
4G4M.L+-2 T4M6- +/D456D+- M
M1- T4M6- +/D456D+-
$i escuela
$i ciudad
$i artista favorito
Bapacitacin de ,nformtica
Gegocio familiar
!ortafolio de evidencias de mis materias
%enguaje "#$%
8.2 Definicin de la 1nforma"i#n a publi"ar.
Despus de ue hayas seleccionado el tema de la pgina web es necesario definir la informacin ue
se va a publicar en el sitio Feb, si vas a hacer una pgina sobre tu escuela, como en este caso, 3u
vas a poner5(
65+T6 TU T4M6 J L6 15I+/M63105 FU4 T4 DU-T6/K6 M+-T/6/ 45 TU .LD156
@3omo se muestra en el ejemploA
4G4M.L+2 M1 4-3U4L6 M1 T4M62
"istoria de mi escuela
$aterias ue imparten
-tros !lanteles
Actividades ue reali+a
Envi de correos
Enlaces a otras pginas de inters
9.2 34u fuentes de informacin tengo5
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
)na fuente de informacin es el lugar del ue manan los conceptos, las ideas y los pensamientos ue sirven
para la creacin de nuevo conocimiento en este caso una pgina web. !or lo tanto, en este apartado
necesitamos recolectar las fuentes de informacin de donde vamos a e&traer informacin del tema de
nuestra pgina web
T4M62 Mi es"uela
www.cobachbc.edu.m&
http(QQwww.e2local.gob.m&QworEQtemplatesQencicloQbajacaliforniaQmunicipiosQ=1==1a.htm
,nternet para buscar pginas de inters relacionados con el tema
Enlaces a direcciones de cursos como( www.aulaclic.com, www.aulafacil.com, etc.
65+T6 TU T4M6 J L6- IU45T4- D4 3+5-ULT6 .6/6 3/46/ TU .LD156 W4H.
@3omo se muestra en el ejemploA
IU45T4- D4 15I+/M63105 D4 M1 T4M62




:.C 4s"alabilidad
%a escalabilidad se define como las visiones a corto y largo pla+o acerca de nuestro sitio Feb, si a
largo tiempo ueremos ampliar nuestro sitio Feb con nuevas aplicaciones, nuevas pginas,
actuali+aciones constantes de ue va a depender ue realicemos esto(
4G4M.L+ D4 L6 4-36L6H1L1D6D 45 M1 .LD1562 M1 4-3U4L6

%a pgina se revisara constantemente y se modificara cuando ya hayan vencido los enlaces, este muy
lenta debido a la cantidad de visitas ue tenga, cuando sea necesario ampliarla, agregar ms
informacin o enlaces. %o ue suceda primero.
M4531+56 36D6 3U65D+ 76- 6 /46L1M6/ 4-36L6H1L1D6D 45 TU .LD156.
@3omo se muestra en el ejemploA
4-36H1L1D6D 45 M1 .LD1562

M.C .lanifi"a"i#n
4n todo pro"eso de "rea"i#n 9 diseo de pginas Web el primer paso a lle:ar a "abo ser la
planifi"a"i#n< )ue in"lu9e la defini"i#n de2
-;RE#,A-C( .resentar informa"i#n de la preparatoria )ue sea atra"ti:a para los j#:enes de nue:o
ingreso.
a? .NHL13+( identificar el tipo de personas a la ue va dirigida la informacin, en este caso todo tipo
de personas podrn acceder a la pgina pero el p/blico seleccionado ser los estudiantes de
secundaria y todos auellos jvenes ue estn buscando educacin del nivel medio superior.
b? 3+5T451D+( habr informacin sobre el plantel y la preparacin ue otorga a los jvenes.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
c? 4-T/U3TU/62 Estar formada por una pgina principal ue brindara informacin y ofrecer
enlaces para ir las secciones del sitio web( materias, capacitaciones, !araescolares, etc. #endr
otras 7 pginas web ms ue estarn ligadas a la primera como se muestra en la estructura
siguientes(
I46L1M6 L6 .L651I1363105 D4 TU .LD156 W4H -4DN5 4L T4M6 FU4 H6J6- 4-3+D1D+2
N.C Defini"i#n del diseo
Dependiendo del tipo de Feb, el tema seleccionado, definida la informacin y la escalabilidad,
estamos preparados para plasmar en papel el diseo de la pgina Feb, incluyendo las pginas, los
fondos, tipos de letras, botones, formularios, linEs, plantillas, aplicaciones.... de tal forma ue
obtengamos @storyboard@ >es un conjunto de ilustraciones mostradas con el objetivo de servir de gua
para entender una !istoria" previsuali#ar una animaci$n o seguir la estructura de una pgina web antes
de reali#arse? de los elementos y diseo ue ueremos implementar en nuestro sitio Feb.
4jemplo de la pgina web de mi es"uela
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
/46L1M6 4L D1-4O+ D4 TU .LD156 W4H.
@6p#9ate en el ejemploA
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
>3#mo empiezo a es"ribir HTML?
!ara comen+ar tan slo necesitas un editor de te&to para escribir las pginas y un navegador para
visuali+arlas.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
El editor no debe formatear el te&to. )sa el Hlo" de notas > Gotepad ?, las etiuetas y sus atributos
se pueden escribir en may/sculas o min/sculas. El lenguaje ignora, tambin, los espacios en blanco
seguidos, donde slo cuenta uno de ellos.
)na ve+ ue hayas escrito una pgina, gurdala en un archivo con e&tensin .;tm o .;tml.
Ci el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para
guardarlo antes de cerrar el programa.
Escribir en el ;loc de notas
0. Ciempre ue se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en l,
funciona como cualuier otro editor de te&to, basta con situar el cursor en el documento y escribir.
Es recomendable insertar una nueva l'nea para cada nueva etiueta "#$%, ya ue resulta ms fcil
trabajar de este modo. Ci escribiramos todo el cdigo seguido nos resultar'a dif'cil interpretarlo, por
ello es preferible programar insertando las etiuetas por separado, en diferentes l'neas.
A travs del men/ Iormato, opcin Iuente, puedes cambiar la fuente de todo el documento. Ci lo
deseas, puedes hacer la letra algo ms grande o peuea.

Abrir un documento
0. !ulsar la combinacin de teclas 3trlP6.
1. "acer clic sobre el men/ 6r";i:o y elegir la opcin 6brir.
!ara guardar un documento, puedes utili+ar cualuiera de las siguientes operaciones.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
0. !ulsar la combinacin de teclas 3trlPD.
1. "acer clic sobre el men/ 6r";i:o y elegir la opcin Duardar.
A la hora de guardar un documento no debes olvidar guardarlo con la e&tensin ;tm o ;tml. !or ejemplo,
puedes guardar un documento con el nombre mipgina.;tm.
Manejar los elementos bsicos del lenguaje HTML en la creacin
de pginas web
63T171D6D &
6ntes de empezar a "rear la pgina web es ne"esario )ue "onoz"as los t8rminos bsi"os )ue
estars utilizando en el trans"urso de este blo)ue< por lo )ue es ne"esario )ue reali"es una
b,s)ueda en 1nternet 9 definas lo siguiente2
;loc de Gotas(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
;uscador(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
666666666666666666666666666666666666666666666666666666666666666666
6666666666666666666666666666666666666666666666666666666666666666666666666666
Bompatible(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
Estructura de pgina web(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
Etiueta(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
"iperte&to(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
%enguaje html(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
$arcas >tag?
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
Gavegador(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!gina web(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
!lataforma(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
Cervidor web(
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
A'nculos
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666666666666666666666666666666666
66666666666666666666666666666666666666666666666666666666
6;ora s=< es tiempo de empezar "on la programa"i#n de la pgina web. 4s importante )ue reali"es
"on tu e)uipo de trabajo todas las a"ti:idades )ue se te indi"an< para posteriormente "apturarlas en
el blo" de notas. .ronto :eras los resultados de tu pgina. Lnimo 9 adelanteQQ
/ealiza la le"tura Eestructura bsica a la par )ue :an desarrollando las a"ti:idades referentes al
diseo de su pgina. .regunta al profesor todas las dudas )ue te :a9an surgiendo.
Estructura bsica
Bada pgina comien+a con( R HTML S .
A continuacin viene la cabecera, delimitada por R H46D S R TH46D S
Despus, el comando R H+DJ S, ue indica el comien+o del cuerpo de la pgina.
%as instrucciones "#$% se escribirn a continuacin, y finali+arn con R TH+DJ S
%a pgina acabar con R THTML S
Es decir(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
4ti)ueta2
Esta etiueta va en la parte del encabe+amiento de la pgina web, es decir en el "EAD, y define en su
contenido el t'tulo de la pgina web, misma ue aparecer en la parte superior i+uierda de la pantalla de
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
tu navegador.
63T171D6D '
Tras"ribe el "#digo siguiente en el blo" de notas< graba el ar";i:o "on el nombre inde&.html. Una
:ez realizado esto< 9 sin "errar el editor de te%to< :amos al na:egador< da " l i " e n e l me n ,
a r " ; i : o < sele""iona la op"i#n abrir< bus"a el ar";i:o< sele""i#nalo 9 eje",talo dando doble "li"
en abrir. Tu nue:a pgina estar :isible. 5ota )ue el t=tulo apare"er en la parte superior @pestaa
de la pginaA.
4jemplo 2
4ti)ueta
#odo el te&to, las imgenes y el formato visibles al usuario deben encontrarse entre las etiuetas
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!uede llevar los siguientes atributos(
;gcolor Define el color de fondo de la pgina
#e&t Define el color del te&to de la pgina
%inE Define el color de los v'nculos en la pgina
AlinE Define el color del v'nculo actual o activado en la pgina
AlinE Define el color del v'nculo ya visitado
;acEground
;gsound
;gproperties
Define el archivo grfico ue ser desplegado como fondo
Define el archivo de audio ue se tocar en la pgina.
Define el movimiento vertical del fondo.
>3#mo se utilizan los "olores en HTML?
Ce pueden llegar a tener 0: millones de colores en una pgina web. E&isten dos formas para aplicar
colores(
0. Ce especifica el color deseado directamente con el nombre del color en ingles( Ejemplo( blue,
green, yellow
1. Ce especifica el color deseado mediante n/meros he&adecimales ej empl o(
Donde se indica en formato he&adecimal la proporcin de rojo< :erde 9 azul ue forma el color deseado.
El s'mbolo % es opcional. )n n/mero he&adecimal es un n/mero en base 0:, la base normal utili+ada es
base 0= o decimal del = al <. En este caso los n/mero validos sern del = al < aadiendo desde la a A a la
f O. !or tanto el n/mero =O ser el 09, =E ser 08.
En la especificacin del color utili+aremos para definir la proporcin de cada color un n/mero del = al OO
>199?, = indica nada de ese color y OO la mayor proporcin del color.
Ejemplos de colores(
U//7766 3+L+/ U//7766 3+L+/
SOOOOOO ;lanco S====== Gegro
SOO==== Iojo S==OO== Aerde
S====OO A+ul SOO==OO $agente
S==OOOO Byan SOOOO== Amarillo
SM=D;<7 Agua $arino S====N= A+ul $arino
SOOMO== Boral SA:1A1A Baf
SB=B=B= !lomo S8O1O8O Aioleta
63T171D6D (
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o Einde&.htmlV.
! 3ontin,a tras"ribiendo el ejer"i"io !
$ Draba "on el mismo nombre.
& 4je"uta 9 si muestra alg,n error "orr=gelo.
& 1ngresa a la pgina ;ttp2TTwww.usuarios.sion."omTpauluBT"olores;tml.;tm
3;e"a los "#digos de los "olores.
' 3ambia el "#digo del "olor de la pgina )ue trans"ribiste< graba< eje"uta
9 obser:a la diferen"ia.
4jemplo !2
Teto en HTML
)na pgina Feb se visuali+a en pa'ses distintos, ue usan conjuntos de caracteres distintos. El
lenguaje "#$% nos ofrece un mecanismo por el ue podemos estar seguros ue una serie de caracteres
raros se van a ver bien en todos los ordenadores independientemente de su juego de caracteres. Buando
ueremos poner uno de estos caracteres especiales en una pgina, debemos sustituirlo por su cdigo. !or
ejemplo, la @@ >a min/scula acentuada? se escribe @Waa"uteX@ de modo ue la palabra pgina se escribir'a
en una pgina "#$% de este modo( pTaacuteUgina.
A continuacin se muestra una lista con algunos caracteres y el nombre con el ue han de ser
representados(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
4jemplo $2
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Align Establece ue la regla se alinee a la i+uierda, centro o derecha
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
G-C"ADE
%EO#,BEG#EI o I,K"#
4uita el sombreado predeterminado de la regla
F,D#"
C,VE
!ermite especificar el ancho de la regla >en pi&eles o porcentaje?
!ermite especificar el alto de la regla >en pi&eles?
63T171D6D *
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o Einde&.htmlV.
! 3ontin,a tras"ribiendo el ejer"i"io &
$ Draba "on el mismo nombre.
& 4je"uta 9 si muestra alg,n error "orr=gelo 9 :uel:e a eje"utar.
& .ra"ti"a los diferentes atributos de la eti)ueta R;rS
4jemplo &
4n"abezados
%os t'tulos o encabe+ados se emplean al comien+o de una seccin. %as etiuetas ue se usan son(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D Y
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o Einde&.htmlV.
! 3ontin,a tras"ribiendo el ejer"i"io '
$ Draba "on el mismo nombre.
& 4je"uta 9 si muestra alg,n error "orr=gelo 9 :uel:e a eje"utar.
& .ra"ti"a los diferentes tamaos de en"abezados
4jemplo '2
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
4ti)uetas para el te%to
El lenguaje "#$% es un lenguaje de marcas, estas marcas sern fragmentos de te&to destacado de una
forma especial ue permiten la definicin de las distintas instrucciones de "#$%, tanto los efectos a aplicar
sobre el te&to como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiuetas y
sern la base principal del lenguaje "#$%. En documento "#$% ser un archivo te&to con etiuetas ue
variarn la forma de su presentacin.
)na etiueta ser un te&to incluido entre los s'mbolos menor &ue W y ma'or &ue X. El te&to incluido
dentro de los s'mbolos ser e&plicativo de la utilidad de la etiueta.
!or ejemplo(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
6tributos de las 4ti)uetas
%as etiuetas pueden presentar modificadores ue llamaremos atributos ue permitirn definir diferentes
posibilidades de la instruccin "#$%. Estos atributos se definirn en la etiueta de inicio y consistirn
normalmente en el nombre del atributo y el valor ue toma separados por un signo de igual. El orden en ue
se incluyan los atributos es indiferente, no afectando al resultado. Ci se incluyen varias veces el mismo
atributo con distintos valores el resultado obtenido ser imprevisible dependiendo de cmo lo interprete el
navegador. Buando el valor ue toma el atributo tiene ms de una palabra deber e&presarse entre
comillas, en otro caso no ser necesario.
)n ejemplo de atributo ser(
R6 H/4IZ[;ttp2TT"oba";b".edu.m%[S.gina ofi"ial de "oba";RT6S
En este caso la etiueta A presenta un atributo "IEO cuyo valor es http(QQcobachbc.edu.m&
,gualmente una etiueta podr'a presentar varios atributos(
RH/ 6L1D5ZL4IT 5+-H6D4 -1M4Z& W1DTHZ&\]S
En este caso la etiueta "I presenta cuatro atributos. El segundo atributo ()*H+,- es un caso
especial ue no presenta valor. El orden en ue se especifiuen los atributos no afectar al resultado final.
63T171D6D 1\
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o )ue grabaste "on el nombre de inde%.;tml.
3ontinua tras"ribiendo la parte )ue falta del ejer"i"io (.
! Draba "on el mismo nombre 9 eje"uta.
$ +bser:a la pgina )ue te presenta< si muestra alg,n error "orr=gelo 9 :uel:e
a eje"utar.
&.C .ra"ti"a las diferentes eti)uetas para te%to.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
4G4M.L+ (2
4ti)ueta
!resenta atributos ue nos permiten modificar el tamao y color del te&to incluido entre la etiueta de
inicio y fin.
6T/1HUT+ IU53105
Bolor Determina el color ue se aplica al te&to
Ci+e Determina el tamao relativo del te&to. %os tamaos vlidos son del 0 al
M, siendo el predeterminado el 7 y el ms grande el 0.
Oace Asigna una fuente o tipo de letra.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D 11
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o )ue grabaste "on el nombre de inde%.;tml.
3ontinua tras"ribiendo la parte )ue falta del ejer"i"io *.
! Draba "on el mismo nombre 9 eje"uta.
$ +bser:a la pgina )ue te presenta< si muestra alg,n error "orr=gelo 9 :uel:e
a eje"utar.
&.C .ra"ti"a los diferentes atributos de la eti)ueta RIontS.
4jemplo *2
63T171D6D 1
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
D4-.U^- D4 H6H4/ ./63T136D+ L+- 4G4/3131+- 65T4/1+/4-< 3+M.L4T6 L6 T6HL6
-1DU145T4 4_.L1365D+ L6 IU53105 FU4 /46L1M6 36D6 4T1FU4T62
63T171D6D 15T4D/6D+/6
.6/T4
4s tiempo de )ue empie"es a realizar tu pgina web< por lo )ue es importante )ue re:ises el
diseo )ue ;i"iste 9 empie"es a definir "ada una de las eti)uetas )ue :an a formar la pgina.
6nota en el "uadro siguiente el "#digo de tu pgina prin"ipal para )ue posteriormente la
tras"ribas en el blo" de notas.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
1mgenes en los do"umentos HTML
4ti)ueta
En un documento "#$% se puede incluir cualuier imagen en alguno de los siguientes formatos grficos(
D1I< G.4D # _HM. El formato ms e&tendido y practico es el D1I, todos los navegadores grficos de la
Feb soportan este formato, adems e&isten gran cantidad de programas de tratamiento de grficos ue
permiten grabar los grficos o convertir grficos a K,O. Este formato, as' mismo, utili+a algoritmos de
compresin ue hacen ue sus archivos sean de cortos tamaos y apropiados para su transmisin por la
red.
El formato K,O es ms recomendado para iconos, grficas,... y el formato R!EK es ms /til para
imgenes reales como paisajes y personas.
!ara poder utili+ar otro formato grfico, necesitars usar un enlace cuyo destino sea la carYeta del
grfico. Al seguir el enlace se te pedir ue indiues un programa e&terno ue se encargue de mostrar los
archivos de ese formato grfico, por lo tanto no pueden insertarse dentro de documentos "#$%.
1n"lusi#n de 1mgenes
%a etiueta encargada de mostrar imgenes en "#$% es 1MD y tiene el siguiente formato(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
En el punto del archivo "#$% en el ue ueramos ue se muestre la imagen incluimos esta etiueta. Ce
puede mostrar la imagen, al comien+o del documento, al final o intercalada en el te&to. ,gualmente se puede
insertar una imagen dentro de cualuiera de las estructuras del lenguaje "#$% como listas, tablas o
formularios. Esta etiueta no necesita la etiueta de fin, ya ue el efecto de la etiueta no se produce sobre
un te&to o alg/n elemento "#$%.
El atributo -/3 indica el archivo de imagen ue se incluir en el documento. Ce indicar el camino hasta
la imagen en formato U/L, el archivo de la imagen deber tener una e&tensin apropiada a su formato, por
ejemplo si es D1I la e&tensin ser .gif, si es G.4D la e&tensin ser .jpg o .jpeg, si no se cumple esto la
imagen no se mostrar de forma correcta.
Al definir la imagen como una )I%, esta imagen no es necesario ue se encuentre en el servidor local,
pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual
ue en los hiperenlaces es posible indicar direcciones de U/L relati:as a los documentos actuales.
%o normal es referenciar una imagen ue se encuentre en el servidor local, ya ue el acceso a imgenes
en servidores e&ternos puede ser ms lento. !or tanto conviene copiar las imgenes e iconos ue se usen
al servidor local.
A continuacin se e&plica la utilidad de cada unos de los atributos de la etiueta 1MD.
Te%to alternati:o
El atributo 6LT, indicar un te&to alternativo a mostrar si no fue posible mostrar la imagen. Ce usa para
navegadores ue no permitan mostrar imgenes, sean solo te&to o tenga inhabilitado el mostrar imgenes.
Ce recomienda cuando e&istan en el documento imgenes usadas como botones, para mostrar un te&to en
ve+ del botn en navegadores ue no puedan mostrar grficos, de esta forma se consigue ue todos los
usuarios puedan consultar sus pginas.
6linea"i#n de la imagen
,ndica cmo se alinea el te&to ue sigue a la imagen con respecto a esta. ,ndicar si la primera frase del
te&to se colocar en la parte alta de la imagen, T+., en el punto medio de la imagen, M1DDL4, o en la parte
de abajo de la imagen, H+TT+M.
#ambin se pueden utili+ar alineaciones un poco ms avan+ada, T4_TT+. se alinea justo al comien+o
del te&to ms alto de la l'nea >#-! se alinea al tamao del primer carcter de la l'nea?. 6H-M1DDL4, es el
centro real de la imagen, con $,DD%E se coloca el te&to a partir del punto medio, con A;C$,DD%E el te&to
aparece centrado con la imagen. 6H-H+TT+M coloca el te&to justo al final de la imagen. Ce recomienda
ue se usen estos /ltimos al ser ms precisa la alineacin, aunue solo son validos para los navegadores
ms avan+ados.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
En los casos anteriores solo se especifica donde se coloca la primera l'nea del te&to y el resto se incluyen
debajo de la imagen uedando un efecto muy feo cuando el te&to tiene ms de una l'nea. E&isten otras
alineaciones ue incluirn a la imagen insertada dentro del te&to. %a imagen puede uedar a la i+uierda,
L4IT o a la derecha, /1DHT. Go se podr utili+ar en combinacin con las anteriores alineaciones.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Tamao de la imagen
Es posible cambiar el tamao de la imagen de forma ue pueda ajustarse como se desee, pudiendo
ampliar o disminuir este.
El atributo H41DHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla
>pi&eles? o en tanto por ciento sobre el tamao del documento. En caso de ue la imagen sea mayor o
menor se escalar a este tamao.
El atributo W1DTH indica el ancho al ue se mostrar la imagen, escalndola a este tamao. #ambin se
e&presar en pi&eles o en tanto por ciento.
Go es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones,
ajustndose la otra a la proporcin de la imagen. Es recomendable indicar solo uno de estos parmetros
para ue la imagen no se muestre deformada. ,gualmente se debe usar el valor relativo en tanto por ciento
si se desea ue la imagen guarde siempre una misma proporcin con respecto al te&to. Ci se desea mostrar
dos imgenes y ueremos ue una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en
una el ancho >F,D#"? del 19Z y en la otra del M8Z, no indicando en ning/n caso el alto >"E,K"#?, de esta
forma independientemente como sea el tamao de la ventana del navegador e independientemente del
monitor del cliente, siempre se podrn mostrar ambas imgenes en la misma l'nea.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D 1!
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o )ue grabaste "on el nombre de inde%.;tml.
3ontinua tras"ribiendo la parte )ue falta del ejer"i"io Y.
! Draba "on el mismo nombre 9 eje"uta.
$ +bser:a la pgina )ue te presenta< si muestra alg,n error "orr=gelo 9 :uel:e
a eje"utar.
&.C .ra"ti"a las diferentes ubi"a"iones de las imgenes.
4jemplo Y2
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Tablas
En "#$% tambin podemos incluir arreglos de tablas. Ce deben utili+ar varias etiuetas(
4ti)ueta
Ceala el inicio y final de una tabla. Cus atributos son(
4T1FU4T6 IU53105
Align Establece la alineacin de la tabla o te&to mediante
A%,KG[%EO# o A%,KG[I,K"#
;gcolor Establece el color de fondo de las celdas de la tabla
;order Determina el ancho del borde en pi&eles
;orderBolor Asigna un color al borde
;orderDarE Determina el color de la parte oscura de un borde de 7 dimensiones
;order%ight Asigna el color de la parte clara de un borde de 7 dimensiones
Baption Especifica el titulo para la tabla
Bellpadding Establece la cantidad de espacio libre junto al contenido de una
celda
Bellspacing Asigna la cantidad de espacio entre las celdas de una tabla
Fidth Determina el ancho de la tabla en pi&eles o en un porcentaje
4ti)ueta
,ndica al navegador cliente ue e&hiba el te&to como un encabe+ado en la primera fila de una tabla.
Atributos principales(
4T1FU4T6 IU53105
Bolspan especifica el n/mero de celdas ue cubre el encabe+ado
Align Determina la posicin del te&to del titilo
4ti)ueta
,ndica al navegador ue e&hiba el te&to dentro de una filaU puede tambin interpretarse como la
etiueta ue define filas.
4T1FU4T6 IU53105
Align Alineacin del te&toQobjeto de la celda
4ti)ueta
%a etiueta de datos de la tabla, es la ue identifica a las columnas o celdas espec'ficas de una tabla.
Atributos principales(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
4T1FU4T6 IU53105
Align Alineacin del te&toQobjeto de la celda
;gcolor Bolor de fondo de la celda
;acEground imagen de fondo de una celda
Fidth Ancho de la celdaQcolumna con respecto al ancho de la tabla
Colo precisa definir el ancho en la primera celda de la columna.
Iecuerde ue dentro de una celda, usted puede insertar desde te&to o un grfico hasta una tabla
entera.
63T171D6D 1$
1ngresa al blo" de notas 9 realiza lo siguiente2
1 Tras"ribe el ejer"i"io 1\.
Draba "on el nombre de .lanteles. ;tml
! 4je"uta el ar";i:o< s= presenta errores "orr=geles
$ +bser:a la tabla )ue te presenta la pgina.
& Modif="ala a tu gusto.

4jemplo 1\(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Listas
Bon frecuencia se usan listas en los documentos. El lenguaje "#$% incorpora unas listas con vietas
sencillas o tambin letras o n/meros. !ara dar ms vistosidad a las pginas, se suelen emplear tambin
imgenes ue se colocan delante de cada prrafo. Aamos a ver algunas de las posibilidades ue tenemos.
%istas con vietas desordenadas
"e au' el ejemplo ms sencillo de una de estas listas(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
-tro atributo interesante es compactar para reducir el espacio entre los elementos
%istas con vietas ordenadas
Estas listas se caracteri+an porue aparecen n/meros o ciertos caracteres ue ordenan sus elementos. %a
etiueta usada es W-%X junto con su correspondiente de cierre WQ-%X. El atributo #.!E toma ahora los
valores 0, a, A, i, ,. )n ejemplo de estas listas es el siguiente
4-3/1H1M+- 45 HTML -4 74/L 6-K
Rol t9peZiS
Rli S!rimer trmino de la lista
Rli SCegundo trmino
RliS#ercer trmino
RliSBuarto
RliS4uinto
RTolS
i. !rimer trmino de la lista
ii. Cegundo trmino
iii. #ercer trmino
iv. Buarto
v. 4uinto
%istas de definicin
Estas listas se forman con el elemento ue se define y su definicin.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D 1&
1ngresa al blo" de notas 9 realiza lo siguiente2
1 Tras"ribe el ejer"i"io 11.
Draba "on el nombre de capacitaciones. html
! 4je"uta el ar";i:o< s= presenta errores "orr=geles
$ +bser:a las listas )ue te presenta la pgina.
& Modif="ala a tu gusto.

4jemplo 11(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Hiper:=n"ulos
)n v'nculo hiperte&tual es un te&to, botn o imagen ue al seleccionar nos lleva a otra direccin )I%,
pgina FE; o recurso.
4ti)ueta
%a etiueta WAX ue viene de \ancla], denota el inicio y el final de una instruccin ue contiene alguna
forma de v'nculo o hiperv'nculo. Esta etiueta permite al usuario vincularse a otra ubicacin dentro
del mismo documento "#$%, a otro sitio FE;, a un servidor O#!, enlace de correo electrnico.
Atributos(
63T171D6D 1'
1ngresa al blo" de notas 9 realiza lo siguiente2
1 6bre el ar";i:o )ue grabaste "on el nombre de inde%.;tml.
3ontinua trans"ribiendo la parte )ue falta del ejer"i"io 1.
! Draba "on el mismo nombre 9 eje"uta.
$ +bser:a la pgina )ue te presenta< si muestra alg,n error "orr=gelo 9 :uel:e
a eje"utar.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
& .ra"ti"a los ;iper:=n"ulos.
' Modif="ala a tu gusto.
4jemplo 12
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D 1(
Despu8s de ;aber pra"ti"ado los ejer"i"ios anteriores llena la siguiente tabla< e%pli"ando la fun"i#n
)ue realiza "ada una de las eti)uetas siguientes2
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D 15T4D/6D+/6
.6/T4 !
3ontinuamos "on la elabora"i#n de la "odifi"a"i#n de tu pgina web< bsate en los ejemplos para
)ue puedas realizar las otras pginas )ue "omponen tu pgina web. 6nota en el "uadro siguiente
el "#digo de tu pgina )ue :as a disear para )ue posteriormente la tras"ribas en el blo" de
notas.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Mar!uesinas
Aamos a ver ahora lo ue son las maruesinas. Con peueas ventanas donde vemos un te&to
despla+arse. Clo son implementadas por Mi"rosoft 1nternet 4%plorer !.\ o superior, y no por 5ets"ape y
los dems navegadores, donde se ver como un te&to fijo.
%a etiueta bsica ser
Esta es una maruesina por defecto, pero se pueden aadir muchos ms parmetros(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
"tras eti!uetas #tiles
E&isten otras etiuetas ue pueden ser /tiles al momento de elaborar las pginas "#$%. Ce detalla el
objetivo de cada una de las etiuetas y un ejemplo.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
63T171D6D 15T4D/6D+/6
NLT1M6 .6/T4
En trabajo colaborativo como proyecto final debers entregar en un BD lo siguiente(
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
0.2 El Documento en $icrosoft Ford del diseo de tu pgina web ue elaboraste en la parte
0 de la actividad integradora.
1.2 El archivo ue elaboraste en el bloc de notas de tu pgina principal inde&.html ue incluya(
* Encabe+ado
* ,mgenes
* "iperv'nculos a otras pginas web
* "iperv'nculos a tus pginas.
* -pcin para enviar un correo
7.2 El archivo ue elaboraste en el bloc de notas de la segunda pgina, en la ue apliues las tablas
8.2 El archivo ue elaboraste en el bloc de notas de la tercera pgina, en la ue apliues listas.
9.2 %as tres pginas de tus sitios web.
:.2 El Documento en $icrosoft Ford con las conclusiones individuales de cada uno de los integrantes del
euipo.
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com
www.monografias.com
Autor(
`arla
guerita6se&i0^live.com
!ara ver trabajos similares o recibir informacin semanal sobre nuevas publicaciones, visite www.monografias.com

Das könnte Ihnen auch gefallen