Programmeringseksamen på papir... Hello World! - Programming Exam on paper...

Heisann!

I dag skal vi ikke grave oss ned i programmeringskoder som If-setninger og lignende. I dag vil eg heller mene noe om det å ta en skriftlig eksamen i programmering, i år 2013, på papir!

Helt innledningsvis vil eg påpeke kor feil det høres ut i mine ører.

I skolesammenheng har eg nå holdt på med programmering i Visual Basic i ett år. Der vi hele tiden har brukt Microsoft sitt utviklingsverktøy (SDK - Software Development Kit) for å gjøre våre øvinger. Og da snakker vi om alt fra øvinger av typen som eg har presentert her på "Mitt IT-eventyr", som helt enkle øvinger med variabler, konstanter og if-setninger, til større prosjekter med flere 100 linjer med kode.

Og så skal eg ta eksamen på papir...

I Microsoft sitt SDK får man hjelp til hurtigskriving av kode, man får påpekt når man har glemt noe, og man har mulighet til å sjekke programmet med det samme man har gjort endring. Dette er det man har vært vant til siden første øving.

Dette har de enda ikke klart å få til på papirutgaven...
Og la oss henge oss litt mer opp i at det er eksamen på papir. Studiet eg går på er et nettstudie, det vil si at alle øvinger mottas og leveres inn over nettet. Programmeringsfaget Visual Basic som var avsluttende til jul fikk vi faktisk ta hjemme og levere over It's learning plattformen.

Og det bringer meg over på noe annet... Vi er i 2013, et årstall der det faktisk er mulig å få til eksamener over nettet. Vi har teknologien, programmene og kompetansen til å få det til å skje.

Til sist...
Og det er også tilknyttet tiden vi lever i, eg velger å tro at om eg noen gang skulle bli programmerer av yrke, så vil neppe arbeidsgiveren min be meg om å programmere på et stykke papir, og bruke maskinskrevne manualer eller egne notater i slitte skrivebøker for å lage et program.

------------------------------

Hello!

Today I wont dig into programming codes like If-statements and alikes. Today I would rather share my thoughts regarding doing an programming exam by handwriting on a paper, in the year of 2013.

Just for starters I would like to point out how totally wrong this seems to me.

I've been doing programming in Visual Basic at school for the last year now. Where we have used Microsoft's SDK (Software Development Kit) when doing code exercises. By exercises I mean everything from small bits of code like the one I have been showing on this blog "Mitt IT-eventyr" using variables, constants, if-statements, all the way up to programs with several hundred lines of code.

Only to do my graduation on a piece of paper...

When using Microsofts SDK you'll get help like auto-completion of code, if there is something forgotten it is pointed out to you, and on top of it all; you can check your program for every bit of change you implement.

This is what I have been used to since day one.

Strangely enough, paper edition does not support all of these features.

Lets keep the focus on the fact that this is an exam we have to deliver handwritten on a piece of paper.

I am the kind of student who is supposed to get all my lessons through the Internet using the It's learning-platform. My last exam in Visual Basic Programming I had at home, through It's learning!

Which brings me to another point...

This is the year of 2013, a year where we actually have the possibilities to do graduations over the Internet. We have the technology, the programs and the competence to make it happen.

Finally...

Which also is an argument related to what period we actually live in. If I ever choose to become a  programmer by profession, I choose to believe my employer will never actually ask me to write a complete program on a piece of paper, and use typed manuals and my own notes in a worn-out notebook.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr! 

Almost correct Google!
Here's what happens when Google Translate, translates that last sentence from Norwegian to English:

If I do not get broken up into bits or adopt a binary form so it will soon be a new blog with newexperiences from my IT adventures!

Datatyper

Hei igjen!

Du husker kanskje fra forrige innlegg at eg satte en variabel til Integer = Heltall og kalte det en datatype.
Da lurer du kanskje også på hvilke andre datatyper vi har, og hvorfor vi skal definere datatype når vi programmerer.

Tenkte eg skulle begynne med hvorfor vi skal definere datatyper.

