Kaip sukurti savo svetainę

Pagrindinę svetainę galima sukurti naudojant „HyperText Markup Language“ (HTML). Skriptai gali būti parašyti Notepad arba tekstiniame dokumente, priklausomai nuo operacinės sistemos, kurią naudojate. Labai pagrindinės svetainės kūrimo priemonės prasideda naudojant HTML žymes ir HTML elementus . Pirmieji dažniausiai naudojami perduoti informaciją apie turinio vienetą, o pastarieji naudojami tinklalapio įrankiams formuoti. Kodavimo metu HTML atributai ir reikšmės naudojamos informacijai, pvz., Vietos, aukščio ir kt. Pateikimui. Be to, galima sukurti spalvotus žymenis, paveikslėlių žymes ir HTML padalijimo žymes, kad sukurtumėte ryškų tinklalapį.

Kaip sukurti savo svetainę

Kas yra HTML?
Reikalavimai
- 1 pavyzdys:
HTML žymės
HTML elementai
Pagrindiniai įsimintini HTML žymenys
- 2 pavyzdys
HTML atributai ir vertės
- 3 pavyzdys
Spalvų žymės
- 4 pavyzdys
Teksto formatavimas
- 5 pavyzdys
HTML skyriaus žymės
- 6 pavyzdys
Vaizdo žymės
- 7 pavyzdys
Žymių susiejimas
- 8 pavyzdys
Lentelių žymės
- 9 pavyzdys
HTML rėmelio žymos
- 10 pavyzdys
WYSIWYG programinė įranga

Kuriant svetainę, daugelis žmonių dažnai pasirenka gauti žiniatinklio dizainerį. Tačiau yra paprastų būdų, kaip sužinoti, kaip patys padaryti pagrindinę svetainę, ir jie bus paaiškinti šiame straipsnyje.

Kas yra HTML?

Jei norite sukurti svetainę, turėsite išmokti HTML pagrindus. HTML yra „HyperText Markup Language“ akronimas, kuris yra programavimo kalba, naudojama norint sukurti hiperteksto dokumentus World Wide Web. Kalba susideda iš kodų ir simbolių, kurie jūsų naršyklės puslapiuose generuos tekstą, vaizdus, garsus, rėmelius ir animaciją.

Du bendri būdai pradėti savo svetainę yra šie:

Sukurkite savo kodus paprastame teksto redaktoriuje ir išsaugokite juos kaip .htm failą
Naudojant HTML generatoriaus programinę įrangą

Reikalavimai

Tiems, kurie naudoja „ Windows“, pradėkite atidaryti naują „ Notepad“ dokumentą.

Tiems, kurie naudoja MAC, atidarykite naują SimpleText dokumentą.

OSX vartotojams atidarykite „ TextEdit“ ir atlikite šiuos pakeitimus:

1. Atidarykite meniu „Formatas“ ir pasirinkite „Paprastas tekstas“

2. Meniu „Teksto redagavimas“ atidarykite langą „Parinktys“ ir pasirinkite parinktį „Nepaisyti turtinių teksto komandų HTML failuose“.

1 pavyzdys:

Kai turėsite tuščią dokumentą, galite pradėti rašyti:

Tai jūsų puslapio pavadinimas

Čia bus rodomas visas turinys

Pastaba:

1. Visada išsaugokite savo dokumentus .htm arba html plėtiniu, kad juos rodytumėte savo žiniatinklio naršyklėje. (pvz., index.htm).

2. Norėdami redaguoti šaltinio dokumentą, savo įrankių juostoje naršyklės lange pasirinkite parinktį „Žiūrėti“ ir pasirinkite „Šaltinis“.

3. Nepamirškite išsaugoti visų jūsų dokumente padarytų pakeitimų.

4. Norėdami peržiūrėti dokumente padarytus pakeitimus naršyklės lange, atnaujinkite puslapį naudodami F5 klavišą.

HTML žymės

