Sodra u webblaaie met HTML begin bou, sal u met grootte begin werk. Om jou webwerf te laat lyk soos jy wil hê dit moet lyk, waarskynlik ooreenstem met 'n ontwerp wat jy of 'n ander ontwerper geskep het, sal jy die grootte van die teks op die webwerf wil verander, asook ander elemente op die bladsy. Om dit te doen, kan jy begin soek na 'n HTML-grootte-tag, maar jy sal dit vinnig ontbreek.
Die HTML-grootte tag bestaan nie in HTML nie. In plaas daarvan, om die grootte van jou lettertipes, beelde of uitleg te bepaal, moet jy Cascading Style Sheets gebruik. Trouens, enige visuele verandering wat jy nodig het om te maak aan 'n webwerf se teks of 'n ander element moet deur CSS hanteer word! HTML is slegs vir struktuur.
Die naaste tag na 'n HTML-grootte-tag is die ou lettertipe-tag, wat wel 'n grootte-kenmerk insluit. Wees gewaarsku dat hierdie merker in huidige weergawes van HTML verouderd is en moontlik nie deur blaaiers in die toekoms ondersteun word nie! U wil nie die lettertipe-tag in u HTML gebruik nie! In plaas daarvan, moet jy CSS leer om jou HTML-elemente te vergroot en jou webblad dienooreenkomstig te styl.
Lettergroottes
Fonts is waarskynlik die maklikste ding om te vergroot met CSS. Moreso as om die teks te beperk, met CSS kan jy meer spesifiek wees oor jou webwerf-tipografie . U kan die lettergrootte, die kleur, die omhulsel, die gewig, die voorste en meer spesifiseer. Met die lettertipe-tag kan u slegs die grootte definieer, en dan slegs as 'n nommer relatief tot die standaard lettergrootte van die blaaier wat vir elke kliënt verskil.
Om jou paragraaf te stel om 'n fontgrootte van 12pt te hê, gebruik die lettertipe-styl-eienskap:
h3 (font-size = 24px; }Hierdie styl sal die lettergrootte van headiing3-elemente 24 pixels stel. Jy kan dit by 'n eksterne stylblad voeg en al jou werf se H3's sal hierdie styl gebruik.
As u addisionele tipografiese style by u teks wil voeg, kan u dit by hierdie CSS-reël voeg:
h3 (font-grootte: 24px; kleur: # 000; font-weight: normal; }Dit sal nie net die fontgrootte vir H3's bepaal nie, maar dit sal ook die kleur in swart stel (wat die hexkode van # 000 beteken) en dit sal die gewig op "normaal" stel. Standaard word blaaiers as hoofgedrukte opskrifte 1-6 vertoon as vet teks. Hierdie styl sal dus die standaard en in wese "ongedrukte" die teks ignoreer.
Beeld Groottes
Beelde kan moeilik wees om groottes te definieer omdat jy die blaaier eintlik kan gebruik om die prent te verander. Natuurlik, die grootte van beelde met die blaaier is 'n slegte idee, want dit veroorsaak dat bladsye laer laai en blaaiers dikwels 'n swak werk van grootte verander, wat die beelde lyk sleg. In plaas daarvan moet jy grafiese sagteware gebruik om beelde te verander en dan hul werklike groottes in jou webblad HTML te skryf.
In teenstelling met lettertipes, kan beelde HTML of CSS gebruik om die grootte te definieer. U definieer die breedte van die beeld en die hoogte. Wanneer u HTML gebruik, kan u slegs die beeldgrootte in pixels definieer. As jy CSS gebruik, kan jy ander metings gebruik, insluitende duim, sentimeter en persentasies. Hierdie laaste waarde, persentasies, is baie handig wanneer u beelde vloeibaar moet wees, soos in 'n reageerbare webwerf.
Om die grootte van die prent met behulp van HTML te definieer, gebruik die hoogte en breedte eienskappe van die img-tag. Byvoorbeeld, hierdie beeld sal 400x400 pixels vierkant wees:
height = "400" width = "400" alt = "image" />Om die grootte van die prent met CSS te definieer, gebruik die eienskappe van die lengte en breedte. Hier is dieselfde beeld, met behulp van CSS om die grootte te definieer:
style = "height: 400px; width: 400px;" alt = "image" />Uitleggroottes
Die mees algemene grootte wat u in 'n uitleg definieer, is die breedte. Die eerste ding wat u moet besluit, is om 'n vaste breedte-uitleg of 'n responsiewe webwerf te gebruik. Met ander woorde, gaan jy die wydte definieer as 'n presiese aantal pixels, duim of punte? Of gaan jy jou uitlegwydte stel om buigsaam te wees met behulp van ems of persentasies? Om die grootte van jou uitleg te definieer, gebruik jy breedte- en hoogte-CSS-eienskappe soos jy sou in 'n prentjie.
Vaste wydte:
style = "width: 600px new site;">Vloeistofwydte:
style = "width: 80%;">As jy besluit oor die breedtes vir jou uitleg, moet jy in gedagte hou die verskillende leserwydtes wat jou lesers gebruik, en die verskillende toestelle wat hulle ook sal gebruik. Dit is hoekom reageerde webwerwe , wat hul uitleg en grootte kan verander, gebaseer op verskillende toestelle en skermgroottes, is vandag die beste praktykstandaard.