1. Redusert minnebruk
2. Raskere kode
3. Bedre datavalidering (mindre feil, bedre sikkerhet)
4. Selvdokumenterende kode (lettere å lese og forstå koden)
5. Færre feil i koden

Det første punktet er vel kanskje ikke like gjeldende i dag som det var før, iallefall ikke om det er små og mindre kompliserte programmer du skal lage. Men lager du større programmer vil det kunne bli mange elementer å håndtere og kreve mer av maskinen.

Punkt 2 og 4, Raskere kode og Selvdokumenterende kode. Her kommer det eg har tidligere skrevet om navnsetting inn. Skriver du gode navn på variablene vil det bli lettere for deg å skrive en god og forståelig kode. Forståelig, som i at det blir lettere for andre å sette seg inn i hva du har tenkt og forstå meningen bak koden.

Det vil også føre til at det blir mindre feil. (Se punkt 3 og 5)
Eksempel: Om du lager et program som skal regne ut moms på et produkt eller tjeneste, der du gir brukeren en mulighet til å legge inn momsen i et felt, får du flere fordeler.
Du kan for eksempel ved bruk av datatyper sette en standard for hva som er tillatt informasjon i feltet ditt. Du kan sikre deg at utregningene bli korrekte hver gang.

Hvilke datatyper har vi?
Igjen, eg ser dette opp mot Visual Basic kurset som eg tar. En link fra Microsoft om datatyper og Visual Basic:
http://msdn.microsoft.com/en-us/library/47zceaw7(VS.80).aspx

Vil trekke frem 3 av datatypene du vil komme borti.

Integer - denne har vi såvidt vært litt borti. Dette er heltall, det vil si tall som ikke har desimaler.1-2-10-15-300 osv
Litt av poenget med denne datatypen er å fortelle programmet at dette er et tall vi skal regne med, ikke bare noen tegn. Uten å definere vil programmet oppfatte 15 + 15 som 1515 (en tekststreng), mens du kanskje egentlig ønsket tallet 30

Double - tall MED desimaler. Veldig fornuftig å bruke om du lager en funksjon der man skal regne ut f.eks. gjennomsnitt. (11+12) / 2 = ?
Har vi IKKE satt variabelen til Double må programmet/funksjonen runde det av, og du får et annet svar enn 11,5 som gjerne var ønsket.

Boolean - True or False, Sant eller Usant.
Er det sant at tallet 25 er det samme som Alder??

Legger også denne gangen med en liten tutorial video funnet på youtube:



Det kommer snart et nytt innlegg der eg skal forklare var konstanter er, i motsetning til Variabler som vi har vært gjennom.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

Hva er en variabel?

Hei igjen!!

LETT sier du og ler litt av overskriften min
I og med at det er Visual Basic eg har som 1 av 5 fag  i høst er det variabler relatert til dette programmeringsspråket eg vil snakke om.

Hva er så en variabel?

Wikipedia sier om variabler (generelt):
http://no.wikipedia.org/wiki/Variabler

En variabel er et symbol som representerer et vilkårlig tall i en mengde.

Microsoft sier om variabler i forbindelse med Visual Basic at de blir brukt til å lagre verdier
http://msdn.microsoft.com/en-us/library/cd6hcy37(v=vs.80)

Alle variabler har navn, se dette innlegget opp mot innlegget om navnsetting.
Hvis du skal lage en enkel kalkulator, la oss si at du har behov for å vite gjennomsnittet av tre tall ganske ofte.

Før du kan lagre en verdi i en variabel må du deklarere den variabelen
I Visual Basic gjør du det slik:
Dim tall1 As Integer

Det du har gjort her er at du har sagt at du skal ha en variabel som skal hete tall1 og at innholdet i den skal være et heltall. Integer = heltall
Eg skal skrive litt mer om Datatyper i et senere innlegg, så ikke la deg forvirre av dette.

Du kan selv velge hva disse variablene skal hete. For et lite program, der all kode er tilknyttet en Form så er det kanskje ikke så viktig, men det er like greit å lære seg gode navnsettingsrutiner.

Om du har laget en tekstboks der tallet skal hentes fra vil det i Visual Basic kodeseksjon eksempelvis se slik ut

