Tan pronto como comecen a construír páxinas web con HTML, comezará a traballar co tamaño. Para facer que o seu sitio pareza o xeito no que desexa que se vexa, probablemente coincida co deseño que creou ou outro deseñador, vai querer cambiar o tamaño do texto nese sitio, así como outros elementos na páxina. Para facelo, podes comezar a buscar unha etiqueta de "tamaño" HTML, pero axiña a atoparás en falta.
A etiqueta de tamaño HTML non existe en HTML. No seu canto, para definir o tamaño das fontes, imaxes ou deseño, debería usar Follas de estilo en cascada. En realidade, calquera cambio visual que precise para o texto dun sitio ou outro elemento debe ser manexado por CSS. O HTML é só para a estrutura.
A etiqueta máis próxima a unha etiqueta de tamaño HTML é a etiqueta de fonte antiga, que de feito incluía un atributo de tamaño. Teña en conta que esta etiqueta quedou obsoleta nas versións actuais de HTML e pode que os navegadores non o admitan no futuro. Non quere empregar a etiqueta de fonte no seu HTML. No seu canto, debes aprender CSS para dimensionar os teus elementos HTML e debuxar a túa páxina web de conformidade.
Tamaños de fonte
É posible que as fontes sexan o máis doado de tamaño con CSS. Moreso que simplemente dimensionar ese texto, con CSS pode ser máis específico sobre a tipografía do teu sitio web . Pode definir o tamaño da fonte, a cor, a carcasa, o peso, o principal e máis. Coa etiqueta de fonte, só pode definir o tamaño e só como un número en relación co tamaño do tipo de letra predeterminado do navegador que difire para cada cliente.
Para configurar o parágrafo para ter un tamaño de letra de 12pt, use a propiedade de estilo de tamaño de fonte:
h3 {font-size = 24px; }Este estilo establecería o tamaño da fonte dos elementos headiing3 de 24 píxeles. Podería engadir isto a unha folla de estilo externa e todos os H3 do seu sitio usarían este estilo.
Se desexa engadir estilos tipográficos adicionais ao seu texto, pode engadilos a esta regra CSS:
h3 {font-size: 24px; cor: # 000; fonte-peso: normal; }Isto non só axustaría ese tamaño de letra para os H3s, tamén axustaría a cor a negro (que é o que significa o código hexadecimal de # 000) e axustaría o peso a "normal". Por defecto, os navegadores representan os títulos 1-6 como texto en negra, polo que este estilo substituiría por defecto e, esencialmente, "sen negra" no texto.
Tamaños da imaxe
As imaxes poden ser complicadas para definir tamaños porque realmente pode usar o navegador para redimensionar a imaxe. Por suposto, redimensionar as imaxes co navegador é unha mala idea porque fai que as páxinas carguen máis lentamente e os navegadores a miúdo fan un traballo pobre de redimensionar, facendo as imaxes malas. En cambio, debes usar o software gráfico para redimensionar as imaxes e logo escribir os tamaños reais no teu HTML da páxina web.
A diferenza das fontes, as imaxes poden usar HTML ou CSS para definir o tamaño. Define o ancho da imaxe e do alto. Cando usa HTML, só pode definir o tamaño da imaxe en píxeles. Se usa CSS, pode usar outras medidas, incluíndo centímetros, centímetros e porcentaxes. Este último valor, porcentaxes, é moi útil cando as imaxes deben ser fluídas, como nun sitio web sensible.
Para definir o tamaño da imaxe usando HTML, use os atributos de alto e ancho da etiqueta img. Por exemplo, esta imaxe sería de 400x400 píxeles cadrados:
altura = "400" ancho = "400" alt = "imaxe" />Para definir o tamaño da imaxe usando CSS, use as propiedades de estilo de alto e ancho. Aquí ten a mesma imaxe, usando CSS para definir o tamaño:
style = "height: 400px; width: 400px;" alt = "imaxe" />Tamaños de deseño
O tamaño máis común que define nun deseño é o ancho e o primeiro que terá que decidir é usar un deseño de ancho fixo ou un sitio web sensible. Noutras palabras, vai definir o ancho como un número exacto de píxeles, polgadas ou puntos? Ou vai establecer o seu ancho de deseño para ser flexible usando EMS ou porcentaxes? Para definir o tamaño do seu deseño, usa propiedades de ancho e alto CSS como se fose nunha imaxe.
Ancho fixo:
style = "width: 600px;">Ancho de líquido:
style = "width: 80%;">Cando estás decidindo os anchos do teu deseño, debes ter en conta os diferentes anchos do navegador que os teus lectores poderían estar usando e os diferentes dispositivos que tamén estarán usando. É por iso que os sitios web responsivos , que poden cambiar o seu deseño e tamaño a partir de diferentes dispositivos e tamaños de pantalla, é o estándar de mellor práctica hoxe.