Manual de Fundamento de HTML

Manual do Curso de Licenciatura Em Gestão de Sistemas de
Informação
Fundamentos de HTML
ENSINO ONLINE. ENSINO COM FUTURO 2022

2º ANO : Fundamento de HTML
CÓDIGO ISCED1-GSI30A
GSITOTAL 140
HORAS/ 1
SEMESTRE
CRÉDITOS (SNATCA) 6
NÚMERO DE TEMAS 4
Unisced CURSO: GESTÃO DE SISTEMAS DE INFORMAÇÃO; 20 Disciplina/Módulo: Fundamentos de HTML
Ano
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 processosjudiciais
em 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
Ano
Agradecimentos
A Universidade Aberta Isced (UNISCED) agradece a colaboração dosseguintes indivíduos e

instituições na elaboração deste manual:
Autor Calado Pereira Fijamo
Coordenação Vice -Reitoria Académica da UNISCED

Universidade Aberta Isced (UNISCED)
Design
Instituto Africano de Promoção da Educação a Distância
Financiamento e Logística
(IAPED)
Revisão Científica e
XXXXX
Linguística
Ano de Publicação
Local de Publicação 2018
UNISCED – BEIRA
iv
Ano
Índice
Visão geral de Fundamentos de HTML 7

Benvindo à Disciplina/Módulo de Fundamentos de HTML .............................................. 7
Objectivos do Módulo....................................................................................................... 7
Quem deveria estudar este módulo ................................................................................. 8
Como está estruturado este módulo ................................................................................ 8
Ícones de actividade ......................................................................................................... 9
Habilidades de estudo .................................................................................................... 10
Precisa de apoio? ............................................................................................................ 11
Tarefas (avaliação e auto-avaliação)............................................................................... 12
Avaliação ......................................................................................................................... 12
Tema – I: FUNDAMENTOS BÁSICOS DE HTML. 14
UNIDADE 1 – INTRODUÇÃO AOS FUNDAMENTOS BÁSICOS DE HTML 14

UNIDADE 1.1. Introdução, Estrutura, Objectivos, Internet, World Wide Web (www),
Serviços e Planeamento de Projectos. ............................................................................ 14
Introdução....................................................................................................................... 14
Estrutura da Unidade ...................................................................................................... 14
Internet ........................................................................................................................... 15
World Wide Web ............................................................................................................ 15
Serviços da Internet ........................................................................................................ 16
Planeamento de um Projecto Web................................................................................. 17
Exercícios de auto-avaliação da Unidade 1.1 ................................................................. 20
UNIDADE 1.2. Formas de Organização e Estrutura Básica de HTML. 21

Formas de Organização de um documento html ........................................................... 21
Estrutura Básica de HTML ............................................................................................... 22
UNIDADE 1.3. Formatação de Textos e linhas em HTML................................................ 28
Comandos, Elementos e Atributos usados na Formatação com HTML .......................... 28
UNIDADE 1.4. Sumário da unidade Exercícios de Auto-Avaliação.................................. 42
Sumário ........................................................................................................................... 42
Exercícios de Auto-Avaliação do Tema I ......................................................................... 42
Exercícios de Avaliação da Unidade I .............................................................................. 43
Referências 44
TEMA – II: DESENVOLVIMENTO DE PÁGINAS HTML COM ESTILOS DE CSS. 45
v
Ano
UNIDADE 2 – DESENVOLVIMENTO DE PÁGINAS HTML COM CSS 45

UNIDADE 2.1. Introdução, Estrutura, Objectivos e Formatação de Documentos. ......... 45
Introdução....................................................................................................................... 45
Estrutura da Unidade ...................................................................................................... 45
Passos básicos de um documento em HTML.................................................................. 46
UNIDADE 2.2. Listas, Imagens, Hiperlinks, Tabelas, Frames e Formulários. .................. 49
Listas ............................................................................................................................... 49
Imagens ........................................................................................................................... 55
HiperLinks ....................................................................................................................... 60
Tabelas ............................................................................................................................ 62
Frames/Moldura ............................................................................................................. 66
Formulários ..................................................................................................................... 71
Exercícios de auto-avaliação da unidade 2.2 .................................................................. 75
UNIDADE 2.3. CSS ........................................................................................................... 77
Formatação de documentos HTML com CSS. ................................................................. 80
UNIDADE 2.4. Sumário da unidade, Exercícios de Auto-Avaliação e de Avaliação ........ 87
Sumário da Unidade ....................................................................................................... 87
Exercícios de Auto-Avaliação da unidade II .................................................................... 87
Exercícios de Avaliação da unidade II ............................................................................. 89
Referências 90
TEMA – III: DESENVOLVIMENTO DE PÁGINAS DINAMICAS - HTML E JAVASCRIPT. 91
UNIDADE 3 – DESENVOLVIMENTO DE PÁGINAS DINAMICAS HTML - JAVASCRIPT 91

UNIDADE 3.1. Introdução, Estrutura da unidade, Objectivos, Desenvolvimento,
Variáveis e Operadores ................................................................................................... 91
Introdução....................................................................................................................... 91
Estrutura da unidade ...................................................................................................... 91
Desenvolvimento ............................................................................................................ 92
Comparação de Java e JavaScript ................................................................................... 93
Hierarquia de documento cliente e Document Object Model (DOM). .......................... 94
Inserição do código javascript em html. ......................................................................... 95
Variáveis e Operadores. .................................................................................................. 96
UNIDADE 3.2. Objectos, declaração de variáveis, Funções, estrutura de controlo,
Eventos e Cookies ........................................................................................................... 99
Objectos de JavaScript .................................................................................................... 99
Declaração de variável e Funções em JavaScript.......................................................... 100
Estruturas de controlo de JavaScript ............................................................................ 101
Eventos básicos em JavaScript ...................................................................................... 102
Exercícios de auto-avaliação da unidade 3.2 ................................................................ 106
vi
Ano
UNIDADE 3.3. Sumário da unidade, Exercícios de Auto-Avaliação e de Avaliação ...... 108
Sumário da Unidade ..................................................................................................... 108
Exercícios de Auto-Avaliação da unidade III ................................................................. 108
Exercícios de Avaliação da unidade III .......................................................................... 114
Referências 115
TEMA – IV: DESENVOLVIMENTO DE PÁGINAS HTML E PHP 117
UNIDADE 4 – DESENVOLVIMENTO DE PÁGINAS HTML - PHP 117

UNIDADE 4.1. Introdução, Objectivos, sintaxe básica, instalação do servidor e Primeiro
script ............................................................................................................................. 117
Introdução..................................................................................................................... 117
Internet ......................................................................................................................... 119
Sintaxe básica de php.................................................................................................... 119
Instalação de servidor apache xampp .......................................................................... 120
Primeiro script............................................................................................................... 125
UNIDADE 4.2. Variáveis, Constantes, Tipo de operadores, Estrutura de controlo,
Funções, Classes e Objectos.......................................................................................... 127
Variáveis e Costantes. ................................................................................................... 127
Tipo de operadores ....................................................................................................... 127
Estrutura de controlo .................................................................................................... 128
Arrays ou Vectores ........................................................................................................ 131
Funções em php ............................................................................................................ 131
Base de dados mysql e php........................................................................................... 134
Conectando a página com a base de dados.................................................................. 135
Manipulando dados em php ......................................................................................... 135
UNIDADE 4.3. Sumário e Exercícios de Auto-Avaliação e de avaliação da unidade IV. 142
Sumário ......................................................................................................................... 142
Exercícicios de auto-avaliação da unidade 4 ................................................................ 142
Exercícios de avaliação do módulo. .............................................................................. 145
Perguntas ...................................................................................................................... 145
Bibliografia .................................................................................................................... 150
vii
ISCED CURSO: GESTÃO DE SISTEMAS DE INFORMAÇÃO; 20 Ano Disciplina/Módulo: Fundamentos de HTML
Visão geral de Fundamentos de HTML
Benvindo à Disciplina/Módulo de Fundamentos de HTML
Esta Disciplina é constituída por quatro temas que são:

• TEMA1 – FUNDAMENTOS BÁSICOS DE HTML
• TEMA 2 – DESENVOLVIMENTO DE PÁGINAS COM HTML E CSS.
• TEMA3 – NOÇÕES DE DESENVOLVIMENTO DE PÁGINAS HTML E
JAVASCRIPT.
• TEMA4 – NOÇÕES DE DESENVOLVIMENTO DE PÁGINAS HTML
COM PHP.
Cada um destes temas contém unidades temáticas.
Objectivos do Módulo
Objectivo Geral No fim do curso o estudante deve ser capaz de:

➢ Demonstrar uma perspectiva geral sobre o funcionamento
dum sistema operativo, tipos e técnicas usadas no seu
desenho e implementação
➢ Seleccionar, instalar e configurar os sistemas de informação
segundo as necessidades de cada organização tendo em
conta as situações reais existentes;
Objectivos
Específicos
• Conceber e implementar sistemas de informação
orientados a web para grandes empresas.
• Desenvolver websites usando um sistema de gestão de
conteúdos.
• Perceber e implementar os novos recursos da HTML5
Resultados Esperados
Espera-se que o estudante:
• Concebe e implementa projectos de sistemas web para
grandes empresas.
• Desenvolve websites para grandes empresas usando
sistemas de gestão de conteúdos
• Percebe e aplica a linguagem HTML ou HTML5 em
aplicações web através de projectos concebidos.
7
Quem deveria estudar este módulo
Para estudar este módulo, não precisa de pré-requisitos em termos

de conhecimentos prévios em HTML. No entanto, é necessário
possuir ao menos uma pequena familiaridade como utilizador de
computadores, uma enorme curiosidade de praticar e aperfeiçoar o
manuseio destes dispositivos.
Como está estruturado este módulo
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, comocomponente 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.
8
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áticos adicionais ao seu módulo para você
explorar. Para tal o ISCED disponibiliza na biblioteca do seu centro
de recursos mais material de estudosrelacionado 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.
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 tarefas 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.
9
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:
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 existir.
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 estudoreflicta
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 intervalo não se
10
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 ocurso:
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
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 –
11
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).
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.
1
Plágio - copiar ou assinar parcial ou totalmente uma obra literária, propriedade
intelectual de outras pessoas, sem prévia autorização.
12
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.
13
Tema – I: FUNDAMENTOS BÁSICOS DE HTML.
UNIDADE 1 – INTRODUÇÃO AOS FUNDAMENTOS BÁSICOS DE HTML
UNIDADE 1.1. Introdução, Estrutura da Unidade, Objectivos, Internet,

World Wide Web – WWW, serviços da Internet e Planeamento de
Projecto.
UNIDADE 1.2. Formas de Organização, Estrutura básica de HTML.
Unidade 1.3. Formatação de Textos e Linhas em HTML.
UNIDADE 1.4. Sumário da unidade, Exercícios de Auto-Avaliação e de
avaliação.
UNIDADE 1.1. Introdução, Estrutura, Objectivos, Internet, World Wide Web

(www), Serviços e Planeamento de Projectos.
Introdução
Primeiro para dizer Bem-vindo(a) à esta unidade I da Programação Web

em HTML da disciplina Fundamentos de HTML. Para o alcance de bons
êxitos nesta e noutras unidades, é necessário um estudo cauteloso
deste manual de aprendizagem, assim como de outras ferramentas
recomendadas.
Sendo esta uma disciplina de programação, ao passar de uma unidade
para outra, não se pode esquecer de rever as outras unidades
anteriores.
Como forma de consolidação dos conhecimentos, recomenda-se a
realizar leituras do material auxiliar, ou Websites recomendados, nas
referências bibliográficas deste Manual.
Recomenda-se a resolver os exercícios de cada unidade do módulo,
depois compara-los com as soluções nelas fornecidas.
Estrutura da Unidade
Esta unidade temática é constituída por quatro (4) unidades, com a

finalidade de transmissão de conhecimentos teóricos e práticos sobre
HTML - Hypertext Markup Language. Esta é a linguagem que permite
criar e publicar documentos multimédia na World Wide Web - WWW.
A primeira unidade descreve: Introdução, Estrutura da Unidade, Objectivos,
Internet, World Wide Web – WWW, Serviços da Internet e Planeamento de
Projecto Web. A segunda unidade descreve: A Forma de Organização,
Estrutura básica, Elementos, Comandos e Atributos em HTML. A terceira
unidade, refere-se a: Formatação de textos e linhas. Quarta unidade é
de sumário e exercícios de auto-avaliação.
14
Objectivos
Nesta secção da unidade, encontra-se o Objectivo principal e os objectivos

específicos.
No fim da unidade o aluno será capaz de:
Objectivo Geral
➢ Desenvolver estrutura básica de uma página em HTML.
Objectivos
específicos • Identificar os elementos básicos de HTML

• Descrever os termos WWW e Internet;
• Criar documentos simples com HTML, usando editores básicos de
texto;
• Modificar documentos criados em HTML, usando editores básicos
de texto;
Internet
A palavra Internet é uma composição de duas palavras inglesas “Inter

(international) + Net” o que significa “rede internacional”. É a maior
rede electrónica do mundo, que auxilia na partilha de dados e recursos.
A Internet não tem seu dono, apareceu de um projecto da agência
norte-americana “Advanced Research and Projects Agency” - (ARPA)
que tinham como objectivo, conectar os computadores dos seus
departamentos de pesquisa.
A Internet nasceu à partir da ARPANET, que interligava quatro
instituições: Universidade da Califórnia, LA Santa Bárbara, Instituto de
Pesquisa de Stanford e Universidade de Utah. Isto em1969.
Para o estudo deste projecto, esteve na responsabilidade ou a cargo dos
pesquisadores e estudiosos do assunto. Deste estudo nasceu o TCP/IP
(Transmission Control Protocol / Internet Protocol), que são protocolos
a base da Internet desde os anos passados até hoje.
World Wide Web
O significado em português de World Wide Web – WWW, não difere

do que se falou anteriormente, que é rede de alcance mundial, também
chamada simplesmente por Web ou WWW.
World Wide Web é um sistema de documentos em hipermédia que
15
são interligados e executados na Internet.

Estes documentos, podem estar em forma de vídeos, sons, hipertextos
e figuras. Para visualização dos mesmos, utiliza-se programas de
computadores, chamados de navegadores, que descarregam a
informação e mostram na tela ou ecrã do utilizador.
Assim, o utilizador, pode seguir as hiperligações na página para outros
documentos desejados ou enviar informação de volta para o servidor.
Esta operação é feita através da codificação com a Linguagem de
Marcação de Textos – HTML, que detém um conjunto de marcas de
codificação interpretadas pela World Wide Web em diferentes
plataformas.
É necessário que tenha conhecimento que a linguagem HTML não
diferencia maiúsculas com as minúsculas, é considerada linguagemnão
“case sensitive”, isto é, escrever “ISCED” ou “isced” consideraigual.
Serviços da Internet
Praticamente hoje em dia, grande parte das pessoas usam internet para
realizarem os seus serviços, são estes serviços que dia a dia, fornecem
muitas opções de actividades diversas, assim como de diversão, por
exemplo no uso da rede social, do youtube, o que permite a escuta de
músicas que pode ser por celular ou outro dispositivo. Actualmente
tem-se o WhatsApp (rede social) como um dos maiores serviços
oferecidos pela internet. Existem muitos outros serviços.
Neste manual foca-se alguns deles, que são frequentemente usados:
FTP (File Transfer Protocol): serviço usado para transferir ficheiros de

um site para o servidor e do servidor para o site.
Wiki: Colecção de páginas interligadas
Redes Sociais: Dispositivos ou páginas por onde os utilizadores se

encontram, mediante aproximações ou interesses comuns, sem
limitações geográficas.
Correio Electrónico ou (e-mail): serve para compor, enviar e receber

mensagens electrónicos através de uso da internet.
Página Web: Ficheiro escrito no formato HTML.
Home Page: Página inicial de uma Web site.
Web Site: lugar ou sítio, onde é guardada a informação das páginas, que
pode ser, ficheiros de texto, imagens, programas, vídeos, sons, mais.
16
Planeamento de um Projecto Web
A primeira fase de desenvolvimento de um site, é o seu planeamento.

O ciclo de desenvolvimento Web, envolve a identificação dos objectivos
do site.
O grande objectivo das organizações ao criarem um site, é de manter os

seus clientes ou membros informados. Outras instituições criam para
publicitar os seus produtos, enquanto algumas individualidades
singulares desenvolvem Web sites como passatempo para postar e
partilhar ideias sobre diversos interesses pessoais.
Qualquer site é criado para representar um determinado assunto e

normalmente já possui seu público-alvo. Existe uma particularidade que
é no desenvolvimento de uma aplicação profissional de uma página
Web, o que necessita primordialmente de ferramentas ou produtos
para criar e publicar páginas Web.
No mercado, Existem várias ferramentas disponíveis, desde de licença

livre assim como proprietárias.
Basicamente existem 7 (sete) itens para uma página Web estar

disponível ao público-alvo ou cliente.
1º. Item: Definir o objectivo da página
É necessário antes de tudo, definir o objectivo global da página a criar

/ desenvolver, isto é, se a página é para uma loja virtual, para prestação
de serviços, um blog ou entre outros propósitos.
2º. Item: Definir o Público-alvo
Conhecer o alvo para qual a página está a ser criada, isto é, Identificar
e focalizar o público que fará com que os objectivos sejam alcançados.
Isto irá ajudar na determinação do tom das cores, o estilo e o conteúdo
da página.
3º. Item: Escrever o conteúdo
Decidir o conteúdo que estará na página, isto é, saber que tipo de

informação a página deve conter. Deve Saber a quantidade do
conteúdo que vai fluir na página. Para facilitar e agilizar a classificação
nos motores de busca, deve conter as palavras-chave.
O importante é decidir o que será criado. O seu conteúdo pode ser

incluso mais tarde.
4º. Item: Desenvolver a estrutura da Página Web
Planear como as páginas irão se encaixar nas molduras:
▪ Decidir sobre a divisão do conteúdo da página.
17
▪ As páginas estarem agrupadas segundo os temas.

▪ Criar uma hierarquia da página, consoante a sua importância.
Para a visualização cria-se o Web site normalmente em um wireframe.

“Wireframe é um protótipo usado em design de interface para sugerir
a estrutura de um Web-Site e relacionamentos entre suas páginas”
(wikipedia.org, 2018).
▪ Definir o esboço da interligação das páginas.

▪ Pensar na forma como a página será navegada pelos visitantes.
▪ A estrutura da página deve ser mais lógica quando e quanto
possível.
5º. Item: Projectar o desenho da página a desenvolver
Ao projectar o desenho da página, deve ter o cuidado com os seguintes

aspectos:
▪ Objectivos da página.
▪ Público-alvo
▪ Conteúdo
▪ Significado do uso de diferentes cores
▪ Certeza de acesso de pessoas portadoras de alguma
deficiência.
6º. Item: Codificar a página
Converter o desenho em código, isto é, usar uma linguagem de

programação do tipo HTML, para passar do desenho ao código, para
que seja consistente em diferentes navegadores Web, dispositivos e
sistemas operativos. A codificação do desenho deve também
contemplar o acesso a utilizadores com alguma deficiência, assim como
facilitar os motores de busca a encontrar a página.
7º. Item: Publicar a página
Isto significa a página estar no ar, tornar-se acessível na internet. Esta

operação é denominada de “Upload”. Deve-se registar o nome de
domínio (que é o endereço ligado a rede, que identifica o seu
proprietário).
Para que os visitantes possam visualizar o site, é necessário que o

código esteja alojado num servidor. Por isso, precisa-se de ferramentas
para criação do conteúdo, servidor Web, um sistema de gestão de base
de dados e um navegador Web ou browser.
As páginas devem ser interactivas, exigirem menos comunicação com

o servidor para visualização do conteúdo.
Em HTML Básico (2003), refere que, “as páginas dinâmicas permitem o

processamento interactivo no cliente sem que seja necessário fazer
inúmeros pedidos ao servidor Web. Ao desenhar a interface do
18
utilizador de uma página Web deve se considerar os seguintes aspectos:
• Minimizar o tempo de transferência (download) das páginas.

• Manter as informações acessíveis.
• Coordenar cores.
• Manter as páginas com informações actualizadas.
• Informar os utilizadores de problemas com a página (em casos
de existir um problema).
• Manter hyperlinks para sites antigos.”
Como pode observar, tendo em mente estes sete passos, pode

construir uma estrutura eficiente para o desenvolvimento de páginas
em HTML.
19
Exercícios de auto-avaliação da Unidade 1.1
1 - O que é INTERNET e quais são as partes que formam a palavra?
2 - O que é TCP/IP?
3 - Como se chama o sistema de documentos em hipermédia que são

interligados e executados na Internet?
4 – Qual é o serviço usado na internet para transferir ficheiros de um

site para o servidor e do servidor para o site?
5 – Como se chama o protótipo que aprendeu, que é usado em design

de interface para sugerir a estrutura de um Web-Site e relacionamentos
entre páginas?
6 – Qual é a primeira fase desenvolvimento de um site?
Respostas
1. R: A internet é uma rede mundial de computadores, formada por

Inter+Net.
2. R: TCP/IP é o principal protocolo de controlo e transmissão na

internet.
3. R: O sistema chama-se de World Wide Web – WWW
4. R: O serviço chama-se de FTP – Protocolo de transferência de

Ficheiros.
5. R: O protótipo chama-se de Wireframe.
6. R: A primeira fase de desenvolvimento de site, é o Planeamento.
20
UNIDADE 1.2. Formas de Organização e Estrutura Básica de HTML.
Formas de Organização de um documento html
Basicamente pode-se considerar três maneiras de organização de

páginas web que são:
1. Hierarquicas
2. Linear e
3. Mista
Estrutura Hierarquica
“Em uma organização hierárquica, é fácil para os leitores descobrir a