---
Dim tall1 As Integer

tall1 = txtTall1.Text
---

Og her ligger litt av forklaringen på at det er en variabel. Det er en verdi som endrer seg fra  gang til gang.

Eg skrev at du hadde 3 - tre tall, og at du skulle regne gjennomsnittet så i koden din ville det sett kanskje slik ut:

Dim tall1, tall2, tall3 As Integer
Dim snitt As Double

tall1 = txtTall1.Text
tall2 = txtTall2.Text
tall3 = txtTall3.Text

Grunnen til at du skal bruke variabler blir mer synlig no. Du vet at gjennomsnittet alltid vil være summen av dine tall dividert med 3
Da blir det slik:

snitt = (tall1 + tall2 + tall3) / 3

Ditt fullstendige program vil da være slik:
GUI (Graphical User Interface): 3 tekstbokser for input, 1 knapp, og så er valget ditt, vil du ha en tekstboks, label, MsgBox som medium for output?
Eg velger å bruke MsgBox her

Dobbeltklikk på knappen din og skriv følgende kode:

Dim tall1, tall2, tall3 As Integer
Dim snitt As Double

tall1 = txtTall1.Text
tall2 = txtTall2.Text
tall3 = txtTall3.Text

snitt = (tall1 + tall2 + tall3) / 3

MsgBox("Gjennomsnittet er " & snitt)

Lagre programmet ditt og velg Kjør
Har du gjort det riktig skal du no ha et program som regner ut gjennomsnittet av tre tall.

Det var kort om variabler. Fortsettelse vil følge. Der vil komme et innlegg om konstanter og ett som eg lovet tidligere om datatyper


Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

Programmering og Navnsetting av objekter

Hei igjen!

Som eg nevnte i sist innlegg om Visual Basic så er en ting å tenke på hvordan du navnsetter det du legger inn i programkoden din.
Og da tenker eg på textbokser, knapper, labels, alle typer objekter du kommer til å ha masse av.

Og de tre eg har nevnt over er noe du kommer til å ha mye av.

Når EG setter navn så gjør eg det slik:

Textboks der fornavn er innholdet - txtFornavn
En knapp som skal regne ut noe - btnUtregning
Labels som skal vise en streng (for eksempel hele navnet) - lblFulltNavn

Dette er navn på objektene som sier noe om innholdet. Du MÅ ikke navnsette i dine egne private prosjekter. Visual Basic.Net gjør det for deg. Etter sin enkle standard.

TextBox1
Label1
Button1

...and counting!

Utviklingsmiljøet teller dette for deg automatisk, men...
Hva med den dagen da du finner ut at du må OPPDATERE din software? Kanskje du ikke lengre skal være den eneste brukeren?

Du starter et firma, får en kompanjong og så skal Dere begge få ting til å fungere.
Hvis du da skal sette deg ned og forbedre ditt eget program som du skrev for 4 år siden og det eneste du finner i koden er TextBox1, TextBox2, TextBox3 osv til TextBox40 så vil du ha et stort problem med å finne frem.

En annen grunn til at du bør navnsette skikkelig er fordi det vil hjelpe deg mens du utvikler.
Litt senere skal vi få hentet inn informasjon fra en bestemt tekstboks når vi trykker på en bestemt knapp, og da vil du se verdien ganske kjapt.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

Visual Basic - Hello World!

Heisann!

Om du ikke er kjent med programmering lurer du sikkert veldig på overskriften på dagens blogg.
Hello World! - har nesten blitt en felles standard for alle programmeringsspråk, om enn de alle sammen er litt forskjellige.

Og det er ikke slik at om du kan ett språk så kan du de andre, men det å først lære et, som Visual Basic kan være med å senke terskelen for å lære andre.

Men hvorfor Hello World! ?

I de fleste programmeringsspråk eg har sett på er den første opplæringen kalt Hello World!
Med andre ord; lage et program som sier Hello World!
Det blir på en måte en introduksjon til språket, og en fremstilling av hvor enkelt det er å begynne.

