Aulas Online Grátis de Programação

Web
Aula 1: Como criar interfaces web com HTML 5 e CSS 3

Osvaldo Livondeni

https://www.codigopoesia.com osvaldo@codigopoesia.com | (+244) 933 909 592, (+244) 996 366 303
Como seria a sua vida se, a partir de agora,
você começasse a sua trajectória de se
tornar um bom programador web
para ter a possibilidade de criar websites e
aplicativos para empresas e poder
materializar as suas ideias pessoais de
aplicativos?
Já vos contei a estória dos dois estudantes que
tinham invadido a minha aula em 2015
quando eu leccionava programação no Instituto
Superior Politécnico do Zango...
eu acho que eles estavam na mesma
situação que você…
 Eles queriam aprender a programar de uma
forma fácil e poder compreender programação.
Mas só que programação para eles era difícil
Não sabiam as principais bases de
programação
Tinham dificuldades para aprender a
programar
Viam programação um bicho de sete
cabeças
Tudo isso porque a explicação do professor
deles de programação
não era clara, objectiva e não tinha
exemplos práticos
Estes dois estudantes estavam tão desesperados
que tinham decidido mudar de especialidade,
desistir do curso deles e passar para o curso onde
eu leccionava a cadeira de programação
Isto porque os colegas deles, que eram
meus estudantes
lhes tinham dito que estavam a compreender e
aprender programação e que programação para
eles era algo BOM.
Muita gente acha programação difícil
porque a maior parte dos professores
ensina a programar
directamente através de uma linguagem de
programação.
Isto é um erro
Ensinar programação directamente através de
uma linguagem de programação
sem ensinar Lógica de Programação, é como
ensinar a ler sem ensinar o alfabeto.
Isto obriga os estudantes a decorar linhas de
código
visto que lhes falta o raciocínio lógico
aplicável à programação.
Nestas aulas que teremos você vai aprender
o ABC da programação
para que você aprenda a programar com
facilidade
mesmo que nunca teve contacto com
programação antes
E como o cérebro humano tende a deitar fora
toda informação que não usa ou que acha
inútil...
a gente vai meter em prática o que estiver a
aprender criando um website.
Na aula de hoje você vai aprender a criar páginas
web com HTML 5 e CSS 3
Na segunda aula você vai aprender o ABC da
programação - Lógica de Programação
Na terceira aula você vai aprender a
Linguagem de programação PHP
Eu sou o Osvaldo Livondeni
sou formado em Engenharia de Concepção e
Desenvolvimento de Aplicações
 fui professor de programação no Instituto
Superior Politécnico do Zango entre 2015 e 2018.
trabalho como consultor desenvolvendo
websites e aplicativos web
para empresas e particulares desde 2012
desenvolvi o website da Aliança Francesa de
São Tomé e Príncipe
desenvolvi o website da Fundação Lwini
desenvolvi o website do Instituto de
Investigação Agrária
desenvolvi o website da Associação
Angolana de Clínicas Médicas
desenvolvi o website do Arautos da Fé, o maior
portal angolano de notícia cristã e muitos outros
websites...
e estou aqui para lhe ensinar a programar e
criar websites.
Pronto para aprender a programar? Então
vamos a isso!
Vamos começar com HTML 5 e CSS 3
Para aprender a programar você não precisa
saber o HTML e CSS
a gente vai aprender HTML e CSS
porque a linguagem de programação que a gente
vai aprender na terceira aula, o PHP
usa o HTML e o CSS para mostrar os seus
resultados de forma elegante.
e também porque nestas aulas eu vou ensinar
você a criar websites, para além de programar
O que é então o HTML e CSS?
HTML é a linguagem usada para construir as
interfaces das páginas web
ou seja, tudo o que você vê num website...
texto, botões, campos de formulários,
imagens, vídeos, ...
é tudo HTML
já o CSS significa Cascading Style Sheets
ou simplesmente folhas de estilo
serve para organizar, estilar, ou ainda embelezar
os elementos HTML numa página web
Um documento HTML é formado por uma
série de elementos ou tags
elementos ou tags HTML dizem ao navegador
como exibir um determinado conteúdo
os navegadores não exibem os elementos
ou tags HTML
mas usam eles para renderizar o conteúdo
da página HTML
O seguinte código HTML, por exemplo:
<i>Meu primeiro paragrafo.</i>
é exibido pelo navegador da seguinte forma,
sem as tags <i> nem </i>:
Agora você vai criar o seu primeiro
documento HTML e CSS!
Abra o programa Sublime Text Editor no seu
computador
copie e cole as seguintes linhas de código
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Aula de programação</title>
<style type="text/css">
i{
color: red;
}
</style>
</head>

