Viser innlegg med etiketten leksjon. Vis alle innlegg
Viser innlegg med etiketten leksjon. Vis alle innlegg

lørdag 4. august 2012

CSS og farger

Hei!!

Endelig har vi fått litt fart på blogginnleggene. Og du lærer no å lage enkle html sider i et litt større tempo enn vi gjorde i starten! BRA!

Sist gang snakket eg litt om HTML og CSS.
For å repetere kjapt.
Denne linjen må ligge i <HEAD> - delen av html siden din for at css skal virke:
<link rel="stylesheet" type="text/css" href="style.css" />

Filen din trenger ikke hete style.css, men så lenge vi kun opererer med 1 CSS fil synes eg det er greit å bruke det som en standard. På større sider kan du om du sjekker kilden se at de har opptil flere css tilknytninger. Det kan gjerne være gunstig når man skal begynne med toppmenyer og menyer på venstresiden osv.

Det er mange veier til ROM. Som kjent fører alle veier dit. Og litt sånn er det med CSS og farger også.
I forrige blogg viste eg litt med HEX-koder. Svart og Hvit.Motsetninger av hverandre. Men det finnes jo så klart et hav av andre farger. Ikke alle farger er gode nok til å bruke på web. Derfor er det laget Charts som viser hva man kan bruke, med HEX-kodene.

For noen år tilbake ble det laget en liste med 216 gode farger å bruke på web. Stort sett skulle det holde, og det er den eg tar utgangspunkt i her.

Listen finner du her:
http://www.w3schools.com/cssref/css_colors.asp
Under overskriften 'Web Safe Colors?'

Bruk gjerne den som referanse til å begynne med, til du føler du har kontroll på CSS og farger.
Men det er flere måter å velge ut fargen på enn å bruke hex-koder som #ffffff

Du har for eksempel RGB, som står for Red, Green, Blue.
Velger du å bruke denne metoden vil det i din CSS-fil se slik ut:

body
{
background: rgb(255,0,0);
}

Som gir fargen rød. Setter du  rgb(0,255,0); vil du få grønn.
Du skjønner sikkert tegningen etterhvert.

Om man tar skrittet videre kan man også definere rgba.
Bokstaven a står her for alpha channel.
Og hva er så en alpha channel? Her må eg si at eg lett kan tråkke i salaten og tar gjerne i mot innspill og forbedringer av blogginnlegget.
Men en alpha channel ifølge w3schools er en forlengelse av RGB som sier noe om gjennomsiktigheten til en farge.

Måten du bruker det på:


body
{
background: rgba(255,0,0,0.5);
}

Skalaen går fra 0.0 til 1.0.
Lek litt med denne for å få den ønskede effekten.

Så langt har vi nevnt: Hex og RGB.
Vi har enda en HSL; Hue, Saturation, Light.
Hue står for fargetone
Saturation står for metning.

I dag stoler eg på ordbøker :)

HSL skriver vi slik i CSS:

body
{
background: hsl(120, 65%, 75%)
}

Test det ut og se hvordan det virker. Også på HSL har vi en alpha channel. Da heter det HSLA.

Det siste eg vil nevne er Cross browser predefined farger.
Her er 147 farger som er predefinert med fargenavn istedet for koder.
Listen finner du her:
http://www.w3schools.com/cssref/css_colornames.asp

Skal du bruke farger på denne måten blir det slik i CSS:

body{
background: blue;
}

Det finnes veldig mange browsere. Ikke alle browsere støtter alt.
Som du sikker har merket henviser eg veldig ofte til www.w3schools.com sin sider.
Så langt har eg funnet det meste av det eg trenger der, og de kan være en grei side å bookmarke.
19.04.2012 skrev eg et blogginnlegg om Delicious.
Som er en smart måte å bookmarke sider på. Bruk denne og bookmark sidene eg har listet opp.

I dag har det vært mye å lese og lære. Men eg håper at du har fått littegrann verktøy å leke med siden din.
Neste gang tenker eg at vi snakker litt om fonter.

Som Dere alle etterhvert vet, så liker eg å friste med en liten video:



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!

fredag 3. august 2012

HTML Kodeskriving VI

Hei igjen!

Etter forrige blogginnlegg fikk eg tilbakemelding om at det å skrive HTML egentlig ikke var programmering siden det ikke skulle kompileres. Eg ser veldig mange steder på nett at det omtales som HTML programmering, men lytter til vedkommende og omdøper det til Kodeskriving. Så får resten av Dere velge selv :)

Sommeren er over og det er tid for å ta fatt på nye blogginnlegg.
Siste innlegg var av det korte slaget, så eg regner med at du er klar for å ta fatt på nye utfordringer.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />
<h4>Dette bildet er tatt på forsommeren av en iPhone4 og redigert av en iPhone4S med en liten app</h4>
<br />
<h4>Bildet er tatt av Brumle Blichfeldt</h4>
</BODY>
</HTML>

Nå har vi et godt utgangspunkt for ett av temaene eg vil ta opp; CSS
Men før eg skal gå inn på det temaet vil eg fortelle om noe som heter 'id'
'id' er en Global attributt. Det vil si at når du har tildelt et element den attributten vil det elementet kunne adresseres av blant annet en CSS fil. Eller et Javascript.
Vi skal etterhvert se på CSS. Det står for Cascading Style Sheets og er blitt mer eller mindre standard for måten layout/grafikk defineres på en html side.
På side 2 har vi et bilde, eller et <img>. Dette kan vi tildele en 'id'
La oss kalle bilde for bilde2. Bak taggen <img> som definerer dette bildet legger vi til attributten slik. id="bilde2"

Da vil html kode for side2.html se slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<img src="images/bilde2.jpg" id="bilde2" width="200" height="200" alt="bilde 2" /><br />
<h4>Dette bildet er tatt på forsommeren av en iPhone4 og redigert av en iPhone4S med en liten app</h4>
<br />
<h4>Bildet er tatt av Brumle Blichfeldt</h4>
</BODY>
</HTML>

Med CSS kan vi definerer farger, vi kan dele inn siden vår i deler (for senere å bygge menyer), vi kan bestemme posisjonen til elementene ved å knytte css opp mot 'id'en som vi nettopp definerte, vi kan endre tekst; font og farger.

Nok snakk om CSS. La oss opprette en css fil og sette i gang! Eg tar utgangspunkt i at du no vet hvordan du skal opprette nye dokumenter til websiden. Lag en ny tom side som du lagrer som style.css
Dette skal du lagre i samme mappen som dine html sider. Har du gjort det rett vil ikonet i mappen se ut som et papirark med et tannhjul på og under egenskaper vil du få beskjed om at det er en css fil. Egenskapene til en fil finner du ved å høyreklikke.
La style.css bare være tom for øyeblikket. VI kommer fort nok i gang med tastingen.

Nå skal vi knytte sammen html sidene dine og css filen.
Det gjør vi ved å legge inn følgende informasjon inn i <HEAD>-taggen:

<link rel="stylesheet" type="text/css" href="style.css" />

Dette gjør du på begge html sidene dine.Grunnen til dette er, og det er også hovedformålet med CSS, at du da kan endre fellesinformasjon ett sted.
Tenk deg at du har laget 15-20 html sider og må endre informasjon hele tiden på alle. Det er tungvint!

Din <HEAD>-tag på begge sidene skal se slik ut:

<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

Nå skal vi legge inn den første informasjonen i vår style.css
Lim inn følgende:

body
{
background: #000000;
}

Du skjønner kanskje alt no at noe skal skje med bakgrunnen på websidene.
Lagre style.css og om du allerede har sidene dine oppe, Trykk F5.

#000000 er en HEX kode for fargen svart. Der finnes andre måter å definere farger på med CSS, men eg foretrekker personlig HEX-kodene.

På min side2.html valgte eg å skrive littegranne skrift med <H4>.
<H4> kan vi også behandle med CSS.
Legg inn følgende:

h4
{
color: #ffffff;
}

#ffffff er koden for fargen hvit.
Du ser måten eg skriver koden inn i CSS på.
Element som skal endres på
Åpningsbracket
Hva som skal endres: hvordan;
Lukkebracket

Du har no fått en liten smakebit på CSS. Kanskje du kan endre litt på fargene selv. Om du har lest mine tidligere blogginnlegg om det heksadesimale tallsystem så vet du at det går fra 0-9 og videre fra A-F. Av de 6 tallene du kan endre på kan du erstatte en 0 med hvilket som helst av de tallene i det heksadesimale system.

Skal snakke litt mer om css og farger i et senere innlegg!

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!

torsdag 2. august 2012

HTML programmering Del V

For en stund siden lovet eg at eg skulle komme tilbake med en ny blogg der eg skulle vise hvordan man gjør bildene om til linker.

Og løfter skal man holde. Det er vi opplært til alle som en.

Sist vi holdt på avsluttet vi med følgende webside:

<!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>

La oss ta utgangspunkt i bilde 2 som er det minste bildet.

Erstatt linjen som ser slik ut:
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />

Med en linje som ser slik ut:
<a href="side2.html" target="_blank"> <img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" border="0"></a><br />

Det vi nå får er et bilde som er omgjort til en link. Klikker du på bildet slik du ville gjort med en link kommer du til side2.html som vi tidligere har laget. Med mindre du selv har gjort noe får du opp en blank side.

Til neste gang kan du gjerne leke litt med side2.html slik at den senere ikke bare kommer opp som en blank side. Så skal eg gjøre det samme.

Det nærmer seg et punkt der det er naturlig å snakke litt om CSS. Det kan vi se litt på neste gang når vi har 2 sider å leke med!

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!

fredag 6. juli 2012

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!

torsdag 28. juni 2012

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!

torsdag 21. juni 2012

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!

onsdag 20. juni 2012

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!

mandag 7. mai 2012

Bachelor, første avsnitt

Om man tenker på at Bachelor graden er en bok som skal skrives, ikke bare oppgaven i seg sjøl på slutten av studiet, men hele reisen fra man starter til man er ferdig, så kan man vel si at eg i dag har skrevet første avsnitt.
Et halvt år med forelesninger, mange timer med selvstudie foran pc'en på kveldstid, erfaring fra timer foran maskinen på jobb og ikke minst noen hektiske dager i ukene før eksamen med oppsummeringer og oppgaveløsninger, som bunner ut i en eksamen som skal vare i 3 timer.

Når man tenker over det er det ganske mye som skal pakkes inn i hodet før man skal få lov til å grue seg i noen dager til eksamen som er over nesten før den har begynt.

Og i etterkant er det tid for refleksjoner.
Hvordan følte man at det gikk? Svarte man riktig? Burde man ha skrevet mer om noe?
Hjort er elg når man hopper over bekken for å samle bits. Eller noe i den dur.

Man kan iallefall gjøre opp status for hva man har vært igjennom av temaer. To av temaene har eg belyst her på bloggen allerede, det binære og det heksadesimale tallsystemet. Men man har jo også lest om internett og teknologier, samarbeidsverktøy og multimedia.

Jaja, det er på tide å avrunde dette semesterets arbeid, sende inn de siste innleveringene man har fått for å få kommentarene på den innsatsen han har gjort.

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!

tirsdag 17. april 2012

Det var en gang...

Det var en gang... Og noen ganger må man bare bli voksen før man er klar for å fortsette sitt eventyr. Interessen har alltid vært der. Man vs. Machine. Eller kanskje det er samspillet, mestringsfølelsen og forståelsen som binder meg time etter time foran skjermen... I fjor høst tok eg et valg. Et godt valg. Et valg for fremtiden. Planen og tankene mine var og er at nå skal eg få meg en utdannelse som er relatert til det eg liker. Problemløsninger i den digitale hverdag.

Og det er mye det denne bloggen skal handle om. Veien min dit. Opplevelser i den digitale verden på godt og ondt. Programmer testet. Oppgaver levert inn. Og også, forhåpentligvis, eksamener bestått.

Denne våren har eg tatt leksjoner innenfor kurset IT Introduksjon. Med ukentlige leksjoner og innleveringer. Et fag som helt klart er basert på at man kommer rett fra videregående. "Dette er en datamaskin" - nivået! Eller kanskje man burde si "Hello World!"
Og først nå, helt på slutten av semesteret får eg leksjonen som virkelig får meg til å sperre øynene opp.

En leksjon som sender meg inn i en verden av twitring, blogging, samarbeid over internett med andre verktøyer enn mail og IM'er av ymse slag. Andre måter å tilegne seg informasjon på enn å surfe side opp og side ned for å finne den ene nyheten som gjør akkurat denne dagen spennende.

En verden man egentlig kjenner til fra før, men ikke har gitt seg helt i kast med. Men no føles det trygt og godt å ha tatt neste fot innenfor døren.

Og når man da først har kastet seg over mye nytt så gaper man gjerne over mer med det samme og leter gjennom gamle mailer med brukernavn og passord til alt det andre alle venner mener man MÅ hive seg på, hvor man sier ja... for bare å glede en venn med enda en i nettverket sitt som har det samme som seg selv.

Etterhvert roer man seg ned, ser over alle de 20 fanene på browseren, alle de nye passordmailene man har fått i innboksen, lener seg tilbake og tenker:

Eg er nettopp blitt oppgradert...

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!