Assim que você começar a criar páginas da Web com HTML, começará a trabalhar com o dimensionamento. Para que seu site tenha a aparência que você deseja, provavelmente correspondendo a um design criado por você ou outro designer, você desejará alterar o tamanho do texto desse site, além de outros elementos na página. Para fazer isso, você pode começar a procurar por uma tag de "tamanho" de HTML, mas você a descobrirá rapidamente.
A tag de tamanho HTML não existe em HTML. Em vez disso, para definir o tamanho de suas fontes, imagens ou layout, você deve usar as Folhas de Estilo em Cascata. Na verdade, qualquer alteração visual que você precise fazer no texto de um site ou em outro elemento deve ser tratada pelo CSS! HTML é apenas para estrutura.
A tag mais próxima de uma tag de tamanho HTML é a tag de fonte antiga, que de fato inclui um atributo de tamanho. Esteja avisado de que essa tag foi preterida nas versões atuais do HTML e pode não ser suportada pelos navegadores no futuro! Você não quer usar a tag de fonte no seu HTML! Em vez disso, você deve aprender CSS para dimensionar seus elementos HTML e estilizar sua página da Web de acordo.
Tamanhos de Fontes
Fontes são, sem dúvida, a coisa mais fácil de dimensionar com CSS. Mais do que apenas dimensionar esse texto, com o CSS você pode ser mais específico sobre a tipografia do seu site. Você pode definir o tamanho da fonte, a cor, a caixa, o peso, a entrelinha e muito mais. Com a tag de fonte, você só pode definir o tamanho e, em seguida, apenas como um número relativo ao tamanho de fonte padrão do navegador, que difere para cada cliente.
Para definir seu parágrafo para ter um tamanho de fonte de 12pt, use a propriedade de estilo de tamanho de fonte:
h3 {font-size = 24px; }
Esse estilo definiria o tamanho da fonte dos elementos headiing3 24 pixels. Você poderia adicionar isso a uma folha de estilo externa e todos os H3s do seu site usariam esse estilo.
Se você quiser adicionar estilos tipográficos adicionais ao seu texto, adicione-os a essa regra de CSS:
h3 {font-size: 24px; cor: # 000; font-weight: normal; }
Isso não apenas definiria esse tamanho de fonte para H3s, como também definiria a cor para preto (que é o que o código hexadecimal de # 000 significa) e definiria o peso como "normal". Por padrão, os navegadores processam os títulos de 1 a 6 como texto em negrito, portanto, esse estilo substituirá esse padrão e essencialmente "não realce" o texto.
Tamanhos de imagem
As imagens podem ser difíceis de definir, pois você pode usar o navegador para redimensionar a imagem. Naturalmente, redimensionar imagens com o navegador é uma má ideia, porque faz com que as páginas sejam carregadas mais lentamente e os navegadores costumam fazer um trabalho ruim de redimensionamento, fazendo com que as imagens pareçam ruins. Em vez disso, você deve usar o software gráfico para redimensionar imagens e, em seguida, gravar seus tamanhos reais em HTML da página da Web.
Ao contrário das fontes, as imagens podem usar HTML ou CSS para definir o tamanho. Você define a largura da imagem e a altura. Quando você usa HTML, só pode definir o tamanho da imagem em pixels. Se você usar CSS, poderá usar outras medidas, incluindo polegadas, centímetros e porcentagens. Este último valor, porcentagens, é muito útil quando suas imagens precisam ser fluidas, como em um site responsivo.
Para definir o tamanho da imagem usando HTML, use os atributos height e width da tag img. Por exemplo, essa imagem seria de 400 x 400 pixels quadrados:
altura = "400" largura = "400" alt = "imagem" />
Para definir o tamanho da imagem usando CSS, use as propriedades de estilo de altura e largura. Aqui está a mesma imagem, usando CSS para definir o tamanho:
style = "height: 400px; width: 400px;" alt = "image" />
Tamanhos de Layout
O tamanho mais comum que você define em um layout é a largura, e a primeira coisa que você precisa decidir é se deve usar um layout de largura fixa ou um site responsivo. Em outras palavras, você vai definir a largura como um número exato de pixels, polegadas ou pontos? Ou você vai definir a largura do seu layout para ser flexível usando ems ou porcentagens? Para definir o tamanho do layout, use as propriedades CSS de largura e altura como faria em uma imagem.
Largura fixa:
style = "width: 600px;">
Largura do líquido:
style = "width: 80%;">
Quando você está decidindo sobre as larguras do layout, deve ter em mente as diferentes larguras de navegador que seus leitores podem estar usando e os diferentes dispositivos que eles também usarão. É por isso que os sites responsivos, que podem alterar seu layout e dimensionamento com base em diferentes dispositivos e tamanhos de tela, são o padrão de melhores práticas atualmente.
