REPÚBLICA DE ANGOLA

MISTÉRIO DA EDUCAÇÃO
COMPLEXO ESCOLAR PRIVADO ASTRO DO SABER

HTML - CSS E JAVA

SCRIPT

CLASSE: 11ª Informática

PERÍODO: Tarde
GRUPO Nº 4
TURMA: A
Docente

Menakuanzambi Dombel

01/2022
 REPÚBLICA DE ANGOLA
MISTÉRIO DA EDUCAÇÃO
COMPLEXO ESCOLAR PRIVADO ASTRO DO SABER

Elementos do grupo Valor

Francisco Mungongo Dias Gaspar
Arsénio Lopes Victor
Mário Flávio Fernando
Vladimir Carlos

01/2022
Índice HTML - CSS E
JAVASCRIPT

Agradecimento ……………………………….………………………………………… 3

Dedicatória ……………………………………………………………...……………… 4

Objetivo ……………..…………………………………………………………………. 5

Introdução ……………………………………………………………………………… 6

1- HTML ………………………………………………………………………..…….. 7
1.1- História do HTML ………………………………………………………………… 7
1.2- Funcionamento do HTML ……………………………………...………………… 7
1.3- Estrutura do HTML ……………………………………….………………………. 8
2- CSS ………………………………………………………………………………… 9
2.1- História CSS ………………………………………………………..……...………. 9
2.2- Estilando com CSS ………………………………………………………………… 9
2.3- Sintaxe e inclusão CSS …………………………………………………...……… 10
3- JavaScript …………………………………………………………...…………….. 12
3.1- História do JavaScript ……………………………………..……………………. 12
3.2- Sintaxe e inclusão JS ……………………………………………….……………. 12

Conclusão ……………………………………………………………………….……. 13

Recomendações ………………………………………………………………………. 14

Referências bibliográficas ……………………………………………...…………….. 15

HTML - CSS E JAVASCRIPT

Agradecimento

Em primeiro lugar agradecemos a Deus todo-poderoso pela força e graça que ele
nos concedeu. É uma honra poder ter a chance de fazer este trabalho, por isso nós
agradecemos ao nosso professor de SEAC ‘Menakuanzambi Dombel’ por nos ter
agraciado com este tema. Estendemos também os nossos cordiais agradecimentos aos
nossos pais pelo apoio que nos deram ao longo da caminhada, agradecemos também aos
professores que tiveram o privilégio de nos acompanhar no percurso do nosso trabalho,
aos nossos amigos, familiares e a todos nossos colegas. E é com muito respeito e
bondade que dissemos “Muito obrigado a todos”.

3
HTML - CSS E JAVASCRIPT

Dedicatória

Dedicamos o nosso trabalho a todos aqueles que têm interesse em conhecer,

saber ou estudar acerca de desenvolvimento web, dedicamos também aos nossos
professores, amigos, familiares e colegas.

4
HTML - CSS E JAVASCRIPT

Objetivo

O nosso trabalho tem como objetivo o entendimento simples de

desenvolvimento web, propriamente dito as linguagens que intervêm para sua criação
(HTML, CSS e JavaScript).

5
HTML - CSS E JAVASCRIPT

Introdução

Certamente você já pesquisou qualquer coisa na internet, e já abriu alguma

página na internet, mas você já se perguntou como é feita a página? Bem é exatamente
isso que vamos falar no nosso trabalho. De forma resumido vamos falar- te sobre os
factores que intervêm na sua criação.

Tal como é feito um programa para um dispositivo, uma página é feita de

maneira semelhante, bem com algumas diferenças. enquanto que tu crias um programa
para ser instalado e usado num dispositivo, tu crias uma página para poder ser aberto e
usado em um dispositivo, sem ter a necessidade de ter o documento da página instalado
no dispositivo, tudo que tu precisas ter é um navegador, e poderás usar quantas vezes
quiseres a página desde que tenhas acesso a internet.

Para tu criasres uma página precisas ter domínio da linguagem HTML

