Kuidas luua oma veebisait

Põhilehekülje saab kujundada HyperText Markup Language (HTML) abil. Skripte saab kirjutada Notepadis või tekstidokumendis sõltuvalt kasutatavast operatsioonisüsteemist. Veebisaidi loomiseks kasutatavad väga põhilised tööriistad algavad HTML- koodide ja HTML- elementide kasutamisega . Esimesed on sageli kasutatud sisu ühiku kohta teabe edastamiseks ja viimaseid kasutatakse veebilehe tööriistade vormindamiseks. Kodeerimise ajal kasutatakse HTML- atribuute ja väärtusi teabe edastamiseks, näiteks sisu paigutamine, kõrgus jne. Lisaks nendele võib kasutada erksate veebilehtede loomiseks värvimärgiseid, piltmärgiseid ja HTML-i jaotusmärgiseid.

Kuidas luua oma veebisait

  • Mis on HTML?
  • Nõuded
    • Näide 1:
  • HTML-märgised
  • HTML-elemendid
  • Peamised meelespea HTML-märgised
    • Näide 2
  • HTML atribuudid ja väärtused
    • Näide 3
  • Värvimärgised
    • Näide 4
  • Teksti vormindamine
    • Näide 5
  • HTML jaotise märgised
    • Näide 6
  • Pildi märgendid
    • Näide 7
  • Siltide sidumine
    • Näide 8
  • Tabeli sildid
    • Näide 9
  • HTML kaadri sildid
    • Näide 10
  • WYSIWYG tarkvara

Veebisaidi loomisel otsustavad paljud inimesed saada veebi disainerit. Siiski on lihtsad viisid, kuidas õppida, kuidas teha põhi-veebisait ise ja kuidas neid käesolevas artiklis selgitatakse.

Mis on HTML?

Veebisaidi loomiseks peate õppima HTML-i põhialuseid. HTML on lühend HyperText Markup Language, mis on programmeerimiskeel, mida kasutatakse hüperteksti dokumentide loomiseks veebis. Keel koosneb koodide ja sümbolite kogumist, mis tekitavad brauseri lehekülgedel teksti, pilte, helisid, kaadreid ja animatsioone.

Veebisaidi käivitamiseks on kaks tavalist viisi:

  • Oma koodide loomine lihtsas tekstiredaktoris ja nende salvestamine .htm-failina
  • HTML-generaatori tarkvara kasutamine

Nõuded

Neile, kes kasutavad Windowsi, alustage uue Notepadi dokumendi avamisega.

Neile, kes töötavad MAC-iga, avage uus SimpleText dokument.

OSX-i kasutajate puhul avage TextEdit ja tehke järgmised muudatused:

1. Avage menüü "Format" ja valige "Plain Text"

2. Avage menüü "Tekstiredigeerimine" aknas "Eelistused" ja valige suvand "Ignoreeri HTML-failide rikas tekstikäsud".

Näide 1:

Kui olete tühja dokumendi kätte saanud, võite alustada kirjutades:

See on teie lehe pealkiri

Siin kuvatakse kogu teie sisu

Märge:

1. Salvestage alati oma dokumendid .htm või html laiendiga, et neid oma veebibrauseris kuvada. (nt index.htm).

2. Lähtedokumendi redigeerimiseks valige brauseri aknas tööriistaribal suvand „Vaade“ ja valige „Allikas“.

3. Ära unusta salvestada kõik dokumendis tehtud muudatused.

4. Et vaadata dokumendis tehtud muudatusi brauseri aknas, värskendage leht F5 klahviga.

HTML-märgised

HTML-silt on defineeritud kui märgistus, mis lisatakse HTML-dokumenti, et anda sisu kohta rohkem teavet. Sulgude vahele pannakse HTML-silt, mis vajab sulgemist. (nt).

HTML-elemendid

Elemendid on märgistusmärgised, mida kasutatakse mõne veebilehe osa vormindamiseks. HTML-elemendi näide on silt, mida kasutatakse brauseris kuvatava teksti rasvamiseks.

kasutatakse brauserile, et fail koosneb HTML-kodeeritud andmetest. kasutatakse dokumendi lõppu, et öelda oma brauserile, et HTML-i sisu lõpeb seal.

sisaldab dokumendi esimest osa ja see, kus leiad teie brauseri lehe pealkirja. See võib sisaldada ka käske, mida kasutatakse brauseri kuvamise vormindamiseks (nt CSS-kõned). kasutatakse seejärel selle osa lõpetamiseks. Seda osa ei kuvata teie brauseris.

