Kā izveidot savu vietni

Pamata tīmekļa vietni var izveidot, izmantojot HyperText iezīmēšanas valodu (HTML). Skriptus var rakstīt Notepad vai teksta dokumentā atkarībā no operētājsistēmas, kuru jūs izmantojat. Ļoti pamata rīki tīmekļa vietnes izveidei sākas ar HTML tagu un HTML elementu izmantošanu . Pirmie bieži tiek izmantoti, lai nodotu informāciju par satura vienību, un pēdējie tiek izmantoti tīmekļa lapas rīku formatēšanai. Kodēšanas laikā HTML atribūti un vērtības tiek izmantotas, lai sniegtu informāciju, piemēram, izvietojumu, augstumu utt. Papildus tiem var izmantot krāsu tagus, attēlu tagus un HTML sadalīšanas tagus, lai izveidotu spilgtu tīmekļa lapu.

Kā izveidot savu vietni

Kas ir HTML?
Prasības
- 1. piemērs:
HTML tagi
HTML elementi
Galvenie HTML tagi, kas jāatceras
- 2. piemērs
HTML atribūti un vērtības
- 3. piemērs
Krāsu atzīmes
- 4. piemērs
Teksta formatēšana
- 5. piemērs
HTML nodaļas atzīmes
- 6. piemērs
Attēlu tagi
- 7. piemērs
Marķējumu sasaiste
- 8. piemērs
Tabulas tagi
- 9. piemērs
HTML rāmja tagi
- 10. piemērs
WYSIWYG programmatūra

Veidojot tīmekļa vietni, daudzi cilvēki bieži izvēlas saņemt tīmekļa dizaineru. Tomēr ir vienkārši veidi, kā uzzināt, kā paši izveidot pamata vietni, un tie tiks izskaidroti šajā rakstā.

Kas ir HTML?

Lai izveidotu tīmekļa vietni, jums būs jāapgūst HTML pamati. HTML ir HyperText iezīmēšanas valodas akronīms, kas ir programmēšanas valoda, ko izmanto, lai izveidotu hiperteksta dokumentus World Wide Web. Valoda sastāv no kodu un simbolu kopuma, kas pārlūka lapās radīs tekstu, attēlus, skaņas, rāmjus un animāciju.

Divi izplatīti veidi, kā sākt jūsu vietni, ir šādi:

Izveidojiet savus kodus vienkāršā teksta redaktorā un saglabājiet tos kā .htm failu
Izmantojot HTML ģeneratora programmatūru

Prasības

Tiem, kas izmanto Windows, vispirms atveriet jaunu Notepad dokumentu.

Tiem, kas darbojas MAC, atveriet jaunu SimpleText dokumentu.

OSX lietotājiem atveriet TextEdit un veiciet šādas izmaiņas:

1. Atveriet izvēlni "Format" un izvēlieties "Plain Text"

2. Izvēlnē "Teksta rediģēšana" atveriet logu "Preferences" un izvēlieties opciju "Ignorēt bagātinātās teksta komandas HTML failos".

1. piemērs:

Tiklīdz jums ir tukšs dokuments, varat sākt, ierakstot:

Šis ir jūsu lapas nosaukums

Šeit parādīsies viss jūsu saturs

Piezīme:

1. Vienmēr saglabājiet dokumentus ar .htm vai html paplašinājumu, lai tos parādītu tīmekļa pārlūkprogrammā. (piem., index.htm).

2. Lai rediģētu avota dokumentu, rīkjoslā pārlūkprogrammas logā atlasiet opciju "Skatīt" un atlasiet "Avots".

3. Neaizmirstiet saglabāt visas izmaiņas dokumentā.

4. Lai pārlūkprogrammas logā skatītu dokumentā veiktās izmaiņas, atsvaidziniet lapu, izmantojot taustiņu F5.

HTML tagi

HTML tagu definē kā atzīmi, kas tiek pievienota HTML dokumentā, lai sniegtu vairāk informācijas par saturu. HTML iekārta tiek ievietota starp iekavām un nepieciešama aizvēršanas atzīme. (piem.).

