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!

Ingen kommentarer:

Legg inn en kommentar