Aplicação para Web I. Manipulando Imagens e Links

Tamanho: px

Começar a partir da página:

Download "Aplicação para Web I. Manipulando Imagens e Links"

Maria das Graças Franca Bugalho
6 Há anos
Visualizações:

1 Aplicação para Web I Manipulando Imagens e Links

2 Antes de começar O HTML também é uma linguagem de programação, então deve ser organizada de forma identada também. Estamos aprendendo agora a linguagem então fiquem atentos para inserir comentário nas páginas para agilizar o estudo em casa

3 Antes de começar A declaração DOCTYPE define o tipo de documento que vai ser HTML. <!DOCTYPE html> Como estamos trabalhando com HTML sempre usem essa TAG no início do documento. Além dessa TAG vamos adicionar a linguagem do documento na tag html: <html lang= pt-br >

4 Atributo de Estilo do HTML Definir o estilo de um elemento HTML, pode ser feito com o atributo de estilo. O atributo de estilo HTML tem a seguinte sintaxe: style = "propriedade: valor; Cabecalho Centralizado: <h1 style="text-align:center;">centered heading</h1>

5 Atributo de Estilo HTML Background Color ( Cor do Fundo) <body style= background-color:lightgrey; > Text Color (Cor do Texto) <h1 style="color:blue;">isto é um cabeçalho.</h1> <p style="color:red;">isto é um paragráfo.</p> Fonts <h1 style="font-family:verdana;"> Isto é um cabeçalho.</h1> <p style="font-family:courier;"> Isto é um paragráfo.</p>

6 Trabalhando com Imagens Para inserir uma imagem em uma página trabalharemos com a TAG <img src> Sintaxe: <img src= imagem width= n% height= n% align= posição alt= Texto > src :: utilizado para definir o caminho da imagem. width :: define a largura da imagem height :: define a altura da imagem align :: define o alinhamento da imagem (left, right, center) alt :: texto que irá aparecer ao passar o mouse sobre a imagem

7 Outros parâmetros utilizados em <img...> border :: especifica a largura da borda da imagem valor em pixel EX: <img src= foto.jpg border= 2 > vspace :: Define o espaço em branco que deve ser deixado acima e abaixo da imagem valor em pixel EX: <img src= foto.jpg border= 2 vspace= 2 > hspace :: Especifica os espaços deixados nas laterais da imagem. Valor em pixel EX: <img src= foto.jpg border= 2 vspace= 2 hspace= 2 >

8 Nosso site com imagens <!DOCTYPE html> <html lang= pt-br > <head> <title> Meu site com imagem</title> </head> <body> <p style="text-size:4; font-family:verdana; color:red;"> Bem vindos a minha página inicial!!! </p> <hr width="10%" align="center" size="50" color="gray"> <br/> <br/> <img src="img/foto.jpg" alt="minha foto" border="2"> <br/> <br/> <hr width="10%" align="center" size= "50" color="gray"> </body> </html>

9 Dicas para trabalhar com Imagens Alguns browsers apresentam problemas quando utilizamos a diretiva align= center em uma imagem. A mesma não fica centralizada. Para evitar que isso acontece utilize para centralizar a tag <center>... </center> Alguns browsers também apresentam problemas com a diretiva alt para descrever uma imagem

10 Links Utilizamos links para realizar a interligação de textos e deixar uma página mais agradável ao se navegar. Sintaxe: <a href= arquivo.extensão > texto do link ou imagem </a> a :: abertura da tag link href= arquivo.extensão :: para onde será direcionado a próxima página ao clicar no link </a> :: finaliza o escopo do link

11 Links para outros diretórios Para isso é necessário indicar o caminho completo do arquivo.esse processo é diferente do utilizado pelo windows ou linux, veja: A barra para detalhar o caminho é a barra ( / ) O ponto inicial de busca é o atual Para baixar um nível de pasta é preciso usar ponto ponto barra (../ ) Estando em Alunos e querendo criar um link para a página cadastro.htm que está dentro da pasta matrícula é preciso: <a href=../matricula/cadastro.html > TEXTO </a> Cadeia de diretórios: meusite html Alunos Matriculas Não use acentuação cadastro.html

12 Links para arquivos e Downloads Links também são utilizados para disponibilizar páginas de downloads. Para isso basta colocar na diretriz href o caminho completo para o arquivo a ser disponibilizado. Sintaxe: <a href= arquivos/aula02.pdf > Aula 02 </a> Lembre-se!!! a parta arquivo está dentro da pasta que contém o meu arquivo html

13 Utilizando link para configurar um <!DOCTYPE html> <html lang="pt-br"> <head> <title> Configurando um </title> </head> <body> <h1 align="center"> Meu </h1> <hr width="40%" size="2" align="center" color="blue"> <br/> <br/> <a <p style="text-align:center; text-size:4; font-family:verdana; color:green;"> </p> </a> <br/> <br/> <hr width="40%" size="2" align="center" color="blue"> </body>

14 Criando pontos de desvios a tag <a> tem alem do href uma outra diretriz chamada name. Essa diretriz é utilizada para criar pontos de saída e chegada no texto de uma página. Sintaxe: <a href= #AQUI > Vá para o ponto AQUI </a> <a name= AQUI > Este é o ponto AQUI </a>

15 Utilizando names para linkar partes <!DOCTYPE html> <html lang="en"> <head> <title> Utilizando names </title> </head> <body> <h1 align="center"> UTILIZANDO NAME </h1> <hr width="40%" size="2" align="center" color="blue"> <br/> <br/> <p style="text-align:center; text-size:4; font-family:verdana; text-color:green;"> Criei um ponto de desvio bem <a href="#aqui"> AQUI </a> </p> <br/><br/> <hr width="40%" size="2" align="center" color="blue"> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <p style="text-align:center; text-size:4; font-family:verdana; text-color:green;"> O ponto de desvio criado chega <a name="aqui"> AQUI </a> </p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html>

16 Exercício Vamos criar agora nosso site pessoal Como página inicial é importante agradecer a visita com um seja bem vindo!!! Também é importante ter na página inicial um mini currículo para apresentar suas vantagens ao mercado de trabalho. Coloque como última coisa em sua 1ª página um contato por . Vamos criar agora o conceito de menu que conterá o Home, a página de downloads e a página de trabalhos.

17 Dúvidas?

Documentos relacionados

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.) Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.) Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag (que não tem tag de fecho). A indicação do local