HTML elementi

Elementi ir iezīmēšanas tagi, ko izmanto, lai formatētu dažas tīmekļa lapas sadaļas. HTML elementa piemērs ir atzīme, ko izmanto, lai izceltu pārlūkprogrammā redzamo tekstu.

tiek izmantots, lai informētu pārlūkprogrammu, ka fails sastāv no HTML kodētiem datiem. dokumenta beigās tiek izmantots, lai informētu pārlūkprogrammu, ka HTML saturs beidzas tur.

tajā ir dokumenta pirmā daļa un kur atradīsies jūsu pārlūkprogrammas lapas nosaukums. Tajā var būt arī komandas, ko izmanto, lai formatētu pārlūkprogrammas displeju (piem., CSS zvani). pēc tam tiek izmantota, lai pārtrauktu šo sadaļu. Šī daļa netiks rādīta jūsu pārlūkprogrammā.

tiks izmantota, lai iezīmētu jūsu vietni. tāpēc tiek izmantota, lai norādītu šīs komandas beigas.

definē visu saturu, kas tiks parādīts jūsu pārlūkprogrammā.

Galvenie HTML tagi, kas jāatceras

Virsraksti

Virsraksti tiek izmantoti, lai norādītu tēmas saturu jūsu tīmekļa lapā. HTML, tie var būt dažādi, sākot no

Punkti

Punkti tiek izmantoti, lai atdalītu teksta blokus savā tīmekļa lapā. HTML, tie ir definēti ar

tag. Sadaļā būs atvēršanas taga

un noslēguma tagu

Šajā sadaļā ir definēti HTML tagi

Līnijas pārtraukumi

HTML, rindu pārtraukumi NEPIECIEŠAMS aizvēršanas tagu. Tādējādi tie ir vienkārši definēti ar

tag.

Šajā sadaļā ir definēti HTML tagi

Komentāri

Komentāri tiek ievietoti HTML lapā, lai atrastu dizainera dažādās tīmekļa lapas sadaļas. Tie ir definēti ar tag. Komentāru tagi pārlūkprogrammā netiek rādīti, un tādēļ tos var izmantot jebkurā dokumenta vietā, neietekmējot tīmekļa lapas formātu.

2. piemērs

Viss par HTML

HTML ir HyperText iezīmēšanas valodas akronīms

HTML atribūti un vērtības

HTML atribūti ir informācija, kas pievienota elementiem un tiek izmantota, lai iekļautu īpašu elementu HTML elementiem. HTML atribūti vienmēr tiek rakstīti kopā ar vērtību (piemēram, nosaukums = "vērtība" ) un tiek ievietoti HTML elementa sākumzīmē.

Piemēram, ja vēlaties, lai virsraksts tiktu novietots jūsu lapas centrā, nevis tiek parādīts pa kreisi pēc noklusējuma, varat pievienot atzīmes atribūtu:

HTML ir HyperText iezīmēšanas valodas akronīms

Krāsu atzīmes

Krāsu tagi ļauj mainīt pārlūkprogrammas logā redzamā teksta krāsu. ir piemērs, kā mainīt teksta krāsu, ja vēlaties to darīt.

HTML formātā varat izmantot arī krāsu kodus, lai iegūtu konkrētas krāsas, izmantojot heksadecimālos kodus. Tā sauktie heksadecimālie tripleti atbilst sarkanām, zaļām un zilām krāsām (RGB). Līdz ar to krāsu zīmogs heksadecimālā izskatīsies līdzīgi . Krāsu kodus un nosaukumus var iegūt, izmantojot šo saiti: //www.computerhope.com/htmcolor.htm

Varat arī izmantot krāsu tagus, lai mainītu vietnes fona krāsu, pievienojot atribūtu BGCOLOR . Līdz ar to mainīs fona krāsu no noklusējuma baltā.

4. piemērs

Viss par HTML

HTML ir HyperText iezīmēšanas valodas akronīms

Piezīme:

