Este é o primeiro nível Este é o segundo nível Este é o terceiro nível Este é o quarto nível Este é o quinto nível Este é o sexto nível

Transcrição

1 1. Conhecendo as Tags HTML Agora que já vimos como é um arquivo HTML básico, podemos começar a ver as tags que irão construir as páginas. Elas ficam após o comando e neste local já se pode começar a escrever o que quiser Tags de título <h>...</h> ("Headings"/Títulos) Com esta tag você pode apenas definir o tamanho das letras, mas não a fonte. Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6. Digite no bloco de notas, salve como EXERC2.HTML e abra no navegador <title> Meu segundo documento HTML </title> <h1> Este é o primeiro nível </h1> <h2> Este é o segundo nível </h2> <h3> Este é o terceiro nível </h3> <h4> Este é o quarto nível </h4> <h5> Este é o quinto nível </h5> <h6> Este é o sexto nível </h6> Veja abaixo o efeito que deverá aparecer em seu navegador: Este é o primeiro nível Este é o segundo nível Este é o terceiro nível Este é o quarto nível Este é o quinto nível Este é o sexto nível 1.2. Tag <p> Em HTML são necessários comandos para definir parágrafos. Não basta simplesmente pressionar "ENTER" para que a linha vá para baixo, como nos editores de texto. É necessário colocar uma tag ( <p> ) para fazer um novo parágrafo. Digite no bloco de notas, salve como EXERC3.HTML e abra no navegador Texto do primeiro parágrafo <p> Texto do segundo parágrafo </p> O resultado será: Texto do primeiro parágrafo Texto do segundo parágrafo Obs.: para criar um parágrafo em branco (criar espaço entre um bloco e texto e outro) deve-se usar: <p> </p>. Também utilizado para representar um espaço em branco que não pode ser quebrado em duas linhas. Exemplo: 5 cm ficaria 5 cm.

2 1.3. Tag <br /> (tag órfã/única: a tag de abertura também é de fechamento, note / ) Quando desejamos simplesmente mudar de linha, ao invés de criar um novo parágrafo, usamos a tag <br />. Digite no bloco de notas, salve como EXERC4.HTML e abra no navegador Texto do parágrafo 1 <br /> linha 1 <p> Texto do parágrafo 2 </p> <br /> linha 2 O resultado será: Texto do parágrafo 1 linha 1 Texto do parágrafo 2 linha Tag <img src= imagem que vai aparecer /> Esta tag permite a inclusão de imagens na página. Os formatos ideais para home pages são GIF e JPG. Em "imagem que vai aparecer" colocamos o nome da imagem.gif ou.jpg ou o URL completo do local onde ela está gravada. Atributo: Alt Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu\carregou ou caso não seja carregada (Internet Explorer). Localize um arquivo.gif em seu computador e copie-o para a pasta onde está salvando os arquivos HTML de exercícios. Digite no bloco de notas, salve como EXERC5.HTML e abra no navegador <img src=nomearquivo.gif alt="texto Alternativo" /> Dicas e Formato de Arquivos de imagem Tamanho em Kb: Evite colocar imagens maiores do que 60Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lento será o carregamento da página e muitos visitantes poderão desistir de esperar. Uma grande quantidade de imagens na mesma página também não agrada a maioria dos visitantes. O Formato GIF: O formato dominante na Internet é GIF, por ser relativamente pequeno quando comparado com o BMP. Além disso, GIF pode ser transparente, não transparente ou animado. Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks.

3 Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIF s previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento. O Formato JPG (jpeg): Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG. O Formato BMP: Apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint (do Windows), o Paint Shop Pro, Photoshop ou FireWorks.

4 1.5. Criando links Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento (ou qualquer outro ponto) na própria página ou em outra página. Os links podem ser internos (para documentos no mesmo servidor) ou externos para qualquer lugar na Web Tag <a href="nome-do-lugar-a-ser-levado"> descrição </a> Onde: "Nome-do-lugar-a-ser-levado" Coloca-se o nome do arquivo html para o qual se deseja criar o link, por exemplo, dados.htm ou um URL como "Descrição" É o texto que vai aparecer sublinhado na home page, indicando que se trata de um link que pode ser clicado. Exemplo1, se a descrição fosse "Clique aqui para visitar o UOL", a tag deveria conter o seguinte código: Digite no bloco de notas, salve como EXERC6.HTML e abra no navegador <a href=" aqui para visitar o UOL </a> O resultado será: Desafio! Digite no bloco de notas, salve como EXERC7.HTML e abra no navegador Crie uma página contendo um link para uma das páginas HTML que foram criadas nos exercícios anteriores (ou crie uma página com qualquer conteúdo). Obs.: a descrição deverá ser Clique aqui para ver a página Dica: para criar um link para outra página dentro da mesma home page, não é necessário colocar toda a URL ou caminho. Basta o nome do arquivo HTML (os dois arquivos html devem estar na mesma pasta).

