Html näidised.
Html baasmärgised
Lihtne Html dokument
Kõige lihtsam lihtsam Html kodeering mida brauser loeb ja kuvab vastavalt.
Lihtne paragrahv
Siin on näha mismoodi töötab <p> (paragrahv) element.
Veel paragrahve
Näide sellest kuidas brauser ignoreerib Html koodi lisatud tühikuid ja lause poolitusi.
Teksti jätkamine uuelt realt
<br> elemendi kasutamine selleks, et poolitada lauseid ja jätkata teksti uuelt realt.
Pealkirja märgis
Näidises saab selgeks mismoodi teha veebidokumenti erineva suurusega pealkirju.
Keskele nihutatud pealkiri
Pealkirja nihutamine paremale v. keskele "align" atribuudi abil.
Horisontaal joone lisamine
Horisontaaljoone lisamine veebidokumenti. (Võimaldab organiseerida teksti eraldi sektsioonideks mis hõlbustab orjenteerumist veebilehel)
Kommentaar Html koodis
Niimoodi saab lisada kommentaare Html kodeeringusse selleks, et hiljem oleks hõlpsam teha muudatusi ja täiendusi oma veebidokumenti.
Tausta värvi lisamine
Atribuut "bgcolor" on oluline disaini element mis võimaldab lisada veebilehele erinevaid värve.
HTML Teksti kujundamine
Teksti kujundamine
Siin on mõned näited kuidas muuta teksti kuju, suurust, paksust jne.
Kujundamata tekst
Kasutades <pre> elementi, kuvab brauser teksti tühikud ja lause v. teksti poolitused täpselt nii nagu Html koodis.
Erinevad arvutipõhised teksti kujundamis märgised
Nende elementide lisamisel valib arvuti missugust teksti vormingut ta kasutab.
Aadressi lisamine
Niimoodi saab Html koodis kirjutada aadressi.
Abreviatuurid ja akronüümid
Teksti suund
Heebreakeelset teksti kirjutatakse ja loetakse paremalt vasakule. Seda toimingut teostab brauser siis kui lisame Html koodi vastava elemendi.
Jutumärgid ja tsitaadid
Jutumärgid ja tsitaadid on olulised elemendid teksti kujundamisel.
Teksti paikamine
Mõnikord on vaja tekstis teha parandusi aga nii, et need jääksid vaatajale nähtavad.
Erimärgised
Erimärgiste abil saab kujutada mitmesuguseid sümboleid (kasutatakse html kodeeringus) mis kuvatakse nii nagu nad välja näevad.
HTML Lingid
Kuidas luua hüperlinki
Niimoodi saab veebidokumendis muuta teksti lingiks
Pilt lingina
Niimoodi saab veebidokumendis muuta pildi lingiks
Link avaneb uues brauseri aknas
Selles näites demonstreeritakse, kuidas link avaneb uues aknas, seega külastaja ei pea lahkuma sinu veebisaidilt.
Linkimine samal leheküljel
Selles näites demonstreeritakse, kuidas link viib uude kohta samal veebilehel.
Raamistusest väljumine
Selles näites demonstreeritakse, kuidas väljuda raamistusest, juhul kui sinu sait on raamistuses kinni.
Kuidas teha meili-linki
Selles näites demonstreeritakse, kuidas luua meili-linki (ainult juhul kui meiliredaktor on installeeritud).
Veel üks meili-link
Veidi keerulisem meili-link
HTML raamistused
Vertikaalne raamistus
Nii saab luua vertikaalset raamistust kolmest eri dokumendist.
Horisontaalne raamistus
Nii saab luua horisontaalset raamistust kolmest eri dokumendist.
<noframes> märgis
Kuidas kasutatakse <noframe> märgist.
Segatud raamistus
Nii saab kombineerida tulpasid ja ridu raamistuses.
Kindla kujuga ("noresize") raamistus
Hiirekursoriga üle raamistuse liikudes on näha, et raamistuse kuju ei saa muuta.
Navigatsioon raamistuses
Navigatsiooni raamis on linkide nimekiri millede sihtmärgiks on kõrvalolev raam.
Raamistus Html lehekülje sees (Inline frame)
Kuidas luua "inline" raamistust Html dokumendi sisse.
Kindlaksmääratud koht raamistuses
Link liigutab raamis oleva sisu valitud kohale.
HTML tabelid
Lihtne tabel
Kuidas luua lihtsat tabelit Html dokumenti
Erinevad tabeli äärised
Erinevad tabeli äärised
Ääristeta tabel
Niimoodi saab luua tabeleid milledel puuduvad äärised.
Pealkirjad tabelis
Sedasi luuakse pealkirju tabelisse.
Tühjad lahtrid
Tühiku märgise kasutamine tühjade lahtrite loomiseks.
Tabeli alapealkiri
Näide sellest kuidas luua tabelitele alapealkirju.
Tabeli lahtri ulatus
Lahter ulatub üle mitme tulba v. rea.
Märgised tabeli sees
Kuidas kasutada Html märgiseid tabeli sees.
Lahtri sisu ja tabeli äärise vahe (Cell padding)
Lahtri sisu ja tabeli äärise vahelise kauguse seadmine
Lahtrite vahekaugus (Cell spacing)
Lahtrite omavahelise kauguse seadmine
Tausta värvi v. pildi lisamine tabelisse
Nii saab muuta tabeli tausta värvi.
Tausta värvi v. pildi lisamine tabeli lahtrisse
Nii saab lisada pilte tabeli lahtrisse.
Sisu nihutamine tabeli lahtris
Sisu nihutamine tabeli lahtris
Raami atribuudi kasutamine
Tabeli raamistuse seaded
Raami ja äärise atribuudi kasutamine
Tabeli äärise ja raamistuse seaded.
HTML nimekirjad
Korrastamata nimekiri
Korrastatud nimekiri
Erinevad korrastatud nimekirjad
Erinevad korrastamata nimekirjad
Pesastatud nimekiri
Pesastatud nimekiri 2
Nimekiri definitsioonidega
Selles nimekirjas on terminitele lisatud definitsioonid.
HTML Vormingud
Tekstiväljad
Tekstivälja loomine Html dokumendis. Loodud väljale saab kasutaja kirjutada oma teksti.
Parooliväljad
Nii saab luua paroolivälju Html dokumenti.
Kontrollkastid
Kuidas luua kontrollkaste Html dokumenti.
Raadionupud
Niimoodi saab luua raadionuppe Html dokumenti.
Rippnimekiri
Niimoodi saab luua Html dokumenti ripp-nimekirju. Selles näites on nimekirjas on võimalik teha ise valikuid.
Ripp-nimekiri koos määratud valikuga
Niimoodi saab luua Html dokumenti ripp-nimekirju, milledes on juba autori poolt pakutud valikud.
Suur tekstiväli
Niimoodi saab luua suurt tekstivälja.
Nupp
Nupp, milles on sinu enda tekst.
Pealkirjaga ääris
Siin on näha mismoodi <fieldset> elemendi lisamisel joonistub kast ümber elemendi sees oleva sisu.
Tekstiväli ja sisestus nupp
Mismoodi lisada vormingut veebilehele. Selles vormingus on kaks sisestusvälja ja üks sisestusnupp.
Kontrollkastid ja sisestus nupp
Selles näites kasutatakse vormingus kontrollkaste ja sisestusnuppu.
Raadionupud ja sisestus nupp
Selles näites kasutatakse vormingus raadionuppe ja sisestusnuppu.
Label (märgitud ala vormingus)
Mismoodi "label" määratleb kontrolli vormingu üle.
Mailto: vorming
Selle vorminguga on võimalik saata oma meiliaadressi kellelegi
HTML Pildid
Pildi lisamine
Kuidas kuvatakse pilte veebilehel.
Pildi lisamine teisest kaustast
Kuidas lisada pilte serverist v.teisest kaustast.
Tausta pilt
Veebilehe kujundamine tausta-pildi abil.
Pildi nihutamine
Kuidas paigutada pilti teksti suhtes.
Pildi hõljumine (float)
Niimoodi saab pilti hõljutada paragrahvist paremale v. vasakule.
Pildi suuruse muutmine
Niimoodi saab pildi suurust muuta Html dokumendis.
Alternatiiv-tekst
Alternatiiv-teksti lisamine pildile. (Juhul kui brauser ei suuda pilti leida v. allalaadida).
Pilt lingina-2
Niimoodi saab pilti kasutada lingina, mis viib uuele veebilehele.
Pildikaart (Image map)
Pilt mille erinevad regioonid on lingid.
HTML taustad
Hästi valitud tausta ja teksti värv
Niisugust teksti on külastajal kerge lugeda
Halvasti valitud tausta ja teksti värv
Niisugust teksti on külastajal raske lugeda
Hea tausta pilt
Niisugune pilt on hästi valitud.
Halb tausta pilt
See pilt on halvasti valitud.
HTML stiilid
Stiilid Html'is
Nii lisatakse stiili informatsioon "head" sektsiooni.
Allajoonimata link
Stiile kasutades saame teha nii, et lingid leheküljel jäävad allajoonimata. Kui stiile ei ole määratud, siis lisatakse allajoondused vaikimisi.
Link välisele stiililehele
Kuidas kasutada <link> märgist, mis viitab välimistele stiililehtedele.
HTML <head> näited
Dokumendi tiitel
Tiitli info, mis asetseb "head" elemendi sees, kuvatakse ekraani tiitelribal.
Kõigi linkide sihtmärk
Kuidas määrata leheküljel olevate linkide sihtmärki.
HTML <meta> näited
Dokumendi kirjeldus
Informatsioon <meta> elemendi sees kirjeldab dokumendi sisu.
Dokumendi märksõnad
Informatsioon <meta> elemendi sees kirjeldab dokumendi märksõnu.
Kasutaja ümber suunamine
See näide demonstreerib kuidas kasutajat ümber suunata kui aadress on muutunud.
HTML <script> näited
Skripti lisamine
Siin on näha mismoodi saab sisestada skripti Html dokumenti.
Brauser mis ei toeta skripti
Kuidas toimida brauseris mis ei toeta skripti.
