Struktura e një dokumenti html është etiketat kryesore. Struktura e saktë e dokumentit HTML dhe kodi i faqes

Ditë të mbarë, lexues dhe të ftuar të blogut. Unë jam përsëri me ju, asistenti juaj modest në mësimin e bazave të gjuhës së shënjimit të hipertekstit html. Në këtë artikull dua të prek temën e strukturimit të faqeve të internetit dhe t'ju prezantoj më nga afër me etiketat kryesore të gjuhës.

Tema e strukturës së faqes html është një nga më të rëndësishmet dhe është themeli i ndërtimit të faqes së internetit, pas zotërimit të së cilës mund të krijoni lehtësisht një dizajn individual për faqet dhe faqet tuaja të internetit. Për një studim të hollësishëm të temës, artikulli ofron jo vetëm material teorik, por edhe një shembull specifik të krijimit të një blogu. Tani është koha për të filluar mësimin!

Duket e frikshme, e lehtë për t'u programuar

Për ata që janë veçanërisht të shqetësuar, do ta filloj hyrjen me një shembull. Më poshtë është një kod i thjeshtë programi që kam shkruar posaçërisht për këtë artikull. Mos u shqetësoni. Çdo hap do t'i jepet një shpjegim i detajuar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

Etiketat bazë të gjuhës së shënjimit të hipertekstit Etiketat e reja që erdhën me html 5 Shembull i strukturimit të faqes Neni 1 Këtu është teksti i artikullit të parë. Neni 2 Këtu është teksti i artikullit të dytë.

Ky kod krijon një faqe blogu, e cila nga ana e saj ndahet në një kokë, një menu, një panel kryesor (paraqitje), i cili përmban një panel përmbajtjeje (përmbajtje) dhe një shirit anësor (shiritin anësor), si dhe një "footer" (footer ).

Le të fillojmë përmbledhjen nga rreshti i parë.

është një element gjuhësor detyra kryesore e të cilit është të tregojë llojin e dokumentit në internet. Në këtë mënyrë, shfletuesi përcakton se me çfarë standardi duhet të shfaqet faqja, pasi sot ekzistojnë disa versione të html.

Sidoqoftë, ia vlen t'i kushtohet vëmendje një njësie të re gjuhësore të quajtur stil. Siç mund ta keni marrë me mend nga emri, kjo etiketë përcakton stilin dhe rregullon renditjen e objekteve në faqe.

Logjikisht, mund të supozoj se pyetja u ngrit menjëherë në kokën tuaj: "Çfarë kodi i pakuptueshëm ndodhet në këtë pjesë të programit? Nuk duket aspak si html!” Dhe përgjigja është kjo: nuk është html që shkruhet në etiketën e stilit, por kodi css. Siç u përmend më parë, ky është një mjet për formatimin e pamjes së faqeve të internetit.

Div i referohet etiketave të bllokut të gjuhës së shënjimit. Përdoret për të izoluar disa fragmente me qëllim të modifikimit të tyre të mëtejshëm.

Blloqet menaxhohen duke përdorur fletë stili kaskadë, d.m.th. gjuha css Faqja e shembullit të internetit ka tre blloqe që janë stiluar duke përdorur atributet e klasës.

Kështu, kodi përmban:

• faqosja - blloku përgjegjës për pjesën kryesore të faqes,
• shirit anësor - shirit anësor (zakonisht i krijuar për lundrim),
• përmbajtja – blloku në të cilin ndodhen postimet në blog.

Në elementin me përkufizimin e klasës së shiritit anësor, unë përcaktoj një listë të pa renditur duke përdorur elementet

Dhe
• . Në një bllok me përmbajtje të klasës së stilit – etiketat e titullit

  dhe paragrafi

  Tani le t'i hedhim një vështrim më të afërt bllokut

  .

  HTML apo akoma HTML 5? Si të njohim?

  Në një div me klasën e stilit të paraqitjes, përveç blloqeve të tjera, ka etiketa të tilla si header, menu dhe footer. Ndryshe nga elementët e tjerë në shembull, këto janë specifike për platformën HTML 5.

  Kështu, titulli është një element i gjuhës së shënjimit të hipertekstit, zakonisht duke krijuar kokën e faqeve të faqes ose seksioneve në të cilat futet titulli. Vlen të përmendet se shfletuesi i Internet Explorer nuk mbështet kokën deri në versionin 8, por shfaq përmbajtjen e tij.

  Qëllimi kryesor i etiketës së menusë është të shfaqë artikujt e menysë. Ngjashëm me elementët për krijimin e listave të numëruara dhe të pa numëruara, brenda kontejnerit të menysë, çdo artikull i përmbajtjes përfshihet në një etiketë të çiftuar

  .

  

  Dhe së fundi, njësia e gjuhës së fundit. Në zhargonin e zhvilluesve të uebit, kjo nganjëherë quhet "futeri" i një faqeje. Ky etiketë ndodhet në fund të faqes ose seksioneve. Fundi zakonisht përmban informacione në lidhje me autorësinë e një burimi të caktuar, datën e krijimit të dokumentit, informacionin e sfondit ose materiale të tjera që nuk kërkojnë vëmendje të veçantë nga lexuesit e burimit në internet.

  Mjete për krijimin e burimeve në ueb

  Shumë produkte softuerike janë krijuar për të zhvilluar faqe interneti. Në mënyrë konvencionale, ato mund të ndahen në programe të thjeshta redaktuese dhe produkte softuerësh të orientuar profesionalisht.

  Kur krijoni një faqe interneti, gjëja e parë që duhet të imagjinoni është se si është formuar faqja e internetit. Ky është një lloj "themeli" në ndërtimin e faqes në internet. Prandaj, përpara se të hulumtoni në teknologjitë më komplekse të krijimit të faqeve të internetit, rekomandohet të keni të paktën njohuri themelore të HTML. Në këtë mësim do të njihemi me HTML, le ta zgjidhim Struktura e dokumentit HTML dhe të përdorin shembuj praktikë për të konsoliduar njohuritë e marra.

  Çfarë është HTML?

  HTML qëndron për HyperText Markup Language. Kjo gjuhë është përgjegjëse për mënyrën se si do të shfaqet hiperteksti në faqet e sajtit. Tani le të kuptojmë se çfarë është hiperteksti? Nuk është sekret që një faqe interneti e vetme mund të përmbajë shumë lloje të ndryshme informacioni, qoftë tekst, disa tabela, grafikë, video, audio, etj. Pra, i gjithë ky informacion mund të quhet me një fjalë - hipertekst.

  Vini re se HTML është një gjuhë shënjimi, jo një gjuhë programimi. Kjo gjuhë nuk ka asnjë funksion logjik dhe është e pamundur të kryhet ndonjë llogaritje matematikore në të. Faqet HTML kanë shtrirje .html ose .htm dhe përpunohen nga shfletuesit - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera, etj.

  Tani le të kuptojmë se si shfletuesi kupton se çfarë dhe si të shfaqë në një faqe në internet? Është shumë e thjeshtë. Gjuha e shënjimit të hipertekstit HTML ka komanda të integruara të quajtura etiketa. Është prej tyre që shfletuesi është i orientuar.

  Struktura e dokumentit HTML

  Çdo dokument HTML (faqe ueb) duhet të ketë një strukturë të caktuar. Kjo do të shmangë problemet e mundshme gjatë hapjes së faqeve në shfletues. Si shembull, le të shohim një faqe që përmban kodin e mëposhtëm HTML:

  ...
  
  

  Le të shohim se çfarë përfshihet në këtë strukturë në rend:

  1. Gjëja e parë që shkon në një dokument HTML është treguesi i versionit (rreshti i parë). Për funksionimin e saktë, kjo linjë duhet të specifikohet kur shtroni faqen e internetit.

  3. Më pas vjen zona për pjesën e sipërme të faqes (header). Etiketa përdoret për këtë . Në kokë ne tregojmë emrin e faqes sonë duke vendosur titullin e faqes midis etiketave . Më pas, tregohet kodimi i dokumentit HTML (rreshti i pestë). Kjo bëhet për të shfaqur saktë alfabetin cirilik. Mbyllja e zonës së kokës me një etiketë.

  4. Meta etiketa “përshkrim” - një përmbledhje e faqes, e destinuar për motorët e kërkimit. Kjo etiketë është e rëndësishme për optimizimin e motorëve të kërkimit dhe duhet të plotësohet.

  5. Meta tag “fjalë kyçe” - fjalë kyçe që mund të shfaqen në faqe. Ky etiketë është menduar gjithashtu për motorët e kërkimit. Kjo etiketë përdoret rrallë në ditët e sotme.

  6. Trupi i faqes hapet me një etiketë dhe mbyllet, në përputhje me rrethanat, me etiketën
  
  . Trupi i një faqe interneti zakonisht përmban përmbajtjen kryesore - tekst, video, audio dhe informacione të tjera.

  Kështu, ne i jemi përgjigjur pyetjes se çfarë është HTML dhe kemi studiuar strukturën e një dokumenti HTML. Informacioni i marrë në këtë mësim janë koncepte bazë, nuk mund të bëni pa to. Ne do të flasim për gjëra më komplekse në mësimet e tjera.

  Sot do të flasim për semantikën në HTML5. Unë kam shkruar tashmë një postim të shkurtër përmbledhës rreth. Unë rekomandoj që të njiheni me të përpara se të lexoni këtë artikull. Tani do ta shikojmë këtë çështje në më shumë detaje, se si të kompozojmë saktë dhe me kompetencë strukturën semantike të një dokumenti HTML5.

  Në këtë artikull ne gradualisht do të krijojmë një faqe HTML dhe do ta dekorojmë me etiketa semantike HTML5.

  

  Figura - Struktura semantike për një faqe HTML5.

  DOCTYPE dhe meta etiketat në titullin e faqes

  Le të fillojmë me një shabllon standard të dokumentit HTML5 dhe të shtojmë meta etiketat në kokë:

  Shtova një etiketë e cila është përgjegjëse për fjalë kyçe. Dhe etiketoni e cila është përgjegjëse për përshkrimin e faqes. Për optimizimin e SEO, kërkohen këto etiketa. Është gjithashtu e nevojshme të plotësoni saktë etiketën , 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ë përbërësit e një dokumenti HTML të shfaqur 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) përcaktohet me numrin 1, tjetri me 2, e kështu me radhë deri në numrin 6. Shumica e shfletuesve mbështesin interpretimin e gjashtë niveleve të titujve, duke përcaktuar secilin prej tyre stilin e vet. Në shumicën e rasteve, teksti i një titulli të tillë do të bëhet i guximshëm dhe do të ketë një rresht bosh 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<Р>. NË Ndryshe nga shumica e përpunuesve të tekstit, kthimet e transportit injorohen në një dokument HTML. Shfletuesi ndan paragrafët vetëm nëse ka një etiketë<Р>. Nëse nuk i ndani paragrafët me një etiketë<Р>, atëherë dokumenti do të duket si një paragraf i madh.

  Etiketa e tekstit të paraformatuar

  .
   Etiketë 
  Lejon që teksti të paraqitet me formatim specifik në ekran.  Teksti i paraformatuar përfundon me një etiketë fundore
  .  Brenda tekstit të paraformatuar, mund të përdorni: furnizimin e linjës, karakteret e skedave (zhvendosja me tetë karaktere në të djathtë), fontin joproporcional Courier të instaluar nga shfletuesi.
  
  Lista e etiketave. Ekzistojnë tre lloje kryesore të listave në një dokument HTML: me numër, me pika dhe listë përshkrimi.
  Ju mund të krijoni lista të mbivendosura duke përdorur etiketa të ndryshme të listave ose duke përsëritur ato brenda të tjerëve.  Për ta bërë këtë, thjesht duhet të vendosni një palë etiketash (fillimi dhe mbarimi) brenda tjetrës.  Nëse artikujt e listuar të mbivendosur do të kenë të njëjtët shënues që tregojnë artikullin e listës, varet nga shfletuesi.
  Listat e numëruara.  NË 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ë artikuj nga një listë me numër, numrat e mbetur do të rillogariten automatikisht.
   
  dhe përfundon me etiketën
   
  .
  
  Listat me pika.  Për Për listat me pika, shfletuesi zakonisht përdor pika për artikullin e listës.  Lloji i 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 element 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 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ë grafike dhe lloje të tjera të dhënash në një dokument HTML.
  Ekzistojnë dy mënyra për të përdorur grafikë në dokumentet HTML.  E para është futja e imazheve grafike në një dokument, i cili 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ë me pika, d.m.th.  nuk mbyllet.  Sintaksa e etiketës:
  
  Parametri i kërkuar ka të njëjtën sintaksë si një URL 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 në një shfletues që nuk mbështet grafikë ose me grafikë imazhesh të çaktivizuara.  Zakonisht ky është një përshkrim i shkurtër i imazhit që përdoruesi mund ose do të jetë në gjendje të 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 jo grafik, siç është 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ë udhëzues sistemi nën kursorin.
  Shumica e shfletuesve ju lejojnë të përfshini një imazh të sfondit në dokumentin tuaj, i cili do të kopjohet si pllakat e banjës dhe do të shfaqet si sfondi i të gjithë dokumentit.  Kjo është mënyra e dytë.  Disa përdorues pëlqejnë grafikë në sfond, disa jo.  Një model i tejdukshëm pa vëmendje (letër-muri) zakonisht duket i mirë si sfond për shumicën e dokumenteve.
  Lidhjet e hipertekstit janë një komponent kyç që e bën WEB-in tërheqës për përdoruesit.  Duke shtuar lidhje hiperteksti (në tekstin e mëtejmë referuar si lidhje), përdoruesi bën të lidhur dhe strukturuar grupin e dokumenteve, gjë që i lejon atij të marrë informacionin që i nevojitet sa më shpejt dhe me lehtësi.
  Lidhjet kanë një format standard, i cili lejon shfletuesin 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 brenda një dokumenti ose të kryejnë funksione të tjera, si p.sh. kërkimi i një skedari.  Ju mund të përdorni tekstin ose imazhin ose të dyja si një lidhje hiperlink.
  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-që-do-të-theksohet-si-lidhje
  
  Etiketë<А HREF="URL">hap përshkrimin e lidhjes dhe etiketën– e mbyll.  Çdo tekst i vendosur midis këtyre dy etiketave theksohet në një mënyrë të veçantë nga shfletuesi i internetit.  Zakonisht ky tekst shfaqet i nënvizuar dhe i theksuar.  Imazhi është i përshtatur nga një kornizë drejtkëndëshe.  Teksti që përfaqëson URL-në nuk shfaqet nga shfletuesi, por përdoret vetëm për të kryer veprimet e synuara kur lidhja aktivizohet (zakonisht duke klikuar mbi tekstin e theksuar ose të nënvizuar).
  Lidhje me etiketat brenda dokumentit. Ju mund të lidheni me zona ose seksione të ndryshme të të njëjtit dokument duke përdorur etiketa të veçanta të fshehura për ato seksione.  Kjo ju lejon të lëvizni shpejt nga seksioni në seksion brenda një dokumenti pa lëvizur 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 për këtë seksion do të vendoset në rreshtin e parë të dritares së shfletuesit (nëse "gjatësia" e dokumenti në dritaren e shfletuesit është i mjaftueshëm).
  Çdo dokument HTML duhet të fillojë me etiketën <
  HTML>
   dhe përfundoni me etiketën HTML>
  .  Këto etiketa tregojnë se linjat ndërmjet tyre përfaqësojnë një dokument të vetëm HTML.  Për më tepër, mund të shihni se një skedar HTML në tërësi është një element i gjuhës HTML.
  Gjithashtu, dokumenti HTML duhet të përmbajë elementet HEAD (informacioni i dokumentit) dhe BODY (trupi i dokumentit).
  Seksioni i dokumenteveKOKË
  Seksioni HEAD i një dokumenti përcakton titullin e tij dhe gjithashtu përmban informacion shtesë rreth dokumentit për shfletuesin.  Ky seksion është opsional, por rekomandohet që ta përdorni gjithmonë në dokumentet tuaja HTML, pasi një titull i shkruar mirë mund të jetë mjaft i dobishëm.
  Seksioni i kokës fillon me etiketën <
  KOKË>
   dhe menjëherë ndjek etiketën .  Midis etiketave hapëse dhe mbyllëse të elementit HEAD janë elementë të tjerë të kokës.
  Titulli i dokumentit
  Për t'i dhënë një emër një dokumenti HTML, etiketa është <
  TITULLI>
  .  Ky emër do të shfaqet në titullin e dritares së shfletuesit.  Titulli shkruhet midis etiketave  dhe është një rresht teksti.  Gjatësia e kësaj rreshti mund të jetë çdo, por rekomandohet ta bëni atë jo më shumë se 60 karaktere.  Elementi TITLE duhet të shfaqet vetëm në seksionin HEAD.
  Seksioni i dokumenteveTRUPI
  Ky seksion i dokumentit përmban informacionin që shfaqet në dritaren e shfletuesit.  Seksioni BODY duhet të fillojë me etiketën <
  TRUPI>
   dhe përfundoni me etiketën TRUPI>
  , ndërmjet të cilave ndodhen elementet HTML që përbëjnë përmbajtjen e dokumentit.
  Specifikimi i artikullitTRUPI
  Etiketë ka një sërë atributesh që përcaktojnë pamjen e dokumentit.  Më poshtë është specifikimi i etiketës .
  TEXT = "ngjyra e tekstit"
  BGCOLOR = "ngjyra e sfondit"
  BACKGROUND="adresa e imazhit të sfondit"
  Atributi TEXT specifikon ngjyrën e shkronjave për të gjithë dokumentin në RGB ose shënimin e karaktereve.  Si parazgjedhje (nëse ky atribut nuk është specifikuar), përdoren cilësimet e shfletuesit.
  Atributi BGCOLOR specifikon ngjyrën e sfondit të dritares së shfletuesit të dokumentit në RGB ose shënim simbolik.  Cilësimet e shfletuesit përdoren si parazgjedhje.
  Atributi BACKGROUND ju lejon të specifikoni adresën dhe emrin e figurës së përdorur si sfond.  Ky vizatim do të riprodhohet dhe shpërndahet në sfondin e dokumentit.
  Atributet LINK, VLINK dhe ALINK specifikojnë ngjyrat e hiperlidhjeve në RGB ose simbolike.  Cilësimet e shfletuesit përdoren si parazgjedhje.  Një hiperlidhje e pavizituar është një hiperlidhje që nuk është përdorur ende për të lundruar në një dokument tjetër.  Një hiperlidhje e vizituar është një hiperlidhje që tashmë është përdorur për të lundruar në një dokument tjetër.  Hiperlidhja aktive – një hiperlidhje me dokumentin në të cilin po lundrohet aktualisht.
  Këshilla për përdorimin e atributeve të etiketës BODY
   Nëse specifikoni të paktën një ngjyrë në etiketën BODY, atëherë specifikoni edhe të tjerat.  Kjo për faktin se përdoruesi mund të vendosë cilësimet e ngjyrave të shfletuesit të tij pasi është më i përshtatshëm për të.  Përcaktimi i vetëm një ngjyre mund të rezultojë në përzierjen e tekstit në ngjyrën e sfondit për disa përdorues.  Si rezultat, shikimi i dokumentit do të jetë i vështirë.
   Zgjidhni ngjyrën e tekstit në mënyrë që të “funksionojë” me ngjyrën e sfondit ose me ngjyrat kryesore të figurës.  Për shembull, ngjyra e kuqe në të gjelbër mund të shkaktojë probleme serioze për një numër të konsiderueshëm njerëzish.
   Si BGCOLOR ashtu edhe BACKGROUND mund të specifikohen në elementin BODY.  Në këtë rast, shfletuesi i jep përparësi BACKGROUND, por nëse imazhi i sfondit nuk mund të ngarkohet, do të përdoret BGCOLOR.  Prandaj, përpiquni të vendosni që ngjyra e sfondit të jetë e ngjashme me ngjyrën e imazhit të sfondit në mënyrë që të mos prishni ekuilibrin e ngjyrave të dokumentit.
  
  
  
  
  
  
  
      
   
      
  Mund të jetë e dobishme të lexoni:
      
  
       
  Përcjellja e lojës - Test i ndërlikuar;
   
  Tmerret më të tmerrshme.  Histori rrëqethëse.  Tmerret më të tmerrshme të kampit histori horror arkivol mbi rrota;
   
  Orë për fëmijë: llojet, tiparet e tyre;
   
  Nuk mund të ruhet formulari i dokumentit (fatura) në formatin Excel - butonat "Ruaj" dhe "Ruaj si" nuk janë të disponueshëm.;
   
  Si të ndryshoni madhësinë e qelizave në Excel dhe t'i bëni ato të njëjta Si të ndryshoni gjerësinë e të gjitha kolonave në Excel;
   
  Cilësimet bazë të hapësirës së punës AutoCAD Si të krijoni një sistem koordinativ të personalizuar në AutoCAD;
   
  Përkthimi i numrave në sistemet e numrave pozicional;
   
  Rezonanca e tensionit në një qark oscilues në seri;