Igal pool, kus iganes Sa ei viibiks!
Twitter | Github | phpBB.com - Eesti | phpBBeesti.eu Foorum | Facebook | DISCORD Chat

demo32 (3.2 on arenduses) - demo31 (3.1 on praegune live versioon)

phpBB - 1 tarkvara - üle 100 laienduse - eesti keeles - t a s u t a
phpBB - lokaliseeritud aastast 2008*!
*Erinevate haldajate käe all. Vaata lehekülge meist.

Be Here, Be Now, Be INSIDE phpBB!

Welcome to phpBB Estonian Translation Team


Are you a fan of phpBB? Do you have enthusiasm for translation work? If you do, we would love to invite you to help us with phpBB volunteer translation. If you want to join our volunteer translation team, please contact us by FB/TW DM or at et.translations@phpbbeesti.net

[Õpetus] HTML algajale

Arutelud veebidisaini teemadel, mis kasutavad HTML / XHTML ja CSSi, ning üldistel graafika teemadel, nagu näiteks Photoshop ja teised.

Moderaator: Tugi

doozy
Postitusi: 409
Liitunud: 13 Mai 2014, 08:00
Asukoht: Tallinn
Sugu: Määratlemata

[Õpetus] HTML algajale

PostitusPostitas doozy » 24 Mai 2014, 14:24

HTML algajale
HTML koodi algajale mõeldud infoleht.




Tutvustus


HTML algajale on mõeldud eelkõige HTMLiga alustavatele inimestele. Koostatud on see kiire ülevaate jaoks ja toodud on ka mõned näited. Edukat õppimist.


Tähendus


HTML (inglisekeelne lühend sõnadest HyperText Markup Language 'hüperteksti ülestähendamise keel') on keel, milles märgendatakse veebilehti. HTML on SGML?i rakendus. HTML?keelsete failide Internetist allalaadimiseks ja vaatamiseks kasutatakse veebilehitsejat.


Sisukord


  • Tutvustus
  • Tähendus
  • Ülesehitus
  • Natuke terminoloogiast
  • Koodinäited
  • Vanema koodi näide
  • Esimese veebilehe loomine
  • Lihtsama lehe loomine (õpetus samm sammult)
  • Alustame pealkirjast
  • Lisame teksti
  • Rõhutame olulist
  • Lisame pilte
  • Lingime teisi lehekülgi
  • Mitmesugused loendid
  • Kirjutame luuletuse
  • Õppematerjalid


Ülesehitus


HTML?dokument koosneb elementidest, mille järgi brauser dokumendi sisu kuvab. Iga element on lehekülje lähtekoodis tähistatud vastavate märgendite abil. Kõik HTML?märgendid on ümbritsetud noolsulgudega < ja >. HTML?märgendid annavad brauserile teada, mida sisuga teha, mil moel seda vormindada ja kuvada. HTML märgendid on näiteks <p>, <ol>, <a> jne. Osad HTML?elemente võib sisaldada teisi elemente, näiteks: <ol><li>esimene</li><li>teine</li></ol>

Enamik HTML?märgendeid käib alati paaris: on alustav märgend ja on sulgev märgend, mida alustavast eristab kaldkriips / nurksulgudes elemendi nime ees, näiteks alustav ja sulgev tekstilõigu märgend on vastavalt <p> ja </p>. On ka elemente, mille märgendid on ühekordsed ega vaja sulgemist (<img>, <br> jm), on elemente, mille sulgemine pole HTML?i vanemates versioonides kohustuslik (<p>, <td> jt) ning esineb ka erandjuhtumeid, mille korral avatud märgendit ei pea sulgema, sest seda teeb mõni teine element. Viisakas komme on siiski avatud märgend kindlasti ka sulgeda.
Uuendatud, XHTML?i standardite järgi on kohustuslik sulgeda kõik elemendid, sealhulgas ka ühekordsed elemendid. Ühekordsete elementide sulgemine käib sel juhul sama märgendi sees kaldkriipsu lisamise teel: <br />, <img src="pilt.jpg" />.

