Tässä lyhyessä “HTML – perusteet” johdatuksessa kerromme kuinka saat tietokoneesi muotoilemaan tekstisi haluamallasi tavalla. Tekstisisältö joka on menossa verkkoon kirjoitetaan usein HTML:llä joten on tärkeää osata vähintään sen perusteet lukemalla johdatus aiheeseen. Tämä artikkeli on ABC-oppaasi koodin maailmaan. Oleellisinta HTML:n ymmärtämisessä on tietää että perusteksti kuten tämä, näyttää HTML-muodossa tältä: <tag>perusteksti</tag>
Mikä on tunniste eli tägi?
Ylläolevassa esimerkissä “tag” on kuvaaja joka määrittelee tekstiä jollain tapaa. Huomaa että tekstit alkavat aina aloitustägillä “<tag>” ja päättyvät lopetustägiin “</tag>”. Alla on muutama HTML:n perusasia tägeistä:
HTML elementit alkavat aina aloitustunnisteella eli tägillä
HTML elementit päättyvät aina lopetustunnisteeseen
HTML perusteet
Tägit antavat ensisijaisesti “käskyjä” tekstiäsi koskien. Tägin avulla editoidaan ja niiden mukaisesti tekstiisi saadaan seuraavat kolme päämuotoa:
Otsikko: <h1>Tämä on pääotsikko</h1>. HTML tunnistaa 6 erityyppistä otsikkoa, <h1> – <h6>. <h1> viitaa yläotsikkoon ja <h6> alimpaan alaotsikkoon. On tärkeä muistaa sisältää hakusanasi <h1> ja <h2> otsikkoihin.
Kappale: <p>Tämä on kappale</p>
Linkki: <a href=”url“>Linkki teksti</a>. Esimerkkilinkki kuten klikkaa W3Schools näyttää HTML-muodossa tältä: <a href=”http://www.w3schools.com/”>Klikkaa W3Schools</a>. Jos haluat linkin avautuvan uuteen selainikkunaan tai uudelle välilehdelle, voit muuttaa koodia lisäämällä sinne ” target=”_blank” ” jolloin linkkisi näyttäisi tältä: <a href=”http://www.w3schools.com/” target=”_blank”>Klikkaa W3Schools</a>
Tägejä käytetään myös tekstin muotoiluun. HTML tarjoaa siis hyvät mahdollisuudet tekstin editointiin verkossa, seuraavassa esimerkkejä:
Rivinvaihto: <br>
Lihavoitu teksti: <b>bold</b>
Kursiivi: <i>italics</i>
Tärkein asia koodista on tietää ettei tägejä saa muuttaa, koska se muuttaisi koko tekstiä. Alla on lisää hyödyllisiä linkkejä HTML perusteet -osion jatkoksi: