Modulo de Programacao Web

UnISCED CURSO: Gestão de Sistemas de Informação; 20 Ano Disciplina/Módulo: Programação e Web Design
MANUAL DO CURSO DE LICENCIATURA EM
Gestão de Sistemas de
Informação
ENSINO ONLINE. ENSINO COM FUTURO 2022
i
2º ANO : Programação e Web Design
CÓDIGO ISCED21-
INFOCFE0012
GSITOTAL HORAS/ 1 150
SEMESTRE
CRÉDITOS (SNATCA) 7
NÚMERO DE TEMAS 6
ii
Direitos de autor (copyright)
Este manual é propriedade da Universidade Aberta ISCED (UnISCED),e contém reservados

todos os direitos. É proibida a duplicação ou reprodução parcial ou total deste manual, sob
quaisquer formas ou por quaisquer meios (electrónicos, mecânico, gravação, fotocópia ou
outros), sem permissão expressa de entidade editora (Universidade Aberta ISCED (UnISCED).
A não observância do acima estipulado o infractor é passível a aplicação de processos judiciaisem

vigor no País.
Universidade Aberta ISCED (UnISCED)

Vice-Reitoria Académica
Rua Dr. Almeida Lacerda, No 212 Ponta - Gêa
Beira - Moçambique Telefone: +258 23 323501
Cel: +258 82 3055839
Fax: 23323501
E-mail:direcção@unisced.edu.mz
Website: www.isced.edu.mz
iii
Agradecimentos
A Universidade Aberta ISCED e o autor do presente manual agradecem a colaboração dos seguintes
indivíduos e instituições na elaboração deste manual:
Autor Osvaldo Pedro Simone - Licenciado em Engenharia informática e

Mestrando em Tecnologias e Sistemas Informáticos Web.
Vice- Reitoria Académica do UnISCED

Coordenação
Design Universidade Aberta ISCED
Instituto Africano de Promoção da Educação a Distancia (IAPED)

Financiamento e Logística
Revisão Científica e XXXXX

Linguística
Ano de Publicação 2018
Local de Publicação UnISCED – BEIRA
iv
Índice
Visão geral 1
Benvindo à Disciplina/Módulo de Gestão de Sistemas de Informação ....................... 1
Objectivos do Módulo .......................................................................................... 1
Quem deveria estudar este módulo .................................................................... 1
Como está estruturado este módulo.................................................................... 2
Ícones de actividade ........................................................................................... 3
Habilidades de estudo ......................................................................................... 3
Precisa de apoio? ............................................................................................... 5
Tarefas (avaliação e auto-avaliação) .................................................................. 6
Avaliação ............................................................................................................ 7
TEMA – I: INTRODUÇÃO A INFORMATICA. 9

UNIDADE Temática 1.1. Fundamento da internet e world wide web ........................... 9
Introdução ........................................................................................................... 9
UNIDADE Temática 1.2. Internet e WWW......................................................... 14
Introdução ......................................................................................................... 14
Sumário ............................................................................................................. 19
Exercícios de AUTO-AVALIAÇÃO..................................................................... 19
Exercícios para AVALIAÇÃO ............................................................................ 20
Exercícios do TEMA ................................................................ Erro! Marcador não definido.
TEMA – II: LINGUAGEM HTML – CONCEITOS BÁSICOS. 21

UNIDADE Temática 2.1. Fundamento do HTML ....................................................... 21
Introdução ......................................................................................................... 21
Sumário ............................................................................................................. 26
Exercícios para AVALIAÇÃO ............................................ Erro! Marcador não definido.
Exercícios do TEMA ................................................................ Erro! Marcador não definido.
Sumário ............................................................................................................. 30
Exercícios para AVALIAÇÃO ............................................................................ 30
Sumário ............................................................................................................. 37
Exercícios de AUTO-AVALIAÇÃO ......................................... Erro! Marcador não definido.
TEMA – III: TABULAÇÃO E FORMULÁRIOS DE DADOS EM HTML. 39

UNIDADE Temática 3.1. Listas e Tabelas de dados .......................................... 39
Introdução ......................................................................................................... 39
Sumário ............................................................................................................. 46
Exercícios de AUTO-AVALIAÇÃO ......................................... Erro! Marcador não definido.
Sumário ............................................................................................................. 51
v
TEMA – IV: FOLHAS DE ESTÍLO – CSS STYLE SHEET. 53

UNIDADE Temática 3.1. Fundamentos do css (declarações e selecores) ...................... 53
Introdução ......................................................................................................... 53
Sumário ............................................................................................................. 59
UNIDADE Temática 3.1. Propriedade do css .................................................... 60
Introdução ......................................................................................................... 60
Sumário ............................................................................................................. 76
TEMA – V: JAVASCRIPT. 77
UNIDADE Temática 5.1. Introdução ao JavaScript: Variáveis e operadores ............. 77
Introdução ......................................................................................................... 77
Sumário ............................................................................................................. 84
UNIDADE Temática 5.2. Objetos e Comandos ................................................. 85
Introdução ......................................................................................................... 85
Sumário ............................................................................................................. 93
TEMA – VI: PHP. 94

UNIDADE Temática 6.1. Expressões e Estrutura de controlo ................................... 94
Introdução ......................................................................................................... 94
UNIDADE Temática 6.2. Sintaxe básicos com PHP .......................................... 97
Introdução ......................................................................................................... 97
Sumário ........................................................................................................... 101
Exercícios de AUTO-AVALIAÇÃO................................................................... 101
Exercícios para AVALIAÇÃO .......................................................................... 101
UNIDADE Temática 6.3. Expressões e Estrutura de controlo ................................. 103
Introdução ....................................................................................................... 103
Sumário ........................................................................................................... 109
UNIDADE Temática 6.4. Manipular dados na base de dados com PHP. ................. 111
Introdução ....................................................................................................... 111
Sumário ........................................................................................................... 119
vi
ISCED CURSO: Gestão de Sistemas de Informação; 20 Ano Disciplina/Módulo: Programação e Web Design
Visão geral
Benvindo à Disciplina/Módulo de Gestão de Sistemas

de Informação
Objectivos do Módulo
Ao terminar o estudo deste módulo de Programação e Web Design

deverá ser capaz de: saber diferenciar web de internet, ter solido
conhecimento de aplicares PHP, diferenciar servidor web e DNS,
desenvolver paginas usando a linguagem HTML, JavaScript com
estilo CSS.
▪ Entender diferença estre Web e Internet;
▪ Perceber princípios de funcionamento da internet;
▪ Desenvolver paginas HTML usando CSS com animações em

Objectivos
Específicos JavaScript;
▪ Entender funcionamento da Web;
▪ Saber desenvolver aplicações web usando PHP;
▪ Saber diferenciar tipos de servidores.
Quem deveria estudar este módulo

Este Módulo foi concebido para estudantes do 2º ano do curso de
licenciatura em Gestão de Sistemas de Informação do ISCED e outras
áreas afim. Poderá ocorrer, contudo, que haja leitores que queiram
se actualizar e consolidar seus conhecimentos nessa disciplina, esses
serão bem-vindos, não sendo necessário para tal se inscrever. Mas
poderá adquirir o manual.
1
Como está estruturado este módulo
Este módulo de Programação e Web Design, para estudantes do 2º

ano do curso de licenciatura em Gestão de Sistemas de Informação,
à semelhança dos restantes do ISCED, está estruturado como se
segue:
Páginas introdutórias
▪ Um índice completo.
▪ Uma visão geral detalhada dos conteúdos do módulo, resumindo os
aspectos-chave que você precisa conhecer para melhor estudar.
Recomendamos vivamente que leia esta secção com atenção
antes de começar o seu estudo, como componente de
habilidades de estudos.
Conteúdo desta Disciplina / módulo
Este módulo está estruturado em Temas. Cada tema, por sua vez
comporta certo número de unidades temáticas ou simplesmente
unidades. Cada unidade temática se caracteriza por conter uma
introdução, objectivos, conteúdos.
No final de cada unidade temática ou do próprio tema, são
incorporados antes o sumário, exercícios de auto-avaliação, só
depois é que aparecem os exercícios de avaliação.
Os exercícios de avaliação têm as seguintes características: Puros
exercícios teóricos/Práticos, Problemas não resolvidos e actividades
práticas, incluído estudo de caso.
Outros recursos
A equipa dos académicos e pedagogos do ISCED, pensando em si,

num cantinho, recôndito deste nosso vasto Moçambique e cheio de
dúvidas e limitações no seu processo de aprendizagem, apresenta
uma lista de recursos didácticos adicionais ao seu módulo para você
explorar. Para tal o ISCED disponibiliza na biblioteca do seu centro
de recursos mais material de estudos relacionado com o seu curso
como: Livros e/ou módulos, CD, CD-ROOM, DVD. Para além deste
material físico ou electrónico disponível na biblioteca, pode ter
acesso a Plataforma digital moodle para alargar mais ainda as
possibilidades dos seus estudos.
Recursos usado nesta disciplina:
• Editor de Texto Notepad ++ *importante
• Servidor Apache WampServer *importante
• SGBD MySQL Workbench * Opcional
2
Auto-avaliação e Tarefas de avaliação
Tarefas de auto-avaliação para este módulo encontram-se no final

de cada unidade temática e de cada tema. As tarefas dos exercícios
de auto-avaliação apresentam duas características: primeiro
apresentam exercícios resolvidos com detalhes. Segundo, exercícios
que mostram apenas respostas.
Tarefas de avaliação devem ser semelhantes às de auto-avaliação
mas sem mostrar os passos e devem obedecer o grau crescente de
dificuldades do processo de aprendizagem, umas a seguir a outras.
Parte das terefas de avaliação será objecto dos trabalhos de campo
a serem entregues aos tutores/docentes para efeitos de correcção e
subsequentemente nota. Também constará do exame do fim do
módulo. Pelo que, caro estudante, fazer todos os exercícios de
avaliação é uma grande vantagem.
Comentários e sugestões
Use este espaço para dar sugestões valiosas, sobre determinados

aspectos, quer de natureza científica, quer de natureza didáctico-
Pedagógica, etc, sobre como deveriam ser ou estar apresentadas.
Pode ser que graças as suas observações que, em gozo de confiança,
classificamo-las de úteis, o próximo módulo venha a ser melhorado.
Ícones de actividade
Ao longo deste manual irá encontrar uma série de ícones nas margens
das folhas. Estes ícones servem para identificar diferentes partes do
processo de aprendizagem. Podem indicar uma parcela específica
de texto, uma nova actividade ou tarefa, uma mudança de
actividade, etc.
Habilidades de estudo
O principal objectivo deste campo é o de ensinar aprender a

aprender. Aprender aprende-se.
Durante a formação e desenvolvimento de competências, para

facilitar a aprendizagem e alcançar melhores resultados, implicará
empenho, dedicação e disciplina no estudo. Isto é, os bons resultados
apenas se conseguem com estratégias eficientes e eficazes. Por isso é
importante saber como, onde e quando estudar. Apresentamos
algumas sugestões com as quais esperamos que caro estudante possa
rentabilizar o tempo dedicado aos estudos, procedendo como se
segue:
3
1º Praticar a leitura. Aprender a Distância exige alto domínio de

leitura.
2º Fazer leitura diagonal aos conteúdos (leitura corrida).
3º Voltar a fazer leitura, desta vez para a compreensão e

assimilação crítica dos conteúdos (ESTUDAR).
4º Fazer seminário (debate em grupos), para comprovar se a sua

aprendizagem confere ou não com a dos colegas e com o padrão.
5º Fazer TC (Trabalho de Campo), algumas actividades práticas ou

as de estudo de caso se existirem.
IMPORTANTE: Em observância ao triângulo modo-espaço-tempo,

respectivamente como, onde e quando...estudar, como foi referido
no início deste item, antes de organizar os seus momentos de estudo
reflicta sobre o ambiente de estudo que seria ideal para si: Estudo
melhor em casa/biblioteca/café/outro lugar? Estudo melhor à
noite/de manhã/de tarde/fins-de-semana/ao longo da semana?
Estudo melhor com música/num sítio sossegado/num sítio barulhento!?
Preciso de intervalo em cada 30 minutos, em cada hora, etc.
É impossível estudar numa noite tudo o que devia ter sido estudado
durante um determinado período de tempo; Deve estudar cada ponto
da matéria em profundidade e passar só ao seguinte quando achar
que já domina bem o anterior.
Privilegia-se saber bem (com profundidade) o pouco que puder ler e

estudar, que saber tudo superficialmente! Mas a melhor opção é
juntar o útil ao agradável: Saber com profundidade todos conteúdos
de cada tema, no módulo.
Dica importante: não recomendamos estudar seguidamente por

tempo superior a uma hora. Estudar por tempo de uma hora
intercalado por 10 (dez) a 15 (quinze) minutos de descanso (chama-
se descanso à mudança de actividades). Ou seja que durante o
4
intervalo não se continuar a tratar dos mesmos assuntos das

actividades obrigatórias.
Uma longa exposição aos estudos ou ao trabalho intelectual

obrigatório pode conduzir ao efeito contrário: baixar o rendimento
da aprendizagem. Por que o estudante acumula um elevado volume
de trabalho, em termos de estudos, em pouco tempo, criando
interferência entre os conhecimentos, perde sequência lógica, por fim
ao perceber que estuda tanto mas não aprende, cai em insegurança,
depressão e desespero, por se achar injustamente incapaz!
Não estude na última da hora; quando se trate de fazer alguma

avaliação. Aprenda a ser estudante de facto (aquele que estuda
sistematicamente), não estudar apenas para responder a questões de
alguma avaliação, mas sim estude para a vida, sobre tudo, estude
pensando na sua utilidade como futuro profissional, na área em que
está a se formar.
Organize na sua agenda um horário onde define a que horas e que

matérias deve estudar durante a semana; Face ao tempo livre que
resta, deve decidir como o utilizar produtivamente, decidindo quanto
tempo será dedicado ao estudo e a outras actividades.
É importante identificar as ideias principais de um texto, pois será

uma necessidade para o estudo das diversas matérias que compõem
o curso: A colocação de notas nas margens pode ajudar a estruturar
a matéria de modo que seja mais fácil identificar as partes que está
a estudar e Pode escrever conclusões, exemplos, vantagens,
definições, datas, nomes, pode também utilizar a margem para
colocar comentários seus relacionados com o que está a ler; a melhor
altura para sublinhar é imediatamente a seguir à compreensão do
texto e não depois de uma primeira leitura; Utilizar o dicionário
sempre que surja um conceito cujo significado não conhece ou não lhe é
familiar;
Precisa de apoio?
Caro estudante, temos a certeza que por uma ou por outra razão, o
material de estudos impresso, lhe pode suscitar algumas dúvidas como
falta de clareza, alguns erros de concordância, prováveis erros
ortográficos, falta de clareza, fraca visibilidade, página trocada ou
invertidas, etc). Nestes casos, contacte os serviços de atendimento e
5
apoio ao estudante do seu Centro de Recursos (CR), via telefone, sms, E-

mail, se tiver tempo, escreva mesmo uma carta participando a
preocupação.
Uma das atribuições dos Gestores dos CR e seus assistentes
(Pedagógico e Administrativo), é a de monitorar e garantir a sua
aprendizagem com qualidade e sucesso. Dai a relevância da
comunicação no Ensino a Distância (EAD), onde o recurso as TIC se torna
incontornável: entre estudantes, estudante – Tutor, estudante – CR,
etc.
As sessões presenciais são um momento em que você caro estudante,
tem a oportunidade de interagir fisicamente com staff do seu CR, com
tutores ou com parte da equipa central do ISCED indigitada para
acompanhar as sua sessões presenciais. Neste período pode
apresentar dúvidas, tratar assuntos de natureza pedagógica e/ou
administrativa.
O estudo em grupo, que está estimado para ocupar cerca de 30%
do tempo de estudos a distância, é muita importância, na medida em
que lhe permite situar, em termos do grau de aprendizagem com
relação aos outros colegas. Desta maneira ficará a saber se precisa
de apoio ou precisa de apoiar aos colegas. Desenvolver hábito de
debater assuntos relacionados com os conteúdos programáticos,
constantes nos diferentes temas e unidade temática, no módulo.
Tarefas (avaliação e auto-avaliação)

O estudante deve realizar todas as tarefas (exercícios, actividades e
auto−avaliação), contudo nem todas deverão ser entregues, mas é
importante que sejam realizadas. As tarefas devem ser entregues
duas semanas antes das sessões presenciais seguintes.
Para cada tarefa serão estabelecidos prazos de entrega, e o não
cumprimento dos prazos de entrega, implica a não classificação do
estudante. Tenha sempre presente que a nota dos trabalhos de campo
conta e é decisiva para ser admitido ao exame final da
disciplina/módulo.
Os trabalhos devem ser entregues ao Centro de Recursos (CR) e os
mesmos devem ser dirigidos ao tutor/docente.
Podem ser utilizadas diferentes fontes e materiais de pesquisa,
contudo os mesmos devem ser devidamente referenciados,
respeitando os direitos do autor.
O plágio1 é uma violação do direito intelectual do(s) autor(es). Uma
transcrição à letra de mais de 8 (oito) palavras do testo de um autor,
sem o citar é considerado plágio. A honestidade, humildade científica
e o respeito pelos direitos autorais devem caracterizar a realização
dos trabalhos e seu autor (estudante do ISCED).
1 Plágio - copiar ou assinar parcial ou totalmente uma obra literária, propriedade

intelectual de outras pessoas, sem prévia autorização.
6
Avaliação
Muitos perguntam: Com é possível avaliar estudantes à distância,

estando eles fisicamente separados e muito distantes do
docente/tutor! Nós dissemos: Sim é muito possível, talvez seja uma
avaliação mais fiável e consistente.
Você será avaliado durante os estudos à distância que contam com
um mínimo de 90% do total de tempo que precisa de estudar os
conteúdos do seu módulo. Quando o tempo de contacto presencial
conta com um máximo de 10%) do total de tempo do módulo. A
avaliação do estudante consta detalhada do regulamentado de
avaliação.
Os trabalhos de campo por si realizados, durante estudos e
aprendizagem no campo, pesam 25% e servem para a nota de
frequência para ir aos exames.
Os exames são realizados no final da cadeira disciplina ou modulo e
decorrem durante as sessões presenciais. Os exames pesam no mínimo
75%, o que adicionado aos 25% da média de frequência,
determinam a nota final com a qual o estudante conclui a cadeira.
A nota de 10 (dez) valores é a nota mínima de conclusão da cadeira.
Nesta cadeira o estudante deverá realizar pelo menos 2 (dois)
trabalhos e 1 (um) (exame).
Algumas actividades práticas, relatórios e reflexões serão utilizados
como ferramentas de avaliação formativa.
Durante a realização das avaliações, os estudantes devem ter em
consideração a apresentação, a coerência textual, o grau de
cientificidade, a forma de conclusão dos assuntos, as recomendações, a
identificação das referências bibliográficas utilizadas, o respeito
pelos direitos do autor, entre outros.
Os objectivos e critérios de avaliação constam do Regulamento de
Avaliação.
7
TEMA – I: INTRODUÇÃO A INFORMATICA.
UNIDADE Temática 1.1. Fundamento da internet

UNIDADE Temática 1.2. Internet e WWW.
UNIDADE Temática 1.1. Fundamento da internet.
Introdução
Esta unidade temática tem como objectivo dar a conhecer todos os

conceitos e tecnologias, e como estas tecnologias são aplicadas para o
bom funcionamento da World Wide Web, e quais as diferenças e
semelhanças da www e internet e um breve histórico do desenvolvimento
da informática e das tecnologias ligadas a computação em geral.
Ao completar esta unidade, você deverá ser capaz de:
▪ Definir os conceitos básicos da Internet;
Objectivos ▪ Saber de onde surgiu a Internet;

específicos ▪ Identificar os primários navegadores.
A Internet é um conjunto de redes que permite a interconexão dispersa

de computadores através de um conjunto de protocolos (TCP/IP). Teve As
suas origens nos anos de (1969-1970), quando uma agência do
Departamento de Defesa dos EUA cria a internet, que tinha como
objectivo desenvolver uma rede de comunicações que interaja com os
supercomputadores da defesa americana e outros, para que, no caso de
haver um ataque nuclear, as comunicações não fossem interrompidas. Três
anos mais tarde (1972), teve lugar a primeira demostração pública do
sistema idealizado, graças a três universidades da Califórnia e uma de
Utah que conseguiram estabelecer uma conexão conhecida como
ARPANET (Advanced Research Projects Agency Network), que as ligações
existiam entre todas as bases de defesa e, em caso de destruição de
9
uma delas, a comunicação estabelecer-se-ia automaticamente, através

