abgx360.net
  • Home
  • Уроци
  • Сигурност
  • Новини и общност
  • Отзиви
RSS

HTML-i õpetus (algajatele)

07.06.2020 Jeffrey Wilson Kategooriat pole

HTML-i õpetus algajatele

HTML-i õpetus algajateleKas soovite õppida mõnda HTML-i?


See kõlab suurepärase ideena. Seetõttu oleme koostanud selle HTML-i õpetuse algajatele.

Tänapäeval on maailmas vähemalt 1,7 miljardit veebisaiti. Praktiliselt kõik need veebisaidid kasutavad ühel või teisel viisil HTML-i.

P.S .: Kui te ei soovi HTML-i õppida ja kohe oma veebisaiti looma, ilma et oleks vaja kodeerida, siis vaadake seda juhendit: Kuidas teha veebisaiti TASUTA (ilma HTML-i õppimata).

Contents

    • 0.1 Sissejuhatus HTML-i
      • 0.1.1 Mis on HTML?
      • 0.1.2 HTML-versioonid
      • 0.1.3 HTML-redaktori valimine
    • 0.2 HTML-i peamised ehitusplokid
      • 0.2.1 Sissejuhatus siltidesse
      • 0.2.2 Elementide tutvustus
      • 0.2.3 Sissejuhatus atribuutidesse
    • 0.3 Alustamine HTML-iga
      • 0.3.1 HTML-i loomine Element
      • 0.3.2 Pealkirjade loomine HTML-is
  • 1 kuni , koos silt, mis näitab kõige olulisemat rubriiki ja silt, mis näitab kõige vähem olulist rubriiki. Pealkirjade loomiseks peate lihtsalt otsustama, millist pealkirja loote, avage pealkiri tavalise pealkirja sildiga ja ärge unustage alati silte sulgeda, kui olete valmis. HTML-i pealkirjade näide: See on teie esimene HTML-i pealkiri
    • 1.1 See on teie teine ​​HTML-i pealkiri
      • 1.1.1 See on teie kolmas HTML-i pealkiri
        • 1.1.1.1 See on teie neljas HTML-i pealkiri
          • 1.1.1.1.1 See on teie viies HTML-i pealkiri
            • 1.1.1.1.1.1 See on teie kuues HTML-i pealkiri
      • 1.1.2 Pesastatud nimekirjad
      • 1.1.3 Hüperlingid
      • 1.1.4 Piltide kasutamine
      • 1.1.5 Tabelite loomine
      • 1.1.6 Tsitaadid HTML-is
      • 1.1.7 Kommentaaride kasutamine HTML-is
      • 1.1.8 Värvide kasutamine HTML-is
      • 1.1.9 IFramesi kasutamine HTML-is
      • 1.1.10 HTML-i fondid
    • 1.2 Järeldus

Sissejuhatus HTML-i


Mis on HTML?

Mis on HTMLHTML – hüperteksti märgistuskeele lühend – on arvutikeel veebisaitide ja veebirakenduste loomiseks. Koosnedes peamiselt koodifailidest, mis on tavaliselt kirjutatud tekstifaili ja salvestatud HTML-vormingus. HTML-keeles kirjutatud kood tõlgib brauseri kaudu ilusaks, hästi vormindatud tekstiks või teksti ja meediumi kombinatsiooniks.

HTML-i töötas esmakordselt välja Briti füüsik Tim Berners-Lee 1990. aastal ja sellest ajast alates on toimunud nii palju arendusi, et uusima versiooniga on võimalik saavutada palju enamat, kui keele esmakordsel leiutamisel ette kujutati..

Selles õpetuses tutvume HTML-i keele põhitõdedega ja kõigega, mida peate teadma HTML-i alustamiseks algajana.

HTML-versioonid

Esiteks – kõigi HTML-i versioonide kiire lammutamine pärast HTML-i leiutamist.

  • HTML 1.0: See oli HTMLi paljaste versioonidega versioon ja keele esimene väljalase.
  • HTML 2.0: See versioon võeti kasutusele 1995. aastal. See arenes järk-järgult, võimaldades lisavõimalusi, sealhulgas vormipõhine failide üleslaadimine, tabelid, kliendipoolsed pildikaardid ja rahvusvahelistumine.
  • HTML 3.2: Püüdes tagada standardite väljatöötamist veebis, asutas Tim Berners-Lee 1994. aastal veebikonsortsiumi (W3C). 1997. aastaks avaldasid nad HTML 3.2.
  • HTML 4.0: Hiljem, 1997. aastal, andis W3C välja HTML 4.0 – versiooni, mis võttis vastu palju brauseripõhiseid elementide tüüpe ja atribuute.
  • Hiljem anti HTML 4.0 uuesti välja 1998. aastal koos väiksemate muudatustega.
  • HTML 4.01: Detsembris 1999 vabastati HTML 4.01.
  • XHTML: Spetsifikatsioonid kehtestati 2000. aastal ja seda soovitati kasutada ühise standardina koos HTML 4.01-ga. See hõlmas XML-i, et tagada koodi korrektne kirjutamine ja programmeerimiskeelte koostalitlusvõime.
  • HTML5: W3C avaldas HTML5 soovitusena 2014. aasta oktoobris ja avaldas hiljem HTML 5.1 2016. aasta novembris.