kasutatakse teie veebisaidi märgistamiseks. seega kasutatakse selle käsu lõppu tähistamiseks.

määratleb kogu teie brauseris kuvatava sisu.

Peamised meelespea HTML-märgised

Pealkirjad

Pealkirju kasutatakse teie veebilehe järgmise sisu teema näitamiseks. HTML-is võivad need erineda

Lõikud

Lõikeid kasutatakse tekstiplokkide eraldamiseks teie veebilehel. HTML-is on need defineeritud

silt. Lõikes on avamärgend

ja sulgemärgend

.
  • Selles jaotises on määratletud HTML-märgendid

Liinilõikud

HTML-is ei nõua reavahetused sulgemismärki. Seega on need lihtsalt defineeritud

silt.

  • Selles jaotises on määratletud HTML-märgendid

Märkused

Kommentaarid lisatakse HTML-lehele, et leida veebilehe erinevad osad oma disaineri poolt. Need on defineeritud silt. Kommentaaride silte ei kuvata brauseris ja neid saab seega kasutada kõikjal dokumendis, mõjutamata veebilehe vormingut.

Näide 2

Kõik HTML-ist

HTML on lühend HyperText Markup Language

HTML atribuudid ja väärtused

HTML atribuudid on elementidele lisatud teave, mida kasutatakse HTML-elementide eripära lisamiseks. HTML-atribuudid kirjutatakse alati koos väärtusega (nt name = "value" ) ja pannakse HTML-elemendi algusmärgile.

Näiteks kui soovite, et pealkiri paigutataks teie lehe keskele, mitte vaikimisi kuvatakse vasakul, võite lisada sildi atribuudi:

  • HTML on lühend HyperText Markup Language

    Värvimärgised

    Värvimärgised võimaldavad muuta brauseri aknas kuvatava teksti värvi. on näide teksti värvi muutmise kohta, kui soovite seda teha.

    HTML-is saate kasutada värvikoode, et saada konkreetseid värve, kasutades kuueteistkümnendsümboleid. Nn heksadecimaalsed kolmikud vastavad punastele, rohelisele ja sinistele värvidele (RGB). Seega näeb kuueteistkümnendiku värvimärk midagi sarnast . Värvikoodid ja -nimed on saadaval sellel lingil: //www.computerhope.com/htmcolor.htm

    Võite kasutada ka värvi silte oma veebisaidi taustavärvi muutmiseks, lisades BGCOLORi atribuudi. Seega, muudab valge värvi taustavärvi.

    Näide 4

    Kõik HTML-ist

    .

    HTML on lühend HyperText Markup Language

    Märge:

    1. Soovitatav ei ole valida teksti jaoks silmatorkavaid värve, nagu kollane või roosa, sest need värvid kipuvad silmi häirima

    2. Püüdke kasutada paremini kuni 4 veidi sobivat värvitooni, mis vastavad teie veebisaidi atmosfäärile, et saavutada parem ühtlustamine.

    3. Ärge tehke ebamugavaid värve nagu roosa tekst formaalsete veebisaitide sinisel taustal, sest see näeb paaritu.

    Teksti vormindamine

    Teksti vormindamise sildid võimaldavad muuta teksti kuvamist brauseri aknas. Näiteks saate teksti julgeks kasutada silt. (nt sellel tekstil on paks kiri ). Allpool on nimekiri tavalisest teksti vormindamise sildist, mida saate kasutada teksti kuvamise muutmiseks:

    1. Bold Tag

    See tekst on paksus kirjas

    2. Kaldkiri

    See tekst on kaldkirjas

    3. Allakriipsuta silt

    Seda teksti rõhutatakse

    4. Rõhutage silt

    See rõhutab teie teksti

    5. Tugev silt

    See tekst on tugev

    6. Suur silt

    See määratleb suure teksti

    7. Väike silt

    See määratleb väikese teksti

    8. Alamindeksite silt

    See tekst tellitakse

    9. Sümboli pealkiri

    See tekst on ülekirjutatud

    10. Keskmärk

    See tekst on keskendatud

    11. Vasak silt

    See tekst kuvatakse ekraani vasakus servas

    12. Parem silt

    See tekst kuvatakse ekraani paremas servas

    13. Järjestamata nimekirja silt

    • See on järjekorras olev nimekiri
    • See on järjekorras olev nimekiri

    14. Tellitud loendi silt

    1. See on minu nimekirjas number 1
    2. See on minu nimekirjas number 2

    Märge:

    1. Neid silte saab kombineerida. Kui soovite allajoonitud rasvase teksti kasutada, saate seda kasutada See tekst on julge ja allajoonitud

    2. Sulgege alati viimane avatud sild. Ülaltoodud näites on on avatud esimesena enne tag, kuid see on suletud LAST.

    Näide 5

    Kõik HTML-ist

    .

    HTML on lühend HyperText Markup Language

    Keel koosneb koodide ja sümbolite kogumist, mis tekitavad:

    • tekst,
    • pildid,
    • helid,
    • raamid
    • animatsioon teie brauseri lehtedel.

    Kaks üldist viisi oma veebisaidi käivitamiseks on kas:

    1. luua oma koodid lihtsas tekstiredaktoris ja salvestada .htm-failina. või
    2. kasutage HTML-generaatori tarkvara.

    HTML jaotise märgised

    Horisontaalne reegel

    Horisontaalseid reegleid kasutatakse oma veebilehe jaotamiseks või jagamiseks. The


    silti kasutatakse horisontaalse joone loomiseks ja seda saab muuta, et luua erinevaid liine, muutes nende suurust, värvi või laiust.

    Nt


    või

    Solid Line

    The


    sildi abil luuakse kindel joon. See muudab horisontaalse reegli sildist veidi, kui see loob rida ilma 3D-väljalõigata, mille on genereerinud
    silt.

    Näide 6

    Kõik HTML-ist

    .


    HTML on lühend HyperText Markup Language

    Keel koosneb koodide ja sümbolite kogumist, mis tekitavad:

    • tekst,
    • pildid,
    • helid,
    • raamid
    • animatsioon teie brauseri lehtedel.


    Kaks üldist viisi oma veebisaidi käivitamiseks on kas:

    1. luua oma koodid lihtsas tekstiredaktoris ja salvestada .htm-failina. või
    2. kasutage HTML-generaatori tarkvara.

    Pildi märgendid

    HTML-dokumendid võimaldavad pilte sisestada pildi sildiga. Saate sirvida pilti online-URL-ist või oma arvutist. Pildi silt tähistab "kujutise allikat"; seega tuleks kujutise tee määratleda pärast atribuuti. Kui pilt on teie algdokumendiga samas kaustas, pole vaja kogu tee kataloogi sisestada.

    Nt

    või või

    Joondamise silt

    Veel kord, saate kasutada atribuuti ALIGN pildi kuvamiseks brauseri keskel, paremal või vasakul küljel.

    Eg1

    Märkus. Siiski võib juhtuda, et teie brauser seda märgendit ei toeta. Seega saate märgist kasutada vahetult enne pildimärgist, et oma pilt brauserisse keskendada.

    Eg2

    Pildi suurus

    Kuvatud kujutise suurust saab muuta atribuudiga WIDTH ja HEIGHT. Pildi suuruse mõõtmiseks võite kasutada protsenti või piksleid.

    Eg1

    Eg2

    Pildi piir

    Kui soovite oma pildile piiri sisestada, saate seda teha BORDERi atribuudiga.

    Nt

    Runaround Space

    Läbilõige tähendab ruumi pilti pildi ümber. See on väga kasulik silt, kui teil on pildi ümber tekst. See on määratud VSPACE atribuudiga ülemise ja alumise külje jaoks ning HSPACE atribuuti kasutatakse vasakule ja paremale küljele.

    Nt

    Näide 7

    Kõik HTML-ist

    .


    HTML on lühend HyperText Markup Language

    Keel koosneb koodide ja sümbolite kogumist, mis tekitavad:

    • tekst,
    • pildid,
    • helid,
    • raamid
    • animatsioon teie brauseri lehtedel.

    Kaks üldist viisi oma veebisaidi käivitamiseks on kas:

    1. luua oma koodid lihtsas tekstiredaktoris ja salvestada .htm-failina. või
    2. kasutage HTML-generaatori tarkvara.


    Värvikoodid

    Oma veebisaidi atmosfääri loomiseks saate kasutada Theodora poolt pakutavaid kuueteistkümnendseid värvikoode

    See on näide, mis teil on atribuudiga vspace ja hspace

    Siltide sidumine

    HTML-is kasutatakse lingimärgendeid, et hüpata lehe ühest sektsioonist teise või ühelt leheküljelt teisele. Neid nimetatakse sisesideteks, kui need võimaldavad teil liikuda ühest sektsioonist või oma veebilehe lehelt teisele ja välisele lingile, kui nad avavad uue brauseriakna teiselt veebilehelt. Siltide sidumise peamine eelis on see, et saate luua dünaamilise veebisaidi selle asemel, et luua keritav veebileht.

    Väline link

    kuvab teie veebisaidil hüperlingina veebiaadressi lingi ja kui kasutaja tekstile klõpsab, laadib see lehele www.webaddress.com

    Sisemine link

    Sisemise lingi sisestamiseks on kaks võimalust:

    1. Et liikuda praegusest lehelt teisele lehele samal veebilehel

    2. Lehekülje praegusest osast teise lehekülje teisele sektsioonile hüppamiseks.

    Selleks, et ühest sektsioonist teise liikuda, peaksite kõigepealt andma sektsioonile nime, nii et silt saaks selle kutsumise ajal leida. Näiteks, kui HTML-linke käsitlev osa tuleb sisestada veebilehe ülemisse ossa, vaid pealkirja "HTML Links" kohal, sisestage sild . "Lingid" väärtus viitab jaotisele, mis tuleb paigutada; seega, kui teie veebilehe osa põhineb kassidel, sisestage sild kasside pealkirja kohal.

    Pärast seda protsessi peaksite lisama ka lingi, millest soovite hüpata. Selles näites, kui soovite lehekülje ülaosast hüpata lehe allosas leiduva "HTML-linkide" asukohale, sisestage linkimise sildid . Ekraanile ilmub hüperlinkitud tekst "Linking Tags" ja kui kasutaja seda klõpsab, hüppavad nad praegusest asukohast näidatud sektsiooni.

    Näide 8

    Kõik HTML-ist

    Värvikoodid

    Siltide sidumine


    HTML on lühend HyperText Markup Language

    Keel koosneb koodide ja sümbolite kogumist, mis tekitavad:

    • tekst,
    • pildid,
    • helid,
    • raamid
    • animatsioon teie brauseri lehtedel.

    Kaks üldist viisi oma veebisaidi käivitamiseks on kas:

    1. luua oma koodid lihtsas tekstiredaktoris ja salvestada .htm-failina. või
    2. kasutage HTML-generaatori tarkvara.


    Värvikoodid

    Oma veebisaidi atmosfääri loomiseks saate kasutada Theodora poolt pakutavaid kuueteistkümnendseid värvikoode

    See on näide, mis teil on atribuudiga vspace ja hspace

    Microsofti veebisaidi külastamiseks on kasulik, klõpsates sellel lingil


    Siltide sidumine

    Selles jaotises käsitletakse siltide sidumise tähtsust teie veebisaidil.

    Märge:

    Need on vaid näited sellest, kuidas saab kasutada linkimise silte. Loomulikult saate muuta oma paigutust, et muuta teie veebileht kasutajasõbralikumaks ja atraktiivsemaks.

    Sihtaken

    Sihtaken laadib lingitud lehekülje teise brauseri aknasse, nii et kasutaja saaks jääda teie veebisaidi praegusele lehele ja vaadata hüperlinkitud aadressi teises brauseris.

    Tabeli sildid

    Tabelite sisestamine veebisaidile võib olla väga kasulik teabe korrektseks kuvamiseks. See võimaldab ka teksti ja graafikat täpsemalt käsitleda.

    Avamistähis

    kasutatakse, et öelda oma brauserile, et lehekülje tabel algab seal ja lõpeb
    silt. Saate muuta ka tabeli värvi, suurust ja piiri.

    Tabeli suurust saab muuta

    silt. Tabeli suuruse muutmiseks saate kasutada piksleid või protsenti.

    Saate kasutada märgendit

    näiteks brauseris nähtamatu piiri loomiseks.

    The

    märgist kasutatakse tühimiku loomiseks teksti ja tabeli piiri sisemise joone vahel.

    The

    silt kasutatakse tühimiku sisestamiseks laua piiride sisemise ja välimise joone vahele.

    Tabel koosneb lahtritest, mis on määratletud tabeli veergude ja ridadega. Rakk on ruum, kuhu teie sisu sisestatakse. Veeru silt on defineeritud kui

    sildid ja read on defineeritud kui jasildid. Rakkude laiuse muutmiseks saate kasutada ja veeru joondamiseks sisestage sild
    ja
    silt. Suurust saab määrata kas protsentides või pikslites.

    Samuti saate oma read ja veerud joondada, lisades oma sildidesse atribuudi ALIGN. Seega, et joondada teatud rea, näiteks, sisestage sild

    Kärje joondamiseks saate kasutada atribuuti VALIGN .

    paigutab lahtri lehe ülemisse keskpunkti.

    Veeru laiendamiseks saate kasutada sildi

    veerude arvu määramiseks. Pidage meeles, et vaikeväärtus on 1.

    Kasutage ka lahtri laiendamiseks rea reale

    silt.

    Näide 9

    Kõik HTML-ist

    Värvikoodid

    Tabeli sildid

    HTML on lühend HyperText Markup Language

    Keel koosneb koodide ja sümbolite kogumist, mis tekitavad:

    • tekst,
    • pildid,
    • helid,
    • raamid
    • animatsioon teie brauseri lehtedel.

    Kaks üldist viisi oma veebisaidi käivitamiseks on kas:

    1. luua oma koodid lihtsas tekstiredaktoris ja salvestada .htm-failina. või
    2. kasutage HTML-generaatori tarkvara.

    Värvikoodid

    Oma veebisaidi atmosfääri loomiseks saate kasutada Theodora poolt pakutavaid heksadecimaalseid värvikoode.

    Siin saab lisada rohkem teksti.

    Siin saab lisada rohkem teksti.

    Siin saab lisada rohkem teksti.

    Siin saab lisada rohkem teksti.

    Siin saab lisada rohkem teksti.

    Tabeli sildid

    See jaotis annab teile lisateavet tabelimärkide kohta

    Pealkiri

    See on sisu teine ​​osa

    1. veerg 2. veerg 3. veerg
    Rakkude levitamine 3 reas (2. ja 3. liitus) Rakkude jagamine kahes reas (1. ja 2. rakuga ühendatud) 1. rakk
    2. rakk
    3. rakk
    3. rakk 4. rakk

    HTML kaadri sildid

    HTML-kaadrid võimaldavad luua veebisaidil sõltumatud aknad. Need on väga kasulikud, kuna need võimaldavad veebisaidil kuvada rohkem kui ühe dokumendi.

    Raamide kasutamiseks peab teil olema vähemalt kaks erinevat .htm-faili, millest üks on nimega index.htm . Fail on index.htm, kus kuvatakse kõik aknad. Kaadri sild on defineeritud kui ja silt kasutatakse selleks, et määrata indeksite.htm failis kasutatavate raamide kogum.

    Näide 10

    Proovige kaadri sildid

    määrab teie brauseris kuvatavate ridade suuruse.

    määrab teie brauseris kuvatavate veergude suuruse.

    The silt tähistab raami ja seda kasutatakse nende ühendamiseks peaaknaga.

    sildi abil saab määrata oma raamidele piiri. Selle seadistamine 0-le tagab, et see ühildub kõigi brauseritega.

    määrab lähimate kaadrite vahel ruumi.

    määrab laiuse ruumi raamide mõlemal küljel. Suurus peaks olema pikslites.

    määrab ülemise ja alumise margi suuruse pikslites.

    The silt suudab teie raami vertikaalset või horisontaalset kerimisriba. Selle väärtus peab olema kas "jah", "ei" või "auto".

    WYSIWYG tarkvara

    On tarkvaraprogramme, mida nimetatakse WYSIWYG-ks (mida sa näed, mida sa saad), mis kodeerivad teid, kuid see ei tohiks takistada teil õppida minimaalse html-kontseptsiooni, et vältida ebameeldivaid üllatusi! Selle tarkvara abil paned teksti ja pildid ning tarkvara genereerib vastava HTML-koodi samaaegselt. Samuti muudab see töö animatsioonide või skriptide kaasamise lihtsamaks. On näiteks:

    Dreamweaver, mitte tasuta, kuid väga laiahaardeline ja kergesti kasutatav koos hästi kujundatud juhendajaga

    GoLive Photoshopi redaktor

    Tasuta WYSIWYG-le võib mainida:

    • Matizha ülev
    • //bluegriffon.org/pages/DownloadBlueGriffon
    • Maguma stuudio
    • HTML-komplekt
    • 1. lk
    Eelmine Artikkel Järgmine Artikkel

    Top Näpunäited