1. HTML5 Esittely
Mikä on HTML ?
HTML on merkkikieltä, jonka verkkoselain tulkitsee käyttäjän näkemään muotoon. Lyhenne HTML tulee sanoista Hypertext Markup Language. HMTL-merkkikieli koostuu erilaisista tageista, joista jokainen vastaa verkkosivuilla nähtäviä eri osia.
HTML Tunnisteet
HTML-koodit ovat avainsanoja jotka ympäröidään kulmasulkeilla :
<tagname> sisältö </tagname>
HTML-koodit ovat yleensä pareittain kuten <p> ja </p>
Ensimmäinen tagipari on alkutunniste, toinen tunniste on lopputunniste
Lopputunniste on kirjoitettu melkein kuin alkutunniste, mutta kauttaviivalla (jolla saadaan koodi loppumaan)
Web-selaimet
Selainten tarkoitus ( Chrome , IE , Firefox , Safari ) on lukea HTML-asiakirjoja ja näyttää ne .
Selain ei näytä HTML-tunnisteita, mutta käyttää niitä ja muokkaa ne käyttäjän näkemään muotoon :
Yleiset html tagit millä ilmoitetaan sivuston html muodot
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<tagname> sisältö </tagname>
HTML-koodit ovat yleensä pareittain kuten <p> ja </p>
Ensimmäinen tagipari on alkutunniste, toinen tunniste on lopputunniste
Lopputunniste on kirjoitettu melkein kuin alkutunniste, mutta kauttaviivalla (jolla saadaan koodi loppumaan)
Web-selaimet
Selainten tarkoitus ( Chrome , IE , Firefox , Safari ) on lukea HTML-asiakirjoja ja näyttää ne .
Selain ei näytä HTML-tunnisteita, mutta käyttää niitä ja muokkaa ne käyttäjän näkemään muotoon :
Yleiset html tagit millä ilmoitetaan sivuston html muodot
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Html merkkien selitys
DOCTYPE määrittelee asiakirjan tyypiksi HTML
Tekstin välillä <html> ja </html> kuvaa HTML-asiakirja
Tekstin välillä <head> ja </head> antaa tietoja asiakirjasta
Tekstin välillä <title> ja </title> säädetään asiakirjan otsikko
Tekstin välillä <body> ja </body> kuvaa näkyvää sivun sisältöä
Tekstin välillä <h1> ja </h1> kuvaa otsikkoa
Tekstin välillä <p> ja </p> kuvaa tiettyä teksin kohtaa
Eli tällä html koodinpätkällä, web-selain voi näyttää asiakirjan otsikon ja kappaleen.
Tekstin välillä <html> ja </html> kuvaa HTML-asiakirja
Tekstin välillä <head> ja </head> antaa tietoja asiakirjasta
Tekstin välillä <title> ja </title> säädetään asiakirjan otsikko
Tekstin välillä <body> ja </body> kuvaa näkyvää sivun sisältöä
Tekstin välillä <h1> ja </h1> kuvaa otsikkoa
Tekstin välillä <p> ja </p> kuvaa tiettyä teksin kohtaa
Eli tällä html koodinpätkällä, web-selain voi näyttää asiakirjan otsikon ja kappaleen.