HTML žyma apibrėžiama kaip žymėjimas, kuris įtraukiamas į HTML dokumentą, kad būtų pateikta daugiau informacijos apie turinį. HTML skiltis įterpiama į skliaustelius ir jai reikia uždarymo žyma. (pvz.).

HTML elementai

Elementai yra žymėjimo žymos, naudojamos kai kurių tinklalapio dalių formatavimui. HTML elemento pavyzdys yra žymeklis, naudojamas paryškinti naršyklėje rodomą tekstą.

yra naudojamas pasakyti naršyklei, kad failą sudaro HTML koduoti duomenys. pačiame dokumento gale naudojamas pasakyti naršyklei, kad HTML turinys baigiasi.

jame yra pirmoji dokumento dalis ir kur bus rastas naršyklės puslapio pavadinimas. Jame taip pat gali būti komandų, naudojamų naršyklės ekrano formatavimui (pvz., CSS skambučiai). tada naudojamas šiam skyriui užbaigti. Ši dalis nebus rodoma naršyklėje.

bus naudojama jūsų svetainės žymėjimui. taigi naudojama nurodant tos komandos pabaigą.

apibrėžia visą turinį, kuris bus rodomas jūsų naršyklėje.

Pagrindiniai atminties HTML žymenys

Antraštės

Antraštės naudojamos norint nurodyti jūsų tinklalapyje esančio turinio temą. HTML sistemoje jie gali skirtis, nuo

Dalys

Straipsniai naudojami atskirti teksto blokus savo tinklalapyje. HTML, jie yra apibrėžti su

žyma. Dalyje bus atidarymo žyma

ir uždarymo žyma

Šiame skyriuje apibrėžtos HTML žymos

Linijos pertraukos

HTML, eilutės pertraukos nereikalauja uždarymo žyma. Taigi jie yra tiesiog apibrėžti su

žyma.

Šiame skyriuje apibrėžtos HTML žymos

Komentarai

Komentarai įterpiami į HTML puslapį, kad jo dizaineris surastų skirtingus svetainės puslapius. Jie yra apibrėžti su žyma. Komentarų žymos naršyklėje nerodomos ir todėl gali būti naudojamos bet kurioje dokumento vietoje, nepažeidžiant tinklalapio formato.

2 pavyzdys

Viskas apie HTML

HTML yra HyperText žymėjimo kalbos akronimas

HTML atributai ir vertės

HTML atributai yra informacija, pridėta prie elementų ir naudojama tam, kad būtų įtraukta tam tikra HTML elementų charakteristika. HTML atributai visada rašomi kartu su verte (pvz., Pavadinimas = "vertė" ) ir yra įkeliami į HTML elemento pradinę žymę.

Pvz., Jei norite, kad antraštė būtų patalpinta puslapio viduryje, o ne būtų rodoma kairėje pagal numatytuosius nustatymus, galite pridėti žymės lygiavimo atributą:

HTML yra HyperText žymėjimo kalbos akronimas

Spalvų žymės

Spalvų žymos leidžia keisti naršyklės lange rodomo teksto spalvą. yra pavyzdys, kaip pakeisti teksto spalvą, jei norite tai padaryti.

HTML sistemoje taip pat galite naudoti spalvų kodus tam, kad gautumėte konkrečias spalvas, naudodami šešioliktainius kodus. Vadinamieji šešioliktainiai tripletai atitinka raudonos, žalios ir mėlynos spalvos (RGB) spalvas. Taigi, šešioliktainiame spalvų žyma atrodys panašiai . Spalvų kodus ir pavadinimus galite gauti naudodami šią nuorodą: //www.computerhope.com/htmcolor.htm

Taip pat galite naudoti spalvų žymes, kad pakeistumėte savo svetainės fono spalvą, pridėdami atributą BGCOLOR . Taigi, pakeis fono spalvą nuo numatytojo baltos spalvos.

4 pavyzdys

Viskas apie HTML

HTML yra HyperText žymėjimo kalbos akronimas

Pastaba:

1. Patartina pasirinkti tekstui ryškias spalvas, pvz., Geltoną arba rausvą, nes šios spalvos dažnai trikdo akis

2. Taip pat pabandykite naudoti ne daugiau kaip 4 šiek tiek atitinkančius spalvų tonus, atitinkančius jūsų svetainės atmosferą, kad rezultatas būtų geriau suderintas.

3. Negalima atlikti nepatogių spalvų, pavyzdžiui, rausva teksto, mėlyname fone oficialioms svetainėms, nes tai atrodys keista.

Teksto formatavimas

Teksto formatavimo žymos leidžia keisti teksto rodymą naršyklės lange. Pavyzdžiui, norėdami paryškinti tekstą, galite naudoti žyma. (pvz., šis tekstas bus paryškintas šriftu ). Toliau pateikiamas bendrų teksto formatavimo žymų sąrašas, kurį galite naudoti teksto rodymui pakeisti:

1. Paryškinta žyma

Šis tekstas bus paryškintas

2. Italic Tag

Šis tekstas bus kursyvu

3. Pažymėkite žymę

Šis tekstas bus pabrauktas

4. Paryškinkite žymę

Tai pabrėžia jūsų tekstą

5. Stiprus ženklas

Šis tekstas bus stiprus

6. Didelė žyma

Taip bus apibrėžtas didelis tekstas

7. Maža žyma

Taip bus apibrėžtas mažas tekstas

8. „Subscript Tag“

_{Šis tekstas bus prenumeruojamas}

9. „Superscript“ žyma

Šis tekstas bus pakeistas

10. Centrinis žyma

Šis tekstas bus centruotas

11. Kairė žyma

Šis tekstas bus rodomas kairėje ekrano pusėje

12. Dešinysis žymeklis

Šis tekstas bus rodomas dešinėje ekrano pusėje

13. Neregistruotas sąrašas

Tai nerodomas sąrašas

Tai nerodomas sąrašas

14. Užsakyto sąrašo žyma

Mano sąraše šis numeris yra 1

Mano sąraše šis numeris yra 2

Pastaba:

1. Šios žymos taip pat gali būti sujungtos. Jei norite paryškintu paryškintu tekstu, galite naudoti Šis tekstas bus paryškintas ir pabrauktas

2. Vis dėlto visada uždarykite pirmąjį atidarytą žymą. Pirmiau pateiktame pavyzdyje buvo atidaryta PIRMAS, prieš žyma, tačiau buvo uždaryta.

5 pavyzdys

Viskas apie HTML

HTML yra HyperText žymėjimo kalbos akronimas

Kalba susideda iš kodų ir simbolių, kurie sukurs:

tekstas,

vaizdai,

garsai,

kadrai

animacija naršyklės puslapiuose.

Du bendri būdai, kaip pradėti savo svetainę, yra:

sukurti savo kodus paprastame teksto redaktoriuje ir išsaugoti juos kaip .htm failą. arba

naudoti HTML generatoriaus programinę įrangą.

HTML skyriaus žymės

Horizontali taisyklė

Horizontalios taisyklės naudojamos jūsų tinklalapio dalims suskirstyti ar padalinti. The

žyma naudojama horizontaliai linijai sukurti ir gali būti pakeista, kad būtų sukurtos skirtingų tipų linijos, keičiant jų dydį, spalvą ar plotį.

Pvz

arba

Ištisinė linija

The

žyma naudojama norint sukurti tvirtą liniją. Jis šiek tiek keičiasi nuo horizontaliosios taisyklės žymės, nes sukuria liniją be 3D išjungimo, kurį generuoja

žyma.

6 pavyzdys

Viskas apie HTML

HTML yra HyperText žymėjimo kalbos akronimas

Kalba susideda iš kodų ir simbolių, kurie sukurs:

tekstas,

vaizdai,

garsai,

kadrai

animacija naršyklės puslapiuose.

