Guia 01 HTML BASICO

8/19/2019 Guia 01 HTML BASICO

1/20


2/20

SERVICIO NACIONAL DE APRENDIZAJE SENAG&'A DE APRENDIZAJE

!I!5A I$G/A< G!I=$Proceso Ges"ión de la Formación Pro#esional In"egral

Procedimien"o ec*ción de la Formación Pro#esional In"egral

Versión: 02

Código: GFPI-F-019

*ración de la g*a( en 3oras):

18 3oras

INTROD&CCIÓN

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.Este lenguaje está constituido de elementos que el navegador interpreta y las despliegaen la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervnculos que nos permiten dirigirnos a otra página,listas, tablas para tabular datos, etc.!ara poder crear una página HTML se requiere un simple editor de te"to, puede ser bloc#de notas, o el notepad $$, y un navegador de internet %&E"plorer, 'hrome, (ire(o" etc.)

+,* Acti-id!de$ de Re.e/ión inici!,

Página 2 de20

ESTR&CT&RACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE


3/20

*ue sabes acerca de los t+rminos

-!ágina eb, sitio eb, protocolo HTT!, navegador eb, servidor eb, hiperte"to, HTML, estructura de

una página eb en HTML y sus etiquetas básicas/-0lguna ve1 has subido una página a un servidor gratuito/

+,0 Acti-id!de$ de conte/tu!i1!ción e identi2c!ción de conocimiento$nece$!rio$ 3!r! e !3rendi1!je,4

ee con de"enimien"o los sig*ien"es conce&"os y %*scar B5P

e% y *e s*ele con"ar con enlaces ("am%i?n conocidos como 3i&er'nc*los o linDs)&ara #acili"ar la na'egación en"re los con"enidos7

Sitio 8e97 !i"io es *n l*gar *e sir'e &ara algo o *n es&acio oc*&ado (o *e &*edellegar a serlo)7 a noción de +e% &or s* &ar"e 3ace re#erencia a In"erne" *na red deredes *e &ermi"e la in"ercone4ión de com&*"adoras median"e *n con*n"o de&ro"ocolos denominado CPEIP7

TCP:IP7 s *na denominación *e &ermi"e iden"icar al gr*&o de &ro"ocolos de red*e res&aldan a In"erne" y *e 3acen &osi%le la "rans#erencia de da"os en"re redes deordenadores7

;TTP7 P es *n &ro"ocolo de "rans#erencia de 3i&er"e4"o *e se *sa en la +e%7P es *na sigla *e signica y&ere4" rans#er Pro"ocol o Pro"ocolo de rans#erencia de i&er"e4"o7 s"e &ro"ocolo #*e desarrollado &or las ins"i"*cionesin"ernacionales +C y IF y se *sa en "odo "i&o de "ransacciones a "ra'?s deIn"erne"7

Página de20


4/20

1256

Página

+e%

!i"io +e%

2CPEIP

122P$a'egador +e%

!er'idor+e%

1i&er"e4"o

N!-e%!dor 8e97 n el ám%i"o de la "ecnologa *n na'egador o na'egador e% es*n &rograma in#ormá"ico *e &ermi"e 'is*ali,ar la in#ormación con"enida en *na&ágina e% ya sea aloada en In"erne" o en *n ser'idor local7

Ser-idor 8e97 ;n ser'idor e% es *n &rograma *e se eec*"a con"in*amen"e en*n com&*"ador man"eni?ndose a la es&era de &e"iciones de eec*ción *e le 3ará *n

clien"e o *n *s*ario de In"erne"7

;i3erTe/to7 l 3i&er"e4"o es *na 3erramien"a de so#"are con es"r*c"*ra nosec*encial *e &ermi"e crear agregar enla,ar y com&ar"ir in#ormación de di'ersas#*en"es &or medio de enlaces asocia"i'os7