posição em que se encontram na estrutura. Nas hierarquias, a home
page ou página de entrada fornece uma visão geral do conteúdo que
está subordinado a ela e ainda define os principais vínculos as páginas
dos níveis inferiores da hierarquia” (Paulino, 2009).
Segundo mesmo autor, considera “Este tipo de estrutura oferecer um

risco mínimo de ficar perdido, além de ser uma forma mais fácil de
localizar informações”.
Como boas maneiras de programação, deve evitar-se incluir muitos

níveis, porque torna-se cansativo e aborrecido para os leitores.
Normalmente Procura-se manter apenas dois ou três níveis
hierárquicos.
Figura 1.2.1 Estrutura Hierárquica. Fonte: (Picinini, 2010)
Estrutura Linear
(Paulino, 2009) diz que “Uma organização muito rígida, limita tanto a
liberdade dos seus leitores de consultar as informações quanto a sua
própria liberdade de apresentá-las. As estruturas lineares são ideais
para apresentar no ambiente on-line um material que já tenha esse tipo
de estrutura no ambiente off-line. Como por exemplo: instruções passo-
a-passo ou treinamento baseado em computador”.
21
Figura 1.2.2 Estrutura Linear. Fonte:(www.google.co.mz)
Estrutura Mista
Ainda (Paulino, 2009), Afirma ser “Uma forma comum de organizar um

documento na Web consistir em obter uma combinação das estruturas
linear e hierárquica. Essa estrutura combinada ocorre com maior
frequência quando documentos de estrutura rígida, porém lineares, são
apresentados no ambiente on-line. Um exemplo é a famosa FAQ
(Frequently Asked Questions) ”.
Sendo uma estrutura combinada (linear e hierárquica), deve-se

oferecer em cada página um vínculo para o leitor avançar, retroceder,
retornar ao início e subir ou descer de nível.
Figura 1.2.3 Estrutura Mista. Fonte:(www.google.co.mz)
Como pode observar, a organização da página é muito importante,

não só para localização dos conteúdos assim como facilita a própria
programação e evita o cansaço dos visitantes.
Estrutura Básica de HTML
Uma estrutura HTML é formada por elementos, também conhecidos

por características, que se encontram envolvidos ou dentro de símbolos
do sinal de menor e maior que “<>”, denominados por tags.
Existe dois tipos de tags (do inicio e do fim). A tag é considerada de inicio
ou começo, quando vem dentro dos sinais “<>” e de termino ou fim
quando vem dentro dos sinais do inicio, incluindo uma barra “</>”. Em
suma, tags devem ser escritas aos pares, por isso, costuma-se dizerque
abre-se e fecha-se uma tag.
Um documento em HTML, precisa seguir obrigatoriamente uma

estrutura que é composta pela
22
instrução <!DOCTYPE> e pelas tags (<html>, <head> e <body>). É de

salientar que não é obrigatório a presença da instrução “!DOCTYPE”,
mas a sua presença é fundamental.
Instrução <!DOCTYPE html>
Esta instrução, deve aparecer no início antes da tag <HTML>, tem a

missão de actualização das funcionalidades das versões anteriores de
HTML. Sem esta instrução, algumas funcionalidades das versões antigas
de HTML não seriam reconhecidas nas actuais versões.
Sendo esta uma instrução e não tag, não necessita de finalizar, como
acontece com as tags. Veja o exemplo abaixo, de uso da instrução.
<!DOCTYPE HTML>
<Html>
<! -- O código html escreve-se aqui -->
</Html>
 o fim do
comentário.
Os comentários em HTML são muito fáceis de colocar. Écomo
uma etiqueta que tem um início e um fim. Todo o texto que
colocar dentro está comentado, ou seja, não aparecerá na
página. Dentro de um comentário pode colocar o texto ou
código HTML, como etiquetas. O comentário começa por  Tudo o que colocar entre essas etiquetas está
comentado. (Alvarez, 2014)
Veja como exemplo abaixo o código HTML com um comentário:
<Html>
<head>
<Title>Título</title>
</head>
<body>
 ” representa um
comentário. Isto é, o computador não processa.
-->
</body>
</Html>
23
A tag <html>
Na estrutura do documento, antes de tudo, insere-se uma tag <html>.

Dentro dessa tag, é necessário declarar outras duas tags que são:
<head> e <body>. Estas duas tags consideram-se “irmãs”, pois
encontram-se no mesmo nível hierárquico.
<! DOCTYPE html >

<Html>
<Head> </head>
<Body> </body>
</html>
A tag <head>
A tag <head> contém informação que é do interesse do navegador,

sobre o documento a trabalhar e não dos visitantes (leitores) do site.
Este tipo de informação não será exibido na área do documento do
navegador.
A especificação exige a presença da tag de conteúdo <title> dentro do

<head>, assim permite especificar o título do documento, normalmente
é exibido na barra de título da janela do navegador. Outra configuração
muito utilizada, principalmente em documentos cujo conteúdo possui
caracteres como acentos e cedilha, é a configuração do codificador de
caracteres, chamado de encoding ou char set. Pode configurar-se a
codificação a utilizar no documento por meio da configuração de char
set na tag <meta>. Um dos valores mais comuns usados hoje em dia é o
UTF-8, também chamado de Unicode.
Actualmente recomenda-se o uso UTF-8 para encoding na Web por

ser amplamente suportada em navegadores e editores de código, para
além de ser compatível com praticamente todas as línguas do mundo.
Ver como se emprega no exemplo abaixa:
<html>
<head>
<title> ISCED – BEIRA </title>
<meta char set="utf-8">
</head>
<body>
</body>
</html>
Sendo o primeiro impacto com HTML, digite as oito linhas a cima, em
qualquer editor de texto, grave com a extensão html. Neste manual
escolheu-se como editor o “notepad”.
24
Figura 1.2.4 Criar título no HTML.
Extensão de um ficheiro é o que aparece depois do ponto quando grava

o nome de um documento, exemplo aula.html, neste caso, aula seria o
nome do ficheiro e HTML a extensão. A extensão identifica a
originalidade ou tipo do documento. Ao se tratar de programação, é
necessário que o nome do ficheiro seja sugestivo, isto é, ser
representativo do assunto que se trata.
Ao gravar escolha um nome sugestivo para o ficheiro, atribua a

extensão html, por exemplo “Titulo.html”.
O HTML é compatível com muitos navegadores, por isso, depois de

gravar, pode abrir com Internet Explorer, Google Cromo ou FireFox.
Veja a figura abaixo:
Figura 1.2.5 Navegadores para abrir um documento HTML.
Depois de se abrir com um destes navegadores, irá se visualizar uma

janela parecida com a de baixo, veja onde está a indicar a seta, é o título
da página.
25
Figura 1.2.6 título de uma página Web.
A tag <body>
Esta tag contém todo o conteúdo da página Web, vem depois da tag
<head>. Ela é finalizada pela tag </BODY> antes do fecho ou de
finalizar a tag </HTML>.
26
1 – Na organização estrutural de páginas em HTML, aprendeste três

maneiras ou formas, quais são?
2 – Qual é a diferença existente entre uma tag e uma instrução em

HTML?
3 – Qual é a forma ou tipo de organização que a figura abaixo

representa?
4 – Escreva a estrutura básica de um documento HTML?
5 – Que tipo de informação contém a tag <HEAD>?
Respostas
1. R – As três maneiras de organização estrutural de páginas Web são:
• Linear
• Hierárquica
• Mista
2. R: A diferença entre tag e instrução em HTML é porque a tag é

preciso abrir e fechar ou iniciar e finalizar. Enquanto a instrução, deve
ser iniciada e não necessita de ser finalizada.
3. R: A figura representa uma organização da estrutura Mista.
4. R: A Estrutura básica de HTML é:
<html>
<head> </head>
<body> </body>
</html>
5. R: A tag <head> contém informação que é do interesse do
navegador, sobre o documento a trabalhar e não dos visitantes
(leitores) do site.
27
UNIDADE 1.3. Formatação de Textos e linhas em HTML.
Comandos, Elementos e Atributos usados na Formatação

com HTML
Tendo já estudado a organização e estrutura de uma página em HTML,

certamente, viu-se alguns dos elementos e comandos (tags) que
formam a estrutura HTML. Como forma de aperfeiçoamento, vai-se
repisar a mesma matéria, para melhor entendimento do seu conteúdo.
Nesta secção vai-se descrever alguns elementos, comandos e atributos,
que são frequentemente usados na formatação de textos, hipertextos
e figuras usando a linguagem HTML. Antes porém, é necessário saber o
que são comandos (tags), Elementos e Atributos:
✓ Comandos (Tags): São palavras padronizadas usadas para

marcação da informação a ser apresentada no navegador Web.
O conteúdo a marcar deve estar entre uma tag aberta (<tag>) e
uma tag fechada (</tag>).
✓ Elementos: Um elemento em HTML é a abertura, o conteúdo e
o encerramento de tag. Veja exemplo de um elemento HTML:
<h1> Cabeçalho Principal da Página </h1>
✓ Atributos: São os que vem dentro das tags, usados para formatar
alguns valores dos elementos de HTML. Um elemento pode ter
um ou vários atributos.
O atributo id é usado para identificar da maneira única um
elemento específico da página.
Nas unidades anteriores falou-se da estrutura das tags HTML, nesta

unidade e em todas as unidades seguintes, serão necessários estes
princípios básicos para poder entender os conceitos mais profundosda
linguagem HTML. Nas páginas Web existe algum conteúdo quedeve ser
mais destacável. Por exemplo nas publicidades as vezes é preciso
escrever o texto com letras coloridas acompanhadas com imagens,
tamanhos diferentes das letras e mais. Para que isso aconteça, é
necessário formatar o conteúdo, é através dos conhecimentos
adquiridos nas unidades anteriores, que isso pode-se implementar
seguramente, visto que a linguagem HTML consiste em tags.
Nas unidades anteriores falou-se sobre estrutura, nesta como ilustra a

figura 1.4.1 abaixo, é uma estrutura básica que compõe um documento
HTML, donde pode-se observar alguns comandos (tags), elementos e
atributos.
28
Figura 1.3.1 Estrutura de um documento HTML. Fonte: (De Carvalho,

2004)
Não esquecendo do que se referiu anteriormente, que o HTML era uma

linguagem não sensível, isto é, as (tags) HTML não fazem diferença
escrever <HTML>, <HTml>, <htmL> ou <HtMl>.
Na prática em HTML os documentos são divididos em duas secções

principais (HEAD e BODY).
O conteúdo da secção <HEAD> é a informação sobre o documento. Por

exemplo o elemento <TITLE>, define um título que é mostrado no alto
da janela do navegador. Veja Figura 1.3.1.
Deve ser evitado no máximo o uso de acentuações dentro do title,

porque este é o gestor de janelas (window manager), que interpreta
o title. Muitas vezes, o gestor de janelas não suporta caracteres
acentuados.
O título da página deve ser o mais explicativo possível e não ser longo,
no máximo uma linha.
Segundo (De Carvalho, 2004), “todo documento WWW deve ter um

título; esse título é referenciado em buscas pela rede, dando uma
identidade ao documento. Ao adicionar uma página aos seus Favoritos
(Bookmarks), o título da página se torna a âncora de atalho para ela. Por
isso é sugerido que os títulos dos documentos sejam sugestivos,
evitando-se títulos genéricos como "Introdução", por exemplo. O título
também é bastante significativo para a listagem de uma página nos
resultados de pesquisas nos sites de busca da Internet”.
A secção <BODY>, visualiza ou mostra ao visitante (leitor), todo seu

conteúdo na janela principal do navegador (browser). Nesta secção
encontram-se os cabeçalhos, parágrafos, as listas, as tabelas, os links
para outros documentos, imagens, formulários, animações, vídeos,
sons e scripts embutidos.
29
Atributos de <BODY>
Através de atributos de <BODY>, pode-se definir cores para os (textos,

links e fundo das páginas), assim como uma imagem de fundo, também
chamada de marca d’água. Veja o exemplo abaixo, de como usar estes
elementos de comando:
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"

ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">
Onde:
BGCOLOR: Background Color é a cor de fundo da página. A não

indicação da cor para o fundo da página, o navegador irá atribuir a cor
padrão, geralmente cor cinza ou branco.
“BACKGROUND: Indica o URL2 da imagem a ser replicada no fundo da

página, como uma marca d’água. Para efeitos de design, é possível fixar
a imagem de fundo, para que ela não se mova junto com o texto ao se
rolar a página. Esse efeito não é padrão e funciona no navegador
Internet Explorer” (De Carvalho, 2004)
“Para inserir uma imagem no fundo da página usa-se o atributo

background, que deve ser colocado na tag <body>, a especificar uma
imagem que será utilizada como fundo de uma página, sendo que a
imagem ocupará toda a área de fundo da tela” (www.google.co.mz).
Sintaxe do atributo background: <BODY BACKGROUND=”URL”> Corpo

Da Página </BODY>
Onde URL corresponde ao caminho até o directório com a imagem, se

o ficheiro estar no mesmo directório com a imagem é só colocar o nome
da imagem no lugar de URL.
Background: <BODY BACKGROUND=”nome_da_imagem” </BODY>
No caso supõe-se que a imagem do fundo a usar, encontra-se namesma

pasta com o editor de texto usado na formatação. Veja oexemplo:
2
URL: É o sistema de endereçamento da Web, baseia-se na sintaxe chamada URI (Universal Resource
Identifier - Identificador Universal de Recursos). Os endereços actualmente usados são os URLs, que seguem
essa sintaxe. URL significa Uniform Resource Locator - Localizador Uniforme de Recursos. Um exemplo de
URL é: http://www.isced.ac.mz Esse endereço identifica: o protocolo de acesso ao recurso desejado (http)
que é a máquina a ser usada.
30
Figura 1.3.1.1 Inserção de imagem do fundo.
Continuando ainda em atributos dos elementos da tag <body>, tem- se:
TEXT: Cor para textos da página (padrão: preto).
LINK: Cor para os links (padrão: azul).
ALINK: Cor para links quando clicados ou accionados (padrão:

vermelho).
VLINK: Cor para links depois de serem visitados (padrão: azul escuro
ou roxo).
“Seus valores são dados em hexadecimal, equivalentes a cores no

padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses
valores, mas grande parte dos editores já oferece uma interface bem
amigável através da qual escolhe-se as cores desejadas, sem
preocupação com números em hexadecimais tais como #FF80A0.” (De
Carvalho, 2004)
“No entanto, já existem cores pré-definidas desde a versão 3.2 de

html, que são no total de 16, com os nomes: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,
yellow. Isto quer dizer, ao usar cores, para estes pode colocar
directamente o nome em vez de código em hexadecimal” (Paulino,
2009).
Cores e Fontes
É através da tag <FONT>, que são introduzidas as cores e tamanhos do

texto num documento em HTML. Veja os exemplos abaixo:
Cores:
<FONT COLOR="red"> Aprendendo HTML no ISCED </FONT>
31
Figura 1.3.2 Cores num documento HTML.
Na página, a palavra “Aprendendo HTML no ISCED” terá a cor vermelha.

Pode acontecer que, num trecho de texto tenha uma cor diferente da
definição geral de cores, configuradas através dos atributos <BODY>.
Figura 1.3.3 Cores num documento HTML.
Tamanho:
<FONT SIZE=3> ISCED - Beira </FONT>
Na página, a palavra ISCED - Beira será atribuída o tamanho 3.
Figura 1.3.4 Tamanhos num documento HTML.
“Este comando permite que o autor do documento possa alterar o

tamanho das letras em trechos específicos de texto. O tamanho básico
dos textos é 3 (padrão) ” (De Carvalho, 2004).
32
Figura 1.3.5 tamanho normal.
Pode-se indicar tamanhos relativos como mostra o exemplo abaixo:
<FONT SIZE=+2> Letra maior </FONT>
Figura 1.3.6 Tamanho Maior.
<FONT SIZE=-2> Letra menor </FONT>
Figura 1.3.7 Tamanho Menor.
33
A outra forma de formatação é o uso do atributo FACE que permite a

escolha de fontes para os textos.
<FONT FACE="Arial"> Beira – Sofala - Moçambique </FONT>
Figura 1.3.8 Tamanhos e tipos diversos.
Com este atributo, produzirá a palavra “Beira – Sofala – Moçambique”

com a fonte do tipo Arial.
Pode alterar o tipo de letra, basta substituir Arial para o tipo

pretendido. Também pode combinar-se o tipo de letra e cor. Veja o
exemplo abaixo:
<FONT FACE="Courier New" COLOR="red"> Ensino a Distância

</FONT>
Figura 1.3.9 Ensino a Distância a Vermelho.
34
Praticamente o elemento FACE define o tipo da fonte a utilizar, na

maioria dos navegadores usam como fonte padrão os seguintes:
Geogia, Arial, Times New Roman, Verdada, Courier.
COLOR este atributo define a cor da fonte em hexadecimal, a figura

1.3.9.1 abaixo, ilustra algumas cores e o seu código em hexadecimal.
Com a FACE pode-se definir mais de uma fonte, para que caso a
primeira não estiver disponível no sistema do utilizador/leitor, o
navegador irá recorrer a outra fonte e assim sucessivamente. Caso
nenhuma das fontes for localizada, o navegador irá recorrer a sua fonte
padrão.
A figura abaixo ilustra algumas cores, o seu código em decimal e

hexadecimal.
Nome da cor Base 10 Base 16

Snow 255250250 #FFFAFA
GhostWhite 248248255 #F8F8FF
WhiteSmoke 245245245 #F5F5F5
Gainsboro 220220220 #DCDCDC
FloralWhite 255250240 #FFFAF0
OldLace 253245230 #FDF5E6
Linen 250240230 #FAF0E6
AntiqueWhite 250235215 #FAEBD7
PapayaWhip 255239213 #FFEFD5
BlanchedAlmon 255235205 #FFEBCD
Bisque 255228196 #FFE4C4
PeachPuff 255218185 #FFDAB9
NavajoWhite 255222173 #FFDEAD
Moccasin 255228181 #FFE4B5
Cornsilk 255248220 #FFF8DC
Ivory 255255240 #FFFFF0
LemonChiffon 255250205 #FFFACD
Seashell 255245238 #FFF5EE
Honeydew 240255240 #F0FFF0
MintCream 245255250 #F5FFFA
Azure 240255255 #F0FFFF
AliceBlue 240248255 #F0F8FF
Lavender 230230250 #E6E6FA
LavenderBlush 255240245 #FFF0F5
MistyRose 255228225 #FFE4E1
White 255255255 #FFFFFF
Black 000 #000000
DarkSlateGray 477979 #2F4F4F
DimGray 105105105 #696969
SlateGray 112128144 #708090
LightSlateGray 119136153 #778899
Gray 190190190 #BEBEBE
LightGray 211211211 #D3D3D3
MidnightBlue 2525112 #191970
35
NavyBlue 00128 #000080