1. Ieteicams neizvēlēties pārsteidzošas krāsas, piemēram, dzeltenā vai rozā krāsā, jo šīs krāsas ir traucējošas acīm.

2. Lai labāk saskaņotu rezultātu, mēģiniet izmantot ne vairāk kā 4 nedaudz atbilstošus krāsu toņus, kas atbilst jūsu vietnes atmosfērai.

3. Nelietojiet neērtas krāsas, piemēram, rozā tekstā zilā fonā oficiālām tīmekļa vietnēm, jo tas izskatās dīvaini.

Teksta formatēšana

Teksta formatēšanas tagi ļauj mainīt teksta displeju pārlūkprogrammas logā. Piemēram, lai treknrakstā ievadītu tekstu, varat izmantot tag. (piem., šim tekstam būs treknrakstā ). Zemāk ir kopīgo teksta formatēšanas tagu saraksts, ko varat izmantot, lai mainītu teksta displeju:

1. Treknā atzīme

Šis teksts būs treknrakstā

2. Italic tag

Šis teksts būs slīprakstā

3. pasvītrojiet atzīmi

Šis teksts tiks pasvītrots

4. Uzsveriet Tag

Tas uzsvērs jūsu tekstu

5. Strong Tag

Šis teksts būs spēcīgs

6. Liels tag

Tas noteiks lielu tekstu

7. Mazā atzīme

Tas noteiks nelielu tekstu

8. Apakšindeksu atzīme

_{Šis teksts tiks parakstīts}

9. Virsraksta atzīme

Šis teksts tiks pārrakstīts

10. Centra atzīme

Šis teksts būs centrēts

11. Pa kreisi atzīme

Šis teksts tiks parādīts ekrāna kreisajā pusē

12. Labā atzīme

Šis teksts tiks parādīts ekrāna labajā pusē

13. Neregulēts saraksts Tag

Šis ir neierobežots saraksts

Šis ir neierobežots saraksts

14. Pasūtīto sarakstu atzīme

Šis ir mans saraksts manā sarakstā

Tas ir 2. numurs manā sarakstā

Piezīme:

1. Šīs atzīmes var arī kombinēt. Ja vēlaties pasvītrotu treknrakstu, varat izmantot Šis teksts būs treknrakstā un pasvītrots

2. Tomēr vienmēr aizveriet pirmo pēdējo atzīmēto atzīmi. Iepriekš minētajā piemērā ir atvērts pirmais, pirms tag, bet tas ir aizvērts LAST.

5. piemērs

Viss par HTML

HTML ir HyperText iezīmēšanas valodas akronīms

Valodu veido kodu un simbolu kopums, kas radīs:

teksts,

attēli,

skaņas,

rāmji

animācija jūsu pārlūkprogrammas lapās.

Divi izplatīti veidi, kā sākt jūsu vietni, ir:

izveidot savus kodus vienkāršā teksta redaktorā un saglabāt tos kā .htm failu. vai

izmantot HTML ģeneratora programmatūru.

HTML nodaļas atzīmes

Horizontālais noteikums

Horizontālie noteikumi tiek izmantoti, lai sadalītu vai sadalītu tīmekļa lapas sadaļas. The

tagu izmanto, lai izveidotu horizontālu līniju, un to var mainīt, lai izveidotu dažāda veida līnijas, mainot to lielumu, krāsu vai platumu.

Piemēram,

vai

Solid Line

The

tagu izmanto, lai izveidotu stabilu līniju. Tas nedaudz maina no horizontālā noteikuma taga, jo tas rada līniju bez 3D izgriezuma, ko rada

tag.

6. piemērs

Viss par HTML

HTML ir HyperText iezīmēšanas valodas akronīms

Valodu veido kodu un simbolu kopums, kas radīs:

teksts,

attēli,

skaņas,

rāmji

animācija jūsu pārlūkprogrammas lapās.

Divi izplatīti veidi, kā sākt jūsu vietni, ir:

izveidot savus kodus vienkāršā teksta redaktorā un saglabāt tos kā .htm failu. vai