;TML (;e97 s *n leng*ae de 3i&er"e4"o es decir *n leng*ae *e &ermi"eescri%ir "e4"o de #orma es"r*c"*rada y *e es"á com&*es"o &or eti?uet!$ *emarcan el inicio y el n de cada elemen"o del doc*men"o7

Para ampliar los conceptos consultar la presentación “Introducción a HTML.ppt” E$tructur! de un! 36%in! ;TML

Página de20


5/20

s"r*c"*ra %ásica em&lo Código

Como eercicio inicial 'amos a crear *na &ágina %ásica en 5 *"ili,ando el

&rograma no"e&ad HH al a%rir dic3o &rograma digi"aremos en *n arc3i'o n*e'o elcódigo de eem&lo *e se enc*en"ra en la &ar"e s*&erior7G*ardar el arc3i'o con e4"ensión 3"ml y de&osi"arlo en *na car&e"a en el disco localc: llamada &agina&r*e%a7$o"a: se recomienda *e los nom%res de las &áginas arc3i'os o car&e"as *e seescri%an en *n leng*ae de &rogramación *e sea orien"ado a la e% como es elcaso de 5 sean en min@sc*las y sin es&acios ya *e más adelan"e &*edenocasionar &ro%lemas la s*%irlos al ser'idor7

Eti?uet!$ 3!r! te/to7Como s* nom%re lo indican las e"i*e"as &ara "e4"o &ermi"en modicar la a&ariencia*e "endrá *n %lo*e de "e4"o al in"erior de la &ágina7 !e &*ede a#ec"ar "odo *n

&árra#o *na lnea *na &ala%ra carac"eres indi'id*ales sim&lemen"e encerrando elres&ec"i'o "e4"o den"ro de las e"i*e"as a&ro&iadas7 Alg*nos a"ri%*"os de "e4"o&*eden ser con"rolados &or e"i*e"as di#eren"es o%"eniendo res*l"ados similares

Para ampliar los conceptos consultar la presentación “HTML Body y Texto.ppt”

Eti?uet!$ 3!r! en!ce$7

Página J de20


6/20

A men*do encon"ramos en &áginas e% y o"ros doc*men"os 3"ml enlaces *e noscond*cen a o"ras &áginas doc*men"os o a&licaciones7 C*ando se a%re la n*e'a&ágina o doc*men"o enla,ado &*ede s*ceder *e lo 3aga reem&la,ando a la &áginade la *e 'enimos o a%riendo *na n*e'a 'en"ana del e4&lorador7a orden de enla,ar con o"ra &ágina e% * o"ro doc*men"o se res*el'e en elleng*ae 3"ml con la e"i*e"a a *e signica ancla o anc3or en la e4&resión

anglosaona7 Al encon"rar *n "e4"o e"i*e"ado con *na e"i*e"a ! el clien"e e%(5o,illa I4&lorer $e"sca&e e"c) lo &resen"a en la &an"alla resal"ado en color ys*%rayado7 !i el *s*ario de la &ágina 3ace clic so%re ese "e4"o marcado el na'egador&edirá al ser'idor o"ra &ágina e% o a%rirá o"ro doc*men"o7

Para ampliar los conceptos consultar la presentación “HTML Body y Texto.ppt”

Eti?uet!$ 3!r! im!%en7a e"i*e"a &ara las imágenes es Kimg 777777777777 L "odo lo demás *e 'a den"ro sonde"alles *e se le aMaden y *e son necesarios ("odos)7s"a e"i*e"a es algo es&ecial &*es as como las e"i*e"as de &árra#o y de ""*los (ym*c3as o"ras *e 3emos 'is"o) necesi"an o%liga"oriamen"e de s* corres&ondien"e

e"i*e"a de cierre la e"i*e"a de imagen no "iene e"i*e"a de cierre7

P7:17 KIMG SRC="amiguito.gif"> hace el llamado a una imagen que se encuentra en la misma carpetaque el inde".html

27 KIMG SRC=" imagenes/amiguito.gif"> hace llamado a una imagen que se encuentra en la carpetaimágenes y que +sta debe estar en la misma carpeta del inde".

Página 6 de20


7/20

'ualquiera de los m+todos para guardar imágenes en la página principal son válidos, se recomiendautili1ar el segundo ya que una página puede llegar a tener muchsimas imágenes, y será mejor tenerlasorgani1adas en carpetas.

