H1 Header with "title" class

HTML5 e CSS3

Index Capítulo 1: Web 1.1 História 1.2 Timeline 1.3 Google em 1997 1.4 Camadas 1.5 Front-end 1.6 Back-end 1.7 Requsições 1.8 Integrações EP: Integrações 1.8 Domínio 1.9 Hospedagem 1.10 Página HTML 1.11 Versões HTML 1.12 Versões CSS 1.13 Linguagens de Progamação 1.14 Padrões HTML 1.15 Navegadores EP: Navegadores 1.16 Engines 1.17 Engines Timeline 1.18 Browsers Timeline 1.19 Cross-browser Capitulo 2: Introdução à Linguagem 2.1 Editores de Texto e IDE 2.2 Sublime Text EP: Sublime Text 2.3 HTML 2.4 XHTML 2.5 XML 2.6 Tags 2.7 Estrutura Básica HTML 2.9 Indentação 2.9.1 Código sem Indentação 2.9.2 Código com Indentação 1

EP: Tags 2.10 Comentários EP: Comentários 2.11 Documentação Online Capítulo 3: Elementos e Atributos 3.1 Conceito 3.2 Elementos EP: Elementos 3.3 Atributos 3.4 Atributos Globais 3.5 Elementos e Atributos EP: Elementos e Atributos 3.6 Estrutura HTML 3.7 DOCTYPE EP: Estrutura HTML 3.8 Estrutura Básica HTML 3.9 Interpretação do Navegador Capítulo 4: Tags de Cabeçalho 4.1 4.1.1 4.1.2 <meta> 4.1.2.1 Atributo name <meta> EP: <meta> 4.1.2.2 Demais Atributos de <meta> 4.1.2.3 Atributo http-equiv <meta> EP: http-equiv 4.1.2.4 Atributo charset <meta> 4.1.2.5 Encoding 4.1.2.6 ISO e UTF EP: Econding 4.1.2.7 Entidades de Encoding EP: Entidades de Encoding 4.1.3 <style> EP: <style> 4.1.4 <link> EP: <link> 4.1.5 <script> EP: <script> 2 4.1.6 <noscript> EP: <noscript> Capítulo 5: Tags de Exibição 5.1 Sobre 5.2 Block & Inline 5.2.1 Block 5.2.2 Inline 5.3 <body> 5.4 <h1>...<h6> EP: <h1>...<h6> 5.5 EP: 5.6 5.7 <s> 5.8 5.9 5.10 <pre> EP: Textos 5.11 <img> EP: <img> 5.12 <button> EP: <button> 5.13 Listas 5.13.1 <ol> 5.13.2 <ul> 5.13.3 <li> EP: Listas 5.14 <div> EP: <div> 5.15 <a> 5.15.1 Navegação 5.15.2 Âncora 5.15.3 target EP: <a> Capítulo 6: Tags Semânticas 6.1 Sobre 6.2 Tags 6.2.1 <header> 3 6.2.2 <article rel="nofollow"> 6.2.3 <footer> 6.2.4 <section> EP: Tags Semânticas Capítulo 7: Tags de Formulário 7.1 Formulários 7.2 <form> EP: <form> 7.3 Principais Elementos 7.4 <input> EP: <input> 7.5 <label> EP: <label> 7.6 <select> EP: <select> 7.7 <textarea> EP: <textarea> 7.8 <fieldset> EP: <fieldset> Capítulo 8: Novos Tipos de Formulário 8.1 Novos Tipos 8.2 Suporte dos Navegadores 8.3 Vantagens do Uso EP: Novos Tipos Capítulo 9: Conceitos de Requisições HTTP 9.1 Front-end & Back-end 9.2 Requisição 9.3 Header 9.4 URL Encoding EP: URL Encoding 9.5 Serviços 9.6 Caixa Preta 9.7 REST 9.8 Métodos 9.9 GET EP: GET 9.10 POST 9.11 Segurança 4 9.12 Ferramentas Capítulo 10: Formulários HTML 10.1 Métodos vs Formulários 10.2 Objeto do Formulário 10.3 <form> 10.4 method 10.5 name EP: Objeto do Formulário Capítulo 11: Validação 11.1 Papel do Front-end 11.3 Validação 11.3.1 Validações mais Comuns 11.3.2 Validação HTML5 11.3.2.1 Atributos de Validação 11.3.2.2 Tipos que Validam EP: Validação 11.3.2.3 Customização Capítulo 12: Recursos Externos 12.1 <object> EP: <object> 12.2 <embed> EP: <embed> 12.3 <iframe> EP: <iframe> 12.4 Considerações EP: Considerações Capítulo 13: Mídias HTML5 13.1 Áudio 13.1.1 Suporte dos Navegadores 13.1.2 Arquivos de Áudio 13.1.3 <audio rel="nofollow"> EP: <audio rel="nofollow"> 13.1.4 <source> EP: <source> 13.2 Vídeo 13.2.1 Suporte dos Navegadores 13.2.2 Arquivos de Vídeo 13.2.3 <video> 5 EP: <video> Capítulo 14: SVG 14.1 Visão Geral 14.2 Formato XML 14.2.1 Desmenbrando SVG 14.3 Usando SVG EP: SVG Capítulo 15: Tabela 15.1 <table> 15.2 Criando Tabelas EP: <table> 15.3 Email Marketing 15.3.1 Regras Essenciais EP: Email Marketing Capítulo 16: Fundamentos CSS 16.1 CSS 16.2 Reutilização de Estilos 16.3 Sintaxe 16.4 Cometários Capítulo 17: Seletores 17.1 Element Selector EP: Element Selector 17.2 id Selector EP: id Selector 17.3 Class Selector EP: Class Selector 17.4 Universal Selector EP: Universal Selector 17.5 Declaração de Seletores 17.6 Combinando Seletores EP: Combinando Seletores Capítulo 18: Precedência CSS 18.1 Nomenclatura de Vínculo 18.2 Precedência CSS EP: Precedência CSS 18.3 Execução de Precedência EP: Execução de Precedência Capítulo 19: Seletores Avançados 6 19.1 Hierarquia HTML 19.1.1 Descendant Selector EP: Descendant Selector 19.1.2 Child Selector EP: Child Selector 19.1.3 Adjacent Sibling Selector EP: Adjacent SIbling Selector 19.1.4 General Sibling Selector EP: General Sibling Selector 19.1.5 Consolidado dos Seletores Hierárquicos 19.2 Atributos HTML 19.2.1 Attribute Selector EP: Attribute Selector 19.2.1 Attribute Selector (cont.) EP: Attribute Selector (cont.) 19.3 Pseudo-class EP: Pseudo-class (link) 19.3 Pseudo-class (cont.) EP: Pseudo-class (form) 19.3 Pseudo-class (cont.) EP: Pseudo-class (others) 19.4 Pseudo-class Avançado EP: Pseudo-class Avançado 19.5 Peseudo-elements EP: Pseudo-elements 19.6 Vendor Properties Capítulo 20: Cores CSS 20.1 Cores 20.2 Hexadecimal 20.3 Web Safe Colors 20.4 RGB 20.5 RGBA 20.6 HSL 20.7 HSLA Capítulo 21: Fontes 21.1 Sobre 21.2 font-family 21.3 Fontes não Carregadas 7 EP: font-family 21.4 Web Safe Fonts 21.5 Sans-serif vs Serif 21.6 Proportional vs Monospace 21.7 Fontes Carregadas 21.8 @font-face EP: @font-face Capítulo 22: Propriedades CSS 22.1 Unidades de Medida CSS 22.2 Propriedades CSS 22.3 Valor das Propriedades 22.4 Shorthand EP: Propriedades CSS 22.5 overflow 22.6 background 22.6.1 background-color EP: background-color 22.6.2 background-clip EP: background-clip 22.6.3 background-image EP: background-image 22.6.4 background-repeat EP: background-repeat 22.6.5 background-position EP: background-position 22.6.6 background-size EP: background-size 22.6.7 background-attachment EP: background-attachment 22.6.8 background-origin 22.7 border 22.7.1 Shorthand Border 22.7.2 border-style 22.7.3 CSS3 Border EP: border 22.8 padding EP: padding 22.9 margin 8 EP: margin 22.10 Texto 22.10.1 CSS3 Text EP: Texto 22.11 list-style 22.11.1 list-style-type 22.11.2 list-style-position 22.11.3 list-style-image EP: list-style 22.12 Colunas EP: Colunas Capítulo 23: At Rules 23.1 Sobre 23.2 Principais 23.3 @charset 23.4 @import EP: @import 23.5 @font-face 23.5.1 Suporte de Fontes EP: @font-face 23.6 @media EP: @media Capítulo 24: Box Model 24.1 Sobre 24.2 Áreas 24.3 Espaçamento do Conteúdo 24.4 Largura e Altura EP: Tamanho do Elemento 24.5 CSS Reset EP: CSS Reset Capítulo 25: Posicionamento 25.1 Dimensões 25.1.1 Valores das Dimensões 25.1.2 Propriedades de Dimensões 25.2 display 25.2.1 inline vs block EP: inline vs block 25.2.2 Modificando a Exibição 9 EP: Modificando a Exibição 25.2.3 Removendo da Exibição 25.2.4 Visibilidade EP: Exibição vs Visibilidade 25.3 position 25.3.1 static EP: static 25.3.2 relative EP: relative 25.3.3 absolute EP: absolute 25.3.4 fixed EP: fixed 25.3.5 z-index EP: z-index 25.3.6 Ancorando Elementos EP: Ancorando Elementos 25.4 Flutuando Elementos 25.4.1 float EP: float 25.4.2 clear EP: clear 25.4.3 Flutuação vs Proximidade EP: Flutuação vs Proximidade 25.4.4 Clearfix EP: Clearfix 25.5 Alinhamento 25.6 Centralizando EP: Centralizando 25.7 Outras Técnicas EP: Outras Técnicas Capítulo 26: Tipos de Layout 26.1 Fixo EP: Fixo 26.2 Líquido EP: Líquido 26.3 Híbrido EP: Híbrido 10 26.4 Responsivo EP: Responsivo Capítulo 27: Layout Responsivo 27.1 Sobre 27.2 Media Query 27.2.3 Media Type 27.2.4 Media Features EP: Media Query 27.3 Operadores Lógicos 27.3.1 and 27.3.2 not 27.3.3 only 27.4 Instrução Completa EP: Operadores Lógicos 11 12 Capítulo 1: Web 1.1 História ● Necessidade de comunicação militar ● Internet vem do conceito de computadores globais interligados ○ Existe o termo intranet o qual refere-se a uma rede de computadores fechada interligada ● 1.2 World Wide Web, é criado para facilitar a comunicação e integração na rede Timeline ● 60 à 70: guerra fria dá origem às redes ● 70 à 80: surge o termo internet ● 80 à 90: criadas as grandes redes de computadores ● 90 à 00: "boom" world wide web ● 00 à atualmente: web 2.0 e 3.0 13 1.3 Google em 1997 1.4 Camadas 14 1.5 Front-end ● Também chamado de "client-side" ● Na web é composto por páginas HTML ● ○ +CSS ○ +JavaScript ○ + Recursos adicionais (imagens, fontes, etc) Sua principal função e exibir dados e enviá-los para o servidor quando necessário ● ● 1.6 ● ● Nunca deve lidar com regras de negócio ○ Apenas envia e recebe dados através de requisições HTTP ○ Não acessa banco de dados diretamente ○ Baixa segurança Necessita de um servidor ○ Hospeda o site ○ Gerencia as requisições recebidas pelos serviços web ○ Lida com as regras de negócio Back-end Disponibiliza os serviços web ○ Lida com as requisições HTTP ○ Recebe e envia dados ○ Gerencia as regras de negócio e inteligência do sistema ○ Pode integrar-se com outros servidores via serviços web Acessa o banco de dados e efetua sua manipulação ○ Lista, adiciona, atualiza e apaga registros 15 1.7 ● Linguagem Servidor PHP Apache Java Tomcat, JBoss, GlassFish .NET / ASP Windows Server CFML ColdFusion Ruby Puma, Phusion Passenger JavaScript NodeJS Requsições HTTP - Hypertext Transfer Protocol ○ Protocolo de comunicação mais comum na Web ○ Essencialmente a transmissão de dados ocorre enviando textos ○ Existem outros protocolos como SSH e FTP 16 ● Segurança das informações transferidas é baixa ○ ● ● ■ Dados criptografados ■ Necessário o uso de certificados digitais Toda requisição possui "headers" ○ 1.8 Existe a opção de HTTPS para maior segurança Cabeçalhos com informações sobre a requisição e os dados transmitidos Integrações Web Services ○ Permite que o "client" se integre com o "server" ○ Servidor também pode se integrar com outros servidores via serviços ● A transmissão de dados ocorre através de requisições HTTP ● Comunicação é mantida por alguns instantes ○ Tempo necessário para o servidor receber a requisição e enviar a resposta ● "Stateless" ○ Cada invocação do "client" gera uma nova requisição para o servidor ○ Servidor não guarda informações do "client" ○ Segurança é garantida através de sessão ou "tokens" enviados na requisição ● Para o "client" não importa o que acontece com a requisição quando recebida pelo servidor ○ Qual o sistema operacional do servidor ○ Quais os recursos de infra estrutura envolvidos ■ Quantos servidores existem ■ Quais as camadas de seguranças aplicadas ■ Qual hardware utilizado 17 EP: Integrações 1. Abra o Google Chrome na página www.google.com.br 2. Clique com o botão direito sobre alguma área vazia 3. Selecione a opção "Inspecionar Elementos" 4. Selecione a aba "Network" 5. Atualize a tela 6. Perceba os arquivos carregados e o tempo necessário 7. Use a barra de rolagem e vá para o primeiro item da lista 8. Clique sobre ele 9. Na aba "Headers" estão as informações enviadas da página HTML para o servidor 10. Identifique a informação "Server" e seu valor 1.8 Domínio ● Nome para localizar e identificar conjuntos de computadores na rede ○ Foi concebido com o objetivo de facilitar a memorização dos endereços de computadores na Internet ○ ● 1.9 Sem ele seria necessário memorizar uma sequência de números Necessário registrar um endereço para sua utilização ○ No Brasil os registros podem ser feitos através do registro.br ○ Registro ".com" pode ser feito pela Verisign Hospedagem ● Contratação de um servidor que conterá os arquivos do "site" ● O domínio deve estar configurado para apontar para o endereço IP do servidor de hospedagem ● Os arquivos do "site" devem ser colocados na pasta pública do servidor 18 1.10 Página HTML ● Exibida quando o endereço do domínio é invocado ● Contém todos os recursos necessários para a exibição ○ Essencialmente deve possuir um arquivo ".html" ○ Opcionalmente poderá conter os arquivos do tipo ".css", ".js", ".jpg", ".png", ".gif", ".woff", ".mp3", ".mp4", etc 1.11 Versões HTML 19 1.12 Versões CSS 1.13 Linguagens de Progamação ● Na página HTML podem ser usadas as seguintes linguagens de programação: ○ HTML → marcação de texto ○ CSS → estilo do texto marcado com HTML ○ JavaScript → controle e manipulação HTML e CSS ○ SVG → exibição de imagens vetoriais 1.14 Padrões HTML ● W3C - World Wide Web Consortium ● Grupo de empresas fabricantes de software ● Mantém HTML desde 1996 ● Define os rumos do HTML e a padronização da linguagem ○ Interpretação igual nos navegadores 20 1.15 Navegadores ● IE (Internet Explorer) ● Firefox ● Opera ● Safari ● Chrome EP: 1. Navegadores Navegue para os endereços abaixo e verifique as estatísticas: a. Navegadores b. http://www.w3schools.com/browsers/browsers_stats.asp Telas c. http://www.w3schools.com/browsers/browsers_display.asp Sistema Operacional http://www.w3schools.com/browsers/browsers_os.asp 1.16 Engines ● Interpretam os códigos HTML, JavaScript, CSS e SVG do documento ● Cada navegador pode ter um "engine" diferente ● Podem haver diferenças na interpretação ○ Um "engine" quer ter um diferencial competitivo dentre os demais 21 Engine Browser Blink Chrome e Opera Webkit Safari Gecko Firefox Trident Internet Explorer 1.17 Engines Timeline 22 1.18 Browsers Timeline 1.19 Cross-browser ● ● Código deve funcionar igual em mais de um navegador em mais de uma versão ○ Principal problema da programação HTML ○ Preocupação tanto no "desktop" quanto no "mobile" ○ Flash não possuía este problema, pois o interpretador era único Código sem interpretação ○ ● Versão do navegador pode não suportar as funcionalidades do HTML5 Diferença dos "engines" ○ Pode "quebrar" o layout de uma página, empurrando elementos para fora da área visível do usuário ● Necessário ○ Identificar o público alvo e principal navegador utilizado ○ Testar em mais de um navegador e mais de uma versão 23 24 Capitulo 2: 2.1 ● ● ● Introdução à Linguagem Editores de Texto e IDE Editores de Texto ○ Bloco de notas ○ Adobe Dreamweaver ○ Sublime Text ○ Notepad++ IDEs ○ Eclipse/Aptana ○ Webstorm ○ Netbeans Cloud ○ JSFiddle ○ Codenvy ○ Koding ○ Codepen 25 2.2 ● Sublime Text Um dos editores mais utilizados pela comunidade de desenvolvedores ○ ● Multi plataforma ○ ● Windows, Mac e Linux Leve e versátil com relação as funcionalidades ○ ● Para diversas linguagens de programação Customizável conforme a necessidade do desenvolvedor Pacotes podem ser adicionados ○ Novas funcionalidades estarão disponíveis ○ Enriquecimento dos recursos nativos ○ Instalação pode ser manual ou automatizada com a ajuda do "Package Control" EP: 1. Sublime Text Baixe e instale o Sublime Text 3 a. 2. 3. Busque no Google o endereço Abra o Sublime e adicione um projeto a. Clique no menu superior "Project > Add Folder to Project" b. Selecione a pasta do seu projeto c. Perceba a barra lateral que se abriu Baixe e instale o Package Control a. Busque no Google por "package control sublime text 3" b. Identifique no site a página de instalação c. Copie o código exibido na tela (atenção para a versão do Sublime) 4. Abra o Sublime Text 3 5. Clique no item "View" do menu superior do Sublime 6. Selecione a opção "Show Console" 7. Cole o código copiado do site e tecle enter 26 a. Verifique o andamento da instalação na barra de status no canto inferior esquerdo do Sublime 8. Feche a visualização do console a. 9. Repita os passos 5 e 6, porém selecione "Hide Console" Digite o atalho CTRL + SHIFT + P a. No Mac use CMD ao invés de CTRL b. Ou use a opção do menu "Tools > Command Pallete" c. Uma janela flutuante será exibida 10. Digite "install" 11. Selecione a opção "Package Control: Install Package" a. 12. Uma lista com todos os pacotes disponíveis para o Sublime será exibida Digite "emmet" e selecione a opção com este nome a. Perceba a barra de status do Sublime no canto inferior esquerdo com o andamento da instalação b. Alguns pacotes exibem uma mensagem no próprio Sublime quando terminam a instalação (caso do Emmet) c. 13. Veremos as funcionalidades do Emmet posteriormente Clique com o botão direito do mouse sobre a pasta do projeto na barra lateral e veja quantas opções existem 14. Repita os passos de 9 à 12 e instale o pacote "Sidebar Enhancements" a. Aguarde o término da instalação b. Verifique as novas opções existem quando clicar com o botão direito do mouse sobre a pasta do projeto 27 2.3 HTML ● Hypertext Markup Language ● Criada por Tim Berners Lee em 1993 ● Linguagem de marcação de texto através de "tags" ● Texto marcado poderá ser manipulado por JavaScript e ou estilizado por CSS 2.4 ● ● ● ● 2.5 XHTML EXtensible Hypertext Markup Language Definido a partir da versão 4.01 em 2000 Baseada na linguagem XML ○ Estrutura hierárquica ○ Mesmas regras de aninhamento Árvore de elementos ○ Declarados como "tags" ○ Um elemento pode ou não ter subelementos aninhados ○ "Branches and leafs" XML ● Serialização de dados bastante comum ● Geralmente usada para configuração ● Contém dados definidos em forma de "nodes" (nós) <?xml version="1.0"?> <hotdog> <bread> <sausage> <sauce>ketchup</sauce> <sauce>mustard</sauce> </sausage> </bread> </hotdog> 28 2.6 Tags ● Estruturas de linguagem de marcação ● Existem aproximadamente pouco mais de 100 "tags" HTML5 ● Outras linguagens também usam o conceito de "tags" ● ○ XML ○ IDML ○ CFML Elementos do documento HTML ○ Marcam uma característica ○ Conteúdo aninhado dentro destas são vinculadas as características das "tags" de abertura e fechamento 2.7 ○ "Case insensitive" ○ Maioria das "tags" HTML5 tem o par de fechamento Estrutura Básica HTML Declaração Descrição <!doctype html> Navegador identificar o tipo do documento <html></html> Principal "tag" do documento ("root tag") <head></head> Possuirá "tags" para configuração do documento (título, descrição, autor, palavras-chaves, etc) <body></body> Praticamente tudo que será exibido para o usuário na tela do navegador 29 2.8 Aninhamento das Tags <!doctype html> <html> <head> <title>Título do Documento Tudo que será visualizado no navegador

2.9 ●

Indentação A identificação de qual "tag" é "pai" ou "filho" é essencial para entendimento do código

●

●

Uma das técnicas usadas para clareza do código é a indentação ○

"Filhos" ficam recuados à direita dos pais

○

"Netos" ("bisnetos" e sucessivamente) ficarão aninhados aos "filhos"

Para a máquina não importa se o código está indentado ou não ○

Basta apenas estar aninhado corretamento, sem erros de sintaxe

○

Os códigos a seguir são exatamente idênticos

2.9.1 Código sem Indentação My TitleMy content

30

2.9.2 Código com Indentação My Title My content

EP:

Tags

1.

Crie um arquivo de nome "basic.html"

2.

Adicione a informação ao navegador do tipo do documento a.

Deve ser o primeiro código do documento

3.

Abaixo da declaração anterior, crie a "root tag" HTML:

4.

Dentro de aninhe as "tags" e : a.

Atenção ao aninhamento e a indentação

5.

Escreva um texto dentro de

31

My first page ! 6.

Salve e teste no navegador

7.

Adicione a "tag" como filha de <head>: a. Altere a indentação para melhor leitura do código <head> <title>Oh yeah!!! 8.

Salve e teste novamente no navegador

9.

Altere o texto de adicionando quebras de linhas entre as palavras com a tecla ENTER: My first page !

10.

Salve e teste, verificando se as quebras de linha foram respeitadas

11.

Altere o código colocando tudo em uma única linha, porém marcando com a "tag"
My
first
page !

12.

Repita o último teste

2.10 Comentários ●

Comentários são instruções de código ignoradas pelo interpretador do 32

navegador ●

São úteis para descrever alguma funcionalidade

●

Comentário HTML é multilinhas ○

Tudo que estiver dentro das "tags" de abertura e fechamento será comentado

Título do Documento Tudo que será visualizado pelo usuário

EP: 1. 2.

Comentários Abra o arquivo "basic.html" do EP anterior Adicione um comentário mencionando que o HTML respeita o código de marcação e não a forma como as informações são dispostas a. Avalie e identifique o melhor local para colocar seu comentário

2.11 Documentação Online ●

O W3C possui toda a referência sobre as "tags" HTML e seus atributos

●

Algumas empresas, como a Mozilla, também disponibilizaram uma documentação HTML própria

●

○

Todas seguem as informações do W3C

○

Algumas estão mais atualizadas do que outras

○

Geralmente são de mais fácil entendimento do que o W3C

Alguns endereços com a documentação sobre as "tags" HTML: http://www.w3schools.com/tags/default.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Element http://msdn.microsoft.com/en-us/library/windows/apps/hh767345.aspx

34

35

Capítulo 3: 3.1

Elementos e Atributos

Conceito

●

Cada "tag" HTML é considerada um elemento

●

Um elemento por sua vez pode ser configurado por seus atributos ○

O exemplo abaixo é apenas didático, mostrando a "assinatura" do código, pois a "tag" não existe

Text

3.2

Elementos

●

Um documento HTML é definido por elementos HTML

●

Cada elemento faz uma marcação no documento ○

O conteúdo do elemento será marcado pela "tag" que o envolve

○

Maioria das "tags" sempre são definidas pela de abertura e de fechamento, mas há exceções

○

Se uma "tag" não contiver a de fechamento, o navegador tentará interpretar da melhor forma possível, mas comportamentos estranhos podem acontecer

●

Um elemento, pode ter conteúdo ou não ○

●

As que não possuem conteúdo não precisam ser fechadas no HTML5

Como exemplo, a "tag"
marca o texto com o formato para cabeçalho ○

Se não for fechada o formato de cabeçalho será aplicado à tudo mais que estiver na sequência

My Header

36

EP:

Elementos

1.

Crie um novo arquivo de nome "elements.html"

2.

Adicione a estrutura HTML essencial:

3.

Dentro da "tag" adicione o seguinte código:
My Header
This is my content

4.


5.

Remova a "tag" de fechamento :
My Header This is my content

6. 7.

Salve, teste e perceba que todo o texto recebeu o formato de cabeçalho Desfaça o passo anterior e mantenha a "tag" de fechamento:
My Header
This is my content

37

3.3 ●

Atributos Atributos configuram um elemento ○

Definem valores para que uma "tag" tenha um determinado comportamento

●

Os atributos podem variar de "tag" para "tag" ○

●

Alguns podem ser comuns, outros podem ser exclusivos

Na documentação HTML é possível identificar e esclarecer o funcionamento de cada um deles

●

No exemplo abaixo a "tag"
possui o atributo "align" que configura o estilo do alinhamento do texto:
My Header

Nota: o atributo "align" está depreciado no HTML5 e deve ser evitado mesmo em versões anteriores do HTML, uma vez que todo o estilo deve ser aplicado através de CSS.

3.4

Atributos Globais

●

São os atributos que podem ser adicionados a qualquer "tag" HTML

●

Existem em versões anteriores do HTML e também os novos com funcionamento apenas no HTML5

●

HTML: ○ acesskey ○ class ○ dir ○ id ○ lang ○ style ○ tabindex ○ title

38

●

3.5

HTML 5: ○ contenteditable ○ data-* ○ draggable

Elementos e Atributos Item

Exemplo

Elemento

Tag

Atributo

Configuração de uma tag

Conteúdo

Informações das tags

39

EP: 1.

Elementos e Atributos Navegue para o endereço abaixo e verifique os elementos HTML: http://www.w3schools.com/tags/ref_byfunc.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Element

2.

Agora verifique os atributos: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

3.

Finalmente identifique os atributos globais: http://www.w3schools.com/tags/ref_standardattributes.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

3.6 ●

Estrutura HTML Um documento HTML segue um padrão estrutural definido pelo W3C, chamado de DOM - Document Object Model

●

Esta estrutura define: ○

Nós de elementos 40

●

○

Regras hierárquicas

○

Acesso e manipulação dos objetos

Todas as "tags" possuem o conceito de "pai" e "filho"
My Header

Child Tags: tem como filho tem como filho

Parent Tags:
tem como pai tem como pai

●

Cada elemento HTML é considerado um nó ("node")

●

A hierarquia está definida dentro de uma árvore de elementos HTML ("nodes")

●

○

Os pais são chamados de "parent nodes" e os filhos de "child nodes"

○

A indentação do código é fundamental para o entendimento

Um documento HTML deve ter uma estrutura de nós válidos para que possa ser exibido corretamente

●

A estrutura essencial para exibição é: ○

Sendo que o conteúdo que será exibido pela página sempre fica aninhado dentro de

○

Fortemente recomendado o uso de

41

●

Porém muitas vezes é desejado configurar mais informações no documento HTML ○

●

Novas "tags" e novos aninhamentos devem ser feitos

No exemplo a seguir a página possuirá um título ○

Maioria das configurações da página ficam dentro de

My Page Title My page content...

3.7

DOCTYPE

●

Document Type Definition

●

Informa ao navegador o tipo do documento a ser renderizado

●

Deve ser colocada na 1ª linha do documento HTML

My Page Title My page content...

42

EP:

Estrutura HTML

1.

Crie um arquivo de nome "structure.html"

2.

Adicione a estrutura essencial HTML com conteúdo: My page content...

3. 4.

Salve e teste no navegador Adicione a instrução "doctype":

5.

6.

... Salve e teste novamente a. Perceba que nada ocorreu b. Identifique o título que está sendo exibido na aba do navegador (o nome do arquivo) Adicione e dentro de <html> <!doctype html> <html> <head> <title>My Title ...

7. 8.

Salve e teste, identificado o título na aba do navegador Volte ao código dentro de e adicione quebras de linha entre as palavras: My page content...

9.

Salve e teste a.

Observe se as quebras foram respeitadas 43

10.

Volte o código da forma inicial e adicione
My
page
content...

11.

Salve e teste

3.8

Estrutura Básica HTML

Tag

Descrição

Conteúdo do Elemento

"Root tag" do documento HTML define contêiner para a árvore de elementos DOM

Tudo, exceto outra "tag" HTML

Inclui o "cabeçalho" do documento como título, metadados, estilos e "scripts"

Conteúdo do documento

<style> <base> <link> <meta> <script> <noscript> Tudo, exceto as anteriores, porém pode incluir a "tag" de "script" 44 3.9 ● Interpretação do Navegador O navegador interpreta o código existente no documento HTML de cima para baixo ● ○ "doctype" informa o tipo de documento a ser interpretado ○ Navegador começa a fazer o "parse" das "tags" HTML "Parse" pode ser entendido* como: ○ Interpretação de todo o código ○ Execução das configurações definidas em <head> ○ Renderização do conteúdo Nota: sequência real dos processos é diferente da apresentada aqui, a qual tem apelo apenas didático. 45 46 Capítulo 4: 4.1 Tags de Cabeçalho <head> ● Aninhada dentro de <html> ● Recebe praticamente todas as "tags" de configuração da página ○ Título ○ Metadados ○ "Encoding" ○ Estilo ○ Script <!doctype html> <html> <head> </head> </html> 4.1.1 <title> ● Identifica o título da página, o qual é utilizado para ○ Janela (ou aba) do navegador ○ Página adicionada aos favoritos ○ Resultados de busca na Internet <!doctype html> <html> <head> <title>My Title

47

4.1.2 <meta> ●

A "tag" <meta> define os metadados do documento ○

Aninhada dentro da "tag"

●

Não possui "tag" de fechamento para HTML5

●

Pode ser utilizada mais de uma vez

●

Metadados são usados pelo navegador

●

○

Conjunto de caracteres usados no conteúdo ("encoding")

○

Recarregar a página em determinados intervalos de tempo

Também são usados por: ○

Ferramentadas de indexação de "sites" (SEO - Search Engine Optimization)

○ ●

Serviços na web

Especificam informações sobre o documento antes da renderização do conteúdo ○

Geralmente são informações que não serão exibidas na tela

○

Ex: descrição, autor, palavras chaves, última data de modificação

<meta charset="UTF-8"> <meta name="description" content="Personal Info Page"> <meta name="keywords" content="John, Wayne, movies, hollywood"> <meta name="author" content="Richard"> ● Quando usada para metadados descritivos, possui duas propriedades, "name" e "content" ○

Representa o nome da característica e seu valor

○

O interpretador (seja do navegador, seja do SEO ou qualquer outro) obterá o seguinte resultado: author=John

<meta name="author" content="John">

48

●

Também podem ser configurada com informações proprietárias ○

Muito provavelmente, apenas a empresa proprietária conseguirá interpretar a informação

○

Ex: informações referentes a configurações de dispositivos móveis da Apple

<meta name="meta-apple-mobile-web-app-status-bar-style" content="black"> 4.1.2.1

Valor

author

description

keywords

Atributo name <meta>

Descrição

Nome do autor <meta name="author" content="My Name">

Descrição da página, geralmente utilizado por buscadores na exibição de seus resultados <meta name="description" content="My site does">

Lista de palavras chaves separadas por vírgulas, geralmente usado por buscadores para identificar o conteúdo da página <meta name="keywords" content="dvd, purchase, store, movies">

49

EP: 1. 2.

<meta> Crie um arquivo de nome "meta.html" Adicione a estrutura básica HTML, com título: Página de São Paulo

3.

Adicione ainda o texto em : São Paulo ganhará uma nova canção...

4.

Salve e teste a.

Perceba que os caracteres do título e do corpo não foram exibidos corretamente

5.

Adicione o seguinte código em : <meta charset="UTF-8">

6.

Salve e repita o teste a.

7.

Verifique se os caracteres estão incorretos

Adicione o metadado referente ao autor: <meta name="author" content="John">

8.

Salve e teste a.

9.

Perceba que nenhuma mudança visual ocorreu para o usuário

Adicione os demais metadados descritivos: a.

Descrição

b.

Palavras chaves

50

4.1.2.2

Demais Atributos de <meta>

Atributo

Valor

Descrição

charset

utf-8

Define o "encoding" da página

content

Texto

Conteúdo relativo ao valor utilizado em "name"

http-equiv

content-type default-style refresh

Informação do "header" (informação e valor) da requisição HTTP quando a página é invocada pelo navegador

name

application-name author description generator keywords

Especifica o nome do metadado

51

4.1.2.3

Atributo http-equiv <meta>

Valor

Descrição

Define o "encoding" da página, apesar de não estar depreciado recomenda-se usar a opção "charset" ou invés deste formato content-type <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

refresh

Especifica o intervalo de tempo em segundos no qual o navegador deve atualizar a página <meta http-equiv="refresh" content="30">

EP:

http-equiv

1.

Crie um arquivo de nome "http_equiv.html"

2.

Adicione a estrutura HTML básica

3.

Adicione a "tag" <meta> com o seguinte atributo: <meta http-equiv="refresh" content="2">

4.

Salve e teste a.

Perceba a atualização a cada 2 segundos

52

4.1.2.4 ●

Atributo charset <meta>

Define o "encoding" do documento ○

Permite que os caracteres usado na página sejam exibidos corretamente

○

Conjunto de caracteres de um idioma

○

Ex: a á à ã â A Á À Ã Â

4.1.2.5 ●

●

Encoding

Conjunto de caracteres ○

Latinos

○

Japoneses

○

Árabes

○

Cirílicos

Evolução: ASCII → ANSI → ISO-8859-1 → UTF-8

●

●

HTML4 utilizava o ISO-8859-1 ○

Maioria dos países utilizava o este conjunto de caracteres

○

Muito similar ao ANSI, que possui 32 caracteres adicionais

HTML5 deve ser usado o UTF-8 ○

Mais abrangente para outros idiomas

○

Abrange quase todos os caracteres, potuações e símbolos no mundo

4.1.2.6 ●

ISO e UTF

ISO ○

International Standards Organization

○

Organização que define os conjuntos de caracteres padrões para os diferentes alfabetos

53

●

EP: 1.

UTF ○

Unicode Transformation Format

○

Tem maior utilização e vem substituindo o ISO

○

Os primeiros 256 caracteres UTF correspondem aos 256 ISO

Econding Navegue para o endereço abaixo e verifique os caracteres disponíveis para ASCII a.

Perceba a pequena quantidade de caracteres disponíveis e a ausência dos acentuados (ã Ã, é É, etc)

http://www.w3schools.com/charsets/ref_html_ascii.asp 2.

Verifique o valor "Entity Name" do sinal de maior > e menor < para ANSI e para ISO-8859-1/UTF-8: http://www.w3schools.com/charsets/ref_html_ansi.asp http://www.w3schools.com/charsets/ref_html_entities_4.asp

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 + ; & + # + número + ;

54

●

●

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"
Idealmente deve-se utilizar o nome da entidade ao invés do número para facilitar a leitura do código

EP:

Entidades de Encoding

1.

Crie um novo arquivo de nome "entities.html"

2.

Adicione a estrutura básica a.

3.

Lembre-se sempre de utilizar UTF-8 na estrutura básica

Adicione o seguinte texto em :

4.

Salve e teste, verificando se o texto "
" foi exibido

5.

Altere o código de para:

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.

9.

Adicione os nomes e os símbolos dos naipes de baralho dentro de : a.

♠ espadas

b.

♣ paus

c.

♥ copas

d.

♦ ouros

Escreva as entidades a seguir e descubra a palavra:
Coração

55

4.1.3 ●

Possui dois atributos (além dos globais): ○

"media" → especifica qual a mídia que será aplicado o estilo

○

"type" → "mime type"

EP:

Salve e teste

7.

Altere a "tag" Salve e teste a. Imprima a página e verifique a cor do texto

4.1.4 ●

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

57

Atributo

Valor

Descrição

href

URL

Especifica o caminho do arquivo externo

media

all print

Define em qual aparelho a arquivo externo será exibido

rel

icon stylesheet

type

text/css

Valor obrigatório que define qual o relacionamento do documento com o arquivo externo

Opcional no HTML5, especifica o "MIME type" do arquivo externo

EP: 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 : a.

Coloque o caminho correto como valor de "href"

4.

Salve e teste a.

5.

Observe o ícone ao lado do título da página

Crie um novo arquivo de nome "link.css" e "link.html"

58

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"
em :
My Header

9.

Adicione a "tag" em :

10.

Salve e teste

11.

Adicione o atributo "media":

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

●

Pode ser usado nas "tags" e 59

●

Recomendado utilizar no final da "tag" ○

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" para que possa funcionar corretamente

<script> alert('Hello HTML5'); <script type="text/javascript" src="code.js">

Atributo

Valor

Descrição

charset

pt-br

Especifica o "encoding" do arquivo externo

src

URL

Especifica o caminho do arquivo externo

type

text/javascript

Opcional no HTML5, especifica o "MIME type" do arquivo externo

60

EP:

<script>

1.

Crie um arquivo de nome "script.html"

2.

Adicione o seguinte código dentro de : <script> alert('Hello HTML5');

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('
Hello from JS
'); 6.

Salve o arquivo e volte para o arquivo HTML "script.html"

7.

Adicione o seguinte código em : <script type="text/javascript" src="script.js">

8.

Salve e teste a.

Perceba o texto escrito via JavaScript com a formatação "h1"

61

4.1.6

EP:

3.

4.

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"

Habilite novamente o JavaScript do navegador

62

63

Capítulo 5:

5.1 ●

Sobre São as "tags" que marcam algum conteúdo ○

●

Tags de Exibição

Será visualizado pelo usuário quando acessar a página HTML

Muitas delas possuíam atributos de estilo (como alinhamento de texto, cor de fundo, etc) nas versões anteriores do HTML

5.2 ●

○

Estes atributos foram depreciados no HTML5

○

Idealmente, estilos devem ser feitos apenas com CSS

Block & Inline São as formas mais comuns de exibição HTML ○

●

Podem ser modificadas através de CSS

Define como o próximo conteúdo seguinte a “tag” será exibido ○

Na mesma linha e na sequência após o fechamento da “tag”

○

Próxima linha após o fechamento da “tag”

5.2.1 Block ●

Ocupa toda a largura disponível, limitado ao seu "parent elment"

●

Conteúdo seguinte à "tag" estará na próxima linha

5.2.2 Inline ●

Ocupa somente o espaço necessário para sua exibição

●

Conteúdo seguinte à "tag" estará na sequência

64

5.3

●

"Corpo" do documento HTML

●

Contêiner para quase todos os elementos HTML

●

Pode conter elementos que serão renderizados na tela ou não ○

5.4

Principal uso são para elementos a serem exibidos pelo navegador

...

●

Marca conteúdo que será exibido como cabeçalho (título) da página

●

Não possui atributos (exceto globais)

●

Navegadores podem renderizar o texto de forma diferente

●

Em geral são textos em negrito

●

Tamanho da fonte varia conforme a "tag" utilizada

●

EP:

○

Quanto menor o número da "tag" maior o texto

○

Ex:
tem o tamanho da fonte maior que

Exibição “block”

...

1.

Crie um novo arquivo de nome "h1.html"

2.

Dentro da "tag" adicione as seguintes "tags":
My H1 text

My H2 text

My H3 text

My H4 text

My H5 text

My H6 text

65

3.

5.5


●

Define um parágrafo que será exibido na página

●

Ênfase pode ser dada combinado outras "tags" com exibição “inline”:

●

○

→ negrito

○

→ itálico

○

→ diminui o texto

Exibição “block”
This is a bold and italic text

EP: 1.

No arquivo de nome "paragraph.html" e adicione o seguinte código
My first paragraph.

2.


3.

Adicione ênfase no texto "first" adicionando as "tags":
My first paragraph.

4.

Salve e teste

5.

Adicione as demais "tags" de ênfase no texto "first", testando uma por vez: a.

b.

66

5.6 ●

●

Marca algum conteúdo ○

Não aplica qualquer mudança visual no elemento

○

Ideal para marcar um conteúdo que receberá um estilo

Pode substituir as “tags” de ênfase, por permitir estilo com maior flexibilidade ○

●

5.7

Não faz sentido marcar com e remover o negrito !

Exibição “inline”

●

Marca o elemento que será tachado

●

Exibição “inline” ~~This text are going to be striked~~

5.8

_{●

Marca o elemento que será subscrito

●

Exibição “inline” This paragraph has _subscripted text

5.9 ●

^{Marca o elemento que será elevado ○

●

Ex: exibição de raíz quadrada

Exibição “inline” This paragraph has ^{superscripted} text

67

5.10 ●

Marca o elemento que será pré formatado

●

Preserva espaços e quebra de linha

●

Utiliza a fonte “Courier”

●

Exibição “inline” This text

is

pre

formated

EP:

Textos

1.

Crie um arquivo de nome “texts.html”

2.

Adicione o seguinte conteúdo, salve e teste: Paragraph is block display
but span is inline display and the next content will be placed high after the last one

3.

Logo abaixo do último código adicione:

This text are going to be striked This paragraph has _subscripted text
This paragraph has ^{superscripted} text
4.

Salve e teste

5.

Finalmente, adicione o código abaixo, salve e teste: 68

This text is pre

formated

5.11 ●

Usada para carregar imagens no documento HTML ○

Podem ser recursos locais ou externos

○

Não são tecnicamente inseridas no documento, um "link" e um espaço para exibição são criados

●

Não possui "tag" de fechamento

●

Exibição “inline”

●

Pode receber os atributos de largura e altura ○

Podem distorcer, serrilhar ou perder qualidade visual da imagem

○

Se utilizado apenas um dos atributos de tamanho, a imagem manterá a proporção visual

69

Atributo

Valor

alt

My text

height

10

src

URL

usemap

#myMapTagId

width

10

EP:

Descrição

Texto alternativo para a imagem exibido antes do carregamento

Define em "pixels" a altura da imagem

Endereço URL para a imagem

Define as coordenadas das áreas clicáveis de uma imagem

Define em "pixels" a largura da imagem

1.

Crie o arquivo "img.html" com a estrutura básica

2.

Adicione em a "tag" conforme abaixo:

3.

alt="Random Food Image"> Salve e teste a.

4.

Atualize a página e perceba a imagem mudando randomicamente

Adicione o atributo de largura e altura com um valor para distorcer a imagem: a.

A imagem utilizada possui 900 pixels de altura e largura 70

width="500" height="50"> Remova o atributo "height", salve e teste a.

6.

Repita o teste removendo "width" e mantendo apenas "height"

(Opcional) Adicione em a "tag" <meta> para que a página seja atualizada automaticamente a cada 3 segundos <meta http-equiv="refresh" content="3">

5.12

71

EP:

3.

Salve e teste

4.

Baixe o ícone do endereço abaixo na mesma pasta do arquivo "button.html": http://iconfindr.com/1eWqAml

5.

Renomeie o arquivo para "icon_save_48x48.png"

6.

No arquivo HTML adicione o ícone:

7.

Salve e teste

8.

Utilize o atributo "width" da imagem e reduza o tamanho do ícone para 16 pixels:

9. 10.

Salve e teste Utilize o atributo "autofocus" do botão: a.

Mantenha o código anterior do botão}}

HTML5_CSS3

<iframe>

:

My Page Header

My page footer

My index page content

11.

Salve e teste

12.

Altere o conteúdo de “header.html” para:

Changed Header

no arquivo HTML:

First Header (element selector)

My Title

:

Second Header (id selector)

My Big Title

My Small Title

com a seguinte configuração:

Third Header (class selector)

Fourth Header (universal selector)

Adicione no arquivo HTML outras “tags”:

Fifith Header (universal selector)

Sixth Header (universal selector)

H1 Header with "title" class

H2 Header with "title" class

H3 Header with "title" class

H1 Header with "title" class

H2 Header with "title" class

H3 Header with "title" class

HTML5_CSS3

Recommend Documents

marca o texto com o formato para cabeçalho ○ Se não for fechada o formato de cabeçalho será aplicado à tudo mais que estiver na sequência

My Header

My Header

My Header This is my content 6. 7. Salve, teste e perceba que todo o texto recebeu o formato de cabeçalho Desfaça o passo anterior e mantenha a "tag" de fechamento:

My Header

possui o atributo "align" que configura o estilo do alinhamento do texto:

My Header

My Header

Parent Tags:

Idealmente deve-se utilizar o nome da entidade ao invés do número para facilitar a leitura do código

EP: Entidades de Encoding 1. Crie um novo arquivo de nome "entities.html" 2. Adicione a estrutura básica a. 3. Lembre-se sempre de utilizar UTF-8 na estrutura básica Adicione o seguinte texto em :

4. Salve e teste, verificando se o texto "

" foi exibido 5. Altere o código de para:

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. 9. Adicione os nomes e os símbolos dos naipes de baralho dentro de : a. ♠ espadas b. ♣ paus c. ♥ copas d. ♦ ouros Escreva as entidades a seguir e descubra a palavra:

Coração

em :

My Header

Hello from JS

...

tem o tamanho da fonte maior que

Exibição “block”

...

1. Crie um novo arquivo de nome "h1.html" 2. Dentro da "tag" adicione as seguintes "tags":

My H1 text

My H2 text

My H3 text

My H4 text

My H5 text

My H6 text

<iframe>

:

My Page Header

My page footer

My index page content

11. Salve e teste 12. Altere o conteúdo de “header.html” para:

Changed Header

no arquivo HTML:

First Header (element selector)

My Title

:

Second Header (id selector)

My Big Title

My Small Title

com a seguinte configuração:

Third Header (class selector)

Fourth Header (universal selector)

Adicione no arquivo HTML outras “tags”:

Fifith Header (universal selector)

Sixth Header (universal selector)

H1 Header with "title" class

H2 Header with "title" class

H3 Header with "title" class

H1 Header with "title" class

H2 Header with "title" class

H3 Header with "title" class

marca o texto com o formato para cabeçalho ○

Se não for fechada o formato de cabeçalho será aplicado à tudo mais que estiver na sequência

My Header This is my content

6. 7.

Salve, teste e perceba que todo o texto recebeu o formato de cabeçalho Desfaça o passo anterior e mantenha a "tag" de fechamento:

EP:

Entidades de Encoding

1.

Crie um novo arquivo de nome "entities.html"

2.

Adicione a estrutura básica a.

3.

Lembre-se sempre de utilizar UTF-8 na estrutura básica

Adicione o seguinte texto em :

4.

Salve e teste, verificando se o texto "

" foi exibido

5.

Altere o código de para:

1.

Crie um novo arquivo de nome "h1.html"

2.

Dentro da "tag" adicione as seguintes "tags":

11.

Salve e teste

12.

Altere o conteúdo de “header.html” para: