|
|
|
|
 |
 |
 |
 |
|
 |
 |
|||
|
 Curso HTML Módulo 01 - Módulo 02 - Módulo 03 - Módulo 04 - Módulo 05
MÓDULO 03
Links, imagens e background Estamos de volta... Bem na aula passada encerramos fazendo uma revisão do que foi aprendido, certo? Agora estudaremos três comandos principais para ilustração de páginas. O primeiro é a composição de link; o segundo, a colocação de imagens em suas páginas; e, por último, background ou texturas. LINKS Os links permitem que o navegante passa de uma páginas a outra em seu site. Para que isso ocorra é necessário um fator importante: ter o endereço para o qual vc quer que ele se desloque. Como? Bem ao se criar um link em uma página qualquer é necessário que a página destino esteja pronta. Ninguém vai a algum lugar que seja um lugar nenhum. Em resumo, ao se criar os links em uma página todos os arquivos que se referem a estes links devem existir necessariamente. O comando para a criação de links é o seguinte: <A HREF="nomedoarquivo.html">Nome da Página ou Assunto</A> um detalhe importante: o nome do arquivo deve ser lincado de acordo com o nome salvo, pois NomeDoArquivo.html é diferente de nomedoarquivo.html e diferente do NOMEDOARQUIVO.html. OK. Para se criar links com destinos a outros sites, o endereço completo deve ser descrito ao navegador: <A HREF="http://www.milpaginas.itgo.com" >Mil Páginas</A>; Se vc quer colocar o seu cliente em uma página específica de um site sem passar por menus desnecessários, vc pode indicá-lo diretamente: <A HREF="http://www.milpaginas.itgo.com/tutorial.html">Tutoriais HTML</A> Note: o endereço do destino vem sempre entre "aspas". Exemplo: <HTML> <HEAD> <TITLE>Bem-vindo ao mundo do web designer</TITLE> </HEAD> <BODY BGCOLOR="pink" TEXT="red" LINK="black" VLINK="white"> Aqui vc vai realizar toda a sua imaginação e seu talento em diagramar páginas para a internet, com a fonte padrão. <P> <FONT size=2 color=lime face=arial, verdana, sans-serif>Aqui está a sua nova Fonte</FONT></P> Até agora <B> vc</B> aprendeu:<BR><OL> <LI> Arquivo HTML = nome.html e index.html para a 1<SUP>a</SUP> página<LI> A compor o corpo de um texto<LI> A trabalhar com diversas <U>fontes</U><LI> A alinhar um texto<LI> A usar marcadores de textos</OL> Saiba mais sobre a programação HTML nos tutoriais disponíveis no site do <A HREF="http://www.mipaginas.itgo.com/tutorial.html">Mil Páginas</A>. </BODY> </HTML> Se por acaso vc tiver um texto que esteja divido em capítulos ou em tópicos e quer que seu cliente navegue diretamente aos itens de interesse dele, vc pode criar um "alvo". Vejamos... na página destino vc cria a marca para o direcionamento, isto é, o alvo: <A NAME="codigodotopico">Nome do Tópico</A>; na página em que o cliente deve clicar para seguir vc colocará <A HREF="nomedoarquivo.html#codigodotopico">Nome do Tópico</A>; evite sempre usar qualquer tipo de acentuação ou sinal gráfico incomum aos padrões ocidentais de representação gráfica, como acentuar "códigodotópico".
IMAGENS A imagem é um dos recursos mais eficiente para dar graça e beleza a uma página. Usá-la com sabedoria é o segredo para se ter uma bela apresentação em seu site. Em linguagem HTML, somente dois tipos de extensão de imagens são lidos pelos browser, são elas: *.gif e *.jpg; extensões como BMP, WMF, TIFF, PCX devem necessariamente serem passadas para arquivos do tipo gif e jpg (jpeg). A inserção de imagens ocorre com o seguinte <TAG>: <IMG SRC="nomedaimagem.gif"> ou <IMG SRC="nomedaimagem.jpg"> cabe ressaltar novamente que nomedaimagem é difrente de NomeDaImagem, por isso o nome do arquivo deve ser escrito exatemente como ela foi salva. Nota: as imagens devem estar no mesmo diretório que o arquivo que a contém, caso esteja em um diretório abaixo, vc deve determiná-lo: Diretório principal: arquivo.html Diretório secundário: imagem que contém imagens/figuras <IMG SRC="/imagem/nomedaimagem.gif"> Contudo, convém que de início se mantenha todas as imagens no mesmo diretório que os arquivos em HTML. OK. Os atributos de imagens são: Width=comprimento, medido em pixel Height=altura, medido em pixel Border=largura da borda Alt=descrição da imagem Vamos supor que vc tenha uma imagem de 900 pixel de comprimento por 600 pixel de altura, ao ser ilustrada esta imagem ultrapassará a tela do micro, a menos que ele seja de 18", para acertar um tamanho que possa ser visualizado sem que o cliente fique clicando na barra de rolagem os atributos width e height são utlizados desse modo: <IMG SRC="nomedaimagem.gif" width=150 height=100 border=0> Border igual a zero representa sem borda, contudo, caso vc queria borda é só alterar o zero para 1, 2, ou 3. O atributo tag server apenas para ou dar nome a imagem ou descrevê-la ou, ainda, para motivar um comando, como, "clique aqui". Exemplo: <IMG SRC="nomedoarquivo.gif" width=150 height=100 border=0 alt="aqui você vê a sua primeira imagem"> Reunindo o que vc estudou de links e imagens, vamos agora criar um link com imagem: <A HREF="endereço de um site ou arquivo HTML"><IMG SRC="nomedaimagem" width="comprimento" height="altura" border="borda" alt="clique aqui"></A> BACKGROUND O background ou textura é outro recurso que se usado com prudência pode deixar a sua página com um ótimo visual. Ele substitue o fundo que vc usou, isto é, a cor que vc usou como atributo do <BODY>, lembra-se? Não. Então vejamos: <BODY bgcolor="red">, lembrou? OK. Caso vc queira colocar uma textura em suas páginas o comando para isto é: <BODY background="nomedatextura.gif"> Uma propriedade do background é poder fixá-lo como fundo, isto é, ele não rola com a página, exemplo: bgproperties="fixed"; compondo o comando fica: <BODY background="nomedatextura" bgproperties="fixed">. O site do Mil Páginas possui uma página só com texturas escolha a sua e use a sua imaginação – http://www.milpaginas.hpg.com.br/back.html . Porfirio Amarilla - webdesigner
|
|||
|
|||||||||
- HTML
