HTML aloitusopashttps://peda.net/id/56cf8ee8e052019-09-26T15:01:14+03:00https://peda.net/:static/535/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>
Mitä on HTML?https://peda.net/id/ec56a06ce052020-10-27T09:48:59+02:00<h2>HTML on verkkosivujen merkintäkieli</h2>
HTML tulee sanoista HyperTextMarkingLanguage. Hyperteksti on tekstiä joka sisältä linkkejä muihin teksteihin. <br/>
HTML kieli kuvaa verkkosivun rakennetta ja sisältöä. HTML koostuu sarjasta elementtejä. Elementit kertovat selaimelle, kuinka sisältöä näytetään.<br/>
HTML-elementtejä esitetään <b>tunnisteiden</b> eli <b>tag</b>ien avulla.<br/>
HTML-tagien avulla merkitään sisältökappaleita, kuten "otsikko", "kappale", "taulukko" ja niin edelleen<br/>
Selaimet eivät näytä HTML-tunnisteita, vaan selain erottaa ne muusta sisältötekstistä erikoismerkkien < ja /> avulla.<br/>
<br/>
Voit kurkistaa, miltä HTML-koodi näyttää: Klikkaa hiiren 2. painiketta minkä tahansa www-sivun tyhjässä kohdassa ja valitse valikosta "Näytä sivun lähdekoodi". <br/>
<br/>
Html-koodia voi kirjoittaa aivan tavallisella tekstieditorilla. (Esimerkiksi Windowsin Muistio). <br/>
Erotuksena tavallisesta tekstitiedostosta jonka pääte on txt, täytyy html-tiedoston nimen loppuosassa olla pääte <b><em>html .<br/>
</em><br/>
</b>Vaikka Windows ei oletuksena tiedostopäätteitä näytäkään, joka tiedostolla on jokin pääte. Näin tietokone osaa avata tiedoston käyttäen oikeaa sovellusta. Eli kun tavallinen tekstitiedosto on nimeltään <em>nimi.txt</em> niin html-muotoinen tiedosto on <em>nimi.html</em>
<h3>Tiedoston tallentaminen</h3>
<h3>Esimerkki </h3>
Avaa Windowsin Muistio ja kopioi-liitä seuraava:<br/>
<hr></hr><code><!DOCTYPE html></code><br/>
<code><html></code><br/>
<code><head></code><br/>
<code><title>Selaimen välilehdessä näytettävä otsikko</title></code><br/>
<code></head></code><br/>
<code><body></code><br/>
<code><h1>Tässä on sivun isoin otsikko.</h1></code><br/>
<code><p>Tässä sivun tekstiä, niin kutsuttua leipätekstiä. </code><br/>
<code>Sitä on nyt vain yhden kappaleen verran.</code><br/>
<code></p></code><br/>
<code></body></code><br/>
<code></html></code><br/>
<hr></hr><br/>
Tallenna tiedosto nimellä <b>nettisivu.html<br/>
</b><br/>
<span class="medium"><a href="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/kuvapankki/sivuston-kuvat/i20201027094505#top" title="tiedoston_tallennus.PNG"><img src="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/kuvapankki/sivuston-kuvat/i20201027094505:file/photo/3d753b9be613d7aa540d38eff3d835138610f4ba/tiedoston_tallennus.PNG" alt="" title="tiedoston_tallennus.PNG" class="inline" loading="lazy"/></a></span><br/>
<br/>
Tämän jälkeen tiedosto näyttää resurssinhallinnassa kuvakkeeltaan erilaiselta kuin tavallinen tekstitiedosto. <br/>
<span class="medium"><a href="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/o2wt/html-aloitusopas/mik%C3%A4-on-html/tallennettu-png#top" title="tallennettu.PNG"><img src="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/o2wt/html-aloitusopas/mik%C3%A4-on-html/tallennettu-png:file/photo/642fcc9c37f65b2f50079925e43f172b8bbb9804/tallennettu.PNG" alt="" title="tallennettu.PNG" class="inline" loading="lazy"/></a></span><br/>
<br/>
Htlmtiedosto avautuu nyt oletusselaimella.<br/>
<br/>
Tehdessäsi muutoskia html koodiin, kannattaa pitää sekä selainikkuna että tekstieditori (Muistio) auki. <br/>
Kun teet muutoksen Muistiolla, tallenna Ctrl+s, siirry selainikkunaan ja päivitä näkymä painamalla F5.<span class="small"><a href="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/o2wt/html-aloitusopas/mik%C3%A4-on-html/refresh-png#top" title="refresh.PNG"><img src="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/o2wt/html-aloitusopas/mik%C3%A4-on-html/refresh-png:file/photo/f909e41cc411a3849acce450ad3b238d6cc76484/refresh.PNG" alt="" title="refresh.PNG" class="inline" loading="lazy"/></a></span>2019-09-26T15:19:44+03:00HTML -opas englanniksihttps://peda.net/id/6568b7a20982019-11-17T23:44:13+02:00<p>Opas eli tutoriaali mistä löytyy kaikki</p>
<p><a href="https://www.w3schools.com/html/default.asp" rel="nofollow ugc noopener">https://www.w3schools.com/html/default.asp</a></p>
2019-11-17T23:44:13+02:00