Det er faktisk blitt så mye brukt at det har fått sin egen side på wikipedia som omtaler fenomenet:
http://no.wikipedia.org/wiki/Hello,_world

Bortsett fra å være en introduksjon til språket er det også en grei måte å sjekke om kompilatorer og skriptfunksjonalitet fungerer.

Hva er en kompilator? Og hva er et skript?
Det får vi komme tilbake til

I dag skal vi si Hallo til verden, og det gjør vi på følgende måte:
(Går utifra at du har installert utviklingsmiljøet på din maskin)

Som med blogginnleggene min om HTML og CSS så må du her og lage deg en mappe på desktopen.
Kall den gjerne Hello World
Start utviklingsmiljøet (om du ikke alt har gjort det)
Start et nytt prosjekt

En ting å sjekke av er om du får muligheten til å velge sti/bane til mappen der du vil det skal lagres.
Hvis du kun får sette navn må du gjøre følgende:
Trykk Cancel
Velg meny -> Tools
Menyvalg -> Options
Projects and Solutions på venstresiden
Og hake av på høyresiden for 'Save new projects when created'

Gå tilbake til å Starte et nytt prosjekt.
No skal du ha muligheten til å velge mappe (sti) i tillegg til å velge navn på prosjektet.
. Hvis du
Det første du ser når du starter et prosjekt er et bilde med Form1.
Derav Visual. Du ser kordan det du lager blir seendes ut.
Med mindre du spesifiserer noe annet vil det du lager på Form1 være det første brukeren ser når de starter ditt program.

På din venstre side vil du no ha en toolbox. Finn der en knapp / button. Dra den bort til Form1 og slipp den. Marker knappen (du får en stiplete firkantet strek på knappen) og gå så til Properties på din høyre side av skjermen og finn feltet Text der.
I feltet til høyre for Text skriver du inn Hello World!
Når du flytter deg vekk igjen fra det feltet vil du se at teksten på din knapp har endret seg fra Button1 til Hello World!

Det neste vi skal gjøre er å legge til bittelitt kode til den knappen. Og her får du mye hjelp. Hvis du dobbeltklikker på knappen vil du få opp noe som ser ut som det her:


    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

    End Sub

Det du egentlig har satt i gang er at du vil noe skal skje når den knappen blir trykket på i ditt program.

Og hva ønsker vi å gjøre? Denne gangen her skal vi lage en box som sier Hello World! når noen trykker på knappen.

Vi legger inn følgende kode:

MsgBox("Hello World!")

Koden skal da se slik ut

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        MsgBox("Hello World!")
    End Sub

Når du har gjort dette skal du lagre dette.
Til det bruker du Save All knappen (den som ser ut som 3 disketter oppå hverandre)

På samme knapperad som Save All vil du finne noe som ser ut som en Grønn Play knapp - Trykk på den (Alternativt trykk funskjonstast F5)
Og du ser programmet ditt starter. Slik vil det se ut. Om du nå trykker på knappen din vil du se at koden din virker.

Velg den Blå Stopp knappen når du har testet nok.

Det var det! Du har laget ditt eget litt Hello World! progam! Gratulerer!

I neste innlegg om Visual Basic vil eg ta opp Navnsetting av objekter. Og det er en viktig ting å ta med seg fordi det vil gjøre programmeringen din mye mer oversiktlig og lettere å komme tilbake til.

Legger ved en liten video, litt dårlig lyd kanskje, men forståelig. Og ser du gjennom hele vil du også kunne plukke opp 2 ekstra tips du kan legge til dette programmet.


Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

Databaser Første del

Hei igjen!

Du har helt sikkert hørt om databaser.
Og du er helt garantert omtalt i opptil flere.

Fra det øyeblikket jordmor på sykehuset fører inn i journalen at du har blitt født, til den dagen det blir registrert at du ikke lenger er blant oss, legges det inn opplysninger om oss i databaser. Opptil flere ganger for dagen.

Men hva ER en database? Ka bruker vi den til?
Og hva er forskjellen på en database og et databasesystem?
Og kor vil eg hen med dette innlegget.

