HvorerHTML?Jegserdenikke!
Introduksjon
Web
Introduksjon
MåletmedoppgaveneråvisehvorHTMLfinnesivirkeligenettsider,sliksomdensidenduerpånå.Nårduerferdigmed
oppgavenskalduhalittbedrekjennskaptilHTML,samtenkeltkunneendrepånettsiderduerinnepå.
DenneoppgavenerdemonstrertmednettleserenGoogleChrome.BrukGoogleChromehvisduharden.
Steg1:Se
HvorerdaallHTML-kodenbaknettsidenevisertilvanlig?Denergjemtbaknettleseren!Laosstaentitt.
Aktiviteter
Gåtiloppgaver.kidsakoder.noiChromeellerFirefox
Høyreklikkpåkattenogtrykk Inspiser (norsk)eller Inspect (engelsk).
Nårviklikkerpå Inspiser ,fårviseenmenytilhjelpforutviklere.Denneersværtnyttigtilwebutvikling.
Serdudenfargedeteksten,duogså?DeterHTML,slikChromeleserden!Nettsidenskildekode.
Kildekodentilkattenserslikut:
<imgsrc="scratch/logo-black.png">
Seomdufinnerigjen scratch/logo_black.png ikildekoden.Holdpekerenoverfilnavnet.Serdufilendukkeropp?
Inspiserslangen.Hvaerfilnavnettilslangen?Serdudetsammesommeg?
Kildekodentilslangenserslikut:
<imgsrc="python/logo-black.png">
Hvaharvilært?
HøyreklikkoginspiserfinnerHTML-kodentilelementetviserpå.
HTML-kodeforbilderserslikut:
<imgsrc="fil.png">
Steg2:Fjern
UtviklerverktøyetinettleserenlarosstullemedHTML-kodentilallenettsidervierpå.Viødeleggerikkenettsidene,altså!
Alleendringervigjørpånettsidenbliraltsåigjenpåvåregendatamaskin.Viødeleggerikkeforandrenårviendrerpå
nettsider!
Altbortevekk?
Tips:Skulledufjernealtformye,lastsidenpånyttmedoppdater-knappen.Dabliraltsomdetvar.Prøv!
Aktiviteter
JegergladiMinecraft.MenMinecrafterikkeførstilistenoverkurs!Laossgjørenoemeddet.Vifjerneraltsomerforan!
Høyreklikkpåkattenoginspiser.Finnelementetmedkatten.Fjernelementetmedtasten delete påtastaturet!
Yes!Kattenbleborte!
...men.Ventlitt.Slangengikkikketilvenstre.Hvaskjeddenå,montro?Ogdetstårfremdeles Scratch underden
tommeplassen?
Ha!Deterenusynligboksigjen,densomtidligerehaddekatteniseg!Denheter <a> ,ogerenlink:
<ahref="scratch/index.html"id="scratch"data-original-title=""title=""aria-describedby="popover1629
45">
<divclass="logo-wrapper">
</div>
<divclass="name">
<span>Scratch</span>
</div>
</a>
Trykkpådenlillepilenvedsidenavlinken <a> .Dagjemmervihvasomerinnilinken!
Fjernteksten Scratch .Merkdensomunder,ogtrykk delete :
Simsalabim!
Laossfjernelittmer.
Fjernelementetsominneholderallekursene:
<divclass="courses">
Poff!
Ånei!Nåblealtborte!
Lastsidenpånyttforåfådengamletilbake.
NåmåduhjelpemegåfåMinecraftførstikøen.
Finnelementetsomerdenusynligeboksenrundtkatten.Fjerndet!
Finnelementetsomerdenusynligeboksenrundtslangen.Fjerndet!
Gjørdetsammefor LegoMindstorms , Web , AppInventor og CodeStudio .
Sånnskaldetseut!
Hvaharvilært?
HTMLinneholderkodersomerusynligenårviserpåennettside!
Dissekanværelenker( <a> )ellerbokser( <div> ).
Vikanfremdelesfinneogsealledeusynligekodenenårvibruker Inspiser !
Steg3:Skap
Nåskalvileke!Laossputtedennerakkeren
påallekursene!
Aktiviteter
Finnetbildedulikerpåinternett.Hentbildeadressenvedhøyreklikkepåbildet:
Endreallebildenevedåredigere src -attributtentil <img> -taggen:
Steg4:Massemoro!
Gratulerer!Duerharkommetettskrittpåveitilåbliwebutvikler!
Lisens: CCBY-SA4.0 Forfatter TeodorHeggelund