Kirjasto

Wikit > Kirjasto

Hei velhot! Kirjasto-wiki on olemassa sitä varten, että tänne saa laittaa hyviä vinkkejä, joista on apua verkkosivujen tekemisessä teille itsellenne ja muille. Kun jaat vinkin Kirjastossa, laita oma nimesi siihen suluissa viereen ja ilmoita vinkin jakamisesta opettajalle. Saat siitä yhden mainepisteen!

(HUOM! Kirjastoon voivat kirjoitella vain sisäänkirjautuneet velhot.)

fantsukirjasto

 

Wikin hienous on siinä, että ihan kuka tahansa verkkovelhokoululainen saa muokata tätä sivua. Muokkaus tapahtuu valitsemalla ”Muokkaa” ja muutokset tallentuvat kun painat sivun alalaidasta ”Tallenna”-nappia.

Se mikä tästä tekee kinkkisen jutun on se seikka, että joukosta saattaa löytyä semmoisia höpsöjä urveloita, jotka haluavat käyttää tätä vapautta ja vastuuta väärin ja kirjoitella seinille asiattomuuksia. Sellainen käytös ei kuitenkaan sovi niille, jotka haluavat olla Todellisia Verkkovelhoja. Näin ollen se joka Kirjastoa väärin käyttää, erotetaan Verkkovelhokoulusta.

HTML & CSS – linkkejä

W3Schools – Täältä löytyy mm. kaikki HTML:stä ja CSS:stä. Kokeile käteviä tryit-editoreita!
HTML5-tutorial – Kattavahko ja hauskasti kirjoitettu sivusto HTML5:n saloista
http://survival.hollow13.net/ – XHTML + CSS survival kit suomeksi, sisältää mm. kattavan listan tageja

HTML & CSS -vinkkejä

Jos haluat kirjoittaa koodia tekstinä, voit korvata tektissä < merkin ”&lt”:llä ja >merkin ”&gt”:llä.
esim. ”Rivinvaihto toteutetaan komennolla &ltbr&gt”.(Antti)

Jos selaimessa ei näy ääkköset, tulee selaimelle kertoa mitä kieltä sen pitää käyttää. HTML5: Tämä tapahtuu helposti lisäämällä omalle sivulle HEAD-tagin sisälle: <meta charset=”UTF-8”> (Reima)

Ethän halua, että käyttäjä harhautuu hienoilta nettisivuiltasi surffailemaan muualle Internetin syövereihin? Voit määritellä linkin avautumaan automaattisesti uuteen välilehteen parametrilla target=”_blank, jolloin myös omat nettisivusi pysyvät auki käyttäjän selaimella. Esimerkiksi näin: <a href=”http://www.elonkoulu.fi” target=”_blank”>Linkki Elonkouluun.</a> (Janne)

Notepad ++:sta löytyy kommentteihin liittyvät pikatoiminnot/näppäinyhdistelmät näppärästi polusta Edit > Comment/Uncomment – Nopeuttaa huomattavasti mm. sivun eri osien piilottamista. (Jenni)

Kommenttien avulla voit kirjata itsellesi muistiin asioita, jolloin koodin jatkaminen myöhemmin on helpompaa. Kommentit ovat myös hyvä apuväline, jos samaa koodia kirjoittaa useampi henkilö. (Kati)

Olethan huomannut, että kirjoittaessassi Notepad++:n se ehdottaa sinulle vaihtoehtoja ennakoivan tekstinsyötön tapaan. Esim. kirjoittaessasi koodiin background ehdottaa se kyseisellä sanalla alkavia toimintoja. (Ellu)

Validaattori suosittaa laittamaan osan tekstityypeistä (font-family) lainausmerkkeihin. Esim. ”Courier new”, ”Times New Roman”. Tekstityyppien nimet, jotka sisältävät ”välilyönnin” tulisi laittaa koodiin lainausmerkeissä (http://www.w3schools.com/cssref/pr_font_font-family.asp). Sivun kannalta ei olennaista eroa. (Jenni)

Liittyen Verkkovelhokoulun tasoon 15 (”Riimut”): Sen sijaan, että määrittelisit Googlen fontit jokaiseen .html -tiedostoon erikseen (komennolla <link href=’https://fonts.googleapis.com/css?family=Milonga’ rel=’stylesheet’ type=’text/css’>), voit tehdä lisäyksen suoraan CSS-tyylitiedostoosi, jolloin sen tarvitsee tehdä vain kerran. Koodi löytyy Googlen fonttien @import välilehdeltä ja se näyttää tältä: @import url(https://fonts.googleapis.com/css?family=Milonga); (Janne)

Googlen fontit ja text-shadow eivät näy automaattisesti tarkasteltaessa sivua IE-selaimella, mutta esim. Chromella pitäisi näkyä. (Niina)

Vinkkejä kuville

Skaalaa kuvat valmiiksi oikean kokoisiksi kuvankäsittelyohjelmassa. Sekä thumbnailit että isommat kuvat. Voit mittailla sopivia kuvakokoja esim. tekemällä photoshopiin ”rautalankamallin” sivustasi.

Ilmaisia kuvia löytyy Pixabay-sivustolta. (Hille)

An outline for the image can be added by writing the below code in CSS file as a class element. outline: green dotted thick;And then adding this class name in the img element. Any color and style can be added for the background.(Sanchita)

Tarkkuutta kuvien kanssa: Muista tarkistaa kuvien tallennusmuodot, näin on helpompi saada kuvat näkymään koodailemallasi sivulla (Esim. onko jpg vai jpeg). (Liisa)

Kuvan kehystäminen css:ssä: esim. border: 1px solid black; voit käyttää myös color pickeriä. (Mika)

Jos haluat käyttää ilmaisia ja vapaasti muokattavia/jaettavia Googlesta hakemiasi kuvia, Googleta normaalisti jokin aihepiiri, valitse Googlen välilehdeksi (yläpalkista) ”Kuvahaku” (tai mene suoraan sivustolle: Google Images), ja valitse yläpalkista ”Hakutyökalut” -> ”Käyttöoikeudet”. Sieltä voit valita esim. ”Saa käyttää uudelleen ja muokata”, jotta voit vapaasti tehdä kuvilla mitä tahdot. (Kati)

Jos sivullasi on vain vähän tekstiä ja viimeisin elementti loppuu jo sivun puolivälissä, CSS-määrittelyllä ”background-position: right bottom;” ei saakaan kuvaa sivun tyhjään alareunaan vaan se jää ylös. Jatkamalla sivun elementtejä kuva alkaa liukua kohti alalaitaa. (Sinikka)

Yleisimmät huolimattomuusvirheet

Puolipiste puuttuu CSS:ssä rivin lopusta (Noora)
Väärä sulku (CSS:ssä käytetään kaarisulkeita, jotka saa esiin AltGr+7 ja AltGR+0) tai sulku puuttuu (Pasi)
Välilyönti px:n edellä aiheutti herjan css:ssä (60 px -> 60px)
Pikselimäärittelyssä käyttää vahingossa nollan tilalla kirjainta o (Sanna)
Html:ssä kautta-viivan paikka saattaa nopeasti kirjoitettuna joutua väärälle puolelle (esim. <p/> eikä </p>) (Tatjana)

CSS-tiedosto ei muuta mitään
Tällöin CSS-tiedosto ei ole linkittynyt oikein. Tarkista ensimmäisenä, että tiedoston nimi on kunnossa. Jos olet kopioinut linkitysloitsun 3-tehtävän sivulta, joidenkin koneiden kohdalla “-merkit eivät koodieditorissa ole ne, mitkä pitäisi. Kokeile siis kirjoittaa ne koodieditorissa uudestaan. (Noora)

HTML, CSS ja PHP-koodilla on kullakin erilainen tapa erottaa kommenttiosiot, joita ei suoriteta, aktiivisesta koodista. Kommentoinnin tarkoitus on selventää muille kehittäjille mitä koodi tekee ja jäsentää sitä helpommin luettavaksi. Sitä voidaan käyttää myös ”kommentoimaan ulos” pätkiä joita ei haluta käyttää, mutta jotka pidetään näkyvillä yhteistä kehitystyötä varten (bugiset koodin pätkät, uudet ominaisuudet tms).

Kommentointi koodit muodostuvat aina aloittavasta ja päättävästä merkinnäistä joiden välissä voi olla miten pitkästi tahansa merkkejä joita ei käsitellä aktiivisena koodina.

HTML-koodissa kommentointi tehdään näin:

&lt;!-- kommentti --&gt;

CSS-koodissa vastavaa merkintä on:

/* kommentti */

PHP:ssä:

&lt;?php /* kommentti */ ?&gt;

Kommentoinnissa on tärkeää varmistaa että sen lopettava merkintä on oikein jottei kommentti jää auki. (Teemu)

Näköjään hieman muokkaantuu tuo ohje kun tekstin tallensin tänne. alkuperäinen teksti löytyy tästä linkistä. http://www.joomla.fi/component/k2/itemlist/tag/html%20css%20php%20kommentointi%20kommentti%20merkint%C3%A4%20k%C3%A4ytt%C3%B6 (teemu)