(Anja 3. t.)
4. time:
Oppgave:
Bruk 10 minutter til å finne ut mest mulig om hva favicon er. Noter.
Gjennomgang:
Runde i klassen, alle kommer med en opplysning.
Oppgave:
Bruk litt tid på nett, hvordan har ulike nettsted lagd sine Favicon? Dere vil fort oppdage at størrelsen ikke er enorm…
1. Lag ditt ikon i photoshop, lagr det som .png fil
På en weeblyside stilles det krav til at str enten er 16x16 to 32x32 pixels.
2. Når ”Faviconet” er klart logger du inn som administrator på weeblyen din.
3. Lag en ny side,” page”, ” new page”, ”skjul” (hidden) den.
4. Klikk på "edit page" knappen.
5. Velg deretter "elements" tab fra weebly edit menyen, velg"multimedia", og dra & drop den som heter "File", (med to piler som peker opp og ned). Last opp ikonet ditt..
6. Når ikonet er lastet opp kommer det en link som heter noe som "Download file", høyreklikk på denne og velg ”åpne fane/element i nytt vindu” . La denne siden bare være åpen.
7. Gå tilbake til weeblyen din (hvor du fortsatt er logget inn). Klikk på "settings", & klikk på "Search Engine Optimization (SEO)" bar.
8. Se etter boksen med teksten "Footer Code:" ved siden av seg?(denne boksen er helt tom foreløpig)
Kopier og lim inn denne koden I boksen:
________________________________________________________________
<head>
<link rel="shortcut icon" href=" http://www.weebly.com/uploads/5/6/9/9/5699040/w.png">
</head>
________________________________________________________________
9. Gå nå tilbake til fanen vi åpnet med lenken til Favikonet vi lastet opp på den skjulte siden. Kopier adressen her, og erstatt nøyaktig den grønne teksten i eksempelet (du er da tilbake I footerboksen hvor du limte inn koden). Husk at adressen skal mellom anførselsestegnene.
________________________________________________________________
<head>
<link rel="shortcut icon" href=" http://www.weebly.com/uploads/5/6/9/9/5699040/w.png">
</head>
________________________________________________________________
10. Endelig ferdig! Klikk på “Save”, og deretter "Publish >>". Gå inn på siden og sjekk om det funker. Om ikke sjekk at du har gjort alt riktig og prøv igjen. I denne webperioden vil dere merke at små feil fort kan skape store problemer. Det at eks et anførselsestegn mangler kan fort forårsake masse krøll og frustrasjon..
11. Sjekk ut:
Flott, ikke sant??
5. time:
Teori:
Webdesign intro, hva må vi tenke på når vi lager et nedttsted? Kort innføring i HTML
6. time:
Oppgave:
Notisblokk / Notepad
Oppgave
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>
</html>
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 enkel 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 (vis kildekode dersom du er i IE), 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://1mkb12-13.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 style="background-color:#cccccc">
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">
Extra om tid på slutten av dagen
Teori:
Hva, hvorfor, hvordan: Slideshare
Oppgave:
Opprette Slideshare-konto. Lag en kort (5-10 slides) powerpoint om favicon (finn info på nett, husk opphavsrett…) Last opp på slideshare. Embed på weeblyen din.
Avslutning:
Hva gjør vi i morra + logge
4. time:
Oppgave:
Bruk 10 minutter til å finne ut mest mulig om hva favicon er. Noter.
Gjennomgang:
Runde i klassen, alle kommer med en opplysning.
Oppgave:
Bruk litt tid på nett, hvordan har ulike nettsted lagd sine Favicon? Dere vil fort oppdage at størrelsen ikke er enorm…
1. Lag ditt ikon i photoshop, lagr det som .png fil
På en weeblyside stilles det krav til at str enten er 16x16 to 32x32 pixels.
2. Når ”Faviconet” er klart logger du inn som administrator på weeblyen din.
3. Lag en ny side,” page”, ” new page”, ”skjul” (hidden) den.
4. Klikk på "edit page" knappen.
5. Velg deretter "elements" tab fra weebly edit menyen, velg"multimedia", og dra & drop den som heter "File", (med to piler som peker opp og ned). Last opp ikonet ditt..
6. Når ikonet er lastet opp kommer det en link som heter noe som "Download file", høyreklikk på denne og velg ”åpne fane/element i nytt vindu” . La denne siden bare være åpen.
7. Gå tilbake til weeblyen din (hvor du fortsatt er logget inn). Klikk på "settings", & klikk på "Search Engine Optimization (SEO)" bar.
8. Se etter boksen med teksten "Footer Code:" ved siden av seg?(denne boksen er helt tom foreløpig)
Kopier og lim inn denne koden I boksen:
________________________________________________________________
<head>
<link rel="shortcut icon" href=" http://www.weebly.com/uploads/5/6/9/9/5699040/w.png">
</head>
________________________________________________________________
9. Gå nå tilbake til fanen vi åpnet med lenken til Favikonet vi lastet opp på den skjulte siden. Kopier adressen her, og erstatt nøyaktig den grønne teksten i eksempelet (du er da tilbake I footerboksen hvor du limte inn koden). Husk at adressen skal mellom anførselsestegnene.
________________________________________________________________
<head>
<link rel="shortcut icon" href=" http://www.weebly.com/uploads/5/6/9/9/5699040/w.png">
</head>
________________________________________________________________
10. Endelig ferdig! Klikk på “Save”, og deretter "Publish >>". Gå inn på siden og sjekk om det funker. Om ikke sjekk at du har gjort alt riktig og prøv igjen. I denne webperioden vil dere merke at små feil fort kan skape store problemer. Det at eks et anførselsestegn mangler kan fort forårsake masse krøll og frustrasjon..
11. Sjekk ut:
Flott, ikke sant??
5. time:
Teori:
Webdesign intro, hva må vi tenke på når vi lager et nedttsted? Kort innføring i HTML
6. time:
Oppgave:
Notisblokk / Notepad
Oppgave
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>
</html>
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 enkel 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 (vis kildekode dersom du er i IE), 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://1mkb12-13.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 style="background-color:#cccccc">
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">
Extra om tid på slutten av dagen
Teori:
Hva, hvorfor, hvordan: Slideshare
Oppgave:
Opprette Slideshare-konto. Lag en kort (5-10 slides) powerpoint om favicon (finn info på nett, husk opphavsrett…) Last opp på slideshare. Embed på weeblyen din.
Avslutning:
Hva gjør vi i morra + logge
RSS Feed