Inserindo imagens
Como inserir uma imagem em um site
Já inserimos uma imagem como fundo no site, todavia para colocar uma imagem dentro do mesmo, o procedimento é um pouco diferente. Como você suspeita, as imagens são “visíveis”, então vão definidas dentro do body (ou corpo). Em que lugar? Isso já depende de onde queremos inserir.
Onde inserir a imagem
Quando criamos uma linha de código Html em qualquer parte dentro do body, ela aparecerá ali, em qualquer lugar. No princípio um dos problemas que você vai ter é não saber em que parte do código Html inserir a linha do código correspondente a um elemento para conseguir que apareça onde deseja, verdade?
Pois bem , relaxado e com calma, uma imagem pode ser inserida dentro de um parágrafo, isto é, entre palavras, como este exemplo:
Código Html para inserir uma imagem
Para inserir uma imagem, escreveremos o seguinte código:
<img src="rumo/imagem.gif" width="XXpx" height="YYpx" alt="descrição da imagem">
Como vemos, este é um dos poucos casos em que não existe etiqueta de fechamento, isto é, não escreveremos </img>. Lembre-se, ok? As imagens nunca levam etiqueta de fechamento. Vamos ver o que esta dentro desse código.
Para começar é colocado o rumo, que normalmente é um caminho relativo (quando a imagem pertencer ou estar guardada no seu espaço web) mas pode ser também um caminho absoluto (sempre que a imagem seja obtida de outro site diferente ao seu, embora isso não seja recomendado). As direções vão sempre entre aspas, ”... ”, não esqueça..
Depois colocamos sua largura e altura que é expressa em píxels com a sigla "px". Não deixe jamais espaço entre a quantidade e as unidades, nunca escreva assim: "100 px", a maneira válida é essa: “100px". Como veremos, estas quantidades normalmente o Html-kit coloca automaticamente e se você mudar o mais seguro é que a imagem fique desvirtuada e perca a definição. Quando precisar mudar o tamanho, o melhor é fazer com um programa gráfico e logo voltar a inserir no site, beleza?
No caso de não colocar width (largura) nem height (altura), e o arquivo da página falhar, o resto dos elementos como parágrafos, etc… ocupariam o lugar dessa imagem. Seria como se não existisse. Ao contrário quando definimos largura e altura, se acontecer de falhar na hora de carregar a imagem e esta não mostrar, o navegador deixará um quadrado ou retângulo em branco com as medidas que foram definidas, respeitando a estrutura do site sem alterar nada. Isso é muito bom, não é?
Por último vamos ver o alt= “........". Para ter um código válido é necessário colocar esse alt e ainda escrever entre aspas uma breve descrição da imagem. Ela apareceria no espaço da imagem, no caso que a própria imagem não se visualizasse por algum problema.
Vamos colocar uma imagem no nosso exemplo
Em primeiro lugar necessitaremos de uma imagem guardada na pasta “objetos”. Copiar esta mesma imagem que deixo aqui abaixo, salvar na sua pasta “objetos” e seguimos (lembre que para copiar somente terá que por o ponteiro do mouse em cima dela, apertar o botão direito do mouse e escolher “Salvar imagem como…” ou “Salvar como…”, dependendo da versão usada). Põe o nome de sorriso.gif e seguimos em frente.
Quando já tiver o arquivo guardado em “objetos”, abra o Html-kit na página index.html para continuar. Vamos colocar a imagem entre o parágrafo onde diz: “Bem–vindos/as. Em pouco tempo a página estará pronta!!!” e o que diz. “Estamos aprendendo a criar sites com o ccss”. Como vamos inserir entre os dois parágrafos, entramos na vista “Editor” e colocamos o cursor depois do primeiro </p> (no final da linha de código do primeiro parágrafo). A continuação clicar “enter” para criar uma nova linha e inserir: (como já comentei anteriormente, colocar entre <p> e </p>)
<p><img src="objetos/sorriso.gif" width="60px" height="60px" alt="Bem-vindos/as. Em pouco tempo a página estará pronta!!!"></p>
Quer aprender a fazer diretamente desde as opções do Html-kit?
Situar o cursor no final do primeiro parágrafo como antes. Pulsar “enter” para criar uma nova linha e em seguida vá até a barra de ferramentas e escolha Etiquetas > Imagen > Insertar Imagen...
Aparece então esta janela:
Pulsar sobre Add... e na janela que vai abrir (igual na imagem acima), selecionar a pasta "objetos". Clicar em Aceptar e aparecerá a janela abaixo:
Selecionar o arquivo "sorriso.gif" do quadro da direita, verá como aparece uma série de informação (que estão contornados em vermelho na foto acima). Nos diz o caminho relativo, o que ocupa, a largura, a altura…Curioso, verdade???
Falta colocar a descrição. Para isso clicar onde põe "alt" (acima à esquerda, junto ao caminho relativo) e escrever a descrição que disse antes: “Bem-vindos/as. Em pouco tempo a página estará pronta!!!” Como você pode comprovar existem muito mais opções para a imagem nessa janela mas por enquanto deixamos assim para não saturar e não por muita atenção em coisas menos importantes, vamos com calma e direto ao que interessa, jóia?
Depois de escrever a descrição e apertar Ok, vemos como aparece a linha de código em nosso index.html embora falta colocar as unidades e como você já sabe, escrever "px", depois de cada unidade de largura e altura. Coloque você mesmo a mão, já sabe, sem deixar espaços entre o número e o px !!! e seguimos.
Até a próxima lição... Aquele abraço...
Relax
BILHETE DEIXADO PELO FILHO…
O pai entra no quarto do filho e vê um bilhete em cima da cama. Ele lê o bilhete, temendo o pior:
“‘Caro Papai, é com grande pesar que lhe informo que eu estou fugindo com meu novo namorado, Juan, um Argentino muito lindo que conheci. Estou apaixonado por ele. Ele é muito gato, com todos aqueles ‘piercings’, tatuagens e aquela super moto BMW que tem. Mas não é só por isso, descobri que não gosto de jeito nenhum de mulheres e, como sei que o senhor não vai consentir com isso,decidimos fugir e ser muito felizes no seu ‘trailer’. Ele quer adotar filhos comigo, e isso foi tudo que eu sempre quis para mim. Aprendi com ele que maconha é ótima, uma coisa natural, que não faz mal a ninguém, e ele garante que no nosso pequeno lar não vai faltar marijuana. Juan acha que eu, nossos filhos adotivos e os seus colegas ‘gays’ vamos viver em perfeita harmonia. Não se preocupe papai, eu já sei me cuidar, apesar dos meus 15 anos já tive várias experiências com outros caras e tenho certeza que Juan é o homem da minha vida.
Um dia eu volto, para que o senhor e a mamãe conheçam os nossos filhos. Um grande abraço e até algum dia.
De seu filho, com amor.”
O pai, quase desmaiando, continua lendo:
PS: Pai, não se assuste, é tudo mentira!!!
Estou na casa da Priscila, nossa vizinha gostosa. Só queria mostrar pro senhor que existem coisas muito piores do que as notas vermelhas do meu boletim, que está na primeira gaveta.
Burro, mas macho!!!
Menu