HTML-redaktori valimine

Valige HTML-redaktorKui soovite luua veebilehti HTML-is, vajate HTML-redaktorit. HTML-redaktori kasutamisel on mitu eelist.

Hea HTML-redaktor hoiab teie koodi puhtana ja korrastatuna. Samuti tuvastab see uue sildi avamise ja selle automaatse sulgemise, et vältida lollaka koodi olemasolu ja vähendab selle tulemusel kirjutatava töö hulka. Enamik HTML-i redigeerijaid võimaldab teil teil oma WYSIWYG-funktsiooni abil oma veebilehte eelvaatena näha, kuidas see veebibrauseris välja näeb..

Seal on palju tasuta ja tasulisi HTML-i redigeerijaid, allpool on toodud mõned peamised valikud, mille hulgast saate valida.

  • HTML-komplekt
  • Kohvitass
  • Komodo Edit
  • Märkmik++
  • Sinikala
  • CodeLobster

HTML-i peamised ehitusplokid


Kui olete otsustanud kasutada HTML-redaktorit, on järgmine samm mõista HTML-i ehitusplokke. HTML-is kodeerimisel on oluline mõista neid ehitusplokke. Need hõlmavad silte, atribuute ja elemente. Vaatame neid allpool:

Sissejuhatus siltidesse

Kui olete HTML-i sisse jõudnud, peate kõigepealt mõistma silte. Sisuliselt eraldavad sildid tavalist teksti HTML-koodist.

Järelikult muudavad sildid HTML-i puhul vahet, kas teie dokumenti kuvatakse tavalise tekstina või „muudetud tekstina”, mis on põhimõtteliselt teksti kood, mis näib kuvavat rea asju (hüperlingid, pildid, meediumid või muu) vormindamismeetodid) selle põhjal, mida on kästatud siltide põhjal kuvada.

Vaatleme näitena sõna „ta on poiss”:

  • Tavalises tekstivormingus saate: Ta on poiss.
  • Paksus kirjas vormingus saate: Ta on poiss

Paksus kirjas vormingu saavutamiseks peate kasutama nuppu silt.

muutes teksti html-s paksuks

Toores HTML-is meil on Ta on poiss mida brauser siis tõlgib järgmiselt: Ta on poiss.

“Ta on poiss” võiks tulla ka kaldkirjas.

See saavutatakse kasutades silt.

muutes teksti kaldkirjas HTML-iga

Meil on: Ta on poiss mis siis välja tuleb kui Ta on poiss.

Hüperlingi abil saavutatakse silt.

teksti HTML-is hüperlingitud tegemine

Toores HTML-is on: Ta on poiss, kes näitab, et on poiss.

Siltide kohta peaksite mõistma mõnda asja:

  • Sildid on praktiliselt HTML-i alustala – HTML-i ei saa ilma siltideta teha! Kui olete kinnitunud, millist silti kasutada, siis tutvuge kindlasti meie HTML-i perioodilise tabeliga.
  • Peaaegu iga avatud silt peab olema suletud. Pidage meeles, et on ka erandeid. Sildi, mida ei pea sulgema, näide on tühi silt, näiteks reavahetus:
    .
  • Sildid sisalduvad vähem kui (““<”) and greater than (“>”) Nurksulg. Sulgevad sildid sisaldavad kaldkriipsut, mis saab enne sildi nime sulgemist. Näide avatud sildist: . Suletud sildi näide .
  • Iga HTML-fail algab avatava sildiga ja lõpeb sulguriga. HTML-faili esimesel real tuleks deklareerida dokumendi tüüp, nii et brauser teaks, millist HTML-i maitset te kasutate. Seetõttu näete, et HTML-lehed algavad tähega “”Enne HTML-koodi algust.

Enne sisu lisamist näeb enamik HTML-faile põhimõtteliselt välja selline:

HTML--

Järgmine jaotis Silt sisaldab tavaliselt teavet dokumendi kohta, näiteks selle pealkiri, metamärgendid ja CSS-faili leidmise koht – sisu, mis pole brauseri lehel otse nähtav. Jaotis „ ja”(Mida esindasime jaotisega„ PÕHISisu ”) asub HTML-faili peamine sisu, mida vaataja brauseris näeb. See hõlmab kõike alates esimesest lõigust kuni hüperlinkideni kuni multimeediumini ja kõik muu.

Elementide tutvustus

elementide tutvustus

HTML-is koosneb „element” ava- ja sulgemismärgendist, samuti siltide vahelisest sisust.

Jaotises „Ta on poiss”(Paksus kirjas) näide on meil see HTML-is: Ta on poiss. Teksti “Ta on poiss” ümbritseb avatud ja suletud silt. Element on kõik, kaasa arvatud avanev silt, sisu ja sulgev silt.

Kui silt avatakse, sisu tutvustatakse ja silt suletakse, on meil element.

Element võib olla põhivormis või keerulises vormis. Miks? Sest kõik, mis asub avatud ja sulgeva sildi ning nende siltide vahel, on element. See tähendab, et meil võivad elemendis olla elemendid. Meie praeguses näites „ta on poiss” (Ta on poiss) on element.

Võite märgata, et me ütlesime varem, et HTML-dokumendid sisaldavad sildistage enne sisu algust. Sisu võib sisaldada sadu erinevaid elemente, kuid kõik need elemendid on osa kehast (kuna põhielement on avatud, sisaldab sisu ja on siis suletud).