Du bendri būdai, kaip pradėti savo svetainę, yra:

sukurti savo kodus paprastame teksto redaktoriuje ir išsaugoti juos kaip .htm failą. arba

naudoti HTML generatoriaus programinę įrangą.

Vaizdo žymės

HTML dokumentai leidžia įvesti vaizdus naudodami vaizdo žymes. Galite naršyti vaizdą iš interneto URL arba iš savo kompiuterio. Vaizdo žyma reiškia „vaizdo šaltinį“; taigi, vaizdo kelias turėtų būti apibrėžtas po atributo. Jei vaizdas randamas tame pačiame aplanke, kaip ir šaltinio dokumentas, nereikia įvesti viso maršruto katalogo.

Pvz

arba arba

Derinimo žyma

Dar kartą galite naudoti atributą ALIGN, kad atvaizduotumėte vaizdą naršyklės centre, dešinėje arba kairėje pusėje.

Eg1

Pastaba: tačiau gali atsitikti, kad jūsų naršyklė nepalaiko šios žymos. Todėl galite naudoti žymę prieš pat vaizdo žymę, kad vaizdas būtų nukreiptas į naršyklę.

Eg2

Paveikslėlio dydis

Jūsų rodomo vaizdo dydis gali būti pakeistas naudojant atributą WIDTH ir HEIGHT. Vaizdo dydį galite naudoti procentais arba pikseliais.

Eg1

Eg2

Vaizdo riba

Jei norite į savo paveikslėlį įterpti sieną, galite tai padaryti naudodami BORDER atributą.

Pvz

Runaround Space

Važiavimo erdvė reiškia erdvės tarpą aplink vaizdą. Tai labai naudinga žyma, kai turite tekstą aplink nuotrauką. Jis apibrėžiamas naudojant VSPACE atributą viršutinei ir apatinei pusei, o HSPACE atributas naudojamas kairėje ir dešinėje pusėse.

Pvz

7 pavyzdys

Viskas apie HTML

HTML yra HyperText žymėjimo kalbos akronimas

Kalba susideda iš kodų ir simbolių, kurie sukurs:

tekstas,

vaizdai,

garsai,

kadrai

animacija naršyklės puslapiuose.

Du bendri būdai, kaip pradėti savo svetainę, yra:

sukurti savo kodus paprastame teksto redaktoriuje ir išsaugoti juos kaip .htm failą. arba

naudoti HTML generatoriaus programinę įrangą.

Spalvų kodai

Jūs galite naudoti „Theodora“ pateiktus šešioliktainius spalvos kodus, kad sukurtumėte savo svetainės atmosferą

Tai yra pavyzdys, kurį turite su atributu „vspace“ ir „hspace“

Žymių susiejimas

HTML sistemoje nuorodų žymos naudojamos šokinėti iš vienos puslapio dalies į kitą arba iš vieno puslapio į kitą. Jos vadinamos „Vidinėmis nuorodomis“, jei jos leidžia jums pereiti iš vieno skyriaus ar savo svetainės puslapio į kitą ir „Išorinė nuoroda“, kai jie atidaro naują naršyklės langą iš kitos svetainės. Svarbiausias žymenų susiejimo privalumas yra tas, kad jie leidžia sukurti dinamišką svetainę, o ne sukurti slenkantį tinklalapį.

Išorinė nuoroda

“ parodys „Web Address Link“ kaip nuorodą į jūsų tinklalapį ir kai vartotojas spustelės tekstą, jis įkels puslapį www.webaddress.com

Vidinė nuoroda

Yra du būdai įtraukti vidinę nuorodą:

1. Jei norite pereiti iš dabartinio puslapio į kitą to paties tinklalapio puslapį

2. Jei norite pereiti iš dabartinės puslapio dalies į kitą to paties puslapio skiltį.

