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!

Ingen kommentarer:

Legg inn en kommentar