• Olá Visitante, se gosta do forum e pretende contribuir com um donativo para auxiliar nos encargos financeiros inerentes ao alojamento desta plataforma, pode encontrar mais informações sobre os várias formas disponíveis para o fazer no seguinte tópico: leia mais... O seu contributo é importante! Obrigado.

HTML Básico - Inserindo Imagens na Página

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Objetivo:

O objetivo deste tutorial é ensinar a criar Links para downloadas de arquivos e a inserir imagens na página, bem como modificar sua altura, largura, inserir borda e redimensiona-la para o centro e a direita da página, tudo mostrado através das telas.



Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do de informática básica e Parte 1, Parte 2, Parte 3 , Parte 4, Parte 5, Parte 6, Parte 7 e Parte 8 do tutorial html básico.



Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.



Vamos começar a criar links para arquivos, este link é quae igual aos links remotos, a diferença é que neste link fazemos referencia a um tipo de arquivo. Estes links são fácil de criar atribuimos ao mesmos o caminho do arquivo através da URL, vamos criar a página abaixo, para depois criarmos um link para um determinado arquivo, para esta página que vamos colocar o nome de “linkrarquivos.html”:



<html>

<head><title>Links Arquivos</title>

<body>

<center><h1>Links Arquivos</h></center>



</body>

</html>



Após ter criado esta página vamos inserir o link, e no mesmo vamos inserir o caminho para um arquivo.



O link será o seguinte:



“Clique aqui para fazer download”



Nesta frase vamos atribuir o link que deve ficar assim:



<a href= “arquivo.zip”> Clique aqui para fazer o download.</a>



Irei criar o link exemplo para fazer o download de uma pasta , para isso criei uma pasta com o nome “exemplo” e dentro da mesma coloquei um arquivo com extensão exe. Compactei amesm utilizando winzip e salvei a dentro da pasta htdocs, o motivo de eu ter salvado dentro desta pasta é que eu irei abrir a página links arquivos.html através do servidor apache que tenho instalado em minha máquina, para que esse procedimento funcione corretamente. Para que você possa testa-la poderá incluir esta página num servidor web, por exemplo o site do yahoo, oferece acesso gratuito para você criar e hospedar suas páginas através do geocities.
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Acompanhe os procedimentos abaixo:

htmlbasico009_clip_image002.jpg


Tela 001 (Criando o Link)



Agora no momento que você clicar neste link que acabamos de cria, será aberta uma janela perguntando se você deseja abrir ou salvar o arquivo.

htmlbasico009_clip_image004.jpg


Tela 002



Agora irei ensinar a inserir uma imagem na mesma página, esta imagem deve estar dentro da página site, para isso utilizamos o utlizamos a seguinte etiqueta:



<img src=” aqui colocamos o caminho da imagem”>



<IMG SRC="Montanhas azuis.jpg”>

htmlbasico009_clip_image006.jpg


Tela 003



Podemos atribuir atributos a esta imagem, ou seja, podemos dimensionar altura e largura, inserir borda, para isso usamos as atributos width (Largura) e height (Altura) e Border, veja o procedimento abaixo:

htmlbasico009_clip_image008.jpg
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Tela 004

htmlbasico009_clip_image010.jpg


Tela 005



Também podemos fazer o alinhamento desta imagem, veja que a mesma já aparece com alinhamento a esquerda, você pode centraliza-la utilizando as etiquetas <center></center>, colocar a direita,usando as etiquetas <p align=””></p> veja o procedimento.



htmlbasico009_clip_image012.jpg


Tela 006

htmlbasico009_clip_image014.jpg


Tela 007 (Alinhado ao centro)

como criar links para downloads de arquivos e tambem cmo iserir, e modificar altura, largura e colocar borda na imagem , e coloca-la no modo centralizado e a direita da página, tudo de uma forma objetiva e mostrado através das telas para que você tenha uma melhor entendimento possível
 
Topo