Técnicas e Linguagens de Programação 12 - 2022/2023

REPÚBLICA DE ANGOLA
GOVERNO DA PROVINCIA DE LUANDA

INSTITUTO MÉDIO POLITÉCNICO “ALDA LARA”
Curso Técnico de Informática
Técnicas e Linguagens de
Programação 12 ª – 2022/2023
Desenvolvimento e Manutenção de Páginas para Internet
Professor : Carlos Augusto Dos Santos Neto, UAN- FC-CC 5º.

2
Estruturas das Pastas
3
Capítulo III – Desenvolvimento e
Manutenção de Páginas para a Internet
Estática.
4
 História da Web.
5
Introdução
A World Wide Web, é uma Rede de alcance mundial em

português ("WWW" ou simplesmente "Web") é um meio de
comunicação global no qual os utilizadores podem ler e
escrever através de computadores conectados à Internet. O
termo Web é usado como sinônimo da própria Internet.
Internet é um sistema global de redes de computadores

interligados entre si.
6
Arpanet
A ARPANET foi criada pelo o departamento de defesa dos estados unidos,
foi a primeira rede de computadores interligados e tinha como o objectivo
interligar as bases militares americanas para serem menos vulneráveis ao
ataque da União Soviética. Expandiu a sua utilização a universidades e 14
anos depois o TCP/ IP é Estabelecido. É então que em 1989, o WWW é
inventado, permitindo assim a utilização da internet por parte da população.
1971: Ray Tomlinson cria o programa de email para enviar mensagens
através de uma rede distribuída.
1972: Tomlinson expande o programa para os utilizadores da ARPANET,
utilizando o símbolo "@" como parte do endereço.
7
Invenção da World Wide Web
O desenvolvimento da World Wide Web começou em 1980 quando

o inglês Tim Berners-Lee, um funcionário contratado do CERN -
Organização Europeia para a Investigação Nuclear, na Suíça,
desenvolveu o ENQUIRE, um projeto usado que permite criar
ligações entre diversos nós.
No natal de 1990, Berners-Lee tinha construído as ferramentas

necessárias para o funcionamento da Web: o Protocolo de
Transferência de Hipertexto (HTTP), que permitia assim o uso da
Linguagem de marcação de hipertextos (HTML).
8
Invenção da World Wide Web
No ano seguinte da sua invenção , construiu o primeiro website, que

foi colocado online a 20 de dezembro. O site tinha como objectivo
a partilha de informação sobre o projecto www. A organização com
a ajuda de Tim Berners-Lee, lançou um dos primeiros browsers, em
1992.
A 30 de Abril de 1993, a organização colocou o software World

Wide Web em domínio público. Podia correr em qualquer
computador , sendo, por fim, possível a comunicação entre pessoas
em toda parte do mundo através de um computador.
9
Expansão da Web
Todos os anos se realiza uma Conferência Internacional da

World Wide Web e a primeira foi organizada no CERN por
Robert Calliau em Maio de 1994 .
10
W3C
Em setembro de 1994, Berners-Lee fundou o Consórcio da

World Wide Web (W3C) no Instituto de Tecnologia de
Massachusetts com o apoio da DARPA dos E.U.A. e a
Comissão Europeia. A (W3C) é uma organização responsável
pela normalização das tecnologias utilizadas na Web.
11
 Introdução à Página Web.
12
Introdução
Uma página Web, também conhecida no inglês (Web Page), é
uma "página" na Word wide Web, geralmente em formato
HTML e com ligações de hipertexto que permitem a
navegação de uma página, ou secção, para outra.
As páginas web actualmente fazem parte do nosso cotidiano
pois nós recorremos a internet para diversos objetivos e
necessidades.
Uma página Web pode ser estática ou dinâmica, nas páginas
estáticas os conteúdos são os mesmos sempre que se acede à
página, normalmente a página é um ficheiro HTML. Numa
página dinâmica os conteúdos podem mudar cada vez que se
acede à página, pois esta monta os conteúdos que provêm de
fontes diferentes.
13
Conceitos de Website
Website é uma palavra que resulta da justaposição

das palavras inglesas web (rede) e site (sítio ou lugar).
No contexto das comunicações eletrônicas, website
e site possuem o mesmo significado e são utilizadas
para fazer referência a uma página ou a um
agrupamento de páginas relacionadas entre si,
acessíveis na internet através de um determinado
endereço.
14
Conceitos de Website
Por exemplo, a informação que está sendo lida neste

momento está disponível no website:
www.tlp2023.com.ao.
Há diversos tipos de websites disponíveis na internet:

