Del 1: Html
Html står for Hypertext Markup Language og dette språket er nødvendig for å lage websider. Html brukes til å strukturere informasjon. I Html brukes taggertag er en kode for legge til tekst, linker, bilder, overskrifter, videoer og mye mer.
En vanlig tag begynner med:
< ( taggen sitt navn )start > (innhold til taggen) </ ( taggen sitt navn )slutt >
Eksempler:
<h1>Overskrift</h1>
<h1>
Overskrift
</h1>
Oversikt
- Trinn 1: Oppsett
- Trinn 2: Struktur
- Trinn 3: Link CSS
- Trinn 4: Tittel
- Trinn 5: Navigation Bar
- Trinn 6: Overskrift og avsnitt
- Trinn 7: Legge til linker
- Trinn 8: Legge til bilder
Trinn 1: Oppsett
Vi skal begynne med å se en video som viser hvordan vi setter opp Sublime Text og hvordan vi oppretter nødvendige filer.
Trinn 2: Struktur
Vi skal nå lage strukturen til vår hjemmeside. Da kopierer du eller skriver inn denne koden i filen/fanen index.html.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Trinn 3: Link CSS
Nå linker vi .css filen til hjemmesiden vår. CSS står for Cascading Style Sheets og er det språket vi skriver i for å style websider. Selve stylingen tar vi senere...
<link href="main.css" rel="stylesheet">
Trinn 4: Tittel
Skriv inn tittelen på hjemmesiden din. Meta taggen gjør slik at vi b.l.a. kan bruke Æ, Ø og Å.
Etter at du har skrevet inn tittelen og meta taggen kopier du alt det du har skrevet hittil til de andre .html filene (bilder.html og about.html).
<title>Min Hjemmeside</title>
<meta charset="utf-8">
Trinn 5: Navigation Bar
Nå skal vi lage en navigation menu, slik at vi kan navigere til de andre .html filene våre. Kopier/skriv inn koden under til alle .html filene (index.html, bilder.html og about.html).
For å åpne en av filene i web browseren for å se hvordan websiden din ser ut går du til hjemmeside mappa og høyreklikker på en av .html filene og velger "Åpne i" → google chrome.
Trykk F5 i nettlesereren på hjemmesiden din for å refreshe og se endringer.
<div>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="bilder.html">Bilder</a>
</div>
Trinn 6: Overskrift og avsnitt
Vi legger til tekst til about.html. Skriv inn ønsket tekst, som foreksempel angitt nedenfor.
<h1>Overskrift 1</h1>
<p>Avsnitt</p>
<h2>Underoverskrift 2</h2>
<p>Avsnitt</p>
<h3>Underoverskrift 3</h3>
<p>Avsnitt</p>
Her er et bilde av hva det bør ligne på
Trinn 7: Legge til linker
Vi legger til noen linker på index.html. Du kan legge til så mange du vil.
<a href="http://www.reddit.com/">Reddit</a>
Her er et bilde av hva det bør ligne på
Trinn 8: Legge til bilder
Vi skal nå legge til noen bilder og skrive inn øsnket størrelse. Benytt bare høyde eller bredde for å få korrekt skallering av bildet. Eksempel height="100".
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e8/Soay-sheep-arjecahn.jpg" height="" width=""/>
Du kan gå på google.com og finne et bilde du liker å kopiere bildenettadressen. Legg linken inn som vist over i koden.
Eksempel
