Praticando alguns recursos do HTML
Autor: Mateus Queiroz Correia | Publicado: 2008-07-29T21:12:00-03:00

Neste post já vimos como criar um HTML básico utilizando o VWD. Vamos agora adicionar outra página ao projeto já existente CriandoNovoSite. Para isso, antes temos que abrir o VWD, pode ser que seja listado o projeto CriandoNovoSite nos projetos recentes(Recent Projects), como na Imagem 1, se assim for, clique no projeto para abri-lo.Imagem 1 - Projetos recentes no VWDCaso o projeto não esteja nos recentes, será possível abrir o projeto normalmente através do menu File / Open Web Site, como na Imagem 2Imagem 2 - Abrindo o site WebClique nesta opção, selecione o diretório do site WEB, Imagem 3, e clique em Open.Imagem 3 - Selecionando o local do site WebAgora que temos o projeto aberto, crie um novo arquivo chamado PraticaRecursos.htm e adicione o HTML do código 1 neste.&lt;html&gt;&lt;head&gt;&lt;title&gt;Pratica de Recursos HTML&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;Código 1 - HTML inicialNo código 1 adicionamos um HTML básico, onde somente o título da janela foi definido. Todo HTML deve ter o elemento raiz &lt;html&gt;, este por ser raiz, deve ser o primeiro elemento aberto e último elemento fechado.Para um HTML bem escrito, lembre-se sempre de colocar os elementos minúsculos e serem fechados. Neste HTML ainda podemos ver o elemento body, mas nada foi adicionado nele ainda. Já o título do documento foi definido para "Pratica de Recursos HTML". Com o arquivo salvo, ao abrir a página em um navegador veremos uma tela em branco com o título definido, conforme imagem 4:Imagem 4 - HTML inicialAdicione o código 2 dentro do elemento body:&lt;div&gt;NotíciaEsta é uma descricão básica da notícia.Leia aqui a notícia na íntegra&lt;/div&gt;Código 2 - Conteúdo adicionado ao bodyNo código 2 acabamos de adicionar um conteúdo ao elemento body, o conteúdo que está dentro do elemento body é que poderá estar visíveis para o usuário. Salve o arquivo e visualize as modificações no navegador, o resultado será como na Imagem 5Imagem 5 - Visualizando conteúdo adicionado ao bodyRepare que apesar de ter sido adicionado com quebra de linha os textos, a visualização no navegdor não mostrou estas quebras de linha, isto porque como já vimos no HTML a quebra de linha deve ser feita com o elemento .Vamos evoluir este documento e colocar o texto Notícia como título, a descrição básica da notícia em itálico e o texto Leia aqui a notícia na íntegra como hiperlink. Para isso modifique o texto adicionado no código 2 para ficar como este no código 3:&lt;div&gt;&lt;h1&gt;Notícia&lt;/h1&gt;&lt;i&gt;Esta é uma descricão básica da notícia.&lt;i&gt;&lt;br /&gt;&lt;a href="http://terramagazine.terra.com.br/interna/0,,OI3030855-EI6578,00.html"&gt;Esta é para ler a notícia na íntegra&lt;/a&gt;&lt;br/&gt;&lt;/div&gt;Código 3 - Fazendo as alterações de formataçãoUsamos então o elemento &lt;h1&gt; para colocar a notícula como título. Para o efeito de itálico no texto, usamos o elemento &lt;i&gt;. Para criar o link usamos o elemento  &lt;a&gt; e definimos seu atributo href com o valor de um URL para outro documento HTML, que está hospedado em outro site WEB. Este é o conceito de hiperlink do HTML, que permite que todos os documento da WEB se relacionem. Feito as modificações, salve e visualize o resultado, deverá ser como a Imagem 6Imagem 6 - Visualizando o texto formatadoContinuando a alteração de nosso modelo, vamos adicionar uma imagem, definir cores e melhorar a formatação e texto do nosso documento. Para adicionar a imagem iremos salvar a Imagem 7 abaixo no mesmo diretório da página, faça isso clicando na imagem com o botão direito e mandando salvar como, salve com o nome brasil.jpg no mesmo diretório da página PraticaRecursos.htm.Imagem 7O solution explorer no VWD deverá ficar então como na Imagem 8:Imagem 8 - Solution Explorer após salvar imagemAgora faça a modificação no HTML para ficar como no código 5:&lt;html&gt;&lt;head&gt;   &lt;title&gt;Pratica de Recursos HTML&lt;/title&gt;&lt;/head&gt;&lt;body&gt;   &lt;div&gt;       &lt;h1&gt;A machadinhade Daniel Dantas&lt;/h1&gt;       &lt;divstyle="float:left"&gt;     &lt;img src="brasil.jpg" alt="Brasil de olho" /&gt;       &lt;/div&gt;       &lt;divstyle="float:right; background-color:#efffff"&gt;     &lt;i&gt;...O banqueiro baiano já insinuou que se contar o que sabe derruba de Collorpra cá sem disparar um único tiro. Essa sua tranqüilidade me faz lembrar um xaráseu chamado Daniel Boone, que nos anos 70 fazia o maior sucesso na TV....&lt;i&gt;&lt;br/&gt;     &lt;ahref="http://terramagazine.terra.com.br/interna/0,,OI3030855-EI6578,00.html"&gt;Leiaa notícia completa&lt;/a&gt;       &lt;/div&gt;&lt;br /&gt;   &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;Código 5 - HTML com imagem e formataçãoForam feitas diversas alterações no HTML, as alterações de texto são mais fáceis de perceber, somente foram feitas para nosso exemplo parecer uma chamada para uma notícia. Para a imagem ficar a esquerda e o texto a direita, adicionamos dois elementos &lt;div&gt;, e definimos o seu atributo style com o estilo float:left(para definir o que fica a esquerda) e o estilo float:right(para definir o que fica a direita).Dentro do div que fica a esquerda, adicionamos a imagem que acabamos de salvar. Para adicionar esta imagem o elemento utilizado é o &lt;img&gt;, ainda é necessário definir o atributo src com a url da imagem a ser mostrada, e o atributo alt que é o texto alternativo que também será mostrado como dica.No div da direita definimos também outro estilo, que foi a cor de fundo através do estilo background-color, e seu valor recebeu um valor hexadecimal RGB, neste exemplo o efefef.Veja o resultado na imagem 9Imagem 9 - Resultado finalReferências:http://www.w3.org/MarkUp/http://terramagazine.terra.com.br/interna/0,,OI3030855-EI6578,00.htmlhttp://movimentoeticaja.blogspot.com/