Html sivun tekeminen: Sara Halonen & Janne Tarvonen
- Avaa tekstinkäsittely ohjelma, jossa ei ole valmista muotoilua (Ei Word!)
Esimerkiksi: TextWrangler, Espresso, Notepad++.
- . Koodi aloitetaan aina määrittelemällä koodikieli (Html5, XHtml, Css, PhP, JavaScript)
- Koodi tulee aina aloittaa ja “sulkea” samalla koodimääreellä < > (aloitus) ja </ > (lopetus)
Esimerkiksi koodin alkuun tulee aina <html> ja koko koodi suljetaan </html>
- Koodin html runko on kaksiosainen, näkyvä osa ( <body>) ja sivun selaajalle näkymätön (<head>)
<head> osio sisältää:
- merkistöstandardi
- kieli
- hakusanat
- sivun otsikko
- favicon
- linkitykset ja viittaukset Css ja JavaScript tiedostoihin
<body> osio sisältää:
- kaiken sivun näkyvän sisällön (teksti, kuvat, linkit yms)
- Kun html tiedosto on rakennettu, voi sen ulkonäköä ja tyyliä muokata Css-tiedoston avulla, joka on erillinen tiedosto, johon viitataan <class=” “> html- määreellä
- Otsikot määritellään merkeillä <h1> <h2> <h3> jne. Tekstiosio puolestaan <p>, rivin aloitus <br> ja ryhmittely <div>. Muista aina sulkea määreet!
- Esimerkki perus html-pohjasta:
<!DOCTYPE html> <- tiedostotyyppi
<HTML>
<HEAD> <- head-aloitus
<TITLE>Otsikko </TITLE> <- sivuotsikko
<link rel=”stylesheet” type=text/css” href=”style.css” media=”all” /> <- Linkki css tiedostoon
</HEAD> <- head- lopetus
<BODY> <-body aloitus
<h1>Otsikko1 </h1> <- näkyvä otsikko
<p> tekstiä </p> <- teksiosio
</BODY> <- body lopetus
</HTML>
Linkki koodaustehtävään: http://www.jannetarvonen.com/blank/