institucionais, informativos, pessoais, comunitários, etc.
Cada website possui um objetivo, de acordo com o
público ao qual é direcionado.
15
Aplicações Web
Caracteristicas Atributos Categorias
16
Características
Comunidade abrangente
 Uma WebApp “reside” numa rede e serve uma comunidade muito grande de
utilizadores (Internet).
Concorrência
 O acesso a uma WebApp pode ser realizado por num mesmo período de tempo
por um conjunto muito vasto de utilizadores; os padrões de utilização são também muito
diversificados.
17
Características
Carga imprevisível
 O número de utilizadores pode variar em ordens de magnitude de dia para dia (100
ut. na segunda e 10,000 na quinta)
Desempenho
 Se um utilizador espera demasiado tempo (acesso, processamento, formatação,…),
tipicamente decide consultar outro local.
18
Características
Disponibilidade
 Apesar da expectativa de 100% de disponibilidade ser pouco razoável, os utilizadores das
WebApps tipicamente exigem acesso “24/7/365”.
Orientadas aos Dados

o A função primária de muitas das WebApps é a utilização de hipermédia para
apresentação de texto, gráficos, audio e video. Adicionalmente, podem ser utilizadas
para acesso a outros repositórios de informação.
19
Características
Sensibilidade ao Conteúdo
 A qualidade e a natureza estética do conteúdo é um importante aspecto na qualidade de
uma WebApp.
Evolução Contínua
 O software envolvido num conjunto de releases cronologicamente espaçadas evolui
continuamente.
20
Atributos
Disponibilidade Imediata
 WebApps apresentam um “ tempo” que pode ser uma questão de dias ou semanas.
 Com algumas ferramentas já se conseguem produzir páginas Web em apenas algumas
horas.
Segurança
o De forma a proteger dados sensíveis é fundamental assegurar modos seguros de
transmissão de dados e medidas de segurança sobre a infraestrutura que suporta a
WebApp.
21
Atributos
Estética
 Um aspecto essencial para o sucesso de uma WebApp a sua estética , em paralelo com o
sucesso da componente técnica.
22
Categoria
 Informativo - conteúdo apenas para leitura, com

navegação simples e links.
 Carregamento — utilizador carrega a informação de
um servidor apropriado.
 Adaptativo — o utilizador adapta o conteúdo a
necessidades especiais.
 Input de utilizador — o input baseado em formulários
é o mecanismo básico para a comunicação de uma
necessidade de informação.
23
Categoria
 Orientada à transacção — o utilizador envia um

pedido que é satisfeito pela WebApp
 Orientada à serviço - a aplicação fornece um serviço
ao utilizador (por exemplo, assiste o utilizador a
determinar um pagamento de uma hipoteca)
 Portal — a aplicação orienta o utilizador para outros
conteúdos ou serviços na Web fora do domínio da
aplicação do portal
 Acesso a BD — o utilizador consulta uma BD de forma
a extrair informação.
24
Diferença entre Páginas Web estáticas e
Dinâmicas.
Base para Comparação Páginas da Web Páginas da Web

Estáticas Dinâmicas
Básico. As páginas da Web estáticas As páginas web dinâmicas
permanecerão as mesmas são comportamentais e tem
até ao momento que a capacidade de produzir
alguém as altere conteúdo diferenciado para
manualmente. diferentes visitantes.
Complexidade Simples de construir. Complicado para construir.
Aplicações e linguagens da HTML, Java Script, CSS, etc. AJAX, PHP, etc.
web usadas para criar
páginas da web.
Mudança de Informação. Ocorre raramente. Frequentemente.
Tempo de carregamento da Leva menos tempo. Leva mais tempo.
página.
Uso de Base de dados. Não usa base de dados. Usa base de dados.
25
Exemplos de Páginas Web
26
Exemplos de Páginas Web
27
Importância das páginas Web
 As páginas Web são importante porque nos permite a

partilha de informações na internet, ela também permite a
maior interação entre utilizadores da Web.
28
Vantagens das páginas Web
 Fácil de utilizar e aprender.

 É uma ferramenta de marketing.
 Mantém a sua empresa contactável 24 horas por dia,
todos os dias da semana.
 Apresenta a sua empresa de forma dinâmica, moderna e
bastante profissional.
29
Desvantagens das páginas Web
 Necessita de acesso a internet para visitar a página.

 Necessita de custos financeiro para o seu alojamento.
30
Hospedagem de Sites
 Hospedagem é um serviço que possibilita as pessoas ou

empresas com sistemas online guardar informações,
imagens, vídeo, ou qual quer conteúdo acessível por Web.
31
 Linguagem de Desenvolvimento de
