Tan bon punt comenceu a crear pàgines web amb HTML, començareu a treballar amb el dimensionat. Per fer que el vostre lloc es vegi de la manera que voleu que es vegi, és probable que coincideixi amb un disseny que heu creat un altre dissenyador, voldreu canviar la mida del text d'aquest lloc, així com altres elements de la pàgina. Per fer-ho, podeu començar a cercar una etiqueta de "mida" HTML, però la trobareu a faltar ràpidament.
L'etiqueta de mida HTML no existeix a HTML. En canvi, per establir la mida de les fonts, les imatges o el disseny, haureu d'utilitzar Cascading Style Sheets. De fet, qualsevol canvi visual que necessiteu fer al text del lloc o a un altre element hauria de ser gestionat per CSS. L'HTML només és per a estructures.
L'etiqueta més propera a una etiqueta de mida HTML és l'etiqueta de font antiga, que de fet incloïa un atribut de mida. Tingueu en compte que aquesta etiqueta s'ha quedat obsoleta amb les versions actuals d'HTML i pot ser que no siguin compatibles amb els navegadors en el futur. No voleu utilitzar l'etiqueta de font al vostre HTML. En lloc d'això, haureu d'aprendre CSS per dimensionar els vostres elements HTML i dissenyar la seva pàgina web en conseqüència.
Mida de lletra
Les fonts són, sens dubte, el més fàcil de fer servir amb CSS. Moreso que simplement dimensionar aquest text, amb CSS, pot ser més específic sobre la tipografia del vostre lloc web . Podeu definir la mida de la lletra, el color, la carcassa, el pes, el líder i molt més. Amb l'etiqueta de tipus de lletra, només podeu definir la mida, i només com un nombre relatiu a la mida predeterminada del tipus de lletra del navegador, que és diferent per a cada client.
Per establir que el paràgraf tingui una mida de font de 12pt, utilitzeu la propietat d'estil de mida de font:
h3 {font-size = 24px; }Aquest estil establirà la mida de la font dels elements headiing3 de 24 píxels. Podeu afegir això a un full d'estils extern i tots els H3 del vostre lloc utilitzaran aquest estil.
Si voleu afegir estils tipogràfics addicionals al vostre text, podeu afegir-los a aquesta regla CSS:
h3 {font-size: 24px; color: # 000; font-weight: normal; }Això no només establirà aquesta mida de lletra per a H3, sinó que també fixaria el color en negre (que és el que significa el codi hexadecimal de # 000) i establiria el pes a "normal". De manera predeterminada, els navegadors representen els encapçalaments 1-6 com a text en negreta, de manera que aquest estil substituirà aquest text per defecte i, essencialment, "sense negreta".
Mides d'imatge
Les imatges poden ser difícils per definir les mides ja que podeu utilitzar el navegador per canviar la mida de la imatge. Per descomptat, canviar la mida de les imatges amb el navegador és una mala idea perquè fa que les pàgines es carreguin més lentament i els navegadors sovint fan una mala feina de canviar la mida, fent que les imatges es vegin malament. En el seu lloc, hauríeu d'utilitzar el programari gràfic per canviar la mida de les imatges i escriure les mides reals en el vostre HTML de la pàgina web.
A diferència dels tipus de lletra, les imatges poden utilitzar HTML o CSS per definir la mida. Es defineix l'amplada de la imatge i l'alçada. Quan utilitzeu HTML, només podeu definir la mida de la imatge en píxels. Si utilitzeu CSS, podeu utilitzar altres mesures, com polzades, centímetres i percentatges. Aquest últim valor, percentatges, és molt útil quan les vostres imatges necessiten ser fluides, com en un lloc web sensible.
Per definir la mida de la vostra imatge amb HTML, utilitzeu els atributs d'alçada i amplada de l'etiqueta img. Per exemple, aquesta imatge seria de 400x400 píxels quadrats:
height = "400" width = "400" alt = "image" />Per definir la mida de la imatge utilitzant CSS, utilitzeu les propietats d'estil d'alçada i amplada. Aquí teniu la mateixa imatge, usant CSS per definir la mida:
style = "height: 400px; width: 400px;" alt = "imatge" />Mides de format
La mida més comú que definiu en un disseny és l'amplada, i el primer que haureu de decidir és utilitzar un disseny de amplada fixa o un lloc web sensible. En altres paraules, va a definir l'amplada com un nombre exacte de píxels, polzades o punts? O va a configurar l'amplada del disseny perquè sigui flexible utilitzant ems o percentatges? Per definir la mida del disseny, utilitzeu les propietats CSS d'amplada i alçada com ho faria en una imatge.
Ample fixat:
style = "width: 600px;">Ample de líquid:
style = "width: 80%;">Quan decidiu l'amplada del disseny, haureu de tenir en compte els diferents amples del navegador que els vostres lectors podrien estar utilitzant i els diferents dispositius que també usaran. Per aquest motiu, els llocs web responsables , que poden canviar la seva disposició i el seu dimensionament en funció de diferents dispositius i mides de pantalla, són avui els estàndards de les millors pràctiques.