Tanken min med starten av denne tråden er for det første hjelp til selvhjelp. Eg skal gjennom mange fag de neste årene og én ting har eg lært, at det å skrive ned samtidig som man leser kan øke graden av hukommelse og forståelse.
Så eg vil gå gjennom ord og uttrykk og modeller og håper at noen der ute vil kommentere og gi meg feedback om eg har misforstått noe eller påstår noe som ikke er reelt.

Så hva er en database?
Wikipedia sier dette:
En database er en strukturert samling av relaterte data, begrepet er vanligvis knyttet til elektroniske datasystemer.

Med dette forstår man at en datanase inneholder opplysninger som satt sammen gir en helhetlig mening, et bilde på det virkelige liv.
Som eksempel: et selger firma med 4 ansatte som selger kontorutstyr.
I dette firmaet sin database kan det være riktig å lagre data om de ansatte, varene som skal selges, kundene det er solgt til og gjerne bruke som underlag for å vite når man skal bestille flere varer inn på lager.

Wikipedia sier om databasesystem:
Et databasesystem har to deler – databasehåndteringssystemet (DBMS) som er programvaren som administrerer systemet, og selve databasen, som er de data som håndteres av systemet. DBMSen organiserer dataene og styrer all lesing og skriving til databasen. For å kommunisere med DBMSen brukes et spørrespråk.

Begge definisjonene fra Wikipedia finner du her:
http://no.wikipedia.org/wiki/Database

I neste innlegg om Databaser har eg tenkt å skrive litt om Relasjonsmodellen, hva er en relasjon og gjerne også forklare noen uttrykk.

En liten video hentet fra youtube:


Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

Programmering Intro

Hei igjen!

Programmering er for mange et veldig mystisk og uforståelig ord. Veldig mange vet ikke hva det innebærer å lage et program.

Skal man lage et program må man først begynne med å bestemme seg for hva det programmet skal gjøre, hvilke problemer det skal løse.

Når det er på plass kan det være greit å se på hvilke muligheter som er tilstede, velge seg et programmeringsspråk. Der finnes veldig mange språk, og noen passer kanskje bedre til det du skal løse enn andre.
Søk opp ordet Programmeringsspråk på http://no.wikipedia.org og les hva som blir sagt der.
Utover høsten skal eg gjennomføre et kurs og ta eksamen i Programmeringsspråket Visual Basic.Net, samtidig med det skal eg prøve å komme med blogginnlegg her om opplevelsen og gjerne også inspirere til at nettopp du har lyst til å gi det et forsøk.

Visual Basic.Net er Microsoft sitt produkt. Det har tidligere vært Visual basic og Basic.

For å begynne å programmere i Visual Basic.Net kan det være lurt med et verktøy. Selv bruker eg Visual Basic 2010 Express.
Dette kan du laste ned gratis fra Microsoft sine sider:
http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-basic-express

Der finnes andre versjoner, så søk litt rundt og finn det som passer deg best.

Personlig har eg i mange år drevet og stilt masse spørsmål til folk som kan programmere og eg har søkt rundt på nettet etter informasjon. Og når det gjelder programmering er det greit å ha et litt edruelig forhold til det og gjerne samtidig innse at Rom ikke ble bygd på en dag.

Du vil ikke etter å ha lest mine blogginnlegg om Visual Basic kunne lage det neste store operativsystemet. Du vil ikke lage det neste store antivirus verktøyet og du vil ikke kunne konkurrere med de store spill selskapene.

Slike store prosjekter krever ekstremt mye koding og det er snakk om flere hundre mennesker bak de store prosjektene.

Men alle skal begynne et sted!
Utover høsten skal eg prøve å komme med litt tips, litt forslag til små programmer, litt forklaring på begreper og kanskje gi deg det lille du trenger.

Og ha det i tankene, eg er også under opplæring. Eg er ingen fullerfaren utvikler, men bruker denne bloggen mye for min egen del, samtidig som du også kan ta del i, og kanskje snappe opp noen gode triks.


Etter å ha sett denne videoen kan det være interessant å sjekke denne siden:
http://thenewboston.org/tutorials.php

