Semantika

Përdorni elementë (nganjëherë të quajtur gabimisht "etiketa") për qëllimin e tyre të synuar: titujt për titujt, fq për paragrafët a për lidhjet, etj.

Kjo e bën kodin më të lehtë për t'u lexuar, modifikuar dhe mirëmbajtur.

Alternativë për multimedia

Përpiquni të specifikoni përmbajtje alternative mediatike, të tilla si imazhe, video ose animacione të përcaktuara me kanavacë. Për fotot, ky është tekst kuptimplotë alt ( alt), dhe për transkriptimin video dhe audio të tekstit dhe titrave nëse është e mundur.

Përmbajtja alternative mund të ndihmojë njerëzit me aftësi të kufizuara. Për shembull, është e vështirë për një person me shikim të ulët të kuptojë se çfarë është në foto nëse nuk është vendosur për të. @alt. Mund të jetë e vështirë për njerëzit e tjerë të kuptojnë se çfarë thuhet në një video ose regjistrim audio.

(Nëse për foton altështë i tepërt, ose përdoret vetëm për qëllime dekorative në vende ku CSS nuk mund të përdoret, përdorni tekst bosh alt alt = "" )

Ndarja e përgjegjësisë

Mbani strukturën (shënjimin), paraqitjen (stilet) dhe sjelljen (skriptimin) të ndara dhe përpiquni të mbani në minimum ndërveprimin midis tyre.

Sigurohuni që dokumentet dhe shabllonet përmbajnë vetëm HTML dhe që HTML shërben vetëm për të përcaktuar strukturën e dokumentit. Transferoni të gjithë kodin përgjegjës për dizajnin në skedarët e stilit, dhe kodin përgjegjës për sjelljen - te skriptet.

Përpiquni t'i mbani në minimum kryqëzimet e tyre duke përfshirë një numër minimal skedarësh stili dhe skriptesh në shabllone.

Ndarja e strukturës nga prezantimi dhe sjellja ndihmon në ruajtjen e kodit më të lehtë. Modifikimi i shablloneve dhe dokumenteve HTML kërkon gjithmonë më shumë kohë sesa modifikimi i skedarëve ose skripteve të stilit.

Nuk rekomandohet:

HTML është e keqe

Unë kam lexuar për këtë diku më parë, por tani gjithçka është e qartë: HTML është marrëzi!!1

Dizajni im i ri CSS

Kam lexuar për këtë më parë, por më në fund e bëra vetë: Përdorni ndarjen e shqetësimeve dhe mos e futni stilimin në HTML

Shume Bukur!

lidhje mnemonike

Përjashtimi i vetëm nga ky rregull janë karakteret e shërbimit HTML (për shembull < dhe & ) si dhe karaktere ndihmëse dhe "të padukshme" (për shembull, një hapësirë ​​që nuk prishet).

Etiketat opsionale

Etiketat opsionale mund të hiqen për të zvogëluar madhësinë e skedarit dhe për të përmirësuar lexueshmërinë e kodit. Specifikimi HTML5 ka një listë të etiketave opsionale.

(Mund të duhet pak kohë që kjo qasje të përdoret gjerësisht, sepse është shumë e ndryshme nga ajo që u mësohet zakonisht zhvilluesve të uebit. Për sa i përket konsistencës dhe thjeshtësisë së kodit, është mirë që të hiqen të gjitha etiketat opsionale, dhe jo disa nga ato).

Nuk rekomandohet:
Rekomanduar:

Kështu që

atribut "lloj".

Mos përdorni atribut lloji kur lidhni stile (përveç kur përdoret diçka tjetër përveç CSS) dhe skriptet (përveç kur nuk është JavaScript).

Specifikoni një atribut lloji në këtë rast, jo domosdoshmërisht sepse HTML5 përdor tekst/css (anglisht) dhe tekst/javascript (anglisht) si parazgjedhje. Kjo do të funksionojë edhe në shfletues të vjetër.

Nuk rekomandohet:
Rekomanduar:
Nuk rekomandohet:
Rekomanduar:

Rregullat e formatimit HTML

Formatimi

