Capítulo 4: Tags de Cabeçalho 4.1 <head>
4.1.2.7 Entidades de Encoding
● Cada conjunto de caracteres define um número e um nome para as entidades ○ Ex: o sinal de maior pode ser escrito através do nome da entidade > ou
seu número >
● A entidade possui a seguinte assinatura: & + nome + ;
● Seu uso é essencial dentro do código HTML quando necessário usar o sinal de maior ou de menor
○ Evita o interpretador confundir com abertura e fechamento de "tags" <body> <h1></body>
● Idealmente deve-se utilizar o nome da entidade ao invés do número para facilitar a leitura do código
<body> <h1></body> EP: Entidades de Encoding
1. Crie um novo arquivo de nome "entities.html" 2. Adicione a estrutura básica
a. Lembre-se sempre de utilizar UTF-8 na estrutura básica 3. Adicione o seguinte texto em <body>:
<body><h1></body>
4. Salve e teste, verificando se o texto "<h1>" foi exibido 5. Altere o código de <body> para:
<body><h1></body> 6. Salve e repita o teste
7. Abra a página do endereço abaixo
http://www.w3schools.com/charsets/ref_html_entities_4.asp
8. Adicione os nomes e os símbolos dos naipes de baralho dentro de <body>: a. ♠ espadas
b. ♣ paus c. ♥ copas d. ♦ ouros
9. Escreva as entidades a seguir e descubra a palavra:
4.1.3 <style>
● Permite definir as informações de estilo do documento ○ CSS → Cascading Style Sheets
○ Define como os elementos devem ser renderizados no documento <style>
h1 {
color: blue; }
</style>
● Possui dois atributos (além dos globais):
○ "media" → especifica qual a mídia que será aplicado o estilo ○ "type" → "mime type"
<style type="text/css" media="print"> h1 {
color: blue; }
</style>
EP: <style>
1. Crie um novo arquivo de nome "style.html" 2. Adicione a estrutura básica HTML
3. Dentro de <body> adicione <h1>: <h1>My Header</h1>
4. Salve e teste
5. Dentro de <head> adicione uma "tag" <style> com: <style type="text/css"> h1 { color: blue; } </style> 6. Salve e teste
7. Altere a "tag" <style> adicionando o atributo "media": <style type="text/css" media="print">
h1 {
color: blue; }
</style> 8. Salve e teste
a. Imprima a página e verifique a cor do texto
4.1.4 <link>
● Vincula o documento HTML com outro externo ○ Carrega um recurso externo, como CSS ● Pode ser utilizada mais de uma vez
● Não possui "tag" de fechamento <head>
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="default.css"> </head>
Atributo Valor Descrição
href URL Especifica o caminho do arquivo externo
media print all Define em qual aparelho a arquivo externo será exibido
rel icon
stylesheet
Valor obrigatório que define qual o relacionamento do documento com o arquivo externo
type text/css Opcional no HTML5, especifica o "MIME type" do arquivo externo
EP: <link>
1. Navegue para o endereço abaixo e baixe o ícone com o nome "favicon.ico" a. Salve em uma pasta apropriada
http://www.favicon.cc/?action=icon&file_id=686403 2. Crie um novo arquivo de nome "favicon.html" 3. Adicione o seguinte código em <head>:
a. Coloque o caminho correto como valor de "href"
<link rel="icon" type="image/x-icon" href="favicon.ico"> 4. Salve e teste
a. Observe o ícone ao lado do título da página 5. Crie um novo arquivo de nome "link.css" e "link.html"
6. Adicione o seguinte código CSS e salve o arquivo: h1 {
color: blue; }
7. Volte ao arquivo HTML "link.html" 8. Adicione a "tag" <h1> em <body>:
<h1>My Header</h1>
9. Adicione a "tag" <link> em <head>:
<link rel="stylesheet" type="text/css" href="link.css">
10. Salve e teste
11. Adicione o atributo "media":
<link rel="stylesheet" type="text/css" href="link.css" media="print">
12. Salve e teste a impressão
4.1.5 <script>
● Define o código JavaScript do documento ● Pode ser usada como:
○ Contêiner para código
○ Apontar para arquivo JavaScript externo utilizando o atributo "src" ● Quando usado o atributo "src" a "tag" deve ser vazia
○ Não é possível apontar para arquivo externo e possui conteúdo ao mesmo tempo
● Recomendado utilizar no final da "tag" <body>
○ Melhora a performance do carregamento da página
○ Navegador tem menos informação para interpretar antes de exibir a página
○ Existem casos na qual a biblioteca deve ser carregada na "tag" <head> para que possa funcionar corretamente
<script>
alert('Hello HTML5'); </script>
<script type="text/javascript" src="code.js"></script>
Atributo Valor Descrição
charset pt-br Especifica o "encoding" do arquivo externo
src URL Especifica o caminho do arquivo externo
EP: <script>
1. Crie um arquivo de nome "script.html"
2. Adicione o seguinte código dentro de <head>: <script>
alert('Hello HTML5'); </script>
3. Salve e teste
4. Crie um novo arquivo de nome "script.js" dentro da mesma pasta que contém o arquivo "script.html"
5. Adicione o seguinte código JavaScript:
document.write('<h1>Hello from JS</h1>');
6. Salve o arquivo e volte para o arquivo HTML "script.html" 7. Adicione o seguinte código em <head>:
<script type="text/javascript" src="script.js"></script>
8. Salve e teste
4.1.6 <noscript>
● Define um conteúdo alternativo para navegadores que foram definidos para não usarem JavaScript ou não tem suporte a linguagem
○ Seu conteúdo será mostrado apenas nesta condição ● Pode ser usado nas "tags" <head> e <body>
<script>
alert('Hello HTML5'); </script>
<noscript>
This site requires JavaScript enabled. </noscript>
EP: <noscript>
1. Crie documento HTML de nome "noscript.html" 2. Adicione o código em <head>, salve e teste:
<script>alert('Hello HTML5')</script> <noscript>
This site requires JavaScript enabled. </noscript>
3. Desabilite o JavaScript do navegador e este novamente a. Abra "Settings" do Google Chrome
b. Procure por "javascript" no campo de busca das configurações c. Clique em "Content Settings"
d. Clique em "Do not allow any site to run JavaScript" 4. Habilite novamente o JavaScript do navegador