de uma outra base;.
Figura 1:Mapa logico da rede ARPANet.
1.1.1. Resumo da evolução da Internet

• Finais dos anos 50: Os EUA formaram uma instituição de
investigação, a qual designaram por ARPA. O objectivo desta
instituição, parte integrante do Departamento de Defesa dos
EUA, era a implantação de uma rede de comunicações, entre os
locais mais críticos do sistema de defesa Norte-Americano.
• Anos 70 – 71: ARPANET. Foi criada na década de 70 e em 71
possuía 15 nós que interligavam cerca de 20 máquinas da ARPA.
• 1973 - O nome INTERNET começou a ser falado apenas em 1973.
Isto porque no ano de 72, tinha-se iniciado na ARPA a
investigação do conceito "internetworking" forma de interligação
de redes.
• 1980 e 1981 - Misturam-se três mundos distintos: militares,
cientistas e universidades. Esta mistura surge como consequência da
criação de duas redes ligadas a instituições universitárias e
científicas americanas: a BitNET (Universitária) e a CSNET
(científica); vindo a potenciar o aparecimento de uma rede
alargada com múltiplas aplicações.
• 1982: Os protocolos usados nestas redes foram firmados num
standard o TCP-IP.
10
• 1990: Surge nos EUA o primeiro Internet Service Provider

comercial, e a ARPANET deixa formalmente de existir.
1.1.2. A internet e evolução dos navegadores.

Em 1990, o Departamento de Defesa dos USA desmantelou a ARPANET
a qual foi substituída pela rede da NSF, rebatizada NSFNET que se
popularizou, em todo o mundo, com a denominação Internet.
Tim Berners-Lee (1991) do CERN, na Suíça, apresentou um novo sistema de
informação baseado na Internet. Este novo sistema de informação
designou-se por World Wide Web.
Neste período foi possível via Internet, entrar em sessões com máquinas
remotas, efectuar a troca de mensagens, transferir dados em tempo real,
aceder a conferências electrónicas.
Nesta perspetivas nos finais do ano de 1991, com a introdução da
WWW, torna-se possível criar servidores de informação, onde se incluem
textos, imagens, multimédia, dotando-se o mundo da Internet dos meios
necessários para a construção de uma verdadeira teia de informação.
Para expansão da utilização da Internet foi decisiva a criação da www–
World Wide Web – criada por dois engenheiros do CERN – Centre
Eoropéen por la Recherche Nucléaire – Robert Caillaiu e Tim Berners-Lee,
do HTML – HyperText Markup Language - e dos Browsers. O primeiro
browser utilizado foi o LYNX que apenas permitia a transferência de
textos. O MOSAIC, concebido na Universidade de Illinois – USA – já
permitia a transferência de textos e imagens. Do MOSAIC derivaram os
populares Nescape e Internet Explorer.
Tim Berners-Lee, que foi um dos pioneiros no uso do hipertexto como
forma de compartilhar informações, criou o primeiro navegador,
chamado World Wide Web, em 1990. Desde então, o desenvolvimento
dos navegadores tem sido intrinsecamente ligado ao desenvolvimento da
própria Web.
A Web, entretanto, só explodiu realmente em popularidade com a

introdução do NCSA Mosaic, um navegador gráfico (em oposição a
navegadores de modo texto) rodando originalmente no Unix, mas que
foi também portado para o Apple Macintosh e Microsoft Windows logo
11
depois. A versão 1.0 do Mosaic foi lançada em setembro de 1993 por

Marc Andreesen, o líder do projeto. O Marc Andreesen, o líder do
projeto Mosaic na NCSA, demitiu-se para formar a companhia que seria
conhecida mais tarde como Netscape Communications Corporation.
A Netscape lançou o seu Navegador em Outubro de 1994, e este tornou-

se o mais popular navegador, no ano seguinte a Microsoft, que até então
havia ignorado a Internet, entrou na briga com o seu Internet Explorer.
A Netscape redarguiu liberando o seu produto como código aberto,

criando o Mozilla. O efeito foi simplesmente acelerar o declínio da
companhia, por causa de problemas com o desenvolvimento do novo
produto. A companhia acabou sendo comprada pela AOL no fim de
1998. O Mozilla, desde então, evoluiu.
O Opera, um navegador rápido e pequeno, popular principalmente em

computadores portáteis e em alguns países da Europa, foi lançado em
1996 e permanece um produto de nicho no mercado de navegadores
para o PC.
O Lynx browser permanece popular em certos mercados devido à sua

natureza completamente textual.
Apesar do mercado para o Macintosh ter sido tradicionalmente

dominado pelo Internet Explorer e Netscape, o futuro parece pertencer
ao próprio navegador da Apple, o Safári, que é baseado no mecanismo
de renderização KHTML, parte do navegador de código aberto
Konqueror. O Safári é o navegador padrão do Mac OS X.
Em 2003, a Microsoft anunciou que o Internet Explorer não seria mais

disponibilizada como um produto separado, mas seria parte da evolução
da plataforma Windows, e que nenhuma versão nova para o Macintosh
seria criada.
A Apple lançou a versão beta do Safari 4, a qual tem se mostrado cada
vez mais veloz que o FireFox e o Internet Explorer 8 (em testes de
12
carregamento de JavaScript) e promete fazer com que a participação

da empresa no mercado, cresça de forma acelerada.
Sumário
Nesta Unidade temática 1.1 estudamos e discutimos os conceitos e

tecnologias, e como estas tecnologias são aplicadas para o bom
funcionamento da World Wide Web, e quais as diferenças e
Identificar os componentes da Web e entender o seu papel (HTML, HTTP,
URL, endereçamento de recursos).
Exercícios para AVALIAÇÃO
Perguntas
1. Qual é a relação existente entre a WWW e a internet?
Exemplifique?
2. O que é um navegador Web (browser)?
3. Cite três exemplos de atividades que podem ser desenvolvida
na internet?
4. Que foi o consorcio que lancou o O MOSAIC?
5. Quem criou o primeiro navegador?
13
UNIDADE Temática 1.2. Internet e WWW.
Introdução
Esta unidade temática tem como objectivo elucidar o campo da

informação e os recursos disponíveis na rede assim como software
software necessários que nos facilita no uso da web e busca pela internet.
▪ Saber o que é a WWW (World Wide Web).
▪ Identificar os componentes da Web e entender o seu papel.
Objectivos ▪ Identificar o Protocolo Web.

específicos ▪ Saber a diferença entre a internet e a www.
▪ Saber identificar a arquitetura das aplicações Web (Arquitectura

Cliente/Servidor).
1.2.1. A Web ou a WWW

A World Wide Web (WWW), foi criada por Tim Berners Lee em 1989,
com o objetivo de, trocar as informações entre os pesquisadores. A
WWW é o programa utilizado para obter informações solicitadas pelos
utilizadores. Progressivamente, foi-se alimentando com a introdução de
novas aplicações Web, não só para ambientes de pesquisas, como
também para fins comerciais disponíveis na internet.
Pode-se dizer que atualmente, a Web é o universo de informações sem
fronteiras com várias caraterísticas.
Exemplo: interface gráfica consistente, integração de um conjunto de
tecnologias e documentos, etc.
A proposta cuja resposta foi o nascimento da WWW, era muito
importante pois envolvia a criação de um interface de utilizador capaz
de ser consistente independentemente da plataforma onde viesse a ser
corrido (Windows, UNIX, Macintosh, etc), permitindo o acesso á
informação através de qualquer das plataformas. Envolvia igualmente
14
um interface que possibilitava o acesso a uma variedade diferente de

tipos de documentos e protocolos de informação.
World Wide Web (comumente conhecida como web) não é sinônimo de
internet, mas sim, a parte mais proeminente da internet que pode ser
definida como um sistema técnico-social para interação humanos
baseados em redes tecnológicas. A noção do sistema tecno-social refere-
se a um sistema que aumenta a cognição humana, a comunicação e a
cooperação; Cognição é o pré-requisito necessário para comunicar e a
pré-condição para cooperar. Em outras palavras, cooperação precisa de
comunicação e comunicação precisa de cognição.
Outra definição para World Wide Web ou seja a Web é a que diz, um
sistema para documentos Hypertext que são interconectados e
executados na Internet. A partir de 1991, data em que o mundo conhece
a Web, houve uma evolução disso que chega aos nossos dias na versão
2.0 da Web tendo sua origem na Web 1.0. A World Wide Web ou
Internet é o que permitirá que o mundo se conecte.
O conceito mais importante a reter é que a WWW (muitas vezes

designada apenas por Web) não é uma rede por si só, como a Internet,
mas uma série de programas de software. Estes programas podem ser
usados em diferentes redes de computadores, ou usados em
computadores que não façam parte de uma rede.
A WWW pode ser definida como: informação de hipertexto e um

sistema de comunicação que se tornou extremamente popular na Internet.
Usa comunicações de dados que operam sob o modelo Cliente-Servidor
Um servidor WWW é um computador que responde a pedidos de
informação usando como linguagem de comunicação o HTTP (Hyper text
Transport Protocol). O Servidor responde enviando informação, por Http,
num formato prédefinido - o HTML (Hyper Text Markup Language
Protocol).
1.2.2. Protocolo Web: HTTP
15
O protocolo HTTP permite o transporte de recursos na Web. Os clientes

(browser), envia uma solicitação HTTP, para aceder os recursos do
servidor, e o servidor Web responde às solicitações através da emissão
de respostas HTTP. O HTTP é a sigla Protocolo de Transferência de
Hypertexto (Hypertext Transfer Protocol), é um protocolo de
comunicação utilizado para sistemas de informação de hipermídia,
distribuídos e colaborativos. Esta atividade apresenta uma visão geral
das transações do protocolo HTTP utilizando um navegador Web
(Google Chrome/ Firefox). Para desenvolver e depurar aplicações Web,
é importante ter bom entendimento de como o protocolo HTTP funciona e
os servidores Web.
Pedido
Cliente Web Servidor

Web
Figura 2: Transações HTTP: Resposta
As arquiteturas de aplicações Web são comumente modeladas com base em

arquitetura cliente-servidor. O HTTP é implementado em dois
programas: um programa do lado do servidor e um programa do lado
de cliente.
Como mostrada na figura anterior a cliente web solicita informações a um

servidor, o servidor em geral responde com as informações
solicitadas.
Podemos ver que, há um conjunto de informações trocadas através do

protocolo HTTP, e que não são apresentadas através dum navegador
Web. Entender a comunicação entre o cliente Web e o servidor Web, é
a chave para entender o protocolo HTTP e trabalhar com os serviços
Web.
O cliente: com o seu software aplicacional específico, que lhe possibilita

a comunicação com o servidor;
O servidor: com o seu software aplicacional específico que lhe permite

receber a mensagem, interpreta-la e devolver a resposta para o cliente;
16
E a rede: componente de hardware que permite a comunicação entre o

cliente e o servidor.
Para aceder a uma página WWW, o utilizador usa um Browser WWW(

por exemplo, Internet Explorer, Netscape, ...) que funciona como cliente
em relação a um servidor WWW, a comunicação é feita sobre TCP/IP,
onde é usado um protocolo de alto nível denominado HTTP (Hipertext
Transfer Protocol).
Servidor e Cliente estão passíveis de comunicar porque usam as mesmas

regras ou protocolos, definidos pelo modelo Cliente/Servidor.
Resumindo: Para comunicar com um servidor Web (por exemplo http://

http://www.portaldogoverno.gov.mz), os utilizadores têm de possuir no
seu computador software web que são chamados de navegadores (por
ex. Chrome, firefox, Internet Explorer, Microsoft EDGE, etc) e acederem
á Internet usando os protocolos Internet correctos (por ex. TCP/IP, HTTP).
1.2.3. Endereçamento IP
Os dispositivos conectados a uma rede são identificados através de

endereços formados por sequências de números. Esses endereços são
chamados de endereços IP. Em uma Intranet, quem controla os endereços
IP dos dispositivos conectados é a própria organização que administra
essa Intranet.
Por outro lado, os endereços IP dos dispositivos conectados à Internet são

gerenciados pelos provedores de acesso (ISP).
O endereço IP é constituído por um conjunto de quatro números de 0 a

255, separados por um ponto e tem a seguinte estrutura:
***.***.***.*** (por exemplo: 175.121.12.1).
A cada endereço IP está associado um nome (DNS – Domain Name

System), para permitir uma fácil memorização por parte dos utilizadores
(por exemplo: http://www.portaldogoverno.gov.mz acomoda ao
endereço IP 41.220.166.149
Para acomodar diferentes tamanhos de redes físicas, o espaço de

endereços IPv4 é dividido em cinco classes de endereços, denominadas
17
classes A, B, C, D e E. Cada classe adota uma posição diferente para

delimitar o prefixo de rede e o identificador de estação.
Figura 3: Classes de Endereço host do IP
1.2.4. DNS (Domain Name System)
Como vimos, podemos acessar um Web Server diretamente através do

seu endereço IP ou indiretamente através de um domínio. Para utilizar a
segunda abordagem, é necessário consultar um servidor DNS para
“traduzir” o domínio desejado para o endereço IP correspondente.
Basicamente, a tarefa dos servidores DNS é informar o endereço IP
associado a um domínio EX: 127.0.0.1 para localhost (hospedagem local)
ou seja 107.154.159.86 para isced.ac.mz.
Nos sistemas Linux e Windows existem duas técnicas para fazer

resoluções, a primeira forma é através de uma tabela de hosts
(/etc/hosts), a outra é feita através da consulta a um servidor de nomes
(DNS).
DNS é um banco de dados com servidores distribuídos e organizados de

forma hierárquica, espalhados por toda Internet, de forma que todo
servidor de nomes é também cliente de outro, pois caso um não consiga
18
resolver um nome (traduzir para um número IP), este consultará outro e

assim por diante.
1.2.5. Arquitetura de Aplicações Web
Uma aplicação web usa o modelo três camadas: Camada de Persistência

(Servidor de Banco de Dados), onde ficará os bancos de dados da
aplicação, Camada de Lógica de Negócio (Servidor de Aplicação), onde
rodará a aplicação Web (seja ela Java, PHP, ASP ou qualquer outra
linguagem) e uma camada de apresentação, que é representada pela
máquina cliente que acessa a aplicação.
Figura 4: Arquitetura de Aplicação web- cliente servidor
O servidor de banco de dados necessitará ter o SGBD apropriado para

a aplicação. O SGBD pode ser: MySQL, Oracle, PostgreSQL, Microsoft
SQL Server, MariaDB (substituto do Mysql), etc. O servidor de aplicação
deve possuir o interpretador da linguagem, como por exemplo: Apache
(PHP/ASP), IIS (ASP) ou Tomcat (Java).
Sumário
Nesta Unidade temática 1.2 estudamos e discutimos fundamentalmente

Identificar os componentes da Web e entender o seu papel (HTML, HTTP,
URL,endereçamento de recursos). Saber a diferença entre os vários tipos de
recursos da Web (Página estática, dinâmica e Ativos). Distinguir a
arquitetura das aplicações Web (Arquitectura Cliente/Servidor). Aplicar
exemplos de clientes e servidores Web (Web services).
19
Perguntas
1. Qual é a relação existente entre a WWW e a internet?
Exemplifique?
2. O que é um navegador Web (browser)?
3. Cite três exemplos de atividades que podem ser desenvolvida
na internet?
20
TEMA – II: LINGUAGEM HTML – CONCEITOS BÁSICOS.
UNIDADE Temática 2.1. Fundamentos do HTML

UNIDADE Temática 2.2. Elementos HTML.
UNIDADE Temática 2.3. Modelo de Conteúdos.
UNIDADE Temática 2.1. Fundamento do HTML.
Introdução

conceitos e tecnologias, e como estas tecnologias são aplicadas para o
bom funcionamento da World Wide Web, e quais as diferenças e
▪ Definir os conceitos de HTML;
▪ Saber de o Historial e surgimento de HTML;
Objectivos ▪ Identificar as estruturas, tags e outros HTML.

específicos
2.1.1. Conceitos de HTML
HTML é a sigla de HyperText Markup Language, expressão inglesa que

significa "Linguagem de Marcação de Hipertexto".
Consiste em uma linguagem de marcação utilizada para produção de

páginas na web, que permite a criação de documentos que podem ser
lidos em praticamente qualquer tipo de computador e transmitidos pela
internet.
• Hyper: é o oposto de linear. Antes, os programas de

computadores rodavam linearmente: quando o programa
executava uma ação tinha que esperar a próxima linha de
comando para executar a próxima ação e assim por diante de
21
linha em linha. Com HTML as coisas são diferentes, podemos ir de

onde estiver para onde quiser, através de links.
• Text: é texto, conteúdo, informações.
• Mark-up: significa marcação, é o texto escrito. Com possibilidade

de marcações como, negrito, sublinhado, marcadores, numeração,
etc.
• Language: significa linguagem que é interpretada pelos

navegadores (browser).
2.1.2. Historial do HTML
O desenvolvimento e implementação da HTML5 teve início por volta de

2004, e o W3C incorporou a HTML5 no ano de 2007, que tem como
objetivo solucionar problemas ligados à implementação contemporânea
e compatibilidade com conteúdos existentes, ou seja, hoje em dia é
comum encontrar sites com músicas e vídeos, que para utiliza-los faz
necessário o uso de API e plug-ins extras.
Desde o começo o HTML foi criado para ser uma linguagem

independente de plataformas, browsers e outros meios de acesso.
Interoperabilidade significa menos custo. Você cria apenas um código
HTML e este código pode ser lido por diversos meios, ao invés de versões
diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web
fosse desenvolvida em uma base proprietária, com formatos
incompatíveis e limitada.
2.1.2.1. Evolução do HTML
A HTML evoluiu por sete versões, desde que a web foi inventada por Tim
Berners-Lee. Seguindo a ordem:
HTML em 1990, HTML + em 1991, HTML 2.0 em 1992, HTML 3.0 em

1996, HTML 3.2 em 1997, HTML 4.0 em 1997, HTML 4.01 em 2009,
HTML 5 em 2011ate actualmente, algumas versões não foram relatadas
pois não tiveram impacto significativo em sua evolução, pois na versão
HTML 4.0 foi introduzido um novo conceito de HTML que é a sua extensão,
22
o XHTML, que em 1999, é lançada a versão 4.01 do HTML com uma série de
erros e incongruências encontradas em sua versão anterior.
Nessa época, os desenvolvedores perceberam que era fundamental

retroceder aos fundamentos do HTML, preparando-o para o futuro. Em
2000, o World Wide Web Consortium (W3C) recomenda o uso do
XHTML (sucessor do HTML 4.0), usado exclusivamente para a
estruturação de documentos, deixando sua apresentação (aparência) a
cargo do CSS (Cascading Style Sheet– folhas de estilo em cascata).
O HTML 5 teve sua origem em 2004 por intermédio de um grupo de

trabalho formado por empresas que não estavam muito contentes com o
andamento do XHTML, tais como Apple, Fundação Mozilla e Opera. O
grupo foi denominado WHATWG (Web Hypertext Application
Technology Working Group) e tinha por objetivo trabalhar em uma
versão do HTML que trouxesse maior flexibilidade para a produção de
sites e sistemas baseados na web, versão essa, denominada HTML 5.
Entre outros assuntos nos quais o WHATWG se focou, estavam o Web

Forms 2.0, que foi incluído no HTML5, e o Web Controls 1.0
(temporariamente interrompido).
Em outubro de 2006, Tim Berners-Lee anunciou que passaria a trabalhar

em conjunto com o WHATWG para o desenvolvimento do HTML 5, em
detrimento do XHTML 2; entretanto, o XHTML continuaria sendo mantido
paralelamente de acordo com as mudanças causadas no HTML. Em 2009,
o grupo responsável pelo projeto do XHTML 2 foi definitivamente
encerrado.
2.1.3. A estrutura básica do HTML
Basicamente, um documento HTML é composto por elementos

hierarquicamente organizados.
Para inserir um elemento em um documento HTML, devemos utilizar as

tags correspondentes a esse elemento. As tags são definidas com
parênteses angulares (< e >). Os elementos podem possuir atributos e
conteúdo. Os atributos são formados por nome e valor. Normalmente, os
valores dos atributos são definidos dentro de aspas dupla e o conteúdo
dos elementos é um texto ou outros elementos.
23
Figura 5: Estrutura do HTML
<html> e </html> indica o começo e o fim do documento hipertexto em

HTML, <head> e </head> indica o começo e o fim do cabeçalho do
documento HTML, e <body> e </body> especifica o começo e o fim do
corpo do documento HTML.
Como podemos ver, o documento HTML consiste basicamente de duas

seções: cabeçalho e corpo.
O cabeçalho do documento contém uma série de informações que, em

geral são ignorados pelo navegador, mas são de suma importância para
a organização dos documentos. Uma exceção dessa regra é a diretiva
obrigatória
O título não é normalmente exibido no topo do documento, mas em um

local à parte. Por exemplo, no cabeçalho da janela do navegador e nos
registros do caderno de endereços.
<html> <head> <title>Meu primeiro Hipertexto</title> </head>

<body> Este é o meu primeiro documento hipertexto escrito na linguagem
HTML. </body> </html>
É possível inserir informações que são propositalmente ignorados pelo

navegador (comentários) em qualquer parte do código. Estas
informações devem estar entre 

</body>
2.3.1.5. Phrasing content
Fazem parte desta categoria elementos que marcam o texto do

documento, bem como os elementos que marcam este texto dentro do
elemento de parágrafo, como podemos identificar: <a>, <abbr>,
<area>, <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>,
<cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>,
<i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <link>,
35
<mark>, <MathML>, <math>, <meter>, <noscript>, <object>,

<output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>,
<script>, <select>, <small>, <span>, <strong>, <sub>, <sup>,
<SVG>, <svg>, <template>, <textarea>, <time>, <u>, <var>,
<video>, <wbr>, <text>
Exemplo de uso:
<section>
<h2>Conceitos Básicos</h2>
<strong>Este é o <em>primeiro</em> teste do conceito
básico.</strong>,
<p><small>Este é o <em>primeiro</em> teste do conceito
básico.</small></p>
</section>
<progress> Teste</progress>|<button> Clique
aqui</button>,
<p>Design by: <span>

<span>ISCED</span>
</span></p>
<p><time datetime="2018-11-11">15 minutos
atras</time></p>
2.3.1.6. Embedded content
Na categoria Embedded, há elementos que importam outra fonte de

informação para o documento, que são: audio>, <canvas>, <embed>,
<iframe>, <img>, <MathML>, <math>, <object>, <picture>, <SVG>,
<svg>, <video>
Exemplo de uso:

<img src="transferir.png" width="250" alt="logo ISCED"
height="209" usemap="Lolo">

<p><object data="Lionel Richie - How Long -
Tradução.mp3">
<param name="quality" value="high">
<p>

<p>Deixe comentário aqui: </p>
<textarea cols=80 name=comments maxlength=200>
</textarea>

|<button> Enviar</button>,
36
2.3.1.7. Interactive content
Interactive Content são elementos que fazem parte da interação de

usuário, que podemos identificar: <a>(se o atributo href estiver
presente), <audio>(se o atributo controls estiver presente), <button>,
<details>, <embed>, <iframe>, <img>(se o atributo usemap estiver
presente), <input>(se o atributo type não estiver no estado oculto),
<label>, <select>, <textarea>, <video>.
Exemplo de uso:
<p><embed src="Lionel Richie - How Long - Tradução.mp3"

quality="high"></p>
<p><iframe sandbox srcdoc="<p>Alocar conteudo da frame
aqui">
</iframe></p>
Alguns elementos no HTML podem ser ativados por um comportamento.

Isso significa que o usuário pode ativá-lo de alguma forma. O início da
sequencia de eventos depende do mecanismo de ativação e normalmente
culminam em um evento de click seguido pelo evento DOMActivate.
O user-agent permite que o usuário ative manualmente o elemento que

tem este comportamento utilizando um teclado, mouse, comando de voz
etc.
Sumário

aspectos ligado a modelo de conteúdo indexado em paginas web ou
HTML, assim como tem como objectivo dar a conhecer todas as categorias
dos modelo de conteúdos, e sua manipulação.
Perguntas
1. Escolha o elemento HTML correto para o maior cabeçalho:
37
a) <h1>
b) <h6>
c) <heading>
d) <cabeça>
2. Qual é o elemento HTML correto para inserir uma quebra de
linha?
a) <br>
b) <break>
c) <lb>
d) </br>
3. Escolha o elemento HTML correto para definir o texto importante
a) <!importante>
b) <b>
c) <strong>
d) <i>
4. Escolha o elemento HTML correto para definir o texto enfatizado
a) <i>
b) <itálico>
c) <em>
d) <bold>
38
TEMA – III: TABULAÇÃO E FORMULÁRIOS DE DADOS EM HTML.
UNIDADE Temática 3.1. Listas e Tabelas de dados.

UNIDADE Temática 3.2. Interação com formulários
UNIDADE Temática 3.1. Listas e Tabelas de dados.
Introdução

fundamentos básicos para trabalharem com listas e tabelas, onde iremos
aprender como listar alguns itens, assim como empregar listas e tabelas
ordenadas e como apresentar dados (texto, texto pré-formatado,
imagens, links, formulários, campos de formulário, outras) em linhas e
colunas de células.
▪ Empregar listas numeradas ou com marcadores.

▪ Estruturar dados em tabelas.
▪ Apresentar textos em células e colunas;
Objectivos ▪ Saber usar lista e tabelas ordenadas;
específicos
3.1.1. Listas
As listas são muito importantes quando queremoslistar alguns itens no site

e também para a criação de menu de navegação.As listas ordenadas,
como o próprio nome já diz, os itens serão listados de forma ordenada,
seja por número, letra, ou algarismos romanos.Uma lista ordenada
começa com a tag “<ol>” e seus respectivos itens da lista ficam dentro
da tag “<li>”. Por padrão as listas ordenadas são ordenadas por
números, mas também iremos ver como ordena-lapor outros métodos.
3.1.1.1. Listas enumeradas de itens
39
A lista enumerada é definido pela diretiva <ol> e </ol>. Cada ítem da

lista é definido pela diretiva <li> e </li>, sendo que a diretiva de
fechamento </li> poderá ser omitido. Além disso, um cabaçalho (título)
da lista pode ser definido opcionalmente pelas diretivas <lh> e </lh>.
Por exemplo, a declaração (completa).
<ol>
<lh> índice</lh>
<li> Conceitos Básicos
<li> Apresentação da Teoria
<li> Conclusão
</ol>
3.1.1.2. Listas não enumeradas
A lista não enumerada possui mesma estrutura de definição exceto do

fato de usar a dirativa <ul> e </ul> em vez de <ol> e </ol>. Por
exemplo, o código:
<ul>
<lh> ítens</lh>
<li> Definição
<li> Propriedades
<li> Resultados
</ul>
3.1.1.3. Listas de definições
Esta lista é utilizada para criar listas de definições de termos. A sua

declaração é feita pela diretiva <dl> e </dl>. os ítens da lista de
definição é especificada pelas diretivas diferêntes das diretivas de listas
enumeradas e não enumeradas. Em vez da diretiva <li>, utiliza-se as
diretivas <dt> para especificar os termos de definição e <dd> para
especificar a definição do termo, sendo que as diretivas de fechamento
</dt> e </dd> não são necessárias. O cabeçalho (título) é opcional,
sendo necessário utilizar a diretiva <lh> quando desejar por o título da
lista.
<dl>
<lh>definições</lh>
<dt> Espaço vetorial
<dd> É um conjunto V ...
40
<dt> Transformação linear

<dd> É uma função ...
</dl>
Note que todo texto especificado em <dd> (definição do termo) será
tabulado um pouco a direita. Esta propriedade pode ser utilizado para
escrever textos tabulados para direita. Por exemplo, o código.
3.1.1.4. Combinações de listas
Podemos combinar duas ou mais listas um dentro do outro. Por exemplo,

o código
<ol>
<li> Introdução
<ul>
<li> Conceitos Básicos
<li> Definições
</ul>
<li> Desenvolvimento
<li> Conclusão
</ol>
3.1.2. Tabelas
O modelo de tabela HTML permite que os autores organizem dados -

texto, texto pré-formatado, imagens, links, formulários, campos de
formulário, outras tabelas etc.
Cada tabela pode ter uma legenda associada que fornece uma breve
descrição da finalidade da tabela. Uma descrição mais longa também
pode ser fornecida (via atributo de resumo).
Figura 8:Estrutura básica de uma tabela HTML
41
3.1.2.1. Elementos da tabela HTML
As linhas da tabela podem ser agrupadas em seções de cabeçalho,

rodapé e corpo (por meio dos elementos THEAD, TFOOT e TBODY,
respectivamente). Os grupos de linhas transmitem informações estruturais
adicionais e podem ser processados pelos usuários de maneiras que
enfatizam essa estrutura. Quando tabelas longas são impressas, as
informações de cabeçalho e de pé podem ser repetidas em cada página
que contém dados da tabela.
Pode-se agrupar colunas para fornecer informações estruturais

adicionais.
Além disso, pode-se declarar as propriedades da coluna no início de uma

definição de tabela (por meio dos elementos COLGROUP e COL) de
forma que possamos renderizar a tabela em vez de esperar que todos os
dados da tabela cheguem antes da renderização2.
As células da tabela podem conter informações de "cabeçalho" <TH> ou

"dados" <TD>. As células podem abranger várias linhas e colunas.
Tabelas não devem ser usadas apenas como um meio para layout do
conteúdo do documento, pois isso pode apresentar problemas ao
renderizar em mídia não visual.
3.1.2.2. Atributos usados em tabelas
Além dos atributos específicos de cada célula ou linha, as tabelas podem

ser adicionalmente formatadas a partir dos atributos que nos oferece a
própria etiqueta <table>. A seguir, mostramos aqueles que nos podem
parecer à principio mais importantes:
align Alinha horizontalmente a tabela em relação ao seu entorno.
background Permite-nos colocar um fundo para a tabela desde um link a
uma imagem.
bgcolor Dá cor de fundo à tabela.
border Define o número de pixels da borda principal.
2Renderização é o processo pelo qual se obtém o produto final de um processamento digital

qualquer. Este termo também é usado quando o navegador web (browser) já recebeu uma nova
página (documento HTML - por exemplo), mas a tela ainda não esta totalmente formada (quanto
a apresentação).
42
bordercolor Define a cor da borda.

cellpadding Define, em pixels, o espaço entre as bordas da célula e o
conteúdo da mesma.
cellspacing Define o espaço entre as bordas (em pixels).
height Define a altura da tabela em pixels ou porcentagem.
width Define a largura da tabela em pixels ou porcentagem.
Os atributos que definem as dimensões, height e width, funcionam de uma

maneira análoga ao das células, tal como vimos no capítulo anterior.
Contrariamente, o atributo align não nos permite justificar o texto de
cada una das células que compõem a tabela, mas sim que permite,
justificar a própria tabela em relação ao seu entorno.
3.1.2.3. Modelo de processamento

3.1.2.3.1. Cells
É um conjunto de slots ancorados em um slot (cell x, celly) e com uma

largura e altura específicas, de modo que a célula cubra todos os
slots com coordenadas (x, y). As células podem ser células de dados ou
células de cabeçalho. As células de dados correspondem a
elementos <td> e as células de cabeçalho correspondem a
elemento <th>. Células de ambos os tipos podem ter zero ou mais
células de cabeçalho associadas. É possível, em certos casos de
erro, que duas células ocupem o mesmo slot.
Exemplo:
<tr>
<td> Sad </td>

<th> Mood </th>
<td> Happy </td>
</tr>
<tr>
<td> Failing </td>
<th> Grade </th>
<td> Passing </td>
</tr>
Row
43
Linha é um conjunto completo de slots de x = 0 a x = x width-1, para

um valor específico de y. As linhas geralmente correspondem aos
elementos <tr>, embora um grupo de linhas possa ter algumas
linhas implícitas no final, em alguns casos envolvendo células
abrangendo várias linhas.
Exemplo:
<tr>
<th> Negative </th>
<th> Characteristic </th>
<th> Positive </th>
</tr>
<tr>
<td> Sad </td>
<th> Mood </th>
<td> Happy </td>
</tr>
<tr>
<td> Failing </td>
<th> Grade </th>
<td> Passing </td>
</tr>
Column
Uma coluna é um conjunto completo de slots de y = 0 a y = yheight-

1, para um valor particular de x. Colunas podem corresponder a
elementos <col>. Na ausência de elementos col, as colunas estão
implícitas.
Exemplo:
<table border="2">
<colgroup>
<col>
</colgroup>
<colgroup >
<col >
<col>
<col>
</colgroup>
Row group
Um grupo de linhas é um conjunto de linhas ancoradas em um slot

(0, groupy) com uma altura específica, de tal forma que o grupo
44
de linhas abrange todos os slots com coordenadas (x, y). Os grupos

de linhas correspondem aos elementos <tbody>, <thead> e
<tfoot>. Nem toda linha é necessariamente em um grupo de linhas.
Exemplo:
<table bgcolor="#FF0000" align="center" cellspacing="1"

cellpadding="1" border="1">
<thead>
<tr>
<th>Lista </th>
<th>2006 </th>
<th>2008 </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup"> matricula anual </th>
<td> 782 </td>
<td> 712 </td>
</tr>
<tr>
<th scope="row"> percentagem de divida </th>
<td> 3.3% </td>
<td> 3.7% </td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup"> Propinas </th>
<td> 2,963 </td>
<td> 2,433 </td>
</tr>
<tr>
<th scope="row"> percentagem </th>
<td> 12.3% </td>
<td> 12.6% </td>
</tr>
</tbody>
</table>
column group
Um grupo de colunas é um conjunto de colunas ancoradas em um

slot (groupx, 0) com uma largura específica, de forma que o grupo
de colunas cubra todos os slots com coordenadas (x, y). Os grupos
de colunas correspondem aos elementos do <colgroup>. Nem
todas as colunas estão necessariamente em um grupo de colunas.
Exemplos:
45
<table border="2">
<colgroup>
…
</colgroup>
<colgroup >
…
</colgroup>
Grupos de linhas não podem se sobrepor. Da mesma forma, os

grupos de colunas não podem se sobrepor.
Sumário
Nesta Unidade temática 3.1. estudamos e discutimos fundamentalmente

acerca de fundamentos básicos para trabalharem com listas e tabelas,
onde aprendemos como listar alguns itens, assim como empregar listas e
tabelas ordenadas e como apresentar dados (texto, texto pré-
formatado, imagens, links, formulários, campos de formulário, outras) em
linhas e colunas de células.
Perguntas
1. Quais desses elementos são todos os elementos <table>?
a) <table> <head> <tfoot>
b) <table> <tr> <tt>
c) <thead> <body> <tr>
d) <table> <tr> <td>
2. Como você pode fazer uma lista numerada?
a) <ul>
b) <ol>
c) <dl>
3. Como você pode fazer uma lista com marcadores?
a) <ul>
b) <dl>
c) <ol>
d) <listar>
4. Qual é o HTML correto para fazer uma caixa de seleção?
a) <input type = "checkbox">
b) <checkbox>
c) <check>
d) <input type = "check">
5. Para que serve a tag </colgroup>?
46
UNIDADE Temática 3.2. Formulários.
Introdução
Esta unidade temática tem como objectivo explicar os elementos básicos

de um formulário HTML, como será tratado dos input types do HTML5 e
também dos elementos fora dos inputs types, mas que são muito usados
dentro de formulários para finalidades diferentes do envio de dados
para um servidor.
▪ Compreender o funcionamento dos formulários.

▪ Diferenciar os métodos de envio de informações.
▪ Identificar e utilizar os principais componentes dos formulários.
Objectivos
específicos
3.2.1. Formulários
Um formulário HTML é uma secção de um documento com um conteúdo

normal, linguagem de codificação, elementos especiais denominados de
controlos (caixas de selecção, botões de rádio, menus, etc.) e as
respectivas etiquetas. Os utentes "completam" um formulário ao modificar os
seus controlos (introduzindo o texto, selecionando os itens do menu, etc.),
antes de o submeter a um agente para o seu devido processamento (ex: a
um servidor da Rede, a um servidor de correio electrónico, etc.)
<FORM action=" 
" method=" ">
<P>
<LABEL for="firstname">Primeiro nome: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Último nome: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">Email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male">
Masculino<BR>
<INPUT type="radio" name="sex" value="Female">
Feminino<BR>
47
<INPUT type="submit" value="Send"> <INPUT

type="reset">
</P>
</FORM>
3.2.2. Controlos
Os usuários interagem com os formulários através dos controlos indicados.
O "control name" (nome do controlo) é dado pelo seu atributo name. O

domínio do atributo name para um controlo contido no elemento FORM é
o próprio elemento FORM.
Cada controlo tem um valor inicial e um valor actual e ambos os valores

são constituídos por uma cadeia de caracteres. Em geral, o "valor inicial"
do controlo pode ser especificado através do atributo value do elemento
em questão. Contudo, o valor inicial de um elemento TEXTAREA é-nos
dado pelos seus conteúdos, e o valor inicial de um elemento OBJECT
contido num formulário é determinado pela implementação do objecto
(ou seja, fora do âmbito desta especificação).
O "current value" do controlo é definido primeiro para o valor inicial. Por

isso, o actual valor do controlo pode ser modificado através da
interacção do utente e dos scripts.
O valor inicial de um controlo nunca é alterado. Assim, quando o

formulário é esvaziado, cada um dos valores actuais do controlo é
convertido ao seu valor inicial. Se um controlo não possuir um valor inicial,
o efeito do esvaziamento (“reset”) do formulário sobre esse controlo é
indefinido.
3.2.2.1. Tipos de controlo
O HTML define os seguintes tipos de controlo:
3.2.2.1.1. Botões (buttom)
Os autores poderão criar três tipos de botões:
• botões de envio ou submissão: Quando activado, o botão

de submissão submete o formulário. Um
48
formulário poderá conter mais do que um botão para a

submissão de dados.
Botões de esvaziamento ou “reset” : Quando activado, o botão de

esvaziamento (“reset”) converte todos os controlos aos seus valores
iniciais.
Botões de activação: Estes botões não têm nenhum comportamento por

defeito. Cada botão de activação pode ter scripts no lado do cliente
associados aos atributos event que estejam contidos no elemento. Sempre
que um evento ocorre (ex: o utente pressiona o botão, volta a soltá-lo,
etc.), o script que lhe está associado é activado.
Os autores deveriam especificar a linguagem de script associada ao

script de um botão de activação através declaração do script por defeito
(com a ajuda do elemento META).
Os autores podem criar botões através dos elementos BUTTON ou INPUT.

Consulte as definições dos referidos elementos para mais detalhes acerca da
especificação dos botões dos diferentes tipos.
3.2.2.1.2. Caixas de seleção
Caixas de selecção (e botões de rádio) são interruptores [on/off], os

quais poderão ser activados pelo utente. O interruptor está "ligado"
quando o atributo checked do elemento é aplicado ou assinalado.
Quando o formulário é submetido, poderão ser apenas bem-sucedidos
os controlos que tiverem as caixas de opção activadas ("on").
Várias caixas de activação ou selecção contidas num formulário poderão

partilhar o mesmo nome de controlo Assim, por exemplo, elas permitem
aos utentes seleccionar vários valores para a mesma propriedade. O
elemento INPUT é usado para criar um controlo com uma caixa de
selecção ou activação.
3.2.2.1.3. Botões de rádio
Os botões de rádio são idênticos às caixas de selecção, mas no seu caso,

se várias possuírem o mesmo nome de controlo, eles serão mutuamente
exclusivos: sempre que um seja ligado
49
para “on”, todos os outros controlos que tenham o mesmo nome serão
desligados para “off”. O elemento INPUT usado para criar um controlo
com um botão de rádio.
Se nenhum dos botões contidos num conjunto que partilhe o mesmo nome
tiver sido inicialmente ligado o comportamento do agente será
indefinido, na escolha de qual dos controlos a ligar inicialmente. Nota:
dado as implementações existentes tratarem este caso de uma forma
diferente.
Em todos os casos, apenas um dos botões de rádio pertencentes ao grupo

