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 2
Imagem 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.
<html>
<head>
<title>Pratica de Recursos HTML</title>
</head>
<body>
</body>
</html>
<head>
<title>Pratica de Recursos HTML</title>
</head>
<body>
</body>
</html>
Código 1 - HTML inicial
No código 1 adicionamos um HTML básico, onde somente o título da janela foi definido. Todo HTML deve ter o elemento raiz <html>, 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 inicial
Adicione o código 2 dentro do elemento body:
<div>
Notícia
Esta é uma descricão básica da notícia.
Leia aqui a notícia na íntegra
</div>
No 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 5
Imagem 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:
<div>
<h1>Notícia</h1>
<i>Esta é uma descricão básica da notícia.<i><br />
<a href="http://terramagazine.terra.com.br/interna/0,,OI3030855-EI6578,00.html">Esta é para ler a notícia na íntegra</a><br
/>
</div>
Código 3 - Fazendo as alterações de formatação
Usamos então o elemento <h1> para colocar a notícula como título. Para o efeito de itálico no texto, usamos o elemento <i>. Para criar o link usamos o elemento <a> 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 6
Imagem 6 - Visualizando o texto formatado
Continuando 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:
<html>
<head>
<title>Pratica de Recursos HTML</title>
</head>
<body>
<div>
<h1>A machadinha
de Daniel Dantas</h1>
<div
style="float:left">
<img src="brasil.jpg" alt="Brasil de olho" />
</div>
<div
style="float:right; background-color:#efffff">
<i>...O banqueiro baiano já insinuou que se contar o que sabe derruba de Collor
pra 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....<i><br
/>
<a
href="http://terramagazine.terra.com.br/interna/0,,OI3030855-EI6578,00.html">Leia
a notícia completa</a>
</div><br />
</div>
</body>
</html>
Código 5 - HTML com imagem e formatação
Foram 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 <div>, 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 <img>, 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 9
Imagem 9 - Resultado final
Referências:
http://www.w3.org/MarkUp/
http://terramagazine.terra.com.br/interna/0,,OI3030855-EI6578,00.html
http://movimentoeticaja.blogspot.com/
