A base do front-end aprenda html css e javascript de uma forma divertida ( PDFDrive )

Prévia do material em texto

A base do front-end 
 html, css e javascript 
 
 
 
 
 
 
 ESCRITO POR: DENIS POWER 
 
 
 
 
 
 ESSE PDF É GRATUITO 
 
 
 
 
 
 
 
 
 
 
 
 
 AS CLASSIFICAÇÕES DAS AULAS DESTE PDF 
 
“De 0 à 10 dou 8...porque particularmente acho o teu método de explicar 
muito fixe(bom) e acredito ser o melhor para todo tipo de ensino não só 
programação...mas acho que deverias em todas as aulas deixar exercícios para 
estimular os alunos a exercitarem, tá bom que eles devem fazer isso por si, 
mas com a motivação do prof fica melhor” Edmar Zungo 
 
“Eu gostei muito das aulas me motivou muito, criou bwed(muitas) dúvidas, 
mas com a prática tenho superado pouco a pouco, força aí mano, e obrigado 
pela paciência!” Jairo Fernandes 
 
“Criar um livro é uma óptima idéia, pois tens competência para isso! E é 
mesmo bom para ensinar de tudo o que for básico ou mesmo profissional para 
os futuro devs!” Manito António 
 
“Consoante as aulas que eu acompanhei, a classificação é mesmo nota 20 
mano, os conteúdos são bem claro, os exemplos então? Usas termos miúdos 
para compreensão de todos, eu gosto e com base a explicação dá pra viajar e 
ter uma percepção de 100%. 
Logo a idéia de formares as aulas em PDF vai ser super fixe e vai facilitar a 
gente, não haverá necessidade de irmos procurar as aulas anteriores, estarei à 
espera do PDF.” Paula Paxe 
 
 
 
 
 
 
 
 
 
 SOBRE O AUTOR 
 
“Olá para você que está a ler esse livro! Eu espero que você consiga perceber 
as explicações deste livro, eu escrevi ele para te dar uma base bem acentuada 
para seres um programador front-end, não sabes o que é programador front-
end? Não te preocupes vais aprender! 
 
Eu sou o Denis, o jovem que escreveu esse livro, sou angolano um jovem 
apaixonado pela programação, comecei a programar em JAVASCRIPT depois 
RUBY e por último em PYTHON, claro que eu ainda desejo aprender outras 
linguagens, mas por enquanto vou me focar apenas nestas, eu sou um 
desenvolvedor front-end e back-end, mas neste livro apenas vou te ensinar o 
básico do front-end, esse livro apenas vai servir como um alicerce para 
construíres as tuas habilidades como programador web front-end, então eu 
recomendo buscares os livros mais completo sobre o assunto quando 
terminares de ler esse PDF!” Denis Power 
 
Entra em contacto comigo pelo FACEBOOK clicando em 
https://www.facebook.com/denis.power.146?lst=100023062055668%3A100023062055668%3A159
2577972&mb_va&viewas=100000686899395&refid=17 
 
 
 
 
 
 
 
 
 
https://www.facebook.com/denis.power.146?lst=100023062055668%3A100023062055668%3A1592577972&mb_va&viewas=100000686899395&refid=17
https://www.facebook.com/denis.power.146?lst=100023062055668%3A100023062055668%3A1592577972&mb_va&viewas=100000686899395&refid=17
 
 
 
 
 QUEM DEVE LER ESSE PDF? 
 
Esse PDF apenas é recomendado para aquelas pessoas estão bem no começo 
da jornada do aprendizado do front-end, se você já tem um conhecimento 
intermediário este PDF não é pra ti! 
 
Se você for alguém que está a procurar um livro que fornece explicações bem 
clara sobre o assunto, ou talvez não sabes por onde começar e queres 
aprender de uma forma fácil e divertida, então parabéns! Você encontrou o 
melhor PDF para ti! 
 
O conteúdo deste PDF é abordado de uma forma fácil e divertida de assimilar, 
acho que já viu as classificações que as pessoas deram ao conteúdo deste PDF, 
não hesite e vamos começar a trabalhar! 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 COMO LER ESSE PDF? 
 
Esse PDF é diferente dos outros, ele está organizado em aulas, da 1ª até a 29ª, 
então não tente ler de uma vez, ele tem 174 páginas! Por isso que eu organizei 
assim para melhor percepção e elegância, então por dia lê uma aula, até quase 
um mês você vai entender bem como funciona o desenvolvimento Web front-
end, esse PDF não tem índice, então as aulas são uma surpresa, vamos 
começar!? 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 HTML 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 1ª aula 
 
 Tópicos que vais aprender hoje: 
 
 1ª O que é um programador web? 
 2ª Para que serve HTML, CSS e JAVASCRIPT? 
 3ª O Que é necessário para começar? 
 
 DESCRIÇÃO 
 
 Olá, tudo bem? essa é a primeira aula do nosso livro, até ao final vais 
conseguir criar pequenos sites com HTML, CSS e JAVASCRIPT. 
 
 1ª O QUE É UM PROGRAMADOR WEB? 
 
 Para você que está bem no começo da jornada e não têm nenhum 
conhecimento sobre programação, saiba que programação de uma forma fácil 
de entender é “A arte de instruir o computador a fazer o que você quiser com 
ele” veja o exemplo de como se faz um programa a seguir: 
 
Peça o nome do usuário 
Se o usuário escrever o nome dele 
Envia uma mensagem dizendo (“Seja bem-vindo” +usuário) 
 
 
Se o usuário não escreveu nada. 
Envia uma mensagem dizendo (“Insira o teu nome para 
continuar”) 
 
O exemplo acima citada simula um sistema que pede o nome do usuário, e 
depois envia uma mensagem na tela do mesmo dando boas-vindas para ele, e 
se o usuário não escreveu, nada também envia uma mensagem para ele 
dizendo para preencher o formulário, essa é a forma lógica como um programa 
ou sistema é construído, percebes mais ou menos como é a programação? Eu 
espero que sim, agora vamos responder a pergunta, o que é um programador 
web? 
 
Programador web é aquele dev que escreve os seus programas para rodarem 
no navegador, tipo o programador mobile é aquele que escreve os seus 
programas para rodarem no Android, IPhone…e o dev web escreve os seus 
programas para rodarem no navegador, para ser um programador web FRONT-
END você precisa apenas saber HTML, CSS e JAVASCRIPT, que é o assunto do 
nosso mini curso. 
 
 2º PARA QUE SERVE O HTML, CSS e JAVASCRIPT? 
 
 Sabes quando você entra num site e fica vendo as fotos as letras, talvez 
também vídeos? Isso tudo é feito com o HTML, ou seja, HTML é a linguagem 
responsável para escrever conteúdo de um site, ela é um acrônimo em inglês, 
ou seja cada letra da palavra HTML tem um significado: 
 
H - significa Hyper. 
T - significa Text. 
M - significa Markup. 
L - significa language. 
 
 
 
 Resumindo isso em português significa Linguagem de marcação de hipertexto, 
e podes considerar ela simplesmente como a linguagem que serve para 
escrever conteúdo dos sites, letras, imagens, vídeos... 
Agora falando do CSS, você vê as cores bonitas que muitos sites têm né? O 
layout deles ou design em si de um site é feito em CSS, o CSS deixa o conteúdo 
de um site visualmente bonito, como o HTML, ele também um acrônimo do 
inglês: 
 
C - significa cascading. 
S - significa style. 
S - significa Sheet. 
 
 Em português significa folha de estilo em cascata, mas de antemão saiba que 
CSS serve para estilizar ou seja, dar um ar bonito no conteúdo feito em HTML 
entendeu? 
 
 Sabes quando você visita um site e você vê as imagens se trocando do 
nada(slide show) sem precisar de recarregar a página, quando você tá ler um 
artigo de um site e do nada aparece algumas mensagens que de uma forma 
chega a ser irritantetambém né? as publicidades dos sites, ou seja todo 
recurso que você encontra num site e que proporciona um nível de interação 
com o usuário sem recarregar a página, é feito com JAVASCRIPT, por 
exemplo o Facebook e a Google são uma das grandes plataformas que 
exploram à fundo o JAVASCRIPT, e particularmente é a linguagem que eu amo, 
para te dar um exemplo bem prático, quando você estás a navegar no 
Facebook lite, ou o Facebook da Web, e quiseres reagir com riso, adoro, ou 
surpresa você pressiona o botão para pôr like né? e depois aparece todas 
reações, e elas ficam se mexendo, muito bom né? o que tá atrás destas 
maravilha também é o JAVASCRIPT, diferente do HTML e CSS o JAVASCRIPT é 
uma linguagem de programação, ele serve para deixar os sites bem interativo 
sem precisar de ter uma aplicação rodando no computador do servidor, se 
 
 
você não entendeu a última parte não te preocupes, porque ao longo das aulas 
vais entender ;) 
 
 3ª O QUE É NECESSÁRIO PARA COMEÇAR? 
 
 A programação web diferentes de outros ramos, tipo a programação mobile 
com o JAVA que requer a instalação do ANDROID STUDIO, que é uma Ide bem 
pesada mesmo, e que só roda em computadores da NASA, a programação web 
é bem simples, apenas vais precisar de um editor de texto, os que eu 
recomendo são: 
 
VISUAL STUDIO CODE. 
SUBLIME TEXT3. 
ATOM. 
NOTEPAD++ 
 
Você pode baixar qualquer editor de texto, você até pode fazer as páginas no 
NOTEPAD ou bloco de nota em português, depois de teres um destes 
programas na próxima aula vamos ver um pouquinho de HTML e começar a 
fazer a nossa primeira página, e você se não tiver um computador não se 
preocupe tem vários editores de texto na PLAY STORE, de preferência baixa o 
SUBLIME TEXT mas se encontrares outro podes baixar desde que seja um 
editor de texto, e normalmente esses programas têm um tamanho muito 
pequenos varia de 15 à 50 MB, para computadores, para celulares vária de 5 à 
20MB. 
 
 CONCLUSÃO 
 
 
 
 Essa foi a nossa primeira aula, na próxima aula vamos pôr mão na massa, 
vamos aprender os conceitos básicos de HTML, dá uma pausa e volta ler 
amanhã. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 2ª AULA 
 
O TÓPICO QUE VAIS APRENDER HOJE: 
 
1ª A estrutura básica do HTML. 
 
 DESCRIÇÃO 
 
