HTML tähistab HyperText Markup Language. See on üks elementaarsemaid programmeerimiskeeli, mida kasutatakse peamiselt veebidisainis. See võib alguses tunduda pisut keeruline, kuid tegelikult on see üks lihtsamaid programmeerimiskeeli, mida ka õppida. See Selgitatud õpetab kirjutama põhilist HTML-i. Varsti saate luua oma suurepäraseid veebisaite käsitsi.
1
Avage tekstiredaktor. HTML-i kirjutamiseks saate kasutada mis tahes tekstiredaktorit, mis oli teie süsteemi eelinstallitud. Windowsis saate avada Notepadi. Macis avage TextEdit. Kasutage tekstiredaktori avamiseks järgmisi samme: Windows: klõpsake Windowsi ikoonil Start. Tippige “Notepad”. Klõpsake Notepad. Mac: klõpsake paremas ülanurgas suurendusklaasil. Tippige otsinguribale “TextEdit” ja vajutage sisestusklahvi . Klõpsake nuppu Uus dokument.
2
Tippige lehe tippu . See silt ütleb veebibrauserile, et dokumendi tüüp on HTML-dokument.
3
Klõpsake nuppu Fail. See asub ülaosas menüüribal.
4
Klõpsake nuppu Salvesta kui. See asub menüüs “Fail”. Macis klõpsake lihtsalt nuppu Salvesta.
5
Tippige dokumendile nimi. Soovite luua oma veebisaitide iga veebilehe jaoks eraldi HTML-dokumendi. Paljudel veebisaitidel on esileht pealkirjaga “index.html”, kuid võite sellele nimetada ükskõik mida. Sisestage “Faili nimi” kõrvale failinimi, millele soovite dokumendile nime panna.
6
Muutke faililaiendiks .html. Vaikimisi salvestab Notepad failid “.txt”-failidena ja TextEdit salvestab failid “.rft”-failidena. Kasutage ühte järgmistest sammudest, et salvestada dokument HTML-dokumendina: PC: kasutage rippmenüüd “Save as type:” kõrval ja valige “Kõik failid (*,*)”. Seejärel kustutage käsitsi failinime lõpus olev laiend “.txt” ja asendage see laiendiga “.html”. Mac: klõpsake salvestusakna allosas valiku “Failivorming” kõrval olevat rippmenüüd. Seejärel klõpsake rippmenüüs valikul “Veebileht (.html)”. See lisab failinime lõppu automaatselt laiendi “.html”.
7
Klõpsake nuppu Salvesta. See salvestab dokumendi HTML-dokumendina. Nüüdsest, kui peate oma töö salvestama, klõpsake lihtsalt nuppu Fail ja seejärel nuppu Salvesta.
8
Tippige järgmisele reale. See on teie HTML-dokumendi avamärgend. See peaks asuma teisel real pärast märgendit ““. See silt annab veebibrauserile teada, et järgmine tekst on HTML-vormingus.
9
Vajutage paar korda ↵ Enter ja tippige. See annab mõned tühjad read ja lisab seejärel avamärgendi “” lõpumärgendi. HTML-is on kõigel ava- ja lõpumärgend. Kui loote uue HTML-märgendi, peate alati meeles pidama sulgeva sildi lisamist. Muidu see ei tööta. “” peaks alati jääma dokumendi ülaossa ja märgend “” peaks alati jääma dokumendi alla. Ülejäänud HTML-kood jääb nende kahe sildi vahele.
10
Sisestage kolmandale reale
11
Vajutage ↵ Sisestage tüüp
12
Tippige veebilehe pealkiri. Saate sisestada oma veebilehele mis tahes soovitud pealkirja. See peaks tulema vahetult märgendi „
14
Vajutage ↵ Enter ja tippige. See silt sulgeb HTML-dokumendi pea. Kui soovite dokumendi päisesse midagi muud lisada, sisestage see kindlasti siltide “
15
Tippige pea järele
16
Vajutage kaks korda sisestusklahvi ↵ ja tippige. See annab ruumi enne HTML-dokumendi põhiosa sulgemist. Seda ruumi saate kasutada oma HTML-dokumendi sisu kirjutamise alustamiseks. Kogu teie veebilehe sisu kirjutatakse märgendite “
17
Päise lisamiseks tippige kehasse
. Kogu teie HTML-dokumendi sisu jääb siltide „” ja „” vahele. Silt “” on päise kirjutamise avamärgend. HTML-is saate kasutada kuut erineva suurusega päisesilti. “” on suurim päis ja “” on väikseim päis.“, kuvatakse suures päisevormingus. Kui soovite, et teie lehe pealkiri oleks ülaosas suurte tähtedega, kirjutage ““, millele järgneb pealkiri.
” on suurim päis ja “” on väikseim päis.“, kuvatakse suures päisevormingus. Kui soovite, et teie lehe pealkiri oleks ülaosas suurte tähtedega, kirjutage ““, millele järgneb pealkiri.
“, millele järgneb pealkiri.
19
Päisesildi sulgemiseks tippige
. Kui te ei soovi, et kogu teie HTML-dokumendi tekst ilmuks päisevormingus, peaksite päisesildi sulgema. Päise sulgemiseks tippige päise teksti järele “
“.
20
Reavahetuse lisamiseks tippige
. Kui soovite mõne teksti järele tühiku lisada, tippige “
“. See loob teksti katkestuse ja lisab uue rea. Saate sisestada märgendi “
” nii paljudele ridadele kui vaja. Reavahetuse silt on üks väheseid HTML-märgendeid, mis ei vaja sulgevat silti.
21
Lõigu teksti lisamiseks tippige
. Kui soovite HTML-i lõiguteksti lisada, kasutage lõigu teksti avana märgendit “
“.
22
Sisestage lõigu tekst. Iga tekst, mille sisestate pärast märgendit “
“, vormindatakse lõigutekstina. Saate lisada nii palju teksti kui vaja.
23
Lõigu teksti sulgemiseks tippige
. Kui olete lõigu teksti kirjutamise lõpetanud, kasutage lõigumärgendi “
” sulgemiseks märgendit “
“.
24
Lisage HTML-i tekstisildile stye-element. Kui soovite oma märgendit veidi vürtsitada, võite sisestada HTML-i tekstisildi sisse “style=” ja seejärel lisada teksti stiilimiseks HTML-elemendi. Märgendile saate lisada mitu stiilielementi, eraldades need semikooloniga (;).Järgmised on mõned valikud, mida saate tekstisiltide stiili kujundamiseks kasutada: Värv: teksti värvi muutmiseks tippige “color:[värvi nimi” ];” HTML-i märgendi “style=” järel. Sisestage värvi tegelik nimi või kuueteistkümnendsüsteemis värvikood “[värvinimi]” asemele. Näiteks päise värvi punaseks muutmiseks tippige avamärgendiks
. Font: teksti fondi muutmiseks tippige “font-family:[fondi nimi];” HTML-i märgendi “style=” järel. Näiteks lõigu tekstiks Garamond muutmiseks tippige
. Oluline on meeles pidada, et kõikidele fondidele ei pääse ühestki arvutist juurde. Veebiturvalised fondid, mida saate kasutada, hõlmavad järgmist; Arial, Arial Black, Roboto, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Candara ja Impact.Teksti suurus: teksti suuruse muutmiseks tippige ” fondi suurus: [suurus protsentides (%) või pikslites (pikslites)];” HTML-i märgendi “style=” järel. Näiteks kui soovite muuta päise suuruseks 50 pikslit, sisestage
.
25
Loendi lisamine. Saate oma HTML-ile lisada nummerdatud või täpploendi. HTML-ile loendi lisamiseks järgige järgmisi samme: nummerdatud loendi alustamiseks tippige “
- ” või täpploendi alustamiseks “
- “. Loendiüksusele teksti lisamiseks kasutage märgendit „
”.Tippige loendiüksuse tekst. Loendis oleva üksuse tekstiosa sulgemiseks tippige
. Loendiüksuse märgendi sulgemiseks tippige “
- “. Uue loendiüksuse loomiseks tippige “
“. Korrake kõigi teiste loendiüksuste puhul. Loendi märgendi sulgemiseks loendi lõpus tippige “
” või “
“.
26
Vaadake oma HTML-dokument üle. Hea mõte on perioodiliselt oma tööd kontrollida. Kui te pole seda veel teinud. Jätkake ja salvestage oma töö. Seejärel paremklõpsake HTML-dokumendil ja valige Ava koos. Valige veebibrauser, et seda veebibrauseris vaadata. Seni peaks kogu teie HTML-kood välja nägema umbes selline:
Kuidas teha maapähklivõi ja tarretisega võileiba
Koostis:
- Maapähklivõi
- Tarretis
li>
- Leib
Määritage leivale maapähklivõi ja pange peale tarretis. Seejärel aseta peale leivaviil. Lõika see pooleks
27
Lisage keha taustale värvistiil. Kui soovite muuta keha taustavärvi, muutke märgendit “
28
Lisage pilt. Pildi lisamiseks oma veebilehele tippige . Asendage “[image url]” pildi veebiaadressiga. Näiteks “
“. Pildisildid ei vaja sulgevat silti. Saate reguleerida pildi suurust, lisades pildisildile “height=” ja “width=”, millele järgneb pildi kõrgus ja laius pikslites. Näiteks “”’Saate ka pildi tsentreerida, tippides avamärgendi
29
Lisage link teisele veebilehele. Veebikujunduses on oluline linkimine teistele veebilehtedele. Kasutage järgmisi samme, et luua link, millel inimesed saavad klõpsata, et nad suunataks teisele veebilehele: lingi märgendi käivitamiseks tippige Lingimise kohta lisateabe saamiseks klõpsake siin. Klõpsake siin, et õppige linkima.
30
Horisontaalse joone lisamiseks tippige
. Teksti temaatilise katkestusena saab kasutada horisontaalset joont. Horisontaalse joone lisamiseks tippige lihtsalt
. See silt ei vaja sulgevat silti.
31
Vaadake oma tööd üle. Kui olete oma HTML-dokumendiga olulisi edusamme teinud, salvestage see ja vaadake seda veebibrauseris, et näha, kuidas see välja näeb. Teie HTML-kood peaks välja nägema umbes selline:
Meist+++