Zodra u begint met het bouwen van webpagina's met HTML, begint u te werken met dimensionering. Als u wilt dat uw site eruitziet zoals u wilt, waarschijnlijk in overeenstemming met een ontwerp dat u of een andere ontwerper heeft gemaakt, moet u de tekst op die site en andere elementen op de pagina aanpassen. Om dit te doen, kunt u op zoek gaan naar een HTML-tag voor "size", maar u zult snel merken dat deze ontbreekt.
De tag HTML-formaat bestaat niet in HTML. Gebruik in plaats daarvan Cascading Style Sheets om de grootte van uw lettertypen, afbeeldingen of lay-out in te stellen. In feite moet elke visuele verandering die u moet aanbrengen in de tekst van een site of in een ander element worden behandeld door CSS! HTML is alleen voor structuur.
De tag die het dichtst bij een HTML-maat tag ligt, is de oude font-tag, die inderdaad een attribuut size bevatte. Wees gewaarschuwd dat deze tag is verouderd in de huidige HTML-versies en mogelijk in de toekomst niet meer door browsers wordt ondersteund! U wilt de lettertypetag niet gebruiken in uw HTML! In plaats daarvan zou u CSS moeten leren om uw HTML-elementen op te waarderen en uw webpagina dienovereenkomstig in te richten.
Lettergrootte
Lettertypen zijn zonder twijfel het gemakkelijkst te rangschikken met CSS. Méér dan alleen die tekst aanpassen, met CSS kun je specifieker zijn over je website-typografie. U kunt de tekengrootte, de kleur, de omkasting, het gewicht, de invoer en nog veel meer definiëren. Met de lettertypemarkering kunt u alleen de grootte definiëren en dan alleen als een getal ten opzichte van de standaard lettertypegrootte van de browser dat voor elke klant verschilt.
Gebruik de eigenschap font-size style om uw alinea in te stellen op een lettergrootte van 12pt:
h3 {font-size = 24px; }
Deze stijl zou de lettergrootte van headiing3 elementen 24 pixels instellen. U zou dit aan een externe stijlpagina kunnen toevoegen en al uw H3's op uw site zouden deze stijl gebruiken.
Als u extra typografische stijlen aan uw tekst wilt toevoegen, kunt u deze aan deze CSS-regel toevoegen:
h3 {font-size: 24px; kleur: # 000; font-weight: normal; }
Dit zou niet alleen die lettergrootte voor H3s instellen, maar ook de kleur op zwart zetten (wat de hex-code van # 000 betekent) en het gewicht op "normaal" zetten. Browers geven standaard de kopjes 1-6 weer als vetgedrukte tekst, dus deze stijl zou die standaard overschrijven en de tekst in wezen "niet-vetgedrukt" maken.
Beeldgroottes
Afbeeldingen kunnen lastig zijn om formaten te definiëren, omdat u de browser daadwerkelijk kunt gebruiken om de grootte van de afbeelding te wijzigen. Natuurlijk is het aanpassen van afbeeldingen met de browser een slecht idee, omdat het ervoor zorgt dat pagina's langzamer laden en browsers vaak een slecht formaat aanpassen, waardoor de afbeeldingen er slecht uitzien. In plaats daarvan moet u grafische software gebruiken om het formaat van afbeeldingen te wijzigen en vervolgens de werkelijke formaten in de webpagina-HTML te schrijven.
In tegenstelling tot lettertypen, kunnen afbeeldingen HTML of CSS gebruiken om de grootte te definiëren. U definieert de breedte van het beeld en de hoogte. Wanneer u HTML gebruikt, kunt u de afbeeldingsgrootte alleen in pixels definiëren. Als u CSS gebruikt, kunt u andere metingen gebruiken, waaronder inches, centimeters en percentages. Deze laatste waarde, percentages, is erg handig wanneer uw afbeeldingen vloeiend moeten zijn, zoals in een responsieve website.
Gebruik de kenmerken height en width van de img-tag om uw afbeeldingsgrootte met HTML te definiëren. Deze afbeelding zou bijvoorbeeld vierkant van 400x400 pixels zijn:
height = "400" width = "400" alt = "image" />
Gebruik de stijlkenmerken voor hoogte en breedte om uw afbeeldingsgrootte met CSS te definiëren. Hier is dezelfde afbeelding, met behulp van CSS om de grootte te definiëren:
style = "height: 400px; width: 400px;" alt = "afbeelding" />
Layout Maten
De meest voorkomende grootte die u in een lay-out definieert, is de breedte en het eerste dat u moet beslissen, is of u een lay-out met een vaste breedte of een responsieve website wilt gebruiken. Met andere woorden, gaat u de breedte definiëren als een exact aantal pixels, inches of punten? Of ga je je lay-outbreedte instellen om flexibel te zijn met ems of percentages? Als u de grootte van uw lay-out wilt definiëren, gebruikt u de CSS-eigenschappen width en height op dezelfde manier als in een afbeelding.
Vaste breedte:
style = "width: 600px;">
Vloeibare breedte:
style = "width: 80%;">
Wanneer u kiest voor de breedte van uw lay-out, moet u rekening houden met de verschillende browserbreedten die uw lezers kunnen gebruiken en de verschillende apparaten die zij ook zullen gebruiken. Dit is de reden waarom responsieve websites, die hun lay-out en dimensionering kunnen wijzigen op basis van verschillende apparaten en schermformaten, de best practice-standaard van vandaag is.
