Dobar dan prijatelji! Nekako sam u svojih nekoliko lekcija o html-u govorio i koristio takav koncept kao što je div izgled.
Verovatno imate pitanja, posebno ako ste početnici, šta je to?
U današnjem članku raspršit ću sve vaše sumnje i odgovoriti na pitanja u čemu se nalaze div blokovi
Počnimo da učimo.
HTML div blokovi i izgledKako vam ne bih zatrpao i zatrpao mozak, samo ću ukratko reći da su ranije svi web dizajneri i programeri koristili izgled tablice prilikom kreiranja stranica i web stranica, gdje je svaka ćelija predstavljala određeni element. Izgledalo je otprilike ovako:
Ovako je izgledalo kreiranje web stranice. Ovo je vrlo primitivan primjer, ali možete jasno zamisliti kako su web stranice nastajale u tim dalekim vremenima. Internet tehnologije ne miruju i u nekom trenutku nam je došao koncept html div izgleda. A onda je, kako kažu, sve počelo.
Njegova važnost u razvoju web stranica je zaista velika. Sada je kreiranje web stranica i upravljanje html blokovima postalo lakše nego ikad. Stranice su počele biti lijepe i zanimljive. Sada ceo svet samo pravi svoj put.
Ovako sada možemo na pojednostavljen način prikazati model za korištenje div html blokova.
Pogodnost leži u nezavisnosti blokova jedan od drugog, njima je lako upravljati pojedinačno, premještati ih kako želite, dodajte stilove, možete postaviti zajedničke stilove kroz CSS pravila za nekoliko Div grupa. Slažem se da je ovo zgodno.
Primjeri korištenja div oznakaPogledajmo nekoliko praktičnih primjera kako možete primijeniti div oznake na html stranicu. U jednostavnom primjeru, kreirat ćemo 4 bloka na stranici. Uvijek ću koristiti Notepad++ u ovom i budućim primjerima.
Pa da objasnim. Imamo dizajn< ! DOCTYPE html >Pogodan je za moderne pretraživače i podržava HTML 5 oznake, o tome ćemo govoriti u budućim izdanjima.
Zatim se otvara veliki "roditeljski" kontejner< html >. Uparen je i mora biti zatvoren na kraju! Zatim dolazi do otvaranja servisne oznake< head >, koji je također uparen i sadrži servisne informacije o kodiranju< meta charset >, najvažniji SEO naslov naslova stranice, opis (nisam ga uključio ovdje, jer nema potrebe, analiziramo čisto tehnički aspekt), oni također uključuju CSS stilovi, fontovi (Google Fonts biblioteka), JavaScript.
Sljedeća je oznaka< body >. Već će pohraniti sve naše oznake blokova i sve kontejnere s oznakama. Samo ga zapamtite kao ogromno "bure".
I konačno, dolaze naši div kontejneri.
< div class = "header" > < / div > < div class = "sidebar" > < / div > < div class = "content" > < / div > < div class = "footer" > < / div > |
Bitan! Oni su također upareni; također ih je potrebno zatvoriti zajedno s drugim oznakama.
Kao što vidite, svaki div blok ima atribut klase, nakon znaka jednakosti možete ih nezavisno i proizvoljno postaviti. Ove klase su kreirane posebno za CSS. Odnosno, pretraživač dolazi na stranicu, vidi div blok i gleda koje informacije sadrži i odlazi u CSS datoteku i tamo traži potrebnu klasu.
Možete postaviti ne samo atribut klase, već možete koristiti i id (identifikator). Možete postaviti pitanje: „Kakva je razlika koju ću koristiti?“ Odgovorit ću, možete koristiti bilo koju metodu za raspored. Sa samo jednom razlikom - u smislu prioriteta, id ima više privilegija od klase.
Objasnit ću ovo u video varalici ispod.
Svako ima svoj stil kreiranja web stranica, ja radije koristim klasu, pošto se ovaj unos u CSS-u prikazuje s tačkom. selektor
Da, usput, želim reći da su zaglavlje, bočna traka, sadržaj, podnožje sve CSS selektori i da će već imati atribute.
Dakle, nastavljamo da raščišćavamo nered u glavama korisnika. Napravili smo div blokove sa klasom, sada idemo na CSS.
Otvorimo css pravila za našu stranicu unutar oznake head, odnosno formatiraćemo je. Uradimo to ovako:
Unos će biti sljedeći (samo kopirajte i zalijepite u svoj primjer i pogledajte u pregledniku)
Primjer korištenja div oznaka .header ( širina:600px; visina:120px; granica:1px puna crna; ) .bočna traka (širina:200px; visina:300px; granica:1px puna crna; float:lijevo; ) .content (širina: 370px ; visina:300px; granica:1px puna crna; margin-left:230px; ) .podnožje (širina:600px; visina:130px; granica:1px puna crna; )
< ! DOCTYPE HTML > < html > < head > < meta charset = "utf-8" > < title >Primjer korištenja div oznaka< / title >
Zaglavlje( širina: 600px; visina: 120px; granica: 1px puna crna; Bočna traka ( širina: 200px; visina: 300px; granica: 1px puna crna; float: lijevo; Sadržaj ( širina: 370px; visina: 300px; granica: 1px puna crna; margin-left : 230px ; Podnožje ( širina: 600px; visina: 130px; granica: 1px puna crna;
< / head > < body > |
Svaka web stranica sastoji se od elemenata koji se nalaze na njoj, a raspored div bloka je gotovo uvijek odgovoran za njihov smještaj. Naravno, postoji i izgled tabele pomoću oznaka
| , a čak se vodi i debata o tome koji sistem je bolje koristiti - blok ili tablični. Međutim, u stvarnosti, trenutno nećete pronaći nijednu od modernih, popularnih i praktičnih stranica koje koriste samo tabelarni izgled. IN najboljem scenariju koristi se samo za ono za šta je namenjena – odnosno za kreiranje tabela, ali ne i za formiranje same strukture sajta.
Činjenica je da div izgled stranice omogućava postavljanje mnogih CSS svojstava koja nisu dostupna za tabele. Štaviše, najviše glavni nedostatak Sistem za tabelarne proračune je da tabela neće biti prikazana na ekranu sve dok je pretraživač ne učita u potpunosti. Ako je cijela stranica napravljena u tabeli, ona će se pojaviti na ekranu tek nakon što se cijeli html kod stranice potpuno učita. DIV oznaka i float svojstvoOsnova blok sistema je tag, koji je kontejner za sadržaj. Može sadržavati i druge posude unutar sebe. Korištenje DIV oznake nije teže od . U pravilu, standardna struktura web mjesta se formira na sljedeći način: postoji glavni kontejner (često mu se dodjeljuje klasa koja se zove omotač, kontejner, glavni, itd.). Unutar ovog kontejnera nalaze se blokovi menija, dio sadržaja i bočna traka. Podrazumevano, svaki novi blok se postavlja u novi red. Da bi se blok pozicionirao lijevo ili desno od drugog (na primjer, da se postavi bočna traka s desne strane), koristi se svojstvo float. Podrazumevano ima vrijednost "none", ali možete postaviti i vrijednosti "lijevo" i "desno". Razmotrimo ovo svojstvo koristeći primjer sa dva bloka. Blok za sadržaj Blok za bočnu traku Ovaj kod će dati sljedeći rezultat: čista imovinaVažno je uzeti u obzir da se svojstvo float primjenjuje ne samo na sam blok u kojem je registrirano, već i na sljedeći element koji će slijediti ovaj blok. Odnosno, ako dodamo još jedan blok u dva gore opisana bloka bez specificiranja bilo kakvih svojstava za njega, tada se neće nalaziti na novom redu, već će početi desno od drugog bloka. Da bi se to izbjeglo, blok div raspored koristi svojstvo clear, koje mora biti postavljeno za blok koji želimo pozicionirati na novom redu. Najčešće je postavljeno na “oba” za ovo, ali možemo ga postaviti i na “lijevo” ili “desno” ako želimo ne samo pozicionirati blok na novom redu, već i postaviti njegovo poravnanje. Dodajmo novi element u gornji primjer: Blok sadržaja Blok bočne trake Novi blok koji se nalazi na dnu rezultat:
Pored lokacije blokova, važno je postaviti uvlake između blokova i unutar njih. Za to se koriste svojstva margine i paddinga. Uvlake se postavljaju zasebno za gornji, desni, donji i lijevi dio elementa. Mogu se specificirati u jednom redu navođenjem četiri vrijednosti: Margina: 20px 10px 0 40px Blok sa ovim parametrima će biti pozicioniran 20 piksela ispod nadređenog elementa, deset piksela od desnog elementa, imaće nulti padding na dnu, a imaće marginu od 40 piksela sa leve strane. Ako su svi isti indikatori navedeni u svojstvu paddinga, onda će to biti interni dopuni za sadržaj u odnosu na granice bloka u kojem se nalazi. Također možete postaviti pojedinačna svojstva za pojedinačne ivice koristeći margin-top, margin-bottom, margin-left, margin-right (i slično za padding). U ovom slučaju, ako jedno od lica nije navedeno, tada će biti udubljenje na njegovoj strani jednaka nuli ili će biti utvrđeno opšta svojstva css specificiran za blokove na stranici. Ovdje ćemo pogledati uobičajene greške u HTML5 označavanju sa semantičke tačke gledišta i kako ih izbjeći. Moja super duper stranica Prepiši ovako: Samo je pogrešno: nije omot. Ovaj element se odnosi na semantički blok vašeg sadržaja koji se koristi za konstruiranje „skice dokumenta“ i mora sadržavati naslov. Ako vam treba element za umotavanje, pokušajte se snaći (Kroc Kamen ima nešto za ponuditi). Ako ovo ne riješi problem potrebe za dodatnim omotima, koristite stare dobre "s. HTML5" s nije umrla, a savršeni su u ovom slučaju. Uzimajući sve gore navedeno u obzir, bilo bi dobro označiti gornji primjer koristeći HTML5 ovako: Ako niste sigurni koji element koristiti, savjetujem vam da koristite naš dijagram toka odabira elemenata ( cca. prevodilac: vidi na samom dnu unosa). Koristite i samo kada je potrebno Nema smisla pisati kod ako nije potreban, zar ne? Jao, često posmatram kako i gdje nisu potrebni. O elementima možete pročitati detaljnije, ali ću ukratko iznijeti ključne točke:
Moj najbolji blog post Ako vaš sadrži samo jedan element zaglavlja, onda nije potreban. IN u ovom slučaju element već garantuje da će naslov biti uključen u okvir dokumenta, a pošto ne sadrži više elemenata (po definiciji), može se bezbedno ukloniti. Jednostavno ovo je dovoljno:
Moj najbolji blog post od Richa Clarka U ovom slučaju, samo uklonite hgroup. od Richa Clarka Drugi slučaj je još jedan primjer nepotrebnog korištenja elementa. Ako je jedino dijete "a ovo je , zašto je potrebno? Ako nemate dodatne elemente u "e (tj. sestra u odnosu na), samo uklonite . Napomena: Ne treba sve grupe veza postaviti u element za navigaciju. Trebalo bi da se koristi za osnovnu navigaciju. Često se u podnožjima nalazi mala lista linkova na različite stranice stranice (Početna, Pomoć, uslovi korištenja, itd). U ovom slučaju, jedno podnožje bi trebalo da bude dovoljno.Iako vas ništa ne sprečava da koristite navigaciju, nije neophodno. WHATWG HTML specKljučna fraza je "glavna navigacija". Može se dugo raspravljati šta se podrazumeva pod glavnim, ali za mene je to:
Specifikacija ga opisuje kao "samostalni sadržaj, moguće sa zaglavljem i tipično samostalni element toka." Evo ga, sva ljepota - element se lako može premjestiti s glavnog sadržaja, na primjer, na bočnu traku. Gornji dijagram toka odabira elemenata će vam pomoći da se nosite s . Ako je slika samo u svrhu prezentacije i nigdje se ne pominje u dokumentu, to definitivno nije . U suprotnom, postavite sebi pitanje: “Da li je ova slika u trenutnom kontekstu neophodna za razumijevanje?” Ako nije, očigledno nije (moguće). Ako je tako, zapitajte se: "Mogu li ovo premjestiti u aplikaciju?" Ako je odgovor na oba pitanja Da, onda bi moglo funkcionirati. Vaš logo nije Isto važi i za logo. Često vidim ovu aplikaciju: Ime moje kompanije
Ovdje se nema šta dodati. Ovo jednostavno nije istina. Možete se dugo raspravljati o tome da li logo treba da bude unutra, ali o tome sada ne govorimo. Prava greška je prekomjerna upotreba . treba koristiti samo kada se na njega pozivate u dokumentu. Malo je vjerovatno da ćete se igdje povezati sa svojim logom. Ovo je dovoljno: Ime moje kompanije može biti ne samo slika Drugo uobičajen slučaj Nerazumijevanje elementa je pretpostavka da se može koristiti samo za slike. Ali to nije istina. Može sadržavati video, audio, grafiku (u SVG-u, na primjer), citat, tabelu, blok koda, pjesmu ili bilo koju kombinaciju gore navedenog. Nemojte se ograničavati samo na slike. Naš posao kao pristalica web standarda je da opišemo sadržaj naše oznake. Ne tako davno sam pisao o elementu detaljnije. Preporučujem da ga pročitate ako želite bolje razumjeti ili osvježiti svoja sjećanja. Nemojte koristiti nepotreban atribut tipa Ovo je možda najviše čest problem, nalazi se u HTML5 galeriji. Iako ovo nije greška, mislim da je najbolje to izbjeći.U HTML5 nema potrebe specificirati atribut tipa za i elemente. Iako ih se može teško riješiti ako ih automatski doda vaš CMS, nema smisla uključivati ih u kod ako ga sami pišete ili možete upravljati predlošcima. Jer Svi pretraživači podrazumevano pretpostavljaju da su sve skripte napisane u JavaScript-u, a stilovi su CSS, takva oznaka postaje suvišna: Između ostalog, možete smanjiti i količinu koda potrošenog na određivanje kodiranja. Poglavlje Marka Pilgrima o semantici u Dive into HTML5 opisuje sve takve prakse. Nepravilna upotreba atributa obrasca Možda ste već svjesni da HTML5 uvodi mnoge nove atribute obrasca. Pogledaćemo ih u bliskoj budućnosti, ali sada ću vam ukratko reći šta ne treba raditi Logički atributi Postoje logički atributi i za multimedijalne elemente i neke druge. Pravila koja opisujem važe i za njih.Neki od novih atributa forme su boolean, tj. njihovo prisustvo u markupu određuje ponašanje elemenata. Uključujući ovo:
Rijetko ih viđam, ali u slučaju potrebe vidio sam ovo: Na kraju krajeva, to ne prijeti ništa loše. Klijentski HTML parser će naići na traženi atribut u markupu i primijeniti odgovarajuća pravila. Ali šta ako to učinimo drugačije i napišemo required="false"? Booleova vrijednost se može primijeniti na tri načina: (drugi i treći su tipični za XHTML)
U odnosu na naš gornji primjer, mogli bismo napisati ovo (u HTML-u): Oznake: Dodajte oznake Prije samo deset godina u RuNetu se najčešće koristio takozvani raspored tablice. Zbog činjenice da su se standardi nekih pretraživača značajno razlikovali, bilo je potrebno tražiti rješenje koje bi omogućilo ispravan prikaz internetskog dokumenta u svim aplikacijama. Ali vrijeme je prolazilo, standardi su se razvijali, a prilično rigidni i nefleksibilni tabelarni zamijenjen je dobro promjenjivim i prilagodljivim.U samom vrhu ove tehnologije je princip korištenja elemenata. HTML dokumenti su uglavnom počeli da se grade na osnovu pojedinačnih blokova, koji, za razliku od izgleda tabele, mogu biti nezavisni jedan od drugog. PojavaSve veća složenost web stranica i razvoj računarske tehnologije doveli su do toga da je web dokument podijeljen na dva dijela – okvir (HTML kod) i dizajn (style sheets). Zahvaljujući tome, bilo je moguće postići neviđeni razvoj weba, čije rezultate danas možemo vidjeti na većini modernih stranica. Pored poboljšanja procesa razvoja, HTML je omogućio definisanje sopstvenih pravila dizajna za svaki pojedinačni element. Ovo je pomoglo poboljšanju čitljivosti koda web stranice i smanjenju vremena učitavanja dokumenta. Sada su pretraživači mnogo brži i bolji u obradi informacija dostupnih na stranici. Standardi i testiranjeOznaka u HTML-u se koristi u strogom skladu sa standardima W3C (World Wide Web Consortium). Kod stranice se provjerava posebnim alatom - validatorom, koji analizira (skenira i traži) sve vrste grešaka na stranici. Ispravna stranica znači da su sve oznake ispravno korištene i da u potpunosti ispunjavaju zahtjeve standarda.
Oznake vam omogućavaju da kreirate blokove ili, kako ih još zovu, kontejnere. U ovom slučaju, pojedinačni elementi se mogu ugniježditi jedan u drugi, stvarajući strukture potrebne konfiguracije i složenosti. Gotovo se nikada ne susreće upotreba oznake bez klase ili identifikatora. To je zbog "bezličnosti" elementa. Ako mu ne dodijelite klasu, na kraju će svi kontejneri imati identičnu konfiguraciju. Da biste kreirali istinski ispravan dokument, morate koristiti sljedeću strukturu oznake class = “some_name”. Pozivajući se na ime klase, stilski listovi mogu odrediti poziciju, veličinu, marginu i druge parametre pojedinačnog bloka u dokumentu. Korištenje klasa i identifikatora
HTML blok može biti definiran ili id-om ili identifikatorom.Razlika između prvog i drugog je u tome što se id koristi samo jednom na stranici dokumenta. To jest, koristi se za identifikaciju jedinstvenih elemenata koji se ne ponavljaju nigdje drugdje u kodu stranice. Atribut class dozvoljava da se isto primeni na više elemenata. Ovaj pristup uvelike pojednostavljuje razvoj i održavanje koda. Osim toga, jedan objekt može imati nekoliko klasa u isto vrijeme. Za ispravno prepoznavanje, jednostavno su razdvojeni razmacima. Naravno, blok struktura dokumenta ne podrazumijeva upotrebu samo oznaka. U strukturi bilo koje internet stranice uvijek će postojati drugi elementi. Osim toga, sam blok element može imati potpuno drugačiji izgled. Ovo se radi pomoću svojstva prikaza. Element može imati linijski ili čak tablični prikaz, što vam omogućava značajno povećanje fleksibilnosti korištenja bloka i kreiranje stranice bilo koje konfiguracije. Tag. HTML svojstva
Kao što je gore spomenuto, ova oznaka ne mijenja dizajn fragmenta stranice, već se koristi za kreiranje semantičke strukture s naknadnim dizajnom pomoću stilskih tablica. Za ovaj element je potrebna upotreba završne oznake. Iako će mnogi moderni pretraživači moći prepoznati takvu grešku, u nekim slučajevima nezatvorena oznaka može uzrokovati da se struktura dokumenta raspadne i prikaže nepravilno. Budući da je ovaj element blok element, sadržaj sadržan u njemu će početi u novom redu. Da biste promijenili ovo ponašanje, trebate promijeniti parametre prikaza bloka koristeći svojstvo display. Osim grupiranja ugniježđenih elemenata, oznaka vam omogućava da formatirate izgled sadržaja unutar nje. Da biste to učinili, koristite atribut align, koji vam omogućava da pozicionirate tekst ili sliku lijevo, desno ili središte nadređenog elementa. Blokiraj pozicioniranje
Korištenje atributa položaja omogućava vam promjenu metode pozicioniranja odabranog elementa. Dakle, postoje tri tipa pozicioniranja:
Za promjenu položaja u odnosu na ishodište koriste se atributi gornji i lijevo. Vrijednosti mogu biti pozitivne ili negativne. Širina i visina elementa bloka određuju se atributima širine i visine. Ako nisu specificirani u stilovima, tada će blok zauzeti cijelu širinu nadređenog elementa. Ako se sadržaj bloka ne uklapa u cijelu širinu “roditelja”, tada je ponašanje elementa određeno atributom prelijevanja. Nadamo se da je ovaj članak pomogao u razumijevanju pitanja šta je u HTML-u. To su univerzalni prazni spremnici koje treba popuniti nekim sadržajem ili se ugniježđeni elementi mogu grupirati za daljnje stiliziranje pomoću CSS i, ako je potrebno, dinamički manipuliše njima koristeći skripte, na primjer, u programskom jeziku kao što je Javascript. Skrećem vam pažnju da sami elementi nemaju nikakav uticaj na ostale elemente stranice. Oznaka definira bilo koji pojedinačni blok sadržaja i namijenjena je za podjelu web stranice na fragmente. Možete kombinirati bilo koji skup logički povezanih elemenata u jedan blok. Ovaj element je na nivou bloka, što znači da će njegov sadržaj uvijek početi u novom redu, a element će zauzeti cijelu dostupnu širinu. Ne tako davno, ovaj element je zauzimao apsolutni vrh, posvećen podjeli stranice na logičke komponente, ali s pojavom HTML 5 dodano je dovoljno semantičkih elemenata koji u nekim situacijama omogućavaju zamjenu oznake smislenijim. Za razliku od blok elementa, oznaka je umetnuta i primjenjuje se na interne ( U redu) elementi stranice, odnosno riječi, fraze koje se nalaze unutar pasusa ili malog fragmenta teksta, sadržaja i sl. Oznaku možete koristiti za zadatke kao što su:
Kombinovali smo pasuse sa div oznakom, a ovu reč smo ogradili oznakom span. Koristeći ugrađeni stilski list, istaknuli smo riječ crvenom, a tekstualni blok zelenom. Imajte na umu da je div oznaka na nivou bloka, što znači da će njen sadržaj uvijek početi u novom redu, pri čemu će element zauzimati cijelu dostupnu širinu. Ovaj blok takođe sadrži dva pasusa. Koristeći ugrađeni stilski list, odredili smo boju pozadine za cijeli blok - kaki, a za ovu riječ narančastocrveno (zagradili smo je u span tag). U ovom primjeru mi:
|
