Alkupuhe
Tämä on oppaani kolmas osa ja tässä osassa käsittelemme taulukoita, otsikoita, kuvien liittämistä, metatietoja ja aloitamme myös dynaamisten sivujen teon. Viime oppaassa jo mainitsinkin, että taulukoita ei tulisi käyttää ulkoasun tekoon vaan ne tulisi pitää taulukoina. Oma mielipiteeni on että divit ovat hyödyllisempiä ja helpompia käyttää. Saat sivuista myös helpommin muokattavat, kun teet diveillä ja css:llä kuin että tekisit taulukoilla.
Otsikot
Otsikoita on <h1> -> <h6>, <h1> on otsikoista suurin ja <h6> pienin. <h1>:stä tulisi ola sivulla yksi kappale ja sen tulisi olla sivun pääotsikko. <h2>-otsikoita tulisi käyttää hillitysti ja järkevästi ja tästä eteenpäin otsikoiden käyttö on hieman vapaampaa, mutta käytä niitä silti järkevästi äläkä laita esimerkiksi kaikkia mahdollisia sanoja otsikoina.
Kuvat
Kuvia tulet tarvitsemaan sivustojen teossa ja ylläpidossa, koska kaikkia asioita on hieman vaikea selittää ja kertoohan kuva enemmän kuin tuhat sanaa.
- Koodi: Valitse kaikki
<img src="url">
esim.
<img src="kuva.png">
Kun annetaan poluksi vain "kuva.png" tulee kuvan olla samassa kansiossa kuin itse sivun jollekka se ladataan. Jos ladata kuvan esimerkiksi alikansiosta niin laitat vain alikansion nimen
- Koodi: Valitse kaikki
esim.
<img src="alikansio\kuva.png">
Huomaa img-tagillakaan ei ole sulkutagia!
Voit käyttää alt attribuuttia, jonka avulla voit määrittää kuvalle nimen, joka näkyy käyttäjille, jotka eivät joko saa ladattua kuva tai he käyttävät tekstiselainta.
- Koodi: Valitse kaikki
<img src="kuva.png" alt="kiva kuva kissasta">
Kuvasta voi tehdä myös linkin laittamalla se linkin "väliin" näin
- Koodi: Valitse kaikki
<a href="index.html"><img src="kuva.png"></a>
Metatiedot
Metatiedoista puhuimmekin jo vähän ensimmäisessä oppaassa ja nyt syvennymme lisää niiden käyttöön. Metatietoja ovat mm. tekijä, kuvaus, avainsanat, sisällön tyyppi ja voit myös antaa hakkoneille tietoa, että seuraavatko ne sivustoa vai ei.
- Koodi: Valitse kaikki
<meta http-equiv="content-type" content="text/html; charset ISO-8859-1">
<meta name="description" content="Tälläinen testisivusto">
<meta name="keywords" content="HTML, CSS, PHP">
<meta name="author" content="Mikko Mallikas">
<meta name="robots" content="index, follow">
Tuossa pari perusmetatietoa, joita tulee käytettyä aika useasti. Content-type kertoo, että muoto on html:llää ja charset-kohta kertoo, että merkistö on ISO-8859-1. Seuraavat kolme kertovat sivuston kuvauksen, joka näkyy hakukoneissa ja avainsanat, jotka hakukoneet listaavat ylös indeksoinnissa(älä kuitenkaan ylioptimoi ja tunge kaikkia mahdollisia sanoja keywordsiin, koska pahimmassa tapauksessa sivusi voidaan poistaa hakukoneesta). Author taas kertoo sivuntekijän ja robots määrittää seuraavatko tai indeksoivat hakurobotit sivun, jos annat parametreiksi index, follow niin hakukoneet indeksoivat ja seuraavat sivun, voit myös kieltää hakukoneita indeksoimasta sivua noindexillä tai nofollowilla kieltää seuraamisen. Parametrejä voi myös "sekoittaa" eli index, nofollow niin sivu indeksoidaan, mutta sivua ei seurata.
Dynamic duo
Dynaamiset sivut, mitä hyötyä niistä onkaan? No sivujen koko pienenee huomattavasti, kun ei tarvitse määritellä ulkoasua joka sivulle erikseen. Sivujen muokaaminen myös helpottuu esimerkiksi olet tehnyt sivuston johonka kuuluu 200 .html-tiedostoa ja yksi .css-tiedosto nyt haluaisit muokata sivuston navigaatiota lisätä vaikka sinne uuden kohdan nimeltä yhteystiedot. Ensinnäkin joutuisit muokkaamaan jokaista 200 .html-tiedostoa ja lisäämään jokaisen navigaatioon linkin, jos taas olisit tehnyt dynaamiset sivut niin muokkaisit vain yhtä tiedostoa ja navigaatio muuttuisi joka sivulla. Dynaamisissä sivuisssa siis sisältö generoidaan, kun sitä pyydetään ja yleensä niiden toteutuksessa on käytetty PHP:tä ja tietokantaa(tosin itse en ole vielä pahemmin tietokantoihin tutustunut, joten niistä en ole vähään aikaan kirjoittamassa).
Loppupuhe
Tässä nyt oli tämä kolmasosa, mutta tämä tuskin jää viimeiseksi, kun olen nyt innostumassa oppaiden kirjoittamisesta sekä opin itsekkin samalla kokoajan lisää.
1 2 3