Ser du nøye etter vil du se at han har lagt ut 200 tutorials angående Visual Basic.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

HTML programmering Del IV

Legge til bilder

Så er vi kommet til det vi har bygget opp til i det siste. Hvordan legge ut bilder på websiden vår. Dette er ikke en veldig avansert affære, men det er greit at vi gjør det på en ryddig og god måte!

For et par blogginnlegg siden, der vi startet opp serien med HTML programmering
ble du bedt om å lage en mappe på desktopen. Finn denne mappen og åpne den. Inni denne mappen lager du en mappe til som du kaller images

I denne undermappen skal du legge alle bildene du ønsker å bruke.

Grunnen til at vi gjør det slik er at etterhvert som du blir bedre og bedre på å lage sider så vil du inkludere mere materiell.
Om du da legger alt i en mappe kan det fort bli uoversiktlig. Og er tanken din å eksempelvis etterhvert lage en side for å selge produter eller promotere ditt eget firma er det "et must" at du har kontroll.

Eg legger bildene: bilde1, bilde2 og bilde3 inn i min images mappe.
Disse kjenner du til fra før om du har sett de andre blogginnleggene ang bilder.

Taggen vi skal bruke heter <img>
Her er det vi skal legge inn:
<img src="images/bilde1.jpg" alt="bilde 1" />

Om du finner frem html filen du allerede har laget, skal den se omtrentlig slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
</BODY>
</HTML>

La oss legge inn bildene under linken til side2.html

Slik:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
<br />
<img src="images/bilde1.jpg" alt="bilde 1" />
<img src="images/bilde2.jpg" alt="bilde 2" />
<img src="images/bilde3.jpg" alt="bilde 3" />
</BODY>
</HTML>

Det du da vil se er 3 bilder liggende under hverandre på venstresiden, og kanskje
de er blitt ganske så store.
Grunnen til dette er igjen det at vi har ikke opprettet en CSS fil, vi har heller
ikke sagt noe om hvor store de skal være.

La oss ta utgangspunkt i bilde 2:
<img src="images/bilde2.jpg" alt="bilde 2" />

For å sette størrelsen må vi inkludere informasjon om høyde og bredde:
width="336" height="69"

Da blir det seende slik ut:
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" />

Har du no gjort det riktig vil siden din se slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
<br />
<img src="images/bilde1.jpg" alt="bilde 1" /><br />
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />
<img src="images/bilde3.jpg" alt="bilde 3" />
</BODY>
</HTML>


For den observante leser så ser du kanskje at eg har lagt inn noen <br />
Dette er for å sikre at ikke bildene kommer ved siden av hverandre, men under hverandre.

Kanskje du kan eksperimentere litt? Så skal eg om ikke så lenge komme med en blogg
der eg viser kordan du kan gjøre om bildene til linker!

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

HTML programmering Del III

Tredje blogg om å lage hjemmesider med HTML. Sist gang sa eg at eg skulle snakke om linking.
Og det skal vi!

Men før vi skal lære å linke må vi ha noe å linke til.
Og det gjør vi i 2 steg.

Steg 1
Finn en side på nettet du bruker mye. Ta vare på linken.

Steg 2
Lag en ny side (følg samme oppskrift som før)
Lagre den i den mappen vi allerede har lagret og kall den side2.html

Fra forrige gang så vår hjemmeside slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
<br />
<p>Her setter vi inn "brødteksten" vår! </p>
</BODY>
</HTML>

Den endrer vi til slik:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<br />
<H2>Mine egne sider:</H2>
</BODY>
</HTML>

Lagre den og åpne den i nettleseren din.

Som min link fra nettet velger eg en norsk nettavis som eg bruker mye: vg.no
Denne setter eg inn under linker fra nettet. Da vil siden vår bli seende slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
</BODY>
</HTML>

Som du kanskje ser har eg satt inn linjen:
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>

Og da er det på tide med en liten forklaring. Dele den opp litt.
Det som står rett etter a href er linken til stedet du vil linke til.

