Čim počnete s web stranicama s HTML-om, počet ćete raditi s veličinom. Da bi vaša web-lokacija izgledala na način na koji želite da izgleda, vjerojatno podudaranje s dizajnom koju ste stvorili ili neki drugi dizajner, htjeli biste promijeniti veličinu teksta na toj web-lokaciji, kao i druge elemente na stranici. Da biste to učinili, možete početi tražiti oznaku "veličina" HTML-a, ali ćete je brzo pronaći nedostaje.
Oznaka veličine HTML-a ne postoji u HTML-u. Umjesto toga, da biste postavili veličinu svojih fontova, slika ili izgleda, trebali biste upotrijebiti Cascading Style Sheets. Zapravo, svaka vizualna promjena koju trebate učiniti na tekstu web mjesta ili nekom drugom elementu trebala bi biti obrađena od strane CSS-a! HTML je samo za strukturu.
Najbliža oznaka za oznaku veličine HTML-a je stara oznaka fonta koja je doista uključivala atribut veličine. Budite upozoreni da je ova oznaka zastarjela u trenutačnim verzijama HTML-a, a preglednici u budućnosti možda neće biti podržani! Ne želite upotrebljavati oznaku fonta u HTML-u! Umjesto toga, trebali biste naučiti CSS kako biste veličali svoje HTML elemente i stilirali svoju web stranicu u skladu s tim.
Veličine fonta
Fontovi su vjerojatno najlakše veličati s CSS-om. Moreso, a ne samo dimenzioniranje tog teksta, s CSS-om možete biti specifičniji za tipografiju vašeg web mjesta . Možete definirati veličinu fonta, boju, kućište, težinu, vodeće i još mnogo toga. Pomoću oznake za fontove možete definirati samo veličinu, a zatim samo kao broj u odnosu na zadanu veličinu fonta preglednika koji se razlikuje za svakog korisnika.
Da biste postavili svoj stavak da ima veličinu fonta od 12pt, upotrijebite svojstvo stila fontova:
h3 {font-size = 24px; }Ovaj stil bi postavio veličinu fonta headiing3 elemenata 24 piksela. Možete ovo dodati na vanjski stilski list, a svi će H3-ovi web-lokacije upotrijebiti ovaj stil.
Ako želite dodati dodatne tipografske stilove u svoj tekst, mogli biste ih dodati na ovo pravilo CSS:
h3 {font-size: 24px; boja: # 000; font-weight: normalna; }To ne bi samo postavila veličinu fonta za H3, već bi postavila i crnu boju (što znači heksadecimalni kod od # 000) i postavit će težinu na "normalno". Prema zadanim postavkama, preglednici prikazuju zaglavlje 1-6 kao podebljani tekst, pa će taj stil nadjačati taj zadani i bitno "ne-podebljan" tekst.
Veličine slike
Slike mogu biti neprikladne za definiranje veličina jer zapravo možete koristiti preglednik za promjenu veličine slike. Naravno, promjena veličine slike s preglednikom je loša ideja jer uzrokuje učestalije učitavanje stranica, a preglednici često čine loš posao prilagodbe veličine, zbog čega slike izgledaju loše. Umjesto toga, trebali biste upotrijebiti grafički softver za promjenu veličine slike i zatim napisati njihove stvarne veličine u HTML web stranici.
Za razliku od fontova, slike mogu koristiti HTML ili CSS kako bi definirali veličinu. Definirate širinu slike i visinu. Kada koristite HTML, veličinu slike možete definirati samo u pikselima. Ako koristite CSS, možete upotrijebiti i druga mjerenja, uključujući inča, centimetre i postotke. Ova zadnja vrijednost, postoci, vrlo je korisna kada vaše slike trebaju biti tekućine, kao u odzivnoj web stranici.
Da biste definirali veličinu slike pomoću HTML-a, upotrijebite atribute visine i širine img oznake. Na primjer, ova slika bi bila kvadrat 400 x 400 piksela:
height = "400" width = "400" alt = "slika" />Da biste definirali veličinu slike pomoću CSS, koristite svojstva stila visine i širine. Evo iste slike pomoću CSS-a za definiranje veličine:
style = "height: 400px; širina: 400px;" alt = "slika" />Veličine izgleda
Najčešća veličina koju odredite u rasporedu je širina, a prva stvar koju trebate odlučiti je li upotrebljavati izgled fiksne širine ili responzivnu web-lokaciju. Drugim riječima, hoćete li definirati širinu kao točan broj piksela, inča ili bodova? Ili ćete postaviti svoju širinu izgleda fleksibilnom upotrebom ems ili postotaka? Da biste definirali veličinu izgleda, koristite širinu i visinu CSS svojstava baš kao što biste to učinili na slici.
Fiksna širina:
style = "width: 600px;">Širina tekućine:
style = "width: 80%;">Kada odlučite o širini izgleda, trebali biste imati na umu različite širine preglednika koje bi čitatelji mogli upotrebljavati i različite uređaje koje će upotrebljavati. Zato su odgovarajući web-lokacije , koje mogu promijeniti izgled i dimenziju na temelju različitih uređaja i veličina zaslona, danas najbolji standard prakse.