<body>
<i>Meu primeiro paragrafo.</i>
</body>
</html>
guarde o documento com o seguinte
nome: index.html
abra o documento com um navegador web
 Agora dá uma olhada em como o
navegador web mostra o resultado do
documento...
nenhuma tag ou elemento HTML
apareceu no resultado...
dá uma olhada no código num editor
de texto como o Sublime Text...
vamos analisar e entender este código
linha por linha
A marcação <!DOCTYPE
html> define que este é
um documento HTML 5
 O documento HTML
propriamente dito
começa com <html> e
termina com </html>
 No elemento <head>
colocamos informações
“meta” do documento
 Usamos o elemento
<title> para especificar
o título da página web
 O elemento <body>
contém o conteúdo
visível da página web
e é onde construímos
o nosso website
 neste nosso site
colocamos apenas um
título e um parágrafo
O elemento <h1> serve
para inserir um título
O elemento <p> serve
para inserir um
parágrafo.
O elemento <style>
serve para inserir
código CSS
O código CSS é simples
 Só precisamos de
selecionar o elemento
que queremos estilar
e aplicar o estilo
 neste nosso site,
estamos a dizer que o
título h1 terá a cor
vermelha, color: red
Quais são as ferramentas usadas para
criar documentos HTML e CSS?
Como vimos, para criar um documento
HTML e CSS precisamos apenas
de um Editor de texto para criar o
documento e escrever o código
Eu pessoalmente uso o Sublime Text
Editor
E precisamos ainda de um navegador web
para visualizar o resultado da página web
a ser criada
Eu pessoalmente uso o Google
Chrome
Até aqui já sabemos o básico para
construir uma página web
Vamos aprender mais 2 coisas
essenciais
Como criar links
e como inserir imagens
 um link é usado para dirigir o
utilizador para uma outra página web
ao clicar em um item
A gente faz isto da seguinte forma...
<a href="link">Texto visível</a>
Neste exemplo o utilizador é dirigido à
página 1 ao clicar em “Clicar aqui”
<a href="pagina1.html">Clicar aqui</a>
Para inserir imagens na nossa página
web a gente faz...

<img src="nome_da_imagem.jpg">
Agora que já tem noção de HTML e
CSS, pode aprender o PHP
pois o PHP usa o HTML e o CSS para
mostrar os seus resultados de forma
elegante
Mas antes de aprender a linguagem de
programação PHP
você precisa aprender o ABC da
programação
para saber as principais bases de
programação
e para ter o raciocínio lógico aplicável à
programação
e você vai aprender o ABC da programação
na próxima aula...
Agora, você pode pensar ...
 Nunca estudei programação antes, poderei
mesmo assim aprender a programar com estas
aulas?
 Como aprender a programar?
Como ser um bom programador?
Devo saber falar inglês para ser um bom
programador?
Na próxima aula você vai ter a resposta
destas perguntas
E você vai ver o segredo para aprender a
programar com facilidade.
Vai ver o que eu chama de o ABC da
programação.
Agora é a sua vez de agir
É apaixonado por tecnologia e quer ser um
bom programador?
É hora de começar a fazer a sua parte
Hoje eu quero primeiramente que você acredite
que pode ser um bom programador
quero que você comece a imaginar isto
e quero que você escreva nos comentários "Eu
serei um bom programador web"
Para terminar, o que você achou da aula de
hoje?
tem alguma dúvida?
Pode perguntar nos comentários
Até a próxima aula...
“Código é poesia”