Så snart du begynder at opbygge websider med HTML, begynder du at arbejde med dimensionering. For at få dit websted til at se ud som om du vil se det, sandsynligvis passer til et design, du eller en anden designer har oprettet, vil du gerne ændre størrelsen på teksten på dette websted samt andre elementer på siden. For at gøre dette kan du begynde at kigge efter en HTML "size" tag, men du vil hurtigt finde den mangler.
HTML-formatet findes ikke i HTML. I stedet for at angive størrelsen på dine skrifttyper, billeder eller layout skal du bruge Cascading Style Sheets. Faktisk skal enhver visuel ændring, du har brug for at lave til et websteds tekst, eller et andet element skal håndteres af CSS! HTML er kun for struktur.
Det nærmeste tag til en HTML-størrelse tag er den gamle skrifttags tag, som faktisk indeholdt en størrelsesattribut. Vær advaret om, at dette tag er blevet udskrevet i aktuelle versioner af HTML og muligvis ikke understøttes af browsere i fremtiden! Du vil ikke bruge skrifttags tagget i din HTML! I stedet skal du lære CSS at dimensionere dine HTML-elementer og stil din webside i overensstemmelse hermed.
Font størrelser
Skrifttyper er uden tvivl den nemmeste ting at dimensionere med CSS. Moreso end at justere den tekst, med CSS kan du være mere specifik om din websteds typografi. Du kan definere skriftstørrelsen, farven, kassen, vægten, den førende og mere. Med skrifttags-tagget kan du kun definere størrelsen og derefter kun som et tal i forhold til browserens standard skriftstørrelse, som adskiller sig fra hver kunde.
Hvis du vil indstille dit afsnit til at have en skriftstørrelse på 12pt, skal du bruge skrifttypestørrelsesformatet:
h3 {font-size = 24px; }
Denne stil ville indstille skrifttypestørrelsen af headiing3-elementer 24 pixels. Du kan tilføje dette til et eksternt stilark, og alle dit websites H3'er ville bruge denne stil.
Hvis du vil tilføje yderligere typografiske stilarter til din tekst, kan du tilføje dem på denne CSS-regel:
h3 {font-size: 24px; farve: # 000; font-weight: normal; }
Dette ville ikke kun sætte denne skrifttype for H3s, det ville også sætte farven til sort (hvilket er hex-koden på # 000), og det ville sætte vægten til "normal". Som standard giver browsere overskrifter 1-6 som fed tekst, så denne stil vil tilsidesætte denne standard og i det væsentlige "ikke-fed" teksten.
Billedstørrelser
Billeder kan være vanskelige at definere størrelser, fordi du faktisk kan bruge browseren til at ændre størrelsen på billedet. Selvfølgelig er størrelsen af billeder med browseren en dårlig idé, fordi det får siderne til at indlæses langsommere, og browsere gør ofte et dårligt job med at ændre størrelse, hvilket gør billederne dårlige. I stedet skal du bruge grafiksoftware til at ændre størrelse på billeder og derefter skrive deres faktiske størrelser på din webside HTML.
I modsætning til skrifttyper kan billeder enten bruge HTML eller CSS til at definere størrelsen. Du definerer billedets bredde og højden. Når du bruger HTML, kan du kun definere billedstørrelsen i pixels. Hvis du bruger CSS, kan du bruge andre målinger, herunder tommer, centimeter og procentdele. Denne sidste værdi, procentdele, er meget nyttig, når dine billeder skal være flydende, som i et lydhurtigt websted.
Hvis du vil definere din billedstørrelse ved hjælp af HTML, skal du bruge højde- og breddeattributterne for img-taggen. For eksempel vil dette billede være 400x400 pixels kvadrat:
height = "400" width = "400" alt = "image" />
Hvis du vil definere din billedstørrelse ved hjælp af CSS, skal du bruge egenskaberne for højde og bredde. Her er det samme billede, ved hjælp af CSS til at definere størrelsen:
style = "height: 400px; width: 400px;" alt = "billede" />
Layout Størrelser
Den mest almindelige størrelse, du definerer i et layout, er bredden, og det første du skal bestemme, er, om du vil bruge et fast breddelayout eller et lydhurtigt websted. Med andre ord, skal du definere bredden som et nøjagtigt antal pixels, inches eller point? Eller skal du angive din layoutbredde for at være fleksibel ved hjælp af ems eller procentsatser? For at definere størrelsen af dit layout bruger du bredde og højde CSS egenskaber, ligesom du ville i et billede.
Fast bredde:
style = "width: 600px;">
Væskebredde:
style = "width: 80%;">
Når du beslutter dig for bredderne for dit layout, skal du huske på de forskellige browservidde, som dine læsere muligvis bruger, og de forskellige enheder, de også vil bruge. Derfor er lydhøre websites, der kan ændre deres layout og dimensionering baseret på forskellige enheder og skærmstørrelser, den bedste praksis standard i dag.