5 Como fazer um link abrir em uma segunda janela (sem perder o conteúdo da primeira janela). É possível que colocar um link que abra em outra janela para que o que o visitante não saia do site. Basta incluir um atributo "target" (alvo), assim: Digite no bloco de notas, salve como EXERC8.HTML e abra no navegador <a href=" target="_blank">clique aqui para visitar o UOL </a> Como fazer um link para um ponto na mesma página (Âncora). É possível fazer com que clicando em um link você vá diretamente para uma determinada parte da mesma página ou até mesmo de outra página. Este recurso é chamado de Âncora. Usamos âncoras quando desejamos que um link vá direto para um texto que está no meio de uma página sem o visitante ter que rolar a página. Ao saltar para determinados pontos de uma página, facilitamos a navegação. Para o funcionamento de uma âncora deve-se estabelecer dois comandos: 1º)Um comando que identifique o ponto de destino do link, incluindo a seguinte TAG no local onde quer que o link vá: <a name="coloque o nome da ancora aqui"></a> 2º)Um comando que defina o lugar da página para onde se pretende "saltar". Usar a tag de link "comum" ( a href ) para fazer o link saltar para o ponto identificado. <a href="#nome da ancora">texto</a> O símbolo "#" antes do nome da âncora fará com que o navegador entenda que deve ir para uma âncora. Desafio! Digite no bloco de notas, salve como EXERC9.HTML e abra no navegador Usando uma página qualquer (daquelas criadas nos exercícios anteriores) acrescente texto (use as tags <br /> e <p> também) de modo que, ao ser aberta, ocupe mais de uma página (deve aparecer a barra de rolagem) e crie um link interno (link para uma das últimas linhas da página).

6 Como fazer um link com âncora (ponto específico) para outra página. 1º)Incluir, na página de destino, a tag da âncora no ponto desejado. <a name="coloque o nome da ancora aqui"></a> 2º)Na página que terá o link, construir a tag da seguinte maneira: <a href="nome-do-lugar-a-ser-levado#nome da ancora">texto</a> Obs.: Em "nome-do-lugar-a-ser-levado" você coloca o URL ou a página html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de âncora deve ser o mesmo nome de âncora definido na página de destino. Podemos incluir quantas âncoras quisermos em uma página, mas cada uma deve ter um nome diferente Como fazer uma imagem ter um link É possível fazer com que uma imagem possa ter um link. Na tag de link, em vez de colocar o texto com a descrição, coloque a tag de imagem. Veja: <a href="nome-do-lugar-a-ser-levado"> <img src="nome do arquivo da imagem que vai aparecer"> </a> Obs.: Em "nome-do-lugar-a-ser-levado" coloca-se o arquivo html que se deseja visitar, por exemplo, dados.htm ou um URL como Em "nome do arquivo de imagem que vai aparecer" deve-se colocar o nome do arquivo da imagem que vai estar na página, por exemplo, "foto.gif". Digite no bloco de notas, salve como EXERC10.HTML e abra no navegador <a href=" <img src="foto.gif" alt="imagem com link para Google Home Page"></a>

7 Como fazer links para download de arquivos Colocar arquivos para que os visitantes façam download em uma home page é um recurso simples. Não existe um comando que faça o download. O que acontece é que, sempre que aparece um tipo de arquivo que o navegador não reconhece (um arquivo que o navegador não abre), ele automaticamente inicia o download. Outra maneira de fazer o download é clicar com o botão direito do mouse e escolher Salvar. Exemplo: Se o navegador não consegue abrir um arquivo "zip" (arquivo compactado), ele automaticamente inicia o download. Se desejarmos colocar um arquivo para download, tudo que se precisa fazer é direcionar um link para este arquivo como se estivesse colocando um link para uma página. Exemplo: Para o download de um arquivo "exemplo.exe", o código de um link simples ficaria assim: <a href="exemplo.exe">clique aqui para download de exemplo.exe </a> Obs.: Existem alguns tipos de arquivos que os navegadores, em vez de fazerem o download, abrem com programas já instalados no computador. Ocorre, por exemplo, com um link para um arquivo de vídeo ".avi" ou ".mpg", o navegador abrirá o programa para exibir esse vídeo. Digite no bloco de notas, salve como EXERC11.HTML, abra no navegador e faça o download (antes, use o bloco de notas para criar um arquivo chamado programa.exe com qualquer conteúdo) <a href="programa.exe">download do arquivo programa.exe</a>

8 1.6. Linhas Com as linhas é possível criar separações entre textos e imagens. Exemplo: <hr width=70% /> Obs.: Width define a largura, em pixels ou em porcentagem, que a linha ocupa na tela (normalmente deve usar width em CSS). Digite no bloco de notas, salve como EXERC12.HTML e abra no navegador <hr width=50% /> 1.7. Listas Usamos listas para organizar temas/textos em uma página. Podemos definir três categorias distintas de listas: - Ordenada, - Sem ordenação - Encadeada (lista dentro de lista). Atenção: não é preciso usar as tags <p> ou <br /> para forçar quebras de linha, isto é feito automaticamente. Podemos incluir outras tags após cada tag de lista Listas Ordenadas - As listas ordenadas são numeradas e usam um bullet (marca de. ) para demarcar cada uma das linhas. - Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada item da lista. - Uma lista ordenada deve ser envolvida pelo par <ol>... </ol>. Exemplo: Digite no bloco de notas, salve como EXERC13.HTML e abra no navegador <title>lista Ordenada</title> <ol> <li> Primeiro item de uma lista ordenada </li> <li> Segundo item de uma lista ordenada </li> <li> Terceiro item de uma lista ordenada</li> </ol>

9 Produzirá o seguinte resultado: 1. Primeiro item de uma lista ordenada 2. Segundo item de uma lista ordenada 3. Terceiro item de uma lista ordenada Listas sem Ordenação - Nas listas não ordenadas é utilizado algum símbolo gráfico. - Este tipo de lista será envolvido pelo par <ul>... </ul>. Exemplo: Digite no bloco de notas, salve como EXERC14.HTML e abra no navegador <title>lista Não Ordenada</title> <ul> <li> Primeiro item de uma lista não ordenada</li> <li> Segundo item de uma lista não ordenada </li> <li> Terceiro item de uma lista não ordenada</li> </ul> Produzirá o seguinte resultado:

10 Listas Encadeadas Podemos encadear tantas listas quantas quisermos, basta envolver cada nível de encadeamento com <ol>... </ol> ou <ul>... </ul>. Exemplo: Digite no bloco de notas, salve como EXERC15.HTML e abra no navegador <title>lista Encadeada</title> <ol> <li> Primeiro item de uma lista encadeada</li> <li> Segundo item de uma lista encadeada</li> <ul> <li> Terceiro item de uma lista encadeada</li> <li> Quarto item de uma lista encadeada</li> </ul> <li> Quinto item de uma lista encadeada</li> </ol> Produz o seguinte resultado: Link nas Listas Podemos colocar links nas listas, basta usar a tag de link logo após a tag de lista. Exemplo: Digite no bloco de notas, salve como EXERC16.HTML e abra no navegador <title>lista com Link</title> <ol> <li><a href=" item de uma lista ordenada com link </a></li> <li> Segundo item de uma lista ordenada sem link</li> <li><a href=" item de uma lista ordenada com link </a></li> </ol>

11 Obs.: podemos incluir links externos (para outros sites) conforme o exemplo anterior ou links internos (para pontos fixos dentro da própria página ou abrindo outra página, criando âncoras, conforme já foi visto). Desafio: Altere o código de uma página criada em qualquer exercício anterior para incluir uma lista com link para um determinado ponto (âncora) da mesma página Listas Ordenadas em Algarismos Romanos e com Cabeçalho Exemplo 1: Digite no bloco de notas, salve como EXERC17.HTML, abra no navegador e analise o resultado <title> Lista ordenada em romanos</title> <ol type="i"> <lh> Cabeçalho da lista ordenada em romanos </lh> <li> Primeiro item da lista </li> <li> Segundo item da lista </li> <li> Terceiro item da lista </li> </ol> Variações: <ol type= I > <ol type= a > <ol type= A >. Exemplo 2: Altere o código do exercício anterior utilizando a tag <ol type= I > e salve como EXERC18.HTML, abra no navegador e analise o resultado Altere o código do exercício anterior utilizando a tag <ol type= a > e salve como EXERC19.HTML, abra no navegador e analise o resultado Altere o código do exercício anterior utilizando a tag <ol type= A > e salve como EXERC20.HTML, abra no navegador e analise o resultado