Jei norite peršokti iš vienos sekcijos į kitą, pirmiausia turėtumėte nurodyti skyriui pavadinimą, kad žyma galėtų jį surasti, kai ji yra skambinama. Pvz., Jei skyrių apie HTML nuorodas reikia įterpti į viršutinę puslapio dalį, tiesiog virš antraštės „HTML Links“, įdėkite žymą . „Nuorodų“ vertė bus nuoroda į skyrių, kurį reikia surasti; taigi, jei jūsų tinklalapio dalis yra pagrįsta katėmis, įdėkite žymą tik virš katės.

Po šio proceso taip pat turėtumėte įterpti nuorodą, iš kurios norite pereiti. Šiame pavyzdyje, jei norite pereiti iš puslapio viršaus į „HTML nuorodų“ vietą, esančią apatinėje puslapio dalyje, įterpkite nuorodų žymes . Pasirodys hipersaito tekstas „Susieti žymes“ ir, kai vartotojas spustelės, jie pereis nuo dabartinės vietos į nurodytą skyrių.

8 pavyzdys

Viskas apie HTML

Spalvų kodai

Žymių susiejimas

HTML yra HyperText žymėjimo kalbos akronimas

Kalba susideda iš kodų ir simbolių, kurie sukurs:

tekstas,

vaizdai,

garsai,

kadrai

animacija naršyklės puslapiuose.

Du bendri būdai, kaip pradėti savo svetainę, yra:

sukurti savo kodus paprastame teksto redaktoriuje ir išsaugoti juos kaip .htm failą. arba

naudoti HTML generatoriaus programinę įrangą.

Spalvų kodai

Jūs galite naudoti „Theodora“ pateiktus šešioliktainius spalvos kodus, kad sukurtumėte savo svetainės atmosferą

Tai yra pavyzdys, kurį turite su atributu „vspace“ ir „hspace“

Naudingą „Microsoft“ svetainę galite rasti spustelėję šią nuorodą „

Žymių susiejimas

Šiame skyriuje bus aptarta, kaip svarbu susieti žymes jūsų svetainėje.

Pastaba:

Tai tik pavyzdžiai, kaip galite naudoti susiejimo žymes. Žinoma, galite pakeisti savo vietą, kad jūsų svetainė taptų patogesnė ir patrauklesnė.

Tikslinis langas

Tikslinis langas įkels susietą puslapį kitame naršyklės lange, kad vartotojas galėtų likti jūsų svetainės dabartiniame puslapyje ir peržiūrėti kitoje naršyklėje esantį nuorodą.

Lentelių žymės

Lentelių įterpimas į jūsų svetainę gali būti labai naudingas, kad informacija būtų rodoma tvarkingai. Taip pat galėsite tiksliau tvarkyti tekstą ir grafiką.

Atidarymo žyma

naudojamas jūsų naršyklei pasakyti, kad puslapyje esanti lentelė prasideda ir baigiasi

žyma. Taip pat galite keisti lentelės spalvą, dydį ir sienos dydį.

Lentelės dydis gali būti pakeistas naudojant

žyma. Jei norite pakeisti lentelės dydį, galite naudoti taškus arba procentą.

Galite naudoti žymą

pvz., kad naršyklėje būtų nematoma siena.

The

žyma naudojama tarpui tarp teksto ir vidinės lentelės sienos linijos.

The

žyma naudojama tarpo tarpo tarp vidinės ir išorinės lentelės sienų linijos įterpimui.

Lentelę sudaro langeliai, apibrėžti stulpeliuose ir eilutėse. Ląstelė bus vieta, kurioje bus įterptas jūsų turinys. Stulpelio žyma apibrėžiama kaip

žymės ir eilutės yra apibrėžtos kaip iržymės. Norėdami pakeisti langelio plotį, galite naudoti ir norėdami išlyginti stulpelį, įdėkite žymą

žyma. Dydis gali būti nustatytas procentais arba pikseliu.

Taip pat galite susieti eilutes ir stulpelius, pridėdami žymę „ALIGN“. Taigi, pavyzdžiui, norėdami suderinti tam tikrą eilutę, įdėkite žymą

