POSICIONAMENTO DE OBJETOS HTML

Video aula 5 - Posicionamento de objetos

Dentro de Div's podemos posicionar objetos.

Os objetos podem se mover dentro de uma Div pode ser utilizados comandos para alterar o posicionamento da imagem na Div.

Podem ser :

Top: Distância do topo até o objeto.

Left: Distância da borda esquerda até a imagem.

Right: Distância da borda direita até a imagem.

Botton: Distância da margem inferior até a imagem.

A propriedade Position pode ser utilizada para determinar valores quanto a distância das bordas que a imagem deve ser posicionada dentro da imagem.

A quando não definido o Position dentro da imagem é definido como static.

Position pode ser:

Static: Valor padrão, na ordem do fluxo do documento.

Fixed: Relativo à janela do browser.

Absolute: Relativo a seu primeiro objeto externo.

Relative: Relativo à sua posição normal.

Para incorporar uma imagem à programação importante é inserir o "atalho" para a imagem dentro no PC.

As medidas do Html podem variar de acordo com a unidade de medida utilizada.

Alt é utilizado para quando a imagem não for carregada por algum motivo aparece uma mensagem de erro no local.

Ex:

<img src="Imagens/IconeTTI.PNG" alt="Logo" style "top:50px; left:100px; position:absolute;"/>

Unidades de medida:

%: Percentagem

in: Polegadas

cm: Centimetro

mm: Milimetro

em: É igual ao tamanho da fonte de corrente. 2em significa 2 vezes o tamanho da fonte atual.

Por exemplo, se um elemento é exibido com uma fonte de 12 pt, em seguida, '2 em 'é 24 pt. O 'em' é uma unidade muito útil em CSS, uma vez que pode se adaptar automaticamente ao tipo de letra que o uso de leitor

ex: Um ex é a altura-x de uma fonte (x-height é geralmente cerca de metade do tamanho da fonte)

pt: Ponto (1 pt é o mesmo que 1/72 de polegada)

pc: Pica (1 pc é o mesmo que 12 pontos)

px: Pixels (pixels um ponto na tela do computador)

Dentro da Div podemos também além de imagens inserir texto, o texto é formatado e posicionado de acordo com as tags selecionadas.

Ex: <div id="TopoTítulo" style=background-color;#ffdd800; width:500px; height:100px; float:left;">

<label style="font-family: Segoe UI; font-size:18pt;"> Treinamentos TI </label>

O posicionamento do texto dentro de uma Div é determinado pelas mesmas Tags de imagem somadas as Tags de tamanho, fonte e cor do texto.

Ex: <div id="TopoTítulo" style=background-color;#ffdd800; width:500px; height:100px; float:left;">

<label style="font-family: Segoe UI; font-size:18pt; left:50%; top:60px; position:absolute;"> Treinamentos TI </label>

Obs: A ordem das Tags indifere dentro do contexto de posicionamento.

Podemos dar comandos para vários quadros dentro de uma div. E colocar para os mesmos quadros certo posicionamento. Inserindo conteúdos para anúncios separados por conteúdos de produtos e serviços dentro dos quadros.

Ex:<div id="conteúdo" style=background-color:#d5cdcd; width:80%; height:100px; position:relative; float:left;">

As Div's podem ter proporções do tamanho por percentual dentro da página de acordo com o tamanho desejado de uma div podemos encaixar o mesmo dentro da página.

Atenção: No caso da Div não caber na página, ou seja, sobrando percentual dentro da imagem, não existindo nenhum bloqueio sugerido na programação automáticamente a div continua ao longo da