CornflowerBlue 100149237 #6495ED
DarkSlateBlue 7261139 #483D8B
SlateBlue 10690205 #6A5ACD
MediumSlateBlue 123104238 #7B68EE
LightSlateBlue 132112255 #8470FF
MediumBlue 00205 #0000CD
RoyalBlue 65105225 #4169E1
Blue 00255 #0000FF
DodgerBlue 30144255 #1E90FF
DeepSkyBlue 0191255 #00BFFF
SkyBlue 135206235 #87CEEB
LightSkyBlue 135206250 #87CEFA
SteelBlue 70130180 #4682B4
LightSteelBlue 176196222 #B0C4DE
LightBlue 173216230 #ADD8E6
PowderBlue 176224230 #B0E0E6
PaleTurquoise 175238238 #AFEEEE
Figura 1.3.9.1 Tabela de cores e seu código em Hexadecimal. Fonte:
(http://www.ufpa.br, 2008)
Cabeçalhos (Headers):
Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:
<H1> Este é um cabeçalho de nível 1 </H1>
Veja o exemplo:
36
Figura 1.3.10 Tamanhos diversos. Fonte: (De Carvalho, 2004)
Esses cabeçalhos são mostrados no navegador da seguinte forma:
Figura 1.3.11 Tamanhos diversos. Fonte: (De Carvalho, 2004)
Alinhamento de cabeçalhos
Os cabeçalhos podem ser alinhados a esquerda, centralizados e

alinhados a Direita. É considerado de alinhamento padrão (default)
quando é a esquerda.
Figura 1.3.12 Alinhamento de cabeçalho. Fonte: (De Carvalho, 2004)
37
Mudar de Linha
Os actuais navegadores já vêm com a função de mudança de linha

automaticamente, mas pode-se usar o elemento <BR> para mudar de
linha em qualquer lugar do texto. Com este elemento, pode-se inserir
n linhas em branco no documento. Cada <BR> usado será uma linha
inclusa.
Para além do elemento <BR>, pode-se usar o elemento <P>, este

elemento tem a função de parágrafo, pode receber alguns atributos
como por exemplo ALIGN que é o alinhamento do parágrafo.
Para o (Pedroso, 2007), “a marcação <P> é utilizada para definir o início

de um novo parágrafo, deixando uma linha em branco entre estee o
texto anterior. O parâmetro ALIGN define o alinhamento do texto do
parágrafo e pode assumir os valores `left', `right', `center' e `justify',
correspondendo respectivamente aos alinhamentos à esquerda, à
direita, ao centro e justificado. Se o parâmetro ALIGN não for
especificado, por padrão o parágrafo será alinhado à esquerda”.
Pode-se igualmente conjugar o elemento <BR> com o elemento <P>.

Veja os exemplos abaixo:
Figura 1.3.13 Diferença entre <P> e <BR>.

Pode observar que ao usar o P, para além do parágrafo, deixa uma linha
em branco enquanto o BR apenas vai para linha seguinte.
38
Linha Horizontal
Para criar ou inserir uma linha horizontal, também denominada de

separação usa-se o comando <HR>. Este comando pode ter vários
atributos. O <HR> insere uma linha na posição onde for colocado. Não
existe a marcação </HR> para finalizar. Os principais parâmetros deste
comando são:
<HR SIZE = número> – É especificado em pixés, serve para definir o

tamanho da linha.
<HR WIDTH = número ou %> - Insere uma linha em número por pixés
ou percentagem da ocupação no espaço horizontal. O elemento
“NOSHADE” informa que é sem efeito tridimensional. Digite e execute
o texto da figura 1.3.14 e observe o resultado.
Figura 1.3.14 Linhas horizontais e o seu alinhamento.

Existem outras formas de separação para além dos comandos <P> e
<BR>, segundo (De Carvalho, 2004) “outros elementos usados para
separar porções de texto são o <DIV> e o <CENTER>. <CENTER>
centraliza os elementos (textos, imagens, tabelas) que estiverem dentro
de sua marcação. <DIV> marca uma divisão lógica de um documento e
é uma formatação bastante usada actualmente”. Estes comandos,
serão tratados nas unidades a seguir.
É de referir que em HTML pode-se formatar um bloco de texto,

utilizando tag <Div>, o que permite alinhar horizontalmente qualquer
elemento na página. Como padrão esta tag faz o alinhamento a
esquerda (left), mas os alinhamentos podem ser para esquerda,
centralizado e para direita. Esta tag utiliza o atributo align que usa os
valores LEFT, CENTER e RIGHT. Como exemplo, veja a Sintaxe da tag
<div> e trecho de seu uso:
39
<DIV ALIGN=”posição”> Conteúdo a ser alinhado </DIV
Figura 1.3.14 Alinhamentos. Fonte: (www.google.co.mz)
Este programa tem como saída no browser a figura abaixo.
Figura 1.3.14.1 Alinhamentos. Fonte: (www.google.co.mz)
40
Perguntas
1 – O que são tags?
2 – Qual é a tag usada para formatar a cor e tamanho de um texto em

documentos HTML?
3 – Na definição de cabeçalhos através da tag <HEAD>, quantos níveis

de cabeçalhos podem ser encontrados em HTML e qual é o seu
parâmetro de utilização?
4 – Em HTML como podem ser alinhados os cabeçalhos?
5 – Quais são os outros comandos ou tags aprendidos para separação

de porções de textos, para além do <P> e do <BR> usados para
parágrafos e linhas.
Respostas
1. R: Tags São palavras padronizadas usadas para marcação da

informação a ser apresentada no navegador Web. O conteúdo a marcar
deve estar entre uma tag aberta (<tag>) e uma tag fechada (</tag>).
2. R: Para formatar textos e tamanhos em documentos HTML, é usada

a tag <FONT>.
3. R: Na definição de cabeçalhos em HTML existem apenas seis níveis,

que começam por <h1> e terminam em <h6>.
4. R: Os cabeçalhos podem ser alinhados a esquerda, centralizados e a

direita.
5. R: Os outros comandos são o <DIV> e o <CENTER>.
41
UNIDADE 1.4. Sumário da unidade Exercícios de Auto-Avaliação.
Sumário
Nesta Unidade temática 1 estudou-se fundamentalmente osobjectivos

que ditam a criação de uma página Web, seja Blog, página pessoal,
empresarial ou de uma organização, viu-se também as ferramentas
básicas necessárias a utilizar para o alcance desses objectivos.
Exercícios de Auto-Avaliação do Tema I
Perguntas
1. O que existe em comum entre Internet e World Wide Web.
2. Das opções abaixo, identifique a linguagem de Marcação de Textos?
a) TCP/IP
b) HTTP
c) Domínio
d) SITE
e) URL
f) WIKI
g) HTML
3. Qual é a função básica do domínio numa página Web?
4. Qual o símbolo usado para fechar uma tag?
5. Qual a diferença entre a tag <P> , a tag <BR> e tag <DIV>?
6. Elabore uma linha de sintaxe em HTML, que exibe no topo da
página a mensagem “ISCED - BEIRA” como titulo da página.
7. Qual é o sinal usado para comentar no HTML?
8. Em que tag é colocado o conteúdo de uma página em HTML?
9. Quais são as tags consideradas básicas em HTML?
10. Através da sintaxe “<FONT FACE="Arial"> Beira – Sofala -
Moçambique </FONT>”, escreva o que será apresentado no navegador
da página.
42
Respostas
1. A internet assim como World Wide Web, constituem uma rede
mundial.
2. A Linguagem de marcação de textos é HTML
3. É o endereço ligado a rede, que identifica o seu proprietário
4. O símbolo que determina o fecho de uma tag é / (barra inclinada
para direita).
5. A tag <BR> quebra uma linha, a tag <P> para alem de paragrafo
deixa uma linha em branco e a tag <DIV> formata um bloco de texto.
6. <title> ISCED – BEIRA </title>
7. Para comentar em HTML, usa-se os sinais “”

8. O conteúdo em html é colocado entre <BODY> </BODY>
9. Tags básicas HTML: <html>, <head>, <title>, <body>.
10. O navegador irá mostrar: Beira – Sofala – Moçambique, com a
fonte do tipo Arial
Exercícios de Avaliação da Unidade I
Perguntas
1. O que é Internet e para que serve?
2. Qual é a finalidade principal de html?
3. Identifique pelo menos uma diferenção entre Internet e html.
4. Para que serve o símbolo <!- - em html?
5. Com qual tag se faz um parágrafo em html?
6. Que função desempenha a tag <title>?
7. Num documento html o que consta na tag <body>?
8. Em que tag é colocado o conteúdo numa página em HTML?
9. Crie uma página em html, com o conteúdo em branco e com o título
“Curso de Gestão da Informação”.
10. Escreva uma sintaxe que visualiza no navegador a seguinte
mensagem “Só estudando é que poderemos desenvolver o País”. Deve
ter o tamanho equivalente ao cabeçalho H3.
43
Referências
Alvarez, M. A. (2014, 03 12). Comentários em HTML.
De Carvalho, F. P. (2004, 10). Introdução à Linguagem HTML. p. 33.
Paulino, D. (2009, 05 22). Formas de Organização de Páginas Web.
Pedroso, R. P. (2007, 06). APOSTILA DE HTML. p. 101.
Picinini, B. (2010). Empreendedorismo Digital. Como Organizá-lo em

seu Site Para Máxima Performance.
wikipedia.org. (2018, 06 26). Website wireframe.
www.google.co.mz. (n.d.). Imagens de Organização de páginas web.
www.smeduquedecaxias.rj.gov.br. (n.d.). Guia de Comandos de

Estrutura.
44
TEMA – II: DESENVOLVIMENTO DE PÁGINAS HTML COM ESTILOS DE CSS.
UNIDADE 2 – DESENVOLVIMENTO DE PÁGINAS HTML COM CSS
UNIDADE 2.1. Introdução, Estrutura da Unidade, Objectivos e Passos

Básicos de Formatação de Documentos HTML.
UNIDADE 2.2. Listas, Imagens, HiperLinks, Tabelas, Frames e
Formulários.
UNIDADE 2.3. CSS - Cascading Style Sheet.
UNIDADE 2.4. Sumário da unidade, Exercícios de Auto-Avaliação.
UNIDADE 2.1. Introdução, Estrutura, Objectivos e Formatação de Documentos.
Introdução
Sendo esta unidade uma continuação da anterior espera-se que haja

um melhor aproveitamento e aplicação dos conhecimentos já
adquiridos.
Nesta unidade vai-se aprender as técnicas de criar e usar listas,

imagens, ligações, grelhas e formulários. São estes elementos bases
para criação de páginas. Recomenda-se desde já o uso de computador
para realização e acompanhamento dos exemplos e exercícios aqui
recomendados ou propostos.
Só exercitando é que se pode consolidar os conhecimentos

transmitidos. Nesta unidade, o aprendizado criará uma página Web,
visto que já possui todas ferramentas necessárias para o efeito, incluído
aquele que faz com que a página fique bonita e apreciável, que é o CSS.
As outras ferramentas auxiliares ao HTML, falar-se-ão nos próximos
temas.
Estrutura da Unidade
Esta unidade temática encontra-se subdividida em quatro (4) unidades,

que são uma continuidade das unidades do tema anterior. A primeira
unidade vai descrever a Introdução, Estrutura da Unidade, Objectivos e
Passos básicos de Formatação de um documento emHTML. A segunda
unidade trata de Listas, Tabelas, Imagens, HiperLinks, Frames e
Formulários. A terceira unidade, descreve O desenvolvimento de
Páginas em HTML e CSS - Cascading Style Sheet. A quarta e última
unidade do tema, fala do sumário, de exercícios de auto-avaliação e
exercícios de avaliação.
45
Objectivos
Neste ponto desta unidade, encontra-se o Objectivo principal e os

objectivos específicos da unidade.
No fim desta unidade de aprendizagem, espera-se o aluno ser capaz de:

Objectivo Geral
➢ Desenvolver uma página Web em HTML usando as ferramentas
apropriadas.
Objectivos
• Usar os passos básicos de criação e formatação de páginas HTML
Específicos • Usar e identificar a diferença de listas, tabelas, Frames, links e
formulários em html
• Criar documentos em HTML usando CSS;
Passos básicos de um documento em HTML
Para criar ou formatar um documento em html, pode ser usado

qualquer editor de texto, desde que, ao gravar ou salvar use a extensão
html, como se referiu anteriormente. Por isso, os passos abaixo,
ilustram a forma simples de como criar um documento ou página Web.
Como forma de praticar ou consolidar o aprendizado, siga os passos,
pratica num editor de texto depois execute num navegador e compara
o resultado obtido, com o da figura 2.2 abaixo:
1º Passo
Sendo este o primeiro passo, abra o bloco de notas do Windows ou

qualquer outro editor de texto de sua preferência. Certifique de que
com o editor, pode criar um ficheiro de texto. Atribua extensão “html”
2º Passo
Digite no bloco de notas / notepad o modelo básico de página HTML

estudado anteriormente, deve ser exactamente como mostra a imagem
da figura abaixo:
46
Figura 2.1.1 Programa básico em html.
3º Passo
Já digitado o código HTML no bloco de notas ou outro editor de texto,

é necessário gravar ou salvar no formato “.html” para poder visualizar
no navegador, para este exemplo usou-se nome ISCED. Visualizar no
navegador considera-se executar ou rodar o programa. É a fase em que
o processador interpreta o código escrito.
4º Passo
Localize o ficheiro gravado “isced.html”, clique com o botão direito do

rato (mouse); seleccione a opção “Abrir com…” e escolha um dos
navegadores que estiver instalado no computador (Internet Explorer,
Firefox ou Google Chrome).
5º passo
Caso tenha seguido correctamente todos os passos descritos, verá no

navegador um conteúdo semelhante ao da imagem abaixo:
Figura 2.1.2 Resultado de um Programa básico em html.
47
Perguntas
1. O que é navegador ou browser?

2. Para que serve o Navegador?
3. O que é executar um programa?
4. Quantos passos são necessários para ter um programa html?
5. O que é preciso para executar um programa em html?
Respostas
1. Navegador é uma ferramenta ou aplicação.

2. Serve para visualizar a informação da página.
3. Executar um programa é o processador interpretar ou compilar
o código escrito pelo Homem.
4. São necessários basicamente 4 passos.
5. É necessário ter:
• Computador
• Editor de texto
• Navegador
• O Texto – código
48
UNIDADE 2.2. Listas, Imagens, Hiperlinks, Tabelas, Frames e Formulários.
Listas
Antes de tudo é preciso saber o que é uma lista e para que serve.
Depois procurar entender como funcionam em HTML.
Entende-se por lista, uma sequência ordenada ou não de pessoas,

objectos, nomes, produtos, itens e etc. Que serve para o apoio na
organização, manuseio e controlo diverso.
Em html pode-se encontrar listas (ordenadas, não ordenadas e de

definições). As listas são muito importantes ao pretender listar algo no
site e para criação de menu de navegação.
Segundo (Arrigoni) “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.”
“Um exemplo básico da utilização das listas é em um mecanismo de

navegação, uma barra de navegação ou um menu lateral. Infelizmente
ainda encontram-se sites na internet que não utilizam a marcação de
listas para marcar o conteúdo de navegação do site. Todas
as listas devem conter mais do que um elemento” (Eduardo, 2009).
Listas ordenadas e não ordenadas são formadas por sequências de itens

li (list item), pode não ter a tag de finalização. Mas não se recomenda
tal procedimento, ou seja, sempre feche os itens de uma lista.
Veja o código a seguir como exemplo de listas ordenadas, não-

ordenadas e por definição.
Listas Ordenadas
As listas ordenadas (Ordered List) ou simplesmente “ol” são usadas para

indicar uma sequência ou numeração. Para criação de listas ordenadas
usa-se as tags <ol> e <li>. A tag <ol> é para definir a lista e atag <li> é
aplicada para cada elemento da lista. É de referir que a tag ol usa como
padrão a sequência de números decimais. Para usar outras formas de
ordenação, é necessário informar o tipo de ordenação desejada. Veja
os exemplos abaixo:
49
Figura 2.2.1 Listas ordenadas.
A saída no navegador será:
Veja mais um exemplo de listas ordenadas:
Figura 2.2.2 Listas ordenadas. Fonte: (Eduardo, 2009)
50
<html>
<head>
<title>Listas em HTML</title>
</head>
<body>
<ol type="a">
<li>Nome</li>
<li>BI número</li>
<li>Telefone</li>
<li>Endereço</li>
<li>Bairro</li>
<li>Cidade</li>
<li>província</li>
</ol>
</body>
</html
Tem como resultado no navegador a lista abaixo:
Mais um exemplo de consolidação sobre listas ordenadas.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type="I">
<li>Nome</li>
<li>BI número</li>
<li>Telefone</li>
<li>Casa numero</li>
<li>Estado Civil</li>
</ol>
</body>
</html>
51
O resultado no navegador fica:
Listas não-ordenadas.
As listas não-ordenadas são as que mais são usadas em sites. A

informação a visualizar com estas listas, não precisam seguir uma
sequência numérica. Usa-se o elemento ul (Unordered List) para iniciar
a lista não ordenada e o elemento li para marcar os itens. Os itens são
precedidos por marcas ou bulets. Veja o exemplo:
figura 2.2.3 Listas não-ordenadas.
O resultado do programa da figura 2.2.3 é o que se vê abaixo:
52
Na figura abaixo é mais um exemplo de listas não-ordenadas, segundo

outros autores:
Figura 2.2.4 Listas não-ordenadas com vários níveis. Fonte: (Eduardo,

2009)
Listas de Definição
São poucos os desenvolvedores que utilizam as listas de
definição. Essas listas são formadas por uma definição da
lista e sua descrição. Para iniciar a lista utiliza-se o elemento
dl. Depois cada grupo de definição é marcado com dt. Para
definir o termo da lista usa-se o dd que deverá estar contido
dentro do elemento dt que por sua vez está dentro do
elemento dl (Eduardo, 2009).
Veja abaixo o exemplo da sintaxe de uma lista de definição:
<dl>
<dt>Curso de web Master</dt>
<dd>Manhã/tarde/noite</dd>
<dd>15/07/2018</dd>
<dt>Curso de HTML</dt>
<dd>Manhãs e Tardes</dd>
<dd>31/08/2018</dd>
</dl>
53
Com o exemplo da sintaxe acima, a saída no navegador é como é

mostrada dentro do retângulo da figura abaixo:
Observe mais exemplos sobre este tipo de listas:
<html>
<head>
</head>
<body>
<dl>
<dt>Fundamentos de Html</dt>
<dd> Html Basico</dd>
<dd> Html Avançado</dd>
<dt> Fundamentos de PHP</dt>
<dd> PHP Básico</dd>
<dd> PHP Intermediário</dd>
<dd> PHP Avançado</dd>
</dl>
</body>
</html>
A Saída no navegador fica:
54
Imagens
Em sites, a imagem é de caracter importante, porque retrata de forma

nítida e resumida os objectivos pela qual a página foi criada. Numa das
unidades anteriores, falou-se de imagem, mas como fundo de página
(background) onde usou-se o comando abaixo:
<BODY BACKGROUND= "imagemfundo.jpg" </BODY>.
Nesta unidade, vai-se abordar esta materia como parte do conteúdo

do site, definindo as suas dimensões, posicionamento e alinhamento
em relação ao texto.
Pode-se iniciar com uma linda imagem da figura abaixo, o que de facto
o seu conteúdo irá se imaginar sempre que se pretender criar, usar ou
formatar uma página com imagem em HTML.
Figura 2.2.5 Elementos para inserir imagens. Fonte: (Basso, 2017)

Para iniciar a inserção de uma imagem, é preciso primeiro ter a imagem.
Ter conhecimento de alguns dados de caracter importante dessa
imagem, esses dados podem ser do tipo tamanho em pixéis (altura e
largura), nome com a extensão (JPG, GIF, PNG). Onde:
55
• GIF (Graphics Interchange Format)

• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
Depois de se obter os dados acima referidos, usa-se a tag <img><img

/> para inserir a imagem na página.
Para informar ao navegador o endereço da imagem utiliza-se o

comando src, que significa source ou fonte. Veja o exemplo abaixo:
<img src="link_da_imagem"/>. O link_da_imagem é o endereço e o

nome da imagem.
“É importante observar que o link da imagem deve sempre terminar

com o nome da imagem, ponto (.) a extensão do tipo da imagem. E se
a imagem está em uma pasta no mesmo diretório do documentoHTML,
deve-se colocar o nome da pasta seguido de barra (/), antes do nome
da imagem.” (Basso, 2017).
<img src="/nome_da_pasta/nome_da_imagem.jpg"/>
Sabendo já como inserir uma imagem numa página em HTML, é preciso

saber como tratar essas imagens para que tenham um visual apreciável.
Para tal, trata-se de formatação de imagem.
Formatar imagem
Para formatar imagens em html, dispõe-se de vários comandos, aqui

vai-se usar alguns desses comandos, os outros vai-se aprendendo na
medida que for a praticar e a programar.
Comandos de redimensionamento
Segundo (Basso, 2017) Os comandos de redimensionamento
de imagem servem para controlar o tamanho da imagem. São
eles: width (largura), height (altura). Os valores maisusados
para estes comandos são valores em píxel, que já foi explicado
anteriores. Deve-se tomar muito cuidado na hora de usar
estes comandos, pois se aplicar um tamanho muito distante
ao tamanho real da imagem, terá uma enorme perda de
qualidade da mesma.
Como pode se ver, o conhecimento da imagem antes de inserir na
56
página é de crucial importancia.
Por isso, aconselha-se a formatação e redimensionamento da imagem.

Veja o exemplo:
<img width="300px" height="300px"

src=“pasta_onde_esta_a_imagem/nome_da_imagem.gif”/>
Figura 2.2.6 formatação de imagem.
Assim, com a imagem na pasta “isced_beira” com o nome

“Beira_Mar” e extensão “jpg”, obtém-se no navegador a figura abaixo:
Figura 2.2.6.1 formatação de imagem.
Comando de alinhamento
“O comando para alinhamento é o align, que tem como seus principais

valores: left - alinha a imagem a esquerda; right - alinha a imagem a
direita; top - alinha a imagem com o topo do elemento mais alto de
sua linha; bottom - alinha a imagem com a base mais baixa dos outros
elementos de sua linha” (Basso, 2017).
Com este comando e seus elementos, trabalha-se a imagem na
57
medida adequada e pretendida para página. Veja o exemplo:
<img align="right" src="imagens/minha_imagem.png"/>
Figura 2.2.7 Alinhamento de imagem.

Com este programa, o navegador visualiza as imagens como se vê na
figura abaixo.
Figura 2.2.7.1 Alinhamento de imagem.
Ajuste de margens
Para o ajuste de margens usa-se os comandos vspace e hspace, que

trabalham com valores em pixel.
vspace - define o tamanho da margem nas bordas superior e inferior

da imagem.
hspace - define o tamanho da margem nas bordas esquerda e direita

da imagem.
<img vspace="35px" hspace="15px" src =

"Nome_da_pasta/nome_da_Imagem.png"/>
58
Figura 2.2.8 Ajuste de margens.
A figura abaixo, mostra como será visualizado no navegador
Figura 2.2.8.1 Ajuste de margens. Fonte: Adaptado do

(www.google.co.mz)
Segundo (Basso, 2017), o comando alt “insere um texto alternativo.

Caso ocorra uma falha no carregamento desta imagem, o texto definido
nesta tag será exibido. Isso é muito útil para imagens que são linkadas”.
Veja o exemplo do seu uso:
<img alt="Aqui escreve-se o texto alternativo"

src="/pasta_da_imagem/Nome_da_imagem.png"/>
Para o mesmo autor, “title - insere um texto que será exibido somente
se o utilizador mantiver o mouse alguns segundos sobre a imagem”.
Veja o exemplo a seguir:
<img title="Aqui escreve-se a mensagem a se exibir" src="/pasta/

imagem.png"/>
Existe ainda o comando border, que serve para inserir borda na

imagem. Este trabalha em pixel assim como os comando anteriores.
59
HiperLinks
“Hiperlink é sinônimo de link (liga), hiperlink consiste em links (ligações)

que vão de uma página da Web ou ficheiro para outro(a), o ponto de
partida para os links, é denominado de hiperlinks.”
(www.google.co.mz).
Hiperlinks e marcadores são ferramentas importantes para
ajudar utilizadores a navegar rapidamente dentro e através de
páginas da Web para o conteúdo que precisam. Quando
clicado, um hiperlink tenta localizar um documento HTML e
abri-lo no navegador da Web. Ele localiza esse novo
documento usando uma URL. Por exemplo, o hyperlink <A
HREF="mypage.htm"> examina a pasta actual a procura da
página chamada mypage.htm, e depois exibe essa página no
quadro actual (msdn.microsoft.com, 2010).
É de recordar que um URL pode apontar para ficheiros HTML, textos,

imagens, vídeos, áudios e qualquer outro tipo de documento que
possa estar na Web.
Passos para inserir hiperlinks na página.
1. Abrir a página para edição no modo Design.

2. Seleccionar o texto ou imagem a usar como hiperlink.
3. Clique em Convert to Hyperlink no menú Format.
Irá aparecer uma caixa de diálogo Hyperlink.
4. Digite na caixa URL o caminho ou então clique no Browser para
indicar a página ou ficheiro de destino. Para finalizar clique
em OK.
O comando ou tag para inserir um hiperlink é: <a></a>, acompanhado

pelo atributo “href”. Veja exemplo: <a href=””</a>
“Um link básico é criado envolvendo o texto (ou outro conteúdo, veja
"Links de nível de bloco") que você quer transformar em um link dentro
de um elemento <a> , e dando-lhe um atributo "href", (também
conhecido como Hypertext Reference , ou target) que conterá
o endereço da Web para o qual você desejaque o link aponte-a”
(Kardhyr, 2018).
60
Sendo assim, mostra-se um exemplo prático abaixo para lhe ajudar a

criar o seu primeiro link numa página Web em html.
<html>
<head>
<title> Criando Hiperlink </title>
</head>
<body>
<p>Estou a criar um link para ir na página do
<a href="https://www.isced.ac.mz">ISCED.</a>.
</p>
</body>
</html>
Figura 2.2.9 exemplo de um Link.
Pode verificar que no navegador a palavra “ISCED” aparece com uma

cor diferente (azul) e sublinhada. Ao clicar nela, o link irá encaminhar
para a página www.isced.ac.mz para dizer que é um link.
Como referiu-se anteriormente, pode-se transformar qualquer
conteúdo em um link. Basta colocar o conteúdo entre as tags <a></a>.
Veja mais um exemplo abaixo:
<html>
<head>
<title> Criando Hiperlink </title>
</head>
<body>
<a href="https://www.isced.ac.mz/">
<img src="/isced_beira/futuroiluminado.png" alt="Um ensino
iluminando o futuro">
</a>
</body>
</html>
Neste exemplo verá que em vez de texto azul sublinhado, aparece

uma imagem a da figura abaixo, caso use o mesmo exemplo, ao passar
o rato (mouse) por cima da imagem, aparece uma mão com um dedo
indicador, o que significa que existe um link que vai lhe levar a
determinada página. Neste caso, levará para www.isced.ac.mz.
61
Figura 2.2.9 exemplo de um Link em bloco.
Os hiperlinks desempenham um papel muito importante nas páginas

web.
Tabelas
Na prática, considera-se tabela o cruzamento de linhas e colunas. Em

html tabela tem a mesma definição, mas com nomes nas linhas e
colunas. Tabela ajuda na apresentação de conjunto de dados em forma
ordenada. Em html as linhas são representadas por (<tr></tr>) e as
colunas por (<td></td>).
Figura 2.2.10 Linhas e colunas (Células) de uma tabela. Fonte:

(www.htmlprogressivo.net, 2013).
“Mas os cabeçalhos da tabela devem ser apresentados não em “td”,

mas em “th”; caso não, alguns códigos ficam comprometidos a não
funcionarem. A tag básica das tabelas é a <table></table>, ou seja, toda
a informação da tabela deve estar contida entre os delimitadores dessa
tag”(Ribeiro, 2018).
Apresenta-se como exemplo, o código para criar uma estrutura de
pequena tabela.
<html>
<head>
<title> Criando tabelas </title>
</head>
<body>
62
<table border="2">
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>Aves</th>
</tr>
<tr>
<td>Mangas</td>
<td>Couve</td>
<td>Cevada</td>
<td>Pato</td>
</tr>
<tr>
<td>Tangerinas</td>
<td>Repolho</td>
<td>Feijão</td>
<td>Frango</td>
</tr>
</table>
</body>
</html>
Este código tem como resultado no navegador a figura abaixo:
Figura 2.2.10.1 exemplo de tabela.
“Nem sempre queremos preencher todas as células de uma tabela. As

vezes não precisa de dados, a informação está faltando ou esperando o
usuário completar. Para criar uma célula em branco, basta não colocar
nada de texto. Mas mesmo deixando ela em branco,é importante deixar
as tags tr e td para aquela célula, como se tivesse algo dentro”
Para tal, verifica o exemplo do código abaixo, onde no lugar do

produto couve, estará em branco.
63
<html>
<head>
</head>
<body>
<table border="2">
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>Aves</th>
</tr>
<tr>
<td>Mangas</td>
<td></td>
<td>Cevada</td>
<td>Pato</td>
</tr>
<tr>
<td>Tangerinas</td>
<td>Repolho</td>
<td>Feijão</td>
<td>Frango</td>
</tr>
</table>
</body>
</html>
Figura 2.2.10.2 exemplo de tabela.
Observe que a tabela é formulada começando da esquerda para a

direita e de cima para baixo. Usa-se como borda da imagem, o atributo
border como verificou nos exemplos acima. Este atributo assume os
valores de 0 até 7. Quanto maior for o valor, maior será a borda.
Conforme a configuração da tabela, pode-se usar outros atributos,

como “rowspan” para linhas e “colspan” para colunas, que têm como
missão o aumento do núcleo da célula.
64
Veja o exemplo do código abaixo para este efeito.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>Aves</th>
<th> Outros </th>
</tr>
<tr>
<td>Mangas</td>
<td></td>
<td>Cevada</td>
<td>Pato</td>
<td rowspan="4">3 linhas</td>
</tr>
<tr>
<td>Tangerinas</td>
<td>Repolho</td>
<td>Feijão</td>
<td>Frango</td>
</tr>
<tr>
<td colspan="4">4 colunas</td>
</tr>
</table>
</body>
</html>
No navegador, teria-se este formato de tabela. Pode observar que o

núcleo da célula mais a direita é maior, isto é, foi aumentado três linhas,
assim como, o núcleo da última célula também foi alargada quarto
colunas.
65
Figura 2.2.10.3 rowspan e colspan em tabelas.
Formatos de tabelas são diversos, outros ira-se ver nas unidades

adiante quando se tratar de molduras ou frame.
Frames/Moldura
Falar de frame é mesma coisa dizer moldura em Português. Na Web a

moldura é importante porque demarca e melhora o aspecto da página,
Frame tem aparência de uma subjanela. Pode-se notar que atéagora,
era visualizada uma única página por site. Com o uso de frames pode-
se exibir diversos documentos HTML em uma única janela.
“O conceito principal do frame é a exibição de conteúdos de maneira

fixa, para evitar que precisemos alterar coisas demais.”
Como se viu acima em tabelas, a criação de frames não difere muito.

Veja a figura abaixo de frame típico para uma página Web, tem-se
certeza de que se recorda algo no uso de rowspan e colspan.
Figura 2.2.11 Frame ou moldura. Fonte: (www.htmlprogressivo.net,

2013)
66
O uso de frames permite que diferentes arquivos HTML
componham a mesma página, permitindo dividir o espaço da
janela do navegador em colunas e/ou linhas econtrolar o seu
tamanho, determinando quantas serão as subdivisões e
qual será sua distribuição na tela. É importante
ressaltar que cada uma destas "partes da tela"é ocupada por
arquivos diferentes, totalmente independentes. Portanto, o
uso dos frames possibilita apresentar mais de uma página em
cada tela. Por exemplo, um índice em uma parte pequena dela
e os textos relacionados ao índice em outra parte.
(http://www.ufpa.br, 2008)
Cada frame contém um documento da página e outro documento

adicional para o conjunto de frames, onde são definidos a organização
de outras frames na página. Diria que a melhor maneira de empregar
frames, seria de dividir a página web em duas ou três secções. Sendo
uma para navegação dos visitantes e outra para o conteúdo da página
principal.
Por estas secções estarem em frames diferentes, pode fazer-se

deslocações dentro da frame da página principal, o conteúdo desta, não
afetará a posição da secção de navegação.
Assim sendo, ter-se-ia a página com o nome “frameset”, que conterá as

tags que especificam de as páginas vão estar apresentadas na janela do
navegador. Também pode-se dizer, que contém os atributos que
definem a divisão do navegador (linhas/colunas).
As outras páginas, consideradas internas por aparecerem através do

código frameset, serão denominadas de “frames”. A frameset assim
como a frame, aceitam valores, extensões e atributos.
A tag frameset
A tag <frameset> contém a disposição de frames na página. Logo, este

documento por conter conjunto de frames, não é visível. Simplesmente
ditará como os outros documentos estarão organizadosna página html.
67
Este documento coloca-se onde anteriormente colocava-se a tag

<BODY>. Veja o exemplo abaixo:
<html>
<head>
<title> A criar molduras </title>
</head>
<frameset border="2" borderColor="#C0C0C0" cols="20%,*">
<frame NAME="esquerda" src="esquerda.html" NORESIZE
borderColor="#3F85B8" target="main">
<frame NAME="direita" src="direita.html" NORESIZE
borderColor="#93DB70" target="direita">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Com este código, obtem-se no navegador a imagem da figura abaixo:
Figura 2.2.12 Usando frameset. Fonte: adaptado de (web.fe.up.pt)
Atributos de framesets
COLS – Divide verticalmente a moldura e especifica as suas larguras, que

podem ser por pixels ou em percentagem. A largura padrão é de 100%.
ROWS – Divide horizontalmente a moldura e especifica as alturas de

frames, que pode ser em pixels ou em percentagem. A altura padrão é
de 100%.
68
FRAMESPACING – É o espaçamento entre as frames (em pixels);
FRAMEBORDER - Bordas entre frames caso exista os seus valores são

fixos (0 ou 1), Sendo 1 com bordas e 0 sem bordas).
FRAME – Usado para dar caracteristicas da própria moldura (atribuir

nome, definer o documento fonte etc.)
NAME – É o nome da Janela ou frame, que é usado nos links.
SCROLLING – Define barra de rolagem ("scrollbars"), sendo: Yes (com

barra de rolagem), No (sem barra) e Auto (decisão do browser).
NORESIZE – É um atributo que evita Este a frame ser alterada

manualmente.
Na medida em que vai-se utilizando e familiarizando-se com frames,

aprenderá mais elementos que ajudam o uso e manuseio desta tag.
Veja o exemplo abaixo na visão de outros autores sobre frames:
Figura 2.2.13 código de uso de frames/moldura. Fonte: (web.fe.up.pt)
Figura 2.2.13.1 Resultado do código acima. Fonte: (web.fe.up.pt)
69
<html>
<head>
</head>
<FRAMESET ROWS="15%, 90%"> <FRAME
SRC="Primeiroframe.html" NAME="primeiro"> <FRAMESET
COLS="25%, 70%"> <FRAME SRC="Segundoframe.html"
NAME="Segundo"> <FRAME SRC="Terceiroframe.html"
NAME="Terceiro"> </FRAMESET>
</FRAMESET>
</html>
Figura 2.2.13.1 Resultado do código acima.
70
Formulários
Formulário em html é considerado como sendo o meio de interação

entre o aplicativo e o utilizador. É através deste que o utilizador visualiza
dados da web site assim como envia dados para o servidor.
Um formulário pode ser formado por botões, campos de texto,

checkboxes e mesmo uma ou muitas linhas. Considera-se que
formulário é um widget por ser formado através dos elementos acima
citados.
“A criação de formulários é um passo importante quando você está

construindo um site ou um aplicativo. Antes de começar a codificar, é
sempre melhor dar um passo atrás e tomar o tempo para pensar sobre
o seu formulário. Desenhando um rascunho rápido irá ajudar a definir
o conjunto correto de dados que você quer perguntar ao usuário”
(developer.mozilla.org, 2018).
Pode-se dizer que formulário é uma área que contem elementos que
permitem o utilizador poder fazer a entrada de informação. O
formulário é definido através da tag <form>. Veja exemplo:
<form>
<Input>
<Input>
</form>
Figura 2.2.14 Tags para Formulários. Fonte: (http://www.clem.ufba.br)
A tag <input> é a mais usada na concepção de formulários, é a tag de

entrada de dados. Veja abaixo o exemplo de programa em html para
criação de formulário, usando algumas tags e o seu resultado no
navegador.
71
<html>
<head>
<title>Formulários em HTML </title>
</head>
<form>
<h3> Aprendendo a criar formulário na ISCED.</h3>
<br>
<h4>Dados Pessoais do Aluno.</h4>

Primeiro nome:
<input type="text" name="firstname">
<br><br>
Último nome...:
<input type="text" name="lastname">
<br><br>

<form action="/página-processa-dados-do-form" method="post">
<tr>
<td>
<label for="provincias">Província.......... </label>
</td>
<td align="left">
<select name="estado">
<option value="01">Niassa</option>
<option value="02">Cabo Delgado</option>
<option value="03">Nampula</option>
<option value="04">Zambézia</option>
<option value="05">Tete</option>
<option value="06">Manica</option>
<option value="07">Sofala</option>
<option value="08">Inhambane</option>
<option value="09">Gaza</option>
<option value="10">Maputo Província</option>
<option value="11">Maputo Cidade</option>
</select>
</td>
</tr>
</form>

<h4> Sexo do Aluno </h4>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
<br>

<h4> Que meio usa para ir a ISCED? </h4>
<input type="checkbox" name="Mota">
72
De Moto
<br><br>
<input type="checkbox" name="Cavalo">
A Cavalo
<br><br>
<input type="checkbox" name="Outro">
A pé
<br><br>
</form>
</html>
Observe o código acima, e vai verificando o resultado no formulário da

figura abaixo. Use os comentários que estão no código para diferenciar
os resultados que o navegador apresenta na figura 2.2.15.
Figura 2.2.15 Exemplo de um formulário.
73
<html>
<head>
<title>Formulários em HTML </title>
</head>

<h4> Autenticação do utilizador </h4>
<form name="input" action="Formul_html.asp"
Method="get">
Nome do Utilizador:
<input type="text" name="user">
<input type="submit" value="Enviar">
<br><br>
Senha do Utilizador:
<input type="text" name="password">
<input type="submit" value="Enviar">
</form>
</form>
</html>
Figura 2.2.16 Formulário de autenticação.
74
Exercícios de auto-avaliação da unidade 2.2
Perguntas:
1. O que é uma lista?

2. Quais são os tipos de lista usadas em html
3. Quais são os elementos usados para identificar uma lista
ordenada e não-ordenada?
4. Que importância tem o hyperlink numa página Web?
5. Desenhe uma moldura (frame) que tenha três secções, a
primeira é de “logotipo”, a segunda de “menu” e a terceira de
“conteúdo” e fixar as molduras/frame.
6. Desenhe um formulário que contem o nome do aluno, telefone
e duas notas (nota1 e nota2).
Respostas
1. Lista é uma sequência ordenada ou não de pessoas, objectos,
nomes, produtos ou itens.
2. Os tipos de listas usadas em html são: Ordenadas, não-
ordenada e por definição.
3. Para ordenada é o <ol> e não-ordenada é o <ul>
4. Facilita a ligação e visualização de outras páginas que contém
outros conteúdos.
5. Primeiro criar três ficheiros, 2 com extensão html e 1 com
extensão png. Primeiro ficheiro terá logotipo do ISCED, o
segundo terá como conteúdo MENÚ e o terceiro será
CONTEÚDO. E a seguir o codigo abaixo.
<html>
<head>
</head>
SRC="/isced_beira/logotipoisced.png" NORESIZE
NAME="Cabeçalho"> <FRAMESET COLS="25%, 70%"> <FRAME
SRC="Segundoframe.html" NORESIZE NAME="Menú"> <FRAME
SRC="terceiroframe.html" NORESIZE NAME="Conteudo">
</FRAMESET>
</FRAMESET>
</html>
75
6.
<html>
<head>
<title>Exercício 6 </title>
</head>
<form>
<h3> Exercício 6.</h3>
<br>
Nome do Aluno:
<input type="text" name="name">
<br><br>
Nota1...:
<input type="text" name="nota_1">
<br><br>
Nota2...:
<input type="text" name="nota_2">
</form>
</html>
76
UNIDADE 2.3. CSS
Ao iniciar a falar de Cascading Style Sheets - CSS, é bom ter-se em

mente que esta é uma ferramenta que estiliza a página. Põe a página
bonita como dizem alguns autores. Por isso, é necessário organizar as
pastas que fazem parte do site, assim como se falou numa das
unidades anteriores que tratava da estrutura e organização da página.
Para melhor facilidade de manuseio e controlo dos eventos, a
organização das pastas e ficheiros do site, pode obedecer uma
sequência como a da figura abaixo, onde root é a pasta ou directório
raiz.
Figura 2.3.1 Organização do Site. Fonte: (Caelum).
Resumindo, diz-se que CSS é linguagem de estilos, que instrui os

navegadores a alterar os layouts, cores, fontes e mais, que usam um
identificador único denominado por ID, o id é o que vem antes de
abertura de chavetas, e o mesmo aparecerá no código HTML para
identificar a ligação. Até agora estas operações eram feitas por
77
marcação de todos os conteúdos da página através de tags, mostrando

a informação com estilos diferentes ou do padrão do navegador de
sites.
Esta unidade vai focar a estilização de páginas em html, usando a
linguagem de estilos CSS. O que liberta o não escrever as regras de estilo
da página misturados no mesmo código HTML. Por isso, as regras de
estilização irão aparecer no CSS e o efeito refletindo-se na página web.
“Normalmente, HTML e CSS são ensinados com foco na sintaxe da
linguagem. Mas saber sintaxe por si só não permite a criação de uma
página web a partir de um design. Você precisa saber por onde começar
e como abordar a tarefa, em outras palavras - você precisa aprender a
pensar como um desenvolvedor front-end” (br.udacity.com, 2018).
A sintaxe de CSS começa por abrir chavetas {e termina por fechar
chavetas}. Para dizer que a sua estrutura encontra-se entre chavetas.
A sintaxe é simples e fácil, consiste na declaração de propriedades e

valores, separados por dois pontos (:) e entre uma propriedade eoutra
é separada por ponto e virgula (;). Veja o exemplo: {color: #FF7F00;
bacground-color: #C0D9D9}. Tendo declarado as propriedades e
atribuído os valores, é necessário definir os atributos dos elementos
que vão receber os estilos de CSS. Estas são declaradas de 3 formas
diferentes, como pode ver:
• Atributo style
Este atributo é usado no próprio elemento que se pretende
estilizar, isto é, o código fica junto no documento html. Veja a
sintaxe e o documento abaixo:
Sintaxe
<p style="color: a_cor_a_atribuir; background-color:
a_cor_a_atribuir;">
O conteúdo da tag será exibido com uma cor e o fundo com outra,
desde que aplique cores diferentes!
</p>
Documento:
<!DOCTYPE html>
<html>
<head>
<title>ISCED</title>
<body>
<p style="color: #FF7F00; background-color: #C0D9D9">
Verifica que o conteudo e o fundo tem cores diferentes!
</p>
</body>
</html>
78
• A tag style
Nesta, declara-se as propriedades de CSS dentro da tag style.
Como está no mesmo documento, é necessário informar ou
seleccionar o elemento que irá receber a referida propriedade
de CSS. Veja a sintaxe e o documento abaixo.
Sintaxe
{
Color: Cor_a_ser_aplicada;
Background-color: Cor_a_ser_aplicada;
}
Documento:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: #FF7F00;
background-color: #C0D9D9;
}
</style>
</head>
<body>
<p>
O conteúdo desta tag será exibido com cor laranja com fundo
quase cinza!
</p>
<p>
<strong>Também</strong> será exibido com cor laranja com
fundo quase cinza!
</p>
</body>
</html>
O selector de estilos irá procurar onde tem a tag <p> para
atribuir as propriedades de CSS declaradas no documento.
• Arquivo externo
“A terceira maneira de declararmos os estilos do nosso
documento é com um arquivo externo, geralmente com a
extensão .css. Para que seja possível declarar nosso CSS em um
arquivo à parte, precisamos indicar em nosso documento HTML
uma ligação entre ele e a folha de estilo (arquivo com a extensão
.css)” (Caelum).
Pode ver que esta forma de estilizar, melhora a organização do
79
projecto e faz com que a nossa página seja mais rentável e permite
que a mesma folha de estilos seja usada em vários documentos.
Adverte-se que o uso de estilo externo de CSS, no documento HTML
deve estar dentro da tag <head>.
<!DOCTYPE html>
<html>
<head>
<title>ISCED - Estilos em CSS</title>
<link rel="stylesheet" href="/isced_beira/estilos.css">
</head>
<body>
<p>
Conteúdo vermelho e fundo azul!
</p>
<p>
<strong>Assim como este, </strong> o conteúdo vermelho, fundo
azul!
</p>
</body>
</html>
Tendo visto o uso da linguagem CSS e suas vantagens em documentos

em HTML, é importante conhecer as suas propriedades fundamentais
no uso desta fanfantástica ferramenta de programação web.
Formatação de documentos HTML com CSS.
Nesta secção vai-se mostrar como usar as propriedades de CSS em

páginas HTML. Considera-se propriedades os elementos usados para
formatar, organizar ou simplesmente estilizar documentos.
Fontes do texto
Acima viu-se como atribuir cores de texto e fundo do documento,
simplesmente reforçar que a maneira é a mesma para formatar fontes
do texto. Em CSS para formatar texto pode ser usada a propriedade
“font-family”, que pode ter o valor com aspas”” ou sem aspas. Com
aspas atribui-se o nome do ficheiro a usar, enquanto o sem aspas
atribui-se a família da fonte.
As fontes mais usadas como padrão são: "Times" e "Times New Roman",
conhecidas como fontes serifadas. Mas estes padrões depende do
sistema operativo a ser usado no computador.
Segundo (Caelum), “Podemos alterar a família de fontes que queremos

utilizar em nosso documento para a família "sans-serif"
80
(sem serifas), que contém, por exemplo, as fontes "Arial" e "Helvetica".

Podemos também declarar que queremos utilizar umafamília de fontes
"monospace" como, por exemplo, a fonte "Courier"”.
p{
font-family: serif;
}
h1 {
font-family: sans-serif;
}
H2 {
font-family: monospace;
}
“É possível, e muito comum, declararmos o nome de algumas fontes

que gostaríamos de verificar se existem no computador, permitindo
que tenhamos um controle melhor da forma como nosso texto será
exibido. Normalmente, declaramos as fontes mais comuns, e existe
um grupo de fontes que são consideradas "seguras" por serem bem
populares” (Caelum).
Quando as fontes usadas são aquelas não ornamentadas, isto é,

normais, pode-se criar essa propriedade por meio do elemento body.
Veja sintaxe abaixo:
body {
font-family: "Arial", "Helvetica", sans-serif;
}
Assim definido, o navegador terá a missão de verificar a existência da

fonte "Arial" caso disponível utilizará para os textos dos elementos do
do documento. Caso não disponível, o navegador irá verificará a
existência da fonte que foi declarada a seguir. Se também esta fonte
não estiver disponível, o navegador irá solicitar qualquer fonte que
pertença à família "sans-serif".
Existe outras formas de formatar fontes, como a propriedade font-

style. Este define o estilo da fonte normal (normal na vertical),
italic (inclinada) e oblique (oblíqua).
Alinhamento do Texto
Viu-se até aqui, uma série de propriedades e subpropriedades que
identificam o tipo e estilo da fonte. Existe outras maneiras de alterar a
disposição do texto, sendo a propriedade mais simples e mais usada a
do alinhamento de texto (text-align).
Sendo a sintaxe:
p{
Text-align: right; /* Texto alinhado a direita */
}
81
h1 {
Text-align: center; /* Texto centralizado */
}
p{
Text-align: left; /* Texto alinhado a esquerda */
}
p{
Text-align: justify; /* Texto alinhado a esquerda e a direita */
}
/* Este sinal significa em CSS o início de comentário

*/ Este significa o fim do comentário
Com sintaxes acima, pode-se alinhar o texto a direita, centralizar,

alinhar a esquerda e de forma justificada, isto é, a direita e a esquerda.
“O padrão é que o texto seja alinhado à esquerda, com o valor left,

porém é importante lembrar que essa propriedade propaga-se em
cascata. É possível configurar também uma série de espaçamentos de
texto com o CSS” (Caelum). Veja exemplo:
Figura 2.3.2 Espaçamento do texto com CSS. Fonte: (Caelum)
Imagem do Fundo
Ao executar a sintaxe, o navegador requisita o ficheiro que contém a

imagem que será o fundo da página, este ficheiro deve estar na mesma
pasta onde se encontra a declaração de css. Por exemplo:
h1 {
Background-image: url (sobre-background.jpg);
}
Bordas
Existe uma série de opções para a propriedade border. Pode cada

elemento ser determinado a sua borda e a sua cor. A sua forma de
escrever é resumida. Veja exemplos abaixo:
body {
82
Border-color: blue;
Border-style: solid;
Border-width: 2px;
}
Usando a forma resumida podia simplesmente ficar:
body {
border: 2px solid blue;
}
“Para que o efeito da cor sobre a borda surta efeito, é necessário que
a propriedade border-style tenha qualquer valor diferente do padrão
none” (Caelum).
Selectores de ID e Filho
Anteriormente até a esta secção, usava-se como identificador a letra ou

palavra da tag que antecedia na abertura da chaveta. É foma simples
mas é limitada na selecção. Há vezes que não se pretende globalizar a
selecção. Para isso, usa-se uma maneira avançada de selecção,
chamada de selectores de CSS. Neste manual vai-se mostrar dois
selectores básicos mais comumente utilizados.
Seletor de ID.
“É possível aplicar propriedades visuais a um elemento selecionado

pelo valor de seu atributo id. Para isso, o seletor deve iniciar com o
caractere "#" seguido do valor correspondente” (Caelum).
#cabeçalho {
color: red;
text-align: right;
}
Com o selector do exemplo acima, fará com que o elemento do HTML

com o atributo id com valor "cabecalho" tenha o texto enfatezadocom
a cor vermelha e alinhado a direita.
“Não há nenhuma indicação para qual tag a propriedade será aplicada.

Pode ser tanto uma <div> quanto um <p>, até mesmo tags sem
conteúdo como uma <img>, desde que essa tenha o atributo id com o
valor "cabecalho"” (Caelum).
Como se sabe, o atributo id deve ter apenas um valor único em todo
documento, o selector irá aplicar suas propriedades definidas somente
para àquele único elemento e os que hierarquicamente dependem a ele
(filhos).
Seletor hierárquico
Este selector aplica aos filhos os estilos do elemento pai, quando estes
são indicados pelo mesmo id.
83
No exemplo abaixo, o estilo do elemento pai “rodape” será usado

apenas aos filhos do elemento img com id=rodape.
#rodape img {
Margin-right: 30px;
Vertical-align: middle;
Width: 94px;
}
Propriedade Float
Esta propriedade permite fazer com que o texto e as imagens sejam

organizadas de formas diferentes. Ter imagem a esquerda e o texto a
direita, ter texto a esquerda e imagem a direita, ter imagem no meio do
texto e muito mais. Deixa a página mais ou menos com o aspecto que
temos visto diariamente nos jornais. Veja o exemplo abaixo:
Figura 2.3.3 Efeito de float.
Tendo um templete elaborado com a tag “ <figure> ” como se mostra

na sintaxe abaixo, teria-se como resultado a figura 2.3.4 abaixo:
<div>
<figure>
<img src=”/pasta_imagem/imagem.jpg” alt=”imagem.Xis”>
<figcaption>”Legenda da imagem”</figcaption>
</figure>
<p>Esta propriedade permite fazer com que o texto e as imagens
sejam organizadas de formas diferentes. Ter imagem a esquerda e o
texto a direita, ter texto a esquerda e imagem a direita, ter imagem no
meio do texto e muito mais</p>
<p>Esta propriedade permite fazer com que o texto e as imagens
sejam organizadas de formas diferentes. Ter imagem a esquerda e o
texto a direita, ter texto a esquerda e imagem a direita, ter imagem no
meio do texto e muito mais</p>
</div>
84
Figura 2.3.4 Usando tag figure sem float.
Isto acontece porque a tag <figure> abrange toda largura da página, não
permitindo o aparecimento de outros elementos ao seu lado. Para que
a imagem seja rodeada de texto seja a esquerda ou a direita, usa- se o
elemento float. Veja os exemplos das sintaxes abaixo:
figure {
float: left;
margin: 0 10px 10px 0;
}
Com a sintaxe acima, a imagem fica alinhada a esquerda.
Figura 2.3.5
Usando float: left.
E com a sintaxe abaixo, a imagem fica alinhada a direita.

figure {
float: right;
margin: 0 0 10px 10px;
}
Figura 2.3.5 Usando float: right.
85
Perguntas:
1. Qual é a função de Cascading Style Sheets – CSS numa página
web?
2. Porquê se usa o identificador ID na página html com CSS?
3. No Código CSS como saber que este é o identificador?
4. Em que consiste a sintaxe de CSS?
5. Qual é a função desta sintaxe de CSS?
body {
Border-color: blue;
Border-width: 2px;
}
6. Explique o que acontece no navegador com o documento
abaixo.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #FF7F00; background-color: #C0D9D9"> </p>
</body>
</html>
Respostas
1. A principal função de CSS numa página web é de estilizar a
página de forma dinamica.
2. Por ser um identificador único que faz a ligação do CSS com o
html.
3. O identificador único vem antes de abrir chavetas.
4. Consiste na declaração de propriedades e valores, separados
por dois pontos (:) e entre uma propriedade e outra é separada
por ponto e virgula (;).
5. A função da sintaxe é de criar e estilizar margens da página.
6. Com o documento, o navegador mostrará o conteúdo comuma
cor e o fundo com outra cor.
86
UNIDADE 2.4. Sumário da unidade, Exercícios de Auto-

Avaliação e de Avaliação
Nesta segunda unidade, vai-se falar do resumo ou sumário da

unidade, de exercícios de auto-Avaliação e de avaliação.
Sumário da Unidade
Através deste tema, aprendeu-se a estruturar uma página web em html,

formatando segundo as regras de programação de sites. Aprendeu-se a
construir e usar em html, listas, imagens, hiperlinks, tabelas, frames
(molduras) e formulários.
Teve-se ainda a ocasião de se aprender a usar de como formatar as páginas de
forma dinamica com o uso da ferramenta CSS, que torna a página mais
apreciavel.
Exercícios de Auto-Avaliação da unidade II
Perguntas:
1. O que é navegador ou browser?
2. Quantos passos são necessários para ter um programa html?
3. O que é preciso para executar um programa em html?
4. Quais são os tipos de lista usadas em html
5. Qual é a importância do hyperlink numa página Web?
6. Desenhe uma moldura (frame) que tenha três secções, a
primeira é de “logotipo”, a segunda de “menu” e a terceira de
“conteúdo” e fixar as molduras/frame.
7. Qual é a finalidade de Cascading Style Sheets – CSS numa página em
html?
8. Qual é a função do ID na página?
9. Desenhe uma página em html que mostre no navegador o
conteúdo em azul e o fundo vermelho.
10. Tendo a sintaxe abaixo, identifica a sua finalidade na página
html.
figure {
float: left;
}
11. A figura abaixo para ter a configuração que apresenta, usou-se

um elemento de CSS, que permite alinhar figuras em volta do
texto. Como se chama esse elemento?
87
Respostas
1. Navegador é uma ferramenta ou aplicação.
2. São necessários basicamente 4 passos.
3. É preciso ter:
• Computador
• Editor de texto
• Navegador
• O Texto – código
4. Os tipos de listas usadas em html são: Ordenadas, não-
ordenada e por definição.
5. O hyperlink facilita a ligação e visualização de outras

páginas que contém outros conteúdos.
6. <html>
<head>
</head>
SRC="/isced_beira/logotipoisced.png" NORESIZE
NAME="Cabeçalho"> <FRAMESET COLS="25%, 70%"> <FRAME
SRC="Segundoframe.html" NORESIZE NAME="Menú"> <FRAME
SRC="terceiroframe.html" NORESIZE NAME="Conteudo">
</FRAMESET>
</FRAMESET>
</html>
7. A finalidade de CSS numa página web é de estilizar a
página, dar mais brilho, isto é, tornar a página bonita.
8. O ID é um identificador único, que indica o elemento o qual
foi direcionado.
9. Este documento mostra o conteúdo em azul e o fundo
vermelho.
<!DOCTYPE html>
<html>
<head>
</head>
88
<body>
<p style="color: blue; background-color: Red"> </p>
</body>
</html>
10. Com a sintaxe, o float faz com que a imagem fique alinhado
a esquerda e o texto a direita.
11. O elemento chama-se de “float”.
Exercícios de Avaliação da unidade II
Perguntas:
1. Que navegador é compatível com html?
2. Indica pelo menos dois editores de texto onde pode escrever
um documento html?
3. Como identificar com a máxima facilidade um ficheiro html?
4. Quantos e quais são os tipos de lista usadas em html
5. Para que serve o hyperlink em html?
6. Como se chama a ferramenta que permite desenhar molduras
em html?
7. Como identificar que um documento html esta a usar CSS?
8. Que finalidade desempenha o elemento ID num documento
html com CSS?
9. Tendo a imagem abaixo, diga qual é o elemento que permite
este tipo de formatação em html.
10. Tendo a sintaxe abaixo, identifica a sua finalidade na página

html.
figure {
float: left;
89
Referências
Alvarez, M. A. (12 de 03 de 2014). Comentários em HTML.
Arrigoni, R. (s.d.). Curso de HTML para Iniciantes. Listas em HTML.
Basso, M. (2017). Inserindo e Manipulando Imagens em uma Página HTML.
br.udacity.com. (2018). Introdução ao HTML e CSS.
Caelum. (s.d.). Introdução a HTML e CSS.
De Carvalho, F. P. (10 de 2004). Introdução à Linguagem HTML. p. 33.
developer.mozilla.org. (11 de 04 de 2018). Criando Hiperlinks.
Eduardo, C. (22 de 11 de 2009). Tipos de Listas. Artigos sobre front-End,

Programação Web.
http://tableless.github.io. (s.d.). Estruturando e flutuando elementos.
http://www.clem.ufba.br. (s.d.). Formulários e Entradas (inputs) em HTML.
http://www.kadunew.com. (s.d.).
http://www.ufpa.br. (26 de 05 de 2008). HTML - Frames.
Kardhyr, F. M. (11 de 04 de 2018). Criando hyperlinks. Criando hyperlinks.
msdn.microsoft.com. (2010). Como Inserir Hiperlinks HTML.
Paulino, D. (22 de 05 de 2009). Formas de Organização de Páginas Web.
Pedroso, R. P. (06 de 2007). APOSTILA DE HTML. p. 101.
Picinini, B. (2010). Empreendedorismo Digital. Como Organizá-lo em seu Site

Para Máxima Performance.
Rená, P. (03 de 10 de 2008). Como Inserir um Link.
Ribeiro, D. C. (2018). Introdução ao HTML - Usando tabelas em HTML.
web.fe.up.pt. (s.d.). Site baseado em Frames.
wikipedia.org. (26 de 06 de 2018). Website wireframe.
www.google.co.mz. (s.d.). Imagens de Organização de páginas web.
www.htmlprogressivo.net. (10 de 2013). Como criar uma tabela em HTML.
www.smeduquedecaxias.rj.gov.br. (s.d.). Guia de Comandos de Estrutura.
90
TEMA – III: DESENVOLVIMENTO DE PÁGINAS DINAMICAS - HTML E JAVASCRIPT.
UNIDADE 3 – DESENVOLVIMENTO DE PÁGINAS DINAMICAS HTML - JAVASCRIPT
UNIDADE Temática 3.1. Introdução, Estrutura da unidade, Objectivos,

Desenvolvimento, Variáveis e Operadores.
UNIDADE Temática 3.2. Objectos, Declaração de variaveis, Funções,
Estrutura de controlo e Eventos.
UNIDADE Temática 3.3. Sumário e exercícios de auto-avaliação
UNIDADE 3.1. Introdução, Estrutura da unidade, Objectivos, Desenvolvimento,

Variáveis e Operadores
Introdução
Para melhor compreensão desta unidade, aconselha-se uma boa

leitura, exercícios e revisão geral das unidades anteriores. Recomenda-
se a apresentar todas as preocupações e duvidas encontradas ao longo
desse exercício das unidades anteriores.
Nas unidades anteriores, ensinou-se a criação e uso de páginas com

html, consideradas estáticas e viu-se também as páginas em php
(ligação com base de dados), que são chamadas de dinâmicas, assim
como as de interação em javascript que irá se aprender nesta unidade.
As páginas estáticas não interagem com o utilizador, quer dizer o seu

conteúdo mantem inalterável. As dinâmicas ou animadas assim como
são popularmente conhecidas, o seu conteúdo pode ser gerado ou
animado na medida que a página estiver a ser carregada ou acessada
pelo leitor/utilizador. Existe outras linguagens que fornecem mesmos
serviços, mas sendo esta uma disciplina de fundamentos em html, o
importante e indispensável são o próprio html, css, php e javascrit.
Estrutura da unidade
Esta unidade é composta por duas subunidade que uma delas visa
adoptar ao leitor sobre os conhecimentos de programação de páginas
interactivas ou dinamicas, isto é, páginas que interagem com o
utilizador. É esta unidade de Javascript, que aborda noções básicos
sobre a interactividade da página com o utilizador. A outra trata de
sumário e exercícios de autoavaliação do tema.
91
Objectivos
Ao finalizar o estudo deste tema de desenvolvimento de Páginas

Dinâmicas, o aluno deve ser capazes de:
Principal
➢ Desenvolver páginas HTML interactivas do lado cliente,
usando a tecnologia Javascript.
Objectivos • Utilizar eventos fornecidos por Javascript;

Específicos • Desenhar e desenvolver programas simples em Javascript;
• Validar formulários de HTML em javascript.
Desenvolvimento
Introdução
A linguagem de programação JavaScript, desenvolvida pela Netscape,

Inc., não faz parte da plataforma Java. “JavaScript é uma linguagem de
programação interpretada e orientada a objectos (OO).
Sintacticamente, o núcleo da linguagem JavaScript é semelhante a
linguagens como C, C++ e Java. O núcleo da linguagem JavaScript
suporta os números, sequências e valores booleanos como tipos de
dados primitivos. Ele também inclui suporte embutido para matriz, data
e objectos de expressão regular” (mozilla.org, 2017).
Esta linguagem é muito usada em navegadores web, tem um núcleo

de propósito geral, estendido com objectos que permitem a interação
com o utilizador através de scripts. O javascript já vem com uma versão
incorporada em páginas html e que também é conhecida como cliente-
side. Os scripts desta linguagem são executados pelo computador
cliente e não pelo servidor web como acontece no php.
“JavaScript é uma linguagem para auxílio na criação de páginas, as

funções escritas em JavaScript podem ser embutidas dentro de seu
documento HTML, possibilitando o incremento das funcionalidades do
documento HTML com elementos interessantes” (mozilla.org, 2017).
Assim, permite responder facilmente a eventos iniciados pelo utilizador

e incluir efeitos que tornem a página dinâmica. “Apesar de sintaxe
nomes bem-parecidos, Java não é o mesmo que JavaScript”
(mozilla.org, 2017).
92
Comparação de Java e JavaScript
São duas técnicas diferentes de programação na Internet. Java é uma

linguagem de programação. JavaScript é uma linguagem de hipertexto
como o html. Veja a figura:
Figura 3.1.1 Diferença de javaScript com o Java e as palavras reservadas

do JavaScrit Fonte: (http://orium.pw/univ, 2009/2010).
Segundo (mozilla.org, 2017), “Client-side JavaScript combina a

capacidade de script de um interpretador de JavaScript com o
Document Object Model (DOM) definido por um navegador Web. Os
documentos podem conter scripts JavaScript, e os scripts podem usar
o DOM para modificar o documento ou controlar o navegador que exibe
o documento”.
Como se referiu anteriormente que na sua forma no geral, o JavaScript

vem embutido nos documentos html, por isso, não cria aplicações
independentes. Como reforço, pode-se dizer que as principais
diferenças de JavaScript e Java sâo:
• Java é uma linguagem de programação OOP, por outro lado,
Java Script é uma linguagem de scripts OOP.
• Java cria aplicações executadas em uma máquina virtual ou em
um browser, Para o caso do código JavaScript é executado
apenas em um browser ou computador cliente.
• O código Java precisa ser compilado, Já para os códigos
JavaScript estão totalmente em texto.
• Eles requerem plug-ins diferentes.
93
Hierarquia de documento cliente e Document Object

Model (DOM).
Hierarquia de documentos do lado Cliente e o Document Object

Model (DOM).
Este é um dos ambientes de navegação de uma página web. Para

melhor compreensão do JavaScript deve primeiro entender o seu
ambiente de programação. Aqui vai se falar das três características
importantes desse ambiente:
• A Janela do objecto – desempenha a função de objecto global

no contexto de execução global para o código JavaScript.
• A hierarquia de objectos do lado cliente – é o Document Object
Model.
• O modelo de programação orientada a eventos – é a secção que
visa o papel apropriado do JavaScript no desenvolvimento de
aplicações Web.
• Window – é o contexto de execução global.
A principal tarefa de um navegador de páginas é exibir documentos

HTML em uma janela. No caso do JavaScript, o objecto Document
Representa um documento HTML, e a janela do navegador representa
objecto Window. O Document e Window são ambos importantes para
JavaScript.
Considera-se mais importante o objecto Window por ser o objecto

global da programação do lado cliente. É este que define um número de
propriedades e métodos que vão permitir a manipulação da janela do
navegador Web e de outras propriedades que referênciam outros
objectos importantes.
Falando-se da hierarquia de objectos do lado do cliente e o DOM,

objecto Window considera-se o objecto-chave no JavaScript. Porque
todos outros objectos que fazem parte do lado cliente são acessados
através deste objecto.
O (mozilla.org, 2017), considera “Objecto de documento associadocom

a janela define é uma propriedade location para se referir à localização
da janela”. É de notar, que esta propriedade deve ser usada quando um
navegador da Web esta a usar quadros, o array frames [], por conter
referências aos objectos window da janela.
Cada objecto do documento possui o array forms [], este contém

objectos Form que representam formulários em HTML. Para referenciar
esses formulários, fica: window.document.forms [0].
De referir que cada objecto de formulário possui o array elements []

contendo outros objectos que representam os elementos de
formulário HTML (botões, campos de
94
entrada e mais.), isto é, campos que aparecem no formulário.
Com a experiência, que vem da dedicação, pode escrever um código

para referir um objecto no final de uma sequência de objectos, que
finaliza com expressões tão complexas, como uma destas:
parent.frames [0].document.forms [0].elements [3].options [2].t ext
Considere a hierarquia abaixo, que possui como raiz o objecto window:
Figura 3.1.2 Hierarquia Window. Fonte: (www.devmedia.com.br, 2013).

Como pode verificar, Object window, considera-se o principal objeto do
Javascript, onde assume na sua hierarquia o nível mais alto dos objetos
disponíveis nessa lingugem javascript. Veja a figura 3.1.2.
“Esse objeto permite aos desenvolvedores criar e abrirem novas janelas

de maneiras diferentes. Esses processos são possíveis através das
propriedades e métodos que o objeto window possui. Para utiliza- los
basta seguirmos a seguinte sintaxe” (www.devmedia.com.br, 2013).
• Window.propriedade
• Window.metodo
Inserição do código javascript em html.
O código JavaScript do lado cliente é inserido dentro de documentos

html de várias maneiras, dentre as quais vai-se mostrar algumas mais
representativas:
95
• Entre um par de tags <script> e </scripts>;

• Arquivo externo especificado pelo atributo src de um tag
<script> Em um manipulador de evento, que especificou como o
valor de um atributo de HTML como on click ou on mouse over;
• Em um URL que usa o javascript: protocolo.
Do lado cliente a tag <script> do javascript faz parte do ficheiro html,

e codificados dentro das tags <script> … </script>. Veja a sintaxe:
<script>
// Entre estas duas tags de iniciar e fechar script, escreve-se o código
Javascript.
</script>
Quando é de referência ou ficheiro externo, usa-se a sintaxe:
<script src="../../scripts/ficheiro.js"></script>
“Um arquivo JavaScript normalmente tem uma extensão .js e contém
JavaScript puro, sem tags <script> ou qualquer outro tag HTML”
(www.devmedia.com.br, 2013).
Variáveis e Operadores.
Variáveis
O JavaScript usa variáveis dinâmicas, cujas essas podem ser criadas e

inicializadas sem declarações formais.
Existem duas formas de declaração e criação de variáveis no javascript,
• “Locais” - 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
• “Globais” - Declaradas/criadas fora de uma função. Podem ser
acessadas em qualquer parte do programa.
Nesta linguagem, os nomes das variáveis devem começar por uma letra
ou pelo caracter sublinhado “_”, o restante da definição do nome pode
conter qualquer letra ou número.
Não esqueça que o javascript é uma linguagem “case sensitive”,
diferencia as palavras segundo como se escreve: Exemplo “Cidade” é
diferente da variável “cidade”, que por sua vez é diferente de “CIDADE”,
sendo assim, é necessário muita atenção ao definir so nomes das
variáveis. Aconselha-se utilizar sempre o mesmo padrão.
Existem três tipos de variáveis: Numéricas (armazenam números),

Booleanas (valores lógicos (True/False)) e Strings (sequência de
caracteres).
As variáveis strings podem ser delimitadas por aspas simples ou duplas,
só ter o cuidade, se começar com as aspas simples, deve terminar com
aspas simples, da mesma forma para as aspas duplas.
Quando uma variável possui o valor NULL, significa que ela possui um
valor desconhecido ou nulo. E representa-se pela string 'null', mas sem
os delimitadores. Não esqueça que
96
NULL é uma palavra reservada em javascript.
Operadores
Operadores são blocos de construção de expressões, assim como
funções e variáveis. Um operador é semelhante a uma função no
sentido de que executa uma operação específica e retorna um valor.
Veja a abaixo a tabela de operadores:
Figura 3.1.3 Operadores em javascript.
97
Perguntas
1. Quem desenvolveu a linguagem JavaScript?
2. Quando é que se considera a página ser dinâmica?
3. Quais são as principais diferenças de Java e JavaScript?
4. Descreva as características da linguagem javascript.
5. Em javascript onde são declaradas as variáveis (Locais e
Globais)?
Respostas
1. A linguagem de programação JavaScript, foi desenvolvida pela
Netscape, Inc.
2. Quando o seu conteúdo pode ser gerado ou animado na medida
que a página estiver a ser carregada ou acessada pelo
leitor/utilizador
3. As principais diferenças de JavaScript e Java sâo:

• Java é uma linguagem de programação OOP, por outro
lado, Java Script é uma linguagem de scripts OOP.
• Java cria aplicações executadas em uma máquinavirtual
ou em um browser, Para o caso do código JavaScript é
executado apenas em um browser ou computador
cliente.
• O código Java precisa ser compilado, Já para os códigos
JavaScript estão totalmente em texto.
• Eles requerem plug-ins diferentes.
4. As características importantes deste ambiente são:

• A Janela do objecto – desempenha a função de objecto
global no contexto de execução global para o código
JavaScript.
• A hierarquia de objectos do lado cliente – é o Document
Object Model.
• O modelo de programação orientada a eventos – é a
secção que visa o papel apropriado do JavaScript no
desenvolvimento de aplicações Web.
• Window – é o contexto de execução global.
5. No javascript as variáveis podem ser locais ou globais e declara-

se:
• “Locais” - 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
• “Globais” - Declaradas/criadas fora de uma função.
Podem ser acessadas em qualquer parte do programa.
98
UNIDADE 3.2. Objectos, declaração de variáveis, Funções, estrutura de

controlo, Eventos e Cookies.
Objectos de JavaScript.
Em JavaScript pode-se criar objectos, com seus atributos, estando

sujeitos a determinados métodos, geralmente esses métodos são
funções que geram alguma informação referente ao objecto. A única
forma de manipular os arrays em javascript é trabalhar com objectos.
Como exemplo, ao implementar uma lista de clientes, o objecto poderia
ser definido desta maneira:
Function CriaClientes (nome,endereco,telefone)

{
this.nome=nome;
this.endereco=endereco;
this.telefone=telefone;
this.salario=salario;
}
Verifica que a propriedade “this” indica o objecto actual, isto é, fonte

dos valores atribuidos a função. Assim, pode criar um objecto, veja
exemplo:
Analista = New CriaClientes (‘Analista Fijamo', 'Av 24 de Julho ',

'841616450') Como recuperar ou ter os valores das propriedades do
objecto Analista, é só usar a sintaxe:
Analista.nome - retorna 'Analista Fijamo' Analista.endereco - retorna
'Av 24 de Julho' Analista.telefone - retorna '841616452'.
Também pode referenciar as propriedades do objecto usando outra

forma, definindo como tipo vector:
Analista [0], Analista [1], Analista [2]

A outra forma mais prática de criar arrays seria tipa matriz:
Function Matriz (n)

{
this.length=n
for (var contador=1;
contador <=n ;
conatdor=contador+1)
{
this[contador]=""
}
}
99
Para criar a matriz, supõe-se que pretende-se as províncias de

Moçambique, teria:
ProvMoc [1] = “Niassa”
ProvMoc [2] = “Cabo Delgado”
ProvMoc [3] = “Nampula”
ProvMoc [4] = “Zambézia”
….
ProvMoc [11] = “Maputo Cidade”
Declaração de variável e Funções em JavaScript.
Declarar variaveis
Em JavaScript, nem sempre é necessário definir uma variável antes de

usar. Para definir variáveis usa-se a instrução “var”. Se definir uma
variável e não ser inicializada, JavaScript considera como se esta
variável tive-se um valor desconhecido ou nulo. Não é obrigatória para
cada variável o uso da instrução “var”, pode-se declarar muitas variáveis
em uma só instrução var.
Forma geral:
Var NomeDaVariável [= <valor>];
Exemplo:
Var Contador = 0;
Var Inic="", Total=0, Nome="Jones";
Var Teste; // Neste caso, Teste possui valor null
Funções
Considera-se funções, um conjunto de instruções, agrupadas para
executar ou resolver uma determinada tarefa. Dentro de uma função
pode conter um laço de chamada a outra função.
Uma função ao usar o comando return, pode ou não devolver alguma
informação. Veja o exemplo da aplicação:
Function NomeDaFunção ([ parametro1, parametro2, ..., parametroN

])
{
...
[Return (ValorDeRetorno)]
}
As declarações das funções são feitas entre as tags <head> de
documento HTM. Estas funções são invocadas por eventos accionados
pelo utilizador. Como são declaradas nas tags <head>, são carregadas
antes que o utilizador faça algum que chame uma função. Exemplo:
<html>
<head>
<script language="JavaScript">
Function saudação ()
{
100
alert("Ola mundo de Acadêmicos!!!");

}
</script>
</head>
<body>
...
<script>saudacao();
</script>
...
</body>
</html>
Estruturas de controlo de JavaScript.
São comandos de instruções usados para o controlo das rotinas

segundo os objectivos desejados para alcançar, assim tem-se:
Estrutura If… else

A estrutura If... Executa uma determinada condição se verdadeira se
não verdadeira (falsa), executa a outra condição. Exemplo:
Function VerificarIdade (anos)

{
If anos> = 15
{
Return ('Já pode estudar no ISCED!')
}
else
{
Return (' Ainda não pode estudar no ISCED')
}
}
Estrutura For
Repete a condição em um determinado número de vezes, marca o
início. A declaração é seguida por uma ou mais declarações executáveis,
que representam o corpo da estrutura.
Sintaxe:
For (<inicialização> ; <condição> ; <acção>)

{
Corpo da Estrutura
}
Exemplo:
For (var contador = 1; contador <11; contador++)
{
101
Document.write (Contador);
}
Estrutura While
Invés de no número de repetições, cria um loop baseado numa

condição.
Sintaxe:
While (<condição>)
{
Corpo da Estrutura
}
Exemplo: Var Contador=1; While (Contador <11)
{
Document.write (Contador++);
}
Pode-se dizer que as estruturas de controlo for, while e do while funcionam

da mesma maneira como em C e Java, isto inclui também os comandos break
e continue. Veja exemplo da sintaxe do for e do while:
for (x=0; x< 15) { }
do {
} while (x < 15);
Eventos básicos em JavaScript.
Alguns dos eventos básicos
Figura 3.2.1 Eventos de javascript. Fonte: (www.devmedia.com.br,

2013)
Como usar os eventos em JavaScript
Os eventos podem ser usados em html de diversas maneiras:
• Inline
Deve ser tudo definido diretamente na tag do elemento, veja
102
exemplo:
<!DOCTYPE
html>
<html>
<head>
<title>Usando o evento onClick no Javascript</title>
</head>
<body>
<h1 onclick="this.innerHTML='Ao usar o evento onClick!'">Clique
neste link como teste do evento onClick!</h1>
</body>
</html>
• Em um ficheiro externo, usa um manipulador de eventos;

“Para chamar um evento externo será necessário um
manipulador de eventos, são muitos manipuladores de eventos,
neste caso usou-se o event listener, este adiciona ou remove um
evento sobre qualquer elemento.” (www.devmedia.com.br,
2013).
O Event Listener disponibiliza duas funções principais:
• addEvent - Incrementa uma função que será disparada

se ocorrer algum evento no objeto.
• removeEvent - Retira um listener previamente
incrementado em um objeto e retorna verdadeiro em
caso de sucesso.
Figura: 3.2.2 Usando Event Listener. Fonte: (www.devmedia.com.br,

2013).
103
Veja abaixo outros exemplos de adicionar e remover

elementos:
Para inserir/adicionar elemento
Figura 3.2.3 Adicionar elemento em javaScript. Fonte: (Junior,

2014)
Para remover elemento:
Figura 3.2.4 Remover elemento em javaScript. Fonte: (Junior,

2014).
Finalizando esta unidade, da-se uma noção do que é Cookie, este
elemento é muito falado em páginas:
Cookies
“Cookies são variáveis que ficam armazenadas no browser do visitante,
basicamente elas permitem que a página lembre de qualquer
informação ou interação que já teve com o mesmobrowser/utilizador
que está acessando novamente” (Junior, 2014).
104
Então cookies podem ser:

– Datas;
– Dados Pessoais;
– Login;
– Senha;
– Informações de Seção de Conexão;
Etc...;
Veja exemplo:
Figura 3.2.5 Usando cookie. Fonte: (Junior, 2014)
Figura 3.2.6 Função cookie. Fonte: (Junior, 2014)
105
Perguntas
1. Elabore uma sintaxe em javascript, que recupera os valores das

propriedades do objecto Aluno (Nome=João António,
curso=Gestão de Informação e disciplina= Fundamentos de
html)
2. Cria uma matriz que contém os meses do ano.
3. Crie uma função que lê idade, se mair ou igual 18 ou menor

que 18, retorna se pode ou não votar.
4. Os eventos em javaScript podem ser usados em html de diversas

maneiras, sendo o mais comum, o modo (inline e ficheiro
externo). Em poucas palavras, descreva o uso do ficheiro
externo.
5. O que são cookies? Dê alguns exemplos.
Respostas
1. Aluno = New CriaAluno (‘João António', Gestão de Informação

', 'Fundamentos de html')
sintaxe:
Aluno.nome - retorna João António' Aluno.Curso - retorna
Gestão da Informação ' Aluno.Disciplina - retorna 'Fundamentos
de html'.
2. Resposta:
MesAno [1] = “Janeiro”

MesAno [2] = “Fevereiro”
MesAno [3] = “Março”
MesAno [4] = “Abril”
….
MesAno [12] = “Dezembro”
3. Function IdadeVoto (anos)

{
If anos> = 18
{
Return ('Já pode votar!')
}
else
{
Return (' Ainda não pode votar')
}
106
4. Em um ficheiro externo, usa um manipulador de eventos, são

vários manipuladores, um deles é o listener, este adiciona ou
remove um evento sobre qualquer elemento.
5. Cookies são variáveis que ficam armazenadas no browser do

visitante, basicamente elas permitem que a página lembre de
qualquer informação ou interação que já teve com o mesmo
browser/utilizador que está acessando novamente. Exemplo:
– Datas;
– Dados Pessoais;
– Login;
– Senha;
– Informações de Secção de Conexão;
107
UNIDADE 3.3. Sumário da unidade, Exercícios de Auto-

Avaliação e de Avaliação
Nesta unidade trata-se do resumo ou sumário da unidade 3 ou

do tema III, de exercícios de auto-Avaliação e de avaliação desta
terceira unidade de fundamentos de html.
Sumário da Unidade
Nesta unidade, aprofundou-se o uso de html para criação de documentos,

aprendeu-se a desenvolver páginas HTML interactivas do lado cliente,
usando a tecnologia Javascript, aprendeu-se a usar eventos do
Javascript, desenhar e desenvolver programas usando a linguagem de
scripts, assim como validar formulários de html no javascript.
Exercícios de Auto-Avaliação da unidade III
Perguntas:
1. Crie uma função Javascript que valida um campo de um
formulário HTML para receber apenas valores numéricos entre
1 e 30. Quando forem inseridos valores que não fazem parte
deste intervalo, o programa deve exibir uma mensagem de
alerta a informar a inserção de dados não é valida.
2. Crie uma função Javascript que calcula a raiz de uma equação

linear (Ax+B=0). Os valores de A e B devem ser lidos em um
formulário HTML.
3. Crie uma página HTML com Javascript embutido, em que uma

função lê dois valores inteiros de um formulário e calcula a
média desses valores.
4. Faça um programa que vai ler 3 números inteiros positivos,

some-os e exiba no navegador uma mensagem com o resultado
apenas se a soma for maior que 75.
5. Num Municipio possui 2 candidatos a presidente do Municipio:

o candidato José Pimenta, do Partido Gostoso e o candidato
João Goiaba, do Partido Crença. Os eleitores votam nos
candidatos pelo número do partido. Para votar no candidato
José Pimenta do Partido Gostoso, precisam digitar o número 1.
Para votar no candidato João Goiaba, do Partido Crença,
precisam digitar o número 2.
Faça um programa que faz a simulação de uma urna eletrônica.
Para cada eleitor, primeiro deve ser lido o número do seu título
de eleitor e depois é que o eleitor poderá digitar o seu voto.
Para encerrar ou terminar a eleição,
108
deve ser digitado um valor negativo (menor do que 0). O

programa deve Informe quantos votos cada candidato teve e
qual deles ganhou a eleição.
6. Para um jogo de guerra, precisa-se saber se algum personagem

foi atingido ou não depois de sofrer um ataque. Faça uma
função que receba 2 parâmetros, “Atingido e Ileso. A função
deve retornar verdadeiro se o atingido for atacar mortalmente
o personagem ileso (ou seja, ileso menor ou igual a zero) e
falso caso contrário.
7. Crie uma classe de objecto, usando uma função construtora de

javascript, chamada CartaNaMesa. A função construtora vai
receber parâmetros xNumero e xNaipe, que são guardados nos
atributos numero e naipe. Esse objecto também possui o
método exibir (), que mostra as informações da cartaNaMesa na
tela.
8. Tendo a fórmula de conversão de Fahrenheit (F) para Celsius,

que é: C = ( ( F - 32 ) * 5 )/9. Faça um programa que peça ao
utilizador uma temperatura em Fahrenheit, converta essa
temperatura para graus Celsius e escreve o valor em Celsius no
navegador.
9. Faça uma função em JavaScript que receba um parâmetro

numérico e crie um Array com o número de elementos passado
como argumento e o inicie com valores entre 1 e o número
passado como argumento.
10. Escreva um programa que mostra o cálculo de uma tabuada (até

5x) de um número qualquer, digitado pelo utilizador.
Respostas
1.
<html>
<head>
<script type="text/javascript">
function valida()
{
var aux=document.getElementById("fnum").value
var num=parseInt(aux); if (num<1 || num>30)
{
alert("O valor introduzido não é valido. Deve estar no
intevalo{1, 30}");
}
else
{
109
document.write("valor valido");
}
}
</script>
</head>
<body>
<form onsubmit="valida()">
Inserir o Nr: <input type="text" id="fnum" size="20"><br />
<input type="submit" value="validar">
</form>
</body>
</html>
2.
<html>
<head>
function linear()
{
var a=document.getElementById("a").value
var b=document.getElementById("b").value
if (parseFloat(a)!=0)
{
var raiz=-(parseFloat(b)/parseFloat(a));
document.write("Raiz da equacao: "+raiz);
}
else
{
alert("O valor de A nao pode ser zero");
}
}
</script> </head> <body> <form onsubmit="linear()">
valor de A: <input type="text" id="a" size="20"><br />
valor de B: <input type="text" id="b" size="20"><br />
<input type="submit" value="validar">
</form>
</body>
</html>
3.
<html>
<head>
Function media()
{
var v1=document.getElementById("valor1").value
var v2=document.getElementById("valor2").value
return (v1+v2)/2;
}
110
</script>
</head>
<body>
<form>
ValorA: <input type="text" id="valor1"> <br />
ValorB: <input type="text" id="valor2"> <br />
Resultado: <input type="text" id="resultado"> <br />
<input type="submit" value="Calcula">
</form>
</body>
</html>
4.
var n1, n2,n3 soma;
console.log ("Digite o valor do n1: ");
n1 = Number (prompt ());
soma = n1 + n2+n3;
if (soma > 75)
{
console.log ("O resultado é " + soma);
}
5.
var numero, totalJosePimenta, totalJoaoGoiaba;
totalJosePimenta = 0;
totalJoaoGoiaba = 0;
do {
console.log("Digite seu numero de eleitor:");
numero = Number(prompt());
if (numero >= 0) {
console.log("Candidatos:\n1 – José Pimenta, Partido
Gostoso.\n2 – João Goiaba, Partido Crença.");
var voto = Number(prompt());
switch (voto) {
case 1 : totalJosePimenta++; break;
case 2 : totalJoaoGoiaba++; break;
default : console.log("Voto nulo.");
}
console.log("Parabéns, cidadão Moçambicano!");
}
} while (titulo >= 0);
// exibir totais
console.log("Resultado:\nJosé Pimenta teve " +
totalJosePimenta +" votos.\nJoão Goiaba teve " +
totalJoaoGoiaba + " votos.");
if (totalJosePimenta > totalJoaoGoiaba) {
111
console.log("José Pimenta foi eleito.");

}
else if (totalJoaoGoiaba == totalJosePimenta) {
console.log("A eleição empatou, Haverá nova eleição.");
}
else {
console.log("João Goiaba foi eleito.");
}
6.
function JogoDeGuerra (Atingido, Ileso) {
if (Atingido >= Ileso) {
return true;
}
else {
return false;
}
}
7.
function CartaNaMesa (xNumero, xNaipe) {
this.numero = xNumero;
this.naipe = xNaipe;
this.exibir = function () {
switch (this.numero){
case 1 :
console.log("Ás de " + this.naipe);
break;
case 11 :
console.log("Valete de " + this.naipe);
break;
case 12 :
console.log("Dama de " + this.naipe);
break;
case 13 :
console.log("Rei de " + this.naipe);
break;
default :
console.log(this.numero + " de " + this.naipe);
break;
}
}
}
8.
var temperatF, temperatC;
temperatF = Number(prompt());
temperatC = (tempF - 32)*5/9;
console.log("A temperatura em Celsius é " + temperatC);
112
9.
<html>
<head>
function processa()
{
var aux=document.getElementById("fnum").value
var numero=parseInt(aux); arraynumeros(numero); }
function arraynumeros(num)
{
var aux=parseInt(num);
var a = new Array();
for(var i=0; i < num; i++)
{
a[i]=i+1;
}
document.write("Elementos do array com "+aux+"
elementos:<br/> ");
for(var j=0; j<num; j++)
{
document.write(a[j]+"<br/> ");
}
}
</script>
</head>
<body>
<form onsubmit="processa()"> Inserir o Nr: <input type="text"
id="fnum" size="20" /><br />
<input type="submit" value="Criar Array" />
</form>
</body>
</html>
10.
console.log("Digite o primeiro valor: ");
var valor = Number (prompt());
for (var contador = 1; contador <= 5; contador++)
{
var tabuada = contador * valor;
console.log (valor + " x " + contador + " = " + tabuada);
}
113
Exercícios de Avaliação da unidade III
Perguntas:
1. Quais são as duas funções principais disponibilizadas por Event

Listener?
2. Faça uma função em JavaScript que receba como argumento um

array, procura o maior elemento do array e devolva o seu valor.

array e calcule a soma dos elementos do array.
4. Faça uma função que receba uma string de dígitos numéricos e

retorna uma string com os vários dígitos numéricos por extenso
e separados por vírgula. Ex.: “102” - “um,zero,dois”.

array e calcula a média dos elementos do array.
6. Faça uma função que receba uma string e retorne a string

inversa.

array, procura os elementos do array divisiveis por 2 edevolve o
valor divisivel.
8. Escreva um programa que lê dois números, depois da leitura

apresenta um menu de opções como se mostra abaixo:
Escolha a opção:
A- Soma de 2 números.
B- Diferença entre 2 números (maior pelo menor).
C- Produto entre 2 números.
D- Divisão entre 2 números (o denominador não pode ser
zero).
O programa deve ler a opção do utilizador e executar a operação
com os dois números lidos anteriormente. Caso a opção digitada
seja inválida, apresente a mensagem “A opção escolhida é
inválida”. Não esqueça de usar funções para melhor organizar o
seu programa.
9. Faça um programa para contar uma sequencia de números, e

retornar de forma inversa.
114
Referências
Bernal, V. B. (2013 - 2015). Introdução à linguagem html.

Programação Web.
http://orium.pw/univ. (2009/2010). Linguagens e Ambientes de

Programação.
http://php.net. (s.d.). O que é o PHP?
Junior, V. H. (2014). Introdução ao JavaScript.
mozilla.org. (29 de 12 de 2017). Tecnologias web para desenvolvedores

javascript.

115
www.apachefriends.org. (s.d.). Instalando Xampp para windows.
www.devmedia.com.br. (2013). Explorando as propriedades do objeto

window em JavaScript.
www.w3schools.com. (s.d.).
116
TEMA – IV: DESENVOLVIMENTO DE PÁGINAS HTML E PHP
Este tema é composto por 3 unidades, sendo a primeira destinada a

falar da introdução, Objectivos, Sintaxe básica, Instalação do servidor
virtual e Primeiro script em php. A segunda unidade vai tratar de tipos
de operadores, variáveis, constantes, estrutura de controlo, funções,
classes e objectos. A terceira unidade trata do sumário e exercícios de
auto-avaliação do tema.
UNIDADE 4 – DESENVOLVIMENTO DE PÁGINAS HTML - PHP
UNIDADE 4.1. Introdução, Objectivos, sintaxe básica de php,

instalação do servidor e Primeiro script.
UNIDADE 4.2. Constantes, variaveis, Tipo de operadores, Estrutura de
controlo, Funções, Classes e Objectos.
UNIDADE 4.3. Sumário e Exercícios da unidade.
UNIDADE 4.1. Introdução, Objectivos, sintaxe básica, instalação do servidor e

Primeiro script.
Introdução
Personal Home Page - PHP é a linguagem de script de código aberto e

licença livre (open source) bastante usada na programação de páginas
web, destinada ao uso geral. Segundo (wikipedia.org, 2018) “PHP
(um acrônimo recursivo para "PHP: Hypertext Preprocessor",
originalmente Personal Home Page) é uma linguagem
interpretada livre, usada originalmente apenas para o desenvolvimento
de aplicações presentes e atuantes no lado do servidor, capazes de
gerar conteúdo dinâmico na World Wide Web. Figura entre as
primeiras linguagens passíveis de inserção em documentos HTML”. Isto
quer dizer, que também pode ser embutida dentro do HTML como
mostra a figura 4.1.1 abaixo:
Figura 4.1.1 PHP e html. Fonte: (http://php.net)
117
“Em vez de muitos comandos para mostrar HTML (como acontece com C ou
Perl), as páginas PHP contém HTML em código mesclado que faz "alguma
coisa" (neste caso, mostra "Olá, eu sou um script PHP!"). O código PHP é
delimitado pelas instruções de processamento (tags) de início e fim
<?php e ?> que permitem que entre e saia do modo PHP." (http://php.net).
Ao longo deste tema, aprender-se-á de como identificar e usar a sintaxe

desta linguagem. O php se diferencia de algumas outras linguagens
como por exemplo javascript que irá se falar mais adiante,é porque o
php é executado no servidor, gera html e depois enviadoao navegador.
Para se dizer, que o navegador recebe o resultado da execução do script
de php. “Você pode inclusive configurar seu servidor web para
processar todos os seus arquivos HTML com o PHP” (http://php.net)
Figura 4.1.2 historial de php. Fonte: (wikipedia.org, 2018)
118
Objectivos
Nesta parte, vai-se mostrar os objectivos (principal e específicos) da
unidade.
No fim da unidade, espera-se o aluno ser capaz de:
Objectivo Geral
➢ Usar com eficiência a linguagem PHP em HTML.
➢ Ligar HTML com a base de dados (mysql).
Objectivos
Específicos
▪ Usar a sintaxe de php em html;
▪ Criar base de dados em php/Mysql a usar em html;
▪ Saber diferenciar comandos php com os do html;
▪ Enviar dados do formulário html para servidor web e interagir páginas php
com base de dados.
Sintaxe básica de php
O código PHP fica embutido no próprio HTML. Esta é uma linguagem de

programação interpretada, para páginas dinâmicas. É o nterpretador
que identifica se o código é PHP. Ele pode identificar através das tags
abaixo, que é a sintaxe desta linguagem.
<?php comandos a usar ?>

<script language=”php”> comandos a usar </script>
<? comandos a usar ?>
<% comandos a usar %>
Em PHP cada instrução deve ser usada ponto e virgula, na última

instrução de script pode não usar, mas aconselha-se usar por questões
de estética textual.
Váriavel: Em php toda variável deve ter um nome formado pelo

caracter “$” e string que inicia por caracter “_” ou uma letra. Na
formação de variáveis, é necessário observar que esta é umalinguagem
case sensitive, ao contrário de html como se viu anteriormente. Case
sensitive diferencia minusculas com maiúsculas. As variáveis $dados e
$DADOS consideram-se diferentes em php. Nesta linguagem de
programação de páginas dinâmicas, aconselha-se a evitar o uso de
maiúsculas para definir variáveis. O php tem algumas
119
variáveis pré-definidas em maiúsculas, o que pode vir a criar conflitos,

por isso, aconselha-se a criar variáveis com minusculas.
Comentários: Usa-se como comentário os caracteres “#”, “//” e “/*”

“*/”. Ao comentar uma linha ou um bloco pode usar os caracteres (# ou
//). Veja o exemplo:
1. <? echo “Aprendendo a comentar no php”; # este é um teste

de comentário?>
2. <? echo “Aprendendo a comentar no php”; //esta é a outra
forma de comentar igual ao anterior?>
Quando se trata de um bloco de instrução, usa-se os caracteres /*

para iniciar o comentário e */ para terminar o comentário. Tudo que
estiver dentro ou entre os caracteres de comentários, não serão
apresentados pelo interpretador. Exemplo:
<? echo “Aprendendo a comentar no php com mais de uma linha”; /*

Isto é um comentário com mais de uma linha */?>
Visto a sintaxe de php e por ter conhecimento que as páginas em php

funcionam no servidor, agora é a vez de instalar um servidor virtual para
o seu uso.
Instalação de servidor apache xampp
É fácil fazer a instalação, apenas siga os passos dados como

recomendação para instalação. Existe outros servidores como por
exemplo o Wamp que também é muito usado. Neste manual vai-se usar
o servidor Apache, conhecido como Xampp. Para os devidos efeitos,
pode fazer o download (baixar) o ficheiro de instalação através do link:
http://www.apachefriends.org/download.php?xampp-win32-1.8.0-
VC9installer.exe
Para acessar directamente através deste manual, pressione a tecla Ctrl
e clique com o mouse (rato) em cima do link fornecido acima.
120
Figura 4.1.3 Instação de Xampp. Fonte: (www.apachefriends.org)
Tendo a imagem da figura acima, poderá ter mais opções de escolha,

para tal, clique no “Requirements Add-ons More Downloads>>” que se
vê um pouco mais abaixo na figura 4.1.4. Feito isso, terá a imagem da
figura abaixo, clique no botão correspondente ao seu sistema
operativo. Para este manual, vai usar-se o Xampp Windows.
Figura 4.1.4 Instalando Xampp. Fonte: (www.apachefriends.org)
121
Ao clicar, visualizará as versões de Xampp disponíveis para instalação.

Aqui escolheu-se a primeira opção que é a pasta recente, depois de
clicar na opção desta pasta, irá se mostrar o software de instalação.
Figura 4.1.5 Instalando Xampp. Fonte: (www.apachefriends.org)
Selecciona-se a versão do software, é aconselhável verificar sempre as

características do seu computador e do sistema operativo que está a
usar, para evitar escolher versões não compatíveis. Como por exemplo
escolher versão de Linux enquanto usa Windows.
Figura 4.1.6 Xampp para instalação. Fonte: (www.apachefriends.org)
122
O servidor Apache Xampp já vem com o PHP e o sistema de gestão de

base de dados Mysqul.
Ao clicar na opção escolhida, terá uma imagem como a da figuraabaixo,

é seguir os passos que forem a ser solicitados pelo software.
Figura 4.1.6 Instalando o Apache Xampp.
Esta é a primeira janela do assistente de instalação, deve seguir os

passos, clicando no next (próximo). Terminando, terá o servidor Web
Apache Xampp instalado no computador.
Teste a instalação para certificar se foi terminada com sucesso, para

isso, clique no Start Menu do Windows, vai para Xampp Control panel,
se a versão do seu sistema operativo Windows não te permite ter todos
programas a partir do botão Start, faça o search (procura) e escreva na
janelinha de procura a palavra “Xampp”, mostrará “Xampp Control
Panel”. Veja a figura abaixo:
Figura 4.1.7 Procura de objectos no windows
123
Tendo uma imagem como a da figura abaixo, indica que o seu servidor
virtual foi instalado com sucesso.
Figura 4.1.8 Teste do servidor Apache Xampp
Se este aparecer e não estar activo, clique os botões start que estão na
coluna de Action, para as opções Apache e Mysql que estão na coluna
“Module”. Feito isto, abre o navegador e digitena barra de endereços
o seguinte link: http://localhost. O navegador irá visualizar uma imagem
pareceda com a da figura abaixo:
Figura 4.1.9 Servidor Apache Xampp.
É de notar que as páginas php são interpretadas quando o servidor

estiver a funcionar. Em outras palavras para dizer que, se o servidor
estiver desligado, as páginas php não serão interpretadas pelo
navegador.
Tendo instalado o servidor, é o momento exacto de testar o seu

primeiro script em php.
Para que o seu documento ou programa seja reconhecido pelo

interpretador é necessário que tenha a extensão php. Pode notar que
124
quando simplesmente usava o html, que é considerada de páginas

estatícas, usava a extensão htm ou html para a página ser reconhecida
com o navegador. A mesma página pode ser executada ou rodada em
php, é só trocar a extenção html por php.
Primeiro script
Com php, pode fazer tudo o que é feito com outras linguagens de
programação, ainda com uma particularidade de suportar um grande
número de bases de dados, tais como dBase, Interbase, mSQL, mySQL,
Oracle, Sybase, PostgreSQL e mais. Torna-se muito mais simples
construir uma página baseada em uma base de dados usando o php,
também é de saber que esta linguagem tem suporte a outros serviços
de protocolos como IMAP, SNMP, NNTP, POP3
Para começar a executar os scripts, deve primeiro criar uma pasta que
servirá para conservar ou guardar os ficheiros, essa pasta fica no
endereço C:\xampp\htdocs, para este manual a pasta recebe o nome
de “minhaaplicacao”. Assim fica: C:\xampp\htdocs\minhaplicacao.
Como primeiro sicrip, veja e siga o código abaixo:
<html>
<body>
<?php
$primeiro = "Olá Visitantes. Desculpem é o meu primeiro script em
PHP";
echo $primeiro;
?>
Com este código o navegador Web irá mostrar:
Olá Visitantes. Desculpem é o meu primeiro script em PHP.
Para poder ver a informação do navegador, é necessário gravar / salvar

o código num ficheiro com a extensão php, na pasta
C:\xampp\htdocs\minhaplicacao; o nome da pasta “minhaplicacao” é
dado pelo aluno, pode ser qualquer outro nome, desde que seja
sugestivo.
Quando o código acima ser quardado na pasta indicada com a extensão.

php, neste caso, na C:\xampp\htdocs\minh, chama o navegador e
escreve no endereço no endereço
http://localhost/minhaplicacao/nome_do_ficheiro.php.
Como pode ver, tudo o que é php começa por “<?” e termina com a tag
“?>”, as variáveis começam com sigla ”$” e a palavra “echo” para
imprimir o contéudo das variáveis.
125
Exercícios de auto-avaliação da unidade 4.1.
Perguntas
1. Em programação existem linguagens de programação

compiladas e interpretadas. Que tipo de linguagem é php?
2. Que função desempenha o caracter “$” na linguagem php?
3. Quais são os tipos de caracteres usados para comentários em
php?
4. Onde funcionam as páginas em php?
5. Usando o servidor xampp, onde se localiza a pasta htdocs?
6. Em poucas palavras, descreva os passos para instalação do
servidor xampp.
Respostas
1. É uma linguagem de programação interpretada.

2. O caracter “$” antecede o nome da variável.
3. Para comentários, usa-se os caracteres “#”, “//” e “/*”
4. As páginas em php funcionam no servidor.
5. A pasta htdocs se localiza no endereço C:\xampp\htdocs,
126
UNIDADE 4.2. Variáveis, Constantes, Tipo de operadores, Estrutura de controlo,

Funções, Classes e Objectos.
Variáveis e Costantes.
Variavéis
Anteriormente falou-se que as variáveis são antecedidas por caracter

“$”, e o seu valor é dado pelo simbolo de igualidade “=”.
<html>
<body>
<?php $VarCidade = "Beira – Sofala \n";
echo $VarCidade;
//Esta linha imprime Beira – Sofala
$ VarCidade = "Matola-Maputo \n";
echo $VarCidade;?>
//Esta linha imprime Matola-Maputo
</body>
</html>
Constantes
A diferença da constante com a variável, é porque o valor da constante

não muda e não é antecedida por simbolo “$”, mas sim usa-se a palavra
“difine”.
<html>
<body>
<?
php define ("CONSTANTE", "Estudo na ISCED");
echo (CONSTANTE);
?>
</body>
</html>
Tipo de operadores
Aqui apresenta-se os principais operadores usados em php.
Operadores aritméticos
$a + $b Soma
$a - $b Subtracção
$a * $b Multiplicação
$a / $b Divisão
$a % $b Resto da divisão de $a por $b
$a++ Incrementa $a em 1 unidade
$a-- Subtrai $a em 1 unidade
127
Operadores de Atribuição
$a = $b Atribui a $a o conteúdo de $b
$a += $b Soma $a a $b e atribui a $a
$a -= $b Subtrai $a a $b e atribui a $a
$a *= $b Multiplica $a por $b e assina a $a
$a /= $b Divide $a por $b e assina a $a
$a .= $b Une a cadeia $b a cadeia $a
Operadores de Comparação
$a <$b $a menor que $b
$a> $b $a maior que $b
$a <= $b $a menor ou igual a $b
$a> = $b $a maior ou igual a $b
$a == $b $a igual a $b
$a!= $b $a diferente $b
Operadores de Cadeias
As cadeias ou strings são construídas usando o caracter ponto (.).
$a = "Estudo";
$b = $a. "no ISCED";
// $b Irá conter “Estudo no ISCED” Preste atenção, há diferença nos
dois métodos de operadores de cadeia.
$a = "no ISCED";
echo 'Estudo $a';
//Imprimirá "Estudo $a"
echo "Estudo $a";
//Imprimirá "Estudo no ISCED”
Operadores Lógicos
$a AND $b Verdadeiro se ambos forem verdadeiros
$a && $b Verdadeiro se ambos forem verdadeiros
$a OR $b Verdadeiro se algum for verdadeiro
$a!! $b Verdadeiro se algum for verdadeiro
$a XOR $b Verdadeiro se só um for verdadeiro
!$a Verdadeiro se $a é falso, e reciprocamente
Estrutura de controlo
Estrutura de controlo é a responsável pelo condicionalismo de controlo

de execução do código, através das condições do funcionamento
impostas pela sintaxe da linguagem. Veja a seguir algumas estruturas
mais usadas:
Estrutura If e Else.
Esta é a condição que permite executar um determinado bloco de

instrução se a condição ser verdadeira ou outro bloco se a condição
128
for falsa. Veja a sintaxe:
if (condição)
{
// Bloco executado se a condição é verdadeira
} else
{
// Bloco executado se a condição ser falsa
}
Usando dados reais pode ficar:

$Actividade = Analista;
//$Actividade = Electricista
if (($Actividade == "Analista") OR ($Actividade=="analista")){
echo "A tua actividade é Analista";
// vai mostrar “A tua actividade é Analista”
} else {
echo " A tua actividade é " . $nome;
//Vai mostrar se a actividade não ser Analista, neste caso Electricista
}
Pode-se testar e executar várias condições com o comando If, onde

ficaria:
If elseif else
<?
php
$nome = “Fijamo”;
if ($nome == "") {
echo "Nome não consta";
} elseif (($nome=="Calado") OR ($nome=="calado")) {
echo "Seu nome é Calado";
} else {
echo "Seu nome é " . $nome;
}
?>
Também pode-se usar o If sem a condição else. Veja o exemplo:

$b = 9;
if ($b < 10)
echo “$b é menor que 10”;
Switch case default

Esta instrução aparece como uma alternativa para a instrução
if…elseif…else. Ela avalia e faz comparação de cada expressão da
instrução CASE com a expressão que é avaliada. É executado o bloco de
código que tiver, caso nenhuma condição seja verdadeira.
<?
129
$Capital = "Maputo";
switch ($Capital)
{
case
"Lichinga": echo "Olá Lichinga";
break;
case "Pemba": echo "Olá Pemba";
break;
case "Quelimane": echo "Olá Quelimane";
break;
case "Beira": echo "Olá Beira";
default: echo "Não existe nenhuma Opcao Valida ";
}
?>
While
Com esta instrução, executa-se um bloco de código enquanto a
condição for verdadeira:
<?
php
$num = 1;
while ($num < 5)
{
echo $num;
echo "<br>";
$num++
}
?>
For
Esta instrução é usada geralmente quando se pretende executar um
bloco, cuja a variável se encontra entre um valor e outro, isto é, entre
um valor mínimo e máximo.
<?
for ($num = 1;
$num <=5;
$num++)
{
echo $num;
echo "<br>";
if ($num == 3)
{
echo "Paramos aqui";
break;
}
}
?>
130
Arrays ou Vectores
RRAYS
Em php, os arrays são muito importantes, geralmente as funções

ligadas as bases de dados, devolvem os valores usando arrays.
O PHP dispõe de dois tipos de arrays:
• Clássico e
• Associativos
Aqui vai-se falar do Clássico, que o seu uso é a base de índices. Não
esquecer que arrays levam colchetes “[]”.
<?
$cidade [] = "Quelimane";
$cidade [] = "Xai-Xai";
$cidade [] = "Maputo";
$cidade [] = "Chimoio";
$cidade [] = "Tete";
$cidade [] = "Beira";
print ("Eu Vivo na cidade de " . $cidade[2] . “ <BR> \n");
?>
Também pode-se usar arrays desta forma:

<?
$cidade = array ("Quelimane", "Beira", "Maputo", "Chimoio");
//Conta-se o número de elementos do array
$numElementos = count ($cidade);
//Imprim-se todos os elementos do array
for ($i=0; $i < $numElementos; $i++)
{
print ("A cidade $i é $cidade[$i] <BR>\n");
}
?>
Funções em php
Funções
Uma função é um grupo ou conjunto de código que ao passar uma série

de parâmetros, devolve um valor. Para usar as funções, deve-se antes
declarar. Veja a sintaxe:
Function nome_da_função (argumento_1, argumento_2,…,

argumento_n)
{
Bloco de Código
131
Quando invocamos uma função, o programa passa a executar as linhas

de código que a função contém. Mediante o uso da instrução return,
terminamos a execução do código de uma função, que, devolve aseguir
um valor:
<? function maior($x, $y)

{
$msg = "";
if ($x > $y)
{
$msg = $x." é maior que".$y
}
else
{
$msg = $y." é maior que".$x
}
return $msg;
}
?>
Numa função os valores podem ser repassados por referência ou por

valor. Ao passar uma variável por valor, se ocorrer algo estranho nessa
função, nada modificará o conteúdo da variável. E se for por referência,
ao acontecer algo anormal na alteração, afectará definitivamente o
conteúdo.
Por defeito, em php as variáveis são passadas por valor. Ao pretender

usar o modo de referência, deve incluir o simbolo “&” antes do outro
simbolo “$” que antecede a variável.
<?
function soma ($x, $y)
{
$x = $x + 1;
return $x+$y;
}
$a = 1;
$b = 2;
//Parâmetros por valor
echo soma ($a, $b);
// Imprimirá 4
echo "<br>";
echo $a;
// Imprimirá 1
echo "<br>";
//Parâmetros por referência
echo soma (&$a, $b);
132
// Imprimirá 4
echo "<br>";
echo $a;
//Imprimirá 2
?>
include() e require()
Estas duas funções são consideradas de especiais em php, porque são

usadas para incluir código que está em outros ficheiros ou em certos
locais do programa recente:
include()
<?
php
include ("header.inc");
echo "Aprendendo a programar";
include ("footer.inc");
?>
Se o ficheiro header.inc tiver apenas as tags <html> e <body> e o outro

footer.inc tiver apenas </body> e </html>, então teria-se como script
da sintaxe acima:
<html>
<body>
<?
php
echo " Aprendendo a programar ";
?>
</body>
</html>
require()
A diferença existente entre include() e require() é porque o require()

paraliza a execução do programa caso não encontre o ficheiro de
inclusão, enquanto que o include() imprime uma mensagem de alerta
e executa o resto do programa.
<?
php
require ("config.inc");
include ("header.inc");
echo $Aprendizagem;
include ("footer.inc");
?>
133
Base de dados mysql e php
PHP E MYSQL
Sendo este um manual de fundamentos em html, não irá aprofundar a

relação de php com Mysql, visto ser basicamente de fundamentos em
php. Apenas breves noções de ligação de página web com uma base de
dados.
Nas unidades anteriores, falou-se de formulários e inclusive deu-se

exemplo de entrada de alguns dados, é de recordar que aqueles dados
não eram guardados numa base de dados, eram temporários.
Aqui vai-se explicar de como ler e gravar dados na web, usando o gestor
de base de dados MySql, que já se encontra embutido no servidor
Apache Xampp. Antes de tudo, deve criar uma base de dados que irá
receber e armazenar os dados.
Primeiro deve habilitar o servidor Apache Xampp, e inicializar os

serviços Apache e Mysql, para tal, digite no navegador o endereço:
http://localhost/phpmyadmin/ aparecerá na tela uma janela parecida
com a de baixo:
Figura 4.2.1 Habilitando o servidor Apache Xampp
Na parte superior da janela, na barra de menu seleccione o menu SQL,

e digite o código abaixo:
create database Alunos; // Cria base de dados de nome Alunos

use registos;
create table estudante(
codigo int(4),
nome varchar(30),
curso varchar(20)
);
insert into estudante values(1,"Santos Francisco","Psicologia");
insert into estudante values(2,"Lucia M.","Direito");
insert into estudante values(3,"Carlos","G. Informática");
134
Depois de digitar o código acima, certifique que está correctamente

digitado, em seguida faz clique no botão GO.
Conectando a página com a base de dados
Conectar PHP a base de dados
Para que a página tenha conecção com a base de dados em MySql, é

necessário uma série de acesso de funções em php. O importante é de
usar a função mysql_connect. Veja a sintaxe abaixo:
<?
php
$link=mysql_connect ("servidor","utilizador","password");
?>
Para este exemplo pode-se usar:
Servidor é localhost, Utilizador (do Mysql) é root, e por padrão o

servidor Xampp não tem password, mas pode-se adicionar uma
password caso necessário.
<?
php
$link=mysql_connect("localhost","root","");
if (!$link)
{
echo "Não foi possível conectar a base de dados!";
}
Else
{
echo "Conexão ao servidor com Sucesso";
}
?>
Manipulando dados em php
Manipular Dados
Nesta secção mostra-se como manipular ou interagir os dados com a

página, usando o php. Falar de manipulação é ter a possibilidade de
Consultar, Inserir, e Remover dados ou informação.
Pode-se ver o código abaixo, que lista o nome e o curso de todos alunos
e organiza numa tabela.
<?
php
$link=mysql_connect("localhost","root","");
if (!$link)
{
135
echo "Não foi possível conectar a base de dados!";

}
Else
{
mysql_select_db("registos", $link);
$result = mysql_query("SELECT nome, curso FROM estudante", $link);
if ($row = mysql_fetch_array($result))
{
echo "<table border = '1'> \n";
echo "<tr> \n";
echo "<td><b>Nome</b></td> \n";
echo "<td><b>Curso</b></td> \n";
echo "</tr> \n";
do
{
echo "<tr> \n";
echo "<td>".$row["nome"]."</td> \n";
echo "<td>".$row["curso"]."</td>\n";
echo "</tr> \n";
}
while ($row = mysql_fetch_array($result));
echo "</table> \n";
}
else { echo "A bases de dados está vazia !";
}
}
?>
Tendo o formulário abaixo:
Figura 4.2.2 Inserição de dados na tabela estudante.
O script em PHP a seguir recolhe os dados fornecidos no formulário e

grava/salva na base de dados, na tabela estudante.
Gravar_dados.php
<?
136
php
$codigo=$_POST ["codigo"];
$nome=$_POST["nome"];
$curso=$_POST["curso"];
if ($codigo=="" || $nome=="" || $curso=="")
{
echo "<font color='red'>Preencher Todos Campos! </font>";
echo "<a href=\"javascript: history.go(-1)\">Voltar</a>";
}
else
{
$link=mysql_connect ("localhost","root","");
if (!$link)
{
echo "Não foi possível conectar ao servidor mysql!";
}
Else
{
Mysql_select_db ("registos", $link);
$sql= "INSERT into estudante values (‘$codigo’,'$nome',’$curso’) ";
if (mysql_query ($sql,$link))
{
echo "Os Dados foram adicionados com sucesso";
}
else
{
echo "Houve um ERRO no envio de dados";
}
}
}
?>
Sendo o script acima de inserção de dados, o script seguinte é de

remoção de dados na base.
Remove_estudante.php
<?
php
$codigo_remove=3;
if (!$link)
{
}
Else
{
mysql_select_db("registos", $link);
137
$sql= "DELETE FROM estudante where codigo=$codigo_remove";

if(mysql_query($sql,$link))
{
echo "O estudante foi removido";
}
else
{
echo "Houve um ERRO na remoção do estudante";
}
}
?>
Com estes exemplos, o estudante poderá escrever mais scripts para o
treinamento e capacitação do aprendizado.
Perguntas
1. Crie uma página HTML contendo o formulário, em seguida faça

a ligação com PHP para fazer a leitura dos dados e mostrar no
navegador Web.
2. Crie uma página em PHP que faz a leitura de um formulário

contendo os campos nome e idade, mostrar na tela o nome e a
idade devendo mostrar também as seguintes mensagens: Se a
idade for menor que 15, “O aluno é menor de Idade para entrar
na ISCED” Se a idade for maior ou igual a 15. “Já tem idade de
entrar na ISCED”.
3. Qual é a diferença existente entre include() e require()?
4. Qual é o significado de cada operador abaixo?

a. $a + $b
b. $a - $b
c. $a * $b
d. $a / $b
e. $a % $b
f. $a++
g. $a--
5. Quantos tipos de array dispõe a linguagem php?
Respostas
1.
Documento em html (Formular.html)

<html>
<head>
138
<title> Criando formulário</title>

</head>
<body>
<form id="form" name="form" method="post"
action="lerdados.php">
<table width="210" border="0">
<tr>
<td width="40">Nome :< /td>
<td width="144">
<input type="text" name="txtnome" />
</tr>
<tr>
<td>Contacto:</td>
<td>
<input type="text" name="txtcontacto" />
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Ler Dados" />
</td>
</tr>
</table>
</form>
</body>
</html>
Documento em php (lerDados.php)
<?
php
$nome=$_POST ['txtnome'];
$Contacto=$_POST [‘txtContacto’];
if($nome!="" and $contacto!="")
{
echo "Dados copiados do formulario: <BR/> ";
echo "<b>Nome: </b> ".$nome.” <br/>";
echo "<b>Contacto: </b> ".$contacto;
}
else
{
echo "Preencher todos os dados. <a href=\"formular.html\">
Voltar ao Formulario </a> ";
}
?>
2.
Documento html (Formular.html)

139
<html>
<head>
<title> Resoluçao de Exercicio 2</title>
</head>
<body>
<form id="form" name="form" method="post"
action="lerdados.php">
<table width="210" border="0">
<tr>
<td width="40">Nome:</td>
<td width="144">
<input type="text" name="txtnome" />
</tr>
<tr>
<td>Idade:</td>
<td>
<input type="text" name="txtidade" />
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Verificar Idade" />
</td>
</tr>
</table>
</form>
</body>
</html>
Documento php (Lerdados.php)
<?
php
$nome=$_POST['txtnome'];
$idade=$_POST['txtidade'];
if($nome!="" and $idade!="")
{
echo "Dados copiados do formulario: <BR/>";
echo "<b>Nome:</b> ".$nome."<br/>";
echo "<b>Idade:</b> ".$idade."<br/>";
if($idade<15) { echo "<b>Aluno menor de Idade para entrar na
ISCED</b> ";
}
else
{
echo "<b>O aluno já tem Idade para entrar na ISCED </b> ";
}
}
else
140
{
Voltar ao Formulario</a>";
}
?>
3. A diferença existente entre include() e require() é porque o

require() paraliza a execução do programa caso não encontre o
ficheiro de inclusão, enquanto que o include() imprime uma
mensagem de alerta e executa o resto do programa.
4. Significados de cada operador:
$a + $b Soma
$a - $b Subtracção
$a * $b Multiplicação
$a / $b Divisão
$a % $b Resto da divisão de $a por $b
$a++ Incrementa $a em 1 unidade
$a-- Subtrai $a em 1 unidade
5. O PHP dispõe de dois tipos de arrays:
• Clássicos
• Associativos
141
UNIDADE 4.3. Sumário e Exercícios de Auto-Avaliação e de avaliação da

unidade IV.
Sumário
Nesta unidade aprendeu-se a criar e usar páginas dinâmicas

combinadas do html e php. Aprendeu-se a instalar um servidor virtual,
visto que, esta linguagem de programação funciona no servidor.
Aprendeu-se igualmente a ligação de uma página web a uma base de
dados, na vertente ensinou-se a ligação com Mysql. Aprendeu-se a
manipular as páginas html com php.
Exercícicios de auto-avaliação da unidade 4:
Perguntas
1. O entende por linguagem php?

2. Elabore um programa em PHP que calcule a média aritmética
de duas notas (n1 e n2) e exiba o resultado no navegador.
3. Explique como são passados os valores da função em php.
4. Qual é o padrão do repasse de valores a variáveis em php?
5. Qual é a finalidade de uso da estrutura de controlo nesta
linguagem de programação?
6. O que é uma função em linguagem de programação?
7. Tendo a estrutura abaixo, da tabela dados do estudante, faça o

programa para salvar os dados do aluno na tabela.
8. O que entende por manipulação de dados?
9. Em php existe varias funções que devem ser acessadas para

conecção com a base de dados. Dentre essas varias qual é a mais
importante?
142
10. Elabore um programa em PHP que compare três números

inteiros positivos e determina o menor entre eles, visualiza os
três números em ordem decrescente e informa o menor.
Respostas
1.
Linguagem PHP é uma linguagem de script de código aberto e
licença livre (open source) bastante usada na programação de
páginas web, destinada ao uso geral.
2.
<?
php
$n1 = 12;
$n2 = 14.5;
$media=($n1+$n2)/2;
echo "A médiaaritmeticaé$media";
?>
3.
Numa função os valores podem ser repassados por referência
ou por valor. Ao passar uma variável por valor, se ocorrer algo
estranho nessa função, nada modificará o conteúdo da variável.
E se for por referência, ao acontecer algo anormal na alteração,
afectará definitivamente o conteúdo.
4. Por defeito, em php as variáveis são passadas por valor. Ao

pretender usar o modo de referência, deve incluir o simbolo “&”
antes do outro simbolo “$” que antecede a variável.
5. É a estrutura de controlo, responsável pelo condicionalismo de

controlo de execução do código, através das condições do
funcionamento impostas pela sintaxe da linguagem.
6. Uma função é um grupo ou conjunto de código que ao passar

uma série de parâmetros, devolve um valor.
7.
php
$codigo=$_POST ["codigo"];
$nome=$_POST["nome"];
$curso=$_POST["curso"];
if ($codigo=="" || $nome=="" || $curso=="")
{
echo "<font color='red'>Preencher Todos Campos! </font>";
echo "<a href=\"javascript: history.go(-1)\">Voltar</a>";
}
else
{
143
if (!$link)
{
}
Else
{
Mysql_select_db ("registos", $link);
$sql= "INSERT into estudante values
(‘$codigo’,'$nome',’$curso’) ";
if (mysql_query ($sql,$link))
{
echo "Os Dados foram adicionados com sucesso";
}
else
{
echo "Houve um ERRO no envio de dados";
}
}
}
?>
8. Manipulação de dados é a possibilidade de Consultar, Inserir, e

Remover dados ou informação numa base de dados.
9. Entre várias funções existentes para se conectar com a base de

dados Mysql em php é a mysql_connect.
10. 10.
<?
Php
$n1 = 5
;$n2 = 30;
$n3 = 17;
$ordem=array($n1,$n2,$n3);
sort($ordem);
foreach($ordem as $l )
{
echo"$l ";
}
$menor = ($n1 < $n2)?
$n1: $n2;
$menor=($maior<$n3)?
$menorr: $n3;
echo"<br>Omenornumeroé $menor";
echo"<br>Omenornumeroé".$ordem[2];
echo"<br>Omenornumeroé".min($ordem);
?>
144
Exercícios de avaliação do módulo.
Perguntas
1. O que é html e qual é a sua finalidade?

2. Como se chamam os elementos de html?
3. Ao formatar um documento em html o estilo CSS fica entre que
tags?
4. Qual é o significado da sintaxe abaixo?
<body style="background-color:lightblue">
5. O que entende por Hyperlink em html? De exemplo.
6. Cria um documento html com a aparência semelhante ao de baixo:
7. Como se chama o protótipo que aprendeu, que é usado em

design de interface para sugerir a estrutura de um Web-Site
e relacionamentos entre páginas?
8. Na organização estrutural de páginas em HTML, aprendeste três
maneiras ou formas, quais são?
9. Elabore um documento em html, que mostre no navegador a
aparência da figura abaixo:
10. O que é uma tabela e como é construída em html?

11. Escreva a sintaxe que mostra no navegador: Beira – Sofala –
Moçambique, com a fonte do tipo Arial
12. A figura abaixo ilustra uma das maneiras da organização
estrutural em html. Que tipo de estrutura representa?
145
13. Qual é diferença entre tag e instrução em HTML?

14. Quais são os principais valores do comando align, usado para
alinhamento em html?
15. Para que servem os elemento <BR> e <P> em documentos
html?
16. A figura abaixo mostra um documento html. Mostre o que será
visualizado no navegador com o referido documento.
17. Elabore um documento html, que exiba no navegador o

conteúdo mostrado na figura abaixo:
18. Quantos níveis de cabeçalhos existem html e como são

representados? Demonstre um dos níveis.
19. O que é uma lista ordenada em html e quais são as tags usadas
para criar essas listas e seus elementos?
20. O que representam as seguintes tags (<tr></tr>) e (<td></td>)
em documentos html?
21. Qual é o resultado no navegador deste documento html?
<html>
<head>
</head>
146
<body>
<ol type="a">
<li>Nome</li>
<li>BI número</li>
<li>Telefone</li>
<li>Endereço</li>
<li>Bairro</li>
<li>Cidade</li>
<li>província</li>
</ol>
</body>
</html
22. Para inserir uma imagem no fundo da página usa-se o atributo
background. Escreva a sintaxe deste atributo.
23. Qual é a finalidade do CSS em páginas html?
24. Quais são os comandos usados para ajuste de margens em html?
25. Faça um programa em html, para visualizar duas imagens no
navegador uma alinhada a direita e outra a esquerda, como se
mostra na imagem abaixo.
26. Elabore um documento html que visualiza no navegador um

formulário semelhante ao da figura abaixo, a palavra exercício
deve ter o cabeçalho do tamanho 3.
147
27. Identifique a finalidade da sintaxe de html abaixo.

figure {
float: left;
}
28. As duas sintaxes abaixo tem a mesma finalidade, explique para
que servem:
a)
body {
Border-color: blue;
Border-width: 2px;
}
b)
body {
border: 2px solid blue;
}
29. Com o documento abaixo, o que será visualizado no

navegador?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #FF7F00; background-color: #C0D9D9">
</p>
</body>
</html>
30. Em javaScript como se manifesta uma variável do tipo Global?

array e calcule a média dos elementos do array.
32. Como se chama a linguagem que vem embutida em html e que
usa eventos, tendo como o mais comum, o modo (inline e
ficheiro externo?
33. Crie uma matriz em javascript que contém as disciplinas do seu
curso.
34. Escreva um programa em javascript para calcular a média do
aproveitamento de um aluno. Tendo como elementos de
entrada as notas de 4 testes.
35. Quais são os tipos de array que dispõe a linguagem php?
36. Para que finalidade é usado o comando mysql_connect em
php?
37. Tendo a sintaxe abaixo, diga qual é a sua finalidade?
148
{
echo "<table border = '1'> \n";
echo "<tr> \n";
echo "<td><b>Nome</b></td> \n";
echo "<td><b>Curso</b></td> \n";
echo "</tr> \n";
do
{
38. Por defeito, em php as variáveis são passadas por valor. Que
actividades desempenham os simbolos “&” e “$” na variável.
39. Tendo abaixo os operadores lógicos, elabore um programa
onde faz o uso de um deles:
$a AND $b Verdadeiro se ambos forem verdadeiros
$a && $b Verdadeiro se ambos forem verdadeiros
$a OR $b Verdadeiro se algum for verdadeiro
$a!! $b Verdadeiro se algum for verdadeiro
$a XOR $b Verdadeiro se só um for verdadeiro
!$a Verdadeiro se $a é falso, e reciprocamente
40. O que faz o script abaixo escrito em php?
<?
php
$nome=$_POST['txtnome'];
$idade=$_POST['txtidade'];
if($nome!="" and $idade!="")
{
echo "Dados copiados do formulario: <BR/>";
echo "<b>Nome:</b> ".$nome."<br/>";
echo "<b>Idade:</b> ".$idade."<br/>";
if($idade<15) { echo "<b>Aluno menor de Idade para entrar na
ISCED</b> ";
}
else
{
echo "<b>O aluno já tem Idade para entrar na ISCED </b> ";
}
}
else
{
Voltar ao Formulario</a>";
}
?>
149
Bibliografia
Bernal, V. B. (2013 - 2015). Introdução à linguagem html.

Programação Web.
http://orium.pw/univ. (2009/2010). Linguagens e Ambientes de

Programação.
http://php.net. (s.d.). O que é o PHP?
Junior, V. H. (2014). Introdução ao JavaScript.
mozilla.org. (29 de 12 de 2017). Tecnologias web para desenvolvedores

javascript.

150
www.apachefriends.org. (s.d.). Instalando Xampp para windows.
www.devmedia.com.br. (2013). Explorando as propriedades do objeto

window em JavaScript.
www.w3schools.com. (s.d.).
151

Manual de Fundamento de HTML

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

Manual de Fundamento de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Manual do Curso de Licenciatura Em Gestão de Sistemas de

ENSINO ONLINE. ENSINO COM FUTURO 2022

Este manual é propriedade da Universidade Aberta Isced (UNISCED), e contêm reservados

Universidade Aberta Isced (UNISCED)

A Universidade Aberta Isced (UNISCED) agradece a colaboração dosseguintes indivíduos e

Autor Calado Pereira Fijamo

Coordenação Vice -Reitoria Académica da UNISCED

Visão geral de Fundamentos de HTML 7

Tema – I: FUNDAMENTOS BÁSICOS DE HTML. 14

UNIDADE 1 – INTRODUÇÃO AOS FUNDAMENTOS BÁSICOS DE HTML 14

UNIDADE 1.2. Formas de Organização e Estrutura Básica de HTML. 21

TEMA – II: DESENVOLVIMENTO DE PÁGINAS HTML COM ESTILOS DE CSS. 45

UNIDADE 2 – DESENVOLVIMENTO DE PÁGINAS HTML COM CSS 45

TEMA – III: DESENVOLVIMENTO DE PÁGINAS DINAMICAS - HTML E JAVASCRIPT. 91

UNIDADE 3 – DESENVOLVIMENTO DE PÁGINAS DINAMICAS HTML - JAVASCRIPT 91

TEMA – IV: DESENVOLVIMENTO DE PÁGINAS HTML E PHP 117

UNIDADE 4 – DESENVOLVIMENTO DE PÁGINAS HTML - PHP 117

Visão geral de Fundamentos de HTML

Benvindo à Disciplina/Módulo de Fundamentos de HTML

Esta Disciplina é constituída por quatro temas que são:

Objectivo Geral No fim do curso o estudante deve ser capaz de:

Quem deveria estudar este módulo

Para estudar este módulo, não precisa de pré-requisitos em termos

Como está estruturado este módulo

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

O principal objectivo deste campo é o de ensinar aprender a aprender.

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

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

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

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

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 tempo

continuar a tratar dos mesmos assuntos das actividades obrigatórias.

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

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á uma

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

O estudante deve realizar todas as tarefas (exercícios, actividades e

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

Você será avaliado durante os estudos à distância que contam com um

Tema – I: FUNDAMENTOS BÁSICOS DE HTML.

UNIDADE 1 – INTRODUÇÃO AOS FUNDAMENTOS BÁSICOS DE HTML

UNIDADE 1.1. Introdução, Estrutura da Unidade, Objectivos, Internet,

UNIDADE 1.1. Introdução, Estrutura, Objectivos, Internet, World Wide Web

Primeiro para dizer Bem-vindo(a) à esta unidade I da Programação Web

Esta unidade temática é constituída por quatro (4) unidades, com a

Nesta secção da unidade, encontra-se o Objectivo principal e os objectivos

No fim da unidade o aluno será capaz de:

específicos • Identificar os elementos básicos de HTML

A palavra Internet é uma composição de duas palavras inglesas “Inter

World Wide Web

O significado em português de World Wide Web – WWW, não difere

são interligados e executados na Internet.

Neste manual foca-se alguns deles, que são frequentemente usados:

FTP (File Transfer Protocol): serviço usado para transferir ficheiros de

Wiki: Colecção de páginas interligadas

Redes Sociais: Dispositivos ou páginas por onde os utilizadores se

Correio Electrónico ou (e-mail): serve para compor, enviar e receber