Ponekad je potrebno poravnati veliki blok dokumenta koji ne sadrži samo tekst, već i slike, tabele itd. U tu svrhu koristi se element kontejnera. DIV. Specifikacija DIV elementa:
ALIGN="poravnanje">
Atribut ALIGN specificira tip poravnanja sadržaja i može imati iste vrijednosti kao P element.
Udubljenje
Ponekad želite da prikažete blok uvučenog teksta. Da biste to učinili, blok teksta se postavlja u element kontejnera. BLOCKQUOTE. Tada će sadržaj ovog elementa biti prikazan sa malim uvlakama lijevo i desno, a također će biti odvojen od ostatka teksta praznim redovima.
stolovi
Tabele su jedan od najmoćnijih i najraširenijih alata u HTML-u. Koriste se ne samo tradicionalno kao metoda predstavljanja podataka, već i kao sredstvo za formatiranje web stranica. HTML dokument može sadržavati proizvoljan broj tabela, a tabele mogu biti ugniježđene jedna u drugu.
Svaka tabela počinje oznakom<TABLE> i završava se oznakomTABLE>. Unutar ovog para oznaka nalazi se opis sadržaja tabele. Svaka tabela se sastoji od jednog ili više redova koji sadrže podatke za pojedinačne ćelije.
Svaki red počinje oznakom<TR> i završava se oznakomTR>. Jedna ćelija u nizu je uokvirena parom oznaka<TD> iTD> ili<TH> iTH>. Tag
oznake
Primjer tablice:
Ovaj primjer će se prikazati u pretraživaču ovako:
Specifikacija oznake
ALIGN="poravnanje" BGCOLOR="boja pozadine" COLSPAN="broj ćelija" HEIGHT="visina ćelije" ROWSPAN="broj ćelija" VALIGN="vertikalno poravnanje" WIDTH="širina ćelije" Atribut ALIGN specificira poravnanje sadržaja ćelije. Može imati jednu od tri vrijednosti: LEFT (lijevo), RIGHT (desno) i CENTER (centar). Zadana vrijednost je CENTAR. Atribut BGCOLOR specificira boju pozadine za ćeliju. Njegova vrijednost može biti specificirana u simboličkom zapisu ili u RGB formatu. Atribut COLSPAN vam omogućava da vodoravno spojite nekoliko susjednih ćelija. Vrijednost ovog atributa je broj ćelija koje se spajaju. Atribut HEIGHT specificira visinu ćelije u pikselima. Atribut ROWSPAN vam omogućava da okomito spojite nekoliko susjednih ćelija. Vrijednost ovog atributa je broj ćelija koje se spajaju. Atribut VALIGN određuje vertikalno poravnanje sadržaja ćelije. Može imati sljedeće vrijednosti: TOP (vrh), MIDDLE (sredina) i BOTTOM (dno). Zadana vrijednost je SREDINA. Atribut WIDTH specificira širinu ćelije u pikselima.
Pitanja za konsolidaciju. 4. Zadaća: 1. Kreirajte tabelu koja ima jednu ćeliju u prvom redu, dvije ćelije u drugom i tri ćelije u trećem. 2. U praksi, posmatrajte efekat korišćenja različitih vrednosti atributa ALIGN oznake 7 odgovora HTML je prvobitno kreiran da stavi sadržaj dokumenata u neku vrstu strukture koju računari mogu razumjeti. Imajući to na umu, p tag bi trebao sadržavati sve što bi bilo strukturirano kao pasus ako bi se sadržaj stranice pretvorio u štampani dokument. Elementi div i span rezervirani su kao kontejneri opće namjene kako bi se olakšalo formiranje i grupisanje povezanih elemenata kako bi se obezbijedili dodatni nivoi strukture, možda u korelaciji sa stranicama u tekstualnom dokumentu. U nekim slučajevima p tagovi bi trebali sadržavati druge elemente kao što su sidro (a), slika (img) i drugi inline elementi jer su direktno povezani s ostatkom sadržaja i ima smisla grupirati ih na taj način, ili tekst ostatak paragrafa sadrži detaljniji opis. Međutim, ako nema dodatnog opisa ovih elemenata, nema smisla stavljati ih u paragraf samo kao pogodan kontejner; div bi bio prikladniji. Općenito, pasus treba da sadrži jedan pasus teksta i sve direktno povezane ili opisane elemente. Ništa drugo u paragrafu nema smisla. UPDATE: HTML5 također dodaje niz drugih semantičkih elemenata "kontejnera", uključujući članak, navigaciju, zaglavlje, odjeljak i stranu.
Razlika između ove tri (i mnoge druge) oznake je njihovo semantičko značenje. HTML standard uključuje obje oznake sa specifičnim značenjima ( Za paragrafe za odabrani tekst itd.) i oznake bez značenja. Potonji su I , koji se koriste za identifikaciju sadržaja bloka ili inline nivoa koji treba identificirati (koristeći atribut class= ili id=), ali za koji ne postoji semantički specifična oznaka. Na primjer, možete pisati Zdravo moje ime je John Doe. - označava da je to paragraf (koji pretraživač već ima ideju kako da rukuje) i da je dio njegovog sadržaja ime (što znači apsolutno ništa). pretraživač ako ga CSS ili JavaScript ne koriste).Stoga su ove oznake nevjerovatno korisne i za dodavanje dodatnih informacija HTML dokumentu koji se ne uklapaju u semantičke oznake koje daje standard (pogledajte hCard specifikacije za odličan primjer) i za primjenu vizualnog (CSS) ili funkcionalnog ( JavaScript) strukturu dokumenta bez promjene njegove semantike.
Ovo je element na nivou bloka koji bi trebao sadržavati pasus koji se sastoji od teksta, umetnutih elemenata koji modificiraju taj tekst ( je element na nivou bloka koji se koristi za podelu stranice, skoro uvek u kombinaciji sa CSS stilovima.
Pa, iskreno ne koristim ovu oznaku tako često. To je ugrađeni element i obično ga koristim kada želim primijeniti stilove na dio teksta koji ne bi imao koristi od upotrebe nečeg smislenijeg kao što su oznake I .
Mislim da bi graditelji stranica trebali koristiti semantičke oznake, što znači da bi oznake koje kreiraju trebale prenositi značenje (a ne prezentaciju). I Oni imaju različita značenja. Prvi se koristi za definiranje odjeljka (ili odjeljka) HTML stranice, a drugi se koristi za definiranje pasusa teksta.
Bilo mi je teško za gledati I (X) HTML oznake definiraju koji tekst okružuju. Ovo je adresa, ovo je link, ovo je pasus, itd... To je ono za šta su, po mom mišljenju, sposobni. Bio bih zainteresovan da čujem više ili čak ispravke onoga što sam ovde napisao.
Element p predstavlja pasus. Hajde da se zaposlimo kontejnerweb dizajn- proučavaćemo elemente internet stranica - blok kontejnere. Naučimo dodatne stilske atribute koji se koriste za postavljanje parametara blok kontejnera (njihova veličina i lokacija na web stranici). Konačno, dobijamo kontrole prekoračenja od CSS-a. Blok kontejner može sadržavati od jednog do nekoliko blok elemenata kao što su naslov, pasus, tabela itd. Za stvaranje blok kontejner
Ovaj blok kontejner sadrži naslov i dva pasusa. Evo tabele. Ovo je video i pasus. Dodali smo i inline stil koji poravnava tekst sa središtem. Video će također biti postavljen u centar. Blok kontejneri se češće koriste od inline kontejnera. Ne tako davno, Web programeri Tekst web dizajn kontejnera- običan tekstualni dokument: paragrafi, naslovi, veliki citati, tekst fiksnog formata i tabele. Njegova glavna prednost je jednostavan html kod. Nedostaci: dosadan izgled web stranice, nedostatak sredstava za postavljanje elemenata Web stranica je podijeljena na četiri dijela: naslov, navigacijska traka, glavni sadržaj, podaci o autoru. Sve stranice stranice su iste Ispostavilo se da je HTML kod svake web stranice gotovo isti (osim glavnog sadržaja), a svaka stranica učitava isti dio koda. I što je datoteka veća, duže je potrebno za učitavanje (korisnik duže čeka). To ne bi učitalo cijeli html kod, već samo dio - glavni sadržaj. Evo problema Web dizajn okvira kontejnera Stranica stranice - frameset. Pojedini dijelovi sadržaja bili su prikazani na zasebnim web stranicama čije su adrese bile propisane u parametrima njihovih okvira. Ostale stranice sadržavale su samo glavni materijal. Prednosti web dizajna uokvirenog kontejnera- Poboljšana brzina učitavanja stranice. Ali postoje i nedostaci: okviri nisusu standardizovani i ne postoji način da se promeni njihova struktura. Kasnije se pojavila nova vrsta web dizajna- tabelarni. Tabelarni web dizajn kontejnera. Prilikom kreiranja web stranice koristi se tabela. Naslov, autorska prava, navigaciona traka stavljeni su u zasebne ćelije ove tabele. U budućnosti je tabularni web dizajn postao popularniji od web dizajna okvira. Prednosti: Mogućnost prikazivanja web stranica na isti način u svim web pretraživačima. Formatiranje tabela i njihovih ćelija sa CSS stilovima. -
složene web stranice - postavljanje različitih dijelova sadržaja, povećanje broja stupaca teksta. Nedostaci: Sve stranice su opet imale ponovljene dijelove html koda, što se odrazilo na smanjenje učitavanja stranice. Veliki i složeni html kod. Dakle, prijeđimo na učenje nove vrste web dizajna. Koristi blok kontejnere, koje smo uveli na početku ovog poglavlja, za smještaj pojedinačnih dijelova sadržaja web stranice. Za zaglavlje web stranice, navigacijsku traku, glavni sadržaj i informacije o autorskim pravima kreiraju se zasebni kontejneri. Ako glavni sadržaj ima složenu strukturu i sastoji se od mnogo nezavisnih dijelova, za svaki od njih se kreira poseban spremnik. Posebni atributi CSS stila daju se za postavljanje različitih opcija za blok kontejnere. Ovi parametri uključuju dimenzije (širina i visina), lokaciju kontejnera i njihovo ponašanje pri prelivanju. Takođe možemo postaviti boju pozadine za kontejnere, i kreirati padding i ivice kako bi se istakli (opcije za popunjavanje i ivice će biti razmatrane u poglavlju 11). Pa šta, web dizajn kontejnera tako dobro? Pogledajmo nedostatke tri stara principa web dizajna i vidimo može li ih riješiti. Nepretenciozan izgled i linearna prezentacija web stranica je u tekstualnom web dizajnu. Možemo organizirati kontejnere na web stranici gotovo bilo gdje i postaviti proizvoljni sadržaj u njih: tekst, tabele, slike, audio i video, pa čak i druge kontejnere. A CSS će nam omogućiti da postavimo gotovo bilo koju reprezentaciju za njih. - "Monolitne" web stranice - u tekstualnom i tabelarnom Web dizajnu. Moderni web pretraživači vam omogućavaju da učitate web stranicu sačuvanu u zasebnoj datoteci u kontejner koristeći posebno kreirano ponašanje, odnosno organiziranje učitanog sadržaja. O tome ćemo se pozabaviti u 18. poglavlju. - "Nestandardni" okviri - u okviru Web dizajn. Kontejneri i srodne oznake su službeno standardizirane od strane W3C i tretiraju ih svi web pretraživači na isti način. Nezgrapnost HTML koda je u tabelarnom Web dizajnu. HTML kod koji formira kontejnere je izuzetno kompaktan. Kao što već znamo, blok kontejner se formira sa samo jednim parom oznaka. Web stranice koje se sporo učitavaju - u tabelarnom Web dizajnu. Svi web pretraživači prikazuju sadržaj kontejnera dok se učitavaju, tako da se web stranice vizualno učitavaju vrlo brzo. I šta, web dizajn kontejnera je tako dobar? I on uopšte nema mana? Jao, ništa nije savršeno na svijetu... Gubi u odnosu na tabelarni u mogućnosti implementacije složenog dizajna web stranica. Tabela vam omogućava da kreirate više kolona različitih širina na web stranici koje sadrže različit sadržaj. Da biste to učinili sa kontejnerima, vjerovatno ćete morati koristiti ugniježđene kontejnere, složeni stil i moguće ponašanje koje pozicionira kontejnere na prava mjesta nakon što se web stranica završi učitavanjem. Ovo je možda jedini nedostatak kontejneriziranog web dizajna. Pa, web dizajn kontejnera je uglavnom jasan. Vježbajmo. Redizajnirajmo naše web stranice koristeći kontejnerski web dizajn - lagan, jednostavan, moderan. Prvo, napravimo izgled na web stranicama odgovarajućih kontejnera. Najbolje ga je nacrtati na papiru ili u programu za grafički uređivač. Klasična shemakontejnerweb dizajn(i ne samo kontejner) prikazan je na sl. 10.1. Kao što vidite, na samom vrhu je naslov web stranice, ispod njega navigacijska traka i glavni sadržaj poređani su vodoravno u jedan red, a ispod njih su priložene informacije o autorskim pravima. Koristimo ovu šemu. Otvorimo web stranicu index.htm u Notepadu. Pronađimo u njegovom HTML kodu četiri važna fragmenta bilo koje web stranice: naslov web stranice, traku za navigaciju, OSnovi sadržaj i informacije o autorskim pravima. Hajde da ih stavimo blok kontejneri.
Na sl. Slika 10-1 pokazuje da se naslov web stranice nalazi prije trake za navigaciju, a ne obrnuto. Stoga, hajde da zamijenimo fragmente HTML koda koji kreiraju ove kontejnere i njihov sadržaj. Nakon toga ćemo kreiranim kontejnerima priložiti stilove koji određuju njihovu veličinu i lokaciju na web stranici. Pošto je svaki od ovih kontejnera prisutan na svakoj web stranici u jednoj instanci, za ovo koristimo imenovane stilove. Damo im sljedeća imena: Zaglavlje - stil za kontejner sa zaglavljem web stranice; cnav - stil za kontejner sa trakom za navigaciju; Cmain - stil za glavni kontejner sadržaja; Ccopyright - stil za kontejner sa informacijama o autorskim pravima. Ovdje slovo "c" znači "kontejner". Tako da ćemo odmah shvatiti da se ovi stilovi primjenjuju posebno na kontejnere. Vezivanje imenovanog stila za oznaku se vrši specificiranjem imena tog stila kao vrijednosti ID atributa oznake. Uradimo ovo za sve kontejnere. Listing 10-4 prikazuje HTML isječak web stranice index.htm sa svim potrebnim popravkama. Sačuvajmo web stranicu index.htm i otvorimo je u web pretraživaču. Da li se nešto promijenilo u odnosu na ono što je bilo prije? Ništa. HTML (Hyper Text Markup Language): Jezik za označavanje hiperteksta koji se koristi za kreiranje web stranica. Ovako napisana stranica je običan tekstualni dokument, u kojem se uz pomoć tagova određuje lokacija i dizajn teksta, grafike itd. Svi tagovi su upisani u kutak zagrade (< , >) Sve oznake su podijeljene u 2 grupe: -
zahtijeva završnu oznaku ( kontejneri);
Oznake kontejnera se pišu ovako: Pojedinačne oznake se pišu ovako: Oznaka može imati parametre. Parametri oznake se upisuju nakon nje, unutar njenih ugaonih zagrada odvojenih razmakom. Na primjer, Slijede glavne html oznake i njihova upotreba.
tekst
bgcolor
veza
Ovim se završava lista potrebnih oznaka. Pomakni se...
href, bez čije upotrebe ne može nijedna stranica. To je razumljivo, jer kombinacija href formirana vezaŠta je stranica bez linkova?
boja
veličina
src, specificira putanju do slike (apsolutnu ili relativnu); poravnati, postavlja poziciju slike. Ovaj parametar može imati vrijednosti \"centar\", \"left\", \"right\". alt, natpis za sliku koji se pojavljuje kada pređete mišem preko nje. granica, postavlja debljinu okvira oko slike. Uzima vrijednost od 0 do bilo koje želje. Vlad Merzhevich Blok element je element koji se prikazuje na web stranici kao pravougaonik. Takav element zauzima cijelu dostupnu širinu, visina elementa je određena njegovim sadržajem i uvijek počinje u novom redu. Kontejneri su blok elementi. I sl. Možete ugnijezditi jedan blok element unutar drugog, kao i postaviti inline elemente unutar njih ( , na primjer). Zabranjeno je dodavanje blok elemenata unutar ugrađenih elemenata (primjer 1). Primjer 1: Korištenje blok elemenata
Lorem ipsum dolor sit amet... U ovom primjeru, paragraf (tag ) se ubacuje unutar kontejnera Ugniježđenje blok oznaka unutar inline elemenata je češće za početnike koji još ne razumiju razliku između njih. Osim toga, pretraživači su naučili uhvatiti takve greške i manje-više ispravno prikazati kod. Međutim, preporučujemo da se pridržavate specifikacije po ovom pitanju kako biste web stranicu prikazali bez grešaka. Po defaultu, širina bloka se izračunava automatski i zauzima sav raspoloživi prostor. Ovdje je potrebno precizirati šta se pod tim podrazumijeva. Na primjer, ako je oznaka Neki pretraživači koncept širine tumače prilično opušteno, iako CSS specifikacija jasno kaže da je širina zbir sljedećih parametara: širina samog bloka ( širina ), padding ( margina ), margine ( padding ) i ivice ( granica ). Primjer 2 pokazuje kako napraviti sloj koji sadrži sve ove komponente. Primjer 2 Širina sloja
Kao rezultat ovog primjera, dobijamo sloj širine 342 piksela. Na sl. 1 pokazuje šta čini širinu sloja. Slika 1. Širina elementa bloka U tom slučaju kadanije navedeno u kodu, Internet Explorer uzima vrijednost svojstva širine kao širinu cijelog bloka. Pogledajmo još jedan primjer koji se odnosi na širinu. Prema zadanim postavkama, širina sloja je postavljena na auto, što omogućava da sloj stane u prozor pretraživača bez uzimanja u obzir vrijednosti postavljenih margina. Ako promijenite širinu na 100%, onda kada dodate vrijednost odstupanja, margine ili granice, vodoravna traka za pomicanje će se neizbježno pojaviti. Da biste dobili univerzalni rezultat, postoji nekoliko pristupa. Primjer 3 pokazuje kreiranje tri sloja čija je širina definirana kao postotak. Primjer 3 Procenat širine sloja
Lorem ipsum dolor sit amet... Rezultat primjera prikazan je na sl. 2. Rice. 2. Prikažite širinu slojeva u pretraživaču Širina prvog sloja u ovom primjeru (sloj1) je postavljena na 100%, što rezultira prikazom horizontalne trake za pomicanje. Za drugi sloj (layer2) širina je također postavljena na 100%, ali su margine definirane za unutrašnji pasus (tag ). Zbog toga će širina sloja u svim pretraživačima biti ista. Treći sloj (layer3) uopće nema primijenjeno svojstvo širine, pa je definirano po defaultu, auto. U ovom slučaju, sloj će zauzeti cijelu širinu prozora pretraživača bez ikakvih horizontalnih pruga. Način na koji postavljate širinu ovisi o korištenom rasporedu i izboru programera, ali u svakom slučaju morate uzeti u obzir posebnosti blok elemenata i kreirati univerzalni kod. S visinom blok elemenata situacija je slična širini. Pretraživač uzima vrijednost svojstva visine kao visinu sloja i dodaje joj vrijednost margine, paddinga i ivice. Ako visina sloja nije eksplicitno podešena, onda se automatski izračunava na osnovu zapremine sadržaja. Recimo da sloj ima visinu u pikselima, a sadržaj sloja je jedinstveno veći od navedene visine (primjer 4). Primjer 4: Visina sloja
Rezultat ovog primjera prikazan je na sl. 3. Rice. 3. Visina bloka u različitim pretraživačima Vidi se da pretraživač ostavlja visinu nepromijenjenu, zbog čega se tekst ne uklapa u blok i postavlja se na vrh sloja. Najlakši način za postavljanje boje pozadine elementa je putem generičkog svojstva pozadine. Pozadina je popunjena područjem definiranim širinom, visinom i vrijednostima dopuna (slika 4). Rice. 4. Područje sloja koje je ispunjeno bojom pozadine Dakle, margina ne učestvuje u formiranju obojenog područja. Zbog razlike u pristupima pretraživača prilikom formiranja blok elemenata, postoji i razlika u prikazu granica. Internet Explorer 7 iscrtava granicu unutar bloka, dok je Firefox crta van. Ali ako koristimo pozadinu, vidjet ćemo potpuno suprotnu sliku (slika 5). A sve zato što Firefox (Opera) postavlja boju pozadine na vanjskoj ivici ivice, a Internet Explorer - na unutrašnjoj. Počevši od verzije 8.0 Internet Explorer je promijenio stil prikaza okvira, crta se unutar bloka, kao u Firefoxu. ali. Internet Explorer 7 b. Firefox, Internet Explorer 8+ Rice. 5. Prikaz okvira u pretraživačima Primjer 5 pokazuje kako napisati kod za dobivanje takve granice. Primjer 5. Tačkasti okvir
Razlike u pristupu pretraživača prilikom crtanja ivica uočljive su samo na obojenoj pozadini i isprekidanim linijama. Za čvrstu ivicu, izgled sloja u pretraživačima će biti skoro isti. Blok elementi djeluju kao glavni građevinski materijal pri postavljanju web stranica. Takve elemente karakterizira činjenica da uvijek počinju na novom redu i zauzimaju cijelu raspoloživu širinu područja u kojem se nalaze. CSS specifikacija definira da se visina i širina elementa određuju ne samo vrijednostima visine i širine, već i vrijednošću margina, paddinga i ivica. Preglednici su u tom pogledu podijeljeni u dva dijela: neki podržavaju specifikaciju po ovom pitanju, dok je drugi ignorišu i djeluju na svoj način. Ovo stvara poteškoće za programere koji žele da naprave univerzalne web stranice. Jedini savjet je da ograničite korištenje svojstava širine i visine, jer pretraživač po defaultu postavlja auto argument, što uzrokuje da element automatski mijenja veličinu. |