Página Web (HTML) .
32
33
Introdução
 HTML é a linguagem usada para criar páginas de hipertexto na

Web. Ela utiliza um conjunto de marcadores ou tags, para
identificar as partes contidas em um Documento ou página.
34
Vantagens do HTML
 Fácil de utilizar ;
 Permite desenho, criação e extensão de Web sities;
Desvantagens do HTML
 Não fornece nenhuma ferramenta de apoio para a construção.

 O modo de visualização incluído não corresponde a nenhum
browser exactamente.
35
Versões do HTML
36
Navegador
 Um navegador, também conhecido pelos termos em inglês

Web browser ou simplesmente browser, é um programa de
computador que habilita seus utilizadores a interagirem com
documentos virtuais da Internet, também conhecidos como
páginas da Web, que podem ser escritas em linguagens como
HTML, ASP, PHP, com ou sem linguagens como o CSS e que
estão hospedadas num servidor Web.
37
Servidor Web
 Um servidor Web é um aplicativo responsável por fornecer ao

computador do cliente (usuários de sites e páginas
eletrónicas), em tempo real, os dados solicitados. O processo
se inicia com a conexão entre o computador onde está
instalado o servidor e o computador do cliente; como na Web
não é possível prever a que hora se dará essa conexão, os
servidores precisam estar disponíveis dia e noite.
38
Tarefa
 1) Fale a evolução do HTML: da versão 1 até 5.

 2) Quantos Tipos de hospedagem existe e quais são. Fale
sobre o seu funcionamento.
39
Estrutura Básica do HTML 5
 <!DOCTYPE html>
<html>
<head>
<title>TLP_12_arco_I</title>
</head>
<body>
<h1>Colégio Arco Íris</h1>

<p>É um colégio ….. Sou estudante!</p>
</body>
</html>
40
Editor de Texto
 <!DOCTYPE html>
<html>
<head>
<title>TLP_12_arco_I</title>
</head>
<body>
<h1>Colégio Arco Íris</h1>
<p>É um colégio ….. Sou estudante!</p>
</body>
</html>
41
Apresentação do Código html no Navegador
42
Tamanho da letra
 O tamanho da letra em html varia de h1 a h6.


43
44
HTML Paragrafo
 O paragrafo em html representa-se por de <p> a </p>.


45
46
HTML Atributos
Atributo
Atributo Descrição
Descrição

alt
alt Especifica
Especifica um texto alternativo
um texto alternativo para
para uma
uma
imagem,
imagem, quando
quando aa imagem
imagem não
não pode
pode ser
ser
exibida.
exibida.
disabled
disabled Especifica
Especifica que
que um
um elemento
elemento dede
contribuição
contribuição deveria
deveria ser
ser incapacitado.
incapacitado.
href
href Especifica
Especifica aa URL
URL (endereço)
(endereço) para
para uma
uma
ligação.
ligação.
id
id Especifica um id
Especifica um sem igual
id sem igual para
para um
um
elemento.
elemento.
src Especifica a URL (endereço) para uma
imagem.
style Especifica uma linha que o CSS nomeiam
para um elemento.
title Especifica informação extra sobre um
elemento.
47 Colégio Arco Irís
HTML Formatação de texto
48
49
Links em HTML 5
50
51
Imagens em HTML 5
52

Listas em HTM5 com OL e UL
54
55
HTML Atributos
56
HTML 5 Comentários
 

57
HTML 5 Comentários
58
HTML 5 Tabelas
 Tabelas são utilizadas para apresentação de dados em forma de

linhas e colunas.
 O elemento para se inserir uma tabela é <table>; para iniciar
uma linha devemos introduzir a tag <tr> e para uma célula
(alguns preferem dizer coluna) <td>.
 Todos estes comandos são encerrados como </table> , </tr>
e </td> respectivamente.
 Existe ainda o comando <th> </th> que permite criar uma
coluna de título(cabeçalho da tabela).
59
HTML 5 Tabelas
 <table>
 <tr>
<td> </td>
 </tr>
 </table>
60
HTML 5 Tabelas
 É possível englobar colunas e linhas, através dos atributos

colspan (para colunas) e rowspan (para linhas). Estes atributos
são muito importantes pois nos possibilitam remodelar a
disposição das células dentro da tabela.
61
HTML 5 Tabelas
62
HTML 5 Tabelas
63
HTML 5 Tabelas

HTML 5 Tabelas
65
HTML 5 Tabelas
 Apesar dos atributos HTML, presente nos elementos para

criação de tabelas, estarem disponíveis para formatação de
cores, bordas, espaçamento, largura, altura e outros, a
recomendação é que TODAS AS FORMATAÇÕES
POSSÍVEIS SEJAM REALIZADAS ATRAVÉS DO CSS
3.
66
 Folhas de Estilo.
CSS3
67
68
Inserção do CSS
 O CSS formata a informação entregue pelo HTML. Essa

informação pode ser qualquer coisa, imagem, texto, vídeo,
áudio ou qualquer outro elemento criado. Essa formatação na
maioria das vezes é visual.
69
Folhas de Estilo (CSS3)
 Cascading Style Sheets (ou simplesmente CSS) é uma

linguagem de estilo utilizada para definir a apresentação de
documentos escritos em uma linguagem de marcação, como
HTML ou XML. Seu principal benefício é prover a
separação entre o formato e o conteúdo de um documento.
Ao invés de colocar a formatação dentro do documento, o
desenvolvedor cria um link (ligação) para uma página que
contém os estilos, procedendo de forma idêntica para todas
as páginas WEB. Quando quiser alterar a aparência de
uma página WEB basta portanto modificar apenas um
arquivo.
70
Folhas de Estilo (CSS3)
 Cabem a CSS todas as funções de apresentação de um

documento e ao HTML todas as funções de marcação e
estruturação de conteúdos. Uma página web é composta
então de CSS + HTML.
71
Regras da Sintaxe CSS3
 Folhas de estilo em cascata é um mecanismo simples para

adicionar estilos (por exemplo: fontes, cores, espaçamentos)
aos documentos web. Segundo os idealizadores da WEB,
não cabe à HTML fornecer informações ao agente do
utilizador sobre a apresentação dos elementos. Por
exemplo: cores de fontes, tamanho de textos,
posicionamento e todo o aspecto visual de um documento
não deve ser função do HTML. Cabem às CSS todas as
funções de apresentação de um documento.
72
 Sendo assim um website é formado por HTML + CSS.

Entre as vantagens de se utilizar CSS merece
destacar:
 Facilidade de manutenção: definição de estilos que se apliquem

a toda página ou website. As mudanças são feitas de forma
centralizada;
 Novas possibilidades de apresentação visual: muitas
funcionalidades permitidas pela CSS não são suportadas pelo
HTML.
73
 Uma regra do CSS é uma declaração que segue uma sintaxe

própria e que define como será aplicado estilo a um ou mais
elementos HTML . Um conjunto de regras CSS formam uma
Folha de Estilos. Uma regra CSS, na sua forma mais
elementar, compõe-se de três partes: um seletor, uma
propriedade e um valor e tem a sintaxe conforme
mostrado abaixo:
 Seletor { propriedade: valor;}
74
Comentários em CSS3
 /* COMENTÁRIOS DE UMA LINHA */
 /* COMENTÁRIOS
DE MÚLTIPLAS
LINHAS */
75
 Propriedades do CSS3
76
Propriedades de Fontes
 As propriedades para as fontes, definem as características
das letras que constituem os textos dentro dos
elementos HTML.
77
Propriedades de Fontes
Propriedade descrição
font-style efeito de inclinação, ex.: normal, italic;
font-variant transforma letras minúsculas em letras
maiúsculas, onde as anteriormente em
maiúsculo ficarão um pouco maiores das
que estavam em minúsculo; ex.: normal,
small-caps.
font-weight intensidade (espessura) da fonte; ex.:
100..900,normal, bold, bolder lighter,
normal, bold, bolder, lighter.
font-size tamanho da fonte; ex.: small, medium, large,
smaller, larger, 10, 10%.
font-family lista com os nomes da fontes que devem
ser utilizadas nos textos por ordem de
preferência, começando da mais desejada;
ex.: serif,Verdana, Arial, “Times New
Roman”;
font atalho para especificar as propriedades
anteriores em um único local.
78 Colégio Arco Íris
Propriedades de Background
color cor do texto
background-color cor de fundo
background-image imagem que será utilizada como fundo do
elemento; e as propriedades a seguir
poderão ser usadas.
background-repeat como a imagem será repetida se o

tamanho dela for menor que a área de
apresentação; ex.: no-repeat, repeat,
repeat-x, repeat-y.
background-position posição inicial da imagem na área de
apresentação; ex.: 10% 20%, 100 200, left,
center, right, top,center, bottom.
background atalho para especificar as propriedades
anteriores em um único local.