Target=blank forteller nettleseren at du vil åpne siden i et nytt vindu.
Har du ikke denne med vil den nye siden overskrive den du allerede bruker.

Det som står i klamme bak title er det som vil komme opp om noen beveger musen over.

Og det aller siste som står rett før </a><br> er det som stå som en link på siden din.

Men vi hadde en side til. Kanskje vi skal få laget linken til den også.
Under "Mine egne sider:" legger du til følgende linje:

<a href="side2.html">Side2</a>

Da ser siden vår slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>Mine linker!</H1>
<br />
<H2>Linker fra nett:</H2>
<a href="http://www.vg.no/" target="_blank" title="vg.no">vg.no</a><br>
<br />
<H2>Mine egne sider:</H2>
<a href="side2.html">Side2</a>
</BODY>
</HTML>

Som du ser er den litt annerledes.
Lagre siden din og prøv den i en nettleser.

Om du har gjort det rett skal du få opp begge linkene.
Siden fra nettet du valgte å linke til skal komme opp i nytt bilde om du klikker på det og
din egen side vil komme opp i samme vindu som du har siden din i. Og med mindre du har laget
noe på side2.html vil den komme opp blank.

No har vi lært overskrifter, tekst og linker.
Neste gang er vi klare for å legge til bilder!

Tips! Kanskje du kan ta mobilen/kameraet ditt ut en tur og ta noen bilder.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

HTML programmering Del II

Sist blogg laget vi en blank html-side. Kanskje ikke så veldig spennende, men eg ga en utfordring om å legge inn tittel og overskrift. Slik eg har gjort her:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
</BODY>
</HTML

Om du ikke allerede har gjort dette så kan du ta og oppdatere index.html som vi laget i forrige blogg og åpne denne på nytt i en nettleser. En liten merknad: Der finnes mange forskjellige nettlesere, og du vil sikkert lese at eg viser til de 5 store.
Da snakker eg om følgende 5: Internet Explorer, Firefox, Opera, Chrome, og Safari. Om du bruker noen av disse må du selv følge med at du har siste versjon.

La oss gå litt videre.
I den siste versjonen av vår html-side la vi inn taggen <H1>. Gjør no det samme med <H2> til og med <H6>. Lagre filen og se resultatet.
Da vil filen din se slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
</BODY>
</HTML>

Som du ser og kanskje har tenkt over så plasseres alt til venstre.
Det er fordi vi enda ikke har sagt noe om plassering og venstresiden er default/standard plassering.
Plassering av tekst, farger, skrifttyper og alle andre grafiske justeringer gjør vi med CSS (Cascading Style Sheets), noe eg skal omtale senere.
Grunnen til at vi skal bruke CSS er fordi vi da kan lage 1 fil som vi henviser til fra html siden vår og sette 1 standard for alle de andre sidene vi lager. Ikke tenk mer på dette foreløpig ;)

Vi går litt videre.

Taggene fra <H1> til <H6> omtalte vi som overskrifts tagger.
For "brødtekst" eller avsnitt kan vi bruke noe som heter <p> eller paragraph.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<H1>OVERSKRIFT MED H1</H1>
<H2>OVERSKRIFT MED H2</H2>
<H3>OVERSKRIFT MED H3</H3>
<H4>OVERSKRIFT MED H4</H4>
<H5>OVERSKRIFT MED H5</H5>
<H6>OVERSKRIFT MED H6</H6>
<br />
<p>Her setter vi inn "brødteksten" vår! </p>
</BODY>
</HTML>

Om du no sjekker siden vår i en nettleser vil du se at "brødteksten" er større enn <H6> taggen.
Skriftstørrelse er også noe vi skal se på siden.

Tenker vi setter en foreløpig sluttstrek der.
Om du har lyst å kjøre litt på og ikke vente på neste blogginnlegg kan http://www.w3schools.com/html5/default.asp anbefales å ta en kikk på.

Neste gang skriver eg om å lage linker på siden, en vesentlig årsak til at internett har blitt så stort. Om du ikke har tenkt å lage en stor side for
et firma, men mer som et verktøy for deg selv, er linker til andre sider ofte en stor hjelp.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

