(Anja 3. t.)
6. time:
Teori:
Webdesign intro, hva må vi tenke på når vi lager et nedttsted? Kort innføring i HTML
7. time:
Oppgave:
Notepad.
1. Gå inn på http://www.w3schools.com/html/default.asp
2. Åpne notisblokk på pcen din
3. Skriv / kopier koden du finner på siden inn siden din:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
4. Lagr notisblokken din som:
Filnavn: navn_webtest.html (NB viktig at du husker HTML)
Filtype: Alle filtyper (Pass og så på at du IKKE velger tekstfiler)
5. H1-teksten skal forandres til Velkommen
p-teksten skal forandres til: Dette er en kort tekst. Jeg tester ut enekl HTML-koding for første gang. Snart er jeg proff…
6. Navngi dokumentet (slik at det kommer opp i fanen i nettleseren). Denne koden må limes inne i <head>.
Hvor skal <head></head> tenker du??
Gå inn på sau.no, trykk på ctrl og u, finn ut hvor du må plassere den, kanskje du får et tips om hvor du skal plassere <title></title> også…
Den skal se sånn ut:
<title>Dette blir tittelen på siden</title>
Behold siden med kildekode oppe. (sau.no ctrl og u om du allerede har lukket den ned)
7. Nå er det på tide å legge inn en link. All tekst som skal bli synlig på nettsiden må dere legge den inn i
<body> her legges all info som skal vises på nettsiden</body>
En link settes inn på følgende måte:
<a href="url">Linket tekst</a>
Din oppgave blir å lage en lenke til weeblyen din. Teksten som skal vises i dokumentvinduet og være linkbart skal være. Min weebly NB Når du legger inn url’en er det viktig at du får med hele adressen + anførselsestegnene.
Eks <a href=”http://www.1mk.weebly.com”>Min weebly</a>
8. I timene har vi snakket om at det ofte kan være hensiktsmessig å åpne en lenke I ett nytt vindu. På denne måten unngår du at brukeren ”glemmer” hvor den er..
Dette skal vi teste ut. Koden for å åpne en lenk i et nytt vindu er:
<a href="url" target="_blank">Her er teksten som skal linkes</a>
Prøv å finne ut hvordan du kan få lagt inn teksten:
Her kan du lese VG i et eget vindu.
9. Et linjeskift får du med å legge inn koden <br> der su ønsker linjeskiftet. Denne koden trenger ingen slutt-tag.
Legg inn et linjeskift mellom min weebly og Her kan du lese VG i et eget vindu.
10. Hva med en ny bakgrunnsfarge på siden? For å få til dette dirkete i html koden må vi style dokumentet. For å endre bakgrunnsfarge på hele siden må dette endres i body. Et eksempel på en kode er:
<body >
Prøv å gjøre denne endringen på din side. Hvilke farge får du opp??
Klikk deg inn på :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstyle Test ut ulike farger, finn fram til den du mener passer best til denne øvingsoppgaven og legg den inn.
11. Det siste dere må gjøre er å sette inn et bilde. Sjekk ut: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images
Klarer du å sette inn et bilde på egenhånd?
Tips: <img src="Her legger dere inn link til bildet dere vil ha opp" alt="denne teksten kommer opp i mange nettlesere når dere tar musen over bildet" width="32" height="32" />
12. Test ut på egenhånd! Dersom du blir ferdig bruker du tiden til å videreutvikle nettsiden din. Gå inn på eks http://www.w3schools.com/html/html_examples.asp Er det noe her du kan prøve på? Eks hvordan sette inn en h2, la noe være høyrejustert og lignende.?? Hva med å sette inn et favicon?? Tips, koden for dette må legges inn i <head>
Eks
<link rel="shortcut icon" href="http://mail.ort.edu.ar/penguin/favicon-32x32.gif">
8. time:
Oppsummering:
Hva har vi forstått, er vi klar for DW?
Teori:
Bli kjent med Dreamweaver.
Logg + hva skjer i morra?
6. time:
Teori:
Webdesign intro, hva må vi tenke på når vi lager et nedttsted? Kort innføring i HTML
7. time:
Oppgave:
Notepad.
1. Gå inn på http://www.w3schools.com/html/default.asp
2. Åpne notisblokk på pcen din
3. Skriv / kopier koden du finner på siden inn siden din:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
4. Lagr notisblokken din som:
Filnavn: navn_webtest.html (NB viktig at du husker HTML)
Filtype: Alle filtyper (Pass og så på at du IKKE velger tekstfiler)
5. H1-teksten skal forandres til Velkommen
p-teksten skal forandres til: Dette er en kort tekst. Jeg tester ut enekl HTML-koding for første gang. Snart er jeg proff…
6. Navngi dokumentet (slik at det kommer opp i fanen i nettleseren). Denne koden må limes inne i <head>.
Hvor skal <head></head> tenker du??
Gå inn på sau.no, trykk på ctrl og u, finn ut hvor du må plassere den, kanskje du får et tips om hvor du skal plassere <title></title> også…
Den skal se sånn ut:
<title>Dette blir tittelen på siden</title>
Behold siden med kildekode oppe. (sau.no ctrl og u om du allerede har lukket den ned)
7. Nå er det på tide å legge inn en link. All tekst som skal bli synlig på nettsiden må dere legge den inn i
<body> her legges all info som skal vises på nettsiden</body>
En link settes inn på følgende måte:
<a href="url">Linket tekst</a>
Din oppgave blir å lage en lenke til weeblyen din. Teksten som skal vises i dokumentvinduet og være linkbart skal være. Min weebly NB Når du legger inn url’en er det viktig at du får med hele adressen + anførselsestegnene.
Eks <a href=”http://www.1mk.weebly.com”>Min weebly</a>
8. I timene har vi snakket om at det ofte kan være hensiktsmessig å åpne en lenke I ett nytt vindu. På denne måten unngår du at brukeren ”glemmer” hvor den er..
Dette skal vi teste ut. Koden for å åpne en lenk i et nytt vindu er:
<a href="url" target="_blank">Her er teksten som skal linkes</a>
Prøv å finne ut hvordan du kan få lagt inn teksten:
Her kan du lese VG i et eget vindu.
9. Et linjeskift får du med å legge inn koden <br> der su ønsker linjeskiftet. Denne koden trenger ingen slutt-tag.
Legg inn et linjeskift mellom min weebly og Her kan du lese VG i et eget vindu.
10. Hva med en ny bakgrunnsfarge på siden? For å få til dette dirkete i html koden må vi style dokumentet. For å endre bakgrunnsfarge på hele siden må dette endres i body. Et eksempel på en kode er:
<body >
Prøv å gjøre denne endringen på din side. Hvilke farge får du opp??
Klikk deg inn på :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstyle Test ut ulike farger, finn fram til den du mener passer best til denne øvingsoppgaven og legg den inn.
11. Det siste dere må gjøre er å sette inn et bilde. Sjekk ut: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images
Klarer du å sette inn et bilde på egenhånd?
Tips: <img src="Her legger dere inn link til bildet dere vil ha opp" alt="denne teksten kommer opp i mange nettlesere når dere tar musen over bildet" width="32" height="32" />
12. Test ut på egenhånd! Dersom du blir ferdig bruker du tiden til å videreutvikle nettsiden din. Gå inn på eks http://www.w3schools.com/html/html_examples.asp Er det noe her du kan prøve på? Eks hvordan sette inn en h2, la noe være høyrejustert og lignende.?? Hva med å sette inn et favicon?? Tips, koden for dette må legges inn i <head>
Eks
<link rel="shortcut icon" href="http://mail.ort.edu.ar/penguin/favicon-32x32.gif">
8. time:
Oppsummering:
Hva har vi forstått, er vi klar for DW?
Teori:
Bli kjent med Dreamweaver.
Logg + hva skjer i morra?
RSS Feed