Propriedades para Margens
margin-top define a margem superior
margin-bottom define a margem inferior
margin-right define a margem direita
imagem que será utilizada como fundo do
elemento; e as propriedades a seguir
poderão ser usadas.
margin-left define a margem esquerda
margin maneira abreviada para todas as margens
80
Os valores possíveis para Propriedades das
Margens São
auto valor default da margem
length uma medida reconhecida pelas CSS (px, pt,
em, cm, ...)
% porcentagem da largura do elemento pai
81
Propriedades Para Espaçamento
padding-top define o espaçamento superior
padding-right define o espaçamento à direita
padding-bottom define o espaçamento inferior
padding-left define o espaçamento à esquerda
padding maneira abreviada para todas os

espaçamentos.
82
Propriedades Para Bordas
border-width espessura da borda
border-style estilo da borda
border-color cor da borda
Borda superior
border-top-width espessura da borda superior
border-top-style estilo da borda superior
border-top-color cor da borda superior
83
Borda direita
border-right-width espessura da borda direita
estilo da borda direita

border-right-style
border-right-color cor da borda direita
Borda inferior
border-bottom-width espessura da borda inferior
border-bottom-style estilo da borda inferior
border-bottom-color cor da borda inferior
84
Borda esquerda
border-left-width espessura da borda esquerda
border-left-style estilo da borda esquerda
border-left-color cor da borda esquerda
85
Podemos ainda abreviar a propriedade border da seguinte forma
border-top maneira abreviada para todas as
propriedades da borda superior
border-right maneira abreviada para todas as
propriedades da borda direita
border-bottom maneira abreviada para todas as

propriedades da borda inferior
border-left maneira abreviada para todas as

propriedades da borda esquerda
border maneira abreviada para todas as quatro

bordas.
Estilização de Textos
text-align alinhamento do texto
text-decoration decoração do texto
text-indent recuo do texto
text-transform forma das letras
border maneira abreviada para todas as quatro

bordas.
letter-spacing espaçamento entre letras
word-spacing espaçamento entre palavras
text-shadow é utilizado para aplicar uma sombra a um

texto
Layout
 O primeiro passo para construir um layout css é definir
como será o design da página. O design de uma página
pode ser feito em ferramentas( CorelDrawn, Photoshop,
etc…) apropriadas pra criação de design de páginas WEB
ou mesmo em uma folha de papel.
88
Layout
89
Diferentes Formas de Aplicação de CSS3
num documento HTML.
 As folhas de estilos são vinculadas no documento

HTML de três formas.
 Estilo Externo (linkadas ou importadas);

 Estilo Interno;
 Estilo Inline.
90
Estilo Externo
 Uma folha de estilo é dita externa, quando as regras

CSS estão declaradas em um documento a parte do
documento HTML. A folha de estilo é um arquivo
separado do arquivo html e que tem a extensão .css
 Uma folha de estilo externa é ideal para ser aplicada a
várias páginas. Com uma folha de estilo externa ,
podemos alterar a aparência de um site inteiro
mudando um arquivo apenas (o arquivo da folha de
estilo).
91
Estilo Externo
 Para incluir um arquivo externo .css a um documento

html, usamos a tag <link> entre as tags <head>
</head> de acordo com a seguinte sintaxe:
<head>
<link href=“estilo.css” rel="stylesheet" type="text/css" />
</head>
92
Estilo Interno
 Uma folha de estilo é dita interna, quando as regras

CSS estão declaradas no próprio documento HTML.
 Uma folha de estilo interna, é ideal para ser aplicada a
uma única página, dessa forma podemos alterar a
aparência de somente um documento.
 No estilo interno as regras são declaradas na seção
<head> do documento com a tag de estilo <style> e
são aplicadas no documento inteiro.
93
Estilo Interno
 Veja a sintaxe abaixo:
<head>
<style type="text/css">
p{
color:#993366;
}
</style>
</head>
94
Estilo Inline
 Uma folha de estilo é dita inline, quando as regras CSS

estão declaradas dentro da tag do elemento HTML. No
estilo inline as regras são aplicadas diretamente nas tags
html e modifica os atributos de uma tag específica no
documento, com isto ele perde muitas das vantagens de
folhas de estilo pois mistura o conteúdo com a
apresentação.Veja exemplo:
<p style="color:#0066CC; font-size:20px">

Professor Carlos Neto.
</p>
95
 Diferentes formas de aplicação de CSS3
num documento HTML.
PRÁTICA
96
Estilo Externo
97
Estilo Externo
98
Estilo Externo
99
Estilo Interno

Estilo Interno

Estilo Inline

Estilo Inline
103
 Até aqui já sabes as Diferentes formas
