Embed Size (px)
Citation preview
Nome do arquivo: estruturabásica.html
1 <!DOCTYPE html>2 <html lang="pt‐br">3 <head>4 <meta charset="UTF‐8">5 <link rel="stylesheet" type="text/css" href="estilo.css">6 <title></title>7 </head>8 <body>
9 </body>10 </html>
Em casos que a acentuação não se apresente corretamente em algum navegador pode‐se utilizar:
<meta http‐equiv="Content‐Type" content="text/html; charset=utf‐8" />ou<meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" />
<!DOCTYPE html>
Em versões anteriores do HTML se colocava:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">
A definição de tipo de documento, ou simplesmente DTD, contém as regras que definem quais as
tags que podem ser usadas num documento XML e quais os valores válidos.
Exemplo 1:
<a href="http://www.google.com.br">G O O G L E</a>
Será renderizado no navegador assim:
G O O G L E
Exemplo 2 (:
<a href="pagina2.html">Aqui está o link para a página 2</a>
Para construir links entre páginas de um mesmo website você nãoprecisa escrever o endereço completo de cada página (URL). Se porexemplo você tem duas páginas chamadas de pagina1.html epagina2.html, e salvou as duas em um mesmo diretório, você constróium link de uma para a outra usando somente o nome do arquivo nolink. Nestas condições, um link da pagina1.html para a pagina2.htmlé como mostrado abaixo:
Tag A e Tag LINK
Se a página 2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado abaixo:
Exemplo 3:
<a href="subdiretorio/pagina2.html">Aqui está o link para a página 2</a>
Tag A e Tag LINK
No slide 1 deste material tem um exemplo de uma Tag LINK que importa o arquivo .CSSpara a página principal:
Tag APode‐se criar links internos, dentro da própria página ‐ por exemplo, uma tabela de conteúdos ou índicecom links para cada um dos capítulos em uma página. Tudo o que se precisa é usar o atributo id e osímbolo "#".
Exemplo 4:
<!DOCTYPE html><html lang="pt‐br"><head>
<meta charset="UTF‐8"><title>Minha página</title>
</head><body>
<p><a href="#irpara1">Link para cabeçalho 1</a></p><p><a href="#irpara2">Link para cabeçalho 2</a></p> <h1 id="irpara1">Cabeçalho 1</h1> <p>Informação 1…</p> <h1 id="irpara2">Cabeçalho 2</h1><p>Informação 2…</p>
</body></html>
Tag A
Pode‐se criar também um link para um endereço de e‐mail. Isto é feito de modosemelhante aos links para documentos.
Exemplo 6:
<a href="mailto:[email protected]">Enviar um e-mail para a pessoa do site</a>
Será renderizado no navegador assim:
Enviar e‐mail para a pessoa do site
A única diferença é que no lugar do endereço do documento você escreve mailto: seguidopelo endereço de e‐mail. Quando o link é clicado o programa de e‐mail padrão do usuário éaberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto sóirá funcionar se o usuário tiver um programa de e‐mail instalado na sua máquina.
Pode‐se observar que todas as partes do site tem seu posicionamento descrito em suas tags, por exemplo, atag de rodapé do site tem seu nome como padrão representado por <footer>. Deste modo o mecanismo debusca, não terá dificuldade para escolher qual parte do site tem o conteúdo mais relevante, uma vez queconsegue ler as tag e seu respectivos nomes. O conteúdo mais importante do site vai estar dentro da tag<article>, facilitando assim a escolha pelos mecanismos de busca do melhor conteúdo que o site emquestão possa oferecer.
![[ajustado] Educação e Tecnologias, experiencias, desaios e](https://img.pdfslide.net/doc/110x75/631c06f0b8a98572c10cb739/ajustado-educacao-e-tecnologias-experiencias-desaios-e-.jpg)