Tudo bem? na aula de hoje, vamos ver como é a estrutura do HTML, Você já 
sabe que HTML é a linguagem que serve para escrever conteúdo dos sites né? 
espero que sim! E já tens o editor de texto instalado né? Muito bem, vamos 
começar. 
 
 1ª A ESTRUTURA BÁSICA DO HTML 
 
A estrutura que todas páginas dum site devem ter é a seguinte: 
 
<!DOCTYPE html> 
<html> 
<head></head> 
<body></body> 
 
 
</html> 
 
 Você deves estar a se perguntar, mas o que significa isso? Fica calmo(a) vais 
entender. 
 
 <!DOCTYPE html> 
 
 O DOCTYPE e a forma curta do document type, que em português significa 
tipo de documento, o HTML não é a única linguagem de marcação, tem várias, 
mas a principal e ela, então para o navegador não ficar confuso, neste caso se 
usa o DOCTYPE, é o mesmo que dizer para o navegador “a página que eu 
escrevi está escrita em HTML”, e atenção o DOCTYPE não tem nada a ver com 
o HTML, ele é usado em todas linguagens de marcação, entendeste né? eu 
espero que sim. 
 
 <HTML></HTML> 
 
Agora sim, o HTML entrou em acção, essa é a tag de abertura de uma página 
HTML, agora assim talvez estás a se perguntar, mas tag é oque? Fica calmo(a), 
tag é uma palavra inglesa que significa marcação em português, todos 
componentes da linguagens HTML são chamados de tag, agora voltando ao 
tema, essa tag denominada <html></html> como já disse é a tag de 
abertura da página, toda informação da página vai ficar entre as tags 
<html></html> 
 
 <HEAD></HEAD> 
 
Essa é denominada a parte inteligente da página, head em português significa 
cabeça, e você sabe que o nosso cérebro que está na cabeça né? é igual ao 
 
 
<head></head> do HTML, lá fica armazenadas informações que a maioria 
não vai ser vista pelo o usuário, a informação que ele armazena que é vista 
pelo o usuário é da tag <title></title> nesta tag você vai colocar o título da 
página, tipo quando vocês navegam num site, vocês vêem na barra de título do 
navegador, o título da página né? ou quando você está a navegar no Facebook 
web, você entra no chat lá na barra de título vai vir escrito amigos ativos né? 
isso aí tem a ver com a tag <title></title>. 
 
 <BODY></BODY> 
 
 Põe na tua cabeça, todas tags colocadas dentro da tag <body></body> 
vão ser vista pelo usuário, a tag <body></body> é o corpo do nosso site, 
vou dar um exemplo bem maluco, já falamos da tag <head></head> né? 
aprendemos que ela é a parte inteligente da página que armazena algumas 
informações que não vão ser vista pelo o usuário e são apenas do interesse do 
navegador, a tag <body></body> é a que vai armazenar a parte visível do 
site, vamos dizer que a tag <head></head> é como se fosse o nosso 
cérebro, e as pessoas não vêem né? mas claro, elas vêem o resultado que o 
nosso cérebro produz, e a tag <body></body> é como se fosse o nosso 
exterior, o nosso corpo, as pessoas vêem todos elementos que compõem o 
nosso corpo no exterior, tipo a nossas vistas, pele, braços, pernas, cabelo!, yha, 
essa aí como se fosse a nossa tag <body></body>, entendeste como 
funcionam as coisas né? espero que sim. 
 
Agora tudo bem, já sabes a estrutura que uma página deve ter, mas se você 
colocar a estrutura num editor de código e salvar com a extensão .html, e 
tentar visualizar no navegador, vai aparecer uma página branca, porque a tag 
<body></body> está vazia, agora vamos aprender mais sobre algumas 
tags: 
 
 <title></title> 
 
 
 
Eu já havia explicado sobre essa tag bem no começo, que ela serve para dizer o 
título da página, por exemplo: 
 
<!DOCTYPE html> 
<html> 
<head> 
<title>Programação web</title> 
</head> 
<body> 
</body> 
</html> 
 
Se você testar esse código, a página vai continuar branca, mas se você olhar 
para barra de título, vai aparecer “Programação web,” e isso significa que 
estamos num bom cominho. 
 
Você possivelmente está a dizer, tá bom, já entendi...mas me explica bem das 
tags começarem mais ou menos assim <nome da tag> e </nome da ta> a 
primeira tag significa a abertura da tag, e a segunda é o fechamento, tipo se 
dentro da tag <body></body> você escrever algo, o navegador vai 
entender que esse mambo que está dentro da tag <body></body> deve 
ser visível, depois se você escrever algo depois do fechamento </body> o 
navegador aí vai ficar confuso, não vai saber se vai mostrar o que está escrito 
ou vai ignorar, uns navegadores bem maluco mostram como se estivesse na 
tag <body></body>. 
 
 <H1></H1> 
 
 
 
 Essa tag, serve para escrever títulos dos sites de maior relevância, tipo aqueles 
títulos mais importantes, mas quando você vai escrever um artigo num site 
podes colocar também subtítulos né? para isso usamos as tags <h2></h2>, 
<h3></3h>, </h4></h4>,<h5></h5> e a tag <h6></h6>, você se for 
bem iniciante mesmo, deves estar confuso, as tags que eu mencionei servem 
para escrever títulos(<h1></h1>) e subtítulos(começa da tag <h2></h2> até 
à tag <h6></h6>) quanto mais o valor do h soube, o título fica menor, tipo 
os dedos dos nossos pés, tem aquele grandão e gordo né? aquele é como se 
fosse a tag <h1></h1> e os outros dedos e como se fossem as restantes tags de 
subtítulo!<P></P> 
 
Essa é uma tag que significa paragraph ou parágrafo em português, como você 
já deve ter percebido serve para colocar parágrafos na página do nosso site, 
tipo quando freqüentávamos o ensino secundário 6ª à 9ª classe, os profs 
quando ditavam chegavam a um momento que diziam, alunos parágrafos! ou 
menos mudar de linha! bem chato né? você também pode dizer isso no 
navegador, escrevendo dentro da tag <p><p/> que ele vai perceber que aquilo 
é um parágrafo. 
 
 CONCLUSÃO 
 
Essa foi a nossa segunda aula, dá uma pausa na leitura, e amanhã volta a ler 
entendes? Para você assimilar melhor os conteúdos, e tenta criar uma 
paginazinha com conteúdo que aprendeste hoje. 
 
 
 
 
 
 
 
 3ª AULA 
 
Os tópicos que vais aprender hoje: 
 
1ª A diferença entre HTML e HTML5. 
2ª As meta tags. 
 
 DESCRIÇÃO 
 
Oi tudo bem? Você conseguiu entender a aula anterior? Não? Então releia, 
sim? Então vamos começar! 
 
 1ª A DIFERENÇA QUE HÁ ENTRE HTML E HTML5. 
 
A explicação para isso é bem simples, o HTML é o nome da linguagem, e o 5 é a 
versão da linguagem, e atualmente quando se fala do HTML automaticamente 
estamos a nos referir da versão 5, tipo se alguém te perguntar qual é o sistema 
operativo que você usa? Provavelmente você vais responder Windows, se você 
usa computador, existe várias versões do Windows, tem o XP, 95, vista, 7,8 e 
10 né? mas pra pessoa que lhe dizeres que você usa o sistema operacional 
Windows ele automaticamente vai pensar no Windows 7, 8 ou 10…por que as 
versões anterior do Windows já não mais usadas, o mesmo acontece com o 
HTML, e também as versões anteriores ,tipo o HTML4 e versões anteriores, 
tinham muitos bugs ou seja falhas, davam buede(muita) raiva, tipo você põe na 
 
 
tag <body> <h1>Olá</h1> </body> tem um título né? e se você quisesse por 
ele no centro, você vai usar o CSS, que vais aprender brevemente, era mais ou 
menos assim nas versões anteriores, você escreve um título ou subtítulo e 
você faz com que ele fica no centro, tá tudo bem né? você testa no Internet 
Explorer vais ver, tá bom é o que eu queria, mas se você testar no Safari o 
título ou subtítulo não ficava no meio, tem vezes que ficava na parte superior 
direita, e isso dava muita raiva mesmo, e ainda era mais estressante para os 
programadores JAVASCRIPT, tipo você escreve uma aplicação que era 
suposto envia uma mensagem na tela do usuário quando entra no nosso site 
dizendo “Bom dia” na Opera ou Safari, a aplicação pode fazer o contrário, dizer 
“Tudo bem?” brincadeira! com isso quero dizer que nas versões anteriores do 
HTML o programador não tinha o controle da aparência do seu site, ou seja 
cada navegador apresentava o site de maneira diferente, eu espero que tenhas 
entendido a explicação. 
 
 2ªAS META TAGS 
 
As meta tags são tags que ficam localizadas na tag <head></head>, eu 
já expliquei o que é tag né? na aula passada eu havia tido que tag é o 
nome dado à todos componentes do HTML, tipo nós vivemos em 
Angola né? Angola é como se fosse o HTML, e obvio que Angola tem 
habitantes, tipo meu nome é Denis, você tem também o seu nome né? mas 
o que tem a ver? Nós todos que vivemos em Angola somos angolanos, é que 
nem as tags, elas têm nomes diferentes mas são tags, acho que você já 
percebeu! agora a seguir vamos aprender as meta tags essenciais: 
 
 <META CHARSET=”UTF-8”> 
 
Essa de uma forma fácil de entender serve para acentuar corretamente as 
palavras da tua site, e aí você deve estar a dizer, okay então é só usar essa 
meta tag que o navegador vai acentuar automaticamente? Não , tipo se no 
<body></body> você colocar <p>Olá</p>, o navegador vai pôr o acento que 
achar conveniente, vai sair mais ou menos assim=”ôlÀ” eu não testei, mas vai 
 
 
ser uma coisa igual a esta, para você entender melhor, os criadores do 
navegador na sua maioria são de origem americanas, e as palavras em inglês 
não têm acentos, por isso que o navegador inventa o acento dele, escrever 
<meta charset=”utf-8”> é o mesmo que dizer para o navegador “a página que 
eu escrevi, tem acentos, então interpreta corretamente os acentos” 
percebeste como funciona? Essa meta tag é obrigatória constar no nosso 
documento HTML, propriamente na tag <head></head>. 
 
 <META NAME=” DESCRIPTION” CONTENT=” AQUI VAI 
A DESCRIÇÃO DA PÁGINA”> 
 
Sabes quando você pesquisa algo no Google, por exemplo você vai no Google 
pesquisa Wikipédia, vai aparecer o site da Wikipédia em primeiro lugar né? vai 
aparecer o nome do site que neste caso é Wikipédia em letras azuis para você 
clicar, neste caso essa é a tag <title></title> e depois em baixo aparece uma 
pequena descrição, tipo: Wikipédia é uma organização se fins lucrativos que 
tem como objectivo... isso está relacionado com a meta tag <meta 
name=”description” content=”Aqui vai a descrição da página”>, resumindo e 
concluindo, essa meta tag serve para descrever a nossa página. 
 
 <META NAME=”VIEWPORT” 
CONTENT=”WIDTH=DEVICE-WIDTH”> 
 
 Essa tag é essencial para deixar a sua página meio responsiva, tá bom não 
entendeste, sabes? a página que você está a aprender a fazer? Só fica bonito 
na tela de um computador, se você hospedar ele na internet e tentar acessar 
por meio de um celular vais fugir! ou seja a página não vai caber na tela de um 
celular, por isso usamos a meta tag <meta name=”viewport” 
content=”width=device-width”> o width= em português significa largura, e 
device-width significa largura do dispositivo, é o mesmo que nós dizer para o 
navegador “ a minha página tem que se ajustar a todas resoluções de tela, tem 
que caber em todas tela” entendeste? Mas atenção, com este método a 
 
 
página não fica totalmente responsiva, é só o começo da responsividade, você 
talvez estejas a dizer, tá bom já entendi mas o que é responsivo? Ou 
responsividade, um site é considerado responsivo quando se ajusta em todas 
telas, por exemplo um site não responsivo quando é visto num telefone as 
letras ficam bem pequenininhas para você ler tem que ficar a fazer toda hora o 
zoom na tela, e isso é bem desagradável para o usuário né? então façam sites 
responsivos, e não te esqueças a meta tag <meta name=”viewport” 
contente=”width=device-width”> não deixa a sua página totalmente 
responsiva. 
 
 <LINK REL=”SHORTCUT ICON” HREF=”O LINK DA 
IMAGEM”> 
 
Essa tag, não é bem uma meta tag, mas achei importante realçar ela, como as 
meta tags ela também fica dentro da tag <head></head>, você já notou 
quando você entra no Facebook da web ou seja do navegador, se você olhar 
bem na aba, vais ver o icon do Facebook né? tipo aquela imagem azul que vem 
o icon do Facebook, isso é feito com a tag <link rel=”shortcut icon” href=”o link 
da imagem”> essa tag só vai ser útil para você quando hospedares um site na 
web, e também dá um look(aparência) muito profissional no teu site, sites sem 
essa tag incorporada fica meio amador. 
 
 
 <META NAME=” KEYWORD” CONTENT=” AS PALAVRAS 
CHAVES DO TEU SITE”> 
 
Essa meta tag também vai ser útil quando hospedares o teu site na web, tipo 
se você pesquisar no Google “Angola”, não vai aparecer nada que fala sobre o 
Cristiano Ronaldo ou Messi! Por quê? Por que a palavra “Angola” não está 
ligada à eles, com isso eu quero dizer que essa meta tag serve para dizer as 
palavras chaves que a tua página tem, tipo se o teu site fala sobre comidas, e 
eu pesquisar Arroz no Google é bem provável que o teu site apareça, porque? 
 
 
Por que ele tem a ver com comidas, e provavelmente na meta tag <meta name 
=” keyword” contente=” Aqui vai as palavras chaves”> lá no content da meta 
tag vais colocar “comida” como palavra-chave, e o algoritmo da Google 
conhece que o arroz é comida! mais bem lá pra frente quandofalaremos sobre 
JAVASCRIPT, vou explicar o que são algoritmos não te preocupes. 
 
 CONCLUSÃO 
 
A nossa aula de hoje fica por aqui, ainda existe várias meta tags, se quiseres 
saber mais é só dá uma pesquisa sobre o assunto, mas achei que essas são as 
essenciais, eu espero que tenhas gostado da aula! Nos vemos na próxima aula, 
e não te esqueças “Não lê todo PDF ao mesmo tempo, o por isso eu organizei 
eles em aulas! 
 
 
 
 
 
 
 
 
 
 
 4ª aula 
 
Os tópicos que vais aprender hoje: 
 
1ª A diferença entre blogs e sites. 
2ª Mais algumas tags. 
 
 DESCRIÇÃO 
 
 Está tudo bem contigo né? vamos aprender mais alguma coisa? 
Mbora(vamos) começar a ler! 
 
 
 1ª A DIFERENÇA ENTRE BLOGS E SITES 
 
 
Esse assunto mata muito iniciantes e até mesmo pessoas que já sabem do 
assunto! mas hoje é o dia que vais aprender qual é a diferença na verdade, um 
blog também é site! ficaste mais confuso né? agora entenda, blogs são sites 
pessoais, ou seja são sites que têm como objetivo falar sobre um determinado 
tema, Se eu por exemplo for famoso, as pessoas vão querer saber mais de mim 
né? então crio um site neste caso blog, e neste blog apenas vou falar sobre 
mim, talvez também sobre minha família , mas esse site será denominado 
 
 
como blog entendeste? E os sites no verdadeiro sentido da palavra, são 
aqueles construídos para publicitar produtos, de empresas, tipo eu tenho uma 
empresa que comercializa carros, e já abri faz um mês, mas ninguém vem 
comprar o meu produto, frustrante né? A minha empresa vai criar um site 
para poder publicitar os serviços que nós fornecemos, tipo a Unitel e a Movicel 
têm os seus sites né? eles publicitam aí os serviços deles lá, agora a TPA e o 
Jornal de Angola também têm né? mas aqueles não são propriamente sites são 
blogs, por que eles aí escrevem sobre um determinado tema, você consegue 
perceber a diferença? 
 
 2ª ALGUMAS TAGS 
 
Nas aulas passadas falamos sobre algumas tags e meta tags né? Hoje vamos 
continuar por que o HTML é feito de tags. 
 
 <A HREF=” AQUI VAI O LINK DA PÁGINA”>AQUI O 
NOME</A> 
 
Eu te garanto, essa tag vais usar muito, sabes quando você está a navegar no 
Facebook do navegador, lá em cima vem, os amigos, chat, mensagem, grupos, 
página…. E se você quiser entrar na página do chat, você clica aí onde está 
escrito chat né? isso tem a ver com a essa tag, aí no href=”” dentro das virgulas 
altas você põe o link da outra página que você quer quando o usuário clica 
nessa tag ela aparece, tá bom não entendeste, por exemplo você faz um blog 
que fala sobre ti, quando o usuário entra no teu blog vai aparecer a página 
principal né? mas o teu blog não pode ter só uma página, vai ter várias mas 
elas não podem aparecer de uma só vez na tela do usuário, vais lhe deixar 
maluco!, para você indicar no usuário que o teu blog tem outras páginas você 
cria um menu, tipo: 
 
Quem eu sou 
Quem%20eu%20sou
 
 
Minha profissão 
Minha namorada 
 
Isso é só para ilustrar, e o usuário quando entra pra o blog vai ver a página 
inicial mas também vai ver outra opções, tipo quem é a namorada dele? Vai 
clicar aí onde estiver escrito Minha namorada e vai ser direcionado para a 
página correspondente, tipo nos livros tem aquela banda que fala sobre os 
assuntos que vão ser abordado no livro né? tipo no livro da primária por 
exemplo página 1 – Angola, página 2 – As goiabas! e quando quiseres saber 
sobre as Goiabas é só ires nesta página e veres que página se encontra o texto 
que fala sobre as goiabas, o mesmo acontece com a tag <a href=”aqui vai o link 
da página>nome da página</a>, com isso eu quero dizer ela é uma tag que 
permite linkar páginas, ou sejas fazer a ligações das página, eu espero que 
tenhas entendido! 
 
 <NAV></NAV> 
 
 Eu quando falei da tag <a href=””>Nome da página aqui</a> eu disse que ela é 
muito usada para linkar as páginas e fazer menus (já expliquei isso), mas para 
fazermos menu mais ricos semanticamente (explicarei sobre isso brevemente), 
usamos essa tag, ela não tem nenhum valor visual ou seja ela não muda em 
nada a nossa página, ela serve para dizer para o navegador que tudo que está 
dentro dela é um menu tipo seria assim: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8” > 
<title>Denis</title> 
Minha%20profisão
Minha%20namorada
 
 
</head> 
<body> 
<nav> 
<a href=”#”>Sobre o Denis</a> 
<a href=”#”>A namorada do Denis</a> 
</nav> 
</body> 
</html> 
 
Se você testar esse código vai aparecer dois links “no where” (é uma palavra 
inglesa usada muito pelos programadores web quando falam sobre essa tag, 
ou seja o link não vai te levar à lugar algum!) escritos Sobre o Denis e A 
namorada do Denis, mas se você tirar a tag <nav></nav> vai ficar da forma que 
estava, você deve estar se pergunta mas afinal de conta qual é o sentido de 
usarmos essa tag? Ela é usada para dizer ao navegador que aqueles links que 
estão dentro delas é um menu, você pode dizer tá bom, mas porquê que o 
navegador deve saber se não faz diferença alguma usar ela ou não, sei lá se 
aqui em Angola usam isso, mas nos países mais desenvolvidos usam leitor, tipo 
eu quero ler um artigo no teu blog que fala sobre futebol e também eu estou a 
arrumar o meu quarto, eu vou entrar no teu blog e acionar o leitor de tela, ligo 
a coluna no pc, vou ouvir a leitura do teu blog e vou ficar arrumar o meu 
quarto, se o leitor encontrar o menu sem a tag <nav></nav> ele não vai saber 
se aqueles são simples links ou é o menu de navegação, ele vai ler atoa tem 
outros que não vão ler, é como se você encontrasse num livro ou artigo a 
palavra “faca o teu pedido” não tem sentido né? Deste jeito é que os leitores 
de tela vêem os menus sem a tag <nav></nav>, quando falaremos sobre a 
semântica do HTML vais entender melhor. 
 
 <LI></LI> 
 
 
 
Eu quando comecei a estudar HTML eu chamava essa tag de Jet lee! por causa 
do nome similar ao lee, a tag se ler lí, mas isso não vem ao caso, era minha 
maluquice! sabes quando você faz ou vê uma receita, tipo a receita de arroz 
seria assim: 
 
1ª água. 
2ª panela. 
3ª arroz. 
4ª fogo. 
 
Isso significa que não sei mesmo cozinhar nada! eu de uma certa forma 
enumerei os supostos ingredientes né? a tag <li></li> tem essa função, veja 
como seria: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Requisitos para ser programador</title> 
</head> 
<body> 
<h3>Para ser um programadores tens que ter os seguintes 
requisitos</h3> 
<li>Paciência</li> 
<li>Paixão pela programação</li> 
 
 
<li>Tens que ser autodidata(Pessoa que aprende 
sozinho)</li> 
</body> 
</html> 
 
Não é necessário explicar mais essa parte né? já entendeste? Espero que sim! 
 
 <OL></OL> 
 
Essa tag é tipo a tag <nav></nav>, não tem nenhum valor visual, mas é usado 
pelos leitores de tela, percebes? e essa tag tem a ver com a tag <li></li>, a tag 
<li></li> tem que ficar dentro dela, seria assim: 
 
<DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Requisitos para ser um programador</tile> 
</head> 
<body> 
<h3>Para ser um programador tens que ter os seguintes 
requisitos</h3> 
<ol> 
<li>Gostar de estudar</li> 
<li>Ter paixão pela programação</li> 
 
 
</ol> 
</body> 
</html> 
 
 Eu acho que está explícito né? 
 
 CONCLUSÃO 
 
 A aula de hoje fica por aqui, eu espero que não foi chata para você e que 
conseguiste entender alguma coisa, se não entra em contacto comigo clicando 
em 
https://WWW.facebook.com/denis.power.146?lst=100023062055668%3A100023062055668%3A1592577972&mb_va&viewas=100000686899395&refid=17 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
https://www.facebook.com/denis.power.146?lst=100023062055668%3A100023062055668%3A1592577972&mb_va&viewas=100000686899395&refid=17
https://www.facebook.com/denis.power.146?lst=100023062055668%3A100023062055668%3A1592577972&mb_va&viewas=100000686899395&refid=17
 
 
 
 
 5ª aula 
 
Os tópicos que vais aprender hoje: 
 
1ª O que é a deep web? 
2ª Mais algumas tags. 
 
 DESCRIÇÃO 
 
Estás com ânimo? Muito bem! hoje vamos falar de um tema muito 
interessante que é a deep web e também veremos mais algumas tags. 
 
 1ª O que é a deep web? 
 
Vou dar um exemplo bem prático, sabes quando você vai para ilha de Luanda, 
e vês o mar, bonito né? ainda mais no pôr do sol! esse é como se fosse a web 
que estamos acostumados a usar, tipo o Facebook, o Google, Yahoo entre 
outros, agora você deve estar a dizer, era suposto tu falares sobre a deep web, 
fica calmo(a)! Já ouviste falar sobre o mito das sereias né? As pessoas dizem 
que elas ficam no fundo do mar, e também dizem que no fundo do mar tem 
vários mistérios, esse fundo do mar é como se fosse a deep web, tipo em 
alguns países as pessoas roubam dinheiro do estado através da deep web, aqui 
em Angola algumas pessoas roubam o dinheiro do estado bem à frente da 
população né? em outros países não, elas usam a deep web, e agora deves 
 
 
estar se perguntar como eles fazem isso? Eles usam uma moeda própria, tipo a 
moeda mundialmente usada é o Dólar e o Euro né? na deep web eles usam 
uma moeda chamada Bitcoin e convertem essa moeda em dólares(consoante 
o tempo vais entender melhor) e a deep web é a web dos hackers, mano nunca 
tenta entrar na deep web do jeito que você entra na web normalmente, o teu 
computador ou celular vai ser hackeado, e eles podem controlar o teu 
dispositivo em tempo real, tipo você é o hacker eu entro na deep web, e você 
notou a minha presença no teu site, você vai usar uma técnica para o meu 
navegador automaticamente baixar um vírus produzido por ti, e esse vírus vai 
roubar as informações do meu computador ou celular e vai enviar para ti, e vai 
permitir você controlar o meu pc como se fosse eu, percebes? As pessoas 
também dizem que o segredo de muitos governos estão escondidos na deep 
web, a deep web é um mundo tão extenso se eu falar tudo sobre ela vou levar 
algumas semanas, e para finalizar na deep web você encontra também 
assuntos demoníacos, satânicos, lá tem vários sites que retratam coisas do 
mundo do satanás, eu não quero te deixar com medo, apenas quero te alertar, 
não visite a deep web! 
 
 2ª Mais algumas tags 
 
Já estás mais calmo? O medo da deep web já passou? Agora vamos ver mais 
algumas tags essenciais: 
 
 <audio></audio> 
 
Como você já deve imaginar essa tag serve para colocar áudio na página do 
nosso site, seria assim: 
 
<!DOCTYPE html> 
<html> 
<head> 
 
 
<meta charset=”utf-8”> 
<title>Música</title> 
</head> 
<body> 
<audio controls=”true” loop=”true”><source 
src=”Denis.mp3” type=”audio/mp3”></audio> 
</body> 
</html> 
 
Acho que você não entendeu bem, aí o controls=”true” serve para colocar o 
botão de pause e aquele mecanismo de avançar e recuar o true significa 
verdade em português, tipo quando estudávamos no ensino secundário e o 
professor a ditar de repente você fica com a impressão que aquele é outro 
parágrafo você pergunta “parágrafo prof?” ele vai responder “sim” é tipo o 
controls=”true” é como se o navegador te perguntasse, “posso mostrar os 
controles?” e você diz que sim! mas apenas escrevendo controls o navegador 
já vai saber que você quer que apareça os controles, tipo quando estudávamos 
no ensino secundário tinha sempre um prof bem mau, quando você lhe 
pergunta “parágrafo prof?” ele te dava olhada ou te ignorava isso quer dizer 
então que é mesmo ponto parágrafo, o mesmo acontece ao escrever apenas 
controls mas eu te aconselho a escreveres mesmo controls=”true” , em cada 
navegador os controles são diferentes, o loop=”true” significar que a música 
vai repetir sempre, tipo quando ouvimos uma música bem boa, tem vezes que 
acionamos no nosso reprodutor de música para repetir infinitamente, é o 
mesmo que o loop=”true” a explicação do loop=”true é a mesma que a do 
controls=”true” agora o <source src=”Denis.mp3” type=áudio/mp3> o source 
src=”Denis.mp3” serve para procurar a música que vai ser reproduzida, por 
exemplo a música tem como o nome Denis aí nas virgulas altas você coloca o 
nome, e se a música tiver a extensão mp3 ou mp4 depois do nome você coloca 
a extensão da música, agora o type=”audio/mp3” é para dizer ao navegador 
qual é a extensão da música, você escrevendo Denis.mp3 não quer dizer que o 
navegador conhece a extensão da música mas sim o navegador chama a 
música com este nome e extensão, é tipo no primeiro dia de aula o professor 
vai chamar número 1, Denis levanta! Ele não me conhece mas sabe que eu 
estou aí, por que o meu nome aparece no livro de ponto, mas quando eu 
 
 
levantar ele vai me ver e vai passar a me conhecer o mesmo acontece com 
source src=” Denis.mp3” vai chamar a música com esta caraterística o 
type=”audio/mp3” vai saber qual é a extensão da música, consegues perceber? 
Espero que sim! 
 
 
 <video></video> 
 
Essa é a tag usada para pôr vídeos em nossa página, antigamente nas versões 
anteriores do HTML não era possível colocar vídeos na nossa página com o 
HTML usavam applets, uns aplicativos feitos em JAVA que rodavam no 
navegador, se teu navegador não tivesse essa app não conseguirias ver vídeos 
dos sites e também deixava o navegador bem pesado, mas felizmente o 
HTML5 veio para acabar com esses abusos! e a regra dela é a mesma que a da 
tag <audio></audio> seria assim: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Vídeo</title> 
</head> 
<body> 
<video controls=”true” loop true=”true” 
poster=”Angola.jpg”><source src=”Denis.mp4” 
type=”video/mp4”> 
</body> 
</html> 
 
 
 
Você viu aí o poster=” Angola.jpg” né? Ele serve para mostrar uma imagem 
antes do vídeo ser reproduzido, tipo é o cartaz do vídeo, tipo quando 
comprávamos discos de filmes víamos o cartaz né? tipo o Jack Chan fica a voar 
na cartaz mas no filme em si não haha, tipo também quando vais assistir 
vídeos no Youtube você vê uma imagem antes da reprodução né? é usado o 
poster=”Aqui o nome da imagem .extensão da imagem” eu espero que você 
entendeu! 
 
 <img src=”nome da imagem. A extensão da 
imagem”> 
 
Essa é a tag usada para colocar imagens na nossa página, ela não tem 
fechamento né? mas é uma tag, mas tags sem fechamento são chamados de 
atributos! seria assim: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Foto</title> 
</head> 
<body> 
<picture> 
<img src=”Denis.jpg” alt=”Foto do Denis” title=”Denis 
Power”> 
<figcaption>Olá eu sou o Denis</figcaption> 
</Picture> 
</body> 
 
 
</html> 
 
 Agora você tá tonto, fica calmo(a), a tag <picture></picture> serve para 
os leitores de tela lembras quando falei sobre a tag <nav></nav>? Acho 
que você entendeu, aí o <mg src=”Denis.jpg”> o navegador vai procurar 
uma imagem com o nome Denis e que tenha a extensão jpg, o alt=”Denis” 
serve para dizer a descrição da foto, quando o foto não for carregada, o 
title=”Denis Power” serve para mostrar uma informação da foto quando 
passares o monteiro do mouse na foto, tenta fazer na tua foto do perfil do 
Facebook, vai aparecer o teu nome, agora a tag 
<figcaption><figcaption> serve para dar uma pequena descrição da 
foto, ela vai aparecer na página, tipo no meu blog tem a minha foto, e por 
baixo tem um pequeno texto, dizendo “Denis é um jovem angolanoapaixonado pela programação” essa informação estaria da tag 
<figcaption></figcaption> entendes? Você até pode usar a tag 
<h1></h1> ou <p></p> (Já falei sobre elas) mas a tua foto não teria um 
valor semântico, neste caso me refiro aos leitores de tela, brevemente 
falaremos sobre a semântica do HTML, as fotos os vídeos os áudios que 
quiseres colocar na tua página têm que ficar na mesma pasta ou diretório que 
está salva a página, último exemplo! nós todos somos irmãos estamos no 
cúbico assistir, o velho tá no quintal a velha tá sentada na porta, o velho chama 
“Denis vem cá!” eles velhos não têm maneira! e eu não estiver aí a velha vai 
perguntar “Mas esse Denis não tai!?” vocês vai dizer não está, e o velho não 
vai dizer o que tinha para me dizer o mesmo acontece com o navegador se a 
imagem, vídeo ou o áudio que queres mostrar na tua página não estiver no 
mesmo diretório ou pasta onde está a página, o navegador não vai mostrar, 
percebes? Espero que sim! 
 
 CONCLUSÃO 
 
A aula de hoje não foi chata né? acho que foi muito extensiva, mas eu espero 
que conseguiste entender como a coisa funciona, dá uma pausa pratique o que 
aprendeste hoje e nos vemos na próxima aula! 
 
 
 
 6ª Aula 
 
Os tópicos que vais aprender hoje: 
 
1ª Como deixar o nosso site ou blog no topo das pesquisas na 
Google? 
2ª Tags semanticais. 
 
 DESCRIÇÃO 
 
Oi futuro(a) dev! Estás motivado(a)? espero que sim, vamos aprender mais 
uma vez? Mbora lá! 
 
1ª COMO DEIXAR O NOSSO SITE OU BLOG NO TOPO 
DAS PESQUISAS NA GOOGLE? 
 
 Como sempre, vou começar a aula com os meus exemplos maluco! quando 
estudávamos no ensino secundário, isso também acontecia no ensino 
primário, tinha sempre um prof que no fim da prova mandava fazer 
composição né? isso acontecia mais com os profs de português, e tinha vezes 
que a composição valia 5 valores e muitos profs só davam 1 ou no máximo 3,5 
valores, isso era frustrante né? principalmente quando você escreveu bem 
sobre o tema, depois íamos reclamar, muitos diziam “professor eu fiz bem a 
 
 
composição porquê me deste esse valor? ” os profs diziam cadê a introdução? 
O desenvolvimento? A conclusão? o algoritmo (falarei sobre isso no 
JAVASCRIPT) da Google se comporta mais ou menos como esses professores, 
se o artigo do teu site não tiver a introdução, desenvolvimento e conclusão o 
Google vai baixar a posição do teu site no ranking deles, agora deves estás a 
perguntar “Então é só colocar as frases introdução, desenvolvimento e 
conclusão né?” Não! essa introdução seria a tag <header></header> o 
desenvolvimento a tag <article></article> e a conclusão a tag 
<footer></footer> falarei mais sobre elas no próximo tema desta aula, 
agora você deve estar a se perguntar de novo “Então o segredo é só isso?” mas 
uma vez não! para deixar a teu site ou blog no topo das pesquisas da Google, o 
teu site deve ser responsivo(eu já falei sobre isso) ou seja caber em todas telas, 
quando falaremos sobre CSS vou falar de media queries que vai deixar o teu 
site 100% responsivo! o teu site também deve ter uma velocidade de 
carregamento de pelo menos uns 7 segundos, você imagina para visualizar a 
tua página demora 1 ou mais minutos, achas que a Google vai colocar o teu 
site no Topo? Tipo por exemplo, esse exemplo que eu vou dar não tem nada a 
ver com descriminação é apenas exemplo para você perceber melhor, você 
acharias que um Gago apresentaria diariamente o Telejornal? Apresentar ele 
pode né? mas seria um pouquinho complicado para os telespectadores 
demoraria um pouquinho para falar algumas palavras, e se o telespectador não 
tiver paciência vai trocar de canal, e quem perderia? A TPA né? e o diretor da 
TPA vendo que o telejornal tá perder audiência vai colocar outra pessoa para 
apresentar o telejornal né? o mesmo acontece com a Google, e por último o 
trafego do teu site ou blog, se o teu site ou blog tem poucos visitantes a 
Google vai deduzir que ele é “podre” (que não é bom) e não vai sugerir para 
outros usuários, é tipo você vai para o supermercado e você vê um produto 
que anda sempre aí e pelos visto ninguém compra, você dificilmente vai 
comprar aquilo né e se estás com a tua namorada e ela quiser comprar você 
provavelmente vais dizer “Querida não compra isso, acho que isso não é bom!” 
a Google também se comporta assim, e atenção mesmo que o teu site for 
responsivo, tiver rico semanticamente, e as pessoas visualizam ele em menos 
de 5 segundos, mas se o próprio conteúdo do site ou blog não for de qualidade 
as pessoas vão parar de visitar ele e conseguintemente a Google vai baixar ele 
do ranking, agora você deve estar a se perguntar “Mas como eu ponho o meu 
site na Google?” tem alguns mecanismo que a Google usa para você colocar o 
teu site no monitor de busca deles mas automaticamente a Google indexa 
 
 
todos sites ou blogs que existem na Web, você até pode pôr o teu site ou blog 
na web e fazer uns dias ou até semanas, e você pesquisar ele na Google pode 
não aparecer, mas depois de um tempinho vai aparecer, sabes quantos sites e 
blogs são lançados na web diariamente? Então fica calmo(a)! a Google tá a 
trabalhar, eu acho que você percebeu né? espero que sim! 
 
 2ª SEMÂNTICA DO HTML 
 
Como você deve ter notado, bem no início da aula eu falei sobre as tags 
<header></header>, <article></article> e <footer></footer> 
né? eu acho que você já percebeu até de mais, mas vou dar mais realce para 
elas. 
 
 <HEADER></HEADER> 
 
Essa é a tag para fazer o cabeçalho da página, para ilustrar” é como se fosse a 
introdução” tipo na carta tem aquela parte que fica em cima né? Fica o nome 
da pessoa que vai ser enviada, o endereço e outras coisas mais... é que nem 
essa tag, normalmente fica o logotipo do site ou blog o campo de busca e 
também algumas vezes os contatos, tipo siga – nos nas redes sociais, mas é 
bem infreqüente encontrar os famosos siga – nos nessa tag, percebes? Espero 
que sim! 
 
 <ARCTICLE></ARTICLE> 
 
Essa é a tag que deve constar todo o conteúdo do nosso site menos que estão 
nas tags <header></header>, <footer></footer> e 
<section></section> (também falarei sobre ela nesta aula), é tipo você 
colocar a introdução e a conclusão dentro do desenvolvimento, seria uma 
bagunça né? 
 
 
 
 <SECTION></SECTION> 
 
Essa tag é muito usada para colocar assuntos que não têm nada a ver com o 
artigo principal do site ou blog tipo publicidades ou outros assuntos que não 
são o assuntos principais do site ou blogs, ela é usada muito em blogs de 
notícia, e também é usada para criar secções, visita um blog de notícias que 
perceberás melhor, percebes? 
 
 <FOOTER></FOOTER> 
 
Essa tag é como se fosse a conclusão, ela tem que ser a última tag dentro da 
tag <body></body> e aí onde fica normalmente os famosos “siga-nos nas 
redes sociais”, percebes? Espero que sim! 
 
 CONCLUSÃO 
 
Eu espero que a aula foi boa, e acredita, eu tentei encurtar a aula, mas não 
consegui! eu espero que tenhas entendido sobre o assunto de hoje, nos vemos 
na próxima aula! 
 
 
 
 
 
 
 
 7ª aula 
 
Os tópicos que vais aprender hoje: 
 
1ª A segurança dos sites feito apenas com HTML, CSS e JAVASCRIP. 
2ª Tag <form></form> 
 
 DESCRIÇÃO 
 
 Olá futuro(a) dev! Entendeste a aula passada? Muito bem, vamos começar a 
aula de hoje! 
 
 2ª A SEGURANÇA DOS SITES FEITO APENAS COM 
HTML, CSS E JAVASCRIPT. 
 
Eu sempre gostei de assistir novelas! você deve estar a dizer, “okay mas eu não 
quero saber disso” eu sei, apenas é um exemplo para você entender, tinha 
uma novela que euassisti 2010 se eu não me engano, que uma senhora tinha 
uma filha bem bonita e todos homens cobiçavam ela, então para não violarem 
a moça a mãe mandou fazer um biquíni de chumbo ou ferro sei lá! e o tal 
biquíni tinha cadeado, ou seja ninguém poderia violar a moça porque não tinha 
como, e a única pessoas que conseguia abrir o cadeado era a mãe da moça, eu 
sei, é muita maluquice isso! aquela mãe era doida, consegues perceber o meu 
exemplo? O mesmo acontece com a segurança dos sites (programador é que 
nem essa mãe.) com HTML, CSS e JAVASCRIPT, muitos iniciantes procuram 
 
 
formas de criptografar o código fonte do seu site ou blog, porque se eu visitar 
o teu site eu posso ver o código fonte dele e clonar (fazer igual), você imagina 
passaste muito tempo programando o teu site ou blog para ficar bonitinho e 
um maluco vem copia o código fonte e faz a replica? Agora você deve estar a 
dizer, “tá bom estou entrar no assunto, mas o que é código fonte?” isso é 
meme né? haha... código fonte é o código que você usou para programar o teu 
site ou blog, por exemplo quando escrevemos o endereço do Facebook, nós 
estamos a pedir que o servidor do Facebook envia o código fonte do site para o 
nosso navegador pode interpretar e exibir a página, tipo quando estamos com 
fome, o nosso estômago fica a pedir comida né? é como se fosse o navegador, 
e depois vamos comer um pão ou outra comida né? é como se fosse a resposta 
que o Facebook nos dá quando digitamos o endereço web dele, o famoso Free 
ponto Facebook, eu sei que você está meio perdido, não era suposto eu falar 
sobre isso, mas numa outra aula falo com mais calma, continuando nós 
quando sentimos fome o estômago pede a comida e nós comemos algo, e se 
for na Galinha nós se matarmos a Galinha conseguimos ver a comida que ela 
comeu né? é que nem o nosso código fonte, eu não sei se é possível ver no 
navegador do telefone, mas no computador a maioria dos navegador mostra 
clicando no botão F12, agora você deve estar a dizer, “Tá bom, mas como 
conseguimos proteger o nosso site então destes indivíduos?” como eu te disse 
o navegador precisa ler o código fonte do teu site ou blog para exibir ele, 
existem algumas tecnologias reversas que podem ofuscar o teu código fonte, 
tipo “a48o1a” eu sei, eu é que inventei agora isso não existe! mas se você 
prestar atenção nele supostamente está escrito “Angola” então para a pessoa 
que quiser clonar o teu site não vai ser um trabalho fácil! agora vamos supor 
que você é o navegador, você conseguiu lê aquilo normalmente? Acho que não 
né? então usando estas tecnologias de criptografia de dados, vai fazer com que 
o navegador demore muito para exibir o teu site por que ele vai lutar ainda 
para interpretar ele, é como um aluno que apenas soletra e você lhe dizer para 
ler a palavra sequíssima, ele vai ver fumo...consegues perceber? E o teu 
navegador demorando muito para interpretar o teu site ou blog vai demorar 
muito para ele exibir e conseqüentemente ninguém vai visitar ele e a Google 
vai baixar ela do ranking (Já falei sobre isso) com isso quero dizer que seria 
muito antiético você criptografar o teu site, causaria muito prejuízo para ele, 
demoraria para exibir, vais perder os teus clientes ou usuários, essa é a maior 
desvantagem da tecnologia client-side (falarei sobre isso em breve) que são o 
HTML, CSS e JAVASCRIPT, não quero te rebaixar, mas grandes plataformas 
como a GOOGLE e FACEBOOK têm o código fonte deles à mostra para todos, 
assim mesmo teu queres esconder se você não entendeu? Então não 
criptografa o teu código! 
 
 
 
 2ª TAG <FORM></FORM> 
 
Essa é a tag usada para fazer formulários, tipo vocês têm conta Google né? 
quando vais criar a tua conta Google aparece buede campos que você vai 
colocar o teus dados né? tipo o teu nome, o teu apelido, a tua cidade a tua 
palavra passe, tipo também no Facebook, aquilo é chamado de formulários e 
eles ficam nesta tag, você deve estar a se perguntar “Então é só colocar nesta 
tag, as palavras nomes, idade, palavra passe né?” mas este teu pensamento 
andas então ir buscar onde? eu sei, eu é quem pensei nisso e estou te culpar, 
desculpa aí!, bem para nós fazermos isso vamos usar os seguintes atributos 
(tags sem fechamento) 
 
<DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Testando formulário</title> 
</head> 
<body> 
<form> 
<input type=”text” placeholder=”Teu nome” 
maxlength=”8” minlength=”4” autofocus=”true” 
required=”true”> 
</form> 
</body> 
</html> 
 
 
 
Fica calmo(a) vais entender! se você testar esse código vai aparecer uma 
página branca com um campo de texto escrito teu nome, o input type serve 
para dizer que tipo de campo é, por exemplo de palavra passe, de texto, de 
números…. E o nosso é de texto, muitos usam o “name” pode ser mas eu uso o 
text, porque o teu nome é texto né? e aliás o <input type="name"> não existe, 
pelo mesmo no HTML5! aí o placeholder é o texto que vai aparecer aí no 
campo, vê o campo de busca do Facebook está escrito “Pesquisar no 
Facebook” né? esse é o placeholder, o maxlenght é para dizer o 
número máximo de caráter, eu coloquei 8, tipo tem pessoas que têm nome 
bem grande tipo “Kambugú Diquila Dala” era nome de um colega meu! você 
até pode dizer !esse nome não é grande!” Mas eu vou dizer, ele é, esse Nome 
é Igual ao Denis é o primeiro nome...então para o teu usuário não escrever um 
nome muito grande usa esse método, o minlength é usado para dizer o 
número mínimo de caráteres ou letras que o nome do usuário deve ter, o 
autofocus serve para esse campo ficar ativo logo quando o usuário entrar 
no teu site ou blog, entendes? Aí o required serve para dizer para o 
navegador que esse campo é de preenchimento obrigatório percebes? 
 
 CONCLUSÃO 
 
Infelizmente não consegui acabar a aula que fala sobre a tag <form></form> 
hoje, há vários atributos e nós vamos falar sobre eles na próxima aula, eu sei 
que a aula teve poucos conteúdos a culpada disso tudo é a explicação! Dá uma 
pausa, pratique o que aprendeste hoje e nos vemos na próxima aula! 
 
 
 
 
 
 
 
 
 
 
 8ª aula 
 
 
 Os tópicos que vais aprender hoje: 
 
1ª O que é front-end (cliente-side) e back-end (server-side)? 
2ª Continuação sobre a tag <form></form>. 
 
 DESCRIÇÃO 
 
Tudo calmo né? espero que sim! Percebeste a aula passada? Não? Vai no 
princípio do livro tem um link que vai te levar até a mim, propriamente vai te 
levar até a minha conta do Facebook, e você pode tirar a tua dúvida em tempo 
real! Vamos começar? 
 
 1ª O QUE É FRONT-END(CLIENT-SIDE) E BACK-
END(SERVER-SIDE)? 
 
Você já assistiu alguns programas da TPA né? você deve estar a se perguntar 
“O que isso tem a ver?” fica saber que a TPA vai te fazer entender sobre o 
tema! quando assistimos um programa televisivo nós vemos os 
apresentadores, aquela toda organização do programa, é como se fosse o 
front-end, mas os programas têm regi né? aquela parte onde fica os 
realizadores. Aquela parte onde fica os produtores, os técnicos de som.... A 
parte onde a mágica acontece é como se fosse o back-end, nós normalmente 
 
 
não vemos a regi né? mas muitas vezes o bom aspecto dos programas é 
causado pelo pessoal da regi, é como se fosse o site, ou seja a mágica dos sites 
acontece no back-end, back-end é a parte que armazena informações 
confidenciais dos sites, tipo senhas do usuário, e muitas outras coisas... as 
tecnologias mais usadas no back-end são o NODE.JS(não é linguagem de 
programação, apenas é uma ferramenta usada para executar os códigos 
JAVASCRIPT no servidor), PHP, PYTHON, RUBY também JAVA... e o front-end é 
a parte do site ou blog que o usuário vê, front-end é que nem o apresentador 
de programa, o sofá, as paredesdos programas haha todo mundo vê né? e as 
tecnologias usada para o front-end é essa que estamos aprender, nós somos 
programadores front-end(que cuida do visual do site ou blog) pelo menos eu 
sou front e back, você é que é apenas o front! olha quando estamos assistir os 
programas na TPA principalmente quando dá intervalo e quando retornam tem 
vezes que os apresentadores não dão conta que já tá no ar o programa, muita 
bandeira né? culpado é quem? A regi né? mas quem sofre? O apresentador, 
ele tem que simular uns comportamento para banzelar(improvisar) os 
telespectadores é que nem o site, quando o back-end tá com problemas quem 
sofre é o front-end, agora você estás a se perguntar “Então é impossível fazer 
um site sem back-end?” me responde ainda essa pergunta, Você já assistiu 
programas gravados né? ou seja programas que não foram em direitos? 
Muitos deles não têm regi, principalmente aqueles programas amadores, mas 
esses programas depois de gravação são editados e põe no ar né? o mesmo 
acontece com os sites e blogs, um site ou blog sem back-end seria muito 
amador hoje em dia, e daria muito trabalho na manutenção, você vai ter que 
atualizar toda hora o código fonte do site, seria insuportável né? com o back-
end você criaria um sistema que vai te facilitar escrever artigos para o teu site 
ou blog sem precisar de alterar o código fonte, é tipo a edição dos programas 
gravados seria muito trabalho né? as vezes ao longo do programa o apresentar 
ofendeu haha o editor tem que cortar né? eu espero que você entendeu o 
que é front-end e o que é back-end! 
 
 2ª CONTINUIDADE SOBRE A TAG 
<FORM></FORM> 
 
 
 
Já sabes para que serve essa tag né? eu sei que você já sabe, porque falamos 
dela na aula anterior, vamos ver mais alguns atributos (tags sem fechamentos) 
que ficam dentro desta tag: 
 
<DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Testando formulário</title> 
</head> 
<body> 
<form> 
<input type=”password” maxlength=”7” required=”true” 
placeholder=”Tua palavra passe”> 
</form> 
</body> 
</html> 
 
Não é necessário te falar fica calmo né? eu na aula passada já expliquei como 
funciona o atributo input, e só dar uma olhada nela. O nosso campo será de 
palavra passe, se você testar esse código vai aparecer uma página branca com 
um campo de texto escrito palavra passe, e se você tentar escrever algo nele 
as letras vão aparecer assim ****** que nem a nossa palavra passe no 
Facebook, e a palavra passe está limitada por 7 dígito ou seja só pode ter 7 
letras ou números percebes, aí o required é para dizer ao navegador que esse 
campo deve ser preenchido, por exemplo cria uma conta Facebook põe apenas 
o nome sem a palavra passe, se o Facebook não te ofender, tens muita sorte 
mano(a) brincadeira! 
 
 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Testando formulário</title> 
</head> 
<body> 
<form> 
<input type=” number” placeholder=”teu número”> 
</form> 
</body> 
</html> 
 
Você deve estar falar “Neste eu não preciso da tua explicação, esse é campo 
para colocar números de telefones!” quem te mentiu? Esse campo serve para 
colocar números mas não telefônicos, números normais tipo quando 
perdemos acesso a nossa conta ou esquecemos a palavra passe da nossa conta 
pedimos ao Fecebook para enviar um código, e ele envia código de 6 
dígitos numérico tipo “763892” e você coloca num campo de números, mas se 
você tentar colocar letras, pontos, ou acentos nesse campo não vai dar certo, 
por que é campo apenas para números, percebes? 
 
<!DOCTYPE html> 
<html> 
<head> 
 
 
<meta charset=”urf-8”> 
<title>Testando formulário</title> 
</head> 
<body> 
<form> 
<input type=”tel” required=”true”> 
</body> 
</html> 
 
O campo formado por esse input é que serve para colocar números telefônicos 
yha? aprender é mesmo assim sempre tem surpresas! 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Testando formulário</title> 
</head> 
<body> 
<form action=”Teu programa no servidor” method=”get”> 
<input type=”search” placeholder=”Pesquisar”> 
</form> 
</body> 
</html> 
 
 
 
Estás ver como esse mambo? nenhum fumo né? você deve estar a se 
perguntar “Mas aqueles action e method foram fazer o quê aí?” fica calmo, 
esse é um campo de busca, ou seja que serve para pesquisar no teu site ou 
blog, a maioria dos sites e blogs têm essa ferramenta, como esse é um campo 
de busca o action serve para o campo de busca se comunicar com o programa 
que está no servidor neste caso o back-end, tem vezes quando assistimos 
programas televisivos o apresentador pergunta na regi “Podemos ir para o 
intervalo?” o apresentador está interagir com a regi né? o mesmo acontece 
com o action dos formulários, e o method=”get” serve para você obter a 
resposta do servidor a tua requisição, se você no formulário escrever “Arroz” 
seria o mesmo que perguntar “O que é arroz?” e você vai receber a resposta 
percebes? 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=”utf-8”> 
<title>Testando formulário</title> 
</head> 
<body> 
<form action=”programa no servidor” method=”post”> 
<input type=”email” placeholder=”Teu e-mail” 
required=”true”> 
</form> 
</body> 
</html> 
 
 
 
Você deve estar a dizer “Denis brinca bem, agora o post está a fazer o que no 
method?” fica calmo(a) esse input serve para fazer um campo para e-mail, esse 
campo apenas aceita e-mail, o method=”post” serve para você postar, tipo 
esse método é muito usados naqueles tipos de formulários que pede teu 
nome, palavra passe, e-mail...para você enviar no servidor, ou seja para você 
registar o formulário no programa do back, tipo quando criamos uma conta 
Facebook o method é o post, porque nós estamos enviar ou registar o nossos 
dados no Facebook percebes? eu espero que tenhas entendido, :) 
 
 CONCLUSÃO 
A nossa aula do mini curso está completa! você pode estar a dizer “Brinca bem, 
nepossível!” haha eu apenas quis dizer que aula de hoje fica por aqui, ainda 
faltam 21 aulas para o nosso cursinho terminar... eu espero que foi divertida e 
que conseguiste entender como as coisas funcionam, e não te esqueças pratica 
tudo que temos falado aqui! 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 9ª aula 
 
Os tópicos que vais aprender hoje: 
 
1ª A hospedagem de sites. 
2ª Mais algumas tags. 
 
 DESCRIÇÃO 
 
Estamos aqui de novo para aprender! Estás a usar esse PDF corretamente né? 
em cada aula dá uma pausa e volta a ler num outro dia, assim vais aprender de 
uma forma incrível e não te esqueça nunca, a prática é a amiga da perfeição! 
Vamos começar? 
 
 1ª A HOSPEDAGEM DE SITES 
 
Para todas pessoas poderem ver o teu site ou blog, vai precisa alojar ele em 
um servidor web, programador é que nem um escritor, o escritor escreve o 
livro dele né? depois ele vai ter a necessidade de mostrar o livro, então ele põe 
ele numa biblioteca ou coisa parecida, o mesmo acontece com a criação de 
sites, você vai fazer o teu projectos off-line (sem internet), e quando tudo 
estiver pronto vai sentir a necessidade de publicar ele na internet, você deve 
estar a se perguntar “Okay já entendi, mas como coloco o meu site então na 
 
 
web?” fica calmo(a)! você tem duas opções a primeira é o servidor gratuito a 
segunda o servidor pago, e agora deves estar a se perguntar “E qual é a 
diferença?” sabes, muitas vezes quando alguém nos faz coisa de favor, o 
resultado é uma coisa horrível né? tipo, teu tio é alfaiate e tens uma calça bem 
bonitinha mas só que te fica um pouquinho grande, e você vai para o teu tio 
alfaiate dá uns arranjos na calça, mas muitas vezes ele vai fazer um serviço sem 
qualidade por que você não lhe pagou e até pode piorar! haha mas se você 
lhe pagar ele vai fazer o seu máximo para fazersentir o teu cumbú(dinheiro) 
né? o mesmo acontece com os servidores pagos e gratuitos, percebes? Agora 
você pode estar a se perguntar “Okay estou a entender mas o que é servidor?” 
isso é sério? Lembras do exemplo da biblioteca? Essa biblioteca é que nem o 
servidor, percebes? Deixa falar um pouco mais sobre as hospedagens grátis, na 
hospedagem grátis não vão te cobrar nada para hospedar no servidor dele, 
você deve estar a se perguntar “Como assim?” fica saber que você será o 
negócio deles! normalmente os servidores grátis põe publicidades no teu site 
ou blog, tipo teu blog é religioso e o servidor põe lá uma imagem de uma 
jovem seminua para publicitar uma empresa de cosmético ou agencia de 
modelo, não cairia bem né? e além do mais, os sites ou blogs no servidores 
gratuitos podem ficar muito tempo fora do ar, você deves estar a dizer “Explica 
bem esse mambo(assunto)!” site fora do ar é tipo um canal televisivo que 
quando você tenta assistir os programas deles não consegues por que o canal 
não está apresentar por causa de alguma avaria técnica, assiste TPA vais 
entender melhor! mas os servidores gratuito não fazem isso por causa de 
avarias técnicas mas para ele descansar, normalmente servidores grátis 
hospedam vários sites, por que é grátis supostamente ninguém paga, é como 
se fosse um supermercado que oferece produtos de favor, ele não pode ficar 
aberto todos os dias né? em menos de uma semana ele vai ir a falência, você 
deve estar a perguntar “Você vive mesmo em Angola? Já viste supermercado 
que oferece produtos?” é só exemplo! tem várias coisas relacionada a 
hospedagem de site se eu falar tudo vou levar muitos anos(brincadeira) e 
consequentemente a nossa aula vai ficar chata. Com isso eu quero dizer que as 
hospedagem grátis não são boas opções para projetos sérios, se for apenas 
para testar tá numa boa né? mas se for algo sério vai deixar teu site ou blog 
muito amador, os endereços dos servidor grátis são muito extenso, e ninguém 
vai querer decorar! eu queria falar sobre domínio e URL mas não deu, a aula 
ficaria muito extensa, bem eu te aconselho a usar hospedagem paga para 
projectos sérios, e grátis para 
 
 
 
 2ª MAIS ALGUMAS TAGS 
 
 Na aula passada esqueci de falar sobre dois inputs importantes da tag 
<form></form> 
 
 <input type=”file”> 
 
Esse input não cria um campo de formulário como os outros, sabes quando 
você vai para atualizar a tua foto do perfil? Você clica num botão que te leva 
na galaria né? para escolher a foto, se usa esse atributo (tags sem fechamento) 
para isso, ela serve para enviar fotos, vídeos documentos para o site ou blog 
percebes? Testa ele, põe dentro da tag <form></form> que vais ver a mágica :) 
 
 <input type=”submit” value=”Enviar”> 
 
Como você já deve ter notado esse input cria o botão para o envio do 
formulário para o servidor, aí o value é o nome que vai aparecer no botão. 
 
 <button>Nome do botão aqui</button> 
 
Essa tag é usada para criar botões normais, o <input type=”submit”> cria um 
botão especial para o envio de dados do formulário, tipo aquele botão no 
Facebook quando nós colocamos o nosso número telefônico ou nosso e-mail e 
a nossa palavra passe clicamos no botão entrar né? é o <input type”submit”>, 
essa tag eu uso muito para chamar funções JAVASCRIPT, se você não entendeu 
bem, quando falaremos sobre JAVASCRIPT vais perceber melhor! 
 
 
 
 <input type=”button” value=”nome do botão”> 
 
Esse input é o mesmo que a tag <button></button> apenas criar uma botão 
normal. 
 
 <br> 
 
 Essa tag serve para mudar de alínea sem fazer parágrafos, tipos os textos 
poéticos, são mais ou menos assim: 
 
Denis 
Um jovem que gosta de 
Ensinar e 
Ama a 
Programação 
 
A tag <br> serve para fazer isso, você se tentar colocar mais de um vídeo 
numa página com a tag <vídeo></vídeo> (Já falamos dela) não vai dar certo 
mas se você colocar o atributo <br> vai dar certo, okay não entendeste vê o 
exemplo a seguir: 
 
<!DOCTYPE html> 
<html> 
<head> 
 
 
<meta charset=”utf-8”> 
<title>Testando video</title> 
</head> 
<body> 
<video controls=”true” loop=”true”><source 
src=”Denis.mp4” type=”video/mp4”></video><br> 
<video controls=”true” loop=”true”<source 
src=”Power.mp4” type=”video/mp4”></video> 
</body> 
</html> 
 
Eu nem vou explicar mais, porque já falamos sobre isso, é só você procurar a 
aula que fala sobre a tag <vídeo></vídeo>, aí os dois vídeos vão aparecer, 
quando você não coloca o <br> estás a dizer que os vídeos deve estar colado, e 
é impossível fazer isso, pondo o <br> quer dizer que o outro vídeo tem que 
estar abaixo do outro, tipo no YOUTUBE, percebes? Espero que sim! 
 
 CONCLUSÃO 
 
A nossa aula de hoje fica por aqui, eu espero que foi divertida e que 
conseguiste entender alguma coisa! 
 
 
 
 
 
 
 
 
 
 10ª Aula 
 
Os tópicos que vamos falar hoje: 
 
1ª Qual é a diferença entre sites estáticos e dinâmicos? 
2ª O encerramento do capitulo “HTML”. 
 
 DESCRIÇÃO 
 
Oi futuro dev! Tudo bem? Essa será a aula que vai encerrar o capitulo do 
JAVASCRIPT do nosso pdf, eu espero que você aprendeu o básico dessa 
tecnologia...para aprenderes mais procura por um livro, esse PDF apenas tem 
aulas introdutórias, vamos começar? 
 
 1ª A DIFERENÇA ENTRE SITES ESTÁTICOS E SITES 
DINÂMICOS 
 
Sabes quando você vê uma estátua? Você deve estar a se perguntar “Oque 
estátua tem a ver com sites?” fica calmo(a) vais entender! a estatuas 
normalmente não se mexem né? não têm vida, o dia que você ver uma estátua 
se mexer, mano(a) tira o pé? haha ao contrário, as pessoas se mexem né? se 
você apreciar uma estátua e uma pessoa por um tempo, vais ver que há 
diferença, a estátua vai ficar sempre na mesma posição e a pessoa vai sentar, 
vai cuspir, vai correr, ou seja vais notar alteração na posição da pessoa, os sites 
 
 
estáticos são que nem as estatuas, e os dinâmicos são que nem as pessoas, eu 
sei é um exemplo muito doido! consegues perceber a diferença? Agora deves 
estar a se perguntar “Quais tecnologias são usadas para fazer sites estáticos e 
dinâmicos?” sites estáticos são feitos apenas com HTML e CSS, mas hoje em 
dia é quase impossível ver estes tipos de sites, mas ainda existem infelizmente, 
muitos deles são sites que publicitam bares, armazéns, mas hoje em dia é 
mesmo bem difícil encontrar eles, mas fica saber que um site ou blog onde 
entra pelo menos JAVASCRIPT já é considerado dinâmico, por causa do 
dinamismo que o JAVASCRIPT dá na página (Falaremos sobre isso em breve), 
agora você se for já um pouquinho avançado deve estar a se perguntar “Mas 
CSS também dá certas animações na página, porquê dizes isso?” sei, mas o CSS 
não efetua operações lógicas, pelo que eu sei não é possível fazer relógios ou 
contadores para colocar na tua página com CSS, não é possível enviar uma 
mensagem saudando o usuário conforme a hora que ele visita o nosso blog ou 
site, não é possível fazer um pequeno programa que calcula o preço de 
produtos, ou que calcula a idade do usuário com CSS, consegues perceber? 
Espero que sim! como eu já havia tido, sites feitos apenas com o trio do front-
end (já falamos sobre isso) que são o HTML, CSS e JAVASCRIPT já são 
considerados dinâmicos, agora para o teu site ser 100% dinâmico coloca o 
back-end nele, com NODE.JS, PHP, PYTHON OU RUBY, não estou a dizer que 
vais estudar as quatro linguagens! só uma delas que o teu site vai se tornar 
100% dinâmico, você deve estar a se perguntar “Como assim?” por que o site 
vai interagir com o usuário a partir do back-end, tipo aqueles sites ou blogs que 
têm campo de busca, e você pesquisa algo nele, estás a interagir com o blog ou 
site né?, tipo se eu tiver um siteque comercializa TV, e você entrar nele e 
escreve no campo de busca “Tv plasma de 70 polegadas” é o mesmo que você 
perguntar, “Essa vossa empresa vende plasma de 70 polegadas?” E a 
linguagem que está no back-end vai procurar pelo resultado no banco de 
dados, parece que você está a conversar com o site né? agora deves estar a 
dizer “Okay estou a entender, mas o que é banco de dados?” brinca bem! 
quem me mandou falar disso, assim vou ter que explicar!! banco de dados é o 
lugar onde fica armazenado arquivos importantes do site ou blog, que o 
usuário não consegue ver e não pode mesmo ver por que são coisas 
confidenciais, é tipo nas escolas, tem uma banda onde é guardado os 
certificados dos alunos né? aquele lugar é como se fosse o banco de dados , eu 
queria explicar mais só que a nossa aula estar a ficar muito longa, e ficaria 
chata né? eu espero que você entendeu esse tema! 
 
 
 
 2ª O ENCERRAMENTO DO CAPÍTULO “HTML”. 
 
Hoje será a última aula do mini curso que vai falar sobre “HTML” na próxima 
aula entraremos no capítulo que fala sobre “CSS”. 
 
Sabes quando você visita um site que o artigo não está em português, o teu 
navegador detecta a linguagem do artigo e pede se pode traduzir né? pelo 
menos no Google Chrome acontece muito isso, agora você já se perguntou 
como os navegadores conseguem perceber? Vê o exemplo a seguir: 
 
<!DOCTYPE html> 
<html lang=”pt”> 
<head> 
<meta charset=”utf-8”> 
<title>Mini curso programador web</title> 
</head> 
<body> 
<article> 
<h2>Aprenda a programação</h2> 
<p>Nós somos a comunidade web devs angolana e 
moçambicana</p> 
</article> 
</body> 
</html> 
 
 
 
Eu nem vou explicar as tags que estão nesse exemplo porque já falamos sobre 
elas, você notou que na abertura da nossa página HTML, tem aí o <html 
lang=”pt”> né? é o mesmo que dizer “A língua do artigo do site está em 
português” se uma pessoa de outo país que não fala português visitar o nosso 
site, o navegador vai detectar e vai tentar traduzir para a língua dessa pessoa, 
percebes? O lang é a abreviação do language que em português significa 
linguagem o “pt” é português, entendeu? 
 
Para realçarmos (dar destaque) uma palavra numa página HTML usamos a tag 
<strong></Strong>, a palavra fica dentro da tag, vê o exemplo: 
 
<!DOCTYPE html> 
<html lang=”pt”> 
<head> 
<meta charset=”utf-8”> 
<title>Apresentação</title> 
</head> 
<body> 
<h5>Olá a todos eu sou o <strong>Denis</strong> um 
jovem angolano</h5> 
</body> 
</html> 
 
 Aí o nome Denis vai aparecer com realce testa o código, vais ver a mágica! 
 
Sabes quando você estuda algo, tem vezes para você não se complicar, você 
faz anotações né? o desenvolvedor web, também faz! Usa-se <! - -aqui o 
comentário--> que é chamado de comentários, vê o exemplo: 
 
 
 
<DOCTYPE html> 
<html lang=”pt”> 
<head> 
<meta charset=”utf-8”> 
<title>Apresentação</title> 
</head> 
<body> 
<!- - Essa página vai imprimir o meu nome - -> 
<h5>Olá eu sou o <strong>Denis</strong>!</h5> 
</body> 
</html> 
 
Fica calmo(a) o navegador vai ignorar tudo que está no comentário! Eu espero 
que você entendeu! 
 
 CONCLUSÃO 
 
Assim termina o nosso capitulo HTML, não te esqueças você não aprendeu 
tudo, isso apenas é o básico dos básicos, pesquisa mais coisas sobre HTML que 
vais saber que ainda existe várias tags, tira dois dias para praticar tudo que nós 
falamos nesse capítulo…nos vemos no próximo capítulo 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Css 
 
 
 
 
 
 
 
 
 
 
 
 11ª aula 
 
Os tópicos que vamos falar hoje: 
 
1ª Como o Facebook faz dinheiro? 
2ª Estrutura do CSS! 
 
 DESCRIÇÃO 
 
Oi futuro devzinho(a) tudo bem? Espero que sim! Hoje vamos entrar no nosso 
capítulo CSS, mbora aprender? 
 
 
 
 1ª COMO O FACEBOOK FAZ DINHEIRO? 
 
Tinha um tempo que havia algumas pessoas que diziam “Em cada like, 
publicação e mensagem no Facebook cai buede(muito) dinheiro na conta do 
Mark Zuckerberg (fundador e CEO do Facebook”) éh essas pessoas já te 
mentiram muito! se fosse assim os governos africanos do jeito que são tão 
egoístas e orgulhosos poderiam também criar uma rede social para eles 
ficarem mais rico, você deve estar a se perguntar “Okay mas como o Facebook 
consegue fazer dinheiro então?” é simples, marketing ou seja publicidades, 
agora você deve estar a dizer “Explica bem esse mambo!” As empresas sempre 
estão à procura de clientes né? outras são ainda bem novas e querem ganhar 
clientes! E qual é o melhor lugar para encontrar esses clientes? No Facebook 
né? Facebook praticamente é um mundo virtual, onde se encontra pessoas de 
qualquer idade e profissão e agora você deve estar a se perguntar “E agora os 
sites das empresas ficam como?” para os clientes visitarem o site de uma 
empresa tem que ter alguém influente que possa publicitar o site né? e quem 
é esse alguém? O Facebook! as empresas criam uma página no Facebook para 
publicitar os seus negócios, o Facebook como é vivo começa a lhes entrar na 
mente (lhes convencer) “faz sentir um cumbú vamos publicitar bem o teu 
negócio” se você tiver uma página no Facebook tem vezes que eles enviam 
notificação “A tua publicação pode ter um milhão de visualizações promove 
ela” mas tua página que apenas tem uns mil likes como que a publicação vai 
ter um milhão de visualizações? O Facebook vai promover ela e claro a 
empresa vai pagar um determinado valor, tipo tem vezes estamos aí 
vagueando no nosso feed de notícias e do nada aparece publicação de uma 
página que não gostamos, e você fica a se perguntar “Isso então está a fazer o 
quê aqui?” é o negócio do Facebook! e se você gostar do produto ou do 
conteúdo que está na publicação, vais entrar em contacto com eles né? e a 
empresa ganha e também o Facebook ganha, consegues perceber? Agora você 
imagina todas empresas e famosos que têm página no Facebook fazem isso 
dentro de 4 dias ou uma semana? como que o Mark não fica rico? E ele 
também tem outros negócios, então se alguém vir te mentir mais que cada 
publicação, mensagem, like no Facebook entra dinheiro na conta do Mark, lhe 
atira pedra haha(brincadeira) e ainda há mais outras formas que o Facebook 
usa para fazer dinheiro, mas esta é a principal... 
 
 
 
 
 2ª A ESTRUTURA DO CSS! 
 
Você já sabe que o CSS é a linguagem que serve para embelezar a página 
feita com HTML né? Tipo o HTML é o rosto de uma mulher e o CSS é a 
maquilhagem, tem algumas mulheres sem maquilhagem você quase que foge 
dela, é como se fossem algumas páginas HTML sem CSS ficam 
horripilantes! mas tem umas manas que mesmo sem maquilhagem são tops 
né? tem alguns web designers que conseguem fazer páginas bem bonitinhas 
apenas com HTML, e imagina quando vai implementar o CSS? Vai ser um 
“wow”, okay já te aborrece com o meu discurso! vamos lá ver a estrutura do 
CSS: 
 
Seletor { 
Propriedade: Valor; 
} 
 
Você deve estar a dizer “O que é isso? “Fica calmo(a) vais entender, Sabes 
quando as mulheres vão fazer manicure, a pessoa que vai lhe atender acho 
que pergunta mais ou menos assim “O que queres fazer?” ela vai dizer 
manicure e manicure é para embelezar que parte do corpo? Acho que as mãos 
né? ou as unhas sei lá! isso é como se fosse o seletor( é a tag que vamos 
embelezar) e as moças escolhem o tipo de embelezamento né? isso é que nem 
a propriedade, tipo se a moça quer que lhe pintem as unhas ela talvez vais 
escolher cor preta, a pintura vai ser que nem a propriedade e a cor preta vai 
ser que nem o valor, as unhas vai ser que nem a tag que vais ser embelezada 
que é chamado de seletores, resumindo o seletor é a tag que queremos 
embelezar, a propriedade