de aplicação de CSS3 num documento
HTML. E a diferença e as vantagens e
desvantagens entre os estilos!
104
Colocar Imagem como Fundo da Página
Web
105
Web
106
Web
107
Tag Para acentuações
108
Tag Para acentuações
109
Formatação de imagens com CSS3
110

112
113
Estilo CSS3 para Tabelas em HTML5

115
116
117
118
119
120
121
122
Links em HTML 5
 Um link é uma conexão para uma página externa ao

documento. Pode direcionar o visitante para outra
página do mesmo site ou conduzi-lo à uma página
externa ao site. Os links têm sua sintaxe geral
conforme a seguinte marcação abaixo:
 <a href=“http://www.carlosneto.com.ao”> Site do

Professor de TLP Carlos Neto </a>
123
Menu com HTML 5

Menu com CSS3
125
Menu com CSS3
126
Menu com CSS3
127
Menu com CSS3
128
Menu com CSS3
129
Menu com CSS3
130
Menu com CSS3
131
Menu com CSS3
132
Menu com CSS3
133
Menu com CSS3
134
Menu com CSS3
135
Ajustar o logotipo com CSS3
136
Ajustar o logotipo com CSS3
137
Vídeo e Áudio em HTML 5
 Existem vários modos de colocar um vídeo ou arquivo de

áudio em seu site. A inserção de vídeo depende bastante
do tipo de arquivo de vídeo que temos para inserir em
uma página e se o plugin daquele formato está instalado no
navegador.
 O HTML5 introduz o suporte de mídia embutido por
meio dos elementos <audio> e <video>, oferecendo a
possibilidade de incorporar facilmente mídia em
documentos HTML.
138
 Estes elementos são independentes da instalação de plug-

ins e desde que o navegador utilizado suporte HTML os
arquivos de áudio e vídeo serão carregados sem a
necessidade de instalação de plug-ins.
 Para adicionar áudio ou vídeo utilizamos respectivamente
as tags:
<audio src=“arquivo de áudio.xxx”> </audio>
<video src=“arquivo de vídeo”> </video>
139
Estes elementos possuem os seguintes atributos:
 controls: Mostra os controles padrão para o
áudio/vídeo na página.
 autoplay : Faz com que o áudio/vídeo reproduza
automaticamente.
 loop : Faz com que o áudio/vídeo repita
automaticamente.
 width e height: largura e altura do elemento.
140
Áudio em HTML 5
141
Áudio em HTML 5
142
Vídeo em HTML 5
143
Vídeo em HTML 5
144
O elemento Div
 A tag DIV define uma divisão ou um seção em um documento
HTML.
 DIV na verdade não causa nenhuma diferença visual no código.
Ele é considerado um "container", ou seja, uma espécie de
"caixa" não visual que você pode, através de script, alterar o
conteúdo dele, alterando o código HTML dinamicamente. Ou
então é usado para aplicar um estilo (css) em todo o bloco
HTML contido dentro do Os sites atuais estão sendo
produzidos, com a utilização de uma coleção de mais e mais
elementos div, em substituição as antigas tabelas que eram
usadas para criar o layout de um site. Para cada div é criada
uma classe ou id no código css que contém o estilo de
uma determinada div no documento HTML.
145
O elemento Div
 Todo elemento HTML é uma "caixa" retangular a ser
apresentada na tela com as estilizações determinadas
pelas regras CSS. As caixas são empilhadas uma após a
outra e constituídas de margens, bordas, espaçamentos e
o conteúdo propriamente dito.
146
O elemento Div Exemplo
147
Alterar a cor da Lista em estilo.css
148
Propriedades em css da o elemento div
interface
149
interface
150
interface
151
interface
152
interface
153
Propriedades em css do elemento div
interface
154
Colocar o Menu na Posição Vertical
155
Colocar o Menu na Posição Vertical
156
Projecto HTML 5, CSS 3 e Java Script


159
160

162
163
164

166
167
168
170
172
173
174
175
176

178
179
180
181

183
184
185
Formulários Web
 Um dos recursos mais interessantes da linguagem Html é
a possibilidade de criar formulários eletrônicos.
 Usando um formulário o utilizador pode interagir com o
servidor, enviando dados que serão processados no
servidor e posteriormente devolvidos ao cliente.
 Esses comandos são os principais responsáveis pela
viabilização da troca de informações entre o cliente e o
servidor. Eles podem ser usados em qualquer tipo de
atividade.
186
Formulários Web
 Os formulários são iniciados com a tag de abertura
<form> e encerrados com a tag de fechamento </form>.
 É muito importante que todo o conteúdo do corpo do
