Links, Textos e AncorasProfª Kelly E. Medeiros

Alinhamento de textos na Tela

CentralizandoCentralizando com a tag center:<center>Centralizando com a tag center.</center>Centralizando com align:<div align="center">Centralizando com align.</div>Centralizando com text-align:<div style='text-align:center;'>Centralizando com text-align.</div>

Alinhamento de textos na Tela

Texto alinhado à direitaAlinhado com align:<div align="right">Alinhado com align.</div>Alinhado com text-align:<div style='text-align:right;'>Alinhado com text-align.</div>

Alinhamento de textos na Tela

Texto alinhado à esquerdaAlinhado com align:<div align="left">Alinhado com align.</div>Alinhado com text-align:<div style='text-align:left;'>Alinhado com text-align.</div>

Alinhamento de textos na Tela

Texto justificadoJustificado com align. <div align="justify">Justificado com align.</div>Justificado com text-align<div style='text-align:justify;'>Justificado com text-align.</div>

URL• URL (Uniform Resource Locator). Uma (ou um) URL é um

endereço que aponta para um determinado recurso, seja uma imagem, um computador, um usuário, uma página de notícias, etc. Assim como Avenida João Freire, 123 – Apt.

• 1201 – Recife – PE pode nos apontar a localização de alguma informação dentro de um escopo físico, a URL é suficiente para nos orientar dentro da Internet por completo.

• Exemplo: joaoantonio@informatica.hotlink.com.br é uma URL que localiza uma caixa de correio eletrônico para onde podem ser enviadas mensagens. Já http://www.macromedia.com.br é uma URL que aponta para o website da Macromedia (empresa americana especializada em programas para a Web).

LINK’s• Para construir um link basta você utilizar a tag <a>• Ex:• <a href=“url da pagina”> Palavra ou imagem para representar

o link </a>

• <a href="http://www.google.com/">Aqui um link para o Google</a>

Âncoras

Quando você necessitar de navegar dentro da mesma página utilizamos as ancoras. Link da âncora<a href=“#texto”> 1º Texto </a>

Identificação da âncora<a nome=“texto”>

Formatos de ImagensOs navegadores mais usados aceitam várias tipos de imagens. Entretanto, muitos formatos de arquivos podem ter tamanhos grandes e sua inserção deixará o arquivo final enorme. Assim, geralmente os melhores formatos são o .jpg e o .gif que comprimem imagens em um tamanho relativamente pequeno.

Cada formato tem vantagens e desvantagens e a escolha do tipo utilizado deve sempre levar em conta o objetivo e a origem da imagem.

Formato de Imagem GIFGIF - O formato gif , do inglês "Graphics Interchange Format" foi criado pela empresa Compuserv. É um formato usado para todos os tipos de ilustrações, animadas ou não.

Sua leitura é rápida, pois muito pouco processamento é utilizado para que um arquivo GIF seja exibido. Em compensação, está limitado a 256 cores. A compressão desse formato consiste em codificar linhas de pontos que possuem várias cores repetidas em sequência.

É um formato de imagem que guarda as informações sem perda. Pode ser carregado em um editor gráfico, gravado em disco, recarregado e regravado, quantas vezes forem necessárias.

A base do formato gif é o algoritmo de compressão LZM (Lempzel-Ziv-Welch), que era de propriedade da Unisys, teve sua licença expirada em 20 de junho de 2003. Portanto, o formato GIF passou a ser uma tecnologia livre, desde então.

Formato de imagem JPGJPEG - A extensão JPEG, de "Joint Photographic Experts Group", utiliza um

forma de compressão que pode ser configurada em diferentes níveis, que vão de 10 a 100. No nível 100, a imagem obtida do arquivo JPG é idêntica ao original. Nos outros níveis, a imagem é ligeiramente prejudicada, embora ainda seja muito semelhante.

Esse formato é especialmente útil para armazenar fotografias, ou desenhos com muitos detalhes, pois as altas taxas de compressão tornam as imagens pequenas.

Entretanto, não se pode esquecer que quanto maior a qualidade da imagem maior será o tamanho do arquivo.

