- Tervetuloa tutustumaan töihini ja blogin kuvitus- ym ohjeisiin!
HTML5 ja CSS3 osa1: sivun raamit
Photoshop sivellin lagi
2015/10/19
InDesign kappaletyylit Luettelomerkit ja numerointi
2015/10/25HTML5 ja CSS3 osa1: sivun raamit
Alkuun päästäksesi et tarvitse tehokasta konetta tai hienoja ohjelmia, melkein mikä tahansa räyskä riittää kunhan siinä on selain (IE, Firefox, Chrome…) ja tekstimuistio, joka Windows koneilla löytyy Apuohjelmista. (Jos olet Mac-käyttäjä, suosittelen ilmaista Komodo Editiä tai gedit:ä) Älä kuitenkaan käytä Wordin kaltaisia raskaita ohjelmia, niillä koodisi ei tallennu oikeassa muodossa.
Alla esimerkki. Keskimmäinen rivi kopioitu Muistioon Wordista. Lainausmerkit ovat vääränlaiset ja selain ei suostu toimimaan sen kanssa, jolloin kappaleen toista riviä ei muuteta siniseksi vaikka luokka on sama kuin kolmannessa kappaleessa.
Sitten hommiin, luodaan pieni websivu. Tehdään ensin websivulle raamit, kaikki se koodi minkä sen ”byrokratiaosuus” tarvitsee toimiakseen kunnolla. Sen jälkeen lisätään vähän sisältöä sivulle sarjan seuraavassa osassa.
Kirjoita Muistioon/Komodoon seuraavat rivit. Voisit kirjoittaa ne peräkkäinkin, mutta näin on selkeämpää:
<!DOCTYPE HTML>
<html lang="fi">
<head>
<meta charset="UTF-8">
<title>Eka html sivuni ikinä!</title>
</head>
<body>
</body>
</html>
Tallenna sitten koodisi nimellä ekasivu.html (paikan voit valita itse, kunhan löydät sen jatkossa)
Mitä koodin kohdat tarkoittavat?
<!DOCTYPE HTML> Tämä pätkä kertoo selaimelle, että dokumentin muoto on HTML. Selain tietää sen perusteella, että sisältö on HTLM5:a. (HTML kielen historiasta voit lukea linkistä.)
<html lang=”fi”> ja päättävä tagi </html> Html-tagi aloittaa sivun, se on sivun perusta. Tässä sen yhteyteen on laitettu myös kieli (fi=suomi) jota sivulla on käytetty, eli jolla se on kirjoitettu. Html-tagit (eli virallisesti suomeksi elementit) esiintyvät melkein aina pareittain, eli ne tulee sulkea kun tagin vaikutus päättyy. Nykyaikaa on kirjoittaa tagit pieneillä kirjaimilla, ainoa poikkeus on Doctype. Html, body ja title esiintyvät kerran per sivu, mutta monia muita tageja voi toistaa niin monta kertaa kuin on tarve. Enterin painamisella Muistiossa ei ole mitään vaikutusta siihen miten rivisi selaimessa katkeavat.
<head>ja päättävä</head> Tähän osiin tullaan myöhemmin lisäämään paljon tärkeitä kohtia, ne eivät näy selaimen sivulla sisältönä, mutta vaikuttavat moneen asiaan. Vähän kuin auton moottori, joka ei ulospäin näy, mutta on silti erittäin olennainen osa. Toistaiseksi näpyttelimme sinne vain titlen, eli sivun otsakkeen ja charsetin.
<meta charset=”UTF-8″> Tämän avulla kerrotaan selaimelle mitä merkistöä tulisi käyttää. ”UTF-8-koodaus on nykyään melko laajassa käytössä, koska se mahdollistaa erikielisten tekstielementtien esiintymisen samalla sivulla. Vuoden 2007 lopulla UTF-8 olikin noussut Googlen indeksoimien nettisivujen suosituimmaksi koodaustavaksi.” kertoo Wikipedia.
Esimerkki miten voi käydä, kun merkistökoodaus menee vikaan:
<title></title> Useimmat selaimet näyttävät titlen aloittavan ja päättävän tagin väliin kirjoitetun tekstin selaimen otsakerivillä:
Monet hakukoneet käyttävät titlen tekstiä kuvaillessaan sivua.
<body></body> Sivusi pääsisältö tulee näiden tagien väliin. Siihen tulee suurin osa koodista ja asioista, jotka kävijä näkee kun katselee selaimen kautta sivujasi.
Tästä onkin hyvä jatkaa osassa 2, missä käkerrämme hieman sisältöä sivullemme!