formulário esteja entre essas duas tags de abertura e
fechamento.
 <form> </form>
187
Formulários Web
 Os formulários podem conter qualquer formatação -
parágrafos, listas, tabelas, imagens - exceto outros
formulários.
 Em especial, colocamos dentro da marcação de <FORM>
as formatações para campos de entrada de dados, que
são três:
 <input>
 <select>
 <textarea>
188
Formulários Web
 A forma mais simples de campo de entrada é a marcação
text utilizando a tag <input>.
 A tag <input> tem um atributo TYPE, ao qual atribuímos
seis valores diferentes para gerar seis tipos diferentes de
entrada de dados que são:
 Text
 Radio
 Checkbox
 Password
 Hidden
 File
189
Formulários Web
 Além do atributo type, a tag <input> apresenta os
seguintes atributos:
 O atributo name identifica o campo através de um nome

 O atributo size representa a largura da caixa.
 O maxlength representa o número máximo de
caracteres a serem digitados.
 O atributo value representa o conteúdo da caixa de
texto.
 Quando INPUT não apresenta atributos, é assumido que
TYPE=TEXT (valor padrão);
190
Formulários Web

Formulários Web
192
Formulários Web

Formulários Web
194
Formulários Web
 A tag responsável pela criação do botão de envio é o <input>
e os seus atributos são:
 type:
 o type=“submit” – indica que a função desse botão é de enviar
os dos do formulário.
 o type=“reset” – indica que os dados preenchidos serão todos
apagados e o formulário não será enviado.
 o type=“button” – esse type não tem nenhuma função e
normalmente é utilizado em conjunto com um
comportamento de Javascript que será acionado pelo evento
onClick.
 text: texto que aparecerá no botão.
 name= texto para identificar esse input.
195
Formulários Web

Formulários Web
197
Projecto HTML 5, Página Contacto
198


201
Página Contacto, Form.css

Página Contacto, Form.css
203
Página Contacto, estilo.css
204
Página Contacto
205
 JAVASCRIPT NOÇÕES GERAIS .

207
Noções Gerais Sobre JavaScript
 JAVASCRIPT É UMA LINGUAGEM de programação
interpretada criada em 1995, como uma extensão do HTML
para o browser Navigator 2.0. Hoje existem implementações
JavaScript nos browsers dos principais fabricantes.
 Programas em JavaScript são interpretados linha-por-linha
enquanto o browser carrega a página ou executa uma rotina.
 JavaScript é baseada em objetos. Trata suas estruturas básicas,
propriedades do browser e os elementos de uma página
HTML como objetos (entidades com propriedades e
comportamentos) e permite que sejam manipulados através
de eventos do usuário programáveis, operadores e expressões.
208
 Com JavaScript pode-se fazer diversas coisas que não é
possível com HTML:
 Realizar operações matemáticas e computação.
 Abrir janelas do browser, trocar informações entre
janelas, manipular propriedades do browser como o
histórico, barra de estado, etc.
 Interagir com o conteúdo do documento, alterando
propriedades da página, dos elementos HTML e tratando
toda a página como uma estrutura de objetos.
 Interagir com o utilizador através do tratamento de
eventos.
209
 Duas funções básicas do JavaScript:
210
Diferentes Formas de Aplicação do
JavaScript num documento HTML.
 Para editar código JavaScript, é necessário apenas um
simples editor de texto, como o Bloco de Notas do
Windows.
 Há três formas de incluir JavaScript em uma página
Web:
 JavaScript Dentro de blocos do HTML;

 JavaScript Arquivo Externo;
 JavaScript Dentro de tags HTML sensíveis a eventos.
211
JavaScript Dentro de blocos do HTML
 A forma mais prática de usar JavaScript é embutindo o
código na página dentro de um bloco delimitado pelas
tagas do HTML <script> e </script>.
 Pode haver vários blocos <script> em qualquer lugar da
página, a sintaxe é a seguinte:
 <script>
... instruções JavaScript ...
 </script>
212
213
214
JavaScript Arquivo Externo
 Muitas vezes é necessário realizar um mesmo tipo
de tarefa mais de uma vez. Para esse tipo de
problema JavaScript permite que o programador
crie funções que podem ser chamadas de outras
partes da página várias vezes.
 Se várias páginas usam as mesmas funções
JavaScript definidas pelo autor da página, uma boa
opção é colocá-las em um arquivo externo e
importá-lo nas páginas que precisarem delas.
 Este arquivo deve ter a extensão “.js” e conter
apenas código JavaScript (não deve ter tags
HTML).
215
216
217
218
JavaScript Dentro de tags HTML sensíveis
a eventos
 A linguagem JavaScript permitem a captura de eventos
disparados pelo utilizador, como o arrasto de um mouse,
o clique de um botão, etc. Quando ocorre um evento, um
procedimento de manuseio do evento é chamado. O que
cada procedimento irá fazer pode ser determinado pelo
programador.
 Os atributos de eventos se aplicam a elementos HTML
específicos e sempre começam com o prefixo “on”.
219
a eventos
220
a eventos
221
Página Principal
 Incluir os arquivos externos na página principal que
permite as imagens trocarem.
222
Página Principal
223
Página Principal
224
Página Principal
225
Página Principal
226
Página Desporto

Página Desporto

Página Desporto

Página Principal
230
Página Desporto
231
Página Desporto
232
Página Desporto

Página Desporto

Página Desporto

Página Desporto

Página Desporto, fotos.css
237
estilo.css
238
estilo.css
239






Página Desporto
246
Página Desporto

Página Desporto

Página Desporto
249
Página Desporto

Página Desporto

Página Desporto

Página Desporto

Página Desporto

Página Desporto

Página Desporto

 Menu Vertical com Ocultação do Menu.
257
Menu Vertical com Ocultação do Menu

Técnicas e Linguagens de Programação 12 - 2022/2023

Enviado por

Dados do documento

Título original

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

Técnicas e Linguagens de Programação 12 - 2022/2023

Enviado por

Direitos autorais:

Formatos disponíveis

REPÚBLICA DE ANGOLA

GOVERNO DA PROVINCIA DE LUANDA

Curso Técnico de Informática

Professor : Carlos Augusto Dos Santos Neto, UAN- FC-CC 5º.

A World Wide Web, é uma Rede de alcance mundial em

Internet é um sistema global de redes de computadores

O desenvolvimento da World Wide Web começou em 1980 quando

No natal de 1990, Berners-Lee tinha construído as ferramentas

No ano seguinte da sua invenção , construiu o primeiro website, que

A 30 de Abril de 1993, a organização colocou o software World

Todos os anos se realiza uma Conferência Internacional da

Em setembro de 1994, Berners-Lee fundou o Consórcio da

Website é uma palavra que resulta da justaposição

Por exemplo, a informação que está sendo lida neste

Há diversos tipos de websites disponíveis na internet:

Caracteristicas Atributos Categorias

Orientadas aos Dados

 Informativo - conteúdo apenas para leitura, com

 Orientada à transacção — o utilizador envia um

Base para Comparação Páginas da Web Páginas da Web

 As páginas Web são importante porque nos permite a

 Fácil de utilizar e aprender.

 Necessita de acesso a internet para visitar a página.

 Hospedagem é um serviço que possibilita as pessoas ou

 HTML é a linguagem usada para criar páginas de hipertexto na

 Não fornece nenhuma ferramenta de apoio para a construção.

 Um navegador, também conhecido pelos termos em inglês

 Um servidor Web é um aplicativo responsável por fornecer ao

 1) Fale a evolução do HTML: da versão 1 até 5.

<h1>Colégio Arco Íris</h1>

 O tamanho da letra em html varia de h1 a h6.

 O paragrafo em html representa-se por de <p> a </p>.

53 Colégio Arco Irís

 <!-- Comentário de uma linha: Complexo escolar

<!-- Comentário em grupo

 Tabelas são utilizadas para apresentação de dados em forma de

 É possível englobar colunas e linhas, através dos atributos

64 Colégio Arco Irís

 Apesar dos atributos HTML, presente nos elementos para

 O CSS formata a informação entregue pelo HTML. Essa

 Cascading Style Sheets (ou simplesmente CSS) é uma

 Cabem a CSS todas as funções de apresentação de um

 Folhas de estilo em cascata é um mecanismo simples para

 Sendo assim um website é formado por HTML + CSS.

 Facilidade de manutenção: definição de estilos que se apliquem

 Uma regra do CSS é uma declaração que segue uma sintaxe

 Seletor { propriedade: valor;}

 /* COMENTÁRIOS DE UMA LINHA */

background-repeat como a imagem será repetida se o

79 Colégio Arco Íris

margin-left define a margem esquerda

margin maneira abreviada para todas as margens

padding-bottom define o espaçamento inferior

padding-left define o espaçamento à esquerda

padding maneira abreviada para todas os

border-style estilo da borda

border-color cor da borda

border-top-style estilo da borda superior

border-top-color cor da borda superior

estilo da borda direita

border-bottom-style estilo da borda inferior

border-bottom-color cor da borda inferior

border-left-style estilo da borda esquerda