Paljudele elementidele saab lisada parameetreid, mis antud elemendi esitamisviisi brauseri jaoks täpsustavad. Parameetrid kirjutatakse elemendi algusmärgendi juurde, noolsulgude sisse. Igal parameetril on tavaliselt mitu võimalikku väärtust või väärtusvahemikku. Kui parameetril väärtusvahemik puudub, siis jäetakse see tähistamata. Parameetrid eraldatakse märgendi põhitähisest tühikuga, samuti eraldatakse tühikuga üksteisele järgnevad parameetrist ja väärtusest koosnevad paarid. Parameetrite esitamise üldkuju on järgmine: <märgend parameeter="väärtus" parameeter2="väärtus">

Parameetrite arv sõltub konkreetsest elemendist. Kirja peab panema ainult need parameetrid, mille väärtusi tahetakse muuta erinevaks vaikeväärtustest. Enamikul parameetritest on olemas kindlad vaikeväärtused; erandiks on elemendid, mille otsene sisu määratakse märgendis toodud parameetritega (<img>, <a> jm) ning millel vaikeväärtus puudub. Parameetri väärtus on viisakas ümbritseda kas ühe? või kahekordsete jutumärkidega. Mõningate elementide parameetrite vaikeväärtused võivad sõltuda brauserist.


Natuke terminoloogiast


Veebilehel on lühidalt öeldes kaks peamist koostisosa ? sisu ja struktuur. Sisu all mõistame materjali, mida soovime lugejale esitada (tekst, pildid, helid), struktuuri all aga selle materjali ülesehitust ? lõigud, pealkirjad, tabelid jne.

Veebilehe struktuur antakse edasi HTML?i märgendite abil. Märgendid (inglise keeles tag) kirjutatakse < (väiksem?kui) ja > (suurem?kui) märkide vahele ning kasutatakse tüüpiliselt näiteks nii:
Siin on üks <strong>eriti tähtis</strong> asi ? "eriti tähtis" on paksus kirjas.

Märgendeid kasutatakse reeglina paarikaupa ? märgistatava tekstilõigu alguses ja lõpus. Lõppmärgend erineb algusmärgendist kaldkriipsu poolest märgendi alguses. Seega ülalolevas näites on <strong> algusmärgend ja </strong> lõpumärgend.

Algus ja lõpumärgend koos nende vahel asetseva tekstiga moodustavad elemendi. Seega eelmises näites on meil strong?element, mis tervikuna on selline: <strong>eriti tähtis</strong>.

Lisaks algus? ja lõpumärgendile kuuluvad HTML?i elementide juurde ka atribuudid ning nende väärtused.

Näiteks:
Siin on üks <strong title="vahva kirjeldus">eriti tähtis</strong> asi.

Siin on title atribuut ning tema väärtuseks on vahva kirjeldus. Nagu näha, siis on atribuut seotud oma väärtusega võrdusmärgi abil. Atribuudi väärtus peab aga alati olema jutumärkide vahel (alternatiivina võib kasutada ka ülakomasid ? ').

Peamised terminid selged, võime asuda oma esimese veebilehe koodi kallale.

Koodinäited
Kõige lihtsam HTML?is kirjutatud veebileht näeb välja selline:

Kood: Vali kõik

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="et">
<title>Tervitus</title>
</head>
<body>
<p>
Tere maailm!
</p>
</body>
</html>




Vanema koodi näide

Kood: Vali kõik

<HTML>
<HEAD>
<TITLE>Minu esimene veebileht</TITLE>
</HEAD>
<BODY>
<H1>Pealkiri</H1>
<P>Üks rida teksti...</P>
</BODY>
</HTML> 


Vastavalt programmeerimisest tuntuks saanud "Tere maailm" programmi tavale näeb seda lehekülge brauseriga vaadates teksti "Tere maailm!".

HTML ei ole programmeerimiskeel selle tavapärases mõttes, kuigi seda tihti niimoodi nimetatakse. Peamiseks ja vahest olulisimaks erinevuseks on see, et HTML on kirjeldav keel ning selles puuduvad tingimuslaused, muutujad ja teised programmeerimiskeeltele omased elemendid. HTML?is ei ole võimalik teostada tingimuste kontrolli ning vastavalt sellele valida üks või teine lahendustee (erandina võib olla see realiseeritud brauserispetsiifiliste laiendustena, näiteks Internet Exploreri nn tingimuskommentaarid).

Kuigi HTML?i süntaks ja käsustik on kogu maailmas ühtne, on paljud brauserid lisanud sellele omapoolseid laiendusi, mis tihtilugu ei tööta teiste brauseritega. Väikesi erinevusi on brauserite vahel ka ühtse koodi interpreteerimisel.

HTML lehekülgede täiustamiseks on loodud mitmeid lahendusi, millest tuntuimad on JavaScript, millega saab kasutaja brauseris jooksutada programmijuppe, ning CSS, millega kirjeldatakse lehe kujundus.




Esimese veebilehe loomine
Ava oma lemmik tekstiredaktor ja kopeeri ülaltoodud näites olev tekst sinna täht-tähelt ümber. Võid muidugi ka käsitsi kirjutada, aga kopeerides saab lihtsalt rutem.

Kui tekstiredaktor on sinu jaoks ebaselge termin, siis vali üks lihtne programm, millega saab harilikku tekstifaili kirjutada. Windowsi kasutajatele sobib selleks hästi Notepad, aga kindlasti mitte Word. Linuxi kasutajatel on reeglina palju mitmesuguseid tekstiredaktoreid: Vi, Emacs, pico, nano, Kate... - kõik need sobivad suurepäraselt.

Seejärel salvesta fail, andes talle nime, mille lõpus on ".html", näiteks "esimene.html".

Notepadi puhul vali "File" -> "Save As...".

  • Faili nimeks kirjuta "esimene.html",
  • Faili tüübiks määra "All files",
  • Faili kodeeringuks pane "ANSI"


ning kliki "Save".





Notepad'iga HTML faili salvestamine
Kui fail salvestatud, siis ava see oma veebibrauseris, näiteks tehes topeltkliki faili ikoonil või valides brauseri menüüst "File" -> "Open..." ning otsides üles vastava faili.

Kui kirjutasid faili täpselt selle teksti, mis näites toodud, siis avaneb brauseris üks suhteliselt tühi lehekülg lühikese igava tekstiga "dokumendi sisu". Kui vaatad brauseri tiitelribale (programmiakna kõige ülemisele ribale, mille paremas otsas on "X" nupp), siis seisab seal uhke tekst "Minu esimene veebileht".

Image

Veebilehe kuvamine MS Internet Explorer'iga
Järgnev peatükk räägib sellest, mida on võimalik kirjutada <body> ja </body> vahele.

Lihtsama lehe loomine (õpetus samm sammult)
Alustame pealkirjast
HTML?is on kuus erineva taseme pealkirja. Esimese taseme pealkiri on h1, teise taseme oma h2 jne kuni kõige madalama taseme pealkirjani h6. Täht "h" tuleneb inglisekeelsest sõnast heading ? pealkiri.

Siin on üks suur ja oluline pealkiri:


Kood: Vali kõik

<h1>Suur ja oluline pealkiri</h1> 



ning siin on üks madalama taseme pealkiri:


Kood: Vali kõik

<h2>Alapealkiri</h2> 



Lisame teksti
Tekst kirjutatakse reeglina lõikude kaupa. Raamatutes algab uus lõik taandreast, veebis taandridu enamasti ei kasutata ja lõikude vahele jäetakse rea jagu tühja ruumi. Lõiku tähistab element p (paragraph).


Kood: Vali kõik

<p>See on esimene lõik.</p>
<p>See on teine, natukene pikem lõik.</p>
<p>See on kolmas lõik, mis sisaldab klassikalist teksti:
"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat."</p> 



Rõhutame olulist
Teksti rõhutamiseks on element em (emphasis):


Kood: Vali kõik

<p>Peeter ja Tanel olid <em>erilised marakratid</em>.</p>
Tugevaks rõhutamiseks on element strong (strong emphasis):
<p>Esimese veebilehitseja looja on <strong>Tim Berners Lee</strong>.</p> 



Lisame pilte
Piltide lisamiseks on element img (image ? pilt), mille juures tuleb määrata pildifaili aadress src (source ? allikas) ning alternatiivtekst alt juhuks, kui piltide näitemine pole võimalik.
Kuna element img ei sisalda mingit teksti, siis selleks, et poleks tarvis kirjutada pikalt:


Kood: Vali kõik

<img src="kass.jpg" alt="minu ja minu kass"></img> 



on mugavam ja otstarbekam kasutada lühendatud kirjaviisi:


Kood: Vali kõik

<img src="kass.jpg" alt="minu ja minu kass" /> 



Lingime teisi lehekülgi
Lingid on need, mis teevad veebist selle, mis ta on ? üheainsa hiirevajutusega võid jõuda teisele poole maailma ning sama kiiresti tagasi. Lingi jaoks on märgend a (anchor ? ankur). Lisaks on tarvis määrata, millisele veebilehele me viitame, lisades vastava lehe täieliku aadressi.

Näiteks link phpBB.com lehele:


<p>Populaarseim foorumitarkvara on <a href="http://www.phpbb.com">phpBB</a>.</p>


Linkidega võib viidata ka omaenda veebilehe alamlehekülgedele. Kui teed veel ühe HTML?faili ja salvestad ta samasse kataloogi praegusega, siis võid sellele viidata järgneva lingiga:


Kood: Vali kõik

<p>Vaata ka minu tehtud <a href="teine.html">teist lehekülge</a>!</p> 



Muidugi eeldusel, et teise faili nimi on "teine.html".

Mitmesugused loendid
Mitmesuguste andmete jaoks nagu: sisukorrad, nimekirjad, jms, on hea kasutada loendeid.

Nummerdamata loendite jaoks on element ul (unordered list) ja

Nummerdatud loendite jaoks ol (ordered list).

Loendi elemendid märgitakse elemendiga li (list item).


Kood: Vali kõik

<h1>Sisukord</h1>
<ul>
<li>Sissejuhatus</li>
<li>Pealkiri 1</li>
<li>Pealkiri 2</li>
<li>Kokkuvõte</li>
</ul>
<h1>Kümnevõistluse tulemused</h1>
<ol>
<li>Mihkel Murakas</li>
<li>Karl Kopter</li>
<li>Toomas Muru</li>
<li>Peeter Saar</li>
</ol>



Kirjutame luuletuse
Arvatavasti oled märganud, et reavahetused ei avalda lehekülje välimusele brauseris vähimatki mõju. Üldiselt pole sellest lugu, aga mis siis, kui me tahame kirjutada midagi, kus revahetused esinevad ühe lõigu sees ? näiteks luuletust?

Reavahetuse tekitamiseks saame kasutada elementi br (break):


Kood: Vali kõik

<p>Igav liiv ja tühi väli,<br />
taevas pilvine;<br />
jõuan tulles metsa äärde,<br />
tuleb nõmmetee.</p>
<p>Pedak heleroheline,<br />
kask kuldkollane!<br />
Nõmm on sügisele<br />
langenud kaenlasse.</p> 

Mine “Veebidisain ja graafika.”

Kes on foorumil

Kasutajad foorumit lugemas: Registreeritud kasutajaid pole ja 1 külaline

phpBB Eesti : Lahtiütlus