introdução ao desenvolvimento web

Prévia do material em texto

IDW0 
Professor: 
Roberto Cardoso 
 
Disciplinas: 
IHM – Interface Homem Máquina / Internet / IDW0 
 
Outras atividades 
- Consultor em Marketing Digital pela Enfática Comunicação 
& Marketing; 
-planejamento e execução de campanhas online e gestão 
de conteúdo para mídias sociais; 
-Programa “Dicas de Marketing” OnlineFM; 
- Orientador de estágio da Faeterj-Rio. 
 
 
Internet, origem e evolução 
 
 
 
1969 
Internet, origem e evolução 
 
Guerra Fria 1945-1991 (Ameaça Nuclear) 
Protagonistas: Estados Unidos e União Soviética. 
 
Mudanças: (1969) 
O Exército dos EUA, preocupado com a segurança do seu 
sistema de informações cria a "DARPA“ (Defense Advanced 
Research Projects) que tem por objetivo o desenvolvimento 
de tecnologia estratégica no período da guerra fria. 
Internet, origem e evolução 1/2 
 
 
 
1969 
Problema: 
 
A rede de informação militar precisava ter seus 
dados 
protegidos mesmo no caso de destruição de bases 
específicas. 
 
 
Surge a necessidade e um sistema descentralizado 
que mantenha-se 
operacional independente de ataques. 
 
 
 
SDS SIGMA7 - UCLA 
1970 
SDS 90 - STANFORD 
PDP10 - UTAH 
IBM370-75- Centro de Matemática LA 
ARPANET 
 
 
 
 Computadores diferentes utilizam não se entendiam. Surge a necessidade da 
 criação de um “idioma” único para que as máquinas pudessem falar entre si. 
 
 É criado o protocolo NCP – Network control protocol. 
(Em 1971 - pelo NWG Network Working Group); 
 
 Outros protocolos são criados de acordo com as necessidades da rede; 
 
 TCP/IP - também chamado de "pilha de protocolos TCP/IP" é um conjunto 
 de protocolos de comunicação entre computadores em rede. É formado por 
 dois procolos o TCP (Transmission Control Protocol - Protocolo de Controle 
 de Transmissão) criado por Robert Elliot Kahn e o IP por Vint Cerf (Internet Protocol – 
 Protocolo de Internet, ou ainda, protocolo de interconexão). 
 
 TCP – Permitiu trabalhar com o tráfego de informações em pacotes; 
 IP – surge para resolver a questão sobre a identificação das máquinas na rede; 
 
 
 
Paradigmas 
 
 
 
Crescimento (1972) 
 
 
 
Crescimento (1977) 
 
 
 
Cenário e Evolução 1/2 
 
A ARPANet ligava os militares e os centros de pesquisa sem ter um 
centro definido ou mesmo uma rota única para as informações, 
visando torná-la indestrutível; 
 
(Início da década de 1970) - universidades e outras instituições que 
faziam trabalhos relacionados com a defesa, tiveram permissão para 
se conectarem à ARPANet e em meados de 1975 existiam 
aproximadamente 100 sites; 
 
(Março de 1972) - Ray Tomlinson desenvolve o software básico de e-
mail, 
pela necessidade dos desenvolvedores da ARPANET de ter um fácil 
mecanismo de coordenação; 
 
 
 
Cenário e Evolução 2/2 
 
 
 
(No final dos anos 70) – A ARPANet havia crescido de forma que seu protocolo 
de comutação de pacotes original, chamado Network Control Protocol (NCP), 
tornou-se inadequado (passa a ser usado o TCP-IP); 
 
A rede fica caótica os EUA gov e militares deixam de tomar conta, a ARPANet 
divide-se e origina a MILNET (1983), para assuntos militares e outra parte 
torna-se pública e tem seu nome alterado para Internet; 
 
(1990) Berners-Lee com a ajuda de Robert Cailliau e um jovem estudante do 
CERN, implementa a primeira comunicação bem-sucedida entre um cliente 
HTTP e o servidor através da internet, Nasce a "WWW - World Wide Web" 
(Rede Mundial de Computadores – Internet); 
 
 
 
 
 
 
Como a Internet viaja no mundo 
http://submarine-cable-map-2014.telegeography.com/ 
 
 
 
Como a Internet viaja no mundo 
http://submarine-cable-map-2014.telegeography.com/ 
 
 
 
A Chegada da Internet no Brasil 1/4 
(Setembro de 1988) - A internet no Brasil inicia suas atividades, 
quando no Laboratório Nacional de Computação Científica 
(LNCC), localizado no Rio de Janeiro, conseguiu acesso à Bitnet, 
através de uma conexão de 9 600 bits estabelecida com a 
Universidade de Maryland ; 
 
Em seguida a Fundação de Amparo à Pesquisa do Estado de São 
Paulo (Fapesp) também é ligada à Bitnet, por meio de uma 
conexão com o Fermi National Accelerator Laboratory (Fermilab), 
em Chicago. 
 
(1995) - A Portaria Interministerial nº 147 cria o Comitê Gestor da 
Internet no Brasil (CGI.br); 
 
 
 
A Chegada da Internet no Brasil 2/4 
(Setembro de 1988) - A internet no Brasil inicia suas atividades, quando 
no Laboratório Nacional de Computação Científica 
 
(LNCC), localizado no Rio de Janeiro, conseguiu acesso à Bitnet, 
através de uma conexão de 9 600 bits estabelecida com a Universidade 
de Maryland ; 
 
(1989) - a Universidade Federal do Rio de Janeiro (UFRJ) também liga-
se à rede Bitnet, através da Universidade da UCLA, constituindo-se no 
terceiro ponto de acesso ao exterior; 
 
(1981) - É fundado o Ibase (Instituto Brasileiro de Análises Sociais e 
Econômicas), com o objetivo de disseminar informações a sociedade 
civil e democratizar o acesso às redes de computadores no país.; 
 
 
 
A Chegada da Internet no Brasil 3/4 
(1992) É criado o Alternex, primeiro provedor de acesso 
a permitir o acesso às pessoas físicas, ligado 
inicialmente ao IBASE; 
 
(1994) A Internet passa a ter ampla disseminação pela 
mídia, Em 17 de julho daquele ano, o jornal Folha de 
S.Paulo dedicou a edição dominical do seu caderno 
Mais! à “superinfovia do futuro”. E anunciava: “nasce 
uma nova forma de comunicação que ligará por 
computador milhões de pessoas em escala planetária”; 
 
 
 
A Chegada da Internet no Brasil 4/4 
(1994-1995) - o governo brasileiro divulga, através do 
Ministério de Ciência e Tecnologia e do Ministério das 
Comunicações, a intenção de investir na nova tecnologia. A 
criação da estrutura necessária para a exploração 
comercial da Internet ficou a cargo da Embratel e da RNP; 
 
(1996) Com a melhoria dos serviços de telecomunicações 
e o crescimento natural do mercado, a Internet brasileira 
cresce vertiginosamente, tanto em número de usuários 
quanto de provedores e de serviços prestados através da 
rede; 
A Bolha de 2000 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
O que são protocolos? 
 
O que é um protocolo? 
Trata-se de um “idioma único”, uma linguagem 
utilizada entre as máquinas para que consigam 
se comunicar entre si. 
Protocolos de Internet 
 
TCP/IP - é formado por 2 protocolos o TCP 
(Transmission Control Protocol), Protocolo de Controle 
de Transmissão,, Internet Protocol (Protocolo de 
Internet) que permite a identificação das máquinas da 
rede. 
 
*É o principal protocolo de envio e recebimento de 
dados na internet. 
 
O TCP/IP 
 
Camadas do TCP/IP 
APLICAÇÃO Programas 
(SMTP, FTP, HTTP) 
TRANSPORTE Divisão e envio de 
dados em pacotes 
(TCP) 
INTERNET Sequenciamento e 
integridade dos 
pacotes 
INTERFACE C/ REDE Endereçamento IP 
Protocolos de Internet 
 
HTTP (Hypertext Transfer Protocol - protocolo de 
comunicação utilizado para sistemas de informação de 
hipermídia. 
Protocolos de Internet 
 
HTTPS (HyperText Transfer Protocol Secure) é uma 
implementação do protocolo HTTP que utiliza o protocolo 
SSL/TLS como camada de segurança. 
 
Essa camada permite criptografia dos dados trafegados e a 
verificação da autenticidade do servidor e do cliente por 
meio de certificados digitais 
Protocolos de Internet 
 
Protocolos de Internet 
 
SMTP (Simple Mail Transfer Protocol), Protocolo Simples de 
Transferência de Correio é o protocolo utilizado para o envio 
de e-mails, permitindo transferir o correio deum servidor a 
outro. Sua porta padrão é 25 
 
Funciona em modo conectado, encapsulado no TCP/IP. O 
correio é entregue diretamente ao servidor de correio do 
destinatário. Tem como porta padrão 25 (ou 465 para 
conexão criptografada via SSL). 
Protocolos de Internet 
 
POP3 (O Post Office Protocol) é um protocolo utilizado 
durante o acesso remoto a uma caixa de correio eletrônico. 
 
Permite que todas as mensagens de uma caixa de correio 
eletrônico possam ser transferidas de maneira sequencial do 
servidor web para um computador local, permitindo que seu 
utilizador leia as mensagens, apague, responda e armazene 
de forma off-line. 
 
 
Servidores POP e SMTP 
 
Protocolos de Internet 
 
IMAP (Internet Message Access Protocol) - Protocolo online 
no qual, o software de e-mails conecta-se ao servidor, 
sincronizando mensagens e pastas. As novas mensagens são 
atualizadas quase que em tempo real. 
Protocolos de Internet 
 
Protocolos de Internet 
 
RTSP - O Real Time Streaming Protocol é um protocolo a 
nível de aplicação desenvolvido em 1998 para controle e 
estabilização na transferência de dados em tempo real. 
 
Permite a transferência, sob demanda, de dados em tempo 
real como áudio e vídeo. Possibilita controlar um único ou 
vários streams sincronizados de mídias contínuas. 
Protocolos de Internet 
 
Protocolos de Internet 
 
UDP - o User Datagram Protocol é o irmão do FTP. enquanto 
o TCP é um protocolo orientado à conexão, que inclui vários 
mecanismos de controle, e retransmissão de pacotes 
corrompidos. O UDP por sua vez foi feito para transmitir 
dados pouco sensíveis, como streaming de áudio e vídeo. No 
UDP não existe checagem, nem confirmação. 
Protocolos de Internet 
 
RTMP (Real Time Messaging Protocol) - desenvolvido pela 
Macromedia para streaming de vídeo, áudio e dados para 
voltado para o Flash player. 
Protocolos de Internet 
 
Protocolos de Internet 
 
SIP (session initiation protocol) é um protocolo que permite 
estabelecer chamadas e conferências em redes via 
protocolo IP (VOIP). 
Outros Termos 
 
URL (Uniform Resource Locator) - ou Localizador Padrão de 
Recursos é um endereço virtual (caminho) que indica uma 
localização, podendo ser um arquivo, um site, uma pasta etc. 
 
Proxy - É um computador (servidor) que funciona como 
intermediário entre um navegador da Web e a Internet. 
Ajudam a melhorar a segurança através de filtragem de de 
conteúdo da Web e permitem o carregamento e páginas 
recentes em cache. 
Outros Termos 
 
Secure Socket Layer (SSL) é um padrão global em tecnologia 
de segurança desenvolvido pela Netscape (1994). 
 
É criado um canal criptografado entre o servidor web e 
navegador do cliente (usuário) para garantir a segurança das 
informações trafegadas. 
Estatísticas de domínios .br 
 
 
Registro de domínios 
Fonte: Registro.br 
O Núcleo de Informação e Coordenação do Ponto BR 
(Nic.br) é o responsável por implementar as decisões e 
projetos do Comitê Gestor da Internet no Brasil. 
 
* Através do site http://registro.br é realizado o registro 
e administração de domínios para publicação do DNS 
(Sistema de Nome de Domínios) ".br“. 
Registro de domínios 
https://registro.br/cgi-bin/nicbr/painel 
Registro de domínios 
39 https://registro.br/cgi-bin/nicbr/dominio?dominio=robertocardosofreire.com.br 
Registro de domínios 
Publicações DNS 
40 
Fonte: Registro.br 
Políticas DNS 
 
As publicações DNS do .br ocorrem a cada 30 
minutos através de 6 servidores: a.dns.br até 
f.dns.br, sendo 3 em território nacional e 3 no 
exterior. 
Onde obter informações 
 do mercado de Internet .br? 
Fonte: http://www.cetic.br/pesquisas/ - Acesso 06/08/2014 
Publicidade Online 
(padrões) 
IAB 
 
O Interactive Advertising Bureau (IAB) é composta por 
mais de 600 principais empresas de mídia e tecnologia, 
que são responsáveis ​​pela venda de 86% da publicidade 
online nos Estados Unidos. O IAB capacita as indústrias 
de mídia e marketing para prosperar na economia digital. 
 
Fonte: http://www.iab.net/ 
Publicidade Online 
(padrões) 
http://iabbrasil.net/portal/institucional-iab/guias-iab/ 
Informações Sobre Mídias Sociais 
Sobre o W3C 
O Consórcio World Wide Web (W3C) é um consórcio 
internacional no qual organizações filiadas, uma equipe em 
tempo integral e o público trabalham juntos para 
desenvolver padrões para a Web. Liderado pelo inventor da 
web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tem 
como missão Conduzir a World Wide Web para que atinja 
todo seu potencial, desenvolvendo protocolos e diretrizes 
que garantam seu crescimento de longo prazo. 
 
(Fundado por Tim Berners-Lee em 1994) 
 
Interfaces de Gerenciamento Web 
(Cpanel) 
http://cpanel.com/demo/ 
Interfaces de Gerenciamento Web 
(WHM) 
http://trycpanel.net/ 
FTP 
https://filezilla-project.org/ 
Estrutura de Pastas Web 
Endereços absolutos: 
Independem da pasta / página atual e do conhecimento 
da estrutura de pastas local. 
Ex: 
 
 http://faeterj-rio.edu.br/atendimento/index.php 
Protocolo Domínio caminho 
Estrutura de Pastas Web 
(Endereços Relativos) 
Acessando subpastas: 
Nomedapasta/arquivo.ext 
 
Ex: 
Acessando uma imagem na subpasta “imagens”: 
<img src=“imagens/imagem.png”> 
 
Acessando um link na subpasta “galeria”: 
<a href=“galeria/arq.htm”>Link</a> 
 
 
 
Estrutura de Pastas Web 
(Endereços Relativos) 
Acessando uma pasta externa: 
 
../arq.htm – saindo de uma pasta 
../../arq.htm – saindo de duas pastas 
 
Ex: 
Acessando uma imagem na subpasta “imagens”: 
<img src=“../imagens/imagem.png”> 
 
 
 
 
Declaração Doctype 
(DTD) 
É a primeira linha de um documento html. Tem como 
objetivo, informar a versão do HTML utilizado, evitando 
uma má interpretação dos códigos pelo modo de 
compatibilidade do navegador (modo quirks), 
compatível com as práticas antigas e navegadores 
antigos. 
 
O DTD, especifica os elementos e atributos que estão 
disponíveis para cada tipo de documento. 
 
 
 
 
 
Declaração Doctype 
(DTD) 
 
1) HTML Estrito (Strict) 
 
Para utilização com as Tags no padrão HTML 4.01. 
Modo já compatível com o CSS e pode ser interpretado 
corretamente por todos os navegadores. 
 
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 
4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\"> 
 
 
Declaração Doctype 
(DTD) 
2) HTML Transitório (Transitional) 
 
Inclui os elementos e padrões do HTML 4 Strict, porém 
reconhece os elementos obsoletos. Recebe este nome 
por ser pensado como transição para HTML 4 estrito. 
 
* Framesets não são permitidos 
 
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 
Transitional//EN\" 
\"http://www.w3.org/TR/html4/loose.dtd\"> 
 
 
Declaração Doctype 
(DTD) 
3) HTML 4.01 Frameset: 
Variante de HTML 4 transitório para os documentos que 
utilizam Frames (molduras). 
 
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 
Frameset//EN\" 
\"http://www.w3.org/TR/html4/frameset.dtd\"> 
 
Declaração Doctype 
(DTD) 
 
4) HTML 5: 
 
No HTML5 a interpretação das instruções DTD fica a 
cargo do próprio navegador. 
 
 
<!DOCTYPE html> 
Perguntas 
 
 
O que é o HTML? 
Qual a sua utilidade? 
O que me permite fazer? 
Como é a Sintaxe da linguagem 
? 
Qual a sua estrutura básica? 
O que é HTML? 
 
HTML é uma abreviação de “HyperText Markup 
Language” ou em português: “Linguagem de 
Marcação de HiperTexto”.58 
Qual a sua utilidade? 
 
 
 Foi criada com o intuito de ser a língua mãe (base) 
para a disseminação de conteúdo na Internet, 
permitindo assim que os diversos computadores 
conectados à Web interpretassem o conteúdo da 
mesma forma. 
 
59 
O que o HTML me permite fazer? 
 Publicar documentos online com formatação incluindo 
diferenciação/personalização de títulos, textos, 
tabelas, listas e fotos; 
 
 Vincular informações online através de links de 
hipertexto; 
 
 Criar páginas atrativas para os usuários com diversas 
finalidades; 
 
60 
O que o HTML me permite fazer? (Cont...) 
 Incluir imagens, sons, videoclipes e outras aplicações 
diretamente em seus documentos. 
 
 Interagir com outras linguagens, como php, css, 
javascript, etc. 
 
 
61 
Scripts CMS 
 
62 
Scripts CMS (Cont...) 
63 
Scripts CMS (Cont...) 
64 
Sintaxe da linguagem 
 
 
 A linguagem HTML utiliza as chamadas TAGS 
(marcações). 
 
Exemplo: 
 
<h1>Meu primeiro html</h1> 
<i>Estou aprendendo</i><b>HTML<b> 
65 
Estrutura Básica 
 
<html> 
<head><title>Título da Página!</title></head> 
<body> 
 
 
</body> 
</html> 
66 
Estrutura Básica 
 
67 
Editores 
Bloco de Botas / Notepad++ 
 
 
68 
Exercício 
 
 
 
1. Criar 4 arquivos html com os respectivos nomes: 
 
 
 
 
index.html sobre.htm conteudo01.htm contato.htm 
 
 
 
 
69 
Exercício 02 
 
 
 
1. Insira um texto qualquer de pelo menos 5 linhas 
em index.html. 
 
 
 
 index.html 
 
 
 
70 
Formatação de Textos 
(Parágrafos e Quebras de Linha) 
 
 A linguagem html não reconhece a tecla “enter” para 
efetuar quebras de linha, é preciso utilizar “Tags” que 
informem onde deverão estar estas quebras; 
 
 Caso não sejam inseridas as marcações, o texto se 
ajustará de acordo com a largura da janela. 
 
71 
Formatação de Textos 
(Cont...) 
 
72 
Codificação 
Unicode 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 
 
 Unicode é um padrão que permite 
aos computadores representar e manipular, de forma 
consistente, texto de qualquer sistema de 
escrita existente. 
https://www.w3.org/International/O-charset.pt-br.php 
73 
Meta Tags 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
São comandos específicos do HTML que podem ser 
utilizados na criação de metainformação 
(dados sobre outros dados), permitindo modificar 
comportamentos durante o processamento. 
Meta Tags 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
Utilizando meta tags é possível: 
 
- Descrever o conteúdo do seu site e linguagem utilizada 
para os buscadores; 
 
- Controlar o comportamento do rastreamento e da 
indexação dos mecanismos de pesquisa; 
 
- Evitar traduções de páginas; 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ouXHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
- Redirecionar os usuário para outras páginas; 
 
- Especificar o tipo de conteúdo da página e o conjunto de 
caracteres utilizados. 
Meta Tags 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
Sobre o HTML5 
Codificação e Doctype 
 
Declaração DOCTYPE 
<!DOCTYPE html> 
 
Codificação 
<meta charset="utf-8"> 
Caracteres Especiais 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
 
•Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
Em XHTML, você deverá colocar uma barra "/" no final: 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
á &aacute; Á &Aacute; ã &atilde; Ã &Atilde; â &acirc; Â &Acirc; 
à &agrave; À &Agrave; é &eacute; É &Eacute; ê &ecirc; Ê &Ecirc; 
í &iacute; Í &Iacute; ó &oacute; Ó &Oacute; õ &otilde; Õ &Otilde; 
ô &ocirc; Ô &Ocirc; ú &uacute; Ú &Uacute; ç &ccedil; Ç &Ccedil; 
78 
Formatação de Textos 
(Comandos básicos) 
 
Comando Sintaxe Função 
Negrito <b>texto</b> Aplica o estilo 
negrito. 
Quebra de 
Linha 
<br>texto, texto, 
texto</br> 
Insere quebra, 
passando para a 
próxima linha. 
Parágrafo <p>texto</p> Insere uma linha 
em branco 
79 
<h1>Cabeçalhos</h1> 
 
 
<h1>Título com tamanho 1</h1> 
<h2>Título com tamanho 2</h2> 
<h3>Título com tamanho 3</h3> 
<h4>Título com tamanho 4</h4> 
<h5>Título com tamanho 5</h5> 
<h6>Título com tamanho 4</h6> 
80 
Formatação de Textos 
(Tags de estilo de texto) 
 
Comando Sintaxe Função 
Negrito <b>texto</b> Aplica o estilo negrito 
Itálico <i>texto</i> Aplica o estilo itálico 
Sublinhado <u>texto</u> Insere uma linha em 
branco 
Strong <strong>texto</strong> Semelhante ao negrito 
Typewritter <tt>texto</tt> 
 
Estilo de máquina de 
datilografia 
Big <big>texto</big> 
 
Aumenta a fonte e aplica o 
negrito 
em <em>texto</em> Para dar ênfase em parte 
do texto, semelhante ao 
<i> 
81 
Formatação de Textos 
(Tags de estilo de texto) Cont... 
 
Comando Sintaxe Função 
Small <small>texto</small> Reduz e altera a 
fonte 
Sobrescrito <sup>texto</sup> Eleva o texto 
Subscrito <sub>texto</sup> Rebaixa o texto 
82 
Formatação de Textos 
(Tags de estilo de texto) Cont... 
 
83 
Exercício 01 
Faça a programação do modelo abaixo 
84 
Exercício 01 
(Correção) 
<html> 
<head><title>Html e ciência</title></head> 
<body> 
 
<h2>Pesquisa descobre as diferenças nas conexões dos neurônios femininos e 
masculinos</h2> 
 
<b><i>Estudo nos EUA diz que homens e mulheres pensam 
diferente</i></b> 
 
<p>Homens e mulheres têm conexões cerebrais muito<br> diferentes, 
revela um estudo publicado nesta<br> segunda-feira, que parece 
confirmar estereótipos<br> sobre atitudes e comportamentos próprios 
de cada sexo.</p> 
 
 
</body> 
</html> 
85 
Textos Pré-formatados 
 
 
<pre> 
<b>FOREVER 21 NO BRASIL - CONSIDERAÇÕES SOBRE 
CONSUMISMO</b> 
 
 Filas para o provador de até 5 horas, gente experimentando roupa no 
meio da loja, mãos afoitas pegando coisas nas araras e uma demora de 
até 3 horas para conseguir pagar pelas peças escolhidas. Por que as 
pessoas invadiram as lojas da Forever 21 em São Paulo e no Rio de 
Janeiro como se fosse o fim do mundo? Elas, realmente, estavam 
precisando de tudo o que compraram? Bora bater um papo sobre 
consumo consciente? 
 
fonte: MakeCoisaeTal.com.br 
 
</pre> 
86 
Tag <hr> 
Horizonal Ruler 
 
 
Cria uma linha horizonal que divide a página: 
87 
<hr> 
 
<hr> 
Estudo da linguagem HTML 
<hr> 
Atributos 
width Largura 
align Center, left, right 
size Altura 
noshade Entalhe 
Listas 
Listas ordenadas Listas não ordenadas 
<ol> 
<li>Item 1 
<li>Item 2 
<li>Item 3 
</ol> 
 
<ul> 
<li>Item 1 
<li>Item 2 
<li>Item 3 
</ul> 
 
Atributos 
type (A,a,I,i) type (square, round, 
circle) 
start (0,1, 2...) 
88 
Listas Aninhadas 
89 
Listas ordenadas 
aninhadas 
Listas não ordenadas 
aninhadas 
<ol> 
<li>Primeiro item da lista principal 
<li>Segundo item da lista principal 
<ol> 
<li>Primeiro subitem do segundo 
item da lista principal 
<li>Segundo subitem do segundo 
item da lista principal 
<ol> 
<li>Primeiro subitem do subitem 
anterior 
<li>Segundo subitem do subitem 
anterior 
</ol></ol></ol> 
<ul> 
<li>Primeiro item da lista 
principal 
<li>Segundo item da lista 
principal 
<ul> 
<li>Primeiro subitem do 
segundo item da lista principal 
<li>Segundo subitem do 
segundo item da lista principal 
<ul> 
<li>Primeiro subitem do subitem 
anterior 
<li>Segundo subitem do 
subitem anterior 
</ul></ul></ul> 
Listas (cont) 
Listas de definição 
<dl> 
<dt>Café</dt> 
<dd>Bebida quente preta</dd> 
<dt>Leite</dt> 
<dd>Bebida fria branca</dd> 
</dl> 
 
90 
Aplicação de Cor e Estilo 
91 
<font size=“n” face=“font, font” color=“cor”>texto</font> 
Ex.: 
<font size=“+2” face=“arial, verdana” 
color=“#FFD700”>texto</font>* 
 
 
 
Aplicação de Cor e Estilo 
Tabela Hexadecimal 
92 
 
 
 Color Color HEX Color RGB 
 #000000 rgb(0,0,0) 
 #FF0000 rgb(255,0,0) 
 #00FF00 rgb(0,255,0) 
 #0000FF rgb(0,0,255) 
 #FFFF00 rgb(255,255,0) 
 #00FFFF rgb(0,255,255) 
 #FF00FF rgb(255,0,255) 
 #C0C0C0 rgb(192,192,192) 
 #FFFFFF rgb(255,255,255) 
http://html-color-codes.info/Codigos-de-Cores-HTML/ 
Aplicação de Cor e Estilo 
Tabela Hexadecimal 
 
 
 
#FFFF00 
Cada dígito hexadecimal corresponde a 16 tons: 
 
 
 
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
0 1 2 3 4 5 6 7 8 9 A B C D E F 
Aplicação de Cor e Estilo 
Tabela Hexadecimal 
 
 
 #FFFF00 
RGB (255,255,0) = ? 
Aplicação de Cor e Estilo 
Tabela Hexadecimal 
95 
 
 
 
http://html-color-codes.info/Codigos-de-Cores-HTML/ 
Aplicação de Cor e Estilo 
<body> 
<body bgcolor=“#FFFF00" text="#0000FF" 
link=“#0000FF" vlink“#FF0000"alink="#FF6600"> 
 
 
 
<body> 
Atributos 
bgcolor Fundo da página 
text Texto da página 
link Links não visitados 
vlink Links visitados 
alink Links ativos 
background Imagem como fundo 
bgproperties Determina como o fundo será exibido 
Alinhamento de Texto 
97 
O alinhamento é feito basicamente inserindo o atributo 
align na Tag principal: 
 
Ex: 
<H1 align=“center>cabeçalho alinhado ao centro</h1> 
 
<p align=“center>parágrafo alinhado ao centro</p> 
 
<div align=“center”>alinhando um bloco de texto</div> 
 
 
 
 
Alinhamento de Texto 
98 
 
 
 
Possíveis Alinhamentos 
left – right – center - justify 
Alinhamento de Texto 
(cont...) 
Outra forma de alinhamento é o comando <center> que 
é utilizado para forçar a centralização de objetos em 
geral. 
 
<center>Texto</center> 
 
 
 
 
 
 
Criação de Links 
Links internos e externos 
100 
Permitem a criação de vínculos entre as páginas do site 
de forma hipertextual 
 
 Ex: 
 <a href=“sobre.htm”>Sobre a empresa</a> 
 
 
 
 
 
Atributos e Valores 
Target 
_blank Abre o link em uma nova janela 
_self Abre link na janela atual 
framename Abre link em frame específico 
Inserindo Imagens 
<img> 
 
101 
 
 
 
Adiciona imagens nas páginas do site, de forma 
ilustrativa ou associada a links: 
 
<img src=“images/logo01.png”> 
 
 
 
 
Inserindo Imagens 
<img> (cont...) 
 
102 
 
 
 
Atributo Valor Função 
Width 120, 200, ... largura da imagem em pixels. 
Height 120, 200, ... altura da imagem em pixels. 
Hspace 0, 1, 2, ... distância horizontal da imagem e demais 
objetos 
Vspace 0, 1, 2, ... 
 
distância vertical da imagem e demais 
objetos 
Alt Descrição Fornece uma descrição da imagem quando 
esta não carrega 
Title Descrição Fornece uma descrição da imagem ao 
posicionar o cursor 
 
Align Left, right, 
center, top, 
bottom, middle 
Alinha a imagem e demais objetos em 
relação a esta. 
Inserindo Imagens 
<img> (cont...) 
 
103 
 
 
 
Atributo Valor Função 
border 1, 2, ... Moldura da imagem. 
bordercolor #hexadecimal Cor da moldura 
Border 0, 1, 2, ... espessura da moldura da imagem. 
Inserindo Imagens 
<img> (cont...) 
 
104 
 
 
 
Nota: Alguns browsers mais antigos 
exibem o valor do atributo alt como uma 
dica ao passar o mouse sobre o elemento 
img (como faz o atributo title=" ") 
Tabelas 
<table> 
 
 
105 
<table border="1"> 
<tr> 
<td colspan="2">1L - 1 Célula</td> 
</tr><tr> 
<td>2L - 1 Célula</td> 
<td>2L - 2 Célula</td> 
</tr><tr> 
<td>2L - 1 Célula</td> 
<td>2L - 2 Célula</td> 
</tr> 
</table> 
 
 
 
Tabelas 
<table> 
 
 
106 
<table border="1"> 
<tr> 
<td>1L - 1 Célula</td> 
<td>1L - 2 Célula</td> 
</tr><tr> 
<td>2L - 1 Célula</td> 
<td>2L - 2 Célula</td> 
</tr> 
</table> 
 
 
 
<th>Cabeçalho</td> 
 
Tabelas 
Desafio 
 
 
107 
 
 
 
Tabelas 
<table> 
 
 
108 
<table border="1"> 
<tr> 
<td rowspan="2">1L - 1 Célula</td> 
<td>1L - 2 Célula</td> 
</tr><tr> 
<td>2L 1C</td> 
</tr> 
</table> 
 
 
 
Formulários 
Tag <form> 
 
109 
 
 
 
Formulários HTML são usados ​​para transmitir dados para 
um servidor. Com eles é possível criar elementos de 
entrada, como campos de texto, caixas de seleção, botões 
e listas de seleção, áreas de texto, legendas, e elementos 
de rotulagem. 
 
A tag <form> é usado para criar um formulário HTML: 
 
<form> 
Elementos de Entrada <input> 
</form> 
Formulários 
Tag <input> 
 
110 
 
 
 O elemento <input> é usado para a criação de campos do 
formulário, em função do tipo (atributo type) pode ser de 
tipo campo de texto, caixa de seleção, botão de opção de 
senha, botão enviar, dentre outros. 
 
Criando campos de texto: 
 
Nome: <input type="text" name=“nome"><br> 
Sobrenome: <input type="text" name=“sobrenome"> 
 
 
Formulários 
Botões 
111 
 
 
 
• Botão enviar: 
<input type=“submit” value=“Enviar”> 
 
• Botão apagar: 
<input type=“reset” value=“Apagar”> 
 
 
 
Roberto Cardoso 
 
 
Contato: 
 
rcardosofreire@gmail.com 
www.robertocardosofreire.com.br 
 
Skype: Roberto_Cardoso