Introdução ao HTML. Sumário

Tamanho: px

Começar a partir da página:

Download "Introdução ao HTML. Sumário"

Iago Neto Leveck
8 Há anos
Visualizações:

1 Introdução ao HTML Telemédia Grupo de Comunicações por Computador Sumário em HTML Texto Alternativo Alinhamento Margens Redimensionar 1

2 em HTML Para inserir uma imagem basta usar a etiqueta <img> da seguinte forma: <img src="localização da imagem"/>. As imagens podem ser dos seguintes formatos: XBM (BMP) GIF JPG PNG em HTML /> 2

3 Texto Alternativo O texto alternativo deve ser indicado por diversos motivos: Existem browsers que não são capazes de exibir imagens; Em ligações lentas, o utilizador pode não desejar visualizar as imagens para que os documentos sejam carregados mais rapidamente; Permitir melhor acessibilidade a utilizadores com deficiências visuais (cegos, amblíopes e daltónicos); Exibir o texto alternativo como tip text. Texto Alternativo O texto alternativo é obtido indicando o atributo alt= texto nas imagens. alt= Fotografia de um estudante /> 3

4 Alinhamento do Texto O texto pode ser disposto de várias formas em relação às : Texto alinhado com o topo da imagem; Texto alinhado com o meio da imagem; Texto alinhado com o fundo da imagem; Imagem do lado esquerdo da página (por omissão); Imagem do lado direito da página; Texto colocado antes da imagem irá ser apresentado à esquerda da imagem; Texto colocado depois da imagem irá aparecer à direita da imagem; Alinhamento de align= top />Estudante 4

5 Alinhamento de align= middle />Estudante Alinhamento de align= bottom />Estudante 5

6 Alinhamento de align= right />Estudante Alinhamento de Estudante<img src=" 6

7 Alinhamento de Estudante<br/> /> Alinhamento de /> <br/> Estudante 7

8 Margens das É possível definir margens nas imagens através dos atributos: vspace - margem vertical; hspace - margem horizontal; Alinhamento de hspace= 20 vspace= 20 align="middle"/> Texto 1<br/> Texto 2 8

9 Redimensionamento de As imagens devem ser redimensionadas com um programa de edição de imagem porém existe a possibilidade de controlar as dimensões das imagens quando apresentadas pelo browser. O redimensionamento é feito recorrendo aos atributos width e height. Redimensionamento de Se apenas um dos atributos é indicado as proporções das imagens são mantidas <title>redimensionamento de </title> <h2>redimensionamento de </h2> <img src=" height="200"/> Imagem com altura de 200 pixeis 9

10 Redimensionamento de Indicando os dois atributos as proporções podem ser alteradas <title>redimensionamento de </title> <h2>redimensionamento de </h2> <img src=" height="200" width= 200 /> Imagem com altura e largura de 200 pixeis Redimensionamento de As dimensões das imagens podem ser valores relativos às dimensões da página <title>redimensionamento de </title> <h2>redimensionamento de </h2> <img src=" width="50%"/> Imagem ocupando 50% da página 10

11 Redimensionamento de As imagens podem também ser usadas nos links <title>links com </title> <h2>exemplo de Links com </h2> <a href= > <img src=" width="50%"/> </a> Imagem ocupando 50% da página 11

Documentos relacionados

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se