Pavarësisht nga stilet e vendosura për elementin (CSS ju lejon të ndryshoni sjelljen e elementit duke përdorur veçorinë shfaqja), mbështillni çdo bllok ose element tabele në një rresht të ri.

Vendosni gjithashtu dhëmbëza për të gjithë elementët e vendosur në një element blloku ose tabele.

(Nëse keni probleme me hapësirën e bardhë midis artikujve të listës, mund t'i vendosni të gjitha li elementet në një rresht. Lintu [mjete për kontrollimin e cilësisë së kodit përafërsisht. per.] rekomandohet në këtë rast të lëshohet një paralajmërim në vend të një gabimi.

• Masha
• Glasha
• Cheburash

Rregullat e stilimit të CSS

Vlefshmëria e CSS

Me përjashtim të rasteve kur nevojitet kod specifik i shfletuesit ose gabime të verifikuesit, përdorni kod të vlefshëm CSS.

Përdorni mjete si Vlerësuesi CSS W3C për të vërtetuar kodin tuaj.

Vlefshmëria është një cilësi e rëndësishme dhe megjithatë e matshme e një kodi. Shkrimi i CSS i vlefshëm ndihmon për të hequr qafe kodin e tepërt dhe siguron përdorimin e saktë të fletëve të stilit…

Identifikuesit dhe emrat e klasave

Në vend që të përdorni shifra, ose të përshkruani pamjen e një elementi, përpiquni të shprehni kuptimin e krijimit të tij në emër të një klase ose identifikuesi, ose t'i jepni një emër të përgjithshëm ...

Emrat e gërmave janë thjesht një variant i emrit për elementë që nuk kanë qëllim të veçantë ose nuk janë të ndryshëm nga vëllezërit e motrat e tyre. Ata zakonisht nevojiten si "ndihmës".

Përdorimi i emrave funksionalë ose shabllonesh redukton nevojën për ndryshime të panevojshme në dokument ose shabllone.

Nuk rekomandohet: /* I vjetëruar: nuk ka kuptim */ #yee-1901 () /* I vjetëruar: përshkrimi i pamjes */ .button-jeshile () .i qartë ()
Rekomanduar:/* Rekomandohet: deri në pikë dhe në pikë */ #gallery () #login () .video () /* Rekomandohet: emri i shkronjës */ .aux () .alt ()

Emrat e identifikuesve dhe klasave

Mundohuni të formuloni saktësisht se çfarë duhet të bëjë ky element, duke qenë sa më konciz.

Ky përdorim i klasave dhe identifikuesve kontribuon për ta bërë kodin më të lehtë për t'u kuptuar dhe më efikas.

Përzgjedhës të tipit

Përveç rasteve kur është e nevojshme (për shembull, me klasa ndihmëse), mos përdorni emra elementësh me emra klasash ose identifikues.

Shkurtesat për pronat

CSS ofron shumë forma të ndryshme stenografi (për shembull, font), të cilat rekomandohen të përdoren kudo që të jetë e mundur, edhe nëse specifikohet vetëm një nga vlerat.

Përdorimi i stenografisë së pronave është i dobishëm për efikasitet më të madh dhe kuptim më të mirë të kodit.

Nuk rekomandohet: /* Nuk rekomandohet */ border-top-style: asnjë; font-familja: palatino, gjeorgjia, serif; madhësia e shkronjave: 100% lartësia e vijës: 1.6; mbushje-fund: 2em mbushje-majtas: 1em mbushje-djathtas: 1em; mbushje-mbushje: 0;
Rekomanduar:/* Rekomandohet */ border-top: 0; fonti: 100%/1.6 palatino, gjeorgji, serif; mbushje: 0 1em 2em;

0 dhe njësi

Mos specifikoni njësi për vlerat null, përveç nëse ka një arsye për të.

0 në pjesën e plotë të thyesës

Mos e vendosni 0 në pjesën e plotë në vlerat midis -1 dhe 1.

Kuotat në lidhje

Mos përdorni thonjëza ( "" , "" ) Me url () .

Emrat heksadecimal të ngjyrave

Shënimi heksadecimal me tre karaktere për ngjyrat është më i shkurtër dhe zë më pak hapësirë.

Parashtesa

Në projektet e mëdha dhe në kodin që do të përdoret për projekte të tjera ose faqe të tjera, përdorni prefikset (si hapësira emrash) për identifikuesit dhe emrat e klasave. Përdorni emra të shkurtër, unikë të ndjekur nga një vizë ndarëse.

Përdorimi i hapësirave të emrave ndihmon në parandalimin e konflikteve të emrave dhe mund ta bëjë më të lehtë mirëmbajtjen e faqes. Për shembull, kur kërkoni dhe zëvendësoni.

Ndarësit në klasa dhe identifikuesit

Mos përdorni asgjë tjetër përveç vizës për të lidhur fjalët dhe shkurtesat në përzgjedhës për të përmirësuar lexueshmërinë dhe lehtësinë e të kuptuarit të kodit.

Nuk rekomandohet: /* I zhvlerësuar: fjalët "demo" dhe "imazh" nuk janë të ndara */ .demoimage () /* I vjetëruar: përdorni nënvizat në vend të vizës */ .error_status ()
Rekomanduar:/* Rekomandohet */ #video-id() .ads-sample()

Kaki

Duket joshëse për t'u marrë me ndryshimet në mënyrën se si shfletues të ndryshëm punojnë me filtrat CSS, hakimet ose zgjidhjet e tjera. Të gjitha këto qasje duhet të konsiderohen vetëm si mjeti i fundit nëse dëshironi një bazë kodi efikase dhe lehtësisht të mirëmbajtur. E thënë thjesht, lejimi i hakimeve dhe zbulimit të shfletuesit do ta dëmtojë projektin në planin afatgjatë, pasi do të thotë se projekti po ndjek rrugën e rezistencës më të vogël. Kjo e bën më të lehtë përdorimin e hackave dhe ju lejon t'i përdorni ato gjithnjë e më shpesh, gjë që do të rezultojë në përdorimin e tyre shumë shpesh.

Rregullat e formatimit CSS

Renditja e reklamave

Vendosni deklaratat sipas rendit alfabetik për të marrë kod të qëndrueshëm me të cilin është e lehtë të punohet.

Kur renditni, injoroni prefikset e shfletuesit. Në të njëjtën kohë, nëse përdoren disa parashtesa të shfletuesit për një pronë, ato gjithashtu duhet të renditen (për shembull -moz duhet të jetë më parë --Kit në internet )

Tërheqjet në blloqe.

Gjithmonë vendosni çdo përmbajtje blloku, të tilla si rregullat brenda rregullave ose deklaratave, për të treguar hierarkinë dhe për ta bërë kodin më të lehtë për t'u kuptuar.

Pas reklamave

Përdorni një pikëpresje pas çdo deklarate për konsistencën e kodit dhe për ta bërë më të lehtë shtimin e veçorive të reja.

Pas emrave të pronave

Përdorni gjithmonë një hapësirë ​​pas dy pikave (por jo më parë) në deklarata, për renditje në kod.

Përzgjedhës dege dhe reklama

Filloni çdo përzgjedhës ose deklaratë në një linjë të re.

Ndarja e rregullave

Gjithmonë vendosni një ndarje midis rregullave.

Rregullat meta të CSS

Rregullat e grupimit

Kombinoni rregullat në grupe sa herë që është e mundur. Përcaktoni grupet me komente dhe ndajini ato me ndërprerje rreshtash.

konkluzioni

Nëse jeni duke redaktuar kodin, merrni disa minuta për të kuptuar se si është shkruar. Nëse operatorët matematikorë janë të ndarë me hapësira, bëni të njëjtën gjë. Nëse komentet janë të rrethuara me kllapa ose viza, bëni të njëjtën gjë me komentet tuaja.

Ideja pas këtij udhëzuesi është krijimi i një fjalori të përbashkët që lejon zhvilluesit të fokusohen çfarë duan të shprehen, jo se si si.

Ne ofrojmë rregulla uniforme të projektimit që ju lejojnë të shkruani kodin në të njëjtin stil, por stili i kodit i përdorur tashmë në projekt është gjithashtu i rëndësishëm.

Nëse kodi juaj është shumë i ndryshëm nga ai ekzistues, ai mund ta largojë lexuesin nga ritmi dhe ta bëjë të vështirë leximin. Mundohuni ta shmangni këtë.

Shënim nga përkthyesi

Faleminderit të gjithëve që kanë lexuar deri në këtë pikë.

Etiketa: Shtoni etiketa

• 1. Dokumentet HTML janë dokumente strukturore.
• 2. Emrat e elementeve mund të shkruhen në çdo rast.
• 3. Emrat e atributeve mund të shkruhen në çdo rast.
• 4. Vlerat e atributeve janë të ndjeshme ndaj rasteve, veçanërisht adresave

picture.gif dhe picture.GIF janë të ndryshme!).

• 5. Emrat e elementeve nuk mund të përmbajnë hapësira.
• 6. Nëse vlerat e atributeve përmbajnë hapësira, ato duhet të jenë në thonjëza.
• 7. Hapësirat shtesë, skedat dhe kthimet e karrocave nuk merren parasysh dhe ngjeshen në një hapësirë.
• 8. Elementet mund të futen brenda njëri-tjetrit. Në këtë rast, duhet të respektohet rregulli i foleve. Brenda elementit të mbivendosur, përveç etiketës hapëse, duhet të ketë edhe një etiketë mbyllëse. Kryqëzimet janë të pasakta:

Struktura e dokumentit HTML

9. Elementet dhe atributet e panjohura injorohen nga shfletuesit ("toleranca e gabimeve").

Shumica e dokumenteve kanë elemente standarde si titujt, paragrafët ose listat. Duke përdorur etiketat HTML, ju mund t'i caktoni këta elementë, duke u ofruar shfletuesve të internetit informacionin minimal për shfaqjen e këtyre elementeve, duke ruajtur strukturën e përgjithshme dhe tërësinë informative të dokumenteve. Gjithçka që nevojitet për të lexuar një dokument HTML është një shfletues uebi që interpreton etiketat HTML dhe e shfaq dokumentin në ekran në formën që i jep autori.

Kur një shfletues web merr një dokument, ai përcakton se si duhet të interpretohet dokumenti. Etiketa e parë që shfaqet në një dokument duhet të jetë etiketa . Ky etiketë i tregon shfletuesit të internetit se dokumenti është shkruar duke përdorur HTML.

Komentet në HTML. Si çdo gjuhë, HTML ju lejon të futni komente në trupin e një dokumenti, të cilat ruhen kur dokumenti transmetohet përmes rrjetit, por nuk shfaqen nga shfletuesi. Shpesh disa etiketa ose ndërtime të tëra sintaksore "fshihen" në një koment nga versionet më të vjetra të shfletuesve që nuk janë në gjendje t'i përpunojnë ato. Komentet mund të shfaqen kudo në dokument dhe në çdo numër. Duhet mbajtur mend se komentet rrisin volumin e dokumentit, dhe rrjedhimisht kohën e shkarkimit.

Titulli i përgjithshëm i dokumentit. Etiketa e kokës së dokumentit duhet të përdoret menjëherë pas etiketës dhe askund tjetër në trupin e dokumentit. Ky etiketë është një përshkrim i përgjithshëm i dokumentit. Etiketa e fillimit vendosur direkt përpara etiketës , të vendosura brenda etiketave . Titulli i dokumentit nuk shfaqet kur vetë dokumenti shfaqet në dritare.

Etiketat e trupit të dokumentit. Etiketat e trupit të dokumentit identifikojnë komponentët e një dokumenti HTML që shfaqen në një dritare. Trupi i dokumentit mund të përmbajë lidhje me dokumente të tjera, tekst dhe informacione të tjera të formatuara.

Trupi i dokumentit. Trupi i dokumentit duhet të jetë midis etiketave dhe. Kjo është pjesa e dokumentit që shfaqet si tekst dhe informacion grafik (semantik) i dokumentit tuaj.

Nivelet e titullit<Нх>. Niveli i parë i titujve (më i madhi) caktohet 1, i ardhshëm 2, e kështu me radhë deri në 6. Shumica e shfletuesve mbështesin interpretimin e gjashtë niveleve të titujve, duke i dhënë secilit prej tyre stilin e vet. Për shumicën e rasteve, teksti i një titulli të tillë do të bëhet i trashë dhe një rresht bosh do të hiqet pas tekstit. Është e rëndësishme që këto etiketa të përcaktojnë strukturën logjike të dokumentit dhe të marrin pjesë në indeksimin nga motorët e kërkimit në internet. Titujt mbi nivelin e gjashtë nuk janë standard dhe mund të mos mbështeten nga shfletuesi.

etiketa e paragrafit<Р>. V ndryshe nga shumica e përpunuesve të tekstit, kthimet e transportit injorohen në një dokument HTML. Shfletuesi ndan paragrafët vetëm kur ka një etiketë<Р>. Nëse jo për të ndarë paragrafët me një etiketë<Р>, atëherë dokumenti do të duket si një paragraf i madh.

Etiketa e tekstit të paraformatuar

.
 Etiketë 
Ju lejon të paraqisni tekst me formatim specifik në ekran.  Teksti i paraformatuar përfundon me një etiketë fundore
.  Brenda tekstit të paraformatuar, lejohet të përdoret: furnizimi i linjës, karakteret e skedave (zhvendosni tetë karaktere në të djathtë), fontin jo-proporcional Courier të instaluar nga shfletuesi.

Lista e etiketave. Ekzistojnë tre lloje kryesore të listave në një dokument HTML: me numër, me pika, listë përshkrimi.
Ju mund të krijoni lista të mbivendosura duke përdorur etiketa të ndryshme të listave ose duke përsëritur njëra brenda tjetrës.  Për ta bërë këtë, ju vetëm duhet të vendosni një palë etiketash (fillimi dhe mbarimi) brenda një tjetri.  Nëse artikujt e listuar të mbivendosur do të kenë të njëjtët shënues të artikujve të listës varet nga shfletuesi.
Listat e numëruara.  V Në një listë të numëruar, shfletuesi automatikisht fut numrat e artikujve sipas renditjes.  Kjo do të thotë që nëse fshini një ose më shumë elementë të një liste të numëruar, numrat e mbetur do të rillogariten automatikisht.
 
dhe përfundon me etiketën
 
.

Listat e shënuara.  Për Për listat me pika, shfletuesi zakonisht përdor pika për artikullin e listës.  Pamja e shënuesit zakonisht konfigurohet nga përdoruesi i shfletuesit.
Një listë e numëruar fillon me një etiketë fillimi 
dhe përfundon me etiketën
.  Çdo artikull i listës fillon me një etiketë<ы>.

Formatimi i shkronjave. HTML lejon dy qasje për përzgjedhjen e fontit të fragmenteve të tekstit.  Nga njëra anë, mund të tregoni drejtpërdrejt se fonti në një seksion të caktuar të tekstit duhet të jetë i theksuar ose i pjerrët, d.m.th.  ndryshoni stilin fizik të tekstit.  Nga ana tjetër, është e mundur të shënohet një pjesë e tekstit si me një stil logjik jo normal, duke ia lënë interpretimin e atij stili shfletuesit.
Grafika brenda një dokumenti HTML. Një nga veçoritë më tërheqëse të WEB-it është aftësia për të përfshirë grafikë dhe lloje të tjera të dhënash në një dokument HTML.
Ekzistojnë dy mënyra për të përdorur grafikën në dokumentet HTML.  E para është futja e imazheve grafike në dokument, e cila i lejon përdoruesit të shohë imazhet drejtpërdrejt në kontekstin e elementeve të tjerë të dokumentit.  Kjo bëhet duke përdorur etiketën. .  Ky etiketë është një etiketë me pika, d.m.th.  nuk mbyllet.  Sintaksa e etiketës:

