HTML & CSS
Html
HTML eli hypertext markup language on (erityisesti) internet-sivujen kirjoittamisessa käytetty kieli. HTML ei ole varsinaisesti ohjelmointikieli, vaan ohjeet siitä miten selaimen tulisi teksti muotoilla (markup). Monilla sivustoilla (blogit, wikit, pedanet) on nykyisin omat editorit sivujen kirjoittamiseen, mutta ne kaikki käännetään loppujen lopuksi html-kielelle.
Html-kieltä voi kirjoittaa millä tahansa tekstieditorilla (esim. notepad (valmiina Windowsissa), Notepad++, Atom). Windowsin notepadia voi käyttää, mutta kehittyneemmissä editoreissa on hyödyllisiä ominaisuuksia kuten tekstin väritys komentojen mukaan (helpompi lukea koodia) ja koodin täydennys (nopeampi kirjoittaa).
Suomenkielisiä ohjeita löytyy esim. googlella. Englanniksi hyviä ohjeita esim. W3Schools.com, Codecademy.com, Khanacademy.com
Selaimessa toimivia editoreja: html5-editor.net, html-online.com/editor/, w3schools.com/tryit/
Html-kieltä voi kirjoittaa millä tahansa tekstieditorilla (esim. notepad (valmiina Windowsissa), Notepad++, Atom). Windowsin notepadia voi käyttää, mutta kehittyneemmissä editoreissa on hyödyllisiä ominaisuuksia kuten tekstin väritys komentojen mukaan (helpompi lukea koodia) ja koodin täydennys (nopeampi kirjoittaa).
Suomenkielisiä ohjeita löytyy esim. googlella. Englanniksi hyviä ohjeita esim. W3Schools.com, Codecademy.com, Khanacademy.com
Selaimessa toimivia editoreja: html5-editor.net, html-online.com/editor/, w3schools.com/tryit/
Ensimmäinen sivu
Avaa editori esim. Muistio (Notepad)
<body> ja </body> tagien väliin voi kirjoittaa erilaisia otsikoita <h1>,<h2>... ja tekstikappaleita <p>
- Pro-tip: paina näppäimistön windows-logoa ja ala kirjoittaa "note...", kun tietokone löytää muistion, paina enter
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>tänne</h1> <p>sisältö</p> </body> </html> |
* Kerrotaan selaimelle, että tämä on html-sivu * Kaikki komennot sisältävät avaus- ja sulkutagin * <head>: käyttäjälle yleensä näkymätöntä tietoa, "metadataa" sekä mahdollinen ikkunan yläosassa näkyvä sivun otsikko <title> * <body> -tagien väliin tulee kaikki sivun sisältö * Lopuksi kaikki tagit pitää sulkea! |
<body> ja </body> tagien väliin voi kirjoittaa erilaisia otsikoita <h1>,<h2>... ja tekstikappaleita <p>
- muista sulkea myös nämä tagit!
- esim. <h1>Tässä otsikko</h1>
- Huom! Edge ei suostu avaamaan html-tiedostoja U-asemalta. Klikkaa tiedostoa hiiren oikealla napilla -> Avaa sovelluksessa -> Chrome
Kuvat ja linkit
Kuvat
- Kuvan lisääminen html-sivulle onnistuu <img> -tagilla.
- Kuva voi olla valmiiksi netissä tai sen voi tallentaa samaan kansioon html-tiedoston kanssa.
- jos kuvia tulee paljon, kannattaa tehdä html-tiedoston kanssa samaan kansioon esim. "img"-niminen kansio
<img src="smiley.gif" alt="Smiley face" height="42" width="42"> |
|
esim. seuraava käsky lataa sivulle googlen logon<img src="https://www.google.fi/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png ">
|
Linkit
- Tekstin sekaan saa lisättyä linkkejä <a> -tagilla
<a href="http://www.kotka.fi/asukkaalle ">Kotkan kaupungin internetsivut.</a> Näyttää käyttäjälle tältä: Kotkan kaupungin internetsivut. Ja linkin jälkeen teksti voi jatkua normaalisti. |
|
Lisätietoa: Linkitys saman sivun sisällä
- tagi <a> tarkoittaa oikeasti ankkuria (anchor).
- tagilla <a name="ankkurin_nimi"> voidaan määrittää sivulla kohta johon voidaan linkittää suoraan
- ankkuriin viitataan <a href="#ankkurin_nimi ">linkin teksti</a>
- ankkuriin voi linkittää myös ulkopuoliselta sivulta <a href="http://www.sivusto.fi/sivu.html#ankkurin_nimi ">näin.</a>
- esim. Wikipediaan voi linkittää <a href="https://fi.wikipedia.org/wiki/HTML#HTML5 ">näin.</a>
esim. Wikipediaan voi linkittää näin.
- esim. Wikipediaan voi linkittää <a href="https://fi.wikipedia.org/wiki/HTML#HTML5 ">näin.</a>
Listat, taulukot ja upotus
Listat
- Numeroimattomat listat
- pallukoilla merkityn listan saa tehtyä <ul> ja </ul> (unordered list) tagien väliin
- uusi pallukka tulee aina <li> tagien väliin
- Numeroidut listat
- numeroitu lista tehdään samalla tavalla, mutta <ol> tageilla (ordered list)
Taulukot
- Taulukon saa tehtyä <table> ja </table> tagien väliin
- uusi vaakarivi alkaa tagilla <tr> (table row)
- uusi solu alkaa tagilla <td> (table data)
- esimerkki tulee joskus. Odotellessa klikkaa ylläolevasta <table> -linkistä w3schools-auki.
Upotus
- Sivulle voi laittaa myös muuta sisältöä kuin tekstiä ja kuvia (esim. youtube-videoita). Tätä sanotaan upottamiseksi. Monelta sivustolta löytyy valmiit koodit sisältöjen upottamiseen.
- esim. youtube: Klikkaa videon alta "Jaa" -> valitse "upota" -> kopioi koodi (<iframe...) sivullesi