Para ampliar los conceptos consultar la presentación “HTML Texto eimágenes.ppt” Eti?uet!$ 3!r! T!9!$7as "a%las se *san con &ro#*sión en las &áginas +e% m*c3as 'eces de%ido a *e sonel @nico ins"r*men"o con el *e se c*en"a &ara aseg*rarse *e las cosas es"arán ens* si"io7 Para denir *na "a%la se *san las e"i*e"as:KA>L y KEA>L son las e"i*e"as donde es"á con"enida la "a%laK/L y KE/L son las e"i*e"as *e indican el comien,o y n de *na la(K"3L y KE"3L si es *na la de ca%ecera)KL y KEL seMalan *na celda7a "a%la se 'a deniendo declarando *na la y a con"in*ación las celdas *e con"ieneesa la l*ego o"ra la y s*s celadas e"c7 $o es necesario *e "odas las lascon"engan el mismo n@mero de celdas7

Para ampliar los conceptos consultar la presentación “HTML Texto eimágenes.ppt”

Eti?uet!$ 3!r! "ormu!rio$7;n #orm*lario 5 es *na sección de *n doc*men"o *e con"iene con"enido normalcódigo elemen"os es&eciales llamados controe$ (casillas de 'ericación(c3ecD%o4es) radio%o"ones (radio %*""ons) men@es e"c7) y ró"*los (la%els) en esoscon"roles7 os *s*arios normalmen"e Ncom&le"anN *n #orm*lario modicando s*scon"roles (in"rod*ciendo "e4"o seleccionando o%e"os de *n men@ e"c7) an"es deen'iar el #orm*lario a *n agen"e &ara *e lo &rocese (&7e7 a *n ser'idor e% a *nser'idor de correo e"c7)A* se m*es"ra *n eem&lo de *n #orm*lario sim&le *e incl*ye ró"*los radio%o"ones y %o"ones &ara reiniciali,ar el #orm*lario o &ara en'iarlo:

Página O de20


8/20

Para ampliar los conceptos consultar la presentación “HTML Formularios.ppt”

+,* Acti-id!de$ de !3ro3i!ción de conocimiento@Conce3tu!i1!ción < Teori1!ción4,

Crear 'arias &áginas e% *e "engan las sig*ien"es carac"ers"icas:

a &ágina de%e llamarse inde473"ml de%e "ener *na imagen de #ondo com&le"o(&*eden %*scar en google images &or #ondos e%Q o &or cQ) además de incl*ir *nalis"a con los "ems *e a&arecen en &an"alla7 P*ede agregarle *na imagen a la &áginadel men@7

Página 8 de20


9/20

Vamos a crear *n si"io *e 3a%le acerca de los J reinos de la na"*rale,a &ara ello'amos a cons"r*ir *na &ágina inde473"ml en *na car&e"a n*e'a la &ágina de%ec*m&lir con las sig*ien"es carac"ers"icas:

• ;na imagen de #ondo7• Imagen general del "ema la c*al ser'irá de in"rod*cción *n"o con *n "e4"o *e

se &*eden descargar de In"erne"7• l "e4"o de in"rod*cción de%e es"ar *s"icado7• e%e lle'ar *n s*%""*lo *e diga is"ado de /einosQ7• Crear *na lis"a ordenada &ara cada reino "al c*al se m*es"ra en la imagen en la

&ar"e s*&erior7

*ego 'amos a crear las &áginas sec*ndarias del si"io *na &ara cada reino &or lo*e serán 6 en "o"al incl*yendo inde47

Cada &ágina sec*ndaria de%e c*m&lir con las sig*ien"es carac"ers"icas:• "*lo &rinci&al del /eino corres&ondien"e7•

e4"o e4&lica"i'o de cada reino lo &*ede co&iar de la e%7• Al menos "res imágenes al*si'as a cada reino7• ;n enlace *e re"orne a la &ágina &rinci&al7

es&*?s de "ener dic3as &áginas se &rocede a reali,ar el res&ec"i'o 3i&er'nc*lo delos "ems de la &ágina inde473"ml con las &áginas corres&ondien"es a la in#ormación

*e se solici"a7

+,0 Acti-id!de$ de tr!n$#erenci! de conocimiento,

A con"in*ación encon"rará la doc*men"ación %ásica de alg*nos com&onen"es delleng*ae 5 J *e 'an a ser *"ili,ados

5aneo de a%las en 5R a%las !im&les;na "a%la 5 &*ede ser considerada de manera sim&le como *n gr*&o de lasdonde cada *na de ellas con"iene *n gr*&o de celdas (y no al re'?s)7 as "a%lascomo "oda es"r*c"*ra en los doc*men"os 5 son denidas *sando elemen"os7n"onces *na "a%la sim&le &*ede ser inser"ada en *n doc*men"o 5 *sando "reselemen"os: el elemen"o 5 "a%le (es"r*c"*ra con"enedora &rinci&al) el elemen"o5 "r (con"enedor de la) y el elemen"o 5 "d (celda)7 Veamos *n eem&lo:

Página 9 de20


10/20

as "a%las nos &ermi"en re&resen"ar y ordenar c*al*ier elemen"o de n*es"ra

&resen"ación en di#eren"es las y col*mnas de modo *e &odamos res*mir grandescan"idades de in#ormación de *na manera *e &*ede re&resen"arse rá&ida y#ácilmen"e7l con"enido de *na "a%la lo de%emos desarrollar en"re las "ags K"a%leL77777KE"a%leL7Cada la de la "a%la se indica median"e las "ags K"rL77777KE"rL7 as"ags K"3L y K"dL con s*s corres&ondien"es "ags de cierre indican &ara indicar laslas indi'id*ales den"ro de cada la7 as "ags K"3L77777KE"3L indican *e se "ra"a deceldas *e sir'en como enca%e,ado de "a%la y s*elen 'is*ali,arse en negri"a7 as"ags K"dL77777KE"dL indican *e se "ra"a de celdas com*nes7

os K"dL elemen"os son los con"enedores de da"os en la "a%la7 os K"dL elemen"os&*eden con"ener "odo "i&o de elemen"os 5 como "e4"o imágenes lis"as o"ras

"a%las e"c

l anc3o de *na "a%la &*ede ser denido median"e C!!7

Resultado de la tabla

Página 10 de20


11/20

Una tabla HTML con un atributo borderSi no especifica un borde de la mesa, que se mostrará sin fronteras. Un borde se puedeañadir usando el atributo border:

HTML encabezamientos Tablancabezamientos de las tablas se definen con el !t"# etiqueta. $or defecto, todos losprincipales na%e&adores muestran encabezados de la tabla en ne&rita ' centrado:

Página 11 de20


12/20

a%las con Cols&an y /os&an

s la #orma de #*sionar celdas en *na "a%la7

Ro>$3!n indica el n@mero de las *e oc*&ará la celda7 Por de#ec"o oc*&a*na sola la7

Co$3!n indica el n@mero de col*mnas *e oc*&ará la celda7 Por de#ec"ooc*&a *na sola col*mna7

e es"a #orma si &onemos K"d colsanS2L *iere decir *e la celda ac"*al see4"iende en el anc3o de dos celdas7

Algo &arecido oc*rre si &onemos K"d ros&anSL la celda oc*&ará el al"o de celdas normales7

Veamos *n eem&lo:

!i 'is*ali,amos es"a "a%la &odemos o%ser'ar *e la &rimera celda oc*&a "res las y no so%re&asa la al"*ra "o"al de las "res celdas *e "iene a la derec3a7

Página 12 de20


13/20

Código #*en"e de la "a%la:

Las tablas tambi(n mane)as atributos entre sus etiquetas. *er ' aplicar al&unos atributos a lastablas creadas teniendo en cuenta la informaci+n de la si&uiente pá&ina eb"ttp:--.mclibre.or&-consultar-ama'a-"tml-"tml/tablas/atributos."tml

a7 ;"ili,ando "a%las 5 3acer la sig*ien"e &ágina e%

Página 1 de20

http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.htmlhttp://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html


14/20

%7 ;"ili,ando "a%las 5 3acer la sig*ien"e &ágina e%

c7 ;"ili,ando "a%las 5 3acer la sig*ien"e &ágina e%

Página 1 de20


15/20


16/20

a &ágina &rinci&al o inde4 de%e "ener el "e4"o e imagen en *na "a%la como seo%ser'a en la m*es"ra7

as &áginas de cada *no de los reinos de la na"*rale,a de%en con"ener el "e4"o en*na "a%la con %orde S 07 Para las imágenes se de%erá cons"r*ir *na "a%la a&ar"e yde%en "ener el mismo "amaMo conser'ando la relación anc3o y al"*ra &ara nodis"orsionarlas7!e aconsea *e el "amaMo del "e4"o sea "amaMo y la #*en"e Arial7

+,+ Acti-id!de$ de e-!u!ción,E-idenci!$ deA3rendi1!je

Criterio$ de E-!u!ción TBcnic!$ e In$trumento$de E-!u!ción

E-idenci!$ deConocimiento 7

/P/!$A P/Página 16 de20


17/20

E-idenci!$ deDe$em3eo7Ins"r*men"o con eercicioscon los "emas "ra"ados en

la &resen"e g*a dea&rendi,ae

A CB

Preg*n"as y eerciciosso%re e"i*e"as 5&lan"eadas en *n

c*es"ionario C-001

ACTIVIDADESDEL

PROECTO

D&RACIÓN

@;or!$4

M!teri!e$ de #orm!ciónde-outi-o$7

@E?ui3o$:;err!mient!$4

M!teri!e$ de #orm!ción

@con$umi9e$4T!ento ;um!no @In

De$cri3ción C!ntid!d De$cri3ción C!ntid!d E$3eci!id!d

Cons"r*irel !is"emade

In#ormación enam%ien"e+e%

Com&*"adorde escri"orio 165arcadores/esma &a&el

car"a2

Ingeniero desis"emas

Directorio >e9as &áginas *e se incl*yen en la %ase de da"os del direc"orio son &re'iamen"ere'isadas &or 3*manos (no es a*"oma"i,ado como los cralers o araMas)7 $o seagrega la &ágina com&le"a sino @nicamen"e alg*nos da"os "ales como el ""*lo la

;/ y *n %re'e comen"ario redac"ado es&ecialmen"e *e e4&li*e el con"enido y sela *%ica en *na ca"egora7 ;n eem&lo es 7ya3oo7com DNS!er'idor de $om%res de ominio7 !er'idor a*"oma"i,ado *"ili,ado en el in"erne" c*ya"ares es con'er"ir nom%res #áciles de en"ender (como 7&anamacom7com) adirecciones n*m?ricas de IP7Dominio

Página 1O de20

REC&RSOS PARA EL APRENDIZAJE

GLOSARIO DE TERMINOS

http://www.yahoo.com/http://www.yahoo.com/


18/20

!is"ema de denominación de 3os"s en In"erne" el c*al es"á #ormado &or *n con*n"ode carac"eres el c*al iden"ica *n si"io de la red accesi%le &or *n *s*ario7 osdominios 'an se&arados &or *n &*n"o y erár*icamen"e es"án organi,ados dederec3a a i,*ierda7 Com&renden *na red de com&*"adoras *e com&ar"en *nacarac"ers"ica com@n como el es"ar en el mismo &as en la misma organi,ación o enel mismo de&ar"amen"o7 os más com*nes son 7com 7ed* 7ne" 7org 7%i, 7in#o

DoSenial !Com%inación de 3ardare y so#"are la c*al se&ara *na red de área local (A$) endos o más &ar"es con &ro&ósi"os de seg*ridad7 !* o%e"i'o %ásico es aseg*rar *e"odas las com*nicaciones en"re dic3a red e In"erne" se realicen con#orme a las&ol"icas de seg*ridad de la organi,ación *e lo ins"ala7 Además es"os sis"emass*elen incor&orar elemen"os de &ri'acidad a*"en"icación e"c7"irm! di%it!In#ormación ci#rada *e iden"ica al a*"or de *n doc*men"o elec"rónico y a*"en"icas* iden"idad7"!$FCreado &or 5acromedia es"a "ecnologa &ermi"e la creación de animaciones en"reo"ras cosas *"ili,ando menos anc3o de %anda *e o"ros #orma"os como AVI o 5PG7"oro$ de Di$cu$ión

Página 18 de20

http://www.panamacom.com/glosario/letra-r.html#Redhttp://www.panamacom.com/glosario/letra-r.html#Red


19/20

!er'icio a*"oma"i,ado de mensaes a men*do moderado &or *n &ro&ie"ario en elc*al los s*scri&"ores reci%en mensaes deados &or o"ros s*scri&"ores &or *n "emadado7 os mensaes se en'an &or correo elec"rónico7"r!me$ o m!rco$!reProgramas de ominio P@%lico7 A&licaciones *e &*eden o%"enerse direc"amen"e deIn"erne" con la carac"ers"ica de *e no es necesario &agar &or s* *"ili,ación7"S"F*ndación &ara el !o#"are i%re7 n"idad *e %*sca eliminar las res"ricciones de *soco&ia modicación y dis"ri%*ción del so#"are7 A&oya el desarrollo de sis"emaso&era"i'os (in*4) com&ilador G$; C (GCC) P/ e"c7 Prom*e'e desarrolla el *sodel so#"are li%re en "odas las áreas de la com&*"ación7 s&eccamen"e laF*ndación &one a dis&osición de "odo el m*ndo *n com&le"o e in"egrado sis"ema deso#"are llamado G$;7 a mayor &ar"e de es"e sis"ema es"á ya siendo *"ili,ado ydis"ri%*ido7 l cos"o del so#"are @nicamen"e es"á de"erminado &or el cos"o del

ma"erial *"ili,ado &ara dis"ri%*irlo7"TPFile rans#er Pro"ocol7 Pro"ocolo de "rans#erencia de arc3i'os7 !e *san &rogramasclien"es &ara FP como son &or e7 (&ara +indos) ea&FP o Core FP con so&or"e&ara ssl &or mencionar alg*nos7 !e *san &rogramas ser'idores de FP como &or e7$cFPd7 s"os &rogramas &ermi"en la conección en"re dos com&*"adoras *sando &orlo general el &*er"o 21 &ara conec"arse (a*n*e se &*ede *sar o"ros &*er"os)7 Pormedio del Pro"ocolo de "rans#erencia de arc3i'os se &*eden *&loadear y donloadeararc3i'os en"re el clien"e y el 3os" (ser'idor)7

ti en!ce 3!r! !3render ;TMLH 3or medio de ejem3o$Ftt37::>>>,>+$cFoo$,com:Ftm:

en!ce ?ue mue$tr! !$ eti?uet!$ utii1!d!$ en ;TML de #orm! det!!d!Ftt3$7::>>>,u-,e$:j!c:%ui!:

En e$t! 36%in! 3ueden conocer ! e$tructur! de ;TMLFtt37::>>>,codec!dem>,Ftm3oint,com

Sitio ?ue mue$tr! !$ di#erente$ eti?uet!$ < !tri9uto$ 3ro3io$ de !$t!9!$Ftt37::>>>,mci9re,or%:con$ut!r:!m!

Página 19 de20

RE"ERENTES 5I5LIOGRK"ICOS

http://www.fsf.org/http://www.leapware.com/http://www.coreftp.com/http://www.ncftp.com/http://www.w3schools.com/html/https://www.uv.es/jac/guia/http://www.codecademy.com/es/glossary/html#cabezahttp://www.htmlpoint.com/http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.htmlhttp://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.htmlhttp://www.fsf.org/http://www.leapware.com/http://www.coreftp.com/http://www.ncftp.com/http://www.w3schools.com/html/https://www.uv.es/jac/guia/http://www.codecademy.com/es/glossary/html#cabezahttp://www.htmlpoint.com/http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.htmlhttp://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html


20/20

Editor onine de ;TMLFtt37::>>>,>+$cFoo$,com:t!%$:tr

Guia 01 HTML BASICO

Documents

Transcript of Guia 01 HTML BASICO