Dere sier du/dere vil lære html, css og php, og da vil jeg anbefale dere å gå gjennom tutorialene på W3Schools istedet for å be om ferdige snutter her.
For å gi en liten innføring så kan jeg si dette:
HTML
HTML er ikke et programmeringsspråk, men et markupspråk. Strict HTML eller XHTML krever at alle tags skal være flettet, det betyr at du skal kunne bygge opp hele markupen i en trestruktur, der hvert element er innenfor et annet element. Rot-elementet i HTML er <html>.
Eksempel på ugyldig XHTML: <i><b>dette</i> er viktig</b>
Her ser vi at i ikke er inni b, og heller ikke motsatt.
Riktig bruk vil være <b><i>dette</i> er viktig</b>
Her ser vi at i-elementet er innenfor b-elementet og er derfor riktig.
Dessuten skal alle tags lukkes altså f.eks. med </html>. En del elementer bruker bare et tag, og er tomme elementer. Eksempel på dette er img-elementet og break line-elementet. Disse lukker vi ved å skrive <br /> og <img src="bilde.png" />.
Merk også at HTML-elementer, er case-sensitive, så bruk små bokstaver.
Et element kalles div, og brukes slik: <div>Dette er en div</div> . Div fungerer for enkelhets skyld som p, altså en paragraf/avsnitt. I tilleg har vi et element som heter span, som ikke er et blokk-element, det vil si at det ikke lager et eget avsnitt.
For å teste forskjellen se på følgende to snutter:
Dette er et <div>div element</div>.
Dette er et <span>span element</span>.
CSS
Dette fører oss over i CSS, som er cascading style sheets. For å inkludere en ekstern CSS-fil til et HTML-dokument, bruk følgende linje i Body-elementet på HTML-dokumentet:
<link rel="stylesheet" type="text/css" href="mittdesign.css" />
der mittdesign.css er din CSS-fil.
Alle elementer i HTML kan ha attributter, altså en måte å identifisere de på. De to typene jeg velger å trekke frem her er id og class. En id-attributt skal kun forekomme en gang på en side, mens class kan forekomme så mange ganger man vil. Jeg velger å bruke id og class sammen med kun div og span her, men de kan også brukes på andre elementer som h1, p, img, tables etc.
Eksempel:
Kode
<html>
<head>
<title>Tester css</title>
</head>
<body>
<div id="overskrift">Velkommen til min side</div>
<div class="tekst">Dette er min side. Denne inneholder mye <span class="viktig">viktig informasjon</span>. Derfor håper jeg du vil trives her. </div>
</body>
</html>
Slik den er nå vil den ikke ha noen formatering, men fordelen med CSS er at vi skiller designet fra selve innholdet. Derfor bruker vi ikke noen i/b-elementer f.eks.
Vi bygger så en CSS-fil som tar seg av hvordan dokumentet skal se ut:
Kode
#overskrift {
font-size:18px
}
.tekst {
font-size:10px;
}
.viktig {
font-size:12px;
font-weight:bold;
}
body {
background-color: #DDDDDD;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
Som vi ser har vi her tre forskjellige typer definisjoner, en med # først, en med punktum først og en uten noe.
De med # først betyr elementer med denne id'en, altså alle elementer med id'en overskrift (det skal kun være et element av denne typen) får font-størrelse på 18. De med punktum er klasser, altså alle elementer av klasse "tekst" får font-størrelse på 10, og alle med klasse "viktig" får størrelse 12 og i tillegg fet tekst.
Til slutt har vi "body", som betyr at elementet body får bakgrunnsfargen #DDDDDD, og teksten skal ha font-størrelse 12 og ha fonten Verdana.
Som vi ser får vi en motsigelsen her. All teksten vår er inne i body-elemenentet, og skal altså ha størrelse 12, men overskriften skal også ha størrelse 18. Poenget her er at den mest "spesialiserte" regelen får bestemme, f.eks. er elementer med id "overskrift" mer spesifikk enn elementer i "body". Dette er ganske intuitivt å forstå når man begynner å jobbe litt med det.
Om man begynner å tenke seg om, er det mange muligheter med CSS, og veldig mange forskjellige måte man kan formatere på. Selv har jeg begynt å formatere alle mine sider med kun div og span med klasser og id, og bestemme alt annet i CSSen. Fordelen er at man kan gjøre store forandringer veldig enkelt, og man får full oversikt over designet uten å måtte tråle gjennom en masse HTML. Alt du tenker deg av layout og design kan gjøres i CSS om det kan gjøres i HTML, og mer til. Du kan også bruke det samme på mange forskjellige sider (Don't repeat yourself).
PHP
PHP er et helt annet kapittel. Det er et serverside programmeringsspråk, og det betyr at du må ha en server (anbefaler XAMPP for utvikling) for å kjøre det (tolke det). PHP-koden vil aldri komme frem til browseren. PHP kan gjøre det meste et moderne programmeringsspråk skal kunne, blant annet er det objektorientert, men man kan også gjøre mye uten å ha noen anelse hva dette betyr.
For å ta et eksempel, så kan vi si at du har en enkel webside med to undersider. Du vil ha en meny som lenker til de andre sidene og hver av disse sidene.
Du lager da en liten meny:
Kode
<div id="nav">
Navigasjon:
<ul>
<li><a href="hovedside.html></li>
<li><a href="underside.html></li>
</ul>
</div>
Merk at du ikke skal ha med body, html og lignende tags, da dette er en html-snutt og ikke et komplett html-dokument.
Du lager da f.eks. hovedside.html slik:
Kode
<html>
<head>
<title>Hovedside</title>
</head>
<body>
<?php include("meny.html"); ?>
Velkommen til min hovedside, se også mine undersider!
</body>
</html>
På samme måte lager du underside.html, bare at du forandrer tekst og tittel. Det PHP vil gjøre er å inkludere innholdet i meny.html på denne siden, slik at den for en besøkende ser slik ut:
Kode
<html>
<head> <title>Hovedside</title> </head>
<body>
<div id="nav">
Navigasjon:
<ul>
<li><a href="hovedside.html></li>
<li><a href="underside.html></li>
</ul>
</div>
Velkommen til min hovedside, se også mine undersider!
</body>
</html>
Som vi ser skal all PHP-kode inkluderes i <?php ?>-elementer (evn <? ?>). Om man vil legge til en ny side legger du bare til en lenke i meny.html, så vil alle sidene lenke til denne nye siden, uten at du trenger å endre hver side.
Sist endret av Keanu; 9. oktober 2007 kl. 15:09.
