HTML tutorial

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: Jos pidit HTML oppaastamme, katso ja lue lisää tietoa portaalistamme oppiaksesi lisää kääntämisestä ja SEO:sta eli hakukoneoptimoinnista.

Reviews from Crowdpanthers

News Feed

Hei 2014 vuosi!
Hei 2014 vuosi!

Copypanthersin uusivuosi Me Copypantersilla otamme uudenvuoden avosylin ja avoimin mielin