Čim počnete da pravite web stranice sa HTML-om, počnite da radite s veličinom. Da bi vaš sajt izgledao na način na koji želite da ga pogledate, verovatno ćete podudarati sa dizajnom koji ste napravili vi ili neki drugi dizajner, želeli biste da promenite veličinu teksta na toj lokaciji, kao i druge elemente na stranici. Da biste to uradili, možda ćete početi tražiti oznaku veličine HTML-a, ali ćete ga brzo pronaći.
HTML oznaka veličine ne postoji u HTML-u. Umesto toga, da biste postavili veličinu fontova, slika ili rasporeda, trebalo bi da koristite Cascading Style Sheets. U stvari, svaka vizuelna promena koju treba da napravite u tekstu sajta ili drugom elementu treba upravljati CSS-om! HTML je samo za strukturu.
Najbliža oznaka HTML oznake veličine je stara oznaka fonta, koja je zaista sadržala atribut veličine. Budite upozoreni da je ova oznaka zastarjela u trenutnim verzijama HTML-a i možda neće biti podržana od strane pretraživača u budućnosti! Ne želite da koristite oznaku fonta u HTML-u! Umesto toga, trebalo bi naučiti CSS da izmjeri HTML elemente i stavi svoju web stranicu u skladu s tim.
Veličine fontova
Fontovi su verovatno najjednostavnije za veličinu CSS-a. Više nego samo veličanje tog teksta, sa CSS-om možete biti specifičnije o tipografiji vaše web stranice . Možete definisati veličinu fonta, boju, kućište, težinu, vodeću i još mnogo toga. Pomoću oznake fonta možete odrediti samo veličinu, a zatim samo kao broj u odnosu na podrazumevanu veličinu fonta koji se razlikuje za svakog kupca.
Da biste postavili svoj pasus veličini fonta od 12pt, upotrebite svojstvo stila veličine fonta:
h3 {font-size = 24px; }Ovaj stil bi postavio veličinu fonta od headiing3 elemenata od 24 piksela. Možete ovo dodati spoljašnjem listu stilova i svi H3-ovi vašeg sajta bi koristili ovaj stil.
Ako želite u svoj tekst dodati dodatne tipografske stilove, mogli biste ih dodati na ovo CSS pravilo:
h3 {font-size: 24px; boja: # 000; font-weight: normal; }To ne samo da bi postavilo tu veličinu fonta za H3-ove, nego će i boju postaviti crno (to je ono što znači heks kôd od # 000) i to bi postavilo težinu na "normalno". Po podrazumevanim postavkama, pretraživači prikazuju naslove 1-6 kao bold text, tako da će ovaj stil prevazići to podrazumevano i u suštini "ne-bold" tekst.
Veličine slika
Slike mogu biti nezgodne da definišu veličine, jer zapravo možete da koristite pregledač da biste promenili veličinu slike. Naravno, promena veličine slike sa pregledačem je loša ideja jer se stranice učitavaju sporije i pretraživači često rade na lošem poslu izmjene veličine, što čini slike loše. Umesto toga, trebalo bi da koristite grafički softver za promjenu veličine slika, a zatim upišite svoje stvarne veličine na HTML svojoj web stranici.
Za razliku od fontova, slike mogu koristiti HTML ili CSS da definišu veličinu. Definišete širinu slike i visinu. Kada koristite HTML, možete definirati veličinu slike samo u pikselima. Ako koristite CSS, možete koristiti i druga merenja uključujući inčare, centimetre i procente. Ova poslednja vrednost, procenti, je veoma korisna kada vaše slike moraju biti fluidne, kao na odgovarajućoj web lokaciji.
Da biste definisali veličinu slike koristeći HTML, koristite atribute visine i širine oznake img. Na primjer, ova slika bi bila 400x400 piksela kvadratnih:
visina = "400" width = "400" alt = "slika" />Da biste definirali veličinu slike koristeći CSS, koristite svojstva stila visine i širine. Evo iste slike, koristeći CSS za definisanje veličine:
style = "height: 400px; width: 400px;" alt = "slika" />Veličina postavki
Najčešća veličina koju definišete u rasporedu je širina, a prva stvar koju ćete morati da odlučite jeste li koristiti raspored fiksne širine ili odgovarajući veb sajt. Drugim rečima, da li ćete definisati širinu kao tačan broj piksela, inča ili tačaka? Ili ćete postaviti širinu rasporeda da bude fleksibilna koristeći ems ili procente? Da biste definisali veličinu vašeg izgleda, koristite CSS svojstvo širine i visine kao što ste i na slici.
Fiksna širina:
style = "width: 600px;">Širina tekućine:
style = "width: 80%;">Kada odlučujete o širinama za svoj izgled, morate imati u vidu različite širine čitača koje mogu koristiti vaši čitači i različiti uređaji koje će također koristiti. Zbog toga su odzivne web stranice koje mogu da promene svoj izgled i veličinu na osnovu različitih uređaja i veličina ekrana, danas je standard najbolje prakse.