Uneori este necesar să aliniați un bloc mare de documente care conține nu numai text, ci și figuri, tabele etc. În aceste scopuri, se folosește un element container. DIV... Specificația elementului DIV:
ALIGN = „aliniere”>
Atributul ALIGN specifică tipul de aliniere a conținutului și poate avea aceleași valori ca și elementul P.
Indentare
Uneori doriți să afișați un bloc de text indentat. Pentru a face acest lucru, un bloc de text este plasat într-un element container. CITA BLOC... Apoi, conținutul acestui element va fi afișat cu mici indentări la stânga și la dreapta și, de asemenea, va fi separat de restul textului prin linii goale.
Mese
Unul dintre cele mai puternice și utilizate instrumente în HTML sunt tabelele. Ele sunt folosite nu numai în mod tradițional ca metodă de prezentare a datelor, ci și ca mijloc de formatare a paginilor Web. Un document HTML poate conține orice număr de tabele, iar tabelele pot fi imbricate unul în celălalt.
Fiecare tabel începe cu o etichetă<MASA> și se termină cu o etichetăMASA>. În interiorul acestei perechi de etichete se află o descriere a conținutului tabelului. Orice tabel constă din unul sau mai multe rânduri, care specifică date pentru celule individuale.
Fiecare linie începe cu o etichetă<TR> și se termină cu o etichetăTR>. O singură celulă într-un rând este încadrată de o pereche de etichete<TD> șiTD> sau<TH> șiTH>. Etichetă
Etichete
Exemplu de tabel:
Acest exemplu va apărea în browser astfel:
Specificația etichetei
ALIGN = „aliniere” BGCOLOR = „culoarea de fundal” COLSPAN = „număr de celule” HEIGHT = „înălțimea celulei” ROWSPAN = „număr de celule” VALIGN = „aliniere verticală” WIDTH = „lățimea celulei” Atributul ALIGN determină alinierea conținutului celulei. Poate avea una dintre cele trei valori: LEFT (aliniat la stânga), RIGHT (aliniat la dreapta) și CENTER (centrat). Valoarea implicită este CENTER. Atributul BGCOLOR definește culoarea de fundal pentru celulă. Valoarea acestuia poate fi specificată în notație simbolică sau în format RGB. Atributul COLSPAN vă permite să combinați mai multe celule adiacente pe orizontală. Valoarea acestui atribut este numărul de celule de îmbinat. Atributul HEIGHT specifică înălțimea celulei în pixeli. Atributul ROWSPAN vă permite să îmbinați mai multe celule adiacente pe verticală. Valoarea acestui atribut este numărul de celule de îmbinat. Atributul VALIGN determină alinierea verticală a conținutului celulei. Poate avea următoarele valori: SUS (sus), MEDIU (mijloc) și JOS (jos). Valoarea implicită este MEDIU. Atributul WIDTH specifică lățimea celulei în pixeli.
Întrebări de consolidat. 4. Teme pentru acasă: 1. Creați un tabel care conține o celulă pe primul rând, două pe al doilea și trei celule pe al treilea. 2. În practică, observați efectul utilizării diferitelor valori ale atributului ALIGN al etichetei 7 raspunsuri HTML a fost creat inițial pentru a pune conținutul documentelor într-un fel de structură pe care computerele o pot înțelege. Având în vedere acest lucru, eticheta p trebuie să conțină orice ar fi structurat ca un paragraf dacă conținutul paginii ar fi transformat într-un document imprimabil. Elementele div și span sunt rezervate ca containere de uz general pentru a facilita formarea și gruparea elementelor înrudite pentru a oferi niveluri suplimentare de structură, eventual corelând cu paginile dintr-un document de procesare de text. În unele cazuri, etichetele p trebuie să conțină alte elemente, cum ar fi ancora (a), imaginea (img) și alte elemente inline, deoarece sunt direct legate de restul conținutului și este logic să le grupăm în acest fel sau textul din restul paragrafului conține o descriere mai detaliată. Cu toate acestea, dacă nu există o descriere suplimentară a acestor elemente, nu are sens să le plasați într-un paragraf doar ca un container convenabil; un div ar fi mai potrivit. În general, un paragraf ar trebui să conțină un paragraf de text și orice elemente direct legate sau descrise. Nimic altceva nu are sens în paragraf. ACTUALIZAȚI: HTML5 adaugă, de asemenea, o serie de alte elemente „container” semantice, inclusiv articol, navigare, antet, secțiune și o parte.
Diferența dintre aceste trei (și multe altele) etichete este semnificația lor. Standardul HTML include ambele etichete cu semnificații semantice specifice ( Pentru paragrafe, pentru textul evidențiat etc.) Și etichete fără sens semantic. Acestea din urmă sunt și care sunt utilizate pentru a identifica conținutul unui bloc sau al unui strat inline care trebuie identificat (folosind atributul class = sau id =), dar pentru care nu există o etichetă specifică semantic. De exemplu, puteți scrie Buna numele meu este John doe. - indicând că acesta este un paragraf (pe care browserul are deja o idee despre cum să îl gestioneze), iar o parte din conținutul său este un nume (care înseamnă absolut nimic). browser dacă CSS sau JavaScript nu îl utilizează).Ca atare, aceste etichete sunt incredibil de utile atât pentru adăugarea de informații suplimentare la un document HTML care nu se încadrează în etichetele semantice furnizate de standard (consultați specificațiile hCard pentru un exemplu excelent), cât și pentru aplicarea vizuală (CSS) sau funcțională ( JavaScript) într-un document, fără a-i modifica semantica.
Acesta este un element la nivel de bloc care ar trebui să conțină un paragraf format din text, elemente inline care modifică acel text ( este un element la nivel de bloc folosit pentru a împărți o pagină, aproape întotdeauna împreună cu stilurile CSS.
Ei bine, sincer nu folosesc această etichetă atât de des. Este un element inline și, de obicei, îl folosesc atunci când aș dori să stilizez o bucată de text care nu beneficiază de folosirea a ceva mai semnificativ, cum ar fi etichetele și .
Cred că constructorii de pagini ar trebui să folosească marcajul semantic, ceea ce înseamnă că marcajul pe care îl creează ar trebui să transmită sens (nu prezentare). și Ele au semnificații diferite. Primul este folosit pentru a defini o secțiune (sau secțiune) a unei pagini HTML, iar al doilea este folosit pentru a defini un paragraf de text.
Mi-a fost greu de urmărit și (X) Etichetele HTML definesc textul pe care îl înconjoară. Aceasta este o adresă, aceasta este un link, acesta este un paragraf etc... De asta sunt capabili, după părerea mea. As fi interesat sa aud mai multe sau chiar corecturi la ceea ce am scris aici.
Elementul p reprezintă un paragraf. Să fim ocupați recipientweb design- Să studiem elementele paginilor de Internet - bloc containere. Să stăpânim atributele suplimentare ale stilurilor folosite pentru a seta parametrii containerelor bloc (dimensiunea și locația acestora pe pagina Web). În cele din urmă, obținem controalele CSS overflow. Un container bloc poate conține de la unul la mai multe elemente bloc, cum ar fi un titlu, un paragraf, un tabel etc. Pentru a crea container bloc
Acest container bloc conține un titlu și două paragrafe. Aici este o masa. Acesta este videoclipul și paragraful. De asemenea, am adăugat un stil inline care aliniază textul în centru. Videoclipul va fi de asemenea centrat. Containerele bloc sunt folosite mai des decât containerele încorporate. Nu cu mult timp în urmă, programatori web Text design web container- Document text simplu: paragrafe, titluri, ghilimele mari, text în format fix și tabele. Principalul său avantaj este codul HTML simplu. Dezavantaje: aspect obositor al paginii web, lipsa mijloacelor de amplasare a elementelor Pagina web este împărțită în patru părți: titlu, bară de navigare, conținut principal și informații despre autor. Totul este la fel pe toate paginile site-ului Se pare că codul HTML al fiecărei pagini web este aproape același (cu excepția conținutului principal), iar fiecare pagină încarcă aceeași parte a codului. Și cu cât dimensiunea fișierului este mai mare, cu atât este nevoie de mai mult pentru încărcare (cu atât timpul de așteptare al utilizatorului este mai lung). Ar fi bine să încărcați nu tot codul html, ci doar o parte - conținutul principal. Această problemă Design web container înrămat Pagina site - set de rame. Unele părți ale conținutului au fost afișate în pagini Web separate, ale căror adrese au fost scrise în parametrii cadrelor lor. Alte pagini conțineau doar materialul principal. Avantajul designului web al containerelor încadrate- viteza de încărcare a paginii a crescut. Dar există și dezavantaje: ramele nu suntsunt standardizate și nu există nicio modalitate de a le schimba structura. Mai târziu, a apărut un nou tip de web design.- tabelar. Tabular design web container... La crearea unei pagini web, se folosește un tabel. Titlul, drepturile de autor, bara de navigare au fost plasate în celule separate ale acestui tabel. Mai târziu, designul web tabelar a devenit mai popular decât designul bazat pe cadre. Avantaje: Posibilitatea de a afișa pagini web în același mod în toate browserele web. Formatarea tabelelor și a celulelor acestora cu stiluri CSS. -
pagini web complexe - plasarea diferitelor piese de conținut, creșterea numărului de coloane de text. Defecte: Toate paginile aveau din nou părți duplicate ale codului html, ceea ce a dus la o scădere a încărcării paginii. Cod html mare și complex. Deci, să trecem la explorarea unui nou tip de web design. Utilizează containerele bloc pe care le-am introdus la începutul acestui capitol pentru a găzdui bucăți individuale de conținut pe paginile Web. Sunt create containere separate pentru titlul site-ului web, bara de navigare, conținutul corpului și informațiile privind drepturile de autor. Dacă conținutul principal are o structură complexă și constă din multe părți independente, se creează un container separat pentru fiecare dintre ele. Sunt furnizate atribute speciale de stil CSS pentru a seta diferiți parametri pentru containerele bloc. Acești parametri includ dimensiunile (lățimea și înălțimea), locația containerelor și comportamentul acestora la preaplin. De asemenea, putem seta culoarea de fundal pentru containere, putem crea padding și chenare pentru a le evidenția (vom vorbi despre parametrii indentărilor și marginilor în Capitolul 11). Și ce dacă, design web container atat de bun? Să ne uităm la defectele a trei vechi principii ale designului web și să vedem dacă le poate rezolva. Aspectul modest și prezentarea liniară a paginilor Web se regăsește în designul Web textual. Putem aranja containere pe o pagină Web în aproape orice mod și plasăm conținut arbitrar în ele: text, tabele, imagini, clipuri audio și video și chiar alte containere. Și CSS ne va permite să definim aproape orice prezentare pentru ei. - Pagini Web „Monolitice” - în design web text și tabelar. Browserele Web moderne permit comportamentul personalizat pentru a încărca o pagină Web stocată într-un fișier separat într-un container, adică pentru a organiza conținutul încărcat. Vom aborda acest lucru în capitolul 18. - „Non-standard” de cadre - în cadrul Web-design. Containerele și etichetele asociate sunt standardizate oficial de W3C și sunt tratate la fel de toate browserele web. Volumul codului HTML se află în designul web tabelar. HTML-ul care redă containerele este extrem de compact. După cum știm deja, un container bloc este format cu o singură etichetă pereche. Încărcarea lentă a paginilor web - în design web tabelar. Toate browserele Web afișează conținutul containerelor în timpul încărcării, astfel încât paginile Web sunt încărcate vizual foarte rapid. Deci este designul web container atât de bun? Și nu are niciun defecte? Vai, nimic nu este perfect pe lume... Depășește capacitatea tabelară de a implementa un design complex al paginilor Web. Un tabel vă permite să creați mai multe coloane de lățimi diferite pe o pagină Web care conțin conținut diferit. A face acest lucru cu containere va implica probabil imbricarea containerelor, stiluri complexe și posibil comportament care plasează containerele în locurile potrivite după ce pagina web s-a terminat de încărcat. Acesta este poate singurul defect în designul web containerizat. Ei bine, cu designul web al containerelor, este în mare parte clar. Sa exersam. Să ne reproiectăm paginile Web folosind un design Web containerizat - ușor, simplu, modern. Mai întâi, să proiectăm un aspect pentru containerele respective de pe paginile Web. Cel mai bine este să-l desenați pe hârtie sau într-un program de editare grafică. Schema clasicarecipientweb design(și nu numai recipientul) este prezentat în fig. 10.1. După cum puteți vedea, în partea de sus este antetul site-ului, sub acesta, bara de navigare și conținutul principal sunt aliniate într-o linie orizontală, iar informațiile despre drepturile de autor sunt atașate sub ele. Să folosim această schemă specială. Să deschidem pagina web index.htm în Notepad. Vom găsi patru informații importante în orice pagină Web în codul său HTML: antetul site-ului Web, bara de navigare, sistemul de operareconținut nou și informații despre drepturile de autor. Să le punem înăuntru containere bloc.
În fig. 10.1 arată că titlul site-ului precede bara de navigare și nu invers. Prin urmare, să schimbăm fragmentele de cod HTML care creează aceste containere și conținutul acestora. Ulterior, vom lega stilurile la containerele create care definesc dimensiunea și locația acestora pe pagina Web. Deoarece fiecare dintre aceste containere este prezent pe fiecare pagină Web într-o singură instanță, stilurile numite sunt aplicabile pentru aceasta. Să le dăm următoarele nume: Cheader - stil pentru containerul cu antetul site-ului Web; Cnav - stil pentru container cu bara de navigare; Cmain - stil pentru containerul de conținut principal; Ccopyright - Stilul pentru containerul pentru drepturi de autor. Aici litera „c” înseamnă „container” - container. Astfel vom înțelege imediat că aceste stiluri sunt aplicate în mod specific containerelor. Asocierea unui stil numit la o etichetă se face prin specificarea numelui acelui stil ca valoare a atributului ID al etichetei. Să facem asta pentru toate containerele. Listarea 10.4 arată un fragment din codul HTML pentru pagina Web index.htm cu toate corecțiile necesare. Salvați pagina web index.htm și deschideți-o într-un browser web. S-a schimbat ceva față de ce era înainte? Nimic. HTML (Hyper Text Markup Language): un limbaj de marcare hipertext folosit pentru a crea pagini web. O pagină scrisă în acest fel este un document text obișnuit în care locația și designul textului, graficelor etc. sunt determinate cu ajutorul etichetelor. Toate etichetele sunt scrise în colţ paranteze (< , >) Toate etichetele sunt împărțite în 2 grupuri: -
necesită o etichetă de capăt ( containere);
Etichetele containerului sunt scrise astfel: Etichetele unice sunt scrise astfel: Eticheta poate avea parametri. Parametrii etichetei sunt scriși după ea, în parantezele sale unghiulare, despărțiți de un spațiu. De exemplu, Următoarele sunt principalele etichete html și utilizările lor.
text
bgcolor
legătură
Aceasta încheie lista de etichete necesare. Dați-i drumul...
href, fără a cărui utilizare niciun site nu poate face. Acest lucru este de înțeles, deoarece combinația un href format legătură, și ce este un site fără link-uri?!
culoare
mărimea
src, indică calea către imagine (absolută sau relativă); alinia, setează poziția imaginii. Acest parametru poate lua valorile \ "centrul \", \ "stânga \", \ "dreapta \". alt, legenda la imagine care apare când treci cu mouse-ul peste ea. frontieră, setează grosimea marginii din jurul imaginii. Acceptă o valoare de la 0 la orice doriți. Vlad Merjevici Un element bloc este un element care apare pe o pagină web ca dreptunghi. Un astfel de element ocupă toată lățimea disponibilă, înălțimea elementului este determinată de conținutul său și începe întotdeauna pe o linie nouă. Elementele bloc includ containere Si etc. Este permisă imbricarea unui element bloc în altul, precum și plasarea elementelor încorporate în interiorul lor ( , de exemplu). Este interzisă adăugarea de elemente bloc în interiorul elementelor inline (exemplul 1). Exemplul 1. Utilizarea elementelor bloc
Lorem ipsum dolor sit amet... În acest exemplu, paragraful (tag ) se introduce în interiorul recipientului Imbricarea etichetelor de bloc în interiorul elementelor inline este mai tipică pentru începătorii care încă nu înțeleg diferența dintre cele două. În plus, browserele au învățat să surprindă astfel de erori și să afișeze codul mai mult sau mai puțin corect. Cu toate acestea, vă recomandăm să respectați specificațiile în această chestiune pentru a face pagina web fără erori. În mod implicit, lățimea blocului este calculată automat și ocupă tot spațiul disponibil. Aici este necesar să se stipuleze ce se înțelege prin aceasta. De exemplu, dacă eticheta Unele browsere sunt destul de laxe în ceea ce privește conceptul de lățime, deși specificația CSS afirmă clar că lățimea este suma următorilor parametri: lățimea blocului în sine (lățimea), padding (margini), marginile (padding) și marginile ( frontieră). Exemplul 2 arată cum să creați un strat care conține toate aceste componente. Exemplul 2. Lățimea stratului
Ca rezultat al acestui exemplu, vom obține un strat cu o lățime de 342 pixeli. În fig. 1 arată cum este compusă lățimea stratului. Fig 1. Lățimea unui element bloc În eventualitatea în carenespecificat în cod, Internet Explorer ia valoarea proprietății width ca lățime a întregului bloc. Să ne uităm la încă un exemplu legat de lățime. În mod implicit, lățimea stratului este setată la automat, ceea ce permite stratului să se potrivească în fereastra browserului fără a ține cont de valorile marginilor setate. Dacă modificați lățimea la 100%, atunci când adăugați umplutură, margini sau margini, va apărea inevitabil o bară de defilare orizontală. Există mai multe abordări pentru a obține un rezultat universal. Exemplul 3 demonstrează crearea a trei straturi, a căror lățime este definită ca procent. Exemplul 3. Lățimea stratului în procente
Lorem ipsum dolor sit amet... Rezultatul exemplului este prezentat în Fig. 2. Orez. 2. Afișarea lățimii straturilor în browser Lățimea primului strat din acest exemplu (layer1) este setată la 100%, ceea ce face ca o bară de defilare orizontală să fie afișată. Pentru al doilea strat (layer2), lățimea este, de asemenea, setată la 100%, dar marginile sunt definite pentru paragraful interior (etichetă ). Din acest motiv, lățimea stratului va fi aceeași în toate browserele. Cel de-al treilea strat (layer3) nu are deloc aplicată proprietatea lățime, așa că este implicit automat. În acest caz, stratul va ocupa întreaga lățime a ferestrei browserului fără dungi orizontale. Modul de setare a lățimii depinde de aspectul aplicat și de alegerea dezvoltatorului, dar, în orice caz, trebuie să țineți cont de particularitățile elementelor bloc și să creați cod universal. Înălțimea elementelor blocului este similară cu lățimea. Browserul preia valoarea proprietății înălțime pentru înălțimea stratului și îi adaugă valori de marjă, de umplutură și de chenar. Dacă înălțimea stratului nu este setată în mod explicit, atunci aceasta este calculată automat pe baza volumului conținutului. Să presupunem că stratul are o înălțime în pixeli, iar conținutul stratului este în mod unic mai mare decât înălțimea specificată (exemplul 4). Exemplul 4. Înălțimea stratului
Rezultatul acestui exemplu este prezentat în Fig. 3. Orez. 3. Blocați înălțimea în diferite browsere Puteți observa că browserul lasă înălțimea neschimbată, din cauza căreia textul nu se potrivește în bloc și este suprapus deasupra stratului. Cel mai simplu mod de a seta culoarea de fundal a unui element este prin proprietatea generică de fundal. În același timp, fundalul umple zona, care este determinată de valorile lățimii, înălțimii și umpluturii (Fig. 4). Orez. 4. Zona stratului care este umplută cu culoarea de fundal Astfel, marginea nu participă la formarea zonei colorate. Datorită diferenței de abordare a browserului pentru redarea elementelor bloc, există și o diferență în afișarea marginilor. Internet Explorer 7 desenează un chenar în interiorul cutiei, în timp ce Firefox îl desenează în exterior. Dar dacă folosim umplerea fundalului, vom vedea o imagine complet opusă (Fig. 5). Și totul pentru că Firefox (Opera) setează culoarea de fundal la marginea exterioară a graniței, iar Internet Explorer - la cea interioară. Începând cu versiunea 8.0 Internet Explorer a schimbat stilul de afișare a cadrului, acesta fiind desenat în interiorul unui bloc, ca în Firefox. A. Internet Explorer 7 b. Firefox, Internet Explorer 8+ Orez. 5. Afișarea cadrului în browsere Exemplul 5 arată cum se generează cod pentru a obține o astfel de chenar. Exemplul 5. Casetă punctată
Diferențele în modul în care browserele abordează chenarele sunt vizibile numai pe fundaluri colorate și linii întrerupte. Pentru o chenar solid, stratul va arăta aproape la fel în toate browserele. Elementele bloc acționează ca elementele principale ale aspectului paginii web. Astfel de elemente se caracterizează prin faptul că încep întotdeauna pe o linie nouă și ocupă întreaga lățime disponibilă a zonei în care se află. Specificația CSS specifică că înălțimea și lățimea unui element sunt determinate nu numai de valorile înălțimii și lățimii, ci și de valorile marginilor, umpluturii și marginilor. Browserele în acest sens sunt împărțite în două părți: unele susțin specificația în această chestiune, în timp ce altele o ignoră și își fac treaba lor. Acest lucru creează dificultăți pentru dezvoltatorii care doresc să creeze pagini web universale. Vă putem sfătui să utilizați proprietățile de lățime și înălțime doar într-un mod limitat, deoarece implicit browserul folosește argumentul auto, care obligă elementul să fie redimensionat automat. |
