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-browserCapitulo 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
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 <head> 4.1.1 <title> 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.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 <p> EP: <p> 5.6 <span> 5.7 <s> 5.8 <sub> 5.9 <sup> 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.2 <article> 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.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> EP: <audio> 13.1.4 <source> EP: <source> 13.2 Vídeo
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
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
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
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
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
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
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
● World Wide Web, é criado para facilitar a comunicação e integração na rede
1.2 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
1.3 Google em 1997
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
● 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
1.6 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
Linguagem Servidor
PHP Apache
Java Tomcat, JBoss, GlassFish
.NET / ASP Windows Server
CFML ColdFusion
Ruby Puma, Phusion Passenger
JavaScript NodeJS
1.7 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
● Segurança das informações transferidas é baixa
○ Existe a opção de HTTPS para maior segurança ■ Dados criptografados
■ Necessário o uso de certificados digitais ● Toda requisição possui "headers"
○ Cabeçalhos com informações sobre a requisição e os dados transmitidos 1.8 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
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
○ 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
1.9 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
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.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
1.15 Navegadores ● IE (Internet Explorer) ● Firefox ● Opera ● Safari ● Chrome EP: Navegadores
1. Navegue para os endereços abaixo e verifique as estatísticas: a. Navegadores http://www.w3schools.com/browsers/browsers_stats.asp b. Telas http://www.w3schools.com/browsers/browsers_display.asp c. 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
Engine Browser
Blink Chrome e Opera
Webkit Safari
Gecko Firefox
Trident Internet Explorer
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
Capitulo 2:
Introdução à Linguagem
2.1 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
2.2 Sublime Text
● Um dos editores mais utilizados pela comunidade de desenvolvedores ○ Para diversas linguagens de programação
● Multi plataforma
○ Windows, Mac e Linux
● Leve e versátil com relação as funcionalidades
○ 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: Sublime Text
1. Baixe e instale o Sublime Text 3 a. Busque no Google o endereço 2. 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 3. 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"
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. Repita os passos 5 e 6, porém selecione "Hide Console" 9. 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. Uma lista com todos os pacotes disponíveis para o Sublime será exibida 12. 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. Veremos as funcionalidades do Emmet posteriormente
13. 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
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 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"
2.5 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>
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
○ "Case insensitive"
○ Maioria das "tags" HTML5 tem o par de fechamento
2.7 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
2.8 Aninhamento das Tags <!doctype html> <html> <head> <title>Título do Documento</title> </head> <body>
Tudo que será visualizado no navegador </body>
</html>
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
<html><head><title>My Title</title></head><body>My content</body></html>
2.9.2 Código com Indentação <html> <head> <title>My Title</title> </head> <body> My content </body> </html> 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
<!doctype html>
3. Abaixo da declaração anterior, crie a "root tag" HTML: <!doctype html>
<html> </html>
4. Dentro de <html> aninhe as "tags" <head> e <body>: a. Atenção ao aninhamento e a indentação <!doctype html>
<html>
<head></head> <body></body> </html>
<!doctype html> <html>
<head></head>
<body>My first page !</body> </html>
6. Salve e teste no navegador
7. Adicione a "tag" <title> como filha de <head>:
a. Altere a indentação para melhor leitura do código <head>
<title>Oh yeah!!!</title> </head>
8. Salve e teste novamente no navegador
9. Altere o texto de <body> adicionando quebras de linhas entre as palavras com a tecla ENTER: <body> My first page ! </body>
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" <br>
<body>My<br> first<br> page !</body> 12. Repita o último teste
2.10 Comentários
navegador
● São úteis para descrever alguma funcionalidade ● Comentário HTML é multilinhas
○ Tudo que estiver dentro das "tags" de abertura e fechamento será comentado
<!-- Single line comment... --> <!--
Multi line comment... -->
<!doctype html> <html>
<!-- Comentário, pode ser colocado em qualquer lugar --> <head>
<title>Título do Documento</title> </head>
<body>
Tudo que será visualizado pelo usuário </body>
</html>
EP: Comentários
1. Abra o arquivo "basic.html" do EP anterior
2. 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
Capítulo 3:
Elementos e Atributos
3.1 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" <element> não existe
<element attribute="value">Text</element>
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" <h1> 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
EP: Elementos
1. Crie um novo arquivo de nome "elements.html" 2. Adicione a estrutura HTML essencial:
<!doctype html> <html>
<body> </body> </html>
3. Dentro da "tag"<body> adicione o seguinte código: <body>
<h1>My Header</h1> This is my content </body>
4. Salve e teste no navegador
5. Remova a "tag" de fechamento </h1>: <body>
<h1>My Header This is my content </body>
6. Salve, teste e perceba que todo o texto recebeu o formato de cabeçalho 7. Desfaça o passo anterior e mantenha a "tag" de fechamento:
<body>
<h1>My Header</h1> This is my content </body>
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" <h1> possui o atributo "align" que configura o estilo do alinhamento do texto:
<h1 align="center">My Header</h1>
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
● HTML 5: ○ contenteditable ○ data-* ○ draggable 3.5 Elementos e Atributos Item Exemplo Elemento Tag
Atributo Configuração de uma tag
EP: Elementos e Atributos
1. 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
○ Regras hierárquicas
○ Acesso e manipulação dos objetos
● Todas as "tags" possuem o conceito de "pai" e "filho" <html> <body> <h1>My Header</h1> </body> </html> Child Tags:
<html> tem como filho <body> <body> tem como filho <h1>
Parent Tags:
<h1> tem como pai <body> <body> tem como pai <html>
● 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 <body>
○ Fortemente recomendado o uso de <!doctype html> <html>
<body> </body> </html>
● 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 <head>
<html>
<head>
<title>My Page Title</title> </head> <body> My page content... </body> </html> 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
<!doctype html> <html>
<head>
<title>My Page Title</title> </head>
<body>My page content...</body> </html>
EP: Estrutura HTML
1. Crie um arquivo de nome "structure.html"
2. Adicione a estrutura essencial HTML com conteúdo: <html>
<body>
My page content... </body>
</html>
3. Salve e teste no navegador 4. Adicione a instrução "doctype":
<!doctype html> <html>...
5. 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)
6. Adicione <head> e <title> dentro de <html> <!doctype html> <html> <head> <title>My Title</title> </head>... </html>
7. Salve e teste, identificado o título na aba do navegador
8. Volte ao código dentro de <body> e adicione quebras de linha entre as palavras: <body> My page content... </body> 9. Salve e teste
10. Volte o código da forma inicial e adicione <br> <body> My<br>page<br>content... </body> 11. Salve e teste 3.8 Estrutura Básica HTML
Tag Descrição Conteúdo do Elemento
<html>
"Root tag" do documento HTML define contêiner para a árvore de elementos DOM
Tudo, exceto outra "tag" HTML
<head>
Inclui o "cabeçalho" do documento como título, metadados, estilos e "scripts"
<title> <style> <base> <link> <meta> <script> <noscript>
<body> Conteúdo do documento Tudo, exceto as anteriores, porém pode incluir a "tag" de "script"
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.
Capítulo 4:
Tags de Cabeçalho
4.1 <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</title> </head> </html>
4.1.2 <meta>
● A "tag" <meta> define os metadados do documento ○ Aninhada dentro da "tag" <head>
● 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 <head>
<meta charset="UTF-8">
<meta name="description" content="Personal Info Page"> <meta name="keywords" content="John, Wayne, movies, hollywood">
<meta name="author" content="Richard"> </head>
● 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
● 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 Atributo name <meta>
Valor Descrição
author Nome do autor <meta name="author" content="My Name">
description Descrição da página, geralmente utilizado por buscadores na exibição de seus resultados <meta name="description" content="My site does">
keywords
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">
EP: <meta>
1. Crie um arquivo de nome "meta.html"
2. Adicione a estrutura básica HTML, com título: <!doctype html>
<html> <head>
<title>Página de São Paulo</title> </head>
</html>
3. Adicione ainda o texto em <body>: <body>
São Paulo ganhará uma nova canção... </body>
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 <head>: <meta charset="UTF-8">
6. Salve e repita o teste
a. Verifique se os caracteres estão incorretos 7. Adicione o metadado referente ao autor:
<meta name="author" content="John"> 8. Salve e teste
a. Perceba que nenhuma mudança visual ocorreu para o usuário 9. Adicione os demais metadados descritivos:
a. Descrição
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
4.1.2.3 Atributo http-equiv <meta>
Valor Descrição
content-type
Define o "encoding" da página, apesar de não estar depreciado recomenda-se usar a opção "charset" ou invés deste formato <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
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
● UTF
○ Unicode Transformation Format
○ Tem maior utilização e vem substituindo o ISO
○ Os primeiros 256 caracteres UTF correspondem aos 256 ISO
EP: Econding
1. 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 + ;
● 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
Capítulo 5:
Tags de Exibição
5.1 Sobre● São as "tags" que marcam algum conteúdo
○ 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
○ Estes atributos foram depreciados no HTML5
○ Idealmente, estilos devem ser feitos apenas com CSS
5.2 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
5.3 <body>
● "Corpo" do documento HTML
● Contêiner para quase todos os elementos HTML
● Pode conter elementos que serão renderizados na tela ou não
○ Principal uso são para elementos a serem exibidos pelo navegador
5.4 <h1>...<h6>
● 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 ○ Quanto menor o número da "tag" maior o texto ○ Ex: <h1> tem o tamanho da fonte maior que <h2> ● Exibição “block”
EP: <h1>...<h6>
1. Crie um novo arquivo de nome "h1.html"
2. Dentro da "tag" <body> adicione as seguintes "tags": <h1> My H1 text </h1>
<h2> My H2 text </h2> <h3> My H3 text </h3> <h4> My H4 text </h4> <h5> My H5 text </h5>
3. Salve e teste no navegador
5.5 <p>
● Define um parágrafo que será exibido na página
● Ênfase pode ser dada combinado outras "tags" com exibição “inline”: ○ <strong> → negrito
○ <em> → itálico
○ <small> → diminui o texto ● Exibição “block”
<p>
This is a
<strong><em>bold and italic</em></strong> text </p>
EP: <p>
1. No arquivo de nome "paragraph.html" e adicione o seguinte código <p>My first paragraph.</p>
2. Salve e teste no navegador
3. Adicione ênfase no texto "first" adicionando as "tags": <p>My <strong>first</strong> paragraph.</p> 4. Salve e teste
5. Adicione as demais "tags" de ênfase no texto "first", testando uma por vez: a. <em>
5.6 <span>
● 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 ○ Não faz sentido marcar com <strong> e remover o negrito !
● Exibição “inline”
5.7 <s>
● Marca o elemento que será tachado ● Exibição “inline”
<s>This text are going to be striked</s>
5.8 <sub>
● Marca o elemento que será subscrito ● Exibição “inline”
<p>This paragraph has <sub>subscripted</sub> text</p>
5.9 <sup>
● Marca o elemento que será elevado ○ Ex: exibição de raíz quadrada ● Exibição “inline”
<p>
This paragraph has
5.10 <pre>
● Marca o elemento que será pré formatado ● Preserva espaços e quebra de linha ● Utiliza a fonte “Courier”
● Exibição “inline” <pre> This
text is pre formated
</pre> EP: Textos
1. Crie um arquivo de nome “texts.html”
2. Adicione o seguinte conteúdo, salve e teste: <p>Paragraph is block display</p>
<span>but span is inline display and the</span>
<span>next content will be placed high after the last one</span>
3. Logo abaixo do último código adicione:
<s>This text are going to be striked</s>
<p>This paragraph has <sub>subscripted</sub> text</p> <p>
This paragraph has
<sup>superscripted</sup> text </p>
4. Salve e teste
<pre> This text is pre formated </pre> 5.11 <img>
● 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
<img src="myImage.jpg" alt="My Image" height="42" width="42">
Atributo Valor Descrição
alt My text Texto alternativo para a imagem exibido antes do carregamento
height 10 Define em "pixels" a altura da imagem
src URL Endereço URL para a imagem
usemap #myMapTagId Define as coordenadas das áreas clicáveis de uma imagem
width 10 Define em "pixels" a largura da imagem
EP: <img>
1. Crie o arquivo "img.html" com a estrutura básica 2. Adicione em <body> a "tag" <img> conforme abaixo:
<img
src="http://lorempixel.com/900/900/food" alt="Random Food Image">
3. Salve e teste
a. Atualize a página e perceba a imagem mudando randomicamente 4. Adicione o atributo de largura e altura com um valor para distorcer a imagem:
<img
src="http://lorempixel.com/900/900/food" alt="Random Food Image"
width="500" height="50"> 5. Remova o atributo "height", salve e teste
a. Repita o teste removendo "width" e mantendo apenas "height" 6. (Opcional) Adicione em <head> a "tag" <meta> para que a página seja
atualizada automaticamente a cada 3 segundos <meta http-equiv="refresh" content="3">
5.12 <button>
● Marca o conteúdo de que receberá a formatação visual e a funcionalidade de um botão
○ Não é recomendado seu uso dentro de um formulário, devido ao problema de "cross-browser"
○ Existem botões específicos para formulário ● Exibição “inline”
● Pode receber texto e imagem
○ Principal diferença para os botões de formulário
○ Apesar de existir o atributo "align", alinhamento deve ser feito via CSS ○ Apesar de poder utilizar <img> com o botão, é mais eficiente aplicar a
imagem como fundo do botão através de CSS <button>Save</button>
<button>
<img src="delete_icon.png"> Delete
EP: <button>
1. Crie um arquivo de nome "button.html" 2. Adicione em <body> o seguinte código:
<button>Save</button> 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:
<button>
<img src="icon_save_48x48.png">Save </button>
7. Salve e teste
8. Utilize o atributo "width" da imagem e reduza o tamanho do ícone para 16 pixels: <button>
<img src="icon_save_48x48.png" width="16"> Save
</button> 9. Salve e teste
10. Utilize o atributo "autofocus" do botão: a. Mantenha o código anterior do botão <button autofocus>
11. Salve e teste
a. Perceba que o botão recebe foco quando a página é carregada b. Pressione a barra de espaços do seu teclado
12. Repita o teste com o atributo "disabled" do botão
5.13 Listas
● Elementos de lista são bastante úteis para criar desde lista simples até menus ○ Quando estilizados, podem perder os marcadores e ficar na horizontal
para simular um menu
● Podem receber qualquer elemento HTML
○ Podem ter outras "tags" aninhadas para criar uma lista de produtos com imagens e descrição, tanto na horizontal como vertical, conforme o código de estilo
● HTML possui duas "tags" para estilos ○ <ol> → "ordered list"
○ <ul> → "unordered list"
● Cada "tag" define um tipo de marcador diferente
○ O tipo do marcador por sua vez pode ser definido por estilo ○ Ex: letras, números, números romanos, etc
5.13.1 <ol> ● "Ordered List"
● Cria uma lista do tipo ordenada
● Estilo pode ser numérico, alfabético ou número romano ○ Decimais - 1,2,3…(padrão)
○ Alfabético - a,b,c…(minúsculo e maiúsculo) ○ Romanos - i, ii, iii...(minúsculo e maiúsculo)
● Possui ainda o atributo "reversed" que reverte a numeração
○ Numeração será em ordem descendente ao invés de ascendente ○ Não altera a ordem dos itens
5.13.2 <ul> ● "Unordered List"
● Cria uma lista do tipo desordenada ● Estilo podem ser "bullets"
○ Disco (padrão) ○ Quadrados ○ Círculo
5.13.3 <li>
● "Tag" responsável por criar o "list item"
○ Tanto <ol> quanto <ul> devem possuir <li> como "child element" ● O tipo do marcador (números, "bullets") é definido pelo "parent element"
EP: Listas
1. Crie um novo arquivo de nome "list.html" 2. Adicione o seguinte código HTML:
<ol>
<li>Ordered Item 1</li> <li>Ordered Item 2</li> </ol>
3. Salve e teste
4. Adicione o atributo "reversed" em <ol> <ol reversed>
<li>Ordered Item 1</li> <li>Ordered Item 2</li> </ol>
5. Salve e teste
a. Perceba que os itens permaneceram na mesma posição 6. Adicione o código abaixo do anterior:
<ul>
<li>Unordered Item 1</li> <li>Unordered Item 2</li> </ul>
5.14 <div>
● Contêiner para seu conteúdo
● Não possui qualquer alteração visual ○ Exceto quando estilizado
● Estilos podem ser usados para aplicação de cores, imagens de fundo, posicionamento e layout
○ Todo o conteúdo do elemento acompanhará o posicionamento da <div> "pai"
● Deve-se ter o cuidado de utilizar somente a quantidade necessária
○ Por não implicar em qualquer mudança visual, é comum existirem mais "divs" do que as necessárias
○ Eleva o consumo de processamento e memória, principalmente quando a tela for redimensionada (navegador tem de calcular o posicionamento de cada elemento)
● Geralmente recebem o atributo "id" com os valores "container", "main", "header", "content", "footer"
○ Por serem bastante utilizadas para posicionamento e layout ● Exibição “block”
EP: <div>
1. Abra o arquivo "list.html" 2. Envolva <ul> com <div>:
a. Mantenha todo o código anterior de <ul> <div>
<ul> … </ul> </div>
5.15 <a>
● Faz a marcação de âncora
○ Tanto dentro da própria página, como para uma página externa
● Seu atributo "target" configura se uma nova página (ou aba do navegador) será aberta ou não
○ "_self" → na própria página (padrão) ○ "_blank" →nova página
● As cores padrão de um "link" são: ○ Azul → não visitado
○ Violeta → visitado
○ Vermelho → ativo (clique ou "tab") ● Exibição “inline”
Atributo Valor Descrição
href #elementId URL Endereço externo no qual o "hyperlink" está direcionando ou "id" de um elemento interno HTML
target _self _blank
Especifica onde abrir o documento no qual o "link" direciona
5.15.1 Navegação
● O Atributo "href" pode receber o valor de um endereço
○ Pode ser uma página do seu projeto ou uma página na Internet <a href="index.html">Home</a>
<a href="http://www.google.com">Google</a> 5.15.2 Âncora
● O atributo "href" também pode receber o "id" de um elemento HTML na própria página criando uma âncora
○ Faz a rolagem (“scroll”) da página até o ponto em que o elemento estiver, desde que a barra de rolagem esteja presente
○ Deve ser acompanhado do caractere # com o "id" ○ Ex: href="#elementId"
<a href="#moreInfo">More Info</a> ...
<p id="moreInfo">More info is here...</p>
5.15.3 target
● Especifica onde abrir o documento no qual o "link" direciona ○ _self → no próprio documento
○ _blank → em uma nova página (ou aba do navegador) ○ _parent → "parent frame"
○ _top → todo o corpo da janela ○ "nome do iframe"
EP: <a>
1. Crie o arquivo de nome "anchor.html" insira o seguinte código <a href="http://www.google.com">Google</a> 2. Salve e teste
3. Adicione o atributo "target" com o valor "_self" <a href="http://www.google.com" target="_self">Google</a>
4. Nenhuma mudança ocorreu pois usamos o padrão 5. Mude o valor de "target" para "_blank":
target="_blank" 6. Salve e teste
7. Insira “lorem ipsum”, após o código atual, o suficiente para que as barras de rolagem apareçam
8. Adicione como última “tag” de <body> (antes do fechamento) a “tag” <p>: <p id="moreInfo">More info is here...</p>
9. Como primeira “tag” de <body> (após abertura) adicione: <a href="#moreInfo">More Info</a>
10. Salve e teste, clicando em “More info”
a. Se necessário, redimensione a janela para gerar barras de rolagem 11. (Opcional) Faça a âncora reversa
Capítulo 6: Tags Semânticas
6.1 Sobre● Criadas para uso no HTML5
○ Navegadores antigos não as reconhecem e simplesmente as ignoram ○ Não é recomendado seu uso para aplicação de estilos, posicionamento
ou layout
● Permitem a criação de "sites semânticos" ○ Informam o tipo de conteúdo existente ○ Ex: conteúdo de cabeçalho do site
● Importantes para indexação das ferramentas de busca
● Praticamente não possuem nenhuma mudança visual para o usuário ○ Exceto as "tag" <mark> e <figurecaption>
○ Dependendo do navegador as demais "tags" podem ficar posicionadas de forma ligeiramente diferente
6.2 Tags
Tag Agrupa Informações
<header> Cabeçalho
<section> Conteúdos em geral
<article> Conteúdos não relacionados à página
<aside> Barra lateral da página, esquerda ou direita (pode conter outras "tags" semânticas, como <nav>, <article>, <figure>)
<hgroup> "Tags" de cabeçalho <h1>...<h6>
<details> Detalhes de algum conteúdo
<figure> Imagem de qualquer tipo (gráficos, thumbs, fotos, etc)
<figurecaption> Aninhada dentro de <figure>, exibe informação sobre a imagem
<footer> Rodapé
<mark> Marca o texto (similar a uma caneta marca texto)
<time> Data, hora, período, momento de algum conteúdo
6.2.1 <header>
● "Cabeçalho" a ser exibido na página HTML
○ Geralmente são usadas "tags" relativas a marcação de "cabeçalhos" (<h1...h6>) e a navegação (<nav>)
● Utilizado por ferramentas de busca para indexar a página
○ Muitas vezes o logotipo da empresa é definido como "background" de <h1>, para otimizar a indexação da página (SEO)
<header>
<h1>My Company</h1> <nav>...</nav>
</header> 6.2.2 <article>
● Define blocos de informações independentes
○ Muitas vezes independente do conteúdo da própria página ○ Ex: blog, fórum, notícias, etc
<article>
<h2>Latest News</h2> <p>...</p>
