Webguneak HTML-rekin eraikitzen hasten zaren heinean, kalkulatzen hasiko zara lanean. Zure webgunea begiratu nahi duzun itxura egiteko, diseinatzaile edo diseinatzaile batek sortutako diseinuarekin bat etorrita, gune honetako testua eta orrialdeko beste elementu batzuk aldatu nahi dituzu. Horretarako HTML "tamaina" etiketa bat bilatu ahal izango duzu, baina laster aurkituko duzu falta.
HTML tamaina-etiketa HTMLan ez dago. Horren ordez, zure letra tipoak, irudiak edo diseinua tamaina Cascading Style Sheets erabili beharko zenituzke. Izan ere, gunearen testu bat edo beste elementu bat egin behar duzun ikusizko aldaketak CSS-k kudeatu beharko lituzke. HTML egitura bakarra da.
HTML tamaina duen etiketa bat etiketa hurbilena letra-etiketaren zaharra da, tamaina-atributu bat ere bai. Etiketa hau HTML bertsioko bertsio zaharkiturik geratu dela ohartarazi du eta baliteke etorkizunean arakatzaileek ez onartzea. Ez duzu letra-etiketa zure HTMLan erabili nahi! Horren ordez, CSS ikasi beharko zenuke zure HTML elementu tamaina handitzeko eta webgunearen estiloa horren arabera.
Letra-tamaina
Fonts dira, dudarik gabe, CSS-rekin tamaina errazena. Testu hori kritikatuz baino Moresok, zure CSS webgunearen tipografia zehatzagoa izan daiteke. Letraren tamaina, kolorea, estalkia, pisua, punta-puntakoa eta gehiago zehaztu ditzakezu. Letraren etiketa honekin, tamaina bakarrik definitu dezakezu, eta, beraz, arakatzailearen letra-tipoaren tamaina lehenetsia da, bezero bakoitzarentzat desberdina.
Zure paragrafoa 12p-ko letra-tamaina izateko ezartzeko, erabili letra-tipoaren tamaina estiloaren propietatea:
h3 {font-size = 24px; }Estilo honek headiing3 elementuak 24 pixeleko letra-tamaina ezarriko luke. Kanpoko estilo-orri batera gehitu dezakezu eta zure gune honetako H3ak estilo hau erabiliko luke.
Testu tipografiko osagarriak zure testuan gehitu nahi badituzu, CSS arau honetan gehitu ditzakezu:
h3 {font-size: 24px; kolorea: # 000; font-weight: normal; }H3-ko letra-tamaina ezartzeko bakarrik ezarriko luke, kolorea beltzean ezarriko luke (hau da, # 000 kodea adierazten du) eta pisua "normala" litzateke. Lehenespenez, nabigatzaileek 1-6 izenburuak testu lodiz gisa errendatzen dituzte, eta, beraz, estilo honek testua "lehenetsia" eta lehenetsi gisa baliogabetuko luke.
Irudiaren tamainak
Irudiak delikatua izan daiteke tamaina definitzeko, arakatzailea benetan erabili ahal izateko irudiaren tamaina aldatzeko. Noski, arakatzailearentzako irudien tamaina aldatzea ideia txarra da, orriak kargatzen uzten duelako eta arakatzaileek tamainaz aldatzeko lan eskasa egin ohi dutelako, irudiak itxura txarrak eginez. Horren ordez, software grafikoa erabili behar duzu irudiaren tamaina aldatzeko eta, ondoren, zure benetako tamainak idatzi zure Web orriko HTMLan.
Letra ez bezala, irudiak HTML edo CSS erabil ditzake tamaina zehazteko. Irudiaren eta altueraren zabalera zehazten duzu. HTML erabiltzen duzunean, irudiaren tamaina pixeletan bakarrik definitu dezakezu. CSS erabiltzen baduzu, neurriak, hazbeteak, zentimetroak eta ehunekoak erabil ditzakezu. Azkeneko balioa, ehunekoak, oso erabilgarria da zure irudiak arina izan behar dute, web sentikor bezala.
HTML irudia erabiliz irudiaren tamaina zehazteko, img etiketen altuera eta zabaleraren atributuak erabili. Adibidez, irudi hau 400x400 pixeleko karratua izango litzateke:
altuera = "400" width = "400" alt = "image" />Zure irudia tamaina CSS erabiliz definitzeko, erabili altuera eta zabalera estilo propietateak. Hemen irudi bera da, CSS erabiliz tamaina definitzeko:
style = "height: 400px; width: 400px;" alt = "image" />Diseinuaren neurriak
Diseinu batean zehazten duzun tamaina ohikoena zabalera da, eta erabaki behar duzun lehenbailehen zabalera finkoko diseinua edo erantzukizunezko webgunea erabili behar den ala ez. Beste era batera esanda, zehaztuko al duzu zabalera pixel, hazbete edo puntu kopuru zehatza? Edo zure diseinu-zabalera malgua izango duzu ems edo ehunekoak erabiliz? Zure diseinurako tamaina zehazteko, irudi batean nahi duzun bezala CSS propietatearen zabalera eta altuera erabiliko dituzu.
Zabalera finkoa:
style = "width: 600px;">Zabalera likidoa:
style = "width:% 80;">Diseinurako zabalera erabakitzen ari zarenean, irakurleek erabil ditzaketen arakatzailearen zabalera kontuan izan beharko zenuke eta gailuak erabiltzen dituzten gailuak ere erabiliko dira. Hori dela eta, webgune sentikorrak , beren diseinua eta tamaina aldatu ahal izango dituzte gailu eta pantailaren tamainan oinarrituta, praktika onenaren estandarra da gaur egun.