Shmangia e gabimeve të zakonshme në shënimin HTML5. Bllokimi i paraqitjes së div - bazat Çfarë do të thotë div?
Çdo faqe interneti përbëhet nga elementë të vendosur në të, dhe faqosja e bllokut div është pothuajse gjithmonë përgjegjëse për vendosjen e tyre. Sigurisht, ekziston edhe një paraqitje tabele duke përdorur etiketa
,
,
, dhe madje ka debate se cili sistem është më i mirë për t'u përdorur - i bazuar në bllok ose në tabelë. Sidoqoftë, në realitet, aktualisht nuk do të gjeni asnjë nga faqet moderne, të njohura dhe të përshtatshme që përdorin vetëm paraqitjen tabelare. Në rastin më të mirë, përdoret vetëm për atë që synohet - domethënë për të krijuar tabela, por jo për të formuar vetë strukturën e sitit.
Fakti është se paraqitja div e faqes ju lejon të vendosni shumë veti CSS që nuk janë të disponueshme për tabela. Për më tepër, pengesa më e madhe e një sistemi tabele është se tabela nuk do të shfaqet në ekran derisa të jetë ngarkuar plotësisht nga shfletuesi. Nëse i gjithë faqja është bërë në një tabelë, atëherë ajo do të shfaqet në ekran vetëm pasi të jetë ngarkuar plotësisht i gjithë kodi html i faqes.
Etiketa DIV dhe prona float
Baza e sistemit të bllokut është etiketa
, e cila është enë për përmbajtjen. Mund të përmbajë edhe kontejnerë të tjerë brenda tij .
Përdorimi i një etikete DIV nuk është më i vështirë se . Si rregull, struktura standarde e sitit formohet si më poshtë: ekziston një enë kryesore
(shpesh i caktohet një klasë e quajtur mbështjellës, kontejner, kryesor, etj.). Brenda këtij kontejneri ka blloqe të menusë, pjesës së përmbajtjes dhe shiritit anësor.
Si parazgjedhje, çdo bllok i ri vendoset në një linjë të re. Për të pozicionuar një bllok në të majtë ose në të djathtë të një tjetri (për shembull, për të vendosur një shirit anësor në të djathtë), përdoret vetia float. Si parazgjedhje ka vlerën "asnjë", por gjithashtu mund të vendosni vlerat "majtas" dhe "djathtas".
Le të shohim këtë pronë duke përdorur një shembull me dy blloqe.
Blloku i përmbajtjes
Blloku i shiritit anësor
Ky kod do të japë rezultatin e mëposhtëm:
pronë e qartë
Është e rëndësishme të merret parasysh se vetia float vlen jo vetëm për vetë bllokun në të cilin është regjistruar, por edhe për elementin pasues që do të pasojë këtë bllok. Kjo do të thotë, nëse shtojmë një bllok tjetër në dy blloqet e përshkruara më sipër pa specifikuar ndonjë veçori për të, atëherë ai nuk do të vendoset në një linjë të re, por do të fillojë në të djathtë të bllokut të dytë.
Për të shmangur këtë, faqosja e bllokut div përdor veçorinë e qartë, e cila duhet të vendoset për bllokun që duam të pozicionojmë në një linjë të re. Më shpesh, është vendosur në "të dyja" për këtë, por ne gjithashtu mund ta vendosim atë në "majtas" ose "djathtas" nëse duam jo vetëm të pozicionojmë bllokun në një linjë të re, por edhe të vendosim shtrirjen e tij.
Le të shtojmë një element të ri në shembullin e mësipërm:
Blloku i përmbajtjes
Blloku i shiritit anësor
Blloku i ri ndodhet më poshtë
Rezultati:
Dhënia në paraqitjen e bllokut
Përveç vendndodhjes së blloqeve, është e rëndësishme të vendosni dhëmbëzimet si midis blloqeve ashtu edhe brenda tyre. Për këtë, përdoren përkatësisht vetitë e marzhit dhe të mbushjes.
Tërheqjet vendosen veçmas për pjesët e sipërme, djathtas, të poshtme dhe të majta të elementit. Ato mund të specifikohen në një rresht duke renditur katër vlera:
Margjina: 20px 10px 0 40px
Një bllok me këto parametra do të pozicionohet 20 pikselë poshtë elementit prind, dhjetë piksel nga elementi i djathtë, do të ketë mbushje zero në fund dhe do të ketë 40 pikselë mbushje në të majtë.
Nëse të gjithë të njëjtët tregues janë specifikuar në veçorinë e mbushjes, atëherë këta do të jenë mbushja e brendshme për përmbajtjen në lidhje me kufijtë e bllokut në të cilin ndodhet.
Ju gjithashtu mund të vendosni vetitë individuale për skajet individuale duke përdorur margin-lart, margin-bottom, margin-majtas, margin-djathtas (dhe në mënyrë të ngjashme për mbushjen). Në këtë rast, nëse ndonjë nga skajet nuk është specifikuar, atëherë dhëmbëzimi në anën e tij do të jetë zero ose do të përcaktohet nga vetitë e përgjithshme css të specifikuara për blloqet në faqe.
Elementi
është një element blloku dhe ka për qëllim të nxjerrë në pah një fragment të një dokumenti në mënyrë që të ndryshojë pamjen e përmbajtjes. Në mënyrë tipike, pamja e një blloku kontrollohet duke përdorur stile. Për të mos përshkruar stilin brenda etiketës çdo herë, mund ta ndani stilin në një fletë stili të jashtëm dhe të shtoni një parametër të klasës ose id në etiketën me emrin e përzgjedhësit.
Ashtu si me elementët e tjerë të bllokut, përmbajtja e etiketës
gjithmonë fillon në një linjë të re. Pas tij shtohet gjithashtu një ndërprerje e linjës.
Sintaksë
...
Opsione
align Vendos shtrirjen e përmbajtjes së etiketës
. titulli Shton një këshillë mjeti në përmbajtje.
Etiketa mbyllëse
E detyrueshme.
Shembulli 1: Përdorimi i një etikete
Etiketa DIV
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Përshkrimi i parametrave të etiketës DIV
Parametri ALIGN
HTML:
3.2
4
XHTML:
1.0
1.1
Përshkrim
Përafrimi i përmbajtjes së kontejnerit
në buzë.
Sintaksë
...
Argumentet
qendër Rreshton tekstin në qendër. Teksti vendoset horizontalisht në dritaren ose kontejnerin e shfletuesit ku ndodhet blloku i tekstit. Linjat e tekstit duket se janë të lidhura në një bosht të padukshëm që shkon poshtë qendrës së faqes së internetit. Kjo metodë e shtrirjes përdoret në mënyrë aktive në tituj dhe nënshkrime të ndryshme, të tilla si titrat, ajo i jep një pamje zyrtare dhe solide dizajnit të tekstit. Në të gjitha rastet e tjera, shtrirja në qendër përdoret rrallë për arsye se është e papërshtatshme të lexosh një sasi të madhe të tekstit të tillë. majtas Rreshton tekstin në të majtë. Në këtë rast, linjat e tekstit janë rreshtuar në të majtë, dhe skaji i djathtë është rregulluar si një shkallë. Kjo metodë e shtrirjes është më e popullarizuara në faqet e internetit, pasi i lejon përdoruesit të kërkojë lehtësisht një rresht të ri dhe të lexojë me lehtësi tekst të madh. djathtas Rreshton tekstin djathtas. Kjo metodë e shtrirjes vepron si një antagonist ndaj llojit të mëparshëm. Gjegjësisht, rreshtat e tekstit janë të rreshtuara në skajin e djathtë, por e majta mbetet "e grisur". Për shkak se skaji i majtë nuk është i rreshtuar, ku lexohen rreshtat e rinj, ky tekst është më i vështirë për t'u lexuar sesa nëse do të lihej i rreshtuar. Prandaj, shtrirja djathtas zakonisht përdoret për tituj të shkurtër me jo më shumë se tre rreshta. Ne nuk konsiderojmë vende specifike ku teksti duhet të lexohet nga e djathta në të majtë, ku ndoshta një metodë e ngjashme rreshtimi do të jetë e dobishme. Po ku në vendin tonë keni parë faqe të tilla? justifiko Justified, që do të thotë të rreshtuar majtas dhe djathtas në të njëjtën kohë. Për të kryer këtë veprim, shfletuesi në këtë rast shton hapësira midis fjalëve.
Vlera e paracaktuar
Ngjashëm me CSS
Shembulli 2: Rreshtimi i tekstit
Etiketa DIV, rreshtoni parametrin
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Parametri TITLE
HTML:
3.2
4
XHTML:
1.0
1.1
Përshkrim
Shton tekst shpjegues në kontejner
në formën e një këshille mjeti që shfaqet kur kursori i miut qëndron pezull mbi përmbajtjen.
Sintaksë
...
Argumentet
Çdo varg teksti. Vargu duhet të jetë i mbyllur në thonjëza të dyfishta ose të vetme.
Vlera e paracaktuar
Shembulli 3. Këshillë për tekst
Etiketa DIV, parametri i titullit
title="Peshku kanonik"
!}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Sot është e vështirë të gjesh një faqe ku nuk përdoret një etiketë kaq e nevojshme dhe e rëndësishme
. Shikoni kodin e çdo faqeje që gjeni në internet dhe do të shihni se etiketa
ndodh më shpesh se etiketat e tjera në HTML dokument. Arsyeja për këtë popullaritet është faqosja e bllokut. Me fjalë të tjera, duke përdorur një etiketë blloku
faqet e internetit janë duke u krijuar.
Falë kësaj etikete të gjithë HTML Kodi i dokumentit ka një strukturë të qartë dhe logjikisht të kuptueshme. Është e lehtë për t'u kuptuar jo vetëm për projektuesin e paraqitjes, por edhe për specialistë të tjerë që punojnë së bashku në një projekt. Megjithatë, etiketa
pa "satelitët" e tij - përzgjedhësit id Dhe klasës pa vlerë.
Klasat dhe ID-të
Klasat (klasë) dhe identifikuesit (id) kryejnë të njëjtat detyra. Ata vendosin stile të ndryshme për etiketën
, si në të jashtme CSS skedar, dhe brenda dokumentit, përmes etiketës stil. Këtu është e nevojshme të sqarohet se ato punojnë në lidhje jo vetëm me etiketën
, por edhe me shumë etiketa të tjera.
Konsideroni kodin e mëposhtëm të shënjimit HTML si shembull:
Nuk është kurrë vonë për të mësuar!
Përsëritja është nëna e mësimdhënies
Le të vendosim pamjen HTML duke përdorur dokumentin CSS skedari i stilit:
/* Shenja # para emrit - përcaktimi id */
#përmbajtje ( mbushje: 20 px; madhësia e shkronjave: 20 px; ngjyra: e zezë; sfond: #ddd; kufiri: 1px e zezë e fortë; gjerësia: 250 px;
}
/* (.) përpara se emri tregon klasën */
përmbajtja ( mbushje: 20 px; madhësia e shkronjave: 20 px; ngjyra: e zezë; sfond: #ddd; kufiri: 1px e zezë e fortë; gjerësia: 250 px;
}
Emrat id Dhe klasës vendoset nga vetë zhvilluesi në mënyrë arbitrare, bazuar në ngarkesën semantike. Ne thjesht i emërtuam ato përmbajtjes. Ju nuk mund të jepni emra me shkronja ruse, mund të përdorni numra dhe simbolin e vizës (-)
dhe nënvizon (_)
.
Ne shohim dy blloqe absolutisht identike. Një përzgjedhës aplikohet në bllokun e sipërm id, dhe zgjedhësi do të aplikohet në bllokun e poshtëm klasës. Ju mund të pyesni se ku është ndryshimi midis divs id dhe klasa? Thjesht nga jashtë, ende nuk ka dallim, për sa kohë që aplikojmë një nga një id Dhe klasës në një faqe.
Cili është atëherë ndryshimi midis klasës Dhe id?
Dallimi qëndron në vetë emrin id, do të thotë identifikues, domethënë unik. Dallimi kryesor nga klasa është se përzgjedhësi id mund të përdoret vetëm një herë në një faqe. Përzgjedhësi klasës, përkundrazi, mund të përdoret një numër i pafundëm herë në një faqe.
Për shembull:
Përmbajtja /* mund të aplikohet në çdo etiketë */ div.content /* vlen vetëm për etiketat div me class .content */ div#content /* për id një hyrje e tillë nuk ka kuptim, është unike */
Gjithashtu vlen të theksohet se id vetitë kanë prioritet më të lartë se vetitë e klasës.
tekst i kuq
Ky shembull tregon qartë se pavarësisht faktit se klasës me tekst blu është më poshtë, teksti është ende i kuq. Nëse id nuk kishte përparësi, teksti do të ishte blu.
Përveç kësaj, ju mund të caktoni disa klasa në një etiketë specifike, duke i renditur ato të ndara nga një hapësirë. Ky sistem ju lejon të mos krijoni klasa të panevojshme, por t'i përdorni ato në mënyrë më efikase. U id Natyrisht, nuk ka asnjë përzgjedhës për këtë.
Ekziston një ndryshim më i rëndësishëm, ai ka të bëjë me programuesit. Nëse planifikoni të aksesoni një element HTML dokument përmes gjuhës JavaScript, atëherë duhet ta përdorni patjetër id, zbatimi i kësaj përmes klasave është shumë më i vështirë.
Kur është më mirë të përdoret id, dhe kur klasës?
Nëse ndonjë nga elementët në faqe, për shembull, kreu i faqes, menyja, butoni, përdoret vetëm një herë, atëherë duhet të përdorni id. Përzgjedhësi klasës zbatohet për një etiketë ose për etiketa të ndryshme aq herë sa shfaqen në faqe. Për shembull, fotografi, lista me pika, paragrafë.
Si përfundim, dua të jap këshilla miqësore për të gjithë ata që duan të mësojnë se si të krijojnë vetë faqet e internetit. Është shumë kohë dhe joefektive të fitosh njohuri për ndërtimin e faqeve të internetit nga artikujt dhe mësimet. Ju lutemi kushtojini vëmendje kësaj teme. Ky është një nga kurset më të mira për fillestarët.
). U krijua një tabelë e madhe, e cila më pas u nda në disa zona: kreu, blloku i majtë, blloku i djathtë, qendra dhe fundi. Me ardhjen e etiketës
të gjithë webmasterët filluan ta përdorin atë për të krijuar "skeletin" e faqes së ardhshme. Për shembull, kjo është se si mund të duket struktura e faqes së faqes:
Sintaksa e etiketës
...
Etiketa HTML
është një element blloku. Atributi i tij më i rëndësishëm është klasa. Duke e përdorur atë, ju mund të krijoni blloqe me stilet e dëshiruara CSS.
Shembull. Duke përdorur një bllok div
Shembull i përdorimit të një blloku div
Shembull i përdorimit të një blloku div
Ky është një shembull bazë i përdorimit të etiketës
. Aftësitë e tij shtrihen shumë përtej qëllimit të këtij shembulli. Për shembull, duke përdorur këtë etiketë ju mund të krijoni menu të bukura (shihni se si të krijoni një menu drop-down në css ")
Tani le të hedhim një vështrim më të afërt në të gjitha atributet e etiketës div.
Etiketoni Atributet dhe Vetitë
align="parameter" - vendos shtrirjen. Mund të marrë vlerat e mëposhtme:
qendër - rreshtoni tekstin në qendër
majtas - rreshtoni tekstin në të majtë
djathtas - rreshtoni tekstin në të djathtë
justifiko - shtrirje majtas dhe djathtas
title="(! GJUHË:tekst"
- всплывающая подсказка к тегу. Почти никогда не используется.!}
class="name" - përcakton anëtarësimin në klasë.
style="stilet e ndara me presje"- aftësia për të vendosur stile.
Rastet e përdorimit praktik
Le të shohim disa shembuj praktikë me etiketën
.
Shembull. Përqendrimi i përmbajtjes duke përdorur div
Ky tekst do të jetë në qendër
Konvertohet në sa vijon në faqe:
Ky tekst do të jetë në qendër
Tani në vend të etiketës
ti mund te shkruash dhe teksti do të jetë në qendër. Kjo përputhet me kërkesat e standardit HTML (validimi i faqes).
Shembull. Kornizë e bukur me div
Shfaqja e tekstit në një bllok të bukur
Konvertohet në sa vijon në faqe:
Shfaqja e tekstit në një bllok të bukur
Shembull. Zbatimi i ngacmuesve në faqen e internetit
Lehtësia e etiketës div është se ajo vendoset në blloqe në lidhje me njëri-tjetrin. Një shembull praktik është prodhimi i blloqeve të njëpasnjëshme që do të mbyllen automatikisht në një linjë të re kur të arrihet fundi.
Ka shumë elementë të tillë që mund të bëhen. Si rezultat, ju merrni diçka të tillë.
Vetëm dhjetë vjet më parë, e ashtuquajtura faqosja e tabelës u përdor më shpesh në RuNet. Për shkak të faktit se standardet e disa shfletuesve ndryshonin ndjeshëm nga njëri-tjetri, ishte e nevojshme të kërkohej një zgjidhje që do të lejonte që dokumenti i Internetit të shfaqej saktë në të gjitha aplikacionet. Por koha kaloi, standardet u zhvilluan dhe tabela mjaft e ngurtë dhe jofleksibile u zëvendësua nga një e ndryshueshme dhe e përgjegjshme Në krye të një teknologjie të tillë është parimi i përdorimit të elementeve
. Dokumentet HTML në pjesën më të madhe filluan të ndërtohen në bazë të blloqeve individuale, të cilat, ndryshe nga paraqitja e tabelës, mund të jenë të pavarura nga njëri-tjetri.
Shfaqja
Kompleksiteti në rritje i faqeve të internetit dhe zhvillimi i teknologjisë kompjuterike çoi në faktin se dokumenti në internet u nda në dy pjesë - korniza (kodi HTML) dhe dizajni (fletët e stilit). Falë kësaj, u bë e mundur të arrihet zhvillimi i paparë i uebit, rezultatet e të cilit tani mund t'i shohim në shumicën e faqeve moderne. Përveç përmirësimit të procesit të zhvillimit
HTML bëri të mundur përcaktimin e rregullave të veta të projektimit për çdo element individual. Kjo ndihmoi në përmirësimin e lexueshmërisë së kodit të faqes së internetit dhe reduktoi kohën e ngarkimit të dokumentit. Tani motorët e kërkimit janë shumë më të shpejtë dhe më të mirë në përpunimin e informacionit të disponueshëm në faqe.
Standardet dhe testimi
Etiketë
HTML përdoret në përputhje të plotë me standardet e W3C (World Wide Web Consortium). Kodi i faqes kontrollohet nga një mjet i veçantë - një vleftësues, i cili analizon (skanon dhe kërkon) të gjitha llojet e gabimeve në faqe. Një faqe e vlefshme do të thotë që të gjitha etiketat janë përdorur në mënyrë korrekte dhe plotësojnë plotësisht kërkesat e standardeve.
Etiketat
ju lejon të krijoni blloqe ose, siç quhen gjithashtu, kontejnerë. Në këtë rast, elementët individualë mund të futen brenda njëri-tjetrit, duke krijuar struktura të konfigurimit dhe kompleksitetit të kërkuar. Duke përdorur një etiketë
pothuajse kurrë nuk ndodh pa një klasë ose identifikues. Kjo është për shkak të "pa fytyrës" së elementit. Nëse nuk i caktoni një klasë, atëherë në fund të gjithë kontejnerët do të kenë një konfigurim identik.
Për të krijuar një dokument vërtet të saktë, duhet të përdorni strukturën e mëposhtme të etiketës
class = "some_name". Duke iu referuar emrit të klasës, fletët e stilit mund të përcaktojnë pozicionin, madhësinë, diferencën dhe parametrat e tjerë të një blloku individual në dokument.
Përdorimi i klasave dhe identifikuesve
Blloko
HTML mund të përcaktohet ose nga id-ja ose nga identifikuesi Dallimi midis të parës dhe të dytës është se id-ja përdoret vetëm një herë në faqen e dokumentit. Kjo do të thotë, përdoret për të identifikuar elementë unikë që nuk përsëriten askund tjetër në kodin e faqes. Atributi class lejon që e njëjta të aplikohet në shumë elementë. Kjo qasje thjeshton shumë zhvillimin dhe mirëmbajtjen e kodit. Përveç kësaj, një objekt mund të ketë disa klasa në të njëjtën kohë. Për njohjen e saktë, ato thjesht ndahen me hapësira.
Natyrisht, struktura e bllokut të një dokumenti nuk nënkupton vetëm përdorimin e etiketave.
. Gjithmonë do të ketë elementë të tjerë në strukturën e çdo faqe interneti. Për më tepër, vetë elementi i bllokut
mund të ketë një ekran krejtësisht të ndryshëm. Kjo bëhet duke përdorur veçorinë e ekranit. Një element mund të ketë një ekran rreshti apo edhe tabele, gjë që ju lejon të rritni ndjeshëm fleksibilitetin e përdorimit të bllokut dhe të krijoni një faqe të çdo konfigurimi.
Etiketë
. Vetitë HTML
Siç u përmend më lart, kjo etiketë nuk ndryshon dizajnin e një fragmenti faqeje, por përdoret për të krijuar një strukturë semantike me dizajn të mëvonshëm duke përdorur fletë stili. Kërkohet përdorimi i një etikete mbyllëse për këtë element.
Edhe pse shumë shfletues modernë do të jenë në gjendje të njohin një gabim të tillë, në disa raste një etiketë e pambyllur mund të shkaktojë prishjen e strukturës së dokumentit dhe shfaqjen e gabuar.
Meqenëse ky element është një element blloku, përmbajtja e përfshirë në të do të fillojë në një rresht të ri. Për të ndryshuar këtë sjellje, duhet të ndryshoni parametrat e shfaqjes së bllokut duke përdorur veçorinë e ekranit. Përveç grupimit të elementeve të mbivendosur, etiketa
ju lejon të formatoni paraqitjen e përmbajtjes brenda saj. Kjo bëhet duke përdorur atributin align, i cili ju lejon të poziciononi tekstin ose imazhin në të majtë, të djathtë ose në qendër të elementit prind.
Pozicionimi i bllokut
Përdorimi i atributit të pozicionit ju lejon të ndryshoni metodën e pozicionimit të elementit të zgjedhur. Pra, ekzistojnë tre lloje të pozicionimit:
Static - përdoret si parazgjedhje. Në këtë rast, elementi pozicionohet sipas pozicionit të tij në kodin HTML.
I afërm. Në këtë rast, pozicioni i objektit llogaritet në të njëjtën mënyrë si në rastin e pozicionimit statik, por kjo veti ju lejon të ndryshoni pozicionin e elementeve fëmijë.
Pozicioni i tij llogaritet në raport me elementin me pozicionim relativ.
Atribute të tjera
Për të ndryshuar pozicionin në lidhje me origjinën, përdoren atributet e sipërme dhe të majta. Vlerat mund të jenë pozitive ose negative. Gjerësia dhe lartësia e një elementi blloku specifikohen nga atributet e gjerësisë dhe lartësisë, përkatësisht. Nëse ato nuk janë specifikuar në fletët e stilit, atëherë blloku do të zërë të gjithë gjerësinë e elementit prind. Nëse përmbajtja e bllokut nuk përshtatet në të gjithë gjerësinë e "prindit", atëherë sjellja e elementit përcaktohet nga atributi i tejmbushjes.
Shpresojmë që ky artikull të ketë ndihmuar në sqarimin e pyetjes se çfarë është