Parametri i kërkuar ka të njëjtën sintaksë si URL-ja standarde.  Kjo URL i tregon shfletuesit se ku
vizatim.  Vizatimi duhet të ruhet në një format grafik të mbështetur nga shfletuesi.  Sot këto janë formate GIF, JPG, PNG.  Ato mbështeten nga shumica e shfletuesve.
ALT = "tekst"
Ky element opsional specifikon tekstin që do të shfaqet nga një shfletues që nuk mbështet grafikë ose i ka të çaktivizuara grafikët e imazhit.  Ky është zakonisht një përshkrim i shkurtër i imazhit që përdoruesi mund ose do të jetë në gjendje ta shohë në ekran.  Nëse ky parametër mungon, atëherë shumica e shfletuesve shfaqin një kornizë bosh në vend të figurës.  Etiketë rekomandohet nëse përdoruesit përdorin një shfletues që nuk mbështet modalitetin grafik, si p.sh. Lynx, dhe për indeksimin e motorit të kërkimit.  Teksti është gjithashtu i dukshëm kur mbani kursorin e miut për ca kohë pa lëvizur mbi imazhin si një këshillë mjeti sistemi nën kursorin.
Shumica e shfletuesve ju lejojnë të përfshini një imazh të sfondit në dokumentin tuaj që do të kopjohet si pllakat e banjës dhe do të shfaqet si sfond i të gjithë dokumentit.  Kjo është mënyra e dytë.  Disa përdorues pëlqejnë grafikë në sfond, disa jo.  Zakonisht, një model i tejdukshëm pa vëmendje (letër sfondi) duket i mirë si sfond për shumicën e dokumenteve.
Lidhjet e hipertekstit janë një komponent kyç për ta bërë WEB-in tërheqës për përdoruesit.  Duke shtuar lidhje hiperteksti (në tekstin e mëtejmë referuar si lidhje), përdoruesi krijon një grup dokumentesh të lidhura dhe të strukturuara, të cilat i lejojnë atij të marrë informacionin që i nevojitet sa më shpejt dhe me lehtësi.
Lidhjet kanë një format standard, i cili i lejon shfletuesit t'i interpretojë ato dhe të kryejë funksionet e nevojshme (metodat e thirrjes) në varësi të llojit të lidhjes.  Lidhjet mund të tregojnë një dokument tjetër, një vendndodhje specifike në një dokument të caktuar ose të kryejnë funksione të tjera, të tilla si kërkimi i një skedari.  Hiperlidhja mund të jetë tekst ose imazh, ose të dyja.
Struktura e lidhjes në një dokument HTML. Në mënyrë që shfletuesi të shfaqë një lidhje me një URL, duhet të vendosni tekst ose një imazh brenda etiketës së hiperlidhjes.  Sintaksa HTML është si më poshtë:
<А HREF="URL">tekst-ose-imazh-për-të-theksuar-si-lidhje

Etiketë<А HREF="URL">hap përshkrimin e lidhjes dhe etiketën- e mbyll.  Çdo tekst midis këtyre dy etiketave theksohet në një mënyrë të veçantë nga shfletuesi i internetit.  Në mënyrë tipike, ky tekst shfaqet me një ngjyrë të nënvizuar dhe të theksuar.  Imazhi është i përshtatur nga një kornizë drejtkëndore.  Teksti që tregon URL-në nuk shfaqet nga shfletuesi, por përdoret vetëm për të kryer veprimet e tij të synuara kur lidhja aktivizohet (zakonisht kur miu klikon mbi tekstin e theksuar ose të nënvizuar).
Lidhje me etiketat brenda dokumentit. Ju mund të lidheni me seksione ose seksione të ndryshme të të njëjtit dokument duke përdorur etiketa të veçanta të fshehura për këto seksione.  Kjo ju lejon të lëvizni shpejt nga seksioni në seksion brenda një dokumenti pa pasur nevojë të lëvizni në ekran.  Sapo përdoruesi të klikojë në lidhjen, shfletuesi do ta zhvendosë atë në seksionin e specifikuar të dokumentit dhe rreshti që përmban etiketën e këtij seksioni do të vendoset në rreshtin e parë të dritares së shfletuesit (nëse ka "gjatësi të mjaftueshme " të dokumentit në dritaren e shfletuesit).