izmantot HTML ģeneratora programmatūru.

Attēlu tagi

HTML dokumenti ļauj ievietot attēlus, izmantojot attēlu tagus. Varat pārlūkot attēlu no tiešsaistes URL vai no sava datora. Attēla atzīme apzīmē "attēla avotu"; tādēļ attēla ceļš jādefinē pēc atribūta. Ja attēls ir atrodams tajā pašā mapē, kurā ir jūsu avota dokuments, nav nepieciešams ievadīt visu ceļu direktoriju.

Piemēram,

vai vai

Izlīdzināšanas marķējums

Vēlreiz varat izmantot atribūtu ALIGN, lai attēlotu attēlu pārlūkprogrammas centrā, labajā vai kreisajā pusē.

Eg1

Piezīme. Tomēr var gadīties, ka jūsu pārlūkprogramma neatbalsta šo tagu. Tādējādi varat izmantot tagu tieši pirms attēla taga, lai centrētu attēlu pārlūkprogrammā.

Eg2

Attēla izmērs

Jūsu redzamā attēla lielumu var mainīt, izmantojot atribūtu WIDTH un HEIGHT. Attēla izmēru var izmērīt procentos vai pikseļos.

Eg1

Eg2

Attēla apmale

Ja vēlaties attēlā ievietot robežu, varat to izmantot, izmantojot BORDER atribūtu.

Piemēram,

Runaround Space

Runaround space attiecas uz atstarpi ap attēlu. Tas ir ļoti noderīgs marķējums, ja jums ir teksts ap jūsu attēlu. To nosaka, izmantojot VSPACE atribūtu augšējai un apakšējai pusei, un HSPACE atribūts tiek izmantots kreisajā un labajā pusē.

Piemēram,

7. piemērs

Viss par HTML

HTML ir HyperText iezīmēšanas valodas akronīms

Valodu veido kodu un simbolu kopums, kas radīs:

teksts,

attēli,

skaņas,

rāmji

animācija jūsu pārlūkprogrammas lapās.

Divi izplatīti veidi, kā sākt jūsu vietni, ir:

izveidot savus kodus vienkāršā teksta redaktorā un saglabāt tos kā .htm failu. vai

izmantot HTML ģeneratora programmatūru.

Krāsu kodi

Lai izveidotu savu tīmekļa vietnes atmosfēru, varat izmantot Theodora sniegtos heksadecimālos krāsu kodus

Šis ir piemērs, kas jums ir ar atribūtu vspace un hspace

Marķējumu sasaiste

HTML kodēšanas saites tiek izmantotas, lai pārietu no vienas lapas sadaļas uz citu vai no vienas lapas uz citu. Tos sauc par iekšējām saitēm, ja tie ļauj pāriet no vienas sadaļas vai savas vietnes lapas uz citu un ārējo saiti, kad viņi atver jaunu pārlūkprogrammas logu no citas tīmekļa vietnes. Lielākā priekšrocība, kas saistīta ar tagu sasaisti, ir tāda, ka tās ļauj izveidot dinamisku vietni, nevis izveidot ritinošu tīmekļa lapu.

Ārējā saite

jūsu tīmekļa lapā parādīs "Web adreses saiti" kā hipersaiti un, kad lietotājs noklikšķinās uz teksta, tas ielādēs lapu www.webaddress.com

Iekšējā saite

Iekšējās saites ievietošanai ir divi specifiski veidi:

1. Lai pārietu no pašreizējās lapas uz citu lapu tajā pašā vietnē

2. Lai pārietu no pašreizējās lapas sadaļas uz citu sadaļu tajā pašā lapā.

Lai varētu pāriet no vienas sadaļas uz citu, vispirms sadaļai ir jānorāda nosaukums, lai atzīme to varētu atrast, kad tā tiek izsaukta. Piemēram, ja sadaļa par HTML saitēm ir jāiekļauj tīmekļa lapas augšējā daļā, virs virsraksta "HTML saites", ievietojiet tagu . Vērtība "saites" attiecas uz sadaļu, kas jānovieto; tādēļ, ja jūsu tīmekļa lapas sadaļa ir balstīta uz kaķiem, ievietojiet tagu nedaudz virs kaķa.

Pēc šī procesa jāievieto arī saite, no kuras vēlaties pāriet. Šajā piemērā, ja vēlaties pāriet no lapas augšdaļas uz lapas "HTML saites" atrašanās vietu, kas atrodas lapas apakšējā daļā, ievietojiet saitēšanas tagus . Tiks parādīts hipersaites teksts "Saistošie tagi" un, kad lietotājs noklikšķinās uz tās, viņi pāriet no pašreizējās atrašanās vietas uz norādīto sadaļu.

8. piemērs

Viss par HTML

Krāsu kodi

Marķējumu sasaiste

HTML ir HyperText iezīmēšanas valodas akronīms

Valodu veido kodu un simbolu kopums, kas radīs:

teksts,

attēli,

skaņas,

rāmji

animācija jūsu pārlūkprogrammas lapās.

Divi izplatīti veidi, kā sākt jūsu vietni, ir:

izveidot savus kodus vienkāršā teksta redaktorā un saglabāt tos kā .htm failu. vai

izmantot HTML ģeneratora programmatūru.

Krāsu kodi

Lai izveidotu savu tīmekļa vietnes atmosfēru, varat izmantot Theodora sniegtos heksadecimālos krāsu kodus

Šis ir piemērs, kas jums ir ar atribūtu vspace un hspace

Jūs varat atrast noderīgu, lai apmeklētu Microsoft tīmekļa vietni, noklikšķinot uz šīs saites

Marķējumu sasaiste

Šajā sadaļā tiks aplūkota tagu saistīšanas nozīme jūsu vietnē.

Piezīme:

Šie ir tikai piemēri, kā jūs varat izmantot saiknes tagus. Protams, varat mainīt savu izvietojumu, lai padarītu jūsu vietni lietotājam draudzīgāku un pievilcīgāku.

Mērķa logs

Mērķa logs ielādēs saistīto lapu citā pārlūkprogrammas logā, lai lietotājs varētu palikt jūsu vietnes pašreizējā lapā un apskatīt hipersaites adresi citā pārlūkprogrammā.

Tabulas tagi

Tabulu ievietošana savā tīmekļa vietnē var būt ļoti noderīga, lai parādītu informāciju sakārtotā veidā. Tas arī ļaus jums precīzāk apstrādāt tekstu un grafiku.

Atvēršanas tag

tiek izmantots, lai informētu pārlūkprogrammu, ka lapā esošā tabula sākas tur un beidzas ar

tag. Varat arī mainīt tabulas krāsu, izmēru un apmēru.

Tabulas lielumu var mainīt, izmantojot

tag. Jūs varat izmantot pikseļus vai procentus, lai mainītu tabulas lielumu.

Jūs varat izmantot tagu

piemēram, lai pārlūkprogrammā izveidotu neredzamu robežu.

The

tagu izmanto, lai izveidotu atstarpi starp tekstu un tabulas robežas iekšējo līniju.

The

tagu izmanto, lai ievietotu atstarpi starp galda robežu iekšējo un ārējo līniju.

Tabula sastāv no šūnām, kuras definē tabulas slejas un rindas. Šūna būs vieta, kur tiks ievietots jūsu saturs. Kolonnas tagu definē kā

un rindas ir definētas kā untagus. Lai mainītu šūnu platumu, varat izmantot un, lai izlīdzinātu kolonnu, ievietojiet tagu

tag. Izmēru var iestatīt procentos vai pikseļos.

Varat arī pielāgot rindas un kolonnas, pievienojot tagu ALIGN atribūtu. Tādējādi, lai, piemēram, izlīdzinātu konkrētu rindu, ievietojiet tagu

Lai izlīdzinātu savu šūnu, varat izmantot atribūtu VALIGN .

ievietos šūnu lapas augšējā centrā.

Lai aptvertu kolonnu, varat izmantot tagu

