See Selgitatud veebisaidil asuv artikkel õpetab koostama lihtsat veebilehte HTML-iga (hüperteksti märgistuskeel). HTML on üks World Wide Web põhikomponente, moodustades veebilehtede struktuuri. Kui olete oma veebilehe loonud, saate selle salvestada HTML-dokumendina ja vaadata seda oma veebibrauseris. HTML-lehe loomine on võimalik nii Windowsi kui ka Maci arvutites leiduvate tavaliste tekstiredaktorite abil.
1
Avage tekstiredaktor. Windowsi operatsioonisüsteemiga arvutis kasutate tavaliselt Notepadi või Notepad++, samas kui macOS-i kasutajad kasutavad TextEditi ja ChromeOS-i kasutajad teksti: Windows – avage Start , tippige märkmik või notepad++ ja klõpsake nuppu Notepad või Notepad++ või sublime ” akna ülaosas.macOS – klõpsake nuppu Spotlight , tippige teksti redigeerimine ja topeltklõpsake tulemuste ülaosas valikut TextEdit.ChromeOS – avage käivitusprogramm, seejärel klõpsake nuppu Tekst. (Ikoonil on kirjas Code Pad).
2
Sisestage ja vajutage sisestusklahvi ↵. See annab veebibrauserile teada, et tegemist on HTML-dokumendiga.
3
Tippige ja vajutage sisestusklahvi ↵. See teie HTML-koodi avamärgend.
4
Sisestage
5
Sisestage
6
Tippige oma veebilehe pealkiri. See võib olla mis tahes pealkiri, millele soovite oma veebilehe nime panna.
7
Sisestage ja vajutage sisestusklahvi ↵. See on märgend pealkirjasildi sulgemiseks.
8
Tippige ja vajutage sisestusklahvi ↵. See on silt pea sulgemiseks. Teie HTML-kood peaks välja nägema umbes selline.
9
Sisestage suletud märgendi “Head” alla
10
Sisestage
. See on märgend HTML-dokumendile pealkirja lisamiseks. Pealkiri on suur paksus kirjas tekst, mis tavaliselt asub teie HTML-dokumendi ülaosas.
11
Sisestage oma lehe pealkiri. See võib olla teie lehe pealkiri või tervitus.
12
Tippige päise teksti järele
ja vajutage sisestusklahvi ↵. See silt sulgeb teie pealkirja. Lisage töö käigus täiendavaid pealkirju. Siltide
kuni
abil saate luua kuus erinevat pealkirja. Need loovad erineva suurusega pealkirju. Näiteks kolme järjestikuse erineva suurusega pealkirja loomiseks võite kirjutada järgmise:
Tere tulemast minu lehele!
Minu nimi on Bob.
Loodan, et teile meeldib see siin.
Pealkirjad näitavad teksti prioriteetsust või tähtsust. Kuid kõrgemat pealkirja ei ole vaja kasutada, kui soovite kasutada madalamat pealkirja. H3 saab otse kasutada, isegi kui teie postituses pole H1.
13
Tippige
. See on lõigu avamise silt. Lõigu teksti kasutatakse normaalsuuruses teksti kuvamiseks.
14
Sisestage mõni tekst. See võib olla teie veebilehe kirjeldus või muu teave, mida soovite jagada.
15
Tippige teksti järele
ja vajutage sisestusklahvi ↵. See märgend lõigu teksti sulgemiseks. Järgmine on näide HTML-i lõigu tekstist:
See on minu lõik.
Saate lisada mitu lõigurida järjest, et luua lõikude seeria ühe pealkirja all. Saate muuta teksti värvi mis tahes teksti raamides ja siltidega. Sisestage kindlasti oma eelistatud värv jaotisesse “värv” (jutumärgid jäävad alles). Selle siltide komplekti abil saate muuta mis tahes teksti (nt päised) erinevaks värviks. Näiteks lõigu teksti siniseks muutmiseks kirjutage järgmine kood:
Vaalad on majesteetlikud olendid.
Saate lisada paksu kirja, kaldkirja ja muud teksti HTML-i kasutades vorminguid. Järgnevalt on toodud näited teksti vormindamise kohta HTML-märgendite abil:paks tekstkaldkiriallakriipsutatud tekstallindeks Üleindeksi tekstKui kasutate rõhutamiseks, mitte ainult stiiliks paksus ja kaldkirjas teksti, kasutage ja asemel elemente ja . See muudab teie veebilehe hõlpsamini mõistetavaks, kui kasutate selliseid tehnoloogiaid nagu ekraanilugeja või mõnes brauseris pakutav lugejarežiim.
16
Lisage oma lehele pilt. Saate lisada oma HTML-i pildi, järgides järgmisi samme: Sisestage pildimärgendi avamiseks
17
Link teisele lehele. Saate oma HTML-ile lingi lisada, järgides järgmisi samme: lingisildi avamiseks tippige Facebook.
18
Lisage oma HTML-i reavahetus. Saate lisada reavahetuse, tippides oma HTML-i
. See loob horisontaalse joone, mida saab kasutada lehe erinevate osade jagamiseks.
19
Vaadake ametlike HTML-i värvinimede ja koodide loendit. World Wide Web Consortium (W3C) haldab ametlikku värvide loendit, mille leiate aadressilt https://www.w3.org/wiki/CSS/Properties/color/keywords. Igal värvil on ametlik nimi, 6-kohaline kuueteistkümnendkood ja kümnendväärtus. Saate kasutada mõnda neist väärtustest oma veebilehe elementidele värvi lisamiseks. Selle näite puhul kasutame ametlikke värvinimesid.
20
Määrake märgendis
21
Määrake mis tahes sildi teksti värv. Saate kasutada ka atribuuti style, et määrata, millist värvi soovite kogu konkreetse sildi tekstil olla. Oletame näiteks, et soovisite muuta mõne oma
sildi teksti midnightblue’iks:
Värvimuutus mõjutab ainult selle
märgendi teksti. Kui käivitate hiljem teise
sildi, mis peaks samuti olema midnightblue, peate seal määrama ka stiiliatribuudi.
22
Määrake päise või lõigu taustavärv. Sarnaselt kehasildi taustavärvi määramisega saate määrata ka teistele siltidele taustavärvi. Oletame, et soovite muuta
helehalli taustavärvi ja H1-stiilis päise taustavärvi heletaevasiniseks, kasutaksite järgmist:
23
Keha sulgemiseks tippige. Kui olete HTML-dokumendi kehasse kogu teksti, piltide ja muude elementide lisamise lõpetanud, lisage HTML-dokumendi põhiosa sulgemiseks see silt HTML-dokumendi allossa.
24
HTML-dokumendi sulgemiseks tippige. See silt läheb sildi alla, et sulgeda HTML-dokumendi lõpus teie HTML-tekst. See ütleb veebibrauserile, et pärast seda sildi pole enam HTML-koodi. Kogu teie HTML-dokument peaks välja nägema umbes selline:
Tere tulemast minu lehele!
See on Selgitatud fännileht. Tunne end nagu kodus!
Olulised kuupäevad
15. jaanuar 2019 – Selgitatud sünnipäev
Lingid
Siin on Selgitatud link: Selgitatud
25
Teisendage oma dokument lihttekstiks (ainult Maci kasutajad). Klõpsake ekraani ülaosas menüükäsku Vorming, seejärel klõpsake tekkinud rippmenüüs käsku Make Plain Text. See samm pole Windowsis vajalik ega võimalik.
26
Klõpsake nuppu Fail. See asub ekraani ülaosas menüüribal.
27
Klõpsake nuppu Salvesta kui. See asub “Fail” all olevas rippmenüüs. Teise võimalusena võite selleks vajutada klahvikombinatsiooni Ctrl+S (Windows) või ⌘ Command+S (Mac).
28
Sisestage oma HTML-dokumendi nimi. Tippige tekstiväljale “Faili nimi” (Windows) või “Nimi” (Mac) mis tahes nime, mille soovite oma dokumendile nimetada.
29
Muutke dokumendi failitüüpi. Peate muutma dokumendi tekstifailist HTML-failiks. Failitüübi muutmiseks toimige järgmiselt. Windows – klõpsake rippmenüüd „Salvesta tüübina”, klõpsake nuppu Kõik failid ja tippige faili nime lõppu .html. MacOS – asendage lõpus olev .txt failinime asemel .html.ChromeOS – klõpsake nupul „Salvesta nimega”. Nimetage faili lõpus .html. Algus on teie otsustada.
30
Klõpsake nuppu Salvesta. See on akna allosas. Seda tehes luuakse HTML-fail. HTML-failid avanevad tavaliselt teie vaikeveebibrauseriga.
31
Sulgege oma tekstiredaktor. Siinkohal olete valmis avama oma brauseris HTML-faili, et saaksite oma veebilehte vaadata.
32
Avage brauseris HTML-dokument. Enamikul juhtudel saate selleks HTML-dokumendil topeltklõpsata. Kui dokumendil topeltklõpsamise tulemuseks on tõrge, toimige järgmiselt. Windows – paremklõpsake dokumenti, valige Open with ja klõpsake soovitud brauserit. Mac – klõpsake dokumendil üks kord, klõpsake nuppu Fail, valige Open With ja klõpsake oma eelistatud brauser.
33
Vajadusel redigeerige HTML-dokumenti. Võite märgata oma HTML-lehel viga. Selle muutmiseks saate redigeerida HTML-dokumendi teksti: Windowsis saate dokumendil paremklõpsata ja avanevas rippmenüüs klõpsata nuppu Redigeeri (kui teil on installitud Notepad++, on selle asemel tekst Redigeeri Notepad++ abil). , soovite selle valimiseks klõpsata dokumendil, klõpsake nuppu Fail, valige Ava koos ja klõpsake nuppu Tekstiredigeeri. Samuti saate dokumendi lohistada rakendusse TextEdit. Sulgege Chromebookis rakendus Text, avage Failid, otsige üles oma fail ja seejärel klõpsake sellel.