Sissejuhatus atribuutidesse

Kuigi HTML-dokumendid kasutavad põhimõtteliselt kõige jaoks silte, tahame mõnikord edastada elemendi siseselt lisateavet. Sel juhul kasutame atribuuti. Atribuuti kasutatakse elemendi omaduste määratlemiseks, seda kasutatakse elemendi avanevasildis. Atribuudid koosnevad nimest ja väärtusest.

Pange tähele, et atribuudi väärtus asetatakse jutumärki vormingut kasutades Teie tekst.

atribuudi näide

Näide:

Ta on poiss

Selles näites juhendame, et “Ta on poiss” on dokumendi keskele joondatud.

Alustamine HTML-iga


HTML-iga alustamineKui te alustate täna oma HTML-i põhidokumendi loomist, siis kuidas alustada? Lehepealkirjade loomisest vormide loomiseni juhendame teid allpool HTML-i kasutamise kohta.

HTML-i loomine Element

HTML-dokumendi loomisel on üks esimesi asju, mille loote: element. See sisaldab metaandmeid (või andmeid HTML-dokumendi kohta). See hõlmab teavet, näiteks märgikomplekti, dokumendi pealkirja, dokumendi stiile, skripte jne.

Mõned elemendid lisada pealkiri, mis on loodud koos silt.</p><p><strong>Näide</strong>:</p><pre><title>See on meie lehe pealkiri

See pealkiri kuvatakse brauseri vahekaardil. See indekseeritakse ka lehe pealkirjana, kui otsingumootori robotid teie veebisaiti indekseerivad.

See hõlmab ka element, mida kasutatakse sageli teabe täpsustamiseks, mida otsingumootorid saavad kasutada oma kirjete sisu kirjeldamiseks. See hõlmab kirjeldust, märksõnu, teavet autori kohta jne element määrab ka HTML-dokumendi kasutatava märgikomplekti.

Pealkirjade loomine HTML-is

rubriikide loomine HTML-is

Pealkirjad mängivad veebisaidi õnnestumises suurt rolli. Esiteks muudavad need lugejate jaoks hõlpsaks teie lehtede sisu skannimise. Teiseks – ja mis veelgi olulisem – edastavad nad teie veebilehtede struktuuri otsimootoritele ja mõjutavad seetõttu sageli teie sisu otsingumootori tulemustes järjestamist.

Sellegipoolest on oluline vältida pealkirjamärgendite kasutamist, et muuta oma tekst suureks või paksuks. Selle jaoks saab kasutada ka muid silte (mida me käsitleme hiljem selles jaotises). Selle asemel tuleks rubriigi silte kasutada ainult struktuuri jaoks.

HTML-is on kuus pealkirjasilti:

kuni

, koos

silt, mis näitab kõige olulisemat rubriiki ja

silt, mis näitab kõige vähem olulist rubriiki.

Pealkirjade loomiseks peate lihtsalt otsustama, millist pealkirja loote, avage pealkiri tavalise pealkirja sildiga ja ärge unustage alati silte sulgeda, kui olete valmis.

HTML-i pealkirjade näide:

  • See on teie esimene HTML-i pealkiri

    (suurima)

  • See on teie teine ​​HTML-i pealkiri

  • See on teie kolmas HTML-i pealkiri

  • See on teie neljas HTML-i pealkiri

  • See on teie viies HTML-i pealkiri
  • See on teie kuues HTML-i pealkiri

Lõikude loomine

lõikude loomine HTML-is

Järgmine samm on lõikude loomine. Lõikeid saab luua rakendusega

silt.

Näide:

See on teie esimene lõik.

See on teie teine ​​lõik ja loote palju rohkem lõike.

Pidage meeles, et HTML-is kirjutamine erineb väga puhta teksti kirjutamisest. Seega, kui lõhestate HTML-is teksti ilma uut lõiku alustamata, pole vahet, kas teksti kuvatakse brauseris. Selle asemel soovite kasutada reavahetust, mida tähistab
silt.

Näide:

See on uus lõik. Ja ma tahan kasutada mitmeid uusi ridu. Nii et ma lõhun selle ära.

See ei tule välja järgmiselt:

See on uus lõik.
Ja ma tahan kasutada mitmeid uusi ridu.
Nii et ma lõhun selle ära.

Selle asemel tuleb see välja järgmiselt:

See on uus lõik. Ja ma tahan kasutada mitmeid uusi ridu. Nii et ma lõhun selle ära.

Niisiis, kuidas jaotada tekstid uutesse ridadesse nii, et see näeks järgmist:

See on uus lõik.
Ja ma tahan kasutada mitmeid uusi ridu.
Nii et ma lõhun selle ära.

Kasutades reavahetusi.

Näide:

See on uus lõik.
Ja ma tahan kasutada mitmeid uusi ridu.
Nii et ma lõhun selle ära.

Sellegipoolest on oluline märkida, et reavahetus (
) on tühi silt, nii et te ei pea seda sulgema.

Teksti vormindamine HTML-is

teksti vormindamine HTML-is

Järgmine samm on teksti vormindamine HTML-is. Siin saate näidata, kas soovite, et teie tekst ilmuks paksus kirjas, kaldkirjas, allajoonitud, allkirjastatud, ülakirjutatud jne. See on põhijuhend, nii et see jaotis ei ole vormindamiseks lõpp-punkt. Selle asemel lisame ainult mõned põhilised vormingusildid. Muude vormindamisvormide kasutamine on lihtne – leidke lihtsalt soovitud silt ja minge edasi:

Kasutades rasvases kirjas: Ta on poiss tuleb välja nagu Ta on poiss

Kaldkirja kasutamine: Ta on poiss tuleb välja nagu Ta on poiss

Teksti allajoonimine: Ta on poiss tuleb välja nagu Ta on poiss. Väärib märkimist, et silt oli HTML 4.01 aegunud ja muudeti uuesti, et see tähistaks HTML5 stilistiliselt erinevat teksti. Seetõttu on allakriipsutatud teksti märkimiseks soovitatav kasutada CSS-i. Kuna see artikkel on põhijuhend, peame seda lihtsaks.

Abonendi kasutamine: Ta on poiss tuleb välja nagu Ta on poiss

Ülkirja kasutamine: Ta on poiss tuleb välja nagu Ta on poiss

Muude siltide jaoks, mida saab vormindada, võiksite vaadata selle ressursi lõpus olevat sõnastikku, kuhu oleme lisanud palju asjakohaseid HTML-silte.

Tellitud ja järjestamata nimekirjad

Varem või hiljem peate looma loendeid. Nimekirju võib tellida (st nummerdada) või järjestamata (st nummerdamata).

Siin on näide tellitud loendist:

  1. 1. punkt
  2. Punkt 2
  3. Punkt 3

Selle loomise juhised on järgmised:

  1. 1. punkt
  2. Punkt 2
  3. Punkt 3

Siin on näide järjestamata loendist:

  • 1. punkt
  • Punkt 2
  • Punkt 3

Selle loomise juhised on järgmised:

  • 1. punkt
  • Punkt 2
  • Punkt 3

Kui see pole juba ilmne. Siin on jaotus:

  • silti kasutatakse iga loendi üksuse tähistamiseks. Loendi koostamisel võite kasutada nuppu
      silt, et näidata tellitud nimekirja (“o” = tellitud ja “l” = nimekiri) või

        silt, et näidata järjestamata nimekirja (“u” = järjestamata ja “l” = nimekiri). Sai kokku?

        Pesastatud nimekirjad

        Meil võib olla ka pesastatud loendeid või loendis olevat loendit.

        Näide:

        • 1. punkt
          • Üksus 1 pesastatud
          • Üksus 2 pesastatud
        • Punkt 2
        • Punkt 3

        Selle saab luua:

        • 1. punkt
          • Üksus 1 pesastatud
          • Üksus 2 pesastatud
          • Üksus 3 pesastatud
        • Punkt 2
        • Punkt 3

        Nagu näete, avate lihtsalt uue kirje sildi – tellitud (

          ) või tellimata (

            ) – sõltuvalt sellest, mida soovite enne pesastatava üksuse sulgemist.

            Hüperlingid

            HTML-is hüperlinkide loomine

            Veeb on üks massiliselt ühendatud lehtede võrk. Kui loote veebisaidi – kas sisemiselt või väljastpoolt või mõlemat -, peate linkima teistele lehtedele. Linki oma veebisaidi siselehele või veebis asuvale välisele lehele nimetatakse hüperlingiks. Kui tavaliselt lingivad inimesed teksti, saab linkida mis tahes HTML-i elemendi – näiteks pildi.

            silti kasutatakse linkide määratlemiseks HTML-is, atribuuti “href” kasutatakse lingi sihtkoha määramiseks. Enne silti sulgemist pannakse link pärast märki „võrdne” tsitaadiga.

            Näide:

            Hüperlingi loomiseks tuleb see välja: YOUR LINK TEXT SIIN ilmub välja nagu YOUR LINK TEXT SIIN

            Nüüd oletame, et lingite kohaliku failiga, kus kõik HTML-lehed asuvad samas kaustas. Sel juhul ei pea te lisama veebisaidi URL-i. Lisage lihtsalt failitee. Näiteks kui lingite failiga pealkirjaga about-page.html, muutub teie hüperlink OMA LINK TEKST SIIN, mis lingib faili about-page.html.

            Kui HTML-fail, millega soovite linkida, on kohalik, kuid kaustas, mis erineb põhikaustast, määrake lihtsalt faili tee. Näiteks kui fail asub kaustas „failid” põhidokumendi all, kus asub teie praegune dokument, läheb teie hüperlink midagi sellist OMA LINK TEKST SIIN

            Võib-olla soovite täpsustada, kuidas soovite linki avada, nt uues aknas / vahekaardil. Kasutate selleks sihtomadust.

            Näited:

            OMA LINK TEKST SIIN täpsustab, et link tuleks avada uuel vahelehel.

            OMA LINK TEKST SIIN täpsustab, et link tuleks avada samal vahekaardil.

            On ka teisi atribuute, mida saab kasutada lingi avamise eri viiside edastamiseks:

            • _blank – avamine uuel vahelehel.
            • _ Self – avage samal vahekaardil.
            • _ läbipaistev – avatakse vanemraamis
            • _top – avatakse akna täisosas
            • raami nimi – avage nimega raami

            Lingil võib olla ka pilt.

            Näide:

            Ta on poiss
            

            See käsib brauseril kuvada pilti, mis on tõmmatud pildifailist “images / html-tutorial-for-beginners-3.jpg”, ja lasta see lingida aadressile https://websitesetup.org. Atribuut „alt” tähistab seda, mida tuleks näidata, kui pilti ei saa kuvada (brauseri sätete või mõne muu kraami tõttu, mis takistab piltide kuvamist).

            Piltide kasutamine

            piltide kasutamine HTML-is

            Pildid lisatakse HTML-dokumendile koos silt. märgend on tühi silt, nii et seda ei pea sulgema.

            Näide:

            Ta on poiss

            See on põhinäide, mis ütleb brauseril HTML-dokumendiga samast kataloogist tõmmatud pildi pealkirjaga „images / html-tutorial-for-aloners-3.jpg” kuvamisele. Atribuut „alt” käsib brauseril kuvada teksti (tuntud kui „alternatiivne tekst”) nimega „Ta on poiss”, kui brauseri või Interneti-seaded takistavad brauseril mingil põhjusel piltide kuvamist. Kui soovite pilti tõmmata muusse kataloogi või välisele saidile, tuleks täpsustada täielik aadress / tee.

            Kui minna kaugemale põhitõdedest, võiksime pildi paremaks kohandamiseks kasutada ka muid atribuute. Näiteks atribuuti “style” saab kasutada laiuse, kõrguse või mõlema määramiseks.

            Näide:

            OMA ALTERNATIIVNE TEKST

            (kaldkirjas kursiiv „laius” ja „kõrgus” tuleks asendada pildi jaoks soovitud tegelike väärtustega „pikslites” (nt „20 pikslit”).)

            Tabelite loomine

            tabelite loomine HTML-is

            HTML-i süvenedes tahate õppida erinevaid viise, kuidas teavet organiseeritumalt esitada. Üks selline viis on tabelite kasutamine.

            Tabelid luuakse nupuga

            silt. Tabeli iga päis täpsustatakse koodiga

            (“Tabeli rida”). Seejärel kuvatakse tabeli andmed tähisega

            (“Tabeli päis”), kui iga rida on tähistatud märkega

            silt.

            Näide:

            Tabeli päis 1 Tabeli päis 2 Tabeli päis 3
            Sisend 1 päise 1 all Sisend 1 päise 2 all Sisend 1 päise 3 all
            Sisend 2 päise 1 all Sisend 2 päise 2 all Sisend 2 päise 3 all
            Sisend 3 päise 1 all Sisend 3 päise 2 all Sisend 3 päise 3 all

            See annab meile midagi sellist:

            tabeli näide 1

            Nagu näete, on meil laud küll pisut organiseerimata. Korraldamiseks saame koodile lisada veidi stiilivõtteid. Sel juhul suurendame laiust:

            Tabeli päis 1 Tabeli päis 2 Tabeli päis 3
            Sisend 1 päise 1 all Sisend 1 päise 2 all Sisend 1 päise 3 all
            Sisend 2 päise 1 all Sisend 2 päise 2 all Sisend 2 päise 3 all
            Sisend 3 päise 1 all Sisend 3 päise 2 all Sisend 3 päise 3 all

            Selle tulemuseks on midagi organiseeritumat:

            tabeli näide 2

            Võib-olla soovite minna kaugemale ja kasutada ääriseid, seada tabeli sisule horisontaalset või vertikaalset joondamist, tutvustada jagajaid, polstrit jms. Niisuguste asjade jaoks peate siiski õppima mõnda CSS-i. Peame seda õpetust põhiliseks ega hakka selles artiklis käsitlema.

            Tsitaadid HTML-is

            tsitaadid HTML-is

            Tsitaate on erinevat tüüpi ja neid tsitaate esindavad erinevad elemendid.

            Põhihinna pakkumine on järgmine näide:

            See on proov. Ja Siin on meie tsitaat

            See tuleb välja järgmiselt: see on näidis. Ja “siin on meie tsitaat”

            Kui kasutate sildi lisamisel lisatakse jutumärgid automaatselt sellele, mis on sildi sisse suletud.

            Võite kasutada ka jutumärke, mida tehakse ka klahvidega

            silt.

            Näide:

            See on proov. Ja

            Siin on meie blokeering. Selles näites proovime näidata, kuidas teksti vormindada, et HTML-is osutada plokkkoodile. See erineb tavalistest jutumärkidest selle poolest, et tegelikku "tsitaadi" sümbolit võib sõltuvalt CSS-i stiilist lisada või mitte, kuid tekst on esile tõstetud.

            See näeb välja selline:

            plokkvite näide 1

            Kommentaaride kasutamine HTML-is

            Mis tahes vormingus kodeerimisel on oluline õppida, kuidas oma koodi kommentaare lisada. Kommentaare kasutatakse teie koodi korraldavamaks muutmiseks. Asjade hõlbustamiseks võite lisada endale meeldetuletuse või märkuse teistele.

            Esialgu ei pruugi see tunduda oluline, kuid kui hakkate kirjutama sadu või tuhandeid koodiridu ja kui asjad tunduvad keeruliseks muutuvat, tulevad kommentaarid kasuks.

            Brauser ei näita kommentaare vaatajale. Pidage meeles, et neid saab näha lähtekoodis.

            Kommentaare saab kasutada ka kõikjal koodis. Nad ei muuda teie koodi funktsiooni mingil viisil.

            Kommentaari lisamiseks avage sulg, sealhulgas kahekordne sidekriips, lisage kommentaar, sealhulgas teine ​​kahekordne sidekriips, ja sulgege seejärel sulg.

            Näide:

            Väärib seda ka märkimist, eriti silumisel, saate kommenteerida koodiridu. Nii jääb kood dokumenti, kuid ei tööta, kuna olete seda kommenteerinud.

            Näide:

            Sel ajal kui “Ta on poiss” peaks ilmuma julgelt, oleme seda juba kommenteerinud ja brauser ignoreerib seda. Selles stsenaariumis, mis puutub brauserisse, pole meil midagi.

            Seda saab kasutada ka nii:

            Tema poiss mis näitab Ta poiss. Seda seetõttu, et kommenteerisime välja “on a”. Püüame teile lihtsalt näidata, et praktiliselt kõike, nii elemendis kui ka väljaspool, saab kommenteerida. Võite lisada märkuse oma kommentaari viitamiseks – see ei muuda kuvatava olemust.

            Värvide kasutamine HTML-is

            värvide kasutamine HTML-is

            Varem või hiljem soovite kasutada HTML-dokumendi teatud elementide tähistamiseks värve. Seda saab teha kolmel peamisel viisil: HEX-väärtusega, RGB-väärtusega või värvi nimega.

            Värvi kasutamine HTML-is toimub tavaliselt stiili atribuudiga.

            Näide 1:

            See on sinine värv

            Kasutades sinise värvi HEX väärtust “# 0000FF”, kästame brauseril näidata teie teksti (antud juhul “see on sinine värv”), kasutades sinist värvi.

            Näide 2:

            See on roheline värv

            Me juhendame, et tekst tuleks RGB väärtuse abil rohelisena esile tõsta.

            Näide 3:

            See on kollane värv

            Kasutades HSL-i väärtust, palusime, et tekst oleks esiletõstetud kollase värviga.

            Näide 4:

            See on oranži värv

            Kasutame HTML-i värvinime (antud juhul „oranž” – mille me koodis kursiiviga esile tõstsime), et paluda teksti esiletõstmine oranži värviga. Ilmselt on see teostatav ainult nende tekstide puhul, mille värvinimesid teate, ja see võib olla keeruline teatud värvivarjundite puhul, mida saab hõlpsasti teha HEX-koodi või RGB-väärtusega. Sõltumata sellest võite leida nimekirja 140 HTML-i värvinime koostanud HTML värvikoodid.

            Arusaadavalt pole teil kõigi värvide kohta kogu vajalikku teavet – näiteks HEX-kood, RGB-väärtus jne. Ärge paanitsege – värvi valija W3koolid on suurepärane tööriist, mis võimaldab teil valida mis tahes värvi ja näitab kogu teavet selle värvi kohta, sealhulgas HEX-kood, RGB-väärtus ja HSL-i väärtus.

            IFramesi kasutamine HTML-is

            HTML-dokumendis saab faili manustamiseks aktiivsesse dokumenti kasutada iFrame’i (inline frame). Sisuliselt saate seda kasutada mõne muu veebisaidi või sisu kuvamiseks praegusel veebisaidil.

            Näide:

            Ülaltoodud koodiga käsime brauseril kuvada https://websitesetup.org sisu kaadris otse selle lehe sees.

            Iframe-kaadreid saab kasutada veebisaidi, video, piltide või muu sisu kuvamiseks.

            Selle kood on lihtne:

            (lihtsalt asendage „URL” selle veebisaidi / sisu lingiga, mida soovite kuvada.)

            Lisaks saate kohandada, et täpsustada iframe’i teatud väärtused, nt kõrgus ja laius.

            Näide:

            Me käsime brauseril kuvada iframe, kasutades kõrgust 350 pikslit ja laiust 400 pikslit.

            HTML-i fondid

            kasutades HTML-is fonte

            Tõhusate HTML-dokumentide loomisel on oluline mõista fontide toimimist. Ühe puhul on fontide abil teksti suuruse määramine lihtne. See hõlbustab ka teie sisu värvi ja näo (või fondi “tüübi”) määramist.

            Teie HTML-dokumendis kasutatava fondi märkimiseks peate kasutama silt. Fondi suuruse, fondi värvi või fondi näo saab määrata atribuutide „suurus”, „värv” või „nägu” abil.

            Seadistatav suurus – näide:

            Kuvage see tekst, kasutades fondi suurust 6

            Selles näites ütleme brauserile, et ta näitaks oma teksti, kasutades fondi suurust 6. Oluline on arvestada, et aktsepteeritud kirjasuuruste vahemik on 1 kuni 7. Kõik, mis ületab 7, kohandatakse automaatselt fondi suurusega 7. Vaikimisi fondi suurus on 3.

            Fondi värv – näide:

            Kuva meie tekst sinise värviga

            Me kasutame silt, et paluda brauseril kuvada meie tekst sinise värviga. Sel juhul kasutasime HTML-i värvinime (“sinine”). Kui soovite, võib selle asendada HEX-koodiga või RGB-väärtusega.

            Fondi esikülg – näide:

            Kas eelistate Times New Romans’i asemel Verdana? Selle määrate järgmiselt:

            Kuvage see tekst lahkelt Verdana kirjas

            Me käsime brauseril kuvada meie tekst Verdana kirjas. Fondi nimiväärtust saate lihtsalt muuta, et näidata mis tahes fonti, mida soovite kasutada.

            Alternatiivsed fondi näod:

            Oluline on arvestada, et inimesed näevad teie teksti teie valitud kirjas näidatava tekstina ainult siis, kui neil on see font arvutisse installitud. Kui ei, kuvatakse vaikimisi fondi nägu – tavaliselt Times New Roman. Sel põhjusel on tungivalt soovitatav kasutada veebiturvalisi fonte.

            See võib aidata kaasata nii palju alternatiivseid fonte kui võimalik. Sel viisil saate isegi muid fonte tähtsuse järjekorras määratleda, isegi kui neil pole teie peamist fondi nägu. Seda tehakse koma kasutamisega.

            Tagasi meie näite juurde:

            Kuvage see tekst kõigepealt Verdana kirjas või Helvetica, Arial või Comic Sans ... sellises järjekorras, kui peamine font pole saadaval

            Me käskisime brauseril teksti Verdanas näidata. Kui Verdana pole saadaval, võib vaikimisi Times New Romansile naasmise asemel näidata Helvetica või Arial, kui Helvetica pole saadaval, või Koomiks Sans, kui Arial pole saadaval..

            Järeldus

            Kokkuvõtteks võib öelda, et HTML on keerulisem kui see, mis teil selles juhendis on. Ärge loobuge lootusest – kui suudate selles juhendis sisalduvatest põhimõistetest aru saada, olete hea alguseni jõudnud. See on nagu keele ABC tundmine ja kõik muu muutub palju lihtsamaks.

            Kui lugesite selle õpetuse läbi eesmärgiga luua uimastamist pakkuv veebisait, on meil pettumus kahju – see lihtsalt ei tööta nii. See on põhiline HTML-i õpetus. See aitab teil välja töötada sihtasutuse, millele saaksite tugineda. Võite olla kindel, et silmapaistva veebisaidi loomiseks kulub märkimisväärselt rohkem pingutusi – ja sageli ka keelte kombinatsiooni kasutades palju arendusaega -.

            WordPressi abil, mida oleme veebisaidi loomise juhendis väga detailselt käsitlenud, saate mõne minutiga valmis arvestatava veebisaidi.

            HTML-ressursid

            • HTML-i perioodiline tabel – see loetleb kõik HTML-sildid perioodilise tabeli kujul, muutes nende õppimise / kasutamise lihtsaks.
            • W3koolid / sildid – Kõigi tähestikuliselt järjestatud HTML-siltide loend.
            • Mozilla / HTML omistatud – Kõigi tähestikulises järjekorras olevate HTML-i atribuutide loend.
            • HTML-i petuleht
            • HTML-värvikoodid / värvinimed – 140 HTML-värvinime loetelu, sealhulgas HEX-kood, RGB-väärtus ja HSL-väärtus.

            Jeffrey Wilson Administrator
            Sorry! The Author has not filled his profile.
            follow me
              « Kuidas WordPressi kiirendada » Φύλλο εξαπάτησης JavaScript

              Random Posts

              • Прости съвети за WooCommerce за увеличаване на продажбите
              • Maps Marker Pro Plugin für WordPress Review
              • Къде да намерите помощ с WordPress
              • Veebisaitide tüübid (näited)
              • 3 WordPress приставки за цялостно овладяване на социалните медии
              • Moderování komentářů WordPress: Průvodce pro začátečníky
              • WordPress vs Drupal:哪个是您网站的最佳平台?
              • Доказани начини да увеличите процента на реализация със социално доказателство
              • Guia pas a pas per iniciar un bloc de WordPress el 2020
              • NextGEN Gallery WordPress插件评论
              • WordPress Toolkit: WordPress ресурси за потребители и разработчици
              • Kas ma saan BlueHostiga Paypaliga maksta?
              • PřeložitPress Průvodce překladem WordPress
              • Revisió de complements de WordPress Uncanny Automator: automatitzeu els vostres fluxos de treball com un professional
              • 25+ nejlepších elementárních WordPress Témat roku 2020
              • Μπορώ να πληρώσω το InMotion με χρεωστική κάρτα;
              • 8 съвета за създаване на съдържание с продължителна форма с WordPress
              • Sådan bruges Wix (selvstudie)
              • Consells senzills de WooCommerce per millorar la vostra botiga
              • 25+ parimat WordPressi teemat
              • Kuidas oma veebisaiti üle viia FatCow-st InMotion-i
              • iThemes Exchange: Überprüfung des E-Commerce-Plugins
              • 2020年最佳WordPress团队展示插件
              • Mikä on datakeskus?
              • Nejlepší zásuvné moduly WooCommerce pro váš internetový obchod
              • Suurimmat 3 tai maatunnuksen ylätason verkkotunnukset
              • 5 вида поддръжка, на която се нуждае всеки уеб дизайнер
              • 10 инструмента за улесняване на работата с WordPress
              • Sådan tilføjes en e-mail-nyhedsbrev-abonnement til dit websted
              • Lader WebHostingHub dig eje dit websted?
              • Jak začít s WordPress: 2020 Guide
              • Десет възможни причини защо посетителите напускат уебсайта Ви
              • Ευχρηστία ιστότοπου 101
              • Опростете вашето онлайн присъствие с WordPress: Създаване на вашия бизнес
              • 5 ключови предимства от използването на CDN за вашия уебсайт WordPress
              • WebHostingHubi juhtpaneeli juhend
              • Toolkit de WordPress: recursos de WordPress per a usuaris i desenvolupadors
              • Jak vytvořit web Small Business WordPress
              • Το InMotion σας επιτρέπει να κατέχετε τον ιστότοπό σας;
              • Как да архивирате вашия WordPress сайт (ръчно или чрез приставки)
              • Getwid –用于古腾堡的可自定义WordPress块
              • Guide WHOIS privé BlueHost
              • Εύρεση πελατών σχεδιασμού ιστοσελίδων (7 βήματα)
              • Jak začít web časopisu News pomocí WordPress v 10 jednoduchých krocích
              • Популярни приставки за WordPress за добавяне на категории и маркери
              • 20 steder, hvor du kan lære at kode gratis
              • Tipy k lepší organizaci webu WordPress
              • Comment configurer un panier sur WebHostingHub
              • Über 20 Frauen in WordPress, denen Sie folgen sollten
              • Revue de Wix
              • SiteGround GoGeek Review 2020 (70% rabatkupon)
              • WordPress vs Joomla vs Drupal
              • Booknetic:WordPress预约与预订
              • Erstellen Sie einen Online-Shop mit Shopify für WordPress
              • 45+在线商店的最佳电子商务WordPress主题
              • Uncanny Automator WordPress Преглед на приставките: Автоматизирайте работните си процеси като професионалист
              • Как да използвате приложения за съобщения, за да увеличите трафика към вашия WordPress сайт
              • Дейности извън сайта за разрастване на вашия уебсайт WordPress
              • Què és el caché de WordPress i per què és important?
              • 自动化您的WordPress网站的社交媒体帐户-一劳永逸!
              • 10 bezplatných pluginů WordPress pro správu redakčního workflow
              • Nejúžasnější autorský box: Nejlepší řešení pro autorský box pro WordPress?
              • Guide d’inscription à WebHostingHub
              • 如何将您的WordPress网站翻译成多种语言
              • Fórum bbPress pro WordPress: Stručný průvodce
              • Jak NENÍ zabezpečit váš web WordPress
              • Verwenden von Markdown mit WordPress: Ein Leitfaden für Anfänger
              • Erweitern Sie Ihr LearnDash-Schulungsgeschäft mit mehreren Lehrern
              • WordPress mit PHP 7 – Warum Sie Ihren Server aktualisieren sollten
              • 10 nejlepších zásuvných modulů WordPress
              • 8 Плъгини, които правят отстраняване на неизправности WordPress лесно
              • 使用WordPress众筹您的项目
              • 12 excel·lents aplicacions i extensions de Chrome que podeu utilitzar per a WordPress
              • SiteGround PayPal -maksu (opas) »Voinko maksaa PayPalilla?
              • Els errors més habituals de SEO de WordPress in situ
              • MailPoet vs MailChimp pro e-mailový marketing WordPress
              • 使用Visual Form Builder WordPress插件免费创建高级表单
              • Използване на Markdown с WordPress: Ръководство за начинаещи
              • Dokonalý průvodce SEO pro vaše produkty WooCommerce
              • Ist Akismet immer noch das beste Spam-Plugin für WordPress?
              • 10+ съвета за увеличаване на доверието и достоверността на вашия WordPress блог
              • 使用DesktopServer创建和部署WordPress客户端站点
              • So fügen Sie WordPress Brotkrumen hinzu und warum es wichtig ist
              • Разрушаване на бариерите: Защо достъпността на уебсайтове на WordPress е ключова
              • Tendències de vídeo el 2020 per impulsar el màrqueting de vídeo de WordPress
              • 5 WordPress приставки, които могат да увеличат ангажираността на читателите във вашия WordPress блог
              • Taula de productes de WooCommerce: millora la vostra botiga i augmenta les vendes
              • So optimieren Sie WooCommerce und verbessern die Site-Leistung
              • Видео SEO съвети, за да извлечете максимума от вашите WordPress видеоклипове през 2020 г.
              • Monarch Review: Social Sharing WordPress Plugin von ElegantThemes
              • Kan jeg oprette et godt sted med BlueHost?
              • Com complir el vostre lloc de WordPress
              • MapSVG Review Plugin: crea mapes interactius a WordPress
              • WordPress-Marketing-Trends: Ein Fokus auf Higher Touch-Verkaufsprozesse
              • 使用重力形式为WordPress创建民意调查
              • GoDaddy WordPress Hosting Review und Leitfaden
              • Consells per descartar el vostre lloc web de WordPress per millorar el rendiment
              • Anfängerleitfaden zum Herumspielen mit WordPress (kein Code erforderlich)
              • Kas InMotion lubab teil oma saiti omada?
              • SiteBuilder.com ülevaade

              Follow us

              • facebook
              • twitter
              • dribbble

              ↑

              • Home
              • Уроци
              • Сигурност
              • Новини и общност
              • Отзиви
              Adblock
              detector