(Hypertext Markup Language – Linguagem de Marcação de hipertexto). HTML não é
uma linguagem de programação mas sim uma linguagem de marcação, pelo simples
motivo que que linguagens de programação são usados para criar setup que serão
instalados noutros dispositivos compatíveis, e o HTML é apenas necessário saber os
funcionamento de suas tags e escrever-las em um editor de texto qualquer, salvar o
documento e abrir em um navegador. O HTML apesar de ser a linguagem número um
para a exibição de página, ela precisa o apoio das linguagens CSS (Cascading Style
Sheet – Folha de Estilo em Cascata) e JavaScript para obter resultados satisfatórios.

6
HTML - CSS E JAVASCRIPT

1- HTML
1.1- História do HTML

A linguagem HTML foi desenvolvida por Tim Berbers – Lee nos finais do ano
de 1990, criada com o objectivo de compartilha documentos científicos entre os
académicos, tendo como objecto a própria internet. Mais tarde com o desenvolvimento
do www (world – wide – wed), criada também por Lee, em conjunto com o HTML
proporcionou o uso em escala mundial da web.

Lee desenvolveu o HTML baseando - se no SMGL, da qual o HTML herda

todos os principais componentes. A grande diferença entre as duas na época, é que o
HTML foi constituído por uma tag “a”. Essa pequena característica é a responsável
pelos links da internet e conectar páginas entre si, por outras palavras ela é a
responsável pelo desenvolvimento de páginas completas.

O HTML evolui muito até chegar ao HTML actual, das versões que mais foram
destacadas foram a v.2 lançada em 1995, a v.3.2 lançada 1997, a v.4.01 lançada em
1999, e a v.5 que é a versão mais actual lançada em 2014.

1.2- Funcionamento do HTML

O HTML trabalha em conjunto com os navegadores da internet e com o sistema

de mecanismo de busca. Após que o código da página estiver pronto, o navegador
interpretar o conjunto de instruções e informações escritos, e redirige o site visualmente
de acordo com informações dadas, visualizando em forma de texto, formas, imagens e
outros recursos.

Bem, para que um site funcione correctamente é necessário contar com várias
páginas HTML, como por exemplo, geralmente em um menu encontramos instruções
com ‘sobre’, ‘Contacto’, ‘Serviços’, cada um desses componentes é uma página
separada.

Para que um site fique aberto para a internet é necessário a hospedagem em um

servidor, isto acontece quando os arquivos HTML são transferidos para uma máquina
específica, que fica responsável por responder a solicitações de acesso a internet,
quando alguém digita um endereço na barra de endereço, encontra este servidor.

Quando alguém digita uma palavra em um mecanismo de busca, aparece vários

resultados com uma estrutura padronizada; surgem um título e uma discrição do
conteúdo da página, essas informações são fornecidas pelo HTML de cada página,
assim uma pessoa que busca uma coisa qualquer na web, consegui encontra o que
procura.
7
HTML - CSS E JAVASCRIPT

1.3- Estrutura do HTML

HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma

página no navegador.

Tags são as marcações pertencentes do HTML, eles são responsáveis pela

apresentação formatada do texto. As tags têm a seguinte sintaxe: < nome_da_tag >.
Como por exemplo considera a seguinte linha:

<h1> MusicDot </h1>

A tag acima não precisa de atributo para funcionar, porém existe aquelas que
necessitam obrigatoriamente de atributos parar funcionar, como é o caso da tag <img>:
<img atributo>. Atributo são as características ou contrapartida que um dado documento
deve possuir.

Um documento HTML válido precisa obrigatoriamente seguir a estrutura

composta por tags: <! DOCTYPE>; <html>; <head>; e <body>. Esta estrutura esta
informada em uma documentação que descreve todos os detalhes HTML (no caso tags e
atributos), e como os navegadores devem considerar e interpretar estas tags; esta da
documentação é chamada de “especificação HTML”, e é através do que está declarado
nela que é possível entender se é um documento HTML válido. Um documento HTML
inválido é carregado, mas não formatado de maneira correta.

A estrutura básica que qualquer documento HTML deve possuir é a seguinte:

<! DOCTYPE HTML> <!- Indica qual versão do HTML usar->

<html> <!- Indica o inicio do documento HTML ->

<head> <!- Indica o inicio do cabeçalho, é no cabeçalho onde deve conter as informações da página,
elas não apareceram na página ->

<title> Título </title>

</head> <!- Indica o fim do cabeçalho ->

<body> <!- Indica o inicio da página HTML ->

<!- É aqui onde vem o conteúdo de exibição da página, ou seja o corpo da página ->

</body> <!- Indica o fim da página ->

</html> <!- Indica o fim do documento HTML ->

O HTML funciona em conjunto com as linguagens CSS e JavaScript.

8
HTML - CSS E JAVASCRIPT

2- CSS
2.1- História do CSS
O CSS foi proposto pela primeira vez em outubro de 1994, por Hakon Lie, pela
necessidade de facilitar a programação de sites, que na época era muito mais complexa,
as pessoas tinham que utilizar mais códigos para chegar a um resultado simples, como
criar uma tabela.
Em 1995 o CSS1 foi desenvolvido pela W3C, um grupo de empresas do ramo da
informática. A linguagem de estilos ganhou muito destaque entre 1997 e 1999, neste
período ficou conhecido por grande parte dos programadores.
No início, o HTML era a única linguagem utilizada para criar sites. Quando
começou a ganhar popularidade, algumas tags foram criadas pelos navegadores para
facilitar o uso da linguagem, para facilitar ainda mais a estilização destes documentos, a
W3C criou o CSS, colocando a disposição dos Webdesigners.
O CSS é uma linguagem que determina a aparência de páginas para a Web. Este
programa permite ao usuário criar paginas da Web com códigos mais fáceis de elaborar
que os códigos HTML.

Este programa é utilizado pelos programadores em todo o mundo. O CSS controla

as opções de margem, linhas, cores, alturas, larguras, imagens e posicionamento, sem
necessidade de programar em HTML.  O CSS tem também alguns códigos prontos,
permitindo aos usuários pouparem tempo criando códigos muito comuns.

Alguns benefícios do CSS:

 A partir de
um só documento do CSS, controlam-se vários documentos .html;
 Facilidadede criação dos layouts, que não precisam de códigos muito
complexos;
 Linguagem fácil e rápido de aprender.

2.2- Estilizando com CSS

Quando escrevemos o HTML, marcamos o conteúdo da página com tags que

melhor representam o significado daquele conteúdo, quando abrimos a página no
navegador é possível perceber que ele Mostra as informações com estilos diferentes.

Um h1, por exemplo, por padrão é apresentado em negrito numa fonte maior.
Isso quer dizer que o navegador tem um estilo padrão para as Tags que usamos. Porém
para fazer sites bonitos, ou com o visual próximo de uma dada identidade Visual, vamos
precisar personalizar a apresentação padrão dos elementos da página.

9
HTML - CSS E JAVASCRIPT

Antigamente, isso era feito no próprio HTML. Hoje em dia tags HTML para
estilo são consideradas má prática e um erro usá-las, são interpretadas apenas para o
modo de compatibilidade.

Em seu lugar, surgiu o CSS, a vantagem é que o CSS é bem mais rico do que o
HTML em termos de estilização. O CSS permite que as funções de estilo CSS não
aparecem mais no documento HTML, apenas no documento CSS, fazendo uma
separação dos dois documentos, assim fica mais fácil de gerir o a estilização permitindo
que um documento CSS, seja importado em vários documentos HTML.

2.3- Sintaxe e inclusão CSS

A sintaxe do CSS tem estrutura simples, é uma declaração de propriedades e

valores separados por um sinal de dois pontos “:”, e cada propriedade é separada por um
sinal de ponto e vírgula “;”, da seguinte maneira:

color: blue;

background-color: red;

O elemento que receber essas propriedades será exibido com o texto na cor azul
e com o fundo vermelho.

Essas propriedades podem ser declaradas de três maneiras diferentes:

O atributo style

A primeira delas é com o atributo style no próprio elemento:

<h1 style=”color: blue; background-color: red;”>

O conteúdo desta tag será exibido em azul com fundo vermelho no navegador!

</h1>

A tag style

A outra maneira de se utilizar o CSS é declarando suas propriedades dentro de

uma tag <style>.

Como estamos declarando as propriedades visuais de um elemento em outro

lugar do nosso documento, precisamos indicar de alguma maneira a qual elemento nos

10
HTML - CSS E JAVASCRIPT
referimos. Fazemos isso utilizando um seletor CSS. É basicamente uma forma de buscar
certos elementos dentro da página que receberão as regras visuais que queremos.

No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua
cor e sua cor de fundo:

<style>

p{

color: blue;

background-color: red;

O código dentro da tag <style> indica que estamos alterando a cor e o fundo de
todo os elementos com tag p. Dizemos que selecionamos esses elementos pelo nome de
sua tag, e aplicamos certas propriedades CSS apenas neles. Agora sempre que for
chamada a tag p o navegador passará o conteúdo em azul com fundo vermelho.

Arquivo externo

A terceira maneira de declararmos os estilos do nosso documento é com um

arquivo externo 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).

Além da melhor organização do projeto, a folha de estilo externa traz ainda as

vantagens de manter nosso HTML mais limpo e do reaproveitamento de uma mesma
folha de estilos para diversos documentos.

A indicação de uso de uma folha de estilos externa deve ser feita dentro da tag
<head> de um documento HTML:

<head>

<link rel=”stylesheet” href=”estilos.css”>

</head>

E no arquivo CSS colocamos apenas as propriedades CSS:

p{

color: blue;

background-color: red;

11
HTML - CSS E JAVASCRIPT

3- JAVASCRIPT
3.1- História do JS

Visando o potencial da Internet para o público geral e a necessidade de haver

uma interacção maior do usuário com as páginas, em 1995 o Javascript foi criado pelo
programador Brendan Eich. Naquela época, o nome de batismo foi Mocha e, logo
depois, passou a ser conhecido por LiveScript.

Aproveitando o iminente sucesso do Java, que vinha conquistando cada vez mais
espaço no mercado de desenvolvimento de aplicações corporativas, a Netscape logo
rebaptizou o Livescript como JavaScript, num acordo com a Sun para alavancar o uso
das duas.

3.2- Sintaxe e inclusão JS

A tag script

Para inserirmos um código JavaScript em uma página, é necessário utilizar a tag

<script>:

<script>

Alert(“Olá, Turma!”);

</script>

A tag <script> pode ser declarada dentro da tag <head> assim como na tag
<body>, mas devemos ficar atentos, porque o código é lido imediatamente dentro do
navegador.

Arquivo externo

Imagine ter que reescrever o script toda vez que ele for necessário. Para não
acontecer isso, é possível importar scripts dentro da página utilizando também a tag
<script>, o arquivo JS tem de ser salvo com a extensão ‘.js’:

<script type=”text/javascript” src=”js/hello.js” > </script>

Alert(“Olá, Turma!”);

Com a separação do script em arquivo externo é possível reaproveitar alguma

funcionalidade em mais de uma página.

12
HTML - CSS E JAVASCRIPT
4-

13
HTML - CSS E JAVASCRIPT

Conclusão

Chegamos a conclusão que HTML, CSS e JavaScript são algumas das

linguagens utilizadas para o desenvolvimento web. HTML (Hypertext Markup
Language – Linguagem de Marcação de hipertexto), é a principal linguagem que um
navegador consegui entender para exibição de conteúdo. CSS (Cascading Style Sheet –
Folha de Estilo em Cascata), que é outra linguagem, separada do HTML, com o
objetivo único de cuidar da estilização da página. JavaScript é a linguagem de
programação, mas popular no desenvolvimento web, suportada por todos os
navegadores, a linguagem é responsável por praticamente qualquer tipo de dinamismo
ou interação que queiramos em nossa página.

14
HTML - CSS E JAVASCRIPT

Recomendações

Como a demanda por sites é tem vindo a crescer, o aprendizado do HTML é

bastante valioso para a carreira em TI e pode ajudar a impulsionar sua vida profissional.
o HTML é essencial para a construção de websites. Por isso, é interessante se dedicar a
ele.

Recomendamos que um técnico de informática, estuda a fundo a linguagem

HTML, mais sabendo que a HTML funciona com os suportes das linguagens CSS e
JavaScript, também é necessário dedicar-se à elas.

15
HTML - CSS E JAVASCRIPT

Referências Bibliográfica

http://www.nce.ufrj.br/ginape/js/conteudo/introducao/caracteristicas.htm

https://www.infoescola.com/informatica/cascading-style-sheets-css/amp/

https://www.infoescola.com/informatica/html/amp/

https://www.cpt.com.br/cursos-informatica-desenvolvimentodesoftwares/artigos/
linguagem-de-programacao-javascript-um-breve-historico

16