Links, Textos e Ancoras Profª Kelly E. Medeiros.

Apresentação em tema: "Links, Textos e Ancoras Profª Kelly E. Medeiros."— Transcrição da apresentação:

1 Links, Textos e Ancoras Profª Kelly E. Medeiros

2 Alinhamento de textos na Tela
Centralizando Centralizando 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>

3 Alinhamento de textos na Tela
Texto alinhado à direita Alinhado com align: <div align="right">Alinhado com align.</div> Alinhado com text-align: <div style='text-align:right;'>Alinhado com text-align.</div>

4 Alinhamento de textos na Tela
Texto alinhado à esquerda Alinhado com align: <div align="left">Alinhado com align.</div> Alinhado com text-align: <div style='text-align:left;'>Alinhado com text-align.</div>

5 Alinhamento de textos na Tela
Texto justificado Justificado com align. <div align="justify">Justificado com align.</div> Justificado com text-align <div style='text-align:justify;'>Justificado com text-align.</div>

6 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. uma URL que localiza uma caixa de correio eletrônico para onde podem ser enviadas mensagens. Já uma URL que aponta para o website da Macromedia (empresa americana especializada em programas para a Web).

7 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=" um link para o Google</a>

8 Â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”>

9 Formatos de Imagens Os 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.

10 Formato de Imagem GIF GIF - 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 Portanto, o formato GIF passou a ser uma tecnologia livre, desde então.

11 Formato de imagem JPG JPEG - 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.

12 Formato de imagem JPG As 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.

13 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

14 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.

15 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?

16 Onde e Como salvar as imagens
Se você for baixa-la da internet basta que olhe o formato lá mesmo na hora de salvar.

17 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.

18 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">

19 Redimensionando a imagem
Utiza-se o width para largura e height para altura da imagem <img width=“300px” height=“300px” src=“img/html.jpg”>

20 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.

21 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”>

22 Formulários

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

24 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>.

25 Ex: Formulario <form> Aqui dentro vem os elementos de formulário. <input> </form>

26 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:

27 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>

28 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>

29 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>

30 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>