lai iestatītu kolonnu skaitu, uz kurām šūnai ir jāatbilst. Ņemiet vērā, ka noklusējuma vērtība ir iestatīta uz 1.

Tāpat, lai aptvertu šūnu ar vairākām rindām, izmantojiet

tag.

9. piemērs


Viss par HTML
Krāsu kodi
Tabulas tagi
HTML ir HyperText iezīmēšanas valodas akronīms
Valodu veido kodu un simbolu kopums, kas radīs:
teksts,
attēli,
skaņas,
rāmji
animācija jūsu pārlūkprogrammas lapās.
Divi izplatīti veidi, kā sākt jūsu vietni, ir:
izveidot savus kodus vienkāršā teksta redaktorā un saglabāt tos kā .htm failu. vai
izmantot HTML ģeneratora programmatūru.
Krāsu kodi 
Jūs varat izmantot Theodora sniegtos Heksadecimālos krāsu kodus, lai izveidotu savu tīmekļa vietnes atmosfēru.
Šeit var pievienot vairāk teksta. Šeit var pievienot vairāk teksta.
Šeit var pievienot vairāk teksta. Šeit var pievienot vairāk teksta.
Šeit var pievienot vairāk teksta.
Tabulas tagi 
Šī sadaļa sniegs sīkāku informāciju par tabulas tagiem
 Virsraksts
Šī ir vēl viena satura daļa
 1. sleja  2. sleja  3. sleja
 Šūnu aptveršana 3 rindās (2. un 3. savienojums)  Šūnu aptveršana 2 rindās (1. un 2. šūnu sapludināšana)  1. šūna
 2. šūna
 3. šūna
 3. šūna  4. šūna

HTML rāmja tagi

HTML rāmji ļauj izveidot neatkarīgus logus tīmekļa lapā. Tie ir ļoti noderīgi, jo tie ļauj jums parādīt vairāk nekā vienu dokumentu tīmekļa lapā.

Lai izmantotu rāmjus, jums jābūt vismaz diviem dažādiem .htm failiem, no kuriem viens tiks nosaukts index.htm . Fails index.htm būs tas, kur tiks parādīti visi logi. Rāmja atzīme ir definēta kā un tagu izmanto, lai definētu kadru kopu, kas tiek izmantoti index.htm failā.

10. piemērs

Izmēģiniet rāmja tagus

iestatīs rindas, kas tiks parādītas jūsu pārlūkprogrammā.

iestatīs kolonnu lielumu, kas tiks parādīts jūsu pārlūkprogrammā.

The tagu nosaukumus rāmis, un to izmanto, lai tos savienotu ar galveno logu.

tagu izmantos, lai iestatītu rāmi jūsu rāmjiem. Nosakot to uz 0, tiks nodrošināts, ka tas būs saderīgs ar visām pārlūkprogrammām.

iestatīs atstarpi starp tuvākajiem kadriem.

iestatīs platuma telpu abās kadru pusēs. Lielumam jābūt iestatītam pikseļos.

iestatīs augšējo un apakšējo robežu pikseļos.

The tagu varēs vertikālā vai horizontālā ritjosla jūsu rāmī. Tās vērtībai jābūt iestatītai uz "jā", "nē" vai "auto".

WYSIWYG programmatūra

Ir programmatūras programmas, ko sauc par WYSIWYG (ko jūs redzat, ko jūs saņemat), kas šifrē jums, taču tas nedrīkst apturēt jūs no minimālo html koncepciju apgūšanas, lai izvairītos no nepatīkamiem pārsteigumiem! Izmantojot šo programmatūru, jūs ievietojat tekstu un attēlus, un programmatūra ģenerē atbilstošo HTML kodu vienlaicīgi. Tas arī atvieglos animāciju vai skriptu iekļaušanu darbā. Piemēram, ir:

Dreamweaver, kas nav bezmaksas, bet ļoti visaptverošs un viegli lietojams ar labi izstrādātu apmācību

GoLive Photoshop redaktors

Par brīvu WYSIWYG varam minēt: