Programação - Introdução ao Coding Web - LIVRO ÚNICO - OCR

Prévia do material em texto

PROGRAMAÇÃO- 
INTRODUÇÃO AO 
CODING WEB 
 
LUIZ FERNANDO CORCINI 
 
 
 
Créditos Institucionais 
Fundador e Presidente do Conselho de Administração: 
Janguê Diniz 
Diretor-Presidente: 
Jânyo Diniz 
Diretor de Inovação e Serviços: 
Joaldo Diniz 
Diretoria Executiva de Ensino: 
Adriano Azevedo 
Diretoria de Ensino a Distância: 
Enzo Moreira 
 
(O 2020 by Telesapiens 
Todos os direitos reservados 
 
O AUTOR 
LUIZ FERNANDO CORCINI 
Olá! Meu nome é Luiz Fernando Corcini. Sou formado em 
Engenharia Eletrônica, com especialização em Administração 
de TI, Mestre em Educação e Novas Tecnologias e Doutorando 
em Sistemas Tutores Inteligentes. Tenho experiência técnico- 
profissional na área de desenvolvimento e gestão da produção de 
softwares nas áreas de Gerenciamento de Processos Empresariais. 
Uso os recursos disponibilizados pela Web há mais de 20 anos. 
Sou professor universitário há mais de 15 anos, publiquei vários 
livros técnicos sobre assuntos voltados à área de informática. 
Fui convidado pela Editora Telesapiens a integrar seu elenco de 
autores independentes. Estou muito feliz em poder ajudar você 
nesta fase de muito estudo e trabalho.
APRESENTAÇÃO 
Olá. Meu nome é Manuela César. Sou a responsável pelo 
projeto gráfico de seu material. Esses icones irão aparecer em 
sua trilha de aprendizagem significam: 
OBJETIVO Q 
Breve descrição do 
objetivo; O 
CITAÇÃO 
Parte retirada de um 
texto; 
La TESTANDO T= 
Foco em um objeto á 
A. de estudo; E) 
IMPORTANTE 
As observações escritas 
têm que ser priorizadas; 
« tamet.. DICA 
- Destaque para efe 
“ * sugestões e novas 
= ormações; E 
 
(6)2018 by Telesapiens 
OBSERVAÇÃO 
Breve descrição do 
objetivo; 
RESUMINDO 
Resumo | 
acumulativo das 
últimas abordagens; 
DEFINIÇÃO 
Apresentação de 
um novo conceito; 
ACESSE 
Links úteis 
para fixação da 
informação; 
SAIBA MAIS 
Informações 
adicionais sobre 
o conteúdo; 
Todos os direitos reservados
SUMÁRIO 
Web — Um pouco da História.........ecereseseeeemenencereresos 10 
Como tudo começou........... eee q 
A-World. Wide Web... ssaresenonamasorucoscceeasansosaprussenons 14 
A Evolução da Web............ eee 20 
Estatísticas e outros dados interessantes................. 22 
AM ED 200 ososcapresicaase aa posnoccasapesscoseamicaqas a aocenassacasacaacaal 23 
Conceitos e Características... 23 
AprendendoasbasesdoHTMLS & W3.058S..........csssss 27 
Introdução........... eee 27 
Montando a Primeira Página Web... 29 
A Estrutura básica de um documento HTML........... 29 
Um pouco de “Estilo”, por favor!.............. 36 
Meu Blog Pessoal - Parte 1... 39 
Aprimorando os conhecimentos em HTML & W3CSS...50 
Meu Blog Pessoal - Parte 2 - Continuação.................. 51
 
Introdução ao coding web ) (7 
 
UNIDADE 
 
INTRODUÇÃO AO AMBIENTE WEB
 
8 ) ( introdução ao coding web 
 
INTRODUÇÃO 
Seja bem-vindo à Unidade 1 — Introdução ao Ambiente 
Web - da disciplina de Introdução ao Coding (web). O conteúdo 
desta Unidade está dividido em quatro módulos. No primeiro 
módulo vamos embarcar numa “máquina do tempo” e entender 
como as tecnologias Web evoluíram, desde sua origem, até 
chegar ao que se tem nos dias atuais. 
No Modulo 2 conversaremos sobre as caracteristicas, 
conceitos e apresentaremos algumas ferramentas da plataforma 
Web 2.0, que mudou a maneira das pessoas se relacionarem, 
estudarem e trabalharem. Bem, depois da teoria vem a prática. 
Então temos o Módulo 3, no qual iremos aprender as bases de 
como escrever páginas Web utilizando a linguagem HTML 
(Hiper Text Markup Language ou Linguagem de Marcação de 
Hipertexto), na sua versão 5 e o framework W3CSS. 
E, por fim, no último módulo desta Unidade 1, vamos 
aprofundar o nosso conhecimento em HIMLS e W3CSS. É 
claro que existe muito mais a aprender, mas o aprofundamento 
de cada um destes conhecimentos pode ser feito acessando os 
links indicados durante o texto, no tópico Saiba Mais.
 
Introdução ao coding web ) (o 
 
OBJETIVOS 
Olá! Se bem-vindo a nossa Unidade 1, e o nosso objetivo 
é auxiliar você no desenvolvimento das seguintes competências 
profissionais até o término desta etapa de estudos: 
Contextualizar-se no tempo e no estado da arte das 
tecnologias relacionadas à World Wide Web. 
 
Compreender os conceitos e o modus operandi da Web 
2.0. 
 
Escrever, executar e entender a estrutura básica de páginas 
HTMIS com W3CSS. 
 
Aprimorar a estrutura e apresentação de páginas HTMLS 
com W3CSS. 
 
 
10 ) ( introdução ao coding web 
 
Web — Um pouco da História 
A intemet e os dispositivos embarcados de novas 
tecnologias (móveis ou não) tornaram-se tão comuns em nosso 
cotidiano que, muitas vezes, nem sequer nos damos conta do 
quanto os utilizamos. Ambientes interativos, salas de bate papo, 
música, vídeos, redes sociais, aulas de idiomas, blogs, jornais, 
enfim, pode-se encontrar de tudo na internet. De tutoriais que 
ensinam, passo a passo, como pregar o botão da sua camisa, aulas 
de dança ou mesmo aprender como assar uma picanha invertida 
com mostarda. Não há limites. Seja para aprender, trabalhar 
ou se divertir; seja num computador de mesa ou em qualquer 
dispositivo móvel; o conhecimento e os contatos disponíveis na 
internet podem estar com você em qualquer lugar onde haja uma 
rede móvel. 
Porém, entre uma curtida ou outra, nas postagens de 
um amigo nas redes sociais, ou mesmo ao acessar um conteúdo 
interativo de interesse profissional ou acadêmico, você já deve 
ter se perguntado: “Como isso tudo começou?”. 
Então, se você tem curiosidade em saber como foi que 
o chegamos a esse “mundo hiperconectado”, acompanhe este 
capítulo e ficará surpreso com o que aprenderá! 
 
O fórum de dúvidas e discussões estará a sua disposição caso você 
tenha dúvidas ou queira socializar/compartilhar seus conhecimentos. 
Não se esqueça de desenvolver as atividades e questões sugeridas. 
Nós estaremos a sua disposição em caso de dificuldades! 
 
 
Introdução ao coding web ) (u 
 
Como tudo começou 
Estávamos no final da década de 1950. Era presidente do 
Brasil, Juscelino Kubitchek e o nosso país vivia uma época de 
rápida industrialização. A população migrava dos campos para 
as cidades. Viviamos os chamados “anos dourados”. Porém, o 
mundo não estava tão calmo assim. Conflitos ideológicos entre 
os EUA ea URSS mantinham um grande estado de tensão, que 
se convencionou chamar de “Guerra Fria ”. 
Neste contexto, um dos marcos da busca pela liderança 
mundial era a “Corrida Espacial”, isto é, tanto os EUA quanto 
a URSS estavam pesquisando maneiras de lançar o primeiro 
homem para o espaço e resgatá-lo com segurança. 
Fato é que, em 1957, a URSS saiu na frente nesta 
corrida espacial, conseguindo lançar o primeiro satélite artificial 
não tripulado na orbita da terra: o Sputnik. No mesmo ano, 
temendo um ataque em seu território que pudesse acabar com a 
comunicação e com todo o trabalho e pesquisa feitos até então, 
o governo americano cria a “Agência de Pesquisa em Projeto 
Avançados”, cuja abreviatura em inglês é ARPA . 
Em 1961, a URSS lança o primeiro homem ao espaço: 
Yuri Gagarin. Os Estados Unidos realmente tinham perdido a 
corrida espacial e o medo de sofrer um ataque era cada vez maior. 
Foi então que a Agência ARPA coloca em ação a ideia batizada 
como “rede galáctica” — um conceito, ainda embrionário, de uma 
rede que conseguiria ligar todos os computadores existentes no 
planeta — e foi criada a ARPANET.
 
12 ) [ introdução ao coding web 
 
Figura 1: A rede ARPANET em 1969. Ligou as sedes da Universidade da Califórnia 
em Los Angeles e Santa Barbara, o Instituto de pesquisa de Stanford e a Universidade 
de Utah. 
UTAH 
UCcsB UCLA 
Fonte: htip:/'som.csudh.edufac'Ipress/historyiarpamaps/press.jps (Acesso em 
15/08/2018) 
Bem, como você deve ter percebido os Estados Unidos 
não foram atacados pelas URSS, mas a rede de computadores 
interligadoscontinuava a crescer. 
A figura abaixo apresenta algumas datas importantes 
desde 1969 (quando a ARPANET ficou online pela primeira vez) 
até 1989 (criação da WWW): 
 
1EUA — Estados Unidos da América. 
?URSS — União das Repúblicas Socialistas Soviéticas. 
“Guerra Fria: foi uma luta ideológica entre o comunismo versus capitalismo. A fim de 
disputar a liderança mundial. 
“ARPA: Advanced Research Project Agency.
 
Introdução ao coding web ) (13 
 
ARPANET É COLOCADA NO AR, 
LIGANDO AS MAIORES UNIVERSIDADES 
AMERICANAS. 
 
 
 Os 1972 
RAY TOMLINSON ENVIA O PRIMEIRO 
CORREIO ELETRÔNICO. 
 
 
Oo Q 
1974 O 
DESENVOLVIDO O SISTEMA DE Õ 
ENDEREÇAMENTO PARA OS 
COMPUTADORES - IP (INTERNET 
PROTOCOL). 
 
IPV4 É USADO PELA PRIMEIRA VEZ POR 
JOHN POSTEL, 
 
 1981 a 
SISTEMA OPERACIONAL MS-DOS É 
INVENTADO. 
O PRIMEIRO COMPUTADOR PESSOAL É 
INVENTADO [IBM-PC). 
 
A PALAVRA INTERNET É USADA PELA 
PRIMEIRA VEZ, 
 
 
 
 I UA 
WWW (WORLD WIDE WEB) 
DESENVOLVIDA POR TIM BERNERS-LEE. 
 
14 ) ( introdução ao coding web 
 
Como você pode notar, pela figura acima, foram vinte 
anos de muita evolução, mas a interface gráfica que a internet 
tem hoje era muito diferente da que existia na época. Antes 
do desenvolvimento da WWW, que chamamos simplesmente 
de Web, a interface gráfica da internet era muito restrita — 
praticamente uma tela preta com letras verdes. A figura ao lado 
mostra um exemplo. 
Note que a única forma de entrada de dados, pelo usuário, 
erao teclado. Na figura ao lado, por exemplo, se o usuário quisesse 
ter acesso a tópico Sociedade e Cultura, deveria pressionar a letra 
“C”. Caso quisesse ler sobre Ciência, Tecnologia e Medicina, 
deveria pressionar “T”, e assim por diante. 
Bom, agora que você já tem uma ideia de como as coisas 
aconteceram até 1989, vamos avançar no tempo e verificar o 
que aconteceu depois da criação da Web. 
Figura 3: Exemplo 
de interface de 
acesso à internet 
antes da Feb. 
Fonte: http: 
wywm.techtudo. 
com.br/platb/ 
internet/2011/07/08/ 
bbs-a-intenet-antes- 
de-intenel” (Acesso 
em 15/08/2018) 
 
A World Wide Web 
Para começar esta seção, vamos definir o termo “World 
Wide Web”, que posteriormente ficou conhecida apenas pelo 
termo “Web”.
 
Introdução ao coding web ) (15 
 
Tenho aqui duas perguntas pra você pensar: 
Será que você passaria tantas horas na frente do computador 
se ele tivesse a interface e acessibilidade apresentada na figura 
acima? 
Como você imagina que uma rede social como o Facebook 
poderia ser naquela época? 
World Wide Web, o famoso WWW, é um sistema 
de documentos (páginas Web) dispostos na Internet 
que permitem o acesso às informações apresentadas 
no formato de hipertexto (hiperlink). Para ter acesso 
a tais informações pode-se usar um programa de 
computador chamado navegador. 
Fonte:https://www.tecmundo.com.br/web/759-o- 
que-e-world-wide-web-.htm (Acesso em 15/08/2018) 
Os hipertextos são textos exibidos em formato 
digital, os quais podem conter informações em 
formato de imagens, sons, vídeos, etc. O acesso a 
tais informações se dá por meio de links, que servem 
como uma ponte entre os mais diversos sites da 
Internet e seus conteúdos.
 
16 ) ( introdução ao coding web 
 
+= SAIBAMAIS 
+ 
AWebouo WWW não é a internet, mas sim parte dela, 
formadas por documentos indexados e apresentados 
no formato de hipertexto, que você consegue acessar 
com seu navegador. A internet em si é muito maior. 
 
 
Afigura abaixo mostra esquematicamente como funciona 
a organização e acesso a documentos via hipertexto: 
Figura 4: Acesso 
a documento via 
hipertexto. I: 
 
 
 
o 
 
 
HOME Fonte: Editorial 
A web então começava a florescer e, segundo reportagem 
do site Terra (2013), neste ano de 2018 faz 25 anos que o primeiro 
navegador gráfico popular da intemet foi lançado: MOSAIC. 
Entre as características mais relevantes do Navegador Mosaic 
estavam: 
E Tratamento completo do código HTML; 
m Suporte interno para alguns tipos de arquivos de áudio; 
m Suporte para apresentação de imagens JPEG, GIF e para 
vídeos no padrão Microsoft; 
E Suporte completo a hipertextos; 
E Gravação de histórico de acesso; 
m Barra de ferramentas opcional com atalhos.
 
Introdução ao coding web J (17 
 
Um exemplo da sua interface é apresentada na figura 
abaixo: 
EIE Figura 5: Primeira 
2& versão do MOSAIC 
ejm/ ejn]=[m| «|>jo/e/"] m[| &|] 2] — Disponibilizada 
[DloAro 7 aan edu SDG lume? iidcca MareF ago Hr . - =] ao piblico em 22 
= de Abril de 1993. 
 
 
 
 
 
 
NCSA Mosaic 'M for Microsoft Windows 
“Welcome tu the Mosaio for Microsoft Windows Home Page Mostic is da Word Wide Yeb Chent 
that wras developed at be Naional Center for Eupercomputmg Appbcstiora oa the campus of The 
Urrversitr cf (nois in Uírbana-Cbampaigo 
 
Search Our Space 
News and Announcements 
O Veision 20.8 Fonte: Vossen & 
O Met Wa32s Iefcemanos « Hagemam (2007). 
E I T Jaz 26106 7334um 
 
A tabela abaixo apresenta uma comparação do antes e do 
depois dos navegadores Web: 
INTERAÇÃO ACESSO APENAS TEXTO, IMAGENS, ACESSO MUNDIAL A 
RESTRITA AO PARA QUEM GRÁFICOS, SONS QUALQUER PESSOA 
FEGLADO. CONHECIA OS CÓDIGOS, E ANIMAÇÕES. COMECTADA À REDE 
Ro APENAS ACESSO APENAS A [WEB | PO unitização Do ACESSO À 
TENTO. REDES RESTRITAS. “MOUSES QUALQUER 
EmpinTintos, PESSOA, 
Conforme apontado por Vossen & Hagemann (2007), o 
Navegador Mosaic já possuía um maneira de trabalhar que ainda 
é usada pelos navegadores atuais: o modelo de comunicação 
clienteiservidor aplicado à intemet. Segundo os mesmos autores, 
este modelo ou princípio é dividido em dois papeis ou partes, 
veja: 
HA primeira, chamada de Cliente, que é a que faz a 
requisição de serviços; 
E A segunda, chamada de Servidor, é responsável por 
processar a requisição, executando o serviço solicitado que, 
ficando assim, responsável por entregar o resultado ao cliente.
 
18 ) ( introdução ao coding web 
 
EXEMPLO 
Quando um cliente deseja um “serviço” do seu interesse, 
tal como acessar uma base de dados ou imprimir um relatório. 
O cliente deve fazer uma requisição (request) para o servidor 
correspondente aquele serviço. O Servidor, então, processa a 
requisição e dá uma resposta (response) ao cliente. A figura 
abaixo exemplifica esquematicamente este processo: 
Figura 6: Modelo ou Princípio ClientelServidor. 
 
REQUISIÇÃO 
— np 
+ — 
RESPOSTA 
Fonte: Próprio autor. Baseado em Fossen & Hagemann (2007, p.7). 
M SAIBA MAIS 
 
Sevocêquisersaber mais sobre o primeiro navegador disponibilizado 
para acesso à intemet com interface gráfica, verifique o site da 
NCSA (National Center for Supercomputing Applications) da 
Universidade de Illinois — EUA, pela url: http://www.ncsa.illinois. 
edu/news/pressimosaic (Acesso em 15/08/2018). 
 
Como você deve imaginar, depois do navegador Mosaic 
ser lançado, uma grande variedade de navegadores passou 
a invadir o mercado e a internet deixou de ficar restrita às 
universidades e centros de pesquisas, para começar a fazer parte 
do dia a dia das pessoas. 
A tabela abaixo apresenta uma cronologia básica de 
como foi esta disputa entre navegadores:
 
Introdução ao coding web ) (19 
 
Figura 1: Cronologia básica dos navegadores. 
meo 209 
 
1994 | 1995 | 1996 2003 2004 2008 
Internet | E Mozilla 
NetScape Explorer Opera Safari Firáfox Chrome 
NetScape Ê Opera Mozilla 
Commeninetion | Microsoft | Seta | Apple Foundation Soogle 
 
Fonte: Editorial 
Er SAIBA MAIS 
 
Para saber mais sobre as características de cada navegador citados 
na tabela acima, acesse o link: https://www-.tecmundo.com br/ 
web/2063-a-historia-c-a-evolucao-dos-navegadores.htm (Acesso 
em 15/08/2018). 
 
Bom, retomando a nossa viagem no tempo, estamos ainda 
entre os anos de 1994 e 2005. As páginas web já eram moda e 
todas as empresas queriam ter um domíniona intemnet e uma 
página para divulgar seus produtos ou serviços. Porém, até esta 
época, as páginas tinham apenas conteúdo estático. 
Nos dias de hoje ainda podemos ver algumas páginas Web 
com conteúdo puramente estático. Normalmente são páginas que 
são construídas com linguagem HTML simples, que não permite 
atualização automática de informações nem acesso a banco de 
dados. Possuem apenas a funcionalidade dos hipertextos. 
Na verdade, as funcionalidades da internet, ou melhor, da 
Web, eram bem limitadas. Quase sem interatividade, não havia 
possibilidade de fazer uma postagem ou mesmo curtir uma 
postagem de um amigo. De acordo com Tim Bemers-Lee, o que 
se tinha naquela época era uma internet apenas de leitura. Mas 
os navegadores evoluíram e as funcionalidades da Web também, 
como veremos na próxima seção.
 
20 ) [ introdução ao coding web 
 
A Evolução da Web 
Como tudo no mundo tecnológico, a web, os navegadores 
e os aplicativos por eles disponibilizados não param de evoluir. 
A internet já possui um grande número de usuários (pessoas 
físicas e jurídicas) que movimentam este mundo virtual. 
Como visto anteriormente a web era formada por 
documentos (páginas web) estáticos, isto é, com muitas 
limitações relacionadas à interatividade. Seu conteúdo era 
praticamente textos, figuras e gráficos. Tudo estático. O usuário 
não podia dar sua opinião, fazer um comentário, assim como um 
jornal ou revista de papel, só que estava na tela do computador. 
Já estamos próximos ao ano de 2005 e a web estática 
está para se transformar profundamente e com isso, transformará 
também a maneira como as pessoas se comunicam, trabalham, 
estudam, enfim, interagem. Estamos saindo da Era da Web1.0 
— a web estática e apenas de leitura -para a Era da Web 20 - a 
Era do compartilhamento de ideias e conhecimento, a Era da 
interação e das Redes Sociais. 
M REVIERUI EE) 
 
O termo Web 2.0 foi criado por Darcy Dinncci, num artigo chamado 
“O Futuro Fragmentado”, em 1999. Algum tempo depois, em 2004, 
Tim O"Reilly utilizou-se deste termo em uma conferência de mídia, 
para descrever como ele percebia o futuro. 
 
O “Futuro”, imaginado por Tim O'Reilly era uma Web 
que permitisse compartilhamento de ideias e de informação, que 
proporcionasse a interoperabilidade, isto é, as páginas web agora 
iriam permitir que o leitor também pudesse postar, comentar, 
curtir. No final das contas, a Web2.0 causou uma mudança radical 
 
 
Introdução ao coding web ) (21 
 
na maneira das pessoas se comunicarem, aprenderem 
e, é claro, este impacto foi sentido nos meios profissional, 
acadêmico, social. Este impacto foi tão grande e suas mudanças 
tão significativas que trataremos especialmente da Web2.0 na 
próxima seção desta unidade. 
A figura abaixo mostra esquematicamente, a evolução da 
web no decorrer dos anos: 
Figura 7: A evolução da Feb. 
 
Fonte: https://hiperbytes.com.br/geral/web-2-0-a-primeira-evolucao-da-internet” 
Como você pode notar pela figura acima, a Web não 
parou de evoluir. Aproximadamente em 2015 aconteceu outra 
quebra de paradigma. A Era do compartilhamento de ideias e 
conhecimento está dando lugar a Era da Inteligência, da Web 
Semântica ou também chamada de Web 3.0. 
Nesta terceira fase da evolução das ferramentas e 
aplicativos Web aparecem os mundos virtuais, a realidade 
virtual e imersiva, os jogos 3D, em tempo real. 
Não é porque surgiram ferramentas mais atualizadas como as 
versões ou modelos de Web (1.0, 2.0 ou 3.0), que permitam mais 
interatividade, que todos os sites irão utilizar. A manutenção de 
um site profissional pode custar muito caro e muitas empresas ou 
pessoas fisicas podem não desejar se atualizar de imediato. Por isso, 
não se espante se, ao acessar a internet, nos dias de hoje, e encontrar 
sites ainda no modelo da Web 1.0.
 
22 ) ( introdução ao coding web 
 
Se quiser conhecer mais sobre quais são as ideias para o futuro 
da web, acesse https://canaltech.com.br/internet/Conheca-as-5- 
tendencias-para-o-futuro-na-web/ (Acesso em 15/082018) 
Estatísticas e outros dados interessantes 
Figura 8: Estatísticas de acesso - Fonte: Nielsen IBOPE 2016 
O 
o 
À 
mr, 
[a] 
To 
< 
ed 
— 
ed 
— 
na 
— 
N 
n % BANHEIRO ASSIM QUE ASSISTINDO ENQUANTO ANTES DE 
ACORDO Tv ESPERO DORMIR 
 
 
Fonte: Nielsen IBOPE 2016 
Para conhecer mais sobre as estatísticas da web, acesse os seguintes 
links:https://arriminum.com/blog/estatisticas/internet-no-brasil- 
estatisticas-e-projecoes e https://abertoatedemadrugada com/2016/04/ 
o-que-se-passa-num-minuto-na-intemet. html
 
Introdução ao coding web ) [23 
 
Segundo Ribeiro (2018) estes são os cinco temas mais 
buscados no Google, no Brasil, em (2017): 
1 Big Brother Brasil 
2 Tabela do Brasileirão 
3 Enem 
4 Marcelo Rezende 
5 O chamado 
A Web 2.0 
Conceitos e Características 
Ss) Ss DEFINIÇÃO 
O termo Web 2.0 é usado para designar a segunda geração de 
comunidades e serviços oferecidos na intemet, através de aplicativos 
baseados em redes sociais e tecnologia da informação. 
 
 
É importante ressaltar que não se trata apenas 
de uma nova versão tecnológica da ferramenta Web, 
mais veloz e mais robusta. Além disso, deve ser levada 
em conta a evolução dos serviços disponibilizados. 
Tornando-se mais dinâmica, os sites e aplicativos têm 
como base numa nova percepção de organização e 
colaboração na produção de conteúdo, de maneira a 
facilitar o compartilhamento de informações de forma
 
24 ) [ introdução ao coding web 
 
interativa, permitindo a interoperabilidade e com 
design cada vez mais centrado no usuário. 
Neste sentido, conforme destacado por Gendarmi 
(2007), apresentamos abaixo as características chave da 
Web 2.0: 
m Abertura: Possibilidade de o usuário produzir e 
disponibilizar conteúdo; 
E Interação: Interfaces dinâmicas, ricas e 
interativas; 
E Comunidade/Colaboração: Redes Sociais; 
HA Web como um “Plataforma Global”: 
Compartilhamento e serviços e dados. 
Como exemplos da nova geração de aplicativos e 
serviços disponibilizados na Web 2.0, temos: 
E Wikis: Uma Wiki é um site web no qual os usuários 
podem, de forma colaborativa, inserir, alterar ou exclui 
conteúdos e estruturas de conteúdos diretamente, a partir 
do navegador. 
A tabela abaixo apresenta alguns exemplos de 
Wikis: 
 
EXEMPLO CARACTERÍSTICA PRINCIPAL 
. ENCICLOPÉDIA GRATUITA, DISPONÍVEL EM VÁRIOS IDIOMAS E 
WIKIPEDIA QUE PERMITE EDIÇÃO COLABORATIVA DE CONTEÚDO, 
 
É UMA FONTE DE NOTÍCIAS ESCRITA INTEIRAMENTE PELOS 
WIKINEWS SEUS USUÁRIOS. 
UM PROJETO COLABORATIVO PARA PRODUZIR UM 
WIKIONARY DICIONÁRIO DE CONTEÚDO LIVRE E MULTILÍNGUE. 
 
 
 
Introdução ao coding web ) (25 
 
EBlog: É praticamente um diário disponível na internet 
que pode ser atualizado, através de artigos ou posts (postagens). 
Permite também que os leitores escrevam comentários sobre as 
postagens. 
EXEMPLO 
BLOGGER 
WORDPRESS 
WIX 
CARACTERÍSTICA PRINCIPAL 
 
BLOGGER, A PLATAFORMA GRATUITA DE BLOGS DO GOOGLE, É 
A FERRAMENTA IDEAL PARA QUEM ESTÁ INICIANDO NO 
MUNDO DOS BLOGS. (BRITO, 2016) 
 
PLATAFORMA GRATUITA DE PUBLICAÇÃO DE BLOGS E SITES 
QUE É CAPAZ DE OFERECER SUPORTE NA HORA DE CRIAR ATÉ 
E-COMMERCES COMPLEXOS. HÁ TAMBÉM A OPÇÃO DE PLANOS 
PAGOS. (POZEBOM, 2012) 
 
É UM SERVIÇO GRÁTIS QUE PERMITE A CRIAÇÃO DE BLOGS E 
SITES BASEADOS EM FLASH, DESTE MODO, É POSSÍVEL QUE 
QUALQUER PESSOA FAÇA UM SITE COM FACILIDADE. HÁ 
TAMBÉM A OPÇÃO DE PLANOS PAGOS. (POZEBOM, 2012). 
 
E Redes Sociais e Profissional: “É uma estmtura social 
composta por pessoas ou organizações, conectadas por um ou 
vários tipos de relações, que compartilham valores e objetivos 
comuns. Uma das fundamentais características na definição das 
redes é a sua abertura, possibilitando relacionamentos horizontais 
e não hierárquicos entre os participantes.” (Moraes, 2017) 
A tabela a seguir apresenta alguns exemplos de Redes 
Sociais, segundoCustódio,(2017):
 
26 ) [ introdução ao coding web 
 
FACEBOOK 
É UMA REDE SOCIAL VERSÁTIL E ABRANGENTE, QUE REÚNE 
MUITAS FUNCIONALIDADES NO MESMO LUGAR, SERVE TANTO 
PARA GERAR NEGÓCIOS QUANTO PARA CONHECER PESSOAS, 
RELACIONAR-SE COM AMIGOS E FAMÍLIA, INFORMAR-SE, 
DENTRE OUTROS. 
LINKEDIN 
A MAIOR REDE SOCIAL VOLTADA PARA PROFISSIONAIS TEM SE 
TORNADO CADA VEZ MAIS PARECIDA COM OUTROS SITES DO 
MESMO TIPO, COMO O FACEBOOK. 
WHATSAPP 
É A REDE SOCIAL DE MENSAGENS INSTANTÂNEAS MAIS POPULAR 
ENTRE OS BRASILEIROS: PRATICAMENTE TODAS AS PESSOAS QUE 
TÊM UM SMARTPHONE TAMBÉM O TÊM INSTALADO. 
RECENTEMENTE TAMBÉM ADQUIRIU SUA VERSÃO DESKTOP. 
YOUTUBE 
É A PRINCIPAL REDE SOCIAL DE VÍDEOS ONLINE DA ATUALIDADE, 
COM MAIS DE 1 BILHÃO DE USUÁRIOS ATIVOS E MAIS DE 500 
MILHÕES DE VÍDEOS VISUALIZADOS DIARIAMENTE. 
 
 
Introdução ao coding web ) [27 
 
É claro que existem muitas outras ferramentas e 
aplicativos disponibilizados pela plataforma Web2.0. Daria um 
livro completo se quiséssemos tratar cada uma delas, portanto, 
ficamos por aqui. 
 
Para conhecer mais sobre os aplicativos apresentados e se quiser 
conhecer as características de outros disponíveis, acesse https://kmol. 
pt'artigos/2007/07/01Aweb-20-definicao-caracteristicas-e-exemplos/ 
Acesso em 15/08/2018) 
Aprendendo as bases do HTMLS & 
W3.CsSs 
Introdução 
Neste material, por estratégia didática, achamos por 
bem apresentar o HT'MLS junto com o W3.CSS e não de forma 
separada como acontece em tutoriais ou nos livros e apostilas 
pesquisadas. Pensamos que, dessa maneira, podemos apresentar 
os conceitos na ordem em que eles aparecerem, tanto com relação 
ao código HTML como com relação aos estilos definidos pelo 
css. 
Sendo assim, vamos começar com as apresentações, 
isto é, vamos entender primeiro o que é o HTMLS5 e o que é o 
W3.€SS e descobrir para que eles servem. 
= DEFINIÇÃO 
= 
HTML (Hyper Text Markup Language — Linguagem de Marcação de 
Hipertexto) é a linguagem padrão adotada pela Web desde 1990 para 
criar e reconhecer documentos”. 
 
 
 
 
28 ) [ introdução ao coding web 
 
HTMES é a ultima versão, até o momento, da linguagem de marcação 
de hipertextos (HTML). 
CSS é uma linguagem descritiva para adicionar estilo (fontes, cores, 
espaços, etc) em documentos Web. 
W3.CSS é um Framework CSS (Cascade Style Sheet ou Folha de 
Estilo) desenvolvida pela w3.schools.com. É utilizada para ajudar na 
criação rápida, elegante e responsiva de websites. 
Numa definição mais específica para o mundo do design de páginas 
web, Framework pode ser definido como um pacote composto de uma 
estrutura de arquivos e pastas de padronização de códigos (HTML, 
CSS, ...) a qual pode ser usados para dar suporte ao desenvolvimento 
web no sentido de melhora na organização, nas funcionalidade e na 
redução de código.
 
Introdução ao coding web ) (29 
 
Ss, DEFINIÇÃO 
=) 
Existem vários frameworks CSS disponíveis no mercado. Aqui 
utilizaremos o W3.C€SS. 
 
 
Montando a Primeira Página Web 
Pronto para decolar?! 
Será utilizado o aplicativo Notepad++ (versão 7.5.8) 
como editor de texto para escrever os códigos apresentados neste 
material. Para fazer download acesse: https://notepad-plus-plus. 
org/ . Como navergador, fique livre para escolher o que mais lhe 
agradar. 
A Estrutura básica de um documento HTML 
Na figura a seguir, pode-se notar que o documento HTML 
inicia com uma TAG <html> e finaliza com uma TAG </html>. 
Todos os documentos HTML que são montados ou encontrados 
na internet devem ter esses marcadores (TAGs) iniciais e finais. 
Um documento HTML divide-se em duas partes 
essenciais: cabeça, representada pela TAG <head> e corpo, 
representada pela TAG <body>. 
EXEMPLO 
<body> abre a TAG que faz a marcação do corpo do 
documento html. 
</body> fecha a TAG citada acima. 
Todo o conteúdo da página web que você deseja escrever 
deve estar entre as TAGs <body> e </body>. 
Então, abra o aplicativo Notepadt++ ou o de sua 
preferência e digite o seguinte código:
 
30 ) ( introdução ao coding web 
 
4 IMPORTANTE 
 
Comoregra geral, toda vez que você abrir TAG, porexemplo<body>, 
você precisará fechá-la adiante no código. Para fechar uma TAG é 
só repetir o mesmo nome da TAG incluindo uma barra logo após o 
simbolo “<”. 
 
Agora vamos olhar o corpo do documento, isto é, o que 
pode ser colocado entre as TAGs <body> e </body>. Tudo que 
for colocado entre essas TAGs será processado pelo navegador e 
apresentado na página web criada. 
Salve este arquivo com o nome de exe 1 .html. Não adiante 
querer executá-lo num navegador. Nada vai aparecer, é claro, 
pois não inserimos qualquer conteúdo ainda. Vamos explorar um 
pouco este documento. 
Diferente das versões anteriores, o HTMLS definiu 
novos elementos semânticos que podem ser utilizados entre as 
TAGs <body> e </body>. Eles estão apresentados e explicados 
a seguir: 
 
Figura 6: Estrutura básica de um 
documento HTML. 
Arquivo Editar Localizar Visualizar 
“5088 568/40 
VE exethm | 
 
<neml> 
<head> 
</head> 
<body> 
</body> 
i 
2 
3 
4 
] 
6 
T 
8 
5 <fneml> 
 
Introdução ao coding web ) (31 
 
<header> 
Define um cabeçalho para o corpo do documento ou da 
seção. 
Normalmente utilizado para representar um conteúdo 
introdutório para o corpo do documento <body> ou para o início 
de uma seção <section>. 
Usos comuns para o elemento <header>: Local para 
colocar a Logo ou icone que representa a empresa ou o assunto 
tratado, informações de autoria e quando se quer utilizar os 
elementos <h1>, <h2>, ...<h6> do HTML tradicional. 
PIN IMPORTANTE 
Não confundir o elemento semântico <hearder> com a TAG 
<head>, apresentada na figura acima. 
 
 
Figura 7: Exemplo de bloco de código HTMLS para o elemento <header>. 
a <header"> 
6 <hl>HTMLS « w3.CSS - Primeira página</hl> 
7 <h2> Este é o cabeçalho do corpo do documento.</hn2> 
B <hr> 
9 </header> 
Fonte: Própria. 
<article> 
Define um bloco de artigo dentro do documento. Permite 
especificar um conteúdo independente e antocontido. Um artigo 
é um bloco de informações que devem fazer sentido em si 
mesmos, isto é, que pode ser distribuído independentemente do 
restante do site. 
Usos comuns para o <article>: Postagens de Fóruns ou 
de Blogs, Área de Comentários do site ou de Notícias. 
Você poderá ter vários elementos <article> dentro do 
corpo do seu documento HTMLS.
 
32 ) [ introdução ao coding web 
 
Figura 8: Exemplo de bloco de código HTMLS para o elemento <article>. 
1 <article> 
<neader> 
<n1>Táítulo do artigo - cabeçalho do artigo</hl]> 
</header> 
<div> Conteúdo do artigo </div> 
<footer> 
<h4>Rodapé do artigo</h4> 
</footer> 
</article> 
Fonte: Própria. 
<section> ) 
Define uma seção para o documento. E o equivalente a 
um capítulo de um livro. Pode conter um elemento <header> - 
cabeçalho da seção — e um elemento <footer> - rodapé da seção. 
Uso comum do elemento <section>: Quando você quer 
apresentar outro assunto na mesma página. 
Você poderá ter vários elementos <section> dentro do 
corpo do seu documento HTMLS. 
Figura 9: Exemplo de bloco de código HTMLS para o elemento <section>. 
<sections 
<header> 
<hl>Título da seção - cabeçalho do seção</hl> 
</header> 
<div> Conteúdo da seção </div> 
<footer> 
<hi>Rodapé do seção</hd> 
</footer> 
</section> 
Fonte: Própria. 
<footer> 
Define um rodapé para o corpo do documento <body> 
ou para uma seção <section>. 
Usos comuns para o <footer>: Informação de autoria 
de determinada reportagem ou texto, informações de direitos 
de cópia de conteúdo, informações de contato. Pode ser usado 
também para colocar o icone que direciona para o topo da página 
ou para indicar documentos relacionados ao tópico da seção que 
o documento está tratando. 
Você poderá ter vários elementos <footer> dentro do
 
Introdução ao coding web ) (33 
 
corpo do seu documento HTML, um para cada seção e 
umpara o corpo do documento. 
Figura 10: Exemplo de bloco de código HTMLS para o elemento <footer>. 
33 | <footer» 
34 <hr> 
35 <p>Este é o radapé da página. Copyright fPraticando.edu</p> 
36 </footer> 
Fonte: Própria. 
4 IMPORTANTE 
 
É claro, em se tratando de elementos importantes na 
construção de uma estrutura organizada de arquivo HTML, 
não podemos esquecer do elemento tradicional do HTML, o 
<div>. Este elemento é tradicional desde as primeiras versões do 
HTML, em 1990 e continua presente ainda na versão HTMLS. 
Sua função é definir uma seção genérica, uma divisão dentro do 
documento HTML. 
 
Se você não tem certeza se quer abrir uma seção ou um 
artigo dentro do corpo da sua página HTML, use o elemento 
<div>. Este elemento pode ser colocado dentro de qualquer um 
dos elementos citados acima. 
Nas figuras acima, você deve ter percebido a presença de 
algumas TAGs diferentes, tais como: <h1>...<h4>... <hr>...<p>. 
Desafio você a procurar na internet o que significa cada 
uma destas tags e apresentar no FORUM.
 
34 ) ( introdução ao coding web 
 
| TESTANDO 
 
Lembra daquele seu arquivo exel html? Agora está na hora 
de usá-lo!! 
Primeiro: atualize o código daquele arquivo para o que está 
mostrado na figura abaixo: 
Figura 11: Exemplo de código HTMLS. 
<html> 
1 <head> 
</head> 
«<body> 
<header"> 
<hi>HINLS « w3.C8S - Primeira página</hl> 
<hZ> Este é o cabeçalho do corpo do documento.</h2> 
<hr> 
<fheader> 
<article> 
<header> 
<hi>Título do artigo - cabeçalho do artigo</hl> 
<fheader> 
<«div> Conteúdo do artigo </div> 
<Eooter> 
<h4>Rodapé do artigo</há> 
<ffooter> 
<farticle> 
<section> 
<header> 
<hi>Titulo da seção - cabeçalho do seção</hi> 
</header> 
<div> Conteúdo da seção </div> 
<footer> 
<h4>Rodapé do seção</há> 
</footer> 
</section> 
<footer> 
<hr> 
<p>Este é o radapé da página. Copyright E Praticando .edu</p> 
</footer> 
</body> 
</html> 
Salve o arquivo novamente, com o mesmo nome: exel. 
html 
Agora o execute no navegador Chrome, clicando no 
menu “Executar” (do Notepad++), item “Launch in Chrome”,
 
Introdução ao coding web ) (3s 
 
como mostra a figura abaixo: 
Executar Plugins fones | Figura 12: Exemplo 
| bem sr: 
Launch in Frefos Oh A Sato E | 
| Launch in E [a Ud] 
— lumhinCome Coiote 
Loures in Safari Cheia Alta Shelto É 
Get php help AM+E1 
Google Semch AheES 
“ Wiikeapendas Segech AB-FJ 
E Ogen file AM-ES 
Ogen im anothes imstançe AM-ES 
Send via Outlook Corto Ade o Gar 6) 
Modifrcar atulhe/Exthar comando... . 
Fonte: Própria. 
O resultado deve ser o mostrado na figura abaixo: 
 
Figura 3! 
HTMLS & w3.€SS - Primeira página Apresentação no 
navegador da sua 
Este é o cabeçalho do corpo do documento. primeira Página 
Título do artigo - cabeçalho do artigo 
Conteúdo do amigo 
Rodapé do artigo 
Título da seção - cabeçalho do seção 
Conteúdo da seção 
Rodapé do seção Este é o radapé da página Copyright & Praticando edu Fonte: Própria. 
Esta é a estrutura básica de uma página HTML. Um 
pouco diferente do que você normalmente vê na internet, não é? 
Nos capítulos anteriores comentamos que as primeiras 
páginas eram estáticas, sem interação e “sem vida”, pois bem, 
esse é um exemplo. 
Vamos começar a melhorar essa nossa página? Então... 
sigam-me os bons!
 
36 ) ( introdução ao coding web 
Um pouco de “Estilo”, por favor! 
Falando de Estilo, permita-me apresentar os recursos 
básicos do W3.€ ss. 
Este Framework trabalha com classes. 
Cada classe tem uma função específica (alteração de cor 
de fundo, tipo ou cor da letra, mostrar botões, definir margens, 
entre outras). A tabela abaixo apresenta algumas dessas classes 
que trabalham com cores: 
TONI RN ED 
 
Antes de dar continuidade, salve o seu arquivo exel.html como 
exe2.html. Desse modo você fica com o histórico de cada exercício 
que fazemos aqui e depois pode comparar o resultado alcançado. 
 
 
CLASSE DESCRIÇÃO 
w3-color DEFINE A COR DE FUNDO DE QUALQUER ELEMENTO HTML. 
w3-text-color DEFINE À COR DO TEXTO DE QUALQUER ELEMENTO HTML. 
 
DEFINE A COR DE FUNDO DE QUALQUER ELEMENTO HTML 
w3-hover-color QUANDO O PONTEIRO DO MOUSE PASSA SOBRE ELE. 
DEFINE A COR DO TEXTO DE QUALQUER ELEMENTO HTML 
w3-hover-text-color QUANDO O PONTEIRO DO MOUSE PASSA SOBRE ELE. 
O, TESTANDO 
 
Se você quiser definir a cor de fundo do elemento <header> da 
página web como “vermelha”, deve usar a classe w3-color da 
seguinte maneira: <header class = “w3-red”>
 
Introdução ao coding web ) [37 
 
VIA ENTRO 
 
A palavra “color” de qualquer uma das classes apresentadas na 
tabela acima deve ser trocada pela cor de preferência, quando da 
utilização destas classes dentro do código HTML. 
 
Caso você esteja ávido por resultados e já alterou a 
linha de código do exe2.html para corresponder ao exemplo 
acima, salvou e tentou executar no navegador, deve ter ficado 
decepcionado, não foi? Por que nada de diferente aconteceu. 
Fique calmo! Fiz isso de propósito para, caso isso 
acontece em outro momento, você saiba como resolver. Vamos 
lá: 
Lembra que comentamos nos capítulos anteriores que o 
navegador interpreta o código HTML de acordo com as TAGs 
de marcação e apresenta o resultado na tela. Pois bem, se o 
navegador não modificou em nada o resultado, depois que você 
inseriu a linha do exemplo acima, pode ter dois motivos: 
Primeiro: Você cometeu algum engano ao digitar a 
linha de código. Preste muita atenção quando estiver digitando 
o código HTML, por que se você esquecer qualquer letra ou 
simbolo, o navegador não vai entender e o resultado não será 
como o esperado; 
Segundo: Por padrão, o navegador entende o código 
HTML, mas para que o navegador saiba que você está usando 
classes de estilo do framework W3.CSS, você precisa informa- 
lo!! De outro modo não tem como ele adivinhar, não é !? 
Possivelmente, depois de você ter conferido letra por 
letra do código que escreveu e garantir que tudo está escrito 
corretamente, o seu problema deve ser o mesmo que o meu, 
neste momento: Inserir uma linha de código que informe ao
 
38 ) [ introdução ao coding web 
 
navegador que queremos usar o framework W3.CSS para 
implementar o estilo da página. Para isso, insira a seguinte linha 
de código dentro do <head> do seu arquivo. 
Seu código deve ficar como mostra a figura abaixo: 
Figura 14: Como identificar o W3.€5S5 para o navegador. 
<html> 
<link rel = "stylesheet" href = "https://wwa.wischools,com/Lib/w3,cas"> 
t 
 ader class = "wi-red'> 
*HTMLS & W3.C55 - Primeira página</hl> 
> Este é o cabeçalho do corpo do documento.</h2> 
</header> 
Fonte: Própria. 
A linha 3, da figura acima, está a dizer para o navegador 
que este seu documento exe2.html precisa fazer uma ligação 
(link) para um documento extemo, que se refere a uma folha 
de estilo (stylesheet) e que este documento externo pode ser 
encontrado no endereço determinado pela palavra-chave href. 
Com essa linha de código digitada de maneira correta, o 
navegador, ao ler seu arquivo exe2 html, saberá que deverá incluir 
uma biblioteca de classes de folha de estilo e, depois que você 
salvar e executar no navegador, verá que a linha <header class 
= “w3-red”> inserida há pouco, será reconhecida e o resultado 
apresentado pelo navegador vai mudar consideravelmente. Faça 
o teste! 
TESTANDO 
No seu arquivo exe2.html, faça as seguintes alterações: 
Mude a cor da letra do artigo para vermelha; 
Mude a cor de fundo do rodapé do artigo para marrom; 
Mude a cor “hover” de fundo da seção para verde; 
Mude a cor “hover” do texto para amarelo. 
Eu sei que não vai ficar bonito e nem combinando, mas é só para 
testar o que você aprendeu. O resultado deve ser parecido com o 
que está apresentado na figura a seguir: 
 
 
 
Introdução ao coding web J (39 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 3: 
Resultado do HTML5 & w3.€SS - Primeira página 
Este é o cabeçalho do corpo do documento.ítulo do artigo - cabeçalho do artigo 
Conteúdo do artigo 
Rodapé do artigo 
ítulo da seção - cabeçalho do seção 
onteúdo da seção 
Rodapé do seção 
Fonte: Própria. 
Note que, aparentemente, nada mudou na seção e nem no 
rodapé da página. Mas experimente passar o mouse sobre a parte 
da página onde está a seção e depois desça um pouco o mouse e 
passe sobre a área em que está o rodapé da página e veja o que 
acontece. 
Bom, se a parte relativa à seção ficou verde com letras 
brancas e a parte do rodapé da página ficou com as letras 
amarelas, você está indo muito bem, parabéns!! 
Outras classes W3.CSS serão apresentadas no decorrer 
deste material, tão logo sejam necessárias. 
Agora que você já teve uma pequena ideia do que se 
pode fazer, vamos montar uma página mais útil. Que tal um Blog 
Pessoal? 
Meu Blog Pessoal - Parte 1 
Vamos ao projeto. Mas todo o projeto de página web 
precisa de um layout inicial, mesmo que ele mude no decorrer 
do projeto, precisamos de um para inicia-lo. Sendo assim, segue 
minha sugestão de layout para o nosso Blog Pessoal.
 
40 ) ( introdução ao coding web 
 
PIN IMPORTANTE 
 
Antes de dar continuidade, salve o seu arquivo exe? html como 
exe3 blog html. Desse modo você fica com o histórico de cada 
exercício que fazemos aqui e depois pode comparar o resultado 
alcançado. 
 
 
Para facilitar o entendimento durante a execução do projeto, seria 
muito interessante que você seguisse o mesmo layout. Depois, 
quando for resolver os exercícios propostos, terá oportunidade de 
 
 
 
 
 
 
 
fazer o seu próprio layout. 
Veja minha sugestão de layout apresentada na figura 
abaixo: 
Figura ló: 
Sugestão de 
HEADER JueaDer Layout para o 
2conreúpo Blog Pessoal 
4- COLUNA 5- COLUNA 
ESQUERDA: DIREITA: 
POSTAGENS DESCRIÇÃO 
PESSOAL 
6- COLUNA 
DIREITA: TOP 
5 
7- COLUNA 
DIREITA: 
FILTRO DE 
POSTAGENS 
 
3FOOTER Fonte: Editorial
 
Introdução ao coding web ) (41 
 
No primeiro momento pode parecer confuso, mas relaxe. 
Vamos um passo por vez, e no final, você verá que não foi tão 
dificil assim! 
Passo 1: Montar a Estrutura Básica 
Identificar as regiões da página web a serem 
desenvolvidas: Conforme podemos ver na legenda da figura 
acima, a nossa página é composta por três partes fundamentais, 
indicados pelos números 1,2 € 3. 
Dessa forma, já podemos escrever a estrutura básica do 
nosso blog, conforme mostra a figura abaixo: 
Figura 17: Código da estrutura 
 
"UTE-=B"> 
o da página Web 
>Meu Blog Pessoal</title> 
< k para que o navegador entenda as classes do W3.C55 a 
<link rel="styLesheet” hrof="https://www, wIschools, com/w3cs5/4/w3.cas"> 
 
 
<! Corp da página Web 
"w3-Light-grey"> 
io do Corr 
 
 
 
 
1><b>Meu Blog Pessosl</b></hl> 
>Seja Bem vindo.</p> 
) da página Neb --> 
c ="w3-blue"> 
<p>conteúdo da página</p> 
 
Fonte: Própria. 
Algumas linhas de código da figura acima precisam ser 
explicadas. O bloco de linhas de 1 a 5 e as linhas 7, 10, 12, 15, 
17, 22 e 26 são linhas de comentário. Um comentário sempre 
com a sequência de caracteres: “<!--” e termina com “>”. 
Tudo que você escrever como comentário será ignorado 
pelo navegador. Ele serve para você anotar lembretes, informação 
sobre a data ou o autor do código
 
42 ) [ introdução ao coding web 
 
e outras informações úteis para consulta posterior. Serve 
também para deixar o seu código mais fácil de ler e entender. A 
linha 10 permite ao navegador entender os caracteres especiais 
utilizados na escrita da língua brasileira, tais como “ç” e 
acentuações. 
Explicando algumas TAGs: 
<title> ...</title> - Define o título da página que 
aparece na aba do navegador; 
<hl>texto</hl> - Formata o texto em cabeçalho 
nível 1; 
<b>texto</b> - Formata o texto em negrito; 
<p> texto</p> - Formata o texto em parágrafo; 
Caso você execute o código no seu navegador, ele 
mostrará algo meio decepcionante, parecido com a figura abaixo: 
TA Figura IS: 
/ [5 Meu Blog Pessoal x <hB Resultado do 
código da 
CO - (exe3 blog.html 
EE: Apps G Google || DICIONARIOS [| EMAIL 
Meu Blog Pessoal 
 
ij fes pao o 
mola iRsib o oM nf (e Ipe] 
Própria. 
Como foi falado anteriormente, o W3.C SS possui muitos recursos 
de estilos. São classes que tratam bordas, alinhamento, formatação de 
blocos de conteúdo, botões, menus, espaçamentos, cores, etc.
 
Introdução ao coding web ) (43 
 
Observe abaixo algumas classes de estilo do W3.CSS 
separadas por categorias: 
BLOCOS DE CONTEÚDO 
w3-container - Adiciona um espaçamento de 16px à 
esquerda e à direita de qualquer elemento HTML. É muito 
útil para os elementos como <div>, <article>, <header>, 
<footer>, entre outros porque garante que todo o conteúdo 
desses elementos tenham o mesmo padrão de margem, 
espaçamento, alinhamento, tipo e cor de fonte, etc.; 
w3-card - Simula um cartão de apresentação de 
papel em qualquer elemento HTML. Variações: 
w3-card-2 - com borda com sombra de tamanho 
2px; 
w3-card-4 - com borda com sombra de tamanho 
4px; 
w3-tag - Perfeito para apresentar notas e informações 
dentro da página. 
ALINHAMENTO EESPAÇAMENTO 
w3-center - Centraliza conteúdo; 
w3-right - Flutua (floats) um elemento para a direita; 
w3-left - Flutua (floats) um elemento para a esquerda; 
w3-padding - Espaçamento de 8px em cima e 
embaixo, e 16px à esquerda e à direita do elemento; 
w3-padding-16 - Espaçamento de 16px em cima e 
embaixo do elemento; 
w3-padding-32 - Espaçamento de 32px em cima e 
embaixo do elemento; 
w3-padding-large - Espaçamento de 12px em cima 
e embaixo, e 24px à esquerda e à direita do elemento. 
Com algumas das classes listadas nas tabelas acima, 
podemos dar o segundo passo na construção do nosso Blog.
 
44 ) [ introdução ao coding web 
 
Passo 2: Tratar o Cabeçalho da Página 
Como você deve se lembrar, o cabeçalho da página é o 
conteúdo que está entre as TAGs <header> e </header>. 
Seria interessante, por exemplo, centralizar os textos 
do cabeçalho e colocar seu nome nele. O que me diz? Vamos 
tentar? 
Então faça a seguinte alteração na linha 18 do seu 
código: 
I <header elass="w3-container w3-center w3- 
padding-32 w3-red” 
E na linha 20: 
I <p>Seja bem-vindo! Criado por <span class="w3- 
tag”>NOME</span> </p> 
Se você salvar e executar no navegador, o resultado deve 
ter ficado assim: 
Figura 19: 
Formatando o 
cabeçalho da 
Meu Blog Pessoal 
Seja Bem vindo. Criado por NOME 
 
odapédepágina Fonte: Própria. 
Analisando o resultado, percebemos que a classe w3- 
padding-32 adicionou espaços de 32 pixels em cima e embaixo 
do cabeçalho. A classe w3-center, centralizou o conteúdo e a 
classe w3-container padronizou todo o conteúdo do cabeçalho. 
Na linha 20, a classe w3-tag coloca uma etiqueta 
retangular, de cor preta, para destacar o NOME do criador do 
Blog. A propósito, troque a palavra NOME pelo seu próprio 
nome.Ainda na linha 20, a TAG <span> não tem nenhuma 
função especial, apenas permite utilizar a classe exclusivamente 
para a palavra NOME. Sem usar a TAG
 
Introdução ao coding web ) (as 
 
<span> não seria possível trocar a cor da fonte ou destacar 
apenas uma parte da frase. 
Passo 3: Tratar o Rodapé da Página 
Olhando em detalhes o layout sugerido para o rodapé da 
página, reparamos que ele tem o seguinte esquema: 
Figura 20: Do lado esquerdo, temos dois botões (Anterior e Próximo), no meio temos 
um texto e do lado direito tempo três icones que representam as redes sociais ou canais 
de youtube que fazemos parte. 
 
 
Anterior Próximo 
 3FOOTER 
Fonte: Editorial 
PIN Id IO 
Antes de dar continuidade, salve o seu arquivo exe3 blog.html 
como exe4 blog. html. Desse modo você fica com o histórico de 
cada exercício que fazemos aqui e depois pode comparar o resultado 
alcançado. 
 
 
Observe abaixo as classes que você precisa conhecer 
para formatar o rodapé da página com as especificaçõesdadas, 
veja: 
BOTÕES E BARRAS 
w3-button - Botão retangular com fundo cinza 
quando apontado pelo mouse; 
w3-btn - Botão retangular com sombras quando 
apontado pelo mouse; 
w3-button - Botão retangular com fundo cinza 
quando apontado pelo mouse; 
w3-ripple - Botão retangular com efeito de 
ondulação; 
w3-bar - Pode ser usada para agrupar elementos 
(como botões) em uma barra horizontal;
 
46 ) [ introdução ao coding web 
 
BORDAS E MARGENS 
w3-margin - Adiciona margem de 16px em um 
elemento; 
w3-margin-top - Adiciona margem superior de 
16px em um elemento; 
w3-margin-left - Adiciona margem esquerda de 
16px em um elemento. Substituindo as palavras top e 
left por botton e right, temos o mesmo efeito de margem 
mencionado acima, só que para as margens inferior e 
direita, respectivamente.; 
w3-border - Adiciona borda em um elemento; 
w3-border-top - Adiciona borda superior em um 
elemento. Substituindo a palavra top por bottom, left ou 
right, temos o mesmo efeito de borda mencionado acima, 
mas agora para as margens inferiores, esquerda e direita, 
respectivamente. 
w3-border-color - Adiciona cor para a borda. 
Deve substituir a palavra color pela cor desejada, 
exemplo: w3-border-red. 
LAYOUT 
w3-cell-row - Contêiner para células (cada célula 
formará uma coluna): 
w3-btn - Célula em si (Coluna): 
w3-button - Alinha o conteúdo para a parte 
superior da célula (coluna). 
Substituindo a palavra top por bottom ou middle, 
temos o mesmo efeito de posicionamento do conteúdo 
no interior da célula, mas agora para as partes inferior e 
central, respectivamente. 
Utilizando de algumas das classes listadas nas tabelas 
acima, podemos, então, dar continuidade ao nosso projeto. 
Agora, altere a parte do seu código referente ao <footer> 
para ficar como o exemplo abaixo:
 
Introdução ao coding web ) [47 
 
tigira Bl: Remi de código HTML com <footer>. 
<l- odapé da pá: Web 
<faoter class="y3: tainer ES w3-margin-top w3-cell-row"> 
<div class="wy3-contaíinear w3-red w3-cell wI-cell-top"> 
<button class="w3-button w3-black w3-disabled w3-padding-large 
3 w3-margin-bottom">Anterior</button> 
32 «button class="w3-button w3-black w3-padding-large 
w3-margin-bottom">Próximo »</button> 
 
 
 
Sã | </div> 
«div class="w3-container w3-green w3-cell wã-cell-bottom"> 
<br><br><br> 
«<p>Introdução ao Coding (web) by Luiz Fernando Corcinic/p> 
</div> 
<div class="w3-container w3-blus w3-cell w3-call-top"> 
class="w3-padding w3-xxlarge fa fa-facebook"></a> 
class="w3-padding w3-xxlarge fa fa-twitter"></a> 
42 <a hretengr class="w3-padding w3-xxlarge fa fa-instagran"></a> 
43º | </div> 
44 | <tfooter> 
Fonte: Própria. 
Para que tudo funcione adequadamente, insira a seguinte 
linha dentro do <head> do seu código: 
<link | rel="stylesheet” href="https:/'ednjs. 
cloudflare.com/ajax/libs/font-awesome/4. 7.0/ess!font- 
awesomemin.css”> 
Salve seu código e execute no navegador. O resultado 
deve ser o seguinte: 
Meu Blog Pessoal 
[RR e Re Er Ra O RE A Rai To fe ça] 
 
Antes que você reclame das cores de “gosto duvidoso”, explicamos 
que só está assim para você perceber o que está acontecendo no 
código. Logo deixaremos as cores menos “peculiares”.
 
48 ) ( introdução ao coding web 
 
E Com relação às colunas: Na linha 28 da figura 21, vemos 
que a classe w3-cell-row define que o nosso rodapé da página será 
composto por várias células, cada uma correspondendo a uma 
coluna. Como você pode perceber pelo resultado apresentado 
na figura 22, temos 3 colunas. Cada uma dessas colunas é um 
elemento <div> dentro do elemento <footer> (rodapé). 
Analise as linhas 29, 35 e 39 da figura 21 e você encontrará 
a classe w3-cell. Esta classe permite que o navegador entenda cada 
elemento <div> como uma célula pertencente ao rodapé. Caso 
você queira colocar mais colunas, é só inserir mais um elemento 
<div> atribuindo a ele a classe w3-cell também. 
E Com relação às cores: as cores das células estão dessa 
maneira porque em cada uma dos elementos <div> estão definidas 
as cores: w3-red (na linha 29), w3-green (na linha 35) e w3-blue 
(na linha 39). Você pode mudar as cores se quiser ou simplesmente 
tirar estas classes de cores das linhas citadas. Caso você escolha 
pela última opção, todo o rodapé ficará da cor definida na linha 28, 
ou seja, w3-dark-grey (cinza escuro). 
E Com relação à primeira célula: É resultado do primeiro 
grupo do elemento <div> (da linha 29 até a linha 34). Nesta célula 
estão contidos dois botões, como podemos reparar nas linhas 30 
e 32. Porém, na linha 30 existe uma classe (w3-disabled) que 
desabilita o botão “Anterior” por esse motivo que ele aparece com 
uma cor diferente do botão “Próximo”, no navegador. 
Outra classe (w3-cell-top) também está presente nesta 
primeira célula. Ela indica que o conteúdo desta célula deve ficar 
alinhada à parte superior da mesma. 
E Com relação à segunda célula: É o resultado do segundo 
grupo do elemento <div> dentro do rodapé, entre as linhas 35 e 
38, na figura 21. Esta célula possui apenas um texto comum no 
formato de parágrafo, mas está alinhado à parte inferior da célula 
por conta da classe w3-cell-bottom atribuida a ela, na linha 35. 
m Com relação à Terceira célula: É o resultado do terceiro 
grupo do elemento <div> (entre as linhas 39 e 43). Também está 
alinhado à parte superior da célula, como no primeiro grupo e sua
 
Introdução ao coding web ) (49 
 
cor de fundo está definida como azul (w3-blue). 
Dentro deste grupo podemos encontrar 3 linhas muito 
parecidas: 40, 41 e 42. Cada uma delas é responsável por um 
icone de rede social apresentado nesta célula. A linha 40 para o 
icone do facebook. A linha 41 para o do Twitter e a 42 para o do 
Instagram. 
O nome para os ícones de cada uma das redes sociais 
apresentadas na célula são “fa fa-facebook” , “fa fa-twitter” e 
“fa fa-instagram” e eles estão sendo apresentados no tamanho 
extra-extra-large, definido pela classe w3-xxlarge. 
Não fique bravo comigo! Estes nomes para os icones 
são definidos pela novo link para a segunda folha de estilos que 
inseriu no <head> do seu arquivo. Este link foi apresentado na 
página anterior e está logo abaixo da figura 21. Sobre o tamanho 
dos ícones, caso você queira aumentá-los ou diminuí-los é só 
alterar a classe w3-xxlarge para uma das seguintes alternativas: 
w3-tiny, w3-smalil, w3-medium, w3-large, w3-xlarge, 
w3-xxlarge, w3-xxxlarge e w3-jumbo. 
Não se preocupe, por enquanto com a TAG <a href....></ 
a>. Oportunamente seu funcionamento e sintaxe serão 
explicados. 
Muito bem. Sugiro que você retire as classes de cores 
das linhas 29, 35 e 39. Se possível, retire também a classe de cor 
do elemento <header>, na linha 18. Assim, nosso Blog vai ficar 
menos.... como direi.... “peculiar” e ficará parecido com a figura 
abaixo: 
Figura 23:A única cor em destaque agora é a referente ao bloco que ainda não 
tratamos: o conteúdo da página. Assim fica mais fácil da gente se localizar. 
Meu Blog Pessoal 
Seja Bem vindo. Criado por EESES 
 
[inca ane oe cos DC a DO REA a ie] 
Fonte: Própria.
 
50 ) [ introdução ao coding web 
 
Você já deve ter tentado clicar nos botões e verificou que 
eles não estão funcionando. 
Não se preocupe, em breve aprenderemos como deixar 
tudo funcionando. Por enquanto, vamos nos concentrar em 
montar o layout do projeto do Blog em condições. 
Para finalizar este tópico, segue o código atualizado até o 
momento: 
 
 
 
 
 
 
Eae Figura 24: « cabeça da página Web --> : 
cheado Código 
ma atualizado 
até o 
lasses do N3.C85 -—> momento 
httpar//wer wischooia. com/vican/4/wã.can"> 
cf="httpa://cdnis.cloudílare.con/ajax/Libaí 
font-awesone/4.7.0/cas/Font-amesome min. cas"> 
rpo da página Web --> 
à-container wi-center w]-padding-12"> 
<h Meu Blog Pesscal</b></hl> 
<p>seja Bem vindo. Criado por <span class="w3-tagr>N0ME</spans</p> 
da página Weliv cl 3-blus"> 
«preonteúdo da página</p> 
etdiv> 
a jina Web 
< te container wj-dark-grey wi-margin-top wI-cell-row > 
<d minar wi-cell w3-cell-top"> 
w3-button w3-black w3-disabled wl-padding-larçe 
wI-margin-bottom">Anterior</button» 
«button classe*w3-button wi-black wI-padding-large 
w3-margin-bottom->Próximo s</burton> 
«tdiv 
<d -container wI-cell w3-cell-bottom"> 
r><br> 
p>Introdução ao Coding (web) by Luiz Fernando Corcinic/p> 
<idiv> 
ediv class="wi-container v3-cell w3-cell-top"> 
" 3-paddlaçg wI3-xxlarge fa fa-facebook "></a> 
3-padding v3-xxlarge fa fa-tuittez"></a> 
3-padding w3-xxlarge fa fa-instagrant></s> 
sai 
eftodir Fo n te: 
</huml> Própria. 
Aprimorando os conhecimentos em 
HTML & W3C5SS 
Seja bem-vindo a última parte desta Unidade letiva. Já 
fizemos muita coisa e vamos fazer ainda mais! Espero que você 
esteja gostando do aprendizado.
 
Introdução ao coding web ) (s1 
 
 
Uma estrutura básica deuma página HTMLS é formada pelos elementos 
<head> e <body>. No <head> definimos o título da página e os link 
para as folhas de estilo. Por enquanto inserimos dois links. O <body> 
pode ser dividido em cabeçalho: <header>; conteúdo: <article> <div> 
e <section>; rodapé: <footer>. Aprendemos também que o W3. CSsé 
inserido no código HTMLS por meio de classes. Existem vários tipos 
de classes e cada uma trata de um estilo em particular, como bordas, 
tamanho da fonte, cor de fundo, alinhamento de conteúdo, etc. 
 
 
Meu Blog Pessoal - Parte 2 - Continuação 
PIN IMPORTANTE 
Antes de dar continuidade, salve o seu arquivo exe4 blog.html 
como exe5 blog html. Desse modo você fica com o histórico 
de cada exercício que fazemos aqui e depois pode comparar o 
resultado alcançado. Dando continuidade a construção do nosso 
Blog, passamos ao quarto passo. 
 
 
Passo 4: Tratar o Conteúdo da Página 
Conforme definido pela figura 16, o conteúdo da página 
deve ser comporto por duas colunas. A coluna da esquerda deve 
conter as postagens e deve ocupar, aproximadamente, 60% da 
largura da página. A coluna da direita é formada por três blocos 
menores, dispostos na vertical. O primeiro deve conter uma foto 
e informações sobre o dono e mantenedor do Blog. ou seja, você. 
O segundo bloco deve conter a lista das cinco postagens mais 
comentadas do seu blog (Top 5) e o terceiro bloco deve conter 
um filtro para que os leitores possam selecionar as postagens que 
gostariam de ler por
 
52 ) [ introdução ao coding web 
 
assunto ou categoria. Fazendo um recorte da figura 16, 
temos o seguinte: 
JHEADER 
 
 
Figura 25: Recorte da figura 
16. 
CONTEÚDO 
 
4- COLUNA 
ESQUERDA: 
POSTAGENS 
5- COLUNA 
DIREITA: . 
DESCRIÇÃO 
PESSOAL 
 
6- COLUNA 
DIREITA: TOP 
5 
 
7- COLUNA 
DIREITA 
FILTRO DE 
POSTAGENS 
 
 SFOOTER 
A tabela a seguir apresenta as classes que você 
Fonte: Própria. 
precisa conhecer para formatar o conteúdo da página com as 
especificações dadas pela figura 25. 
GRID RESPONSIVO 
w3-row - Contêiner para classes responsivas, sem 
espaçamento; 
w3-row-padding - Contêmer para classes 
responsivas, com espaçamento de 8px à esquerda e a 
direita; 
w3-col - Define uma coluna emum gridresponsivo; 
w3-hide-medium - Esconde o conteúdo quando 
a tela é redimensionada do tamanho grande para médio 
(telas de tablets); 
w3-hide-small - Esconde o conteúdo quando a 
tela é redimensionada do tamanho médio para pequeno 
(telas de celular).
 
Introdução ao coding web ) (ss 
 
Utilizando de algumas das classes listadas nas tabelas 
acima, podemos, então, dar continuidade ao nosso projeto. 
Agora substitua a parte do seu código referente ao 
conteúdo da página <div> (das linhas 25 a 27) para ficar como 
mostrado abaixo: 
<div class="w3-row”> 
<div class="w3-col w3-container w3-green” 
style="width:65%”> <p>20%</p> 
</div> 
<div class="w3-col w3-contamer w3-blue” 
style="width:35%”><p>60%</p> </ div></div> 
Salve o código e execute-o em seu navegador. O resultado 
deve ser o seguinte: 
Figura 26: 
Meu Blog Pessoal Image a 
Ê RR parcia 
es EN do Blog 
Pessoal em 
construção 
Fonte: 
Própria. 
 
Repare que temos as duas colunas que precisamos 
para o conteúdo do nosso blog. Repare também que se você 
redimensionar a página, aumentando ou diminuindo sua largura, 
o percentual de espaço disponível para cada coluna se mantém. 
Isso é chamado de conteúdo responsivo, em projetos de páginas 
web. 
PIN IMPORTANTE 
 
Se você quiser saber mais sobre conteúdos responsivos, leia a 
reportagem: “9 princípios básicos do Web Design Responsivo”, no 
link: https://marketingdeconteudo.com/web-design-responsivo/ 
 
 
54 ) [ introdução ao coding web 
 
Explicando o Código inserido: 
A primeira linha inserida: <div class="w3-row”> , deve 
substituir a linha 25 do seu código (figura 25). Ela atribui a nossa 
div a classe w3-row. Isso significa que, conforme apresentado na 
tabela da página anterior, o conteúdo do nosso blog será formado 
por um contêiner de classes esponsivas, isto é, um contêiner que 
se adapta ao tamanho da tela do seu navegador. Este contéiner 
é uma linha (row) que será dividido em duas colunas (col). Isso 
pode ser verificado nas duas linhas que se seguem: 
<div class="w3-col w3-container w3-green” 
style="width:65%”> <p>texto 1</p> </div> 
<div class="w3-col | w3-container | w3-blue” 
style="width:35%”"=<p>texto 2</p> </div> 
Na primeira linha o elemento <div> está definido como 
uma coluna (w3-col), de cor verde (w3-green), deve ocupar 65% 
da largura da tela ( “style="width:65%””). 
Na segunda linha, outro elemento <div> está definido 
também como uma coluna (w3-col), de cor azul (w3-blue), deve 
ocupar 35% da largura da tela ( “style="width:35%”). 
Passo 5: Tratar a coluna direita do Conteúdo 
da Página 
Conforme mostrado na figura 25, a coluna direita do 
conteúdo do nosso blog deve ser formado por 3 blocos de 
informação dispostos na vertical. Vamos chamar o primeiro 
bloco de “Apresentação”, o segundo de “Top 5” e o terceiro de 
“Filtros”. 
Vamos tratar estes 3 blocos como cartões (w3-card) 
e definir uma margem para eles (w3-margin). Sendo assim, 
nosso código fica da seguinte maneira:
 
Introdução ao coding web ) (ss 
 
<!-- Conteúdo da página eb —> Figura 27: 
=cOM" > £ a 
O caga == Código 
-"w3-col w3-container wI-gresa" stylo-"uidth:654º> io ste atualizado 
 
 
 
 
ta —» 
container w3-blue" style="width:354º> 
<td Ar ão --> 
<dlv classe-ys-cara wa-margin"> 
e apresentaçãos/p> 
<fdiv> 
<hr> 
<!-— bloco TOP 5 —> 
«<div class="y3-card w3-margin"> 
«<p>bloco TOP 5</p> 
</div> 
<hr> 
<!-- bloco Filtros —> 
<div clasze"yd-card w3-margin*> 
«pshlece riltros</p> 
</div> Po 
<fdiv> Fonte: Própria. 
<tdiv> 
 
IMPORTANTE 
 
Antes de dar continuidade, salve o seu arquivo exe5 blog.html 
como exe6 blog.html. Desse modo você fica com o histórico de 
cada exercício que fazemos aqui e depois pode comparar o resultado 
alcançado. 
Note que existe uma TAG <hr> nas linhas 36 e 41. A 
função desta TAG é exibir uma linha horizontal para separar 
os blocos. Salve o códico e execute-o em seu navegador O 
resultado deve ser parecido com este: 
Figura 28: 
Meu Blog Pessoal Resultado 
Seja Bem vindo. Criado por EIN da última 
alteração no 
Blog Pessoal 
Fonte: 
Própria. 
 
 
56 ) [ introdução ao coding web 
 
Passo 5.1: Tratar o bloco “Apresentação” 
Para inserir a imagem, utilizaremos a TAG <img ...> do 
HTML. Ela tem a seguinte sintaxe básica: 
<img src = “endereço da imagem” 
style="width: 100% "> 
Utilizamos a largura da imagem igual a 100% para que 
a mesma ocupe todo o espaço disponível neste elemento <w3- 
card>. 
Sei que você pode ter sido pego desprevenido e estar sem 
uma imagem sua em condições para colocar neste exercício. Se 
esse for o caso, utilize o seguinte endereço de imagem: 
| <img src = “https:/Avuww3schools.com/ 
w3images/avatar gjpg” style="width:100%”> 
Mas, caso você tenha umaimagem sua e que queira 
utilizar, pode endereça-la da seguinte maneira: 
| <img src = “el... Isua foto jpg” 
style="width: 100% "> 
Para inserir uma breve descrição logo abaixo da 
imagem, usamos um novo elemento <div> definido com cor 
branca (por exemplo) que contenha um texto explicando quem 
você é, o que gosta de fazer, etc. Por fim, nosso código para o 
bloco de apresentação ficaria assim: 
Figura 29: Código atualizado 
a da direita --> 
sss="W3-col w3-container wI-blus” sryle="width:354"> 
 
> entação 
“u3-card w3-margin"> 
"nEtpa://wus vinchooia.com/WIimagas/AVAGAR G.3Pg” suyles"uidth:1008"> 
v="wi-container wI-white”> 
<b> cbomeu Nomec/br</h4> 
<p>Apenas eu, eu e eu mesmo, explorando o universo do conhecimento. 
Tenho interesse em.... e quero compartilhar minhas ideias com você!</p> 
 
raio 
Em seu navegador, o resultado deve ser mais ou menos 
como na figura abaixo: (Não se esqueça de salvar o arquivo 
antes de executá-lo.)
 
Introdução ao coding web J [57 
 
Figura 30: 
Resultado parcial 
na Po do Blog Pessoal em Sega Bem vinca. Crindo por EEN a 
construção 
 
Fonte: Própria. 
Passo 5.2: Tratar o bloco “TOP5” 
Conforme planejado, o bloco TOPS deve conter as cinco 
postagens mais comentadas em seu blog. Vamos montar algo 
mais ou menos parecido com o esquema abaixo: 
 
POSTAGENS MAIS POPULARES 
 
| Titulo da postagem 
Número de comentários 
Foto 
Título da postagem 
| Número de comentários 
Foto 
Foto | Título da postagem 
| Número de comentários 
| Título da postagem 
Número de comentários 
[eo | pat decr 
É claro que neste momento ainda não temos postagens 
e seria, então, impossível relacionar as 5 postagens mais 
comentadas. Mas, apenas por uma questão de apresentação do 
nosso projeto, vamos simular as postagens, colocando-as em 
código. Na segunda Unidade letiva aprenderemos como deixar 
isso automático. 
Para esta etapa do código, precisamos conhecer as 
seguintes classes de formatação de Lista: 
Foto 
 
 
58 ) ( introdução ao coding web 
 
w3-ul - E usada para mostrar uma lista básica; 
w3-hoverable - Apresenta um fundo de cor cinza 
quando se passa o mouse sobre o item da lista; 
W3-padding - Usado para dar espaçamento aos 
itens da lista.] 
Assim sendo, nosso código fica mais ou menos assim: 
Figura 32: Código atualizado 
 
 
m
m
 <i=- bloco TOP E --> 
<div class="wi-card vl-margin'> 
«<div class=-w3-container wl-padding"> 
«<n4>Postagens Mais Populares</n4> 
</div> 
<ul class="w3-ul wl-hoverable wl-mnite> 
<lá class="y-padding-16*> 
<img src="httpa://mem vischoçia.com/niimaçes/wozkshop. ipa” 
class=*w3-left w3-margin-right” style="width: 50px"> 
<span claso="wi-lazge">Dez motivos para aprender WINLS + WJ.C55</span> 
«<br> 
<span>Comentários: 142</span> 
<i> 
<li class="w3-padding-16"> 
<img src="hitpa://memrmischoola.com/nlimagen/wozkahop, pg” 
classe"yl-left wl-margin-right” style="width: 50px"> 
<span classecwã-larçe">Experiência em Gravidade 0</span> 
<br> 
<span>Comentários: 10</span> 
<li> 
«<li class=*wJ-padding-16"> 
<img crce"httpa: //mene mischooia.com/viimaçes/gondol. ipa” 
class=*w3-left w3-margin-zight” style="width: 50px"> 
<span class="wi-large">Como morar sozinho</span> 
«<br> 
«<spar>Comentários: 7</span> 
<li> 
<li class="w3-padding-16"> 
<img src=-"httpa://memr miachoola.com/viimages/skies spo” 
classe"wJ-left wJ-margin-right” style="width: 50px"> 
<span classe“w3-large">Melhores músicas anos 90</span> 
<br> 
<span>Comentários: J</span> 
<li> 
<li E repiaaliva cromo Ace! wI-hide-medium w]-hide-small'> 
<img srce 
class="w]-left wI-margin-right“ style=“width:50px"> 
<span class="wI-large">O que fazer num sábado chuvoso</span> 
<br> 
<span>Comentários: 2</sparn> 
<p> 
Explicando o código: Entre as linhas 44 e 46 definimos o 
cabeçalho para este bloco, com um elemento <div>. 
IMPORTANTE 
 
Explicando o código: Entre as linhas 44 e 46 definimos o cabeçalho 
para este bloco, com um elemento <div>. 
 
 
Introdução ao coding web ) [59 
 
Na linha 47 abrimos a TAG <ul>. Esta TAG é usada 
quando queremos apresentar uma lista não ordenada (sem 
ordenação numérica). Cada item da lista deve iniciar com a TAG 
<li>, conforme o exemplo abaixo (em HTML sem W3.CSS: 
<h2> Bebidas:</h2> 
<ul> 
<Ji>Café</li> 
<Ji>Chá</i> 
<Ji>Leite</li> 
</ul> 
Voltando ao código da figura 32, temos que, na linha 47 
a TAG <ul> as classes w3-ul e w3-hoverable. A primeira define 
o formato para a lista e a segunda é responsável por colorir de 
cinza um determinado item quando o mouse passa sobre ele. 
Repare que os blocos de código entre as linhas 48 
e 54 se repetem 5 vezes, até a linha 82. Isto acontece porque 
não estamos usando banco de dados para recuperar os dados e 
apresenta-los na página web. Por enquanto vamos fazer assim, 
mas nas próximas unidades aprenderemos como deixar este 
código automático e então, evitar a repetição de código. Salve o 
código e execute-o no navegador. 
A aparência do bloco TOP5 deve ser mais ou menos 
essa: 
Postagens Mais Populares 
Dez motivos para aprender HTWLS + W3.C55 
É Comentários: 147 
Experiência em Gravidade O 
ú Comentários: 10 
EMO como morar sozinho 
Comentários: 3 
Melhores músicas anos 90 
des Comentiros: 3 
 
60 ) [ introdução ao coding web 
 
Passo 5.3: Tratar o bloco “Filtros” 
Imagine que cada postagem que fizermos no blog tenha 
uma categoria a ser definida. Dessa forma, teremos postagens 
sobre Viagens, Curiosidades, Aprendizado e tudo mais que nos 
interesse. 
Este bloco tem a função de permitir ao visitante do blog 
escolher (filtrar) qual categoria ou assunto ele gostaria de ler. 
Da mesma forma que o bloco TOPS, não temos como 
buscar as categorias das postagens publicadas pelo simples fato 
de ainda não termos feito nenhuma postagem. Por isso, assim 
como no bloco TOPS, vamos simular em código a existência 
destas categorias e nas unidades letivas seguintes, aprenderemos 
como deixá-las automáticas. 
Podemos definir que a categoria selecionada por padrão 
seja “TODAS” e que o nosso visitante pode selecionar qualquer 
outra clicando sobre o item desejado. Que tal? 
Nosso código ficaria mais ou menos assim: 
Figura 34: Código atualizado 
| a E 
card wI-margino> 
ss="w3-container wi-padding"> 
Categorias</h4> 
3. 
 
 
 
 
“u3-container wl-white”> 
wI-tag vl-black wI-nargin-botton">Todas</span> 
"w3-tag wv3-Light-grey w3-amall w)-margin-botton">VLagens</ span 
q vl-light-grey wl-small wi-margin-bottom->Esportes< 
 
7 vI-light-grey w3-small wI-margin-botton">Boláti 
wi-tag vI-lighe-grey vI-smali w)-margin-bottom">Familiac 
cerui-tag wI-Light-grey w3-small w3-margin-botton">Games</z7 
 
 
Introdução ao coding web J (1 
 
Explicando o código: Da mesma forma que no bloco 
anterior, usamos um elemento <div> para definir o cabeçalho 
deste bloco (linha 88). 
Note que, na linha 93 não existe a classe de tamanho de 
fonte w3-small. Isso quer dizer que o item selecionado será um 
pouco maior que os outros. Além disso, esta mesma linha usa a 
classe de cor de fundo w3-black, enquanto as demais usam w3- 
light-grey. 
Salve e execute o código no navegador. O resultado fica 
assim: 
Figura 34: Resultado após 
a execução no navegador 
ar (tele dis 
RE visoens esporos peírico amis came 
Finalizamos a coluna da direita do conteúdo do nosso 
blog. Passamos agora para a coluna da esquerda. 
Fonte: Própria. 
 
Passo 6: Tratar a coluna esquerda do Conteúdo 
da Página 
Estamos na reta final. Falta muito pouco para finalizarmos 
esta etapa. Vamos em frente! 
Conforme o projeto do nosso blog, a coluna da esquerda 
ficou destinada a apresentar as nossas postagens. Vamos definir 
aqui que estas postagens devem ser compostas por uma figura 
principal e o conteúdo descritivo (um texto). Vamos padronizar 
também que apenas vamos apresentar parte do texto abaixo da 
figura. Disponibilizamos um botão “Leia mais” caso o nosso 
visitante estejainteressado em ler toda a postagem. Assim 
economizamos espaço na página principal do blog. 
“Página principal do blog?”. Você deve ter pensado. 
Sim. Quando o nosso visitante clicar na postagem que deseja ler 
mais, será direcionado para outra página onde toda a postagem 
estará disponível e assim ele poderá ler e fazer comentários, caso 
queira. A figura a seguir ilustra essa ideia.
 
62 ) [ introdução ao coding web 
 
Não se esqueça de retirar as classes que definem as cores 
de fundo dos elemento <div> que iniciam as colunas. No código 
final elas estão nas linhas 27 e 78. 
Figura 37: Modelo sugerido de blog. 
Meu Blog Pessoal 
a Bm do po E 
 
dosagens Mas Podes 
Des metieus para aprender NTMLS » W3.C55 
E usam 
Exparência em Gravidade E 
 
Categorias 
 
Fonte: Própria. 
Existe muito mais a aprender, mas se você está de 
parabéns por ter chegado até aqui. Na Unidade 2 iniciaremos 
com a linguagem PHP e aprenderemos mais também sobre como 
usar as classes W3CSS e as TAGs HTML. Até lá!
 
Gestão de Times ) G 
 
REFERÊNCIAS 
CASSANO, R BBS: a intemet antes da internet. 
TechTudo, 2011. Disponivel em: <http:/Awww-techtudo.com. 
br/platb/internet/2011/07/08/bbs-a-internet-antes-da-internet/>. 
Acesso em: 01 Ago. 2018 
FARIA, D. A Evolução da WWW. Google Sites, 
2013. Disponivel em: <https:/'sites.google.com/a/eu.ipp.pt/a- 
evolucao-da-world-wide-web/home>. Acesso em: 01 Ago 2018 
GENDARMI, D. Web2.0 Applications. SlideShare, 
2007. Disponivel em: <https://www.slideshare.net/domenico79/ 
web20-applications?next slideshow=1>. Acesso em: 01 Ago 
2018 
KLEINA, N. TecMundo. A História da Intemet, 29 
Abr 2011. Disponivel em: <https://www.tecmundo.com.br/ 
infografico/9847-a-historia-da-internet-pre-decada-de-60-ate- 
anos-80-infografico-.htm>. Acesso em: 01 Ago. 2018 
NEUBERT, P. Ferramentas Colaborativas da Web 2.0. 
Universidade Federal de Santa Catarina. [S.1.], p. 99. 2010 
RIPE.NET. Evolution of the Internet. Visual.ly, 2018. 
Disponivel em: <https://visual.ly/community/infographic/ 
technology/ipv6-evolution-internet>. Acesso em: 01 Ago 2018 
SUA Pesquisa.com. História da Internet, 2012. Disponivel 
em: <https://www.suapesquisa.com/internet/>. Acesso em: 01 
Ago. 2018
SUMÁRIO 
Ambiente de Desenvolvimento PHPesua Sintaxe.............. 1 
Introdução.......... ienes q 
Instalação e Configuração do Ambiente de Desenvolvimento 
Sintaxe Básica de um Programa..............iiiiees 13 
O Primeiro Código PHP.............. eee 15 
Blog Pessoal com Código PHP... 15 
Variáveis, Tipos de Dados, Operadores e Expressões.....17 
Variáveis em PHP... 17 
Tipos de Dados Básicos em PHP... 7 
CONSTANTES: scsessesssencsssssosseccctus css secunossuseceussssosppcacus acre sesanos 18 
Testando no Blog... O 
Operadores em PHP... ieeetenereeeeeeees 21 
Operadores de Atribuição.................cisi ie 21 
Operadores Aritméticos............. iii 22 
Operadosde:SINn os. aseseeseacam scremacesearaepucenamecaçass 23 
Operadores onicas:escsesessemrsesocero come sconenmannseneomenal 23 
Operadores Condicionais............. 24 
Expressões em PHP... 24 
Atualizando o Blog Pessoal............eieem 25 
Matrizes e Estruturas de Controle.........seeseseasasaeasasa 29 
MaltiZES: oresseasuranreeseseverseoseprsyresncacurmrecasoneeseosuapasyasaneggusd 30 
Atualizando o Blog Pessoal.............. eee 32 
Espumas de CONTOS: 22 E 34 
Estruturas de Controle Condicionais.......................34 
O comando condicional TF... 35 
Comando condicional SWITCH................. 37 
Estruturas de Controle de Repetição...................... 40
 
Introdução ao coding web ) (7 
 
Comando de Repetição For... 40 
Comando de Repetição While.................... 42 
Comando de Repetição Do-While.................. 44 
Atualizando o Blog Pessoal.............. im 45 
Formulários (HTML + W3.CSS + PHP)... 47 
Formulários HTMLS + W3.CSS..........s 47 
Inserindo. PHP no Fórmulário...........ssssssscemsssssasssacoros 54 
Método GET... sao ns sa 55 
Método POST... nene 55 
Adaptando o Formulário de Acesso... E) 
Tratando os Parâmetros do Formulário.................... 57
 
8 J ( introdução ao coding web 
 
UNIDADE 
 
INTRODUÇÃO À LINGUAGEM PHP
 
Introdução ao coding web ) (o 
 
INTRODUÇÃO 
Seja bem-vindo à Unidade 2 — Introdução à Linguagem 
PHP, da disciplina de Introdução ao Coding (Web). O conteúdo 
desta Unidade está dividido em quatro módulos. No primeiro 
módulo vamos aprender como se instala o ambiente que permite 
o desenvolvimento de projeto em linguagem PHP em seu 
próprio computador e, também, apresentaremos a sintaxe básica 
dessa linguagem de programação. No segundo módulo vamos 
compreender os vários tipos de dados suportados pela linguagem 
PHP, bem como entender como trabalhar com expressões que 
envolvam variáveis, constantes e operadores. 
No módulo três, aprofundaremos nossos conhecimentos 
em programação, entendendo para que serve e como funcionam 
as estruturas de controle condicional e de repetição. Neste mesmo 
módulo aprenderemos a trabalhar com matrizes de dados. Por 
fim, no quarto módulo, aprenderemos a criar colocar blocos de 
código PHP dentro de páginas HTMLS5, mais especificamente 
em formulários. É claro que existe muito mais a aprender, mas 
o aprofundamento de cada um desses conhecimentos pode ser 
feito por meio do acesso aos links indicados durante o texto, 
no tópico [Saiba mais] ou verificando os itens indicados na 
bibliografia. Vamos começar? Excelente estudo para você!
 
10 ) [ introdução ao coding web 
 
OBJETIVOS 
Olá! Se bem-vindo a nossa Unidade 2, e o nosso objetivo 
é auxiliar você no desenvolvimento das seguintes competências 
profissionais até o término desta etapa de estudos: 
Aclimatar-se ao ambiente de desenvolvimento do PHP, 
entendendo a sintaxe elementar de sua linguagem. 
 
Codificar programas em PHP usando variáveis, 
operadores e expressões, compreendendo os vários tipos 
de dados aceitos pela linguagem. 
 
Desenvolver estruturas de controle para manipulação de 
matrizes e demais estruturas de dados. 
 
Criar formulários em HTMLS conectados a programas 
PHP, aplicando estruturas de estilo de páginas com o 
W3.C5S. 
 
 
Introdução ao coding web ) (u 
 
Ambiente de Desenvolvimento PHP e sua 
Sintaxe 
Introdução 
O PHP (Hypertext Preprocessor) é uma linguagem 
de programação com “código-fonte aberto” ! utilizada para 
desenvolvimento de aplicações web com as mais diferentes 
funcionalidades, como: envio e recebimento de arquivos e 
e-mails; geração de páginas dinâmicas; montagem de salas de 
bate-papo, blogs e redes sociais; manipulação e processamento 
de dados de formulários. 
M SAIBA MAIS 
Segundo a Tiobe Company (TIOBEF, 2018), empresa que verifica 
a qualidade de softwares, com base em dados de agosto de 2018, 
a linguagem PHP está posicionada como a sétima linguagem de 
programação mais utilizada. No topo da lista está o Java, seguido 
porCe CH. 
 
 
A linguagem 
PHP pode trabalhar 
junto com a linguagem 
HTML e tem como 
objetivo | potencializar 
as funcionalidades da 
página web, a permitir que esta possa, por exemplo, ter conteúdo 
dinâmico. Na maioria das vezes, o usuário comum que acessa 
uma página web que utiliza a linguagem PHP não consegue ter 
acesso ao código, o que é uma grande vantagem quando se trata 
com estratégias ou lógicas confidenciais de tratamento de dados. 
Para se trabalhar com a linguagem PHP é necessário 
primeiro configurar o ambiente de desenvolvimento. Então, 
vamos a ele!
 
12 ) [ introdução ao coding web 
 
Instalação e Configuração do Ambiente de 
Desenvolvimento PHP 
Para se trabalhar com a linguagem PHP em seu 
computador, será necessário instalar um aplicativo chamado 
WampServer”, que é um ambiente de desenvolvimento web para 
a plataforma Windows. É um pacote de softwares que instala 
todo o ambiente para você, permitindo que você crie aplicações 
web PHP,