Apuntes_BlueGriffon

7/24/2019 Apuntes_BlueGriffon

1/17

Informtica 4 ESO Apuntes de BlueGriffon

{ }1


2/17


ndice1. UNA PGINA WEB SENCILLA......................................................................... 32. PROPIEDADES DE LA PGINA....................................................................... 43. COLORES EN UNA PGINA WEB................................................................... 54. LNEAS HORIZONTALES................................................................................ 65. AADIR UNA IMAGEN.................................................................................... 76. USAR ENLACES................................................................................................ 7. INSERTAR TABLAS........................................................................................ 1!

. TRABA"AR CON #ORMULARIOS..................................................................13

{ }2


3/17


1. UNA PGINA WEB SENCILLA

Para crear una pgina nueva:

(a) Dss d d l om l!"##o$% l" l m$d&oNuevo'e en*Archivo+ ,e ue-.ra

l "m$ mos&d o$&"$"/$0

(1) 2n prier ugar3 crea una carpe.a en .u pen 'e .ra1a45 en a 6ue guar'ar- .5'a a in75raci8n 'e .u

pgina 9e1 a-igna a e-.a carpe.a e n51re MiPaginaWeb;sl s""$& so s d l

pgina para e53 eige Guardar como... 'e en* Archivo ?3 en e cua'r5 'e 'i5g5 6ue aparece3

e-cri1e: Pgina principal+ ,e ue-.ra3 en.5nce-3 5.r5 cua'r5 'e 'i5g5 para 6ue guar'e- .u pgina

9e1 @aA5 en a ci.a'a carpe.a c5n e n51re index+(c) 2-cri1e3 en a A5na en 1anc53 e .eB.5:Esta es mi primera pgina web+

(') CaA cic en e 15.8n Vista previa en un navegadora 15a 'e un'5 para 6ue 51-erve- c85

6ue'arEa .u 51ra ae-.ra en Fn.erne.+ G @acer53 aparece e cua'r5 'e 'i5g5 5-.ra'5 en a -iguien.e

pgina+ ,igue 5- -iguien.e- pa-5-:

Haz clic en el botn Elegir. Eec!ta la "ec!encia# C# $ Arc%i&o" 'e (rogra)a $ *ozilla +ire,o- $ ,ire,o-. Elige Ace(tar.

Gparece3 en.5nce-3 .u pgina 9e1 .a c55 -e 5-.rarEa en e navega'5r+

{ }3


4/17


. P/0PIEAES E LA PGINA

Hos mo&os d IJsKd &"l"L$ l "$#om"/$ K $$&$ $ ls M"$s NI ls ss

1a-e- 'e 'a.5- 'e in'eBaci8n ? 'e e-.a 75ra 57recer a pgina c55 re-u.a'5 'e -u- 1*-6ue'a-+ 2-.a

in75raci8n -e pue'e in.r5'ucir en nue-.ra pgina 9e1 -iguien'5 e-.5- pa-5-:

{ }4


5/17


(a) Ol"o$ l s& K o$&"$ l M"$ l K K"s s&Il ls o"dds0

(1) 2ige a 5pci8n Propiedades de pgina'e en* Formato. Gparece e cua'r5 'e 'i5g5 'e a pgina

an.eri5r+

(c) HlQ Io ls mod"#""o$s "$d"ds o$&"$"/$0

En el c!a'ro A!tor e"cribe t! no)bre 2 t!" a(elli'o". En el c!a'ro e"cri(cin e"cribe# Prcticas de Informtica 4 ESO. En el c!a'ro Palabra" cla&e intro'!ce# informtica3 4eso3 ... Selecciona el e"(a4ol co)o I'io)a 'el te-to. Elige Ace(tar.

5. C0L0/ES EN UNA PGINA WEB

2 75n'5 'e a pgina e- 'e gran ip5r.ancia -i 6uere5- c5n-eguir re-u.a'5- vi-uae- a'ecua'5-3 p5r 5

K s "ms"$d"Il l"L $ I$ sl"/$ d los olos K s K" &"l"L0 R s&Il los

c55re- 'e prier pan5 ? 'e 75n'5:(a) CaA cic en 5- 15.5ne- -i.ua'5- en e cen.r5 'e a pan.aa -51re a pe-.aSa 'e a pgina3

s&"Qm$&0

(1) 2ige e c55r 'e-ea'5 en a pae.a 6ue aparece+

>T"s& $ od"m"$&o l&$&"Qo l so d s&os Io&o$s0 O" los s""$&s sosU

(a) Ol"o$ l &"K& VIodWX% s"&d $ l M$lo "$#"o "LK"do d l Q$&$0

(1) CaA cic en e ic5n5 E!"#$#% #'"( )**'e a 1arra 'e @erraien.a- ? 'e-piega a 1arra +o,ores+ ,e

ue-.ra a- -iguien.e- 5pci5ne-:

(c) 2n a i-.a-"'$% #'"( / -eecci5na (0( "( #"#1#2( 0#" 1'1( '( 333

(') CaA cic en e 15.8n +o,or de 4ondo.

(e) 2ige e c55r 'e-ea'5 en a pae.a 6ue aparece+

{ }


6/17


(7) Ol"o$ l &"K& VX% s"&d $ l M$lo "$#"o "LK"do d l Q$&$0

(g) Y"& los sos ;I= ;= W &"l"L Zo l Io&/$ Primer p,ano.

6. L7NEAS H0/I80N9ALES,e pue'e -eparar a- 'i7eren.e- -ecci5ne- 'e .eB.5 e'ian.e a in.r5'ucci8n 'e Enea- @5riA5n.ae-+ Para

e5:

(a) ,eecci5na a pe-.aSa a'ecua'a+

(1) ,i.*a e cur-5r '5n'e 6uiera- in.r5'ucir a Enea @5riA5n.a+

(c) 2ige e an'a.5 5arra hori6onta,'e en* 7nsertar+ ,e ue-.ra en.5nce- e -iguien.e cua'r5 'e

'i5g5+

(') [5pe.a e cua'r5 c5n 5- pare.r5- 6ue 'e-ee-+

A$%&'&()( 1

(a) G1re e arc@iv5 F\]2^3 c5n.eni'5 en .u pen 'e .ra1a45+

(1) >s&Il l #o$do% md"$& l &"K& VIodWX% l olo 8$$9999 ? para e prier pan53

md"$& l &"K& VX% l olo :;;


7/17


e-.a1eci'5 en e apar.a'5 (1)+

(c) huar'a e arc@iv5 c5n e i-5 n51re+ 1-erva c85 -e verEa en e navega'5r+

>. A?AI/ UNA I*AGEN2n prier ugar3 crea 'en.r5 'e a carpe.a MiPaginaWeb 5.ra carpe.a 'e n51re 7magenes+ 2n ea

dMs &ods ls "mM$s K K"s &"l"L $ & M"$0 >$ s$do l% s" l s""$&

pr5ce'iien.5 para 51.ener aguna- igene-:

(a) Gcce'e a a pgina: %#$@%('$3#0@$$'(23#!2$('1B#2#C#!+

(1) CaA cic en +o,ecciones+

(c) 2n a ca.eg5rEa+iencias de ,a Natura,e6a1u-ca9"(%# '"D#%#+ ,e ue-.ran -ei- igene-+

(') CaA cic c5n e 15.8n 'erec@5 en a priera ?3 en e en* c5n.eB.ua3 eige Guardar como... ,igue 5-

pa-5- a'ecua'5- para guar'ara en a carpe.a c5rre-p5n'ien.e+

(e) CaA 5 i-5 c5n a- 'e- igene-+

Para in-er.ar una iagen:

(a) [55ca e cur-5r en e pun.5 '5n'e 6uiera- 6ue apareAca a iagen+

(1) 2ige e an'a.5 7magen'e en* 7nsertar+ Gparece e cua'r5 'e 'i5g5 an.eri5r+

(c) CaA cic en e ic5n5 6ue -e encuen.ra a a 'erec@a 'e a A5na bicacin de ,a imagen? 1u-ca a

iagen 6ue 6uiere- aSa'ir en a carpe.a 7magenes+ ja ca-ia HI # %#"'D " @!'$$'J2 0# "

pgina'e1e e-.ar arca'a+

(') 2-cri1e una 'e-cripci8n 'e a iagen en e cua'r5 KeLto l&$&"Qo o m l s"ll #%1''% @2

#( "#%2'D( D$O(+

(e) 2igeAceptar+ ja iagen -e incu?e en a pgina+

{ }"


8/17


A$%&'&()( 2

(a) G1re e arc@iv5 F\]2^3 c5n.eni'5 en .u pen 'e .ra1a45+

(1) Fn-er.a una iagen 'e .u carpe.a 7magenes% l K K"s% dI`o dl Jl&"mo &T&o0 ks


9/17


(a) 2n e cua'r5 #'2(3 e'ian.e e ic5n5 'e a carpe.a3 -eecci5na a pgina 9e1 'e-ea'a+

(1) arca a ca-ia HI # %#"'D " @!'$$'J2 0# " QB'2+

(c) 2-cri1e3 -i 6uiere-3 un n51re a enace en e cua'r5KRtu,o+

(') arca a ca-iaAbrir en,ace enS

(e) 2igeAceptar+

A$%&'&()( 3

(a) G1re e arc@iv5 F\]2^3 u1ica'5 en .u pen 'e .ra1a45+

(1) [rea una pgina nueva ? gur'aa en .u carpe.a MiPaginaWebo$ l &ncabe6ado U? e-cri1e a 7ra-e: Esta es la pgina de ejercicios y problemas Para

s& $ILdo ;&"K& VZX= s&Il l "m l$o $ olo $& ;qqqq=0 Dos lncabe6ado U? e-cri1e a 7ra-e: Esta es la pgina de la teor$a ? '5- Enea- -

a1a453 c5n a aineaci8n 'erec@a3 a paa1ra!O"!E#+

(c) DI`o dl $ILdo Qs "$&od" $ $&"dd "Il d &T&o0 O" l od"m"$&oci.a'5 en e apar.a'5 (') aun6ue a@5ra re7eri'5 aon XuiYote+

(') kd l M"$ D>t W $lL l "m$ dl $&o o$ l M"$ Rk!k omo &$ s& Jl&"m M"$% $lL l lI H>Y o$ l M"$ "$"l0

(7) huar'a .5'5- 5- arc@iv5- ? c5prue1a 6ue .5'5- 5- enace- 7unci5nan c5rrec.aen.e+

>$ l s""$& &"Q"dd% d"#$" d lo K Zs ZZo Zs& Zo% Qs $ Z"Q


10/17


. INSE/9A/ 9ABLAS

Hs &Ils so$ s&&s K m"&$ o$"L l "$#om"/$ $ #"ls W olm$s0 H "$&s"/$ d

$ #"l W $ olm$ s llm ld W $ ll odmos "$s& &T&o% "mM$s% &0

Hs &Ils so$ lm$&os mW J&"ls K $os Q$ m"&" o$"L W l"L l d"so d $s& M"$9e1+ Para e53 @a1r 6ue c51inar ce'a- ? crear e-paci5- - api5-+

Para in-er.ar una .a1a:

(a) ,eecci5na a pe-.aSa 'e '5cuen.5 9e1 en e 6ue 6uiera- in-er.ar a .a1a+

(1) ,eecci5na una 'e a- -iguien.e- 5pci5ne-:

Elige el )an'ato 9abla 'el )en In"ertar. Haz clic en el icono 9abla 'e la barra 'e %erra)ienta". Se4ala el )an'ato In"ertar 'el )en 9abla 2 elige 9abla.

(a) >$ l do K sl o$ l &/$ ls d"m$s"o$s d l &IlU $Jmo d #"ls W $Jmo

d olm$s W ZL l"0 H &Il s d l M"$ NI% &l omo s ms& $ l #" s""$&U

R mod"#" ls o"dds d l &IlU

(a) ,eecci5na a .a1a3 @acien'5 cic 'en.r5 'e ea+

(1) 2ige e an'a.5 Propiedades de tab,a...'e en* Kab,a5 @aA cic en e ic5n5 Kab,a'e a 1arra 'e

@erraien.a-+ P5r cua6uiera 'e 5- '5- pr5ce'iien.5- -e acce'e a -iguien.e cua'r5 'e 'i5g5:

{ }1%


11/17


(c) 2n a pe-.aSa Kab,a&"$s% $& o&s% ls s""$&s o"o$sU

E"tablecer la anc%!ra 'e la tabla F1== "igni,ica !e la tabla oc!(ar to'a la anc%!ra 'i"(onible 'ela (gina. *o'i,icar el n)ero 'e ,ila" 2 el n)ero 'e col!)na". S!(ri)ir el bor'e 'e la tabla Fba"ta con (oner !n JceroK en la ca"illa Bor'e 2 en la ca"illa E"(acio 'ecel'a

Para 6ue 5- ca1i5- -ean vi-i1e-3 @aA cic enAp,icar?3 'e-pux-3 enAceptar+

(') 2n a pe-.aSa +e,das&"$s% $& o&s% ls s""$&s o"o$sU

Seleccionar la" cel'a"3 la" ,ila" o la" col!)na" a la" !e !iere" a(licar lo" ca)bio". Ca)biar el ta)a4o# anc%!ra 2 alt!ra. E"tablecer la alineacin3 tanto %orizontal co)o &ertical3 'e lo" conteni'o" 'e la" cel'a". +iar el color 'el ,on'o.

Para 6ue 5- ca1i5- -ean vi-i1e-3 @aA cic enAp,icar?3 'e-pux-3 enAceptar+

A$%&'&()( 5

(a) G1re e arc@iv5 F\]2^3 u1ica'5 en .u pen 'e .ra1a45+

(1) [rea una pgina nueva ? gur'aa en .u carpe.a MiPaginaWeb o$ l &-.a1ece para e 75n'5 e c55r y$$$$99+

(c) 2ige e 75ra.5 2ncabe6ado ;? e-cri1e a 7ra-e: -ablas de muestra

(') huar'a e arc@iv5 en .u carpe.a MiPaginaWeb o$ l &=. Bor'e# 6 (-. La" ,ila" 1 2 5 con el color


12/17


43 re"(ecti&a)ente. Centra la tabla.

(7) $s& o& &Il% dI`o d l $&"o% d z #"ls W olm$s K &$ ls s""$&s

&=(-. La" i)gene" 'eben e"tar centra'a" en %orizontal 2 en &ertical. Centra la tabla.

(@) huar'a e arc@iv5 ? 51-erva -u a-pec.5 c5n e navega'5r+

(i) G1re e arc@iv5 F\]2^3 c5n.eni'5 en .u pen 'e .ra1a453 ? vincua a iagen 'e a iA6uier'a c5n a {|

pgina+ huar'a 5- ca1i5-+

A$%&'&()( 6}a- a crear a@5ra a iagen 'e un 15.8n 6ue ueg5 in-er.ar- en a pgina 9e1+

(a) G1re e pr5graa hFP ? crea un arc@iv5 nuev5 'e .aaS5 ~ B ~ ? 75n'5 .ran-paren.e+

(1) ]i1u4a un cErcu53 eige c55 c55r 'e 7ren.e ^_d]


13/17


9a)a4o# )e'iano. Color#


14/17


,igue 5- -iguien.e- pa-5-:

Intro'!ce !n no)bre (ara el rea 'e te-to. Co)(leta lo" c!a'ro" N)ero 'e col!)na" 2 N)ero 'e ,ila" con lo" &alore" !e !iera". Elige Ace(tar.

(e) Fn.r5'uce un -a.5 'e Enea ? -igue a -ecuencia 'e acci5ne-: 7nsertar Formu,ario >ntradas... n

botn de envRo de 4ormu,ario.,e ue-.ra e -iguien.e cua'r5 'e 'i5g5:

{ }14


15/17


,igue 5- -iguien.e- pa-5-:

Intro'!ce !n no)bre (ara el botn. Co)o &alor e"cribe# Eniaro !na e-(re"in "i)ilar. Elige Ace(tar.

A$%&'&()( 7

(a) G1re e arc@iv5 F\]2^3 c5n.eni'5 en a carpe.aMiPaginaWeb'e .u pen 'e .ra1a45+

(1) [55ca e cur-5 en a par.e in7eri5r 'e a pgina e in-er.a un 75ruari5 'e n51re mi4ormu,ario

c55 'irecci8n 'e c5rre5 eec.r8nic5 eige a .u?a ? arca e x.5'5 P,+

(c) L l" d$&o dl #oml"o W omo &$ILdo 0

(') Fn.r5'uce un cua'r5 'e .eB.5 'e n51recuadroteLto% so$ q olm$s W bq #"ls0

(e) inaen.e3 in.r5'uce un 15.8n 'e envE5 'e 75ruari5 'e n51re botonenvio? va5r Eniar+ ,i

.5'5 @a i'5 1ien e a-pec.5 'e 75ruari5 -er -iiar a -iguien.e:

(7) huar'a e arc@iv5 c5n e i-5 n51re+

{ }1


16/17


A$%&'&()( (* *')+,)$&-O && d $ M"$ NI K o$&$ lm$&os ml&"md"% &T&os "mM$s0 Ho "mo K

&"$s K Z s o"l l "$#om"/$ $s"0

Elige el te)a "obre el !e tratar t! (gina Deb F!n gr!(o )!"ical3 !na "erie 'e 93 !n 'e(orte3 etc

ib!a en !n (a(el la e"tr!ct!ra 'e la (gina3 (onien'o lo" botone" o enlace" !e ten'r ca'a(gina3 a"Q co)o lo" no)bre" 'e la" (gina". Un 'iagra)a 'e ,lec%a" no" in'icar la" relacione" entrela" (gina". He a!Q !n ee)(lo.

Selecciona lo" colore". En la (gina %tt(#RRcolor"c%e)e'e"igner.co)R(!e'e" encontrar la"co)binacione" a'ec!a'a". B!"ca lo" acce"orio" gr,ico" !e &a" a e)(lear en la" (gina"3 co)o botone"3 gi," ani)a'o"3 ,on'o"'e (gina3 "oni'o"3 &Q'eo"3 etc. ebe" g!ar'arlo" en t! or'ena'or.

2n e-.e e4ep5 -e crean cinc5 pgina- 9e1 a priera ac.*a c55 p5r.a'a ? 'a acce-5 a a- -iguien.e-3

Wos $omIs s "$d"$0 W K Q"& ls &"lds W los s"os $ los $omIs d los Z"Qos W d ls

igene- -i 6uere5- n5 .ener pr51ea- c5n e -ervi'5r+

Ca? 6ue crear un banner3 'e n51re cabecera.png3 6ue e-.ar pre-en.e en a- cua.r5 pgina- 'e

o$&$"do &"l"L l d"&o d "mM$s !R W s&Il l &mo d qqT d $Zo o bqT d l&o%

apr5Bia'aen.e+ a1ixn nece-i.a- a iagen 'e p5r.a'a3 6ue c51inar e n51re c5n igene-+

[rxaa ? gur'aa c5n e n51re imagen,ogo.png+

j5- 15.5ne- 6ue van en a par.e -uperi5r 'e a- pgina- 'e c5n.eni'5 pue'e- crear5- c5n hFP u

51.ener5- c5n ag*n -ervici5 'e re'+ j5- aare5- boton?3 botonU3 boton;? boton] c5n eB.en-i8npng3

.aaS5 'e wpB 'e anc@5 p5r ~pB 'e a.5 ? 75n'5 .ran-paren.e+

(a) [rea una carpe.a 'e n51re ebfnombre ape,,idosen .u pen 'e .ra1a45+ ]en.r5 'e a i-a

crea 5.ra c5n e n51re imagenes3 en a 6ue guar'ar- a- igene- an.e- ea15ra'a-+

(1) G1re e pr5graa "@#%'99(2W l "m M"$ o$ $ &s&Il los olos K Zs d"d"do &"l"L0

(c) Fn.r5'uce e .eB.5 ? a iagen 'e a priera pgina+

(') [rea ? guar'a a -egun'a pgina eva a ca15 a- -iguien.e- acci5ne-:

In"erta en la (arte "!(erior !na tabla 'e ,ila" 2 6 col!)na"3 "in bor'e. Selecciona la" c!atro cel'a" 'e la (ri)era ,ila3 nela" e in"erta la i)agen cabecera.(ng.

Coloca3 en ca'a !na 'e la" cel'a" 'e la "eg!n'a ,ila3 lo" botone" !e %a" 'i"e4a'o. Centra la tabla.

{ }1!

&e'to de (ien)enida

Ima*en deportada

ca(ecera+pn*

1 432

[5n.eni'5 principa

historia.html

index.html

ca(ecera+pn*

1 432

ca(ecera+pn*

1 432

ca(ecera+pn*

1 432

Per-5na4e- }E'e5- o&o#


17/17


(e) Hs &o M"$s d o$&$"do &"$$ s&os lm$&os $ omJ$% o lo K l Z"Qo d l

s$d M"$ ds dlo &s Qs mMs o$ d"#$&s $omIsU W &"$s ls "$o M"$s

9e1+

(7) R d"#$" ls M"$s d o$&$"do s"I% dI`o d l &Il% o$ l s&"lo >ncabe6ado?3 un

&

Apuntes_BlueGriffon

Documents

Transcript of Apuntes_BlueGriffon