PDF

Download Report

Transcript PDF 

Lesson
3
Forsvunnetkatt
webside
AllCodeClubsmustberegistered.Registeredclubsappearonthemapat
codeclubworld.org-ifyourclubisnotonthemapthenvisitjumpto.cc/18CpLPyto
findoutwhattodo.
Oppdraget:
KattenFelixharforsvunnet.Eierenhansharlagetenplakatforå
hengeoppinabolaget,menduinnseratålageenwebsidegjørat
mangeflerekanseden.
ActivityChecklist
FollowtheseINSTRUCTIONSonebyone
TestyourProject
ClickonthegreenflagtoTESTyourcode
SaveyourProject
MakesuretoSAVEyourworknow
1
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
2
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Steg1:
LagennymappesomdukallerFelix.
Lagetnyttdokumentmednavnetindex.htmloglagredetimappendu
kalteFelix.
Nåkandusetteoppdokumentetdittsliksomdulærteiforrigeleksjon.
<!doctypehtml>
<html>
<head>
</head>
<body>
</body>
</html>
Lagentittelogenoverskrift.Huskattittelenskalplasseresi“head”og
overskriftenskalplasseresi“body”.Prøvåbruke“KattenFelixer
forsvunnet”somtittel,og“Forsvunnet”somh1.
Rettunder <h1> kanvilageen <h2> hvordetstår“KattenFelix”.
<!doctypehtml>
<html>
<head>
<title>KattenFelixerforsvunnet</title>
</head>
<body>
<h1>Forsvunnet</h1>
<h2>KattenFelix</h2>
</body>
</html>
Steg2:
3
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
VitrengerogsåetbildeavFelix,slikatfolkvethvadeskalseetter.Vi
hartidligerelærthvordanmanleggertiletbildesomerlagretetannet
stedpåInternett,mendennegangenskalvibrukeetbildepåvåregen
datamaskin.Viernødttilåleggebildetfelix.jpgidensammemappen
som index.html liggeri,mappendukalteFelix.
Nåkanduskrive <img> taggensomduvanligvisvillegjort,meniscr
attributten,istedeforåskriveenURLskrivervibare felix.jpg .Ikke
glemåleggetilenalt-attributt!
<imgsrc="felix.jpg"alt="bildeavFelix">
Lagrefilendinogvisdeninettleseren.
Bildeterganskestort,såvivilgjøredetlittmindre.Vikangjøredette
vedåbrukehøydeellerbredde-attributter(ellerbegge).Vispesifiserer
ikkebreddenicentimeterellermeter,tommerellerfot,meninoesom
kallespixler.Jegvelgerågåfor400pixlerfordettebildet.
<imgsrc="felix.jpg"alt="bildeavFelix"width="400">
Steg3:
UnderbildetvilviskriveenbeskrivelseavFelixogginoendetaljerom
nåroghvorhanforsvant.Fordettekanviskrivenoenparagrafer.
<p>Felixerenveldigsnillkatt.Hanlikeråkose,sitteforan
varmepumpaoglekemusasi.Pelsenhanseroransje.</p>
<p>Hanforvantfrahagenigår.</p>
4
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Vitrengerogsåinformasjonomhvordanvikankontakteeierenhvis
noenharsettellerfunnetFelix.
<p>HardusettFelix?Vennligstkontakteierenhanspå
[email protected]</p>
Detteerbareenleke-epostadresse,menlaossgjøredetsånnatnår
noenklikkerpåden,sååpnesepostprogrammetderes.Vigjørdettepå
nestensammemåtensomvilagerenlenke,menistedeforenurl
brukervi mailto sånnsomdette:
<p>HardusettFelix?Vennligstkontakteierenhanspå<a
href="mailto:[email protected]">[email protected]</a>
</p>
Lagredokumentetdittogseomdetfungererinettleseren!
Step4:Leggetilfettekstogtrykk
VivilvirkeligatfolkskalfinneFelix,såvivilleggelitttrykkpå
vennligst
.Dettegjørvivedåbrukeemtaggen.
<p>HardusettFelix?<em>Vennligst</em>kontakteierenhanspå<a
href="mailto:[email protected]">[email protected]</a>
</p>
Vivilogsåat´Tusentakk´skalvisesskikkelig,noevioppnårvedå
brukestrongtaggen.
<p><strong>Tusentakk!</strong><p>
5
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Lagredokumentetdittogvisdetinettleseren.
SerdunåhvordanvennligstvisesiskråogTusentakkifet?
Step5:Kommentarer
Noengangerkandetlønnesegåskrivekommentareriselvehtml-filen.
Medkommentarermenervitingsommenneskerskalkunneseoglese
hvisdeåpnerfilen,mensomnettleserenikkeskalleseogvise.Vigjør
dettevedåbrukedenspesiellekoden:
<!--skrivhvasomhelsther-->
Altsomskrivesmellompileneerkommentaren.
LaossleggetilenkommentarifilensomsieratdetteeretKodeklubbprosjektogatFelixikkeerekte.
<!--DetteeretKodeklubb-prosjekt.Felixerikkeekteogeregentlig
ikkeforsvunnet.-->
Steg6:Mermetadata(Deterbaretingsom
leggesihead)
Laossleggetilhvemsomharskrevetwebsidentilwebsiden,slikatde
somserfilenvetatdeterdeg.
<metaname="author"content="#">
6
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Erstatt#mednavnetditt.
Deterogsåvanligåleggetilhvilketspråkwebsidenerpå.Vigjørdette
vedåleggetilenattributttil <html> taggen.
<htmllang="no">
nostårfornorsk.
Deterogsågodpraksisåleggetiltegnsettet(elleralfabetet)
dokumenteterskrevetmed.VibrukervanligvisUTF-8.
<metacharset="UTF-8">
Vikanogsåleggetilenbeskrivelseavwebsiden.
<metaname="description"content="Ensidelagetforåfinnekatten
Felix">
Ognoennøkkelord,separertmedkomma
<metaname="keywords"content="Felix,katt,forsvunnet">
7
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Hvakandugjørevidere?:
Erdetnoeannetdukanleggetilwebsidensomvil
hjelpefolkåfinneFelix?Merinformasjon?Hvordan
villedulagttiletkartoverhvorhanforsvant?
Mergøymedbilder.Leggtiletbildesombeveger
seg.Prøvåleggetilbildet catswithhats.git til
websiden.Åpnesideninettleserenogsehvasom
skjer.
HvisFelixblirfunnet.Bruktaggen <del> foråstreke
overinformasjonsomikkelengerersant,somfor
eksempelforsvunnet.Bruktaggen <ins> foråsette
innnyinformasjonistedet,somforeksempel
Funnet!
8
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!