está activo. Se nenhum dos elementos <INPUT> pertencente a um grupo
de botões de rádio especificar `CHECKED' (seleccionado), então o
agente terá primeiramente que activar o primeiro botão de rádio do
referido grupo.
Uma vez que o comportamento difere de agente para agente, os autores

dever-se-iam assegurar de que um dos botões de rádio pertencentes a
cada grupo esteja inicialmente activado.
3.2.2.1.4. Menus
Os menus oferecem opções de escolha aos utentes. O elemento SELECT

cria um menu, em combinação com os elementos OPTGROUP e OPTION.
3.2.2.1.5. Introdução de texto
Os autores poderão criar dois tipos de controlos que permitam aos

utentes a introdução de um texto. O elemento INPUT cria um controlo
para a entrada de uma única linha e o elemento TEXTAREA cria um
controlo para a entrada de linhas múltiplas. Em ambos os casos, o texto
introduzido recebe o valor actual do controlo.
3.2.2.1.6. Selecção de ficheiros
Este tipo de controlo permite aos utentes seleccionar ficheiros, de forma

a que os seus conteúdos possam ser submetidos juntamente com o
formulário. O elemento INPUT é usado para criar um controlo destinado
à selecção do ficheiro.
50
3.2.2.1.7. controlos escondidos ou omitidos
Os autores poderão criar controlos que não sejam exibidos, mas cujos
valores sejam submetídos com o formulário. De uma forma geral, os
autores usam este tipo de controlo para armazenar informação durante a
troca de dados entre o cliente e o servidor, a qual doutra forma se
perderia devido devido à natureza do HTTP. O elemento INPUT é usado
para criar um controlo escondido.
3.2.2.1.8. controlos do objecto
Os autores podem introduzir objectos genéricos nos formulários, de

maneira a que os valores associados sejam submetidos juntamento com
outros controlos. Os autores poderão criar controlos de objectos através
do elemento OBJECT.
Os elementos usados na criação dos controlos aparecem geralmente

contidos num elemento FORM, mas poderão ainda aparecer fora da
declaração de um elemento FORM, aquando usados na construção dos
interfaces para os utentes . Este tema é discutido na secção referente aos
eventos intrínsecos. Note-se que os controlos localizados fora do
formulário não podem ser controlos bem-sucedidos.
O elemento FIELDSET permite aos autores agrupar tematicamente os

controlos e as etiquetas que lhe estão relacionadas. Os controlos de
agrupamento tornam a compreensão do seu propósito mais fácil para os
utentes, ao mesmo tempo que facilitam a navegação com o tabulador, no
caso dos agentes visuais e navegação sonora, no caso dos agentes àbase
de voz. O uso apropriado deste elemento torna os documentos mais
acessíveis.
O elemento LEGEND permite que os autores atribuiam um título ao

FIELDSET. A legenda melhora o acesso, sempre que o FIELDSET não seja
representado visualmente.
Sumário
Nesta Unidade temática 3.2 estudamos sobre elementos básicos de um

formulário HTML, como os input types do HTML5 são tratados e também
51
dos elementos fora dos inputs types, mas que são muito usados dentro de
formulários para finalidades diferentes do envio de dados para um
servidor.
Perguntas
1. Como você pode fazer uma lista com marcadores?
a) <ul>
b) <dl>
c) <ol>
d) <listar>
2. Qual é o HTML correto para fazer uma caixa de seleção?
a) <input type = "checkbox">
b) <checkbox>
c) <check>
d) <input type = "check">
3. Qual é o HTML correto para criar um campo de entrada de texto?
a) <input type = "text">
b) <input type = "textfield">
c) <textinput type = "text">
d) <textfield>
e) <listar>
f) <input type = "list">
g) <selecione>
h) <input type = "dropdown">
4. Qual é o HTML correto para criar uma área de texto?
a) <input type = "textarea">
b) <input type = "textbox">
c) <textarea>
52
TEMA – IV: FOLHAS DE ESTÍLO – CSS STYLE SHEET.
UNIDADE Temática 4.1. Fundamentos do CSS.

UNIDADE Temática 4.2. Propriedades do CSS
UNIDADE Temática 4.1. Fundamentos do css (declarações e selecores).
Introdução
Esta unidade temática tem como objectivo descrever a estrutura básica

das folhas de estilo CSS, alguns dos detalhes da sintaxe e as regras para
analisar as folhas de estilo CSS. Ele também descreve (em alguns casos,
de forma informativa) como as folhas de estilo podem ser vinculadas a
documentos e como esses links podem depender da mídia. Detalhes
adicionais da sintaxe de algumas partes do CSS descritas em outros
módulos serão descritos nesses módulos.
▪ Conhecer o propósito e as terminologias relacionadas às folhas de estilo.

▪ Compreender como são formadas as regras de folhas de estilo em cascata
(CSS).
Objectivos ▪ Vincular folhas de estilo a elementos de documentos HTML.
específicos ▪ Explorar alguns recursos de CSS para formatar documentos HTML.
4.1.1. CSS
Folhas de estilo em cascata ou CSS (Cascading Style Sheet) é um

mecanismo com a função de adicionar estilos (fontes, cores,
espaçamentos, bordas, sombras, etc.) aos elementos de documentos
codificados em HTML. É provável que você venha a entrar em contato
com o termo (X)HTML ou HTML estendido que, na verdade, é uma espécie
de HTML com algo mais: o CSS.
As CSS têm por finalidade devolver ao HTML o propósito inicial da

linguagem, ou seja, a marcação e a estruturação de conteúdos. Segundo
os idealizadores do HTML, não cabe a este fornecer informações ao
navegador sobre a apresentação dos
53
elementos – cores de fontes, tamanhos de textos, posicionamento e todo

o aspecto visual de um documento não devem ser funções do HTML. Todas
as funções de apresentação cabem a CSS, sendo esta a sua finalidade
maior. Há uma frase consagrada que circula entre blogs e sites
especializados em desenvolvimento web:
▪ O seletor aponta para o elemento HTML que você deseja

estilizar.
▪ O bloco de declaração contém uma ou mais declarações
separadas por ponto e vírgula (;).
▪ Cada declaração inclui um nome de propriedade CSS e um valor,
separados por dois pontos (:).
▪ Uma declaração CSS sempre termina com um ponto-e-vírgula e
os blocos de declaração são cercados por chaves ( {} ).
Neste exemplo a seguir, todos os elementos <h1> terão a cor azul e a

fonte do texto terá o tamanho de 12px:
4.1.2. Seletores Complexos
O seletor representa uma estrutura. Essa estrutura é usada como uma

condição para determinar quais elementos de um grupo de elementos
serão formatados.
Seletores encadeados e seletores agrupados são a base do CSS.
A sintaxe do CSS é simples:
seletor {
propriedade: valor;
}
A propriedade é a característica que você deseja modificar no elemento.
O valor é o valor referente a esta característica. Se você quer modificar
54
a cor do texto, o valor é um Hexadecimal (#812DD3), RGBA (129, 45,

211, 1) ou até mesmo o nome da cor por extenso (Blue or red)
Propriedades são criadas todos os dias e não é um ato de ousadia você
saber todas as propriedades do CSS e seus respectivos valores.
Os seletores são a alma do CSS e você precisa dominá-los. É com os

seletores que você irá escolher um determinado elemento dentro todos
os outros elementos do site para formatá-lo. Boa parte da inteligência
do CSS está em saber utilizar os seletores de uma maneira eficaz,
escalável e inteligente.
4.1.2.1. Seletor encadeado:
Exemplo de seletor encadeado:
div p strong a {
color: red;
}
Este seletor formata o link (a), que está dentro de um strong, que está
dentro de P e que por sua vez está dentro de um DIV.
4.1.2.2. Seletor agrupado
Exemplo de seletor agrupado:
strong, em, span {

color: red;
}
Você agrupa elementos separados por vírgula para que herdem a
mesma formatação ou se você tiver elementos com as mesmas definições
de estilo, assim:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
55
text-align: center;
color: red;
}
/* teriamos o seguinte*/
h1, h2, p {
text-align: center;
color: red;
}
Estes seletores são para cobrir suas necessidades básicas de formatação
de elementos. Eles fazem o simples. O que vai fazer você trabalhar
menos, escrever menos código CSS e também menos código Javascript
são os seletores complexos.
4.1.2.3. O Id do seletor
o id do Selector usa o atributo id de um elemento HTML para selecionar

um elemento específico, o id de um elemento deve ser único dentro de
uma página, então o seletor de id é usado para selecionar um elemento
único!
Para selecionar um elemento com um id específico, escreva um caractere

hash (#), seguido pelo id do elemento. A regra de estilo abaixo será
aplicada ao elemento HTML com id = "para1":
Exemplo:
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Minha pagina!</p>

<p id="para2"> PAragrafo</p>
</body>
</html>
4.1.2.4. O seletor de classe
56
O seletor de classe seleciona elementos com um atributo de classe

específico, para selecionar elementos com uma classe específica, escreva
um caractere de ponto (.), Seguido do nome da classe.
No exemplo abaixo, todos os elementos HTML com class = "center" serão

vermelhos e alinhados ao centro, você também pode especificar que
somente elementos HTML específicos devem ser afetados por uma classe,
porem, podem se referir a mais de uma classe.
No exemplo abaixo, o elemento <p> será estilizado de acordo com class

= "center" e class = "large":
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Este testo nao sera afectado pois

estamos a trabalhar com selectores p</h1>
<p class="center">Paragrafo 1</p>
<p class="center large">paragrafo 2</p>
</body>
</html>
4.1.3. Métodos de uso de CSS

4.1.3.1. In-line (o atributo style)
Uma maneira de aplicar CSS é pelo uso do atributo style do HTML.

Tomando como base o exemplo mostrado anteriormente à cor vermelha
para o fundo da página pode ser:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
57
4.1.3.2. Interno (a tag style)
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML.
Como mostrado:
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
4.1.3.3. Externo (link para uma folha de estilos)
O método recomendado é o de “lincar” para uma folha de estilos

externa. Usaremos este método nos exemplos a seguir.
Uma folha de estilos externa é um simples arquivo de texto com a

extensão. css. Tal como qualquer outro tipo de arquivo você pode colocar
uma folha de estilos tanto no servidor como no disco rígido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada
de estilo.css e está localizada no diretório estilo (o que não é necessário,
colocar em pasta separada do arquivo HTML). Tal situação está
mostrada a seguir:
<link rel="stylesheet" type="text/css" href="estilo.css"

/>
O que você tem a fazer é criar um link no documento HTML (índex.html)
para a folha de estilos (estilo.css). O link é criado em uma simples linha
de código HTML como mostrado a seguir:
Notar que o caminho para a folha de estilos é indicado no atributo href.
Esta linha de código deve ser inserida na seção header do documento

HTML, isto é, entre as tags <head> e </head>. Conforme mostrado
abaixo:
<!DOCTYPE html>
<html>
<head>
58
<title>Titulo da pagina</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
<h1>Aqui é o cabecalho 1</h1>
</html>
Sumário

relacionado a estrutura básica das folhas de estilo CSS, alguns dos
detalhes da sintaxe e as regras para analisar as folhas de estilo CSS.
Assim como esses elementos descreve (em alguns casos, de forma
informativa).
Perguntas
1. O que significa o CSS?
a) Folhas de estilo de computador
b) Folhas de estilo colorido
c) Folhas de estilo em cascata
d) Folhas de estilo criativo
2. Qual é o HTML correto para se referir a uma folha de estilos externa?
a) <stylesheet> mystyle.css </ stylesheet>
b) <link rel = "stylesheet" type = "texto / css" href = "mystyle.css">
c) <style src = "mystyle.css">
3. Onde em um documento HTML é o local correto para se referir a uma
folha de estilos externa?
a) No final do documento
b) Na seção <body>
c) Na seção <head>
4. Qual tag HTML é usada para definir uma folha de estilo interna?
a) <script>
b) <style>
59
c) <css>
6. Qual é a sintaxe CSS correta?
a) {body; color: black;}
b) corpo {cor: preto;}
c) {body: color = black;}
d) corpo: cor = preto;
7. Como você insere um comentário em um arquivo CSS?
a) // este é um comentário
b) 'este é um comentário
c) / * este é um comentário * /
d) // este é um comentário //
UNIDADE Temática 4.2. Propriedade do css .
Introdução
Esta unidade temática tem como objectivo descrever a estrutura básica

das folhas de estilo CSS, alguns dos detalhes da sintaxe e as regras para
analisar as folhas de estilo CSS. Ele também descreve (em alguns casos,
de forma informativa) como as folhas de estilo podem ser vinculadas a
documentos e como esses links podem depender da mídia. Detalhes
adicionais da sintaxe de algumas partes do CSS descritas em outros
módulos serão descritos nesses módulos.
▪ Conhecer o propósito e as terminologias relacionadas às folhas de estilo.

▪ Compreender como são formadas as regras de folhas de estilo em cascata
(CSS).
Objectivos ▪ Vincular folhas de estilo a elementos de documentos HTML.
específicos ▪ Explorar alguns recursos de CSS para formatar documentos HTML.
60
Cor e background
As propriedades do CSS permitem que os autores especifiquem a cor de

primeiro plano e o fundo de um elemento. Fundos podem ser cores ou
imagens. As propriedades de background permitem que os autores
posicionem uma imagem de background, a repitam e declarem se ela
deve ser corrigida com relação à janela de visualização ou rolada junto
com o documento.
Cores
Em HTML, uma cor pode ser especificada usando um nome de cor:

INDIANRED #CD5C5C RGB(205, 92, 92)
LIGHTCORAL #F08080 RGB(240, 128, 128)
SALMON #FA8072 RGB(250, 128, 114)
DARKSALMON #E9967A RGB(233, 150, 122)
LIGHTSALMON #FFA07A RGB(255, 160, 122)
Lista de cores comum:
COLOR NAME HEX COLOR CODE RGB COLOR CODE

WHITE #FFFFFF RGB(255, 255, 255)
SILVER #C0C0C0 RGB(192, 192, 192)
GRAY #808080 RGB(128, 128, 128)
BLACK #000000 RGB(0, 0, 0)
RED #FF0000 RGB(255, 0, 0)
MAROON #800000 RGB(128, 0, 0)
YELLOW #FFFF00 RGB(255, 255, 0)
OLIVE #808000 RGB(128, 128, 0)
LIME #00FF00 RGB(0, 255, 0)
GREEN #008000 RGB(0, 128, 0)
AQUA #00FFFF RGB(0, 255, 255)
TEAL #008080 RGB(0, 128, 128)
BLUE #0000FF RGB(0, 0, 255)
NAVY #000080 RGB(0, 0, 128)
FUCHSIA #FF00FF RGB(255, 0, 255))
PURPLE #800080 RGB(128, 0, 128))
Background (fundo)
Podemos especificar o fundo de um elemento (ou seja, sua superfície de

renderização) como uma cor ou uma
61
imagem. Em termos do modelo de caixa, "background" refere-se ao

background das áreas de conteúdo, preenchimento e borda. Cores e
estilos de borda são definidos com as propriedades da borda. As
margens são sempre transparentes.
As propriedades de background não são herdadas, mas o background

da caixa pai será ativado por padrão, devido ao valor inicial
transparente' em 'cor de fundo'.
Propriedade do background:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
O background do elemento raiz se torna o background da tela e cobre

a tela inteira, ancorada (para 'posição de background') no mesmo ponto
em que seria se fosse pintada apenas para o elemento raiz em si. O
elemento raiz não pinta esse fundo novamente.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Paragrafo 1!</p>
</body>
</html>
Com CSS, uma cor é mais frequentemente especificada por:
• Um nome de cor válido - como "vermelho"

• Um valor HEX - como "# ff0000"
62
• Um valor RGB - como "rgb (255,0,0)"
No exemplo abaixo, os elementos <h1>, <p> e <div> têm cores de

fundo diferentes:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Imagem de fundo
A propriedade background-image especifica uma imagem para usar

como plano de fundo de um elemento.
Por padrão, a imagem é repetida para cobrir todo o elemento. A

imagem de fundo de uma página pode ser configurada assim:
body {
background-image: url("isced.png");
}
Imagem de fundo - Repetir Horizontalmente ou Verticalmente
Por padrão, a propriedade background-image repete uma imagem na

horizontal e na vertical.
Algumas imagens devem ser repetidas apenas horizontalmente ou

verticalmente, ou parecerão estranhas, assim:
Se a imagem acima for repetida apenas horizontalmente (background-

repeat: repeat-x;), o fundo ficará melhor:
body {
background-image: url ("isced.png");
63
background-repeat: repeat-x;
}
Imagem de fundo - Definir posição e não repetir
Mostrar a imagem de fundo apenas uma vez também é especificado

pela propriedade background-repeat, a imagem de fundo é mostrada
no mesmo lugar que o texto. Queremos mudar a posição da imagem,
para que ela não perturbe muito o texto. A posição da imagem é
especificada pela propriedade background-position:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Imagem de fundo - posição fixa
Para especificar que a imagem de fundo deve ser corrigida (não rolará
com o resto da página), use a propriedade background-attachment:
body {
margin-right: 200px;
}
Plano de fundo - Propriedade abreviadas
Para encurtar o código, também é possível especificar todas as

propriedades de segundo plano em uma única propriedade. Isso é
chamado de propriedade abreviada. A propriedade abreviada para
background é background:
body {
background: #ffffff url("img_tree.png") no-repeat
right top;
}
Texto
O texto pode ter características alteradas em CSS que não poderiam ser
alteradas em HTML. Podemos citar
64
como exemplo, os espaçamentos entre as linhas. Com o uso do CSS e de

suas propriedades, podemos caracterizar textos em qualquer elemento
do HTML.
• color - Define a cor do texto.

• text-ident - Define a distancia de recuo do texto no início do
parágrafo.
• line-height - Define o espaçamentos entre as linhas.
• text-align - Define o alinhamento do texto, que pode ser ao
centro, _a direita, _a esquerda ou no estilo justificado.
• text-decoration - Define a decoração de um texto e é feita com
os seguintes valores: underline (sublinhado), overline
(sobrelinhado), line-through (uma linha em cima do texto) e blink
(faz piscar o texto).
• text-transform - Define uma transformação ao texto, que podem
ser as seguintes:
o Torna-las todas maiúsculas - uppercase;
o Todas minúsculas - lowercase;
o Todas as primeiras letras mai_usculas - capitalize.
/*estilo.css: */
h1 {
color: #DDA0DD;
text-decoration: underline;
text-transform: uppercase
}
h2 {
color: #3366FF;
text-decoration: line-through;
text-transform: none
}
p {
text-ident: 1cm;
line-height: 2px;
text-align: center
}
Fonte
Muitas das funções apresentadas no capítulo são bem específicas e

impossíveis de serem aplicadas pelo HTML. Como no capítulo anterior,
todas as propriedades são aplicadas a seletores relacionados a textos,
como <p> e <h1>.
65
• font-family - Refere-se à família da fonte. O valor pode ter o

nome específico da fonte (Verdana, comic saens) ou de fontes
genéricas (menospace, serif). Vale lembrar que a fonte escolhida
deverá estar instalada na máquina do usuário.
• font-size - Pode-se escolher o tamanho da fonte usando valores
numéricos ou nomenclaturas: x-small, xx-small, x-large, xx-large,
small, medium, large, smaller e larger.
• font-style - Há 3 opções: normal, itálica e oblique, que se referem
a letras em sua fonte normal na vertical, letras inclinadas e letras
obliquas, respectivamente.
font-weight - Define a intensidade de negrito que a fonte vai receber.

Pode assumir 3 opções: bold, bolder e lighter ou valores numéricos.
font-variant - Varia o tamanho das letras maiúsculas quando recebe o

valor small-caps.
h1 {
color: #DDA0DD;
font-family: arial;
font-weight: bold;
}
h2 {
color: #3366FF;
font-family: arial;
font-variant: small-caps;
}
p.1 {
font-family: serif;
font-size: x-small;
font-style: italic
}
p.2 {
font-family: sans-serif;
font-size: 90%;
font-style: oblique
}
Borda
As bordas são muito _uteis pois, dependendo da criatividade do

programador, assumem várias funções no desenvolvimento da página.
Podem ser empregadas como elemento decorativo, separação entre
textos e muitos outros recursos.
66
border-width - Define a espessura da borda. Assume thin, medium e thick

(_na, média e grossa respectivamente) como valores.
border-color - Define a cor da borda. Assume "cor" ou "#AAAAAA" como

valores.
border-style - Define o estilo da borda. Valores assumidos: dotted,

dashed, solid, double, groove, ridge, inset, outset.
Um recurso muito importante presente nas bordas _e a possibilidade de

setar tais funções especificando o lado da borda a empregar a função,
usando como valores top, bottom, left e right.
Ex.:
/*estilo.css: */
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-top-width: 1px;
border-style: dashed;
border-color: blue;
border-left: 6px solid red;
background-color: lightgrey;
}
Margin e Padding
As margens definem os espaçamentos entre os elementos HTML, que

possuem quatro lados: right, left, top e bottom e também de elementos
de parágrafo ou cabeçalhos. Os valores assumidos pelas margens são
em pixels.
• margin-top - Define a margem superior.

• margin-right - Define a margem direita.
• margin-bottom - Define a margem inferior.
• margin-left - Define a margem esquerda.
67
• margin - Define os valores das quatro margens na seguinte

ordem: top, right, bottom, left.
As margens para um documento são definidas da seguinte maneira:
body {
margin-top: VALORpx;
margin-right: VALORpx;
margin-bottom: VALORpx;
margin-left: VALORpx;
}
Para encurtar o código, é possível especificar todas as propriedades da

margem em uma propriedade.
A propriedade de margem é uma propriedade abreviada para as

seguintes propriedades de margem individuais:
p {margin-top: 25px;
margin-right: 50px
margin-bottom:75px
margin-left:100px}
Então, aqui está como funciona, se a propriedade da margem tiver

quatro valores:
p {margin: 25px 50px 75px 100px;}
Se a propriedade da margem tiver três valores:
margem: 25 px 50 px 75 px;
• a margem superior é 25px
• margens direita e esquerda são 50px
• margem inferior é 75px
Se a propriedade da margem tiver dois valores:
margem: 25 px 50 px;
• as margens superior e inferior são de 25px
• margens direita e esquerda são 50px
Se a propriedade da margem tiver um valor:
68
margem: 25px;
• todas as quatro margens são 25px
O valor auto
Você pode definir a propriedade de margem como automática para

centralizar horizontalmente o elemento em seu contêiner.
O elemento ocupará a largura especificada e o espaço restante será

dividido igualmente entre as margens esquerda e direita:
div {
largura: 300px;
margem: auto;
borda: 1px vermelho sólido;
}
O valor inherit
Este exemplo permite que a margem esquerda do elemento <p class =

"ex1"> seja herdada do elemento pai (<div>):
div {
borda: 1px vermelho sólido;
margem esquerda: 100px;
}
p.ex1 {
margin-left: inherit;
}
Colapso da margem
As margens superioras e inferior dos elementos são às vezes recolhidas

em uma única margem que é igual à maior das duas margens. Isso não
acontece nas margens esquerda e direita! Apenas margens superior e
inferior!
Veja o seguinte exemplo:
h1 {
margem: 0 0 50px 0;
}
h2 {
69
margem: 20px 0 0 0;
}
No exemplo acima, o elemento <h1> tem uma margem inferior de 50px
e o elemento <h2> tem uma margem superior definida como 20px.
O senso comum parece sugerir que a margem vertical entre o <h1> e o

<h2> seria um total de 70px (50px + 20px). Mas devido ao colapso
da margem, a margem real acaba sendo 50px.
Padding
As propriedades de preenchimento de CSS são usadas para gerar

espaço em torno do conteúdo de um elemento, dentro de qualquer borda
definida. Com CSS, você tem controle total sobre o preenchimento.
Existem propriedades para definir o preenchimento de cada lado de um
elemento (superior, direita, inferior e esquerda).
Padding - Lados Individuais
CSS tem propriedades para especificar o preenchimento para cada lado

de um elemento:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
Todas as propriedades de preenchimento podem ter os seguintes valores:
• length - especifica um preenchimento em px, pt, cm, etc.

• % - Especifica um preenchimento em% da largura do elemento
contido
• inherit - especifica que o preenchimento deve ser herdado do
elemento pai.
Nota: Valores negativos não são permitidos.
Então, aqui está como funciona:
div {
padding: 25px 50px 75px 100px;
}
Os valores alternam como os da margens.
70
Height e Width
Ajuste de altura e largura.
As propriedades height e width são usadas para definir a altura e a

largura de um elemento.
A altura e a largura podem ser definidas como automática (isso é o

padrão. Significa que o navegador calcula a altura e a largura) ou
especificadas em valores de comprimento, como px, cm etc., ou em
porcentagem (%) do bloco .
div {
height: 200px;
width: 50%;
background-color: red;
}
Lista, link e ícone
Esta propriedade cria uma lista de elementos definidos pelo

programador, usando como marcadores imagens ou números.
• list-style-image - Define uma imagem como marcador da lista.

• Valor: url("caminho/para/o/arquivo")
• list-style-position - Posiciona o marcador da lista. Valores:
outside e inside.
• list-style-type - Define o tipo de marcador da lista. Valores: disc,
circle, square, decimal, lower-roman, upper-roman, lower-alpha,
upper-alpha.
• list-style - Define todas as propriedades acima em uma única
linha na seguinte ordem: image, position e type.
/* estilo.css*/
ul.inside
{
list-style-position: inside;
}
ul.outside
{
list-style-position: outside;
}
ul.square
{
list-style-type: square;
}
ul.uproman
71
{
list-style-type: upper-roman;
}
Links
Os links podem ser estilizados com qualquer propriedade CSS (por

exemplo, cor, família de fontes, plano de fundo, etc.).
/* estilo.css*/
/* cor do link */
a:link {
color: red;
}
/* link visitado */
a:visited {
color: green;
}
/* Ao posicionar o mause no link */
a:hover {
color: hotpink;
}
/* A activar o link */
a:active {
color: blue;
}
A propriedade text-decoration é usado principalmente para remover
sublinhados de links:
a:link {
text-decoration: none;
}
O exemplo a seguir demonstra um exemplo mais avançado em que
combinamos várias propriedades CSS para exibir links como caixas /
botões:
/* estilo.css*/
a:link, a:visited {
background-color: #ff4336;
color: branco;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
72
Icon
A maneira mais simples de adicionar um ícone à sua página HTML é com

uma biblioteca de ícones, como o Font Awesome.
Adicione o nome da classe de ícone especificada a qualquer elemento

HTML embutido (como <i> ou <span>).
Todos os ícones nas bibliotecas de ícones abaixo, são vetores

escalonáveis que podem ser personalizados com CSS (tamanho, cor,
sombra, etc.)
Font Awesome Icons
Para usar os ícones Font Awesome, adicione a seguinte linha dentro da

seção <head> da sua página HTML: <link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">, Existem mais fontes como a Bootstrap Icons, Google
icon e muito mais.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>Some Font Awesome icons:</p>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
<p>Styled Font Awesome icons (size and color):</p>

<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-
size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-
size:60px;color:lightblue;"></i>
</body>
</html>
73
Tabela
As propriedades de tabelas são as seguintes:
• table-layout - Nos permite indicar se queremos que a tabela

tenha o seu fluxo com o tamanho fixo ou o seu tamanho
acompanhe o fluxo do conteúdo. Valores: automatic ou fixed.
• border-collapse - A propriedade border-collapse define se as
bordas em uma tabela vão se fundir ou vão ser separadas.
Valores: collapse e separate.
• border-spacing - Define um espaçamentos (horizontal e vertical)
entre os elementos da tabela. Valores em px.
Ex.: border-spacing: 50px.
Pode-se usar border-spacing HORIZONTALpx VERTICALpx,

especificando em pixels os espaçamentos.
• caption-side - Pode ser usado para oferecer uma breve

descrição de uma tabela, tal como uma legenda de uma imagem.
Valores: top, bottom, left e right.
/*estilo.css*/
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-
serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {

border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
<!DOCTYPE html>
74
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="estilo.css"
/>
</head>
<body>
<table id="customers">
<tr>
<th>Empresa</th>
<th>Contacto</th>
<th>Pais</th>
</tr>
<tr>
<td>ISCED</td>
<td>Maria Andrade</td>
<td>Moçcambique</td>
</tr>
<tr>
<td>Shoprite</td>
<td>Cristina Manuel</td>
<td>Africa de sul</td>
</tr>
<tr>
<td>Centro comercial Motezuma</td>
<td>Francisco Changinhe</td>
<td>Mexico</td>
</tr>
<tr>
<td>ASB</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>
75
Sumário
Nesta Unidade temática 4.1 estudamos e discutimos aspecto ligado a

estrutura básica das folhas de estilo CSS, alguns dos detalhes da sintaxe
e as regras para analisar as folhas de estilo CSS. Ele também descreve
(em alguns casos, de forma informativa) como as folhas de estilo podem
ser vinculadas a documentos e como esses links podem depender da
mídia.
Perguntas
1. Qual propriedade é usada para alterar a cor do plano
de fundo?
a) background
b) color
c) bgcolor
2. Como você adiciona uma cor de fundo para todos os
elementos <h1>?
a) all.h1 {background-color: #FFFFFF;}
b) h1 {background-color: #FFFFFF;}
c) h1.all {background-color: #FFFFFF;}
3. Qual propriedade CSS é usada para alterar a cor do
texto de um elemento?
a) fgcolor
b) color
c) texto_color
5. Qual propriedade CSS controla o tamanho do texto?
a) Tamanho do texto
b) tamanho da fonte
c) estilo de fonte
d) estilo de texto
6. Qual é a sintaxe CSS correta para tornar todos os
elementos <p> em negrito?
a) p {tamanho do texto: negrito;}
b) <p style = "text-size: bold;">
c) p {font-weight: bold;}
d) <p style = "font-size: bold;">
76
TEMA – V: JAVASCRIPT.
UNIDADE Temática 5.1. Introdução ao JavaScript: Variáveis e

operadores.
UNIDADE Temática 5.2. Objetos, Comandos e Funções internas.
UNIDADE Temática 5.1. Introdução ao JavaScript: Variáveis e operadores.
Introdução
Nesta unidade temática iremos abordar aspectos ligados a JavaScript

descrevendo as suas funções de escritas, como JavaScript podem ser
alocada dentro de seu documento HTML, possibilidade do incremento das
funcionalidades do seu documento HTML com elementos interessantes
assim como eventos iniciados pelo usuário, incluir efeitos que tornem a
página dinâmica.
▪ Saber sobre javascript como linguagem;

▪ Saber incorporar javascript em páginas HTML;
▪ Saber a função do javascript;
Objectivos ▪ Identificar algumas palavras-chaves em js;
específicos ▪ Identificar Operadores;
▪ Identificar variáveis;
5.1.1. JavaScript
JavaScript é uma linguagem dinâmica que é usada para projetar as

páginas da web no lado do cliente, diferencia maiúsculas de minúsculas,
não tem tipo, ou seja, uma variável pode conter qualquer tipo de valor,
para comentário é usado // e ; para terminação de linha.
• O código JavaScript deve ser adicionado no final, ou seja, logo acima

da tag de fechamento do corpo ou mesmo no cabeçalho.
• A melhor forma de escrever o código JavaScript é em arquivo

separado.
77
Apesar dos nomes semelhantes, há uma certa diferença ente elas, pois o
Java é diferente JavaScript, pois são linguagens diferentes de
programação, Java é uma linguagem de programação e JavaScript é
uma linguagem de hiper-texto ou seja, você realmente pode criar
programas em Java mas para criação de animações e feitos muitas vezes
você precisa do JavaScript pois é fácil de entender e usar sem
necessariamente ter conhecimentos prévios da linguagem java.
Por que estudar JavaScript?
• HTML é a linguagem de marcação que usamos para estruturar e

definir conteúdos web
• CSS é uma linguagem de estilo usada para aplicar estilo ao nosso
conteúdo HTML.
• JavaScript é uma linguagem de programação que permite criar
conteúdo dinâmico, control de multimídias, imagens animadas,etc.
Figura 9: Definição de camada do JS.
Por JavaScript ser linguagem de hyperText o qual permite a criação de

conteúdo que gera uma actualização dinâmica, controlar múltimídias,
imagens animadas.
Deste modo podemos ilustrar com um simples bloco de texto.
Nós podemos marcá-lo usando HTML para dar estrutura e propósito:
<p>Estudante 1: Simão Fundini</p>
78
Adicionaremos o CCS Para dar o estilo o paragrafo que criamos

(Consulte o capitulo sobre CCS).
p {
font-family: "Times New Roman", Times, serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor:pointer;
}
Por fim podemos adicionar o Javascript para dar vitalidade (dinamismo)
no nosso parágrafo: O código JavaScript faz com que ao clicar no nome,
o navegador abra uma caixa de diálogo (veremos a seguir) para
introduzir novo nome que será apresentado novamente na tela.
var para = document.querySelector('p');
para.addEventListener('click', atualizarNome);
function atualizarNome() {
var nome = prompt('Insira um novo nome');
para.textContent = 'Estudante 1: ' + nome;
}
O código JavaScript pode ser escrito no arquivo "html" ou no "arquivo
JavaScript (.js)" separado, conforme mostrado neste seção,
5.1.1.1. JavaScript no arquivo HTML
No arquivo HTML, os códigos JavaScript podem ser escritos dentro da

tag "script", conforme mostrado a seguir.
<script>
var para = document.querySelector('p');
para.addEventListener('click', atualizarNome);
function atualizarNome() {
var nome = prompt('Insira um novo nome');
para.textContent = 'Estudante 1: ' + nome;
}
</script>
5.1.1.2. JavaScript em arquivo separado
79
Crie novo arquivo na pasta que está o arquivo HTML ou numa pasta
dento da pasta como no exemplo. Chame-o de js.js, não esqueca da
extensão .js, pois é assim que ele será reconhecido como JavaScript.
Figura 10: Estrutura organizacional da pasta JS.
Agora, copie todo o código que está dentro da tag <script> e cole
dentro do arquivo js.js Salve o arquivo.
Agora substitua o atual elemento <script> pelo seguinte código:
<script src="js/js.js"></script>
5.1.2. Palavras-chave
• Abaixo estão as palavras-chave reservadas no JavaScript que não

podem ser usados como ‘variável’ e os nomes de função etc.
abstract arguments await* boolean

break byte case catch
char class* const continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield
Tabela 1: Palavras-chave
80
As palavras indicadas com * são novas no ECMAScript 5 e 6, caso queira

saber um pouco mais sobre as versões e da evolução leia qui:
https://www.w3schools.com/js/js_versions.asp
5.1.3. Variáveis
Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem

declarações formais.
Existem dois tipos de abrangência para as variáveis:
• “Global” - Declaradas/criadas fora de uma função. As variáveis

globais podem ser acessadas em qualquer parte do programa.
• “Local” - Declaradas/criadas dentro de uma função. Só podem
ser utilizadas dentro da função onde foram criadas e precisa ser
definida com a instrução Var.
Com relação à nomenclatura, as variáveis devem começar por uma letra

ou pelo caractere sublinhado “_”, o restante da definição do nome pode
conter qualquer letra ou número.
É importante ressaltar que a variável “Código” é diferente da variável

“código”, que por sua vez é diferente de “CODIGO”, sendo assim, muito
cuidado quando for definir o nome das variáveis, utilize sempre um

mesmo padrão.
Existem três tipos de dados usados em variáveis: Numéricas, Booleanas

e Strings.
• Numeros : 123, 32.32

• Strings : “Adjello”, “Amarildo”, “2018”
• Boolean : true, false
Podem ser incluídos dentro de uma string alguns caracteres especiais, a

saber:
• \t - posiciona o texto a seguir, na próxima tabulação;

• \n - passa para outra linha;
• \f - form feed;
81
• \b - back space;
• \r - carrige return.
O JavaScript reconhece ainda um outro tipo de contudo em variáveis,
que é o NULL. Na prática isso é utilizado para a manipulação de
variáveis não inicializadas sem que ocorra um erro no seu programa.
Quando uma variável possui o valor NULL, significa dizer que ela possui
um valor desconhecido ou nulo. A representação literal para NULL é a
string 'null' sem os delimitadores. Quando referenciado por uma função
ou comando de tela, será assim que NULL será representado. Observe
que NULL é uma palavra reservada.
As variáveis podem ser definidas usando a palavra-chave "var". Além

disso, o JavaScript é uma linguagem sem tipo, ou seja, uma variável pode
conter qualquer tipo de valor.
• No HTML abaixo, a tag "p" com o id "p1" é definida na Linha 10. Esse
id será usado para escrever algum texto usando JavaScript,
<!DOCTYPE html>
<html>
<head>
<title>Minha pagina dinamica </title>
<style>
<link rel="stylesheet" type="text/css" href="style.css"
/>
</style>
</head>
<body>
<p id="p1"></p>
<script src="js/js.js"></script>
<footer id="rodape">
<p align="center" id="parag">
<br />
Rua Dr. Lacerda de Almeida, nº 211, Cidade da Beira -
Moçambique
<br>
WebSite : www.isced.ac.mz<br></p></footer>
</body>
</html>
Duas variáveis são definidas do tipo "string" e "float", respectivamente.
Em seguida, ‘getElementById’ é usado para localizar a tag com id ‘p1’ e
82
o texto é inserido como mostrado a seguir. Por último, o sinal ‘+’ é usado
para concatenar os valores.
document.write("Inicio de um texto!<br>");
// variable example
var your_name = "Adjello Momola";
var age = 24;
document.getElementById("p1").innerHTML= "BemVindo "+
your_name + "<br>Age : " + age;
Note: Se importarmos o arquivo ‘JavaScript’ entre a ‘tag head final’ e a
‘tag start-body’, a mensagem ‘BemVindo Adjello Momola ’. . . 'Não será
exibido, pois o' JavaScript 'será executado antes do carregamento da
página. e o JavaScript não pode encontrar o id "p1".
5.1.4. Operadores
Junto com funções e variáveis, operadores são blocos de construção de

expressões. Um operador é semelhante a uma função no sentido de que
executa uma operação específica e retorna um valor.
Todos os operadores em JavaScript requerem um ou dois argumentos,

chamados operandos.
Aqueles que requerem um operando apenas são denominados

operadores ulnários, e os que requerem dois operandos são chamados
de operadores binários.
Vários operadores são mostrados nesta seção. O uso de alguns desses

operadores.
Operadores Operadores
Operadores Matemáticos Operadores de atribuição
lógicos relacionais
Adição ( + ) V01=5 V02=2
V=V01+V02 // resulta em: =Atribuir && E lógico < Menor que
7
Subtração ( - ) V01=5 += Soma ou concatenação

V02=2 V=V01-V02 // e atribuição: x+=5 // é o || Ou lógico > Maior que
resulta em: 3 mesmo que: x=x+5
Multiplicação ( * )V01=5 -= Subtração e atribuição.

! (negação ou
V02=2 V=V01*V02 // x-=5 // é o mesmo que: = = Igual
diferente)
resulta em: 10 x=x-5
83
Divisão ( / ): V01=5 V02=2 *= Multiplicação e

V=V01/V02 // resulta em: atribuição. x*=5 // é o != Diferente
2.5 mesmo que: x=x*5
Divisão ou resto ( % ):
/= Divisão e atribuição.
V01=5 V02=2 >= Maior ou
x/=5 // é o mesmo que:
V=V01%V02 // resulta em: igual
x=x/5
1
%= Módulo e atribuição.
Incremento ( ++ ): <= Menor ou
x%=5 // é o mesmo que:
++Variável ou Variável++ igual
x=x%5
Decremento ( -- ): --
Variável ou Variável--
Tabela 2: Operadores
Existem mais operadores, porém podemos referenciar alguns como:

Operador de String: Operador de concatenação (+)
Operadores bit a bit: & ( e ), | (ou), ^ (xor), ~ (not).
Sumário
Nesta Unidade temática 5.1 estudamos e discutimos apecto ligado a

ligados a JavaScript, descrevendo as suas funções de escritas, como
JavaScript podem ser alocada dentro de seu documento HTML,
possibilidade do incremento das funcionalidades do seu documento HTML
com elementos interessantes assim como eventos iniciados pelo usuário,
de incluir efeitos que tornem a página dinâmica.
Perguntas
1. Quais os tipos de dados que podem estar dentro de
aspas “Medico”?
2. O que é um Operador de concatenação?
3. Localize o erro na declaracao: var goto = "Adjello

Momola";
4. Para que serve a tag <script>?
5. O que são operadores ulnários?
84
UNIDADE Temática 5.2. Objetos e Comandos.
Introdução
Nesta unidade temática iremos abordar aspectos ligados objectos em

javascript, assim como identificar alguns comandos de estruturas de
controle, que são responsáveis pelo fluxo de seus scripts, também vimos
o usos de funções, classes e arreys e como esses são tratadas e que
possibilita utilizar cada uma da forma que achar mais adequada para
o que se quer fazer.
▪ Identificar objectos;
▪ Conhecer a Estruturas de Controle;
▪ Conhecer comandos usados;
Objectivos
específicos
5.2.1. Objecto
Objetos contêm um ou mais pares de valores-chave. A parte chave pode
ser qualquer string. A parte do valor pode ser qualquer tipo de valor:
um número, uma string, uma matriz, uma função ou até mesmo outro
objeto.
[Definição: quando um desses valores é uma função, é chamado de

método do objeto.] Caso contrário, eles são chamados de propriedades.
Como se vê, quase tudo em JavaScript é um objeto - matrizes, funções,

números, até cadeias de caracteres - e todos eles têm propriedades e
métodos.
5.2.1.1. Criando Objetos
Neste aspecto podemos trabalhar com objetos, pois é a única forma de

manipular os arrays: Digamos que queremos implementar uma lista de
clientes, nosso objeto poderia ser definido assim:
85
Function CriaClientes(nome,endereco,telefone,renda)
{
this.nome=nome;
this.endereco=endereco;
this.telefone=telefone;
this.renda=renda;
}
A propriedade “this” especifica o objeto atual como sendo fonte dos
valores passados a função. Agora, basta criar o nosso objeto:
Marta = New CriaClientes('Marta Aparecida','Rua Guilhotina dos Patos,

S/N','820101010',1300)
Para acessar as propriedades do objeto Maria, basta usar a seguinte

sintaxe:
Marta.nome - retorna 'Marta Aparecida'

Marta.endereco - retorna 'Rua Guilhotina dos Patos, S/N'
Marta.telefone - retorna '820101010'
5.2.2. Comandos
Além das estruturas de controle, o JavaScript oferece alguns poucos

comandos:
• Break
• Continue
• Var
• With
• Function
• Return
• Comment
5.2.2.1. VAR
Em JavaScript, nem sempre é necessário definir uma variável antes de

utilizá-la, é o que ocorre com variáveis globais, porém, é importante
ressaltar que a utilização da instrução “var”, a nível de documentação é
muito bem-vinda. Já nas definições de variáveis locais, é obrigatório a
utilização da instrução var. Você pode armazenar um valor na própria
linha de definição da variável, se não o fizer, para o JavaScript, esta
variável possui um valor desconhecido ou nulo.
86
Não é obrigatória a utilização de uma instrução “var” para cada

variável declarada, na medida do possível, você pode declarar várias
variáveis em uma só instrução var.
Var NomeDaVariável [ = <valor> ];

Var Contador = 0;
Var Inic="",Tolls=0,Name="TWR";
Var Teste; // Neste caso, Teste possui valor null
5.2.2.2. With
Quando você precisa manipular várias propriedades de um mesmo

objeto, provavelmente prefere não ser obrigado a repetir todas as vezes
a digitação do nome do objeto. A instrução “with”, permite fazer isso
eliminando a necessidade de digitar o nome do objeto todas as vezes.
Forma geral:
with (<objeto>)
{
... Instruções
}
Por exemplo vamos supor que será necessário executar uma série de
operações matemáticas:
with (Math)
{
a=PI;
b=Abs(x);
c=E;
}
5.2.2.3. Break
Pode ser executado somente dentro de loops “for”... ou “while”... e tem

por objetivo o cancelamento da execução do loop sem que haja
verificação na condição de saída do loop, passando a execução a linha
imediatamente posterior ao término do loop.
Forma geral:
Break
Exemplo:
87
Neste exemplo, quando a variável x atinge o valor 5 o loop é cancelado,

e é impresso o número 5 na tela.
For (var x=1 ; x < 10 ; x++)

{
If (x = = 5)
{
Break
}
}
5.2.2.4. Continue
Pode ser executado somente dentro de loops “for”... ou “while” ... e tem
por objetivo o cancelamento da execução do bloco de comandos
passando para o início do loop.
Forma geral:
Continue
Exemplo:
Neste exemplo, serão impressos os números de 1 a 10, com exceção do

número 5, ou seja, quando a variável “x” atinge o valor 5 a execução
do bloco de comandos é interrompida e o controle retorna ao início do
loop, onde a variável “x” será incrementada.
For (var x=1 ; x < 10 ; x++)

{
If (x = = 5)
{
Continue
}
document.write(x)
}
5.2.2.5. Funções
As funções podem ser definidas como um conjunto de instruções,

agrupadas para executar uma
88
determinada tarefa. Dentro de uma função pode existir uma chamada a

outra função. Para as funções podem ser passadas informações, as quais
são chamadas de parâmetros.
As funções podem ou não retornar alguma informação, o que é feito com

o comando Return.
A definição de uma função é feita da seguinte forma:
Function NomeDaFunção([ parametro1, parametro2, ..., parametroN ])

{
...
[Return(ValorDeRetorno)]
}
A chamada de funções é feita da seguite forma:
NomeDaFunção([parâmetros])
Funções são melhor declaradas entre as tags <head> de sua página

HTML. Funções são frequentemente chamadas por eventos acionados
pelo usuário. Assim parece razoável colocar as funções entre as tags
<head>. Elas são carregadas antes que o usuário faça alguma coisa que
possa chamar uma função.
<html>
<head>
<script language="LiveScript">
Function hello(){
alert("Alô mundo!!!");
}
</script>
</head>
<body>
...
<script>hello();</script>
...
</body>
</html>
5.2.2.6. Comentários
Comentários podem ser formulados de varias maneiras, dependendo do

efeito que você precisa.
Para comentários longos de várias linhas, ou blocos de comentários, use:
89
/* O barra-asterisco inicia um bloco de comentário que pode conter

quantas linhas você precisar todo o texto após o barra asterisco é
ignorado, até que asterisco-barra seja encontrado, terminando assim o
bloco de comentário */
Para comentários de uma linha, use barra dupla (//) para introduzir o
comentário. Todo o texto seguindo este simbolo até o próximo carrige-
return será considerado um comentário e ignorado para fins de
processamento. Exemplo:
// este texto será tratado como comentário
Os códigos JavaScript podem ser colocados em campos de comentário

de modo que browsers antigos não mostrem o próprio código JavaScript,
como vemos a seguir:

</script>
5.2.3. Estruturas de Controle
Existem algumas estruturas de controle que lhe permitem modificar o

fluxo de execução de um programa. Estas estruturas permitem executar
o código baseado em condições lógicas ou um número determinado de
vezes.
For...
For...In
If...Else...
While...
5.2.3.1. For...
Repete uma seção do código um determinado número de vezes. Consiste de

uma declaração que define as condições da estrutura e marca seu início.
Esta declaração é seguida por uma ou mais declarações
executáveis, que representam o corpo da estrutura.
90
Estabelece um contador inicializando uma variável com um valor

numérico. O contador é manipulado através da <ação> especificada no
comando toda a vez que o loop alcança seu fim, permanecendo nesse
loop até que a <condição> seja satisfeita ou a instrução Break seja
executada.
Forma geral:
For (<inicialização> ; <condição> ; <ação>)

{ Corpo da Estrutura }
No exemplo abaixo, o bloco de instruções será executado 10 vezes, pois
a variável contador é inicializada com o valor 1 e o bloco de instruções
será executado enquanto contador for menor que 11. A cada execução
do bloco de instruções contador é incrementado.
For (var contador = 1; contador < 11; contador++)
{ document.write(Contador); }
5.2.3.1.1. For...In
Este comando tem por objetivo, procurar a ocorrência de uma variável,

dentro das propriedades de um objeto, ao encontrar a referida variável,
um bloco de comandos pode ser executado.
Forma geral:
For (variavel In objeto)

{
bloco de comandos
}
Exemplo: Esta função procura por uma propriedade do Objeto, cujo o
nome esteja especificado pela variável Procura, onde Nome é uma string
correspondendo ao nome do objeto.
Function SearchIn(Procura,Objeto,Nome)
{
Var ResultadoDaBusca = ""
For (Procura In Objeto)
{
document.write(Nome+"."+Procura+"="+Objeto[Procura]+"<BR>");
}
}
91
5.2.3.2. If...Else...
A estrutura If... executa uma porção de código se a condição

especificada for verdadeira. A estrutura pode também ser especificada
com código alternativo para ser executado se a condição for falsa.
Function VerificaIdade(anos)
{
If anos >= 16
{
Return ('Já pode votar!')
}
else
{
Return (' Ainda é muito cedo para votar...')
}
}
Uma alternativa para economizar If's seria a utilização de uma
expressão condicional, que funciona para situações mais simples, o
exemplo acima ficaria da seguinte forma:
VariavelDeRetorno= (anos>=16) ? 'Já pode votar!' : 'Ainda é muito cedo

para votar...'
5.2.3.3. While
Outro tipo de loop é aquele baseado numa condição ao invés de no

número de repetições. Por exemplo, suponha que você necessita que um
determinado processo seja repetido até que um determinado teste dê um
resultado verdadeiro ou seja executada a instrução Break.
Forma geral:
while (<condição>)
{ Corpo da Estrutura }
No exemplo abaixo, o bloco de instruções será executado 10 vezes, pois

a variável Contador é inicializada com o valor 1 e o bloco de instruções
será executado enquanto Contador for menor que 11. A cada execução
do bloco de instruções Contador é incrementado.
Var Contador=1;
While ( Contador < 11 )
{ document.write(Contador++) ;}
92
Sumário

aspecto ligado a objectos em javascript, assim como identificar alguns
comandos de estruturas de controle, que são responsáveis pelo fluxo de
seus scripts, também vimos o usos de funções, classes e arreys .
Perguntas
6. Calcule a média de diversas notas digitadas pelo usuário.
7. Faça um programa que entre com cinco números e
imprima o quadrado de cada número.
8. Peça ao usuário para digitar 2 números em uma caixa de
texto. Verifique qual é o maior número e exiba-o.
9. Peça ao usuário para digitar várias idades. Exiba
quantas pessoas são maior de idade (18 anos) e quantas
são menores.
10. For (var x=1 ; x < 10 ; x++)
{ If (x = = 3)
{Continue}
document.write(x)
}
Qual o resultado da estrutura?
93
TEMA – VI: PHP.
UNIDADE Temática 6.1. Introdução ao PHP.

UNIDADE Temática 6.2. Sintaxe básicos com PHP.
UNIDADE Temática 6.3. Expressões e Estrutura de controlo.
UNIDADE Temática 6.4. Manipular dados na base de dados com PHP.
UNIDADE Temática 6.1. Expressões e Estrutura de controlo
Introdução
Nesta unidade temática iremos abordar aspectos ligados a PHP onde

iremos entender os conceitos básicos, seu historial e como esta funciona
sendo o PHP uma linguagem de script utilizada para programar as
páginas Web que geram conteúdos dinâmicos e que interagem com o
banco de dado via conexão.
▪ Conhecer o Historial da linguagem PHP

▪ Conhecer conceitos da linguagem PHP;
Objectivos ▪ Conhecer a Tag de interpretação da linguagem
específicos ▪ Conhecer a configuração do Ambiente
6.1.1. PHP
O PHP foi concebido no outono (lá nos EUA, aqui no Brasil seria
primavera) de 1994 por Rasmus Lerdorf. As primeiras versões foram
usadas na sua homepage para saber quem estava consultando o currículo
online. A primeira versão, utilizada por outras pessoas, foi
disponibilizada em meados de 1995, e era conhecida como Personal
Home Page Tools (Ferramentas para Homepages Pessoais). PHP é uma
linguagem simples com raízes em C e Perl. Possui suporte para orientação
94
ao objeto e está disponível para muitos sistemas operativos, tais como, o

Windows, Linux, etc.
Por padrão, os documentos PHP são definidos com a extensão

“nome.php”, quando um servidor Web executa um arquivo solicitado com
esta extensão, automaticamente interpreta-o como um arquivo PHP.
No nível mais básico, PHP pode fazer qualquer outra coisa que um
programa CGI pode fazer, tal como coletar dados de um formulário,
gerar conteúdo de páginas dinâmicas, ou enviar e receber cookies.
Talvez a maior e mais significante característica em PHP é seu suporte a

uma faixa muito ampla de bancos de dados. Escrever uma página Web
baseada em um banco de dados é muito simples. Os seguintes bancos de
dados são atualmente suportados: Adabas D, Interbase, Solid, Dbase,
mSQL, Sybase, Empress, MySQL, MariaDB, Velocis, FilePro, Oracle, Unix
dbm, Informix, PostgreSQL.
PHP também tem suporte a comunicação para outros serviços usando

protocolos tais como IMAP, SNMP, NNTP, POP3, ou mesmo HTTP. Você
pode também abrir sockets de rede e interagir usando outros protocolos.
Para que o servidor interprete o código PHP, deve iniciar o script com a
tag <?php e terminá-lo com a tag ?>.
Figura 11:Estilos de tags no PHP.
Utilizando a linguagem PHP você permite a interação direta do usuário

com o site, através de formulários, contadores de acesso, estatísticas do
site, ou criar aplicações para uma rede local baseadas numa Intranet.
Aplicações em PHP são geradas com excelente performance e

automaticamente pelo servidor. O usuário não vê o código PHP, somente
95
o HTML; isto é muito importante quando se está lidando com senhas.
Alguns pontos a considerar:
▪ Todos os comandos PHP devem ser envolvidos pelas tags <? e ?>.
Uma segunda maneira de denotar comandos PHP é envolvendo-
os nas tags <?php e ?>;
▪ Todas as sentenças de saída para a tela devem ser envolvidas
por aspas (“) e conduzidas pelos comandos print ou echo;
▪ Quase todos os comandos PHP3.0 terminam com um ponto-e-
vírgula;
▪ Todo comando HTML dentro do comando print será executado
normalmente pelo browser e desempenhará sua função usual;
▪ Documentos incluindo código PHP devem ser salvos com a
extensão .php ou .php, isto informará ao interpretador PHP3.0
para executar os comandos encontrados dentro das tags <? e ?>.
6.1.2. Configuração do meio ambiente
O servidor http, a ser utilizado neste curso, é o Apache, que está

disponível para download em “http://www.apache.org”. Mas iremos
usar o wampServer pois este já vem com o servidor apache, PHP, MySQL
(sistema Gerenciador de banco de dado (consola)), e o PHPmyAdmin
para consulta em interface, neste caso só usaremos o wampserver, para
quem usa outro sistema operativo diferente de windows, pode usar
XAMP( roda perfeitamente em diferentes SO), MAMP Local Server (para
MAC OS) ou LAMP Local Server (para Linux OS).
Para este tema, teremos que usar o wampserver para Windows, baixe
ele em http://www.wampserver.com/en/#download-wrapper e para
instalar usem o link da https://www.techtudo.com.br/dicas-e-
tutoriais/noticia/2013/03/aprenda-instalar-um-servidor-web-
completo-com-o-wampserver.html ou no site da wampserver
http://www.wampserver.com/en/.
Sumário
Nesta Unidade temática 6.1 estudamos aspectos ligados a PHP onde

iremos entender os conceitos básicos,
96
seu historial e como esta funciona sendo o PHP uma linguagem de script
utilizada para programar as páginas Web que geram conteúdos
dinâmicos e que interagem com o banco de dado via conexão..
Perguntas
11. Qual é a principal diferença entre o WAMP e o LAMP?
12. Quais são os quatro (4)componentes mínimos necessário
para criar uma página Web dinâmica?
13. PHP e JavaScript são as duas das principais linguagens
de programação que geram conteúdos dinâmicos em uma
página Web. Qual é a principal diferença, e porquê do
uso das duas linguagens?
14. Qual é a extensão para páginas php?
15. Qual é a Sentença usada para saída de dado em php?
16. /* teste*/ este é um comentário valido em PHP? Explique?
Respostas: 1. Rever Página 96.p, 2. Rever Página 95.p, 3. Rever Página
96.p, 4. Rever Página 95.p, 1. Rever Página 95.p
UNIDADE Temática 6.2. Sintaxe básicos com PHP
Introdução
Nesta unidade temática iremos abordar aspectos ligados as regras

básicas para uma estrutura com PHP e como esta pode-se embutir em
código HTML, e comos as variáveis e tipos de dados podem se comportar em
PHP assim como todos operadores usados na linguaguem.
▪ Conhecer a Estrutura do código PHP;

▪ Identificar tipos de variáveis;
Objectivos ▪ Identificar e diferenciar operadores;
específicos
97
6.2.1. Sintaxe Básica
O mecanismo de análise do PHP precisa de uma maneira de diferenciar

o código PHP de outros elementos da página. O mecanismo para o fazer
é conhecido como 'escapando para o PHP'.
6.2.1.1. Comentando o código PHP
Um comentário é a parte de um programa que existe apenas para o

leitor humano e retirado antes de exibir o resultado do programa.
Existem dois formatos de comentários no PHP:
Comentários de linha única:
Geralmente são usados para breves explicações ou notas relevantes

para o código local. Aqui estão os exemplos de comentários de linha
única.
<?
# Este é um comentário e
# Esta é a segunda linha do comentário
// Este é um comentário também. Cada estilo só comenta
print "Um exemplo com comentários de linha única";
?>
Comentários em várias linhas:
Geralmente são usados para fornecer algoritmos de pseudocódigo e

explicações mais detalhadas quando necessário. O estilo multilinha de
comentar é o mesmo que em C.
Aqui está o exemplo de comentários em várias linhas.
<?
/* Este é um comentário com multilinha
Autor: your name
Propósito: Multiline Comments Demo
Assunto: PHP
*/
print "Um exemplo com comentários de múltiplas linhas";
?>
PHP é insensível a espaços em branco
98
Espaços em branco são as coisas que você digita que normalmente são
invisíveis na tela, incluindo espaços, tabulações e retornos char
(caracteres de final de linha).
6.2.2. Variáveis e tipos de variáveis
A principal maneira de armazenar informações no meio de um programa

PHP é usando uma variável.
As variáveis são representadas com PHP por um símbolo $ e uma string,

que deve iniciar por uma letra ou carateres. O PHP é case sensitive, ou
seja, definir uma variável com $var é diferente com a variável $VAR.
Exemplo de tipos de variáveis suportados com PHP:
$nome = "Amarildo Guilinche";

$conta = 83200005;
Exemplo de Declaração de uma variável:
<?php
$var = 10; /* var é o nome atribuído e 10 é o valor*/
$string = "Ola mundo!";
$array = array("Um", "Dois", "Três");
?>
Variável global
Com PHP, assim como outras linguagens de programação são declaradas variáveis
globais, o que significa que elas estão sempre acessíveis, independente do escopo.
<?php
$x = 4;
$y = 8;
function teste(){
global $x, $y;
$x = $x+ $y;
}
teste();
echo $x;
?>
As variáveis do PHP sempre começam com $ e são declaradas quanto o
tipo (inteiro,string,array, etc...) no momento em que é atribuído o seu
valor, não sendo necessário indicar o nome e tipo da variável como na
linguagem C. O php é case sensitive, portanto a variável $fredcox é
diferente da variável $Fredcox.
Operadores com PHP
99
As operações no PHP também seguem o padrão das outras linguagens
(+, -, *, /, %[modulo da divisão], sin(), cos()). Além destas, o PHP tem um

completo conjunto de operações matemáticas.
No quadro a seguir, são enumerados os principais operadores com PHP:

os operadores matemáticos, operadores de comparação e operadores
lógicos.
Operadores Matemáticos Descrição Exemplo
+ Adição $var + 2
- Subtração $var - 7
* Multiplicação $var * 5
/ Divisão $var / 3
% Módulo (resto da divisão) $var % 9
++ Incremento ++$var
-- Decremento --$var
Operadores de comparação Descrição Exemplo
== É igual a $var == 6
!= Não é igual a $var != 11
< É maior que $var < 2
> É menor que $var > 7
<= É menor igual a $var <= 4
>= É maior igual a $var >= 12
Operadores lógicos Descrição Exemplo
&& E $var == 3 && $cont == 5
And E (low-precedence) $var == 3 and $cont == 5
|| Or $var == 3 || $cont == 5
Or Or (low-precedence) $var == 3 or $cont == 5
100
! Negação !($var == $cont)
Xor Exclusivo or $var xor $cont
Sumário
Nesta Unidade temática 6.2 estudamos e discutimos aspectos ligado a

as regras básicas para uma estrutura com PHP e como esta pode-se
embutir em código HTML, e comos as variáveis e tipos de dados podem
se comportar em PHP assim como todos operadores são usados na
linguaguem PHP.
Perguntas
1. Qual é a maneira correta de abrir o arquivo "time.txt"
como legível?
a) fopen ("time.txt", "r");
b) aberto ("time.txt");
c) fopen ("time.txt", "r +");
d) open ("time.txt", "read");
2. Qual variável superglobal contém informações sobre

cabeçalhos, caminhos e locais de script?
a) $ _SESSION
b) $ _GET
c) $ _GLOBALS
d) $ _SERVER
3. Qual é a maneira correta de adicionar 1 à variável $
count?
a) contar ++;
b) $ count ++;
c) $ count = + 1
d) contagem ++
4. O que é uma maneira correta de adicionar um
comentário no PHP?
a) /*...*/
101
b) <comentário> ... </ comment>

c) <! --...-->
d) \ ... \ *
5. Qual destas variáveis tem um nome ilegal?
a) $ myVar
b) $ my-Var
c) $ my_Var
d) $_myvar
Perguntas
1. Qual é o objetivo do ponto-e-vírgula nas consultas
MySQL?
2. Qual é o elemento utilizado para fazer com que o PHP
interprete o código do programa? E qual é a forma
abreviada do elemento?
3. Qual é o símbolo utilizado para introduzir variáveis
com PHP?
4. É permitido utilizar espaços nos nomes das variáveis?
5. Qual é a diferença entre uma variável local e uma
global?
102
UNIDADE Temática 6.3. Expressões e Estrutura de controlo
Introdução
Nesta unidade temática iremos abordar sobre as estruturas de controle,

que são responsáveis pelo fluxo de seus scripts, e como essas estruturas
e expressões são tratadas ao nível do PHP, sendo que a linguagem possui
uma série dessas estruturas, o que possibilita utilizar cada uma da forma
que achar mais adequada para o que se quer fazer.
▪ Identificar as expressões PHP;

▪ Conhecer diferente tipos de estrutura de controle;
Objectivos ▪ Manipular essas estruturas;
específicos
6.3.1. Expressões e Estrutura de controlo
Todo script PHP é composto por um conjunto de instruções, uma instrução

pode ser uma atribuição, uma chamada de função, ou mesmo uma
instrução que não faz nada. Instruções geralmente terminam com um
ponto e vírgula, mas existem casos que instruções são encapsuladas por
um grupo de comandos utilizando chaves, grupos de comandos também
são instruções, neste artigo iremos conhecer algumas dessas instruções
que tem como objetivo encapsular outras instruções, normalmente
chamadas de estruturas de controle.
Podemos dizer que o “10” é uma expressão com o valor 10. Qualquer
script PHP é construído por uma série de instruções. Uma instrução pode
ser uma atribuição, uma chamada de função, um ‘loop’, uma instrução
condicional, ou mesmo uma instrução que não faz nada (um comando
vazio). A implementação de estruturas de controlo permite gerir a ordem
como as instruções serão executadas em um programa.
103
6.3.1.1. Estruturas condicionais
if – A estrutura if é uma das caracteristicas mais importantes

das linguagens de programação, pois permite a execução
condicional de um bloco de código. Uma expressão interna é
definida para verificar se o bloco de código deve ou não ser
executado, como ilustra o exemplo:
$x = 5;
$y = 3;
if($x > $y){
echo "X e maior que Y";
}
else – A estrutura else é um complemento do if, em alguns

casos é necessário executar um bloco de código caso a
expressão da estrutura if retorne false, é ai que entra o else.
Veja o exemplo a seguir.
<?php
$x = 5;
$y = 8;
if($x > $y){
}
else{
echo "X e menor que Y";
}
?>
else if – A estrutura de controle else if é o resultado do uso

encadeado de if e else, de maneira que caso a expressão
interna de um dos ifs retorne true, os demais não serão
executados. Veja o exemplo a seguir:
<?php
$x = 5;
$y = 3;
$z = 1;
if($x > $y){
}elseif($x > $z){
echo "X e maior que Z";
}else{
echo "X e menor que Y e Z";
104
}
?>
switch – A estrutura de controle switch é semelhante com o uso

encadeado de if e else, mas vai um pouco além e obsequia outras
funcionalidades, por exemplo, podemos unir opções que tenham um bloco de
código em comum ou definir um bloco de código padrão. Vide o
exemplo:
<?php
$var = 'footb';
switch($var) {
case 'foot':
case 'bar':
echo 'footbar';
break;
case 'footb':
case 'all':
echo 'football';
break;
default:
echo 'Está opção não existe.';
break;
}
?>
Usualmente o switch é indicado ao invés do uso encadeado de if e else,

especialmente se o número de opções for grande.
6.3.1.2. Estruturas de repetição
Ao trabalhar com estruturas de repetição, precisamos verificar a

existência de um ponto de parada, caso contrário o script entrará em
loop infinito.
while – A estrutura while é uma estrutura de repetição que avalia uma

expressão e executa um bloco de código enquanto o resultado da
expressão for true, caso o resultado seja false, a execução do bloco de
código é interrompida.
<?php
$var = 1;
while ($var <= 5){
echo $var++;
}
?>
105
do while – A estrutura do while é bastante parecida com a estrutura

while, mas a verificação de expressão interna fica depois do bloco de
código. Bloco de instrução do{...instrução;} while(condição);
<?php
$x = 0;
do{
echo $x++;
}while ($x <8);
?>
for – A estrutura for é uma das estruturas de repetição mais conhecidas,

sua sintaxe é bem diferente(for(início; condição; incremento){… instrução
}), nela definimos 3 instruções internas separadas por ponto e vírgula.
Primeiro definimos um contador, segundo uma expressão de verificação
e por último uma instrução de modificação do contador.
<?php
for($i = 1; $i <= 100; $i++) {
echo $i."<br>";
}
?>
foreach – A estrutura foreach é uma estrutura de repetição simplificada,

mas que as vezes acaba gerando confusão em quem está iniciando, está
estrutura é otimizada para iterar(navegar) pelos itens de um array, mas
não se limita somente a array, pode ser utilizada com dois ou três
parâmetros. foreach (array_expression as $value).
<?php
$var = array('foo', 'tb', 'all');
foreach($var as $value) {
echo $value;
}
?>
break – O comando break termina a execução de uma estrutura de
repetição ou switch.
continue – O comando continue é utilizado em estruturas de repetição

para pular o restante de instruções de um bloco de código em execução,
indo para próxima iteração.
106
6.3.2. Funções em PHP
As funções em PHP, assim como, outras linguagens de programação temo

mesmo princípio: function(parâmetros){ instrução; }
Em PHP, não é preciso declarar os tipos de variáveis. Uma função é um

trecho de código que recebe valores de entrada, processa e retorna-os.
As funções no PHP não diferem muito das outras linguagens. Algumas

características das funções:
▪ Devem ser declaradas antes de serem usadas.

▪ Podem receber parâmetros por valor ou por referência.
▪ Podem ter quantidade variável de parâmetros (Apenas a partir
da versão 4).
▪ Os parâmetros podem ser declarados com um valor default.
▪ Uma vez definida, uma função não poderá ser "redefinida".
Alguns exemplos de funções:
function valor_liquido($valor_bruto, $desconto = 10) {
return ($valor_bruto - ($valor_bruto * $desconto/100)); }
6.3.3. Array (Vetores)
PHP suporta arrays simples e múltiplas dimensões (também chamadas de

matrizes). Usa-se uma variável simples indexada para denotar um array.
Esta indexação pode ser feita por números ou mesmo por strings usando
colchetes: array[índice] = {elemento};
$a[1] = “abc”; $a[1] = “def”; $b[“a”] = 15;
Para se adicionar valores no final do array você pode simplesmente usar

esta sintaxe: $c[] = “abc”; // $c[0] == “abc” $c[] = “def”; // $c[1] ==
“def”
Existem funções já implementadas de ordenamento de vetores, tais como:

sort() $fruits = array ("lemon", "orange", "banana", "apple"); sort
($fruits);
107
Os arrays multidimensionais são usados quase que da mesma forma que os

arrays simples: $a[1][2] = $f; $b[1][“bola”] = $f // Você pode
misturar índices $b[“bar”][5][“mesa”][2] = $f; //array de 4 dimensões
Em PHP3 temos um problema de referenciar arrays multidimencionais
dentro de strings.
O exemplo a seguir não funciona: $a[1][5] = $f; echo “Isto não vai
funcionar: $a[1][5]”;
Mas você pode fazer isso usando a concatenação: echo “Agora funciona:
“ . $a[1][5];
6.3.4. Classes
Como não poderia deixar de ter, PHP também possui suporte a criação
de classes e objetos de forma simples. A definição de uma classe começa
com a palavra chave class, seguida do nome da classe, seguido de um
par de colchetes que englobam as definições de propriedades e métodos
pertencentes à classe. O nome de uma classe tem de ser válido, que não
seja uma palavra reservada do PHP. Um nome de classe válido começa
com uma letra ou sublinhado, seguido de qualquer sequência de letras,
números e sublinhados. Como uma expressão regular, pode ser
expressada assim: ^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$.
Uma classe pode conter suas próprias constantes, variáveis (chamadas

de "propriedades") e funções (chamadas de "métodos").
Exemplo de uso de classe:
<?php
class A
{
function foo()
{
if (isset($this)) {
echo '$this está definida (';
echo get_class($this);
echo ")\n";
} else {
echo "\$this não está definida.\n";
}
}
}
class B
{
108
function bar()
{
// Nota: a próxima linha pode lançar um warning
E_STRICT.
A::foo();
}
}
$a = new A();
$a->foo();
A::foo();
$b = new B();
$b->bar();
B::bar();
?>
Sumário
Nesta Unidade temática 6.3 aboradmos sobre as estruturas de controle,

que são responsáveis pelo fluxo de seus scripts, assim como usos de
funções, classes e arreys em paginas PHP e como esses são tratadas ao
nível do PHP, sendo que a linguagem possui uma série dessas estruturas,
o que possibilita utilizar cada uma da forma que achar mais adequada
para o que se quer fazer.
Perguntas
1. Qual é a maneira correta de criar uma função no PHP?
a) criar myFunction ()
b) function myFunction ()
c) new_function myFunction ()
d) function myFunction []
2. Como você cria um array em PHP?
a) $ cars = "Volvo", "BMW", "Toyota";
b) $ cars = array ["Volvo", "BMW", "Toyota"];
c) $ cars = array ("Volvo", "BMW", "Toyota");
d) $_cars = array {"Volvo", "BMW", "Toyota"};
3. Atribua essas palavras em votor: Futebol, Golfe, Voleibol,
Natação com o nome de array:
4. Para que serve a $a = new A();?
109
5. Mencione as características básicas duma função?
Respostas: 1 pagina B, 2C, 3 pagina 106, 4 pagina 107, 5 pagina 106.
Perguntas
6. Mostre como os comandos if e while interpretam
expressões condicionais de diferentes tipos de dados.
7. Escreva um algorítmo “Adivinha o número”. O utilizador
insere um número:
a) Se o número escolhido for igual ao número aleatório
escreva “Acertou!”
b) Se o número é maior que o número aleatório, escreva
“É maior”
c) Se não escreva “É menor”.
8. Crie um algoritmo utilizando o comando de repetição
para adicionar números inteiros entre 0 a 100 e exiba
o total da soma.
9. Crie uma função para calcular o fatorial de um número
inteiro não negativo. A função recebe o número como
um argumento.
10. Crie uma função que verifica se uma cadeia de
carateres estão em minúscula.
11. Escreva um algoritmo que insere um item em qualquer
posição de um vetor.
110
UNIDADE Temática 6.4. Manipular dados na base de dados com PHP.
Introdução
Nesta unidade temática iremos criar o primeiro exemplo para

manipulação de dados com PHP. Abordaremos as seguintes queries SQL:
inserir (insert), selecionar (select), eliminar (delete) e atualizar (update)
dados numa tabela MySQL utilizando PHP.
▪ Identificar as expressões PHP;

▪ Conhecer diferente tipos de estrutura de controle;
Objectivos ▪ Manipular essas estruturas;
específicos
6.4.1. Configurando o Banco de Dado.
Em relação a manipulação de um banco de dados MySQL com PHP,

precisamos entender que o PHP não é o único responsável pelas ações
em relação ao seu banco de dados. Tudo que o PHP faz é enviar uma
string de consulta ao banco de dados e o banco de dados que executa
a consulta.
Vamos criar uma simples base de dados e tabelas com Mysql console.
Base de dados é um conjunto de informações/dados organizados de
forma a facilitar a manipulação dos dados. Nesta etapa, criaremos a
base de dados com a ferramenta da MySQL, que é fácil e intuitiva.
O nome da base de dado será: db_registo usando o comando
mysql> create database db_registo

Em seguida vamos adicionar tabela pessoa na base de dado, para isto
temos que selecionar a base de dado que iremos manipular com o
comando mysql>use database db_registo;
Em seguida vamos correr o comando para criar tabela na base de dado:
111
mysql> CREATE TABLE IF NOT EXISTS pessoa ( id int(11) NOT

NULL AUTO_INCREMENT, nome varchar(255) NOT NULL,sexo
varchar(255), morada varchar(255), email varchar(255),
PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=1 ;
ou ainda poderá criar a tabela no phpMyadmin de forma fácil:
A manipulação de dados é efetuada através da função mysql_query ().

Esta função permite efetuar consultas (queries) em uma base de dados.
6.4.2. Conexão ao banco de dado
As consultas são escritas com a linguagem SQL (Strutured Query

Language). SQL é a linguagem de pesquisa declarativa padrão para
uma base de dados relacional. Crie um ficheiro na mesma pasta com o
nome conexao.php
<?php
class Conexao {
function conecta()
{
$servidor = 'localhost';
$banco = 'bd_registo';
$usuario = 'root';
$senha = '';
$link = mysqli_connect($servidor, $usuario, $senha);
$db = mysqli_select_db($link, $banco);
if(!$link)
{
echo "Ocorreu um erro na conexão com o banco de
dados";
exit();
}
return $link;
}
}
?>
O parâmetro servidor indica o local onde se encontra a base de dados,

e os parâmetros utilizador e senha que dão acesso à base de dados.
112
Em seguida, é utlizada a função mysqli_select_db(), para selecionar a

base de dados (entidade). E nas páginas php iremos simplesmente incluir
a pagina conexao.php para que não possamos sempre chamar o banco
de dado nas consultas.
6.4.3. Formulário POST
Em seguida criau-se pagina índex.html com o método post para a inserção

dos dados na tabela pessoa.
<html>
<head></head>
<body>
<h1>Inserir dados:</h1>
<form method="post" action="inserir.php">
<pre>
Nome: <input type="text" name="nome"/> <br/>
Sexo: <input type="text" name="sexo"/> <br/>
Morada: <input type="text" name="morada"/> <br/>
Email: <input type="text" name="email"/> <br/>
Telefone:<input type="text" name="telefone"/> <br/>
<input type="submit" name="submit" value
="Inserir"/><br/>
</pre>
</form>
</body>
</html>
Para definir o método de acesso aos formulários são utilizados dois tipos
de métodos. O método GET em que os dados são enviados juntamente
com o nome da página para o envio de dados. Exemplo:
http://localhost/meuprograma/atualizar.php?id=3? - significa o início
da cadeia de variáveis = - separa as variáveis dos seus valores
O método POST envia os dados por meio da mensagem enviada ao

servidor. Exemplo: http://localhost/meuprograma/atualizar.php
6.4.4. Página de inserção de dado na base de dado
Inserir dados na tabela pessoa com o PHP, para isso foi criado uma
página inserir.php:
<?php
//Conectar a base de dados
include('conexao.php');
$objetoConexao= new Conexao();
$con=$objetoConexao->conecta();
$nome = $_POST["nome"];
113
$sexo = $_POST["sexo"];
$morada = $_POST["morada"];
$email= $_POST["email"];
$telefone = $_POST["telefone"];
//Inserir dados
$dados = "INSERT INTO pessoa (nome, sexo, morada, email,
telefone) VALUES ('".$nome."', '".$sexo."',
'".$morada."', '".$email."', '".$telefone."')";
echo $dados;
$resultado = mysqli_query($con, $dados);
if($resultado){
echo("<br>Os dados foram inseridos com sucesso!");
}else{
echo ("<br> Os dados não foram inseridos!");
}
?>
6.4.5. Tratamentos de resultado de consulta utilizando a query

SELECT
Ao executar uma consulta SQL, através do comando mysqli_query, o identificador do

resultado deve ser armazenado numa variável que pode ser de diversas formas para
apresentação de resultados. Na atividade que se segue, utilizaremos o comando
mysqli_fetch_ row. Crie um ficheiro selecionar.php dentro do diretório.
<?php
//Consulta
$consulta = "SELECT * FROM pessoa ORDER BY id";
$resultado = mysqli_query($con, $consulta);
$idContagem=1;
//Apresentar a consulta numa tabela
echo ("<h1>". "Resultado da consulta: " . "</h1>");
echo ("<table border=3>");
echo ("<tr><td>ID</td><td>NOME</td><td>SEXO</
td><td>MORADA</td><td>EMAIL</td> <td>TELEFONE</td>
<td>Ações</td></tr>");
while($linhas = mysqli_fetch_array($resultado)){
echo "<tr>";
echo "<td>".$idContagem."</td>";
echo "<td>".$linhas['nome']."</td>";
echo "<td>".$linhas['sexo']."</td>";
echo "<td>".$linhas['morada']."</td>";
echo "<td>".$linhas['email']."</td>";
echo "<td>".$linhas['telefone']."</td>";
/* Foi adicionado dois botões com o nome editar e
apagar e criadas duas páginas
php editar.php e apagado.php para usar-mos
posteriormente*/
echo "<td> <a
href='editar.php?&id=".$linhas['id']."&email=".$linhas['e
mail']."'><input type='button' value='editar' ></a> |
114
<a
href='apagado.php?&id=".$linhas['id']."&email=".$linhas['
email']."'><input type='button' value='Apagar' > </a>
</td>";
echo "</tr>";
$idContagem++;
//echo
("<tr><td>".$linhas[0]."</td><td>".$linhas[1]."</td><td>"
.$linhas[2]."</td><td>".$linhas[3]."</td>
<td>".$linhas[4]."</td><td>".$linhas[5]."</td></tr>");
}
echo ("</table>");
?>
?>
Nota-se, a utilização da função mysqli_fetch_row($resultado), que retorna o número de

linhas de um resultado e mysqli_fetch_array($resultado) retorna o vector, por esta razão
foi usada o array. O $idContagem foi usado para numerar em ordem.
Devemos que criar as paginas editar.php e apagar.php para que

possamos usar em seguida.
6.4.6. Código para eliminar os dados na tabela cadastro:
A declaração DELETE é exatamente como SELECT, e nós verificaremos o

superglobal $ _GET novamente. Se o id apropriado é carregado na URL,
o PHP irá deletar aquele usuário.
<?php
$idpessoa = $_GET["id"];
$apagar = "DELETE FROM pessoa WHERE id='$idpessoa'";

$querpess=mysqli_query($con, $apagar);
// codigo javascript que gera aviso ao apagar e retorna a

pagina inicial
{
echo"<script
language='javascript'
type='text/javascript'>alert('Apagado com
sucesso!');window.location.href='selecionar.php'</script>
";
}
?>
115
Como explicado anteriormente, apagar o dado é muito fácil, so temos

que certificar se o ID é carregado na url via $_GET em em seguida
atribuirmos a uma nova variável local definida, e apartir do id
apagarmos o que realmente queremos.
Note que Geralmente, em um aplicativo real, os dados não serão

excluídos permanentemente do banco de dados. Os usuários podem ter
uma tabela booleana que os defina como usuários "ativos" ou "inativos",
em vez de realmente excluir os dados. No entanto, é importante saber
DELETE, e ele pode ser usado junto com SELECT para excluir do que inserir
novos dados em vez de atualizá-lo com UPDATE.
6.4.7. Código atualizar os dados na tabela cadastro:
Editar uma entrada de banco de dados existente é o mais complicado dos

quatro aspectos do CRUD, e é particularmente difícil encontrar um tutorial
moderno e coeso sobre como fazer isso com HTML e PHP!
Primeiro, queremos exibir os dados que vamos editar e, em seguida,

precisamos adicionar funções para modificá-los.
Em editar.php, criamos links de edição que detectam o id dos usuários e

criam um URL exclusivo para cada usuário. Em editado.php, temos que
descobrir qual id está sendo carregado, porque todas as páginas de
edição serão carregadas e serão roteadas por meio dessa única página.
Assim como usamos o superglobal $ _POST para detectar quais dados

foram postados em um formulário HTML, usaremos $ _GET para
recuperar informações do URL. É importante observar que dados
confidenciais, como senhas, nunca devem ser passados pela variável $
_GET; no entanto, para nossos simples propósitos hoje, tudo vai bem.
Vamos criar editar.php, carregar nos arquivos necessários. Verificamos

se o ID foi encontrado no URL, como já havíamos falado, que o botao
editar no ficheiro selecionar.php acima, ira carregar o id e email via URL
ou método $_GET. Caso contrário, exibiremos apenas uma breve
mensagem de erro e fecharemos o script.
<?php
116

if (isset($_GET['id'])) {
// echo $_GET['id']; // for testing purposes
$idpessoa=$_GET['id'];
$edit = "SELECT * FROM pessoa where id='$idpessoa'";
//echo $edit;
$resultadoedit = mysqli_query($con, $edit);
$linhas = mysqli_fetch_array($resultadoedit);
$ID=$linhas['id'];
$Nome= $linhas['nome'];
$Sexo=$linhas['sexo'];
$Morada=$linhas['morada'];
$Email=$linhas['email'];
$Telefone=$linhas['telefone'];
} else {
echo "Something went wrong!";
exit;
}
?>
<h1>Actualizando dados:</h1>
<form method="post" action="editado.php">
<pre>
ID: <input type="text" name="id" value="<?php echo $ID;
?>" readonly/> <br/>
Nome: <input type="text" name="nome" value="<?php echo
$Nome; ?>"/> <br/>
Sexo: <input type="text" name="sexo" value="<?php echo
$Sexo; ?>"/> <br/>
Morada: <input type="text" name="morada" value="<?php
echo $Morada; ?>"/> <br/>
Email: <input type="text" name="email" value="<?php echo
$Email; ?> "/> <br/>
Telefone:<input type="text" name="telefone" value="<?php
echo $Telefone; ?>"/> <br/>
<input type="submit" name="submit" value
="Actualizar"/><br/>
</pre>
</form>
Desta forma, podemos certificar que os dados carregos, podemos editar

sem quaisquer problemas.
Para a consulta $edit tivemos que usar o id que buscamos do metodo

$_GET.
Para facilitarmos o processo, criamos outras variáveis que iram guardar

os dados da nossa consulta para que seja exibido no nosso formulário
de edição.
117
A única página de edição agora tem campos editáveis para cada valor.
No entanto, nosso código neste momento é apenas para exibir os dados,
precisamos criar outra pagina php para processar o código depois que o
botão de envio for pressionado.
Temos em editar.php, <form method="post" action="editado.php">,

isso indica que se precionarmos em botao actualir ira enviar via $_POST
para pagina editado.php, certifique que a pagina.
Queremos usar a cláusula UPDATE para SET cada valor para o novo
valor. O código literal do nosso caso é assim:
<?php /
$atualizar = “UPDATE pessoa SET nome=’$nome’,
sexo=’$sexo’, morada=’$morada’, email=’$email’,
telefone=’$telefone’ WHERE id=’ $id’”;
?>
Aqui está a totalidade do arquivo que acabamos de criar.
Devemos incluir o código abaixo no ficheiro editado.php para actualizar

no banco de dado.
<?php
$idpessoa = $_POST["id"];
$nome = $_POST["nome"];
$sexo = $_POST["sexo"];
$morada = $_POST["morada"];
$email= $_POST["email"];
$telefone = $_POST["telefone"];
echo $idpessoa;
echo $nome;
$atualizar = "UPDATE pessoa SET nome='$nome',
sexo='$sexo', morada='$morada', email='$email',
telefone='$telefone' WHERE id='$idpessoa'";
$querpess=mysqli_query($con, $atualizar);
{
echo"<script
language='javascript'
type='text/javascript'>alert('Alterado com
sucesso!');window.location.href='selecionar.php'</script>
";
}
?>
118
Deste modo, podemos ter a certeza de que os dados daquela pessoa foi
alterado com sucesso, caso contrário, não apresentara o alerta em
javascript que foi colocado na página.
Sumário
Nesta Unidade temática 1.1 aprendemos a conectar-se a um banco de

dados MySQL com PHP usando o método moderno. Conseguimos isso
desenvolvendo a primeira metade de um aplicativo CRUD muito simples.
CRUD significa Criar, Ler, Atualizar, Excluir e é uma maneira comum de
armazenar, visualizar e modificar dados. Deste modo pudemos aprender
como manipular dados com PHP e MySQL, crie uma página que liste
todos os usuários com um botão de edição e apagar ao lado assim como
criar dinamicamente uma página exclusiva para editar os dados de
qualquer usuário.
Perguntas
12. Todas as variáveis no PHP começam com qual símbolo?
13. Quais os métodos conhecidos para enviar dados de um
formulário?
14. Como você obtém informações de um formulário que é
enviado usando o método "get"?
15. Ao usar o método POST, as variáveis são exibidas no
URL:
a) Verdade
b) Falso
16. Qual é o comando utilizado para mostrar as
informações disponíveis numa base de dados?
1. Escreva um script de instalação para inicializar

um novo banco de dados MySQL.
2. Conecte-se a um banco de dados MySQL com
PHP usando o método PDO (PHP Data
Objects).
119
3.
4. Crie uma aplicação com o nome do banco de
dado biblioteca e tabelas livros, autor, é
sabido que a chave primaria de livro tem que
estar na tabela autor como estrangera,
adicione os campos necessário na tabela:
5. Faça CRUD com esta tabela, onde read deve
aparecer o livro e o autor na mesma linha.
6. Criar - Adicione novas entradas a um banco de
dados através de um formulário HTML com
PHP em múltiplas tabelas.
7. Ler - Visualize todas as entradas em um banco
de dados e imprima-as em um documento
HTML de várias tabelas relacionado.
8. Remover permanentemente as entradas
existentes (excluir).
120
TEMA – VII: Hospedagem de sites na Web.
UNIDADE Temática 7.1. Hospedagem de sites na Web
UNIDADE Temática 7.1. Hospedagem de sites na Web
Introdução
Nesta unidade temática iremos abordar aspectos ligados a hospedagem

web para que o seu site seja acessível em qualquer parte do mundo deve ser
alojado em um servidor remoto Web com um endereço IP (Internet
Protocolo) único, assim como ajudá-lo a entender nomes de domínio,
princípios de hospedagem Web e implementação de aplicações em um
servidor de hospedagem Web.
▪ Descrever o funcionamento da Internet;

▪ Compreender o funcionamento entre um navegador Web e um Servidor de
hospedagem Web;
Objectivos ▪ Indicar a relação domínio e hospedagem
específicos
7.1.1. Consideracoes iniciais
Hospedagem de site: Serviço que possibilita a pessoas ou empresas com

sistemas online guardar informações, imagens, vídeo, ou qualquer
conteúdo acessível por Web.
DNS: Domain Name Server é um sistema de gestão de nomes hierárquico

e distribuído para computadores, serviços ou qualquer recurso conectado
à Internet ou em uma rede privada.
7.1.2. Nomes de domínio
Para aceder o site do ISCED é preciso digitar o endereço

www.isced.ac.mz sem ter que identificar o endereço IP do servidor onde
o site se encontra hospedado.
121
Nesse contexto, o nome de domínio é o endereço www.isced.ac.mz

utilizado como o nome que faz referência ao site da ISCED.
Ter um nome de domínio para seu site ou aplicação oferece uma série de
vantagens:
Um site pode trocar de servidor de hospedagem sem mudar o nome de

domínio. Isto pode acontecer sem que o visitante perceba. O que muda
é o endereço IP para qual o nome de domínio se refere. Google, por
exemplo, muda muitas vezes seus servidores sem que os utilizadores
percebem.
Para uma empresa, um nome de domínio aumenta a credibilidade. Hoje

em dia, se alguém precisa de informação, geralmente vai buscar em seu
site.
Um nome de domínio relevante permite que as pessoas se lembrem mais

facilmente o endereço de um website. Por exemplo uva.org é muito fácil
de lembrar.
Nesta parte, vamos ver as etapas para a aquisição e aplicação de um

nome de domínio.
Estrutura de um nome de domínio
Especificamente, um nome de domínio é composto por um conjunto de

etiquetas (palavraschave) separados por pontos (.). Como exemplo,
www.isced.ac.mz A estrutura geral do nome de domínio é a seguinte:
SubDomínio.Domínio.Domínio_nivel_superior EX: www.isced.ac.mz
O domínio de topo (Top Level Domain em Inglês ou TLD) é uma extensão que
permite nomes de domínio de grupos por país ou uso. É o rótulo maisà
direita do nome de domínio.
Existem duas categorias de TLDs: código genérico e do país.
Um TLD genérico (em Inglês, generic Top-Level Domain ou gTLD) é um

domínio de nível superior destinado a hospedar subdomínios com uma
outra característica comum do que geográfica. Por exemplo, o
122
domínio.com é destinado a hospedar tipo de subdomínios comercial.
Em um nome de domínio, o domínio de nível superior é a última etiqueta

de um nome de domínio (Exemplo: pt.wikipedia.org, o domínio de nível
superior é .org).
Domínio de nível superior Descrição

genérico
.com Comercial
.org Organização
.net Para redes
.info Para serviços de
informações
.biz Negócio
.pro Para sites profissionais
Qualificados
Um domínio de nível superior com base em códigos ISO permite associar

um Web site a um país. É utilizado para dar impressão de proximidade
em relação a um país. CcTLDs (country code Top Level Domain) são TLDs
em que as duas letras referem-se especificamente a uma parte (local) de
um país em particular, um estado soberano ou território autônomo para
uso em serviço à sua comunidade.
Country Code Top Países

level domain
(https://pt.wikiped
ia.org/wiki/.mz)
.mz Moçambique
.pt Portugual
.za Africa de Sul
.ao Angola
.cm Rep. Camarões
.sn Senegal
A extensão do domínio.mz a ccTDL corresponde a Mocambique. Todos
esses TDLs são reservados e geridos pela ICANN, que é um órgão da
123
ONU (Organizações das Nações Unidas).As áreas representam parte

reservada pelas empresas e indivíduos sobre o nome de domínio.
Reservar um nome de domínio é escolher um nome de domínio e extensão
TLD. O domínio africa.com, o nome de domínio é a africa e o TLD é .com.
Um subdomínio é tipicamente um nome atribuído a um servidor que

executa o esquema de nomeação
SubDomínio.Domínio.Domínio_nivel_superior Provavelmente o subdomínio
mais conhecido e o mais utilizado é o “www”. É uma convenção chamada
servidores Web em um domínio com o nome www. No entanto, não é
obrigatório, por exemplo, o nome da página Wikipédia em português é
pt.wikipedia.org que não contém WWW.
Comprar um nome de domínio
Para adquirir e utilizar um nome de domínio é necessário efetuar a

compra. A organização responsável pela compra de nome de domínio é
ICANN (o regulador de nomes de domínio).
No entanto, é raro comprar o nome de domínio diretamente com a

ICANN. No caso de Mocambique todo o domínio é gerenciada pela
CIUEM ( Centro de Informatica da Universidade Eduardo Mondlane) para
registo de nome de domínio com extensão .mz. Cada servidor de
hospedagem e registo de domínio tem os seus próprios preços, e variam
por ano. Exemplos:
https://www.registar.co.mz/
https://www.mozdomains.com/mz
https://www.iberweb.co.mz
https://www.mozweb.co.mz/
e outros
7.3. Hospedagem de Sites na Web
Para disponibilizar um site na Web, deverá ser armazenado em um

computador com um servidor Web e um endereço IP público. É muito caro
comprar e alugar um servidor Web e um IP público para cada indivíduo.
124
O princípio de alojamento é comprar um espaço em um servidor que é

gerido e mantido por uma empresa especializada: provedor de
hospedagem Web. Estes provedores possuem Datacenters que lhes
permitem armazenar milhares de websites.
Hospedagem Web é um serviço que reserva um espaço, em disco, onde os ficheiros do

site são armazenados.
O mercado de hospedagem é muito competitivo, os provedores de

hospedagem normalmente oferecem outros serviços além de armazenar
arquivos do site, tais como o serviço de proteção (firewall), assistência
técnica, serviços de correio, acesso FTP, ferramentas para
desenvolvimento de sites e muito mais. Em uma frase: Hospedagem Web
é um espaço onde os indivíduos ou organizações armazenam os seus sites.
7.1.3.1. Tipos de Serviços de Hospedagem
De acordo com os recursos alocados pelo anfitrião, existem vários tipos

de hospedagem: hospedagem compartilhada, servidor privado virtual
(VPS), o servidor dedicado, hospedagem em cloud e hospedagem grátis.
7.1.3.1.1. Hospedagem compartilhada
No caso de hospedagem compartilhada, vários sites são colocados no

mesmo servidor físico (em um diretório diferente). Este tipo de
hospedagem é adequado para sites que não geram muito tráfego e não
utilizam recursos intensivo e este garante melhor custo-benefício. A
principal desvantagem é que o desempenho do site pode ser afetada
por outros locais no mesmo servidor. Em seguida, a mudança de ambiente
é sempre mais complicada.
Exemplo de anfitriões web que oferecem serviços de hospedagem compartilhada:
▪ Dreamhost
▪ Host Gator
▪ 1&1
▪ http://www.justhost.com
▪ http://www.bluehost.com
▪ http://www.inmotion.com
▪ http://www.powweb.com
▪ http://www.hostmonster.com
125
Figura 12: Servidor Compartilhado
7.1.3.1.2. Privada virtual (Virtual Private Server)
Atribuí a cada site hospedado uma máquina virtual que é totalmente dedicada à
aplicação. O webmaster tem acesso ao root (administrador) com privilégios para
personalizar o servidor virtual. É indicado para aplicações que precisam acesso total ao
sistema operativo mas que não precisam de muita capacidade de processamento.
Figura 13: Servidor VPN
Sumário
Nesta Unidade temática 7.1 aprendemos a identificar hospedagem web

para que que o site seja acessível em qualquer parte do mundo e como
este funciona com um endereço IP (Internet Protocolo) único, assim como
ajudá-lo a entender nomes de domínio,
126
princípios de hospedagem Web e implementação de aplicações em um

servidor de hospedagem Web.
Perguntas
1. Quais são os passos necessários para disponibilizar uma
aplicação na Web?
2. Cite no mínimo três tipos de recursos para o plano de
hospedagem?
3. Qual é o protocolo utilizado para transferência de ficheiros?
4. Selecione o protocolo utilizado para o envio de correio
eletrónico:
a) HTTP
b) SMP
c) FTP
5. Qual é a diferença entre um servidor DNS e um servidor de
email?
127
Bibliografia
▪ ADFAHRER, Luli. Design/Web/Design:2

▪ BRIDGEWATER, Peter. Introdução ao Design Gráfico. São Paulo:
Estampa, 1999.
▪ DAMASCENO, Anielle. Webdesign: teoria e prática.
Florianópolis: Visual Books, 2003.
▪ DONDIS, Donis A.. Sintaxe da linguagem visual. São Paulo:
Martins Fontes: 1997.
▪ PRATES, Rubens. HTML – Guia de consulta rápida. São Paulo,
1999, Ed. Novatec.
▪ PROFFITT, Brian e Zupan, Ann. XHTM – Desenvolvimento Web.
Makron Books, São Paulo, 2001.
▪ TITTEL, Ed et al. HTML 4 para Dummies. Rio de Janeiro, 1998. Ed.
Campus Ltda.
▪ WILLIAMS, Robin; TOLLET, John. Webdesin para não designers: Um
guia rojectar para você criar, rojectar e publicar o seu site na web.
Rio de Janeiro: Editora Ciência Moderna, 2001.
▪ WONG, Wucius. Princípios de forma e desenho. São Paulo:
Martins Fontes, 1998.
▪ http://www.w3resource.com/php-exercises/php-basic-
exercises.php
▪ http://www.tutorialspoint.com/php/php_arrays.htm
▪ https://php.net/manual/pt_BR/language.variables.scope.php
▪ http://www.w3schools.com/php/php_variables.asp
▪ https://www.caelum.com.br/curso-php-mysql/
▪ http://www.htmlprogressivo.net/p/curso-de-html5-online-
completo-e-gratis.html
▪ http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-
xhtml-w3cbr.pdf
▪ http://www.htmlprogressivo.net/p/curso-de-css-cs-cascading-
style-sheets. html
▪ http://pt-br.html.net/tutorials/
128

Modulo de Programacao Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Modulo de Programacao Web

Enviado por

Direitos autorais:

Formatos disponíveis

UnISCED CURSO: Gestão de Sistemas de Informação; 20 Ano Disciplina/Módulo: Programação e Web Design

MANUAL DO CURSO DE LICENCIATURA EM

ENSINO ONLINE. ENSINO COM FUTURO 2022

2º ANO : Programação e Web Design

Direitos de autor (copyright)

Este manual é propriedade da Universidade Aberta ISCED (UnISCED),e contém reservados

A não observância do acima estipulado o infractor é passível a aplicação de processos judiciaisem

Universidade Aberta ISCED (UnISCED)

Autor Osvaldo Pedro Simone - Licenciado em Engenharia informática e

Vice- Reitoria Académica do UnISCED

Design Universidade Aberta ISCED

Instituto Africano de Promoção da Educação a Distancia (IAPED)

Revisão Científica e XXXXX

Ano de Publicação 2018

Local de Publicação UnISCED – BEIRA

TEMA – I: INTRODUÇÃO A INFORMATICA. 9

TEMA – II: LINGUAGEM HTML – CONCEITOS BÁSICOS. 21

TEMA – III: TABULAÇÃO E FORMULÁRIOS DE DADOS EM HTML. 39

TEMA – IV: FOLHAS DE ESTÍLO – CSS STYLE SHEET. 53

TEMA – VI: PHP. 94

Benvindo à Disciplina/Módulo de Gestão de Sistemas

Ao terminar o estudo deste módulo de Programação e Web Design

▪ Entender diferença estre Web e Internet;

▪ Perceber princípios de funcionamento da internet;

▪ Desenvolver paginas HTML usando CSS com animações em

▪ Entender funcionamento da Web;

▪ Saber desenvolver aplicações web usando PHP;

▪ Saber diferenciar tipos de servidores.

Quem deveria estudar este módulo

Como está estruturado este módulo

Este módulo de Programação e Web Design, para estudantes do 2º

A equipa dos académicos e pedagogos do ISCED, pensando em si,

Auto-avaliação e Tarefas de avaliação

Tarefas de auto-avaliação para este módulo encontram-se no final

Use este espaço para dar sugestões valiosas, sobre determinados

O principal objectivo deste campo é o de ensinar aprender a

Durante a formação e desenvolvimento de competências, para

1º Praticar a leitura. Aprender a Distância exige alto domínio de

2º Fazer leitura diagonal aos conteúdos (leitura corrida).

3º Voltar a fazer leitura, desta vez para a compreensão e

4º Fazer seminário (debate em grupos), para comprovar se a sua

5º Fazer TC (Trabalho de Campo), algumas actividades práticas ou

IMPORTANTE: Em observância ao triângulo modo-espaço-tempo,

Privilegia-se saber bem (com profundidade) o pouco que puder ler e

Dica importante: não recomendamos estudar seguidamente por

intervalo não se continuar a tratar dos mesmos assuntos das

Uma longa exposição aos estudos ou ao trabalho intelectual

Não estude na última da hora; quando se trate de fazer alguma

Organize na sua agenda um horário onde define a que horas e que

É importante identificar as ideias principais de um texto, pois será

apoio ao estudante do seu Centro de Recursos (CR), via telefone, sms, E-

Tarefas (avaliação e auto-avaliação)

1 Plágio - copiar ou assinar parcial ou totalmente uma obra literária, propriedade

Muitos perguntam: Com é possível avaliar estudantes à distância,

TEMA – I: INTRODUÇÃO A INFORMATICA.

UNIDADE Temática 1.1. Fundamento da internet

UNIDADE Temática 1.1. Fundamento da internet.

Esta unidade temática tem como objectivo dar a conhecer todos os

Ao completar esta unidade, você deverá ser capaz de:

▪ Definir os conceitos básicos da Internet;

Objectivos ▪ Saber de onde surgiu a Internet;

A Internet é um conjunto de redes que permite a interconexão dispersa

uma delas, a comunicação estabelecer-se-ia automaticamente, através

Figura 1:Mapa logico da rede ARPANet.

... (por exemplo: 175.121.12.1).