Uma grande imagem, no formato bmp, se for comprimida em JPEG ou TIFF, pode vir a ocupar pouco espaço, muitas vezes sem perda perceptível de qualidade e com muito menor tempo para começar a exibir a imagem. O tamanho reduzido de fotos em JPG tornou-as preferidas em sites.

Formato de imagem JPGAs imagens em JPG são, por natureza, de 24 bits e usam algoritmos

de compressão que reduzem significativamente o tamanho físico de um arquivo. Isso significa que a cor é a mais fiel possível, em relação ao original. Entretanto, o formato JPEG alcança taxas altas de compressão descartando partes da imagem que passariam despercebidas ao olho humano. Assim, cada vez que um arquivo JPEG é aberto em um editor gráfico, mais dados são perdidos. O ato de gravar repetidamente (mas muitas vezes mesmo!) um arquivo JPEG o deixará inaproveitável para uso.

Onde e Como salvar as imagens• Geralmente as páginas que você

cria são organizadas em pastas de trabalho.

• Dentro dessa pasta o ideal é criar outra pasta para que se possa guardar as imagens do site.

• O nome sugerido para essa pasta é: img

Onde e Como salvar as imagens• Após criada essa pasta devemos

colocar todas a imagens utilizadas nela.

• Pode ser criada outras pastas para imagens sem problemas.

Onde e Como salvar as imagens• Ao salvar a imagens deve ficar

atento ao seu formato para que seja inserida da forma correta na página HTML.

• Mas como saber o formato da imagem?

Onde e Como salvar as imagens• Se você for baixa-la da

internet basta que olhe o formato lá mesmo na hora de salvar.

Onde e Como salvar as imagens• Caso já tenha em seu

computador, basta clicar com o botão direito sobre a imagem, propriedades e ver o formato.

Inserindo imagens na página HTML

Tag utilizada para inserir imagens nas páginas HTML

<img src=” aqui colocamos o caminho da imagem”>Caminho da imagem<img src="img/html.jpg">

Redimensionando a imagem

Utiza-se o width para largura e height para altura da imagem

<img width=“300px” height=“300px” src=“img/html.jpg”>

Link em imagens• Podemos colocar um link em uma imagem também.• <a href=“center.html”><img width=“300px” height=“300px”

src=“img/html.jpg” border=“0”></a>• Quando colocar link lembre-se de colocar Border=“0” para

que não fique marcada a sua imagem.

Legenda na Imagen• Basta acrescenta o atributo titledentro do elemento img

• <img title=“D-Testando” width=“300px” height=“300px” src=“img/html.jpg” border=“0”>

Formulários

• Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário.

Formulário• Um formulário é uma área que pode conter elementos de

formulário.• Os elementos de formulário são elementos que permitem o

usuário entrar com a informação em um formulário através dos campos de texto, campos de área de texto, botões radiais, caixas de seleção, etc.

• Um formulário é definido pela tag <form>.

Ex: Formulario

<form>Aqui dentro vem os elementos de formulário.<input><input></form>

Entrada (Input)• A tag de formulário mais usada é a tag <input>. • O tipo de input é especificado com o atributo type (tipo). Os

tipos de input mais comumente usados são:

Campos de Texto

Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um formulário.<form> Primeiro nome: <input type="text" name="firstname"> <br> Último nome: <input type="text" name="lastname"> </form>

Botões Radiais

Botões Radiais são usados quando você quer que o usuário selecione uma entre uma quantidade limitada de escolhas.<form><input type="radio" name="sex" value="male"> Masculino<br><input type="radio" name="sex" value="female"> Feminino</form>

Caixas de Seleção

As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou mais opções de uma quantidade limitada de escolhas.<form><input type="checkbox" name="bike">Eu tenho uma bicicleta<br><input type="checkbox" name="car">Eu tenho um carro</form>

O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)

• Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.

<form name="input" action="html_form_action.php"method=“GET">Nome do Usuário: <input type="text" name="user"><input type="submit" value="Enviar"></form>