Norėdami suderinti savo langelį, galite naudoti atributą VALIGN .

įdės langelį į viršutinį puslapio puslapį.

Jei norite naudoti stulpelį, galite naudoti žymę

nustatyti stulpelių, kuriuos ląstelė turėtų apimti, skaičių. Atkreipkite dėmesį, kad numatytoji vertė yra 1.

Be to, norėdami pereiti prie ląstelių skaičiaus eilėmis, naudokite

žyma.

9 pavyzdys

Viskas apie HTML

Spalvų kodai

Lentelių žymės

HTML yra HyperText žymėjimo kalbos akronimas

Kalba susideda iš kodų ir simbolių, kurie sukurs:

tekstas,

vaizdai,

garsai,

kadrai

animacija naršyklės puslapiuose.

Du bendri būdai, kaip pradėti savo svetainę, yra:

sukurti savo kodus paprastame teksto redaktoriuje ir išsaugoti juos kaip .htm failą. arba

naudoti HTML generatoriaus programinę įrangą.

Spalvų kodai

Galite naudoti „Theodora“ pateiktus šešioliktainius spalvų kodus, kad sukurtumėte savo svetainės atmosferą.

Čia galite pridėti daugiau teksto.

Lentelių žymos

Šiame skyriuje rasite daugiau informacijos apie lentelės žymes

Antraštė
Tai dar viena turinio dalis
1 skiltis	2 skiltis	3 skiltis
Ląstelių skleidimas 3 eilutėse (2 ir 3)	Ląstelių skleidimas dviejose eilutėse (1 ir 2 ląstelės sujungtos)	1 langelis
		2 langelis
		3 langelis
	3 langelis	4-oji ląstelė

HTML rėmelio žymos

HTML rėmeliai leidžia sukurti nepriklausomus langus tinklalapyje. Jie yra labai naudingi, nes leidžia tinklalapyje rodyti daugiau nei vieną dokumentą.

Norėdami naudoti rėmelius, turite turėti bent du skirtingus .htm failus, iš kurių vienas bus pavadintas index.htm . Failas index.htm bus tas, kur bus rodomi visi langai. Rėmelio žyma apibrėžiama kaip ir žyma naudojama nustatyti rėmelių rinkinį, naudojamą faile index.htm.

10 pavyzdys

Išbandykite rėmelių žymes

nustatys eilių, kurios bus rodomos jūsų naršyklėje, dydį.

nustatys stulpelių, kurie bus rodomi jūsų naršyklėje, dydį.

The žyma pavadins rėmelį ir yra naudojama juos susieti su pagrindiniu langu.

žyma bus naudojama norint nustatyti rėmelius. Nustačius jį 0, bus užtikrinta, kad jis bus suderinamas su visomis naršyklėmis.

nustatys tarpą tarp artimiausių rėmelių.

nustatys abiejų rėmelių pusių plotį. Dydis turėtų būti nustatytas pikseliais.

nustatys viršutinį ir apatinį paraštės dydį pikseliais.

The žyma galės išlaikyti vertikalią arba horizontalią rėmo juostą. Jo vertė turi būti nustatyta kaip „taip“, „ne“ arba „auto“.

WYSIWYG programinė įranga

Yra programinės įrangos, vadinamos WYSIWYG (ką matote, ką gausite), kurios jums koduoja, tačiau tai neturėtų trukdyti mokytis mažiausiai html koncepcijų, kad būtų išvengta nemalonių siurprizų! Naudodami šią programinę įrangą, įdėjote tekstą ir vaizdus, o programinė įranga generuoja atitinkamą HTML kodą vienu metu. Tai taip pat palengvins animaciją ar scenarijų įtraukimą į darbą. Yra, pavyzdžiui:

„Dreamweaver“, ne nemokama, bet labai išsami ir paprasta naudoti su gerai suplanuota pamoka

„GoLive Photoshop“ redaktorius

Nemokamai WYSIWYG galima paminėti: