5. HTML & CSShttps://peda.net/id/e312ee4acc72026-01-27T09:37:33+02:00https://peda.net/:static/539/peda.net.logo.bg.svg<div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div>
Yleistähttps://peda.net/id/e313ed3bcc72026-03-24T08:23:28+02:00<a href="https://www.google.fi/search?q=html" rel="noopener nofollow ugc" target="_blank">HTML</a> eli hypertext markup language on (erityisesti) internet-sivujen kirjoittamisessa käytetty kieli. HTML ei ole varsinaisesti <em>ohjelmointikieli</em>, vaan <em>ohjeet</em> siitä miten selaimen tulisi teksti <em>muotoilla</em> (markup). Monilla sivustoilla (blogit, wikit, pedanet) on nykyisin omat editorit sivujen kirjoittamiseen, mutta ne kaikki käännetään loppujen lopuksi html-kielelle.<br/>
<br/>
Html-kieltä voi kirjoittaa millä tahansa tekstieditorilla (esim. notepad (valmiina Windowsissa) tai <a href="https://notepad-plus-plus.org/" rel="noopener nofollow ugc" target="_blank">Notepad++</a> (koululla voi asentaa software centerin kautta).<br/>
<br/>
Notepad++:ssa kannattaa laittaa koodin täydennys päälle: Settings -> Preferences -> Auto-Completion -> "html/xml close tag"<br/>
<br/>
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).<br/>
<br/>
<h3>Opiskelu</h3>
HTML:llää voi opiskella valikosta löytyvien ohjeiden avulla tai verkosta löytyvillä kursseilla:<br/>
<ul>
<li>Jannen peda.net: <a href="https://peda.net/kotka/perusopetus/kotkansaaren-koulu/kt/oppiaineet/tietotekniikka/valinnaiset-2h/9lk-2022-23/5.-ohjelmointi/html/html2#top" class="uuid-20d01a10-d8bb-11ef-917d-6e9f894da45d">HTML</a>, <a href="https://peda.net/kotka/perusopetus/kotkansaaren-koulu/kt/oppiaineet/tietotekniikka/valinnaiset-2h/9lk-2022-23/5.-ohjelmointi/html/css#top" class="uuid-e3134997-cc74-11ed-9f76-f8f21e97e2d1">CSS</a>
<ul>
<li><span>Suomenkielisiä ohjeita löytyy esim. </span><a href="https://www.google.com/search?q=html+ohjeita" rel="noopener nofollow ugc" target="_blank">googlella</a><span>.<br/>
<br/>
</span></li>
</ul>
</li>
<li>Code.org: <a href="https://studio.code.org/s/csd2-2024" rel="noopener nofollow ugc" target="_blank">studio.code.org/s/csd2-2024</a></li>
<li><a href="https://www.w3schools.com/" rel="noopener nofollow ugc" target="_blank">W3Schools.com</a> -> not sure where to begin?
<ul>
<li>HTML <a href="https://www.w3schools.com/html/html_examples.asp" rel="noopener nofollow ugc" target="_blank">esimerkkejä</a> ja <a href="https://www.w3schools.com/html/html_exercises.asp" rel="noopener nofollow ugc" target="_blank">harjoituksia</a></li>
<li>sivuston julkaisu: <a href="https://www.w3schools.com/spaces/index.php" rel="noopener nofollow ugc" target="_blank">W3schools Spaces</a><br/>
<br/>
</li>
</ul>
</li>
<li><a href="https://www.codecademy.com/catalog/language/html-css" rel="noopener nofollow ugc" target="_blank">Codecademy.com</a></li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/html-css" rel="noopener nofollow ugc" target="_blank">Khanacademy.com</a></li>
</ul>
<br/>
Selaimessa toimivia editoreja: <a href="https://html5-editor.net/" rel="noopener nofollow ugc" target="_blank">html5-editor.net</a>, <a href="https://html-online.com/editor/" rel="noopener nofollow ugc" target="_blank">html-online.com/editor/</a>, <a href="https://www.w3schools.com/tryit/" rel="noopener nofollow ugc" target="_blank">w3schools.com/tryit/</a><br/>
<br/>
<h3>Julkaiseminen</h3>
Verkkosivun julkisemiseksi tarvitset nettiin kytketyn <a href="https://fi.wikipedia.org/wiki/WWW-palvelin" rel="noopener nofollow ugc" target="_blank">palvelimen</a> (tai siis tilaa palvelimelta) sekä osoitteen eli <a href="https://fi.wikipedia.org/wiki/Domain-nimi" rel="noopener nofollow ugc" target="_blank">domainin</a>. Et voi siis vain lähettää kaverille linkkiä omalla kovalevyllä sijaitsevaan tiedostoon. Myöskään O365:n onedrive ei sovellu sivujen julkaisemiseen. Ilmaisia palveluja voi etsiä vaikkapa googlaamalla "<a href="https://www.google.com/search?q=free+webhost" rel="noopener nofollow ugc" target="_blank">free webhost</a>" tai käyttämällä <a href="https://www.w3schools.com/spaces/" rel="noopener nofollow ugc" target="_blank">W3Schools Spaces</a>:ia. Julkaistavia sivuja voi helposti tedä myös erilaisilla blogialustoilla kuten <a href="https://www.google.com/search?q=wordpress" rel="noopener nofollow ugc" target="_blank">WordPress</a>:illä. Tällöin sivujen suunnittelu muistuttaa enemmän Wordilla kirjoittamista.2023-03-27T10:56:31+03:00