HTML programmering Del I

Da var det på tide med en ny liten blogg! Og denne gangen var tanken å ikke reklamere for et produkt.
Eg kan allerede avsløre at eg ikke kan unngå det. Dagens tema som eg har tenkt å blogge litt rundt er programmering, mer spesifikt programmering av web sider.
Veldig mange ser på programmering som ekstremt vanskelig og gjerne noe som de mer "nerdete" blant oss driver med. Det trenger ikke være slik.

Men det er klart. Alt man virkelig vil lære seg må man bruke tid på. HTML programmering er intet unntak der.

Dagens lille reklame snutt er et verktøy som eg selv har begynt å bruke når eg skal skrive sider i html, css og php. Og det er et verktøy som eg har fått anbefalt av andre. Verktøyet heter Notepad++ og kan lastes ned på siden http://notepad-plus-plus.org/
Grunnen til at eg vil du skal bruke dette er at du etterhvert vil se at det hjelper deg litt på veien med å holde styr på programmeringen din.

Notepad++ Tips og Tricks hentet fra youtube



Denne videoen gir deg et lite inntrykk av verktøyet.

Så over til den biten vi skulle blogge om i dag.
Programmering i HTML. HTML står for HyperText Markup Language og ble definert allerede i 1989, noen steder blir det sagt 1990.

Det første du gjør, og denne gangen velger eg te-skje-metoden.
1. Lag en mappe som du legger på skrivebordet. Den kan du kalle det du ønsker.
2. Ta opp notepad++ (eller en annen editor om du ønsker dette), lag et nytt dokument som du lagrer som index.html i den mappen du laget.
I menyen på notepad++ kan du velge hva slags tegnsett du skal ha, til denne første øvelsen kan du godt velge UTF-8.

Det første du må gjøre når du skal lage en side i HTML er å definere hva slags HTML standard du skriver i. Om du er helt fersk, så tar vi her utgangspunkt i HTML5.

Slik definerer du den:
<!DOCTYPE HTML>

Som du ser så starter og slutter eg med < og >. I HTML bruker vi tags. DOCTYPE er ikke en HTML tag, men en instruksjon som forteller nettleseren hvilken versjon av HTML koding man benytter.

Den første taggen vi kommer borti er <HTML>. Denne skal omkapsle all annen informasjon enn DOCTYPE. Og må ha en begynnelse og slutt.
Det vil si at vår første webside vil så langt se slik ut:

<!DOCTYPE HTML>
<HTML>

</HTML>


En html-side gjør seg ikke selv, så vi trenger litt mer kjøtt på beinet. Vi har også to andre elementer vi må ha på plass før vi kan si oss fornøyd i denne omgang.
Neste element er head eller <HEAD> som gjerne inneholder informasjon som tittel på siden eller henvisninger til andre filer der man skal hente informasjon fra. Dette kommer
vi tilbake til.

Vi legger <HEAD>-taggen inn i html siden vår og får følgende:

<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>

</HTML>

Det siste elementet vi legger til er kroppen/innholdet på siden. <BODY>.
Under denne taggen har vi både bilder/grafikk, linker, tekst, menyer og evt annet innhold vi vil dele med andre.
<BODY>-taggen legger vi under </HEAD> og får en HTML-side som ser slik ut:


<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Lagre siden. For å se på denne siden, gå inn på mappen på skrivebordet, høyreklikk på websiden din og velg at du vil åpne den i din nettleser.
Det vi nå har er en helt blank side. Du synes kanskje det er mye arbeid for ingenting, men du vil senere se koffor det er bygget opp slik.
Et lite tips. Du kan godt lagre dette samme dokumentet i en egen mappe som en slags mal. For dette er et veldig greit utgangspunkt når du skal lage andre sider senere. (Min påstand!)

Utfordring!
Om du har lyst å teste litt selv, prøv å¨legge inn <TITLE> innenfor <HEAD> taggen og en overskrift <H1> innenfor <BODY> taggen.

Har allerede begynt å skrive på neste blogg, med løsning på utfordringen, og lover at det ikke blir lenge til neste.

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!