Programação Básica para

Web
Guilherme Henrique de Assis
2022
SUMÁRIO
Capítulo 1. Introdução ................................................................................................... 4

Introdução à Web ........................................................................................................................ 4

Capítulo 2. HTML ........................................................................................................... 11

Estrutura básica......................................................................................................................... 11

Capítulo 3. CSS ............................................................................................................... 22

Sintaxe ........................................................................................................................................... 22

CSS Inline, Global e Externo ................................................................................................ 23

Seletores ....................................................................................................................................... 24

Comentários ................................................................................................................................ 26

Cores ............................................................................................................................................... 26

Background .................................................................................................................................. 27

Bordas............................................................................................................................................. 28

Margin e Padding ...................................................................................................................... 28

Height e Width ........................................................................................................................... 29

Textos ............................................................................................................................................. 30

Capítulo 4. História do JavaScript, DOM e HTML5 ......................................... 32

História do JavaScript ............................................................................................................ 32

2
1
Capítulo 1. Introdução
Introdução à Web
A internet é uma rede mundial de computadores interconectados.
Para que isso seja possível, protocolos de comunicação foram estabelecidos
e são seguidos por quem se conecta a ela. A história da internet se inicia na
época da Guerra Fria, na qual o Departamento de Defesa dos Estados Unidos
criou um projeto chamado ARPANet, com o intuito de criar uma forma de
conectar universidades para compartilhamento de informações. Em 1974,
foi criado o protocolo TCP/IP para permitir a transferência de dados, sendo
utilizado até hoje na internet.

A World Wide Web (WWW), ou somente Web, criada por Tim Berners-
Lee no início dos anos 90, é o nome dado a um sistema de conteúdos
interligados e transferidos a partir da internet, ou seja, podemos ver a World
Wide Web como um conjunto de websites disponíveis que podemos acessar
através da internet. Dessa forma, a partir de um navegador, também
chamado de browser, seria possível visualizar conteúdos disponibilizados na
internet. Estes conteúdos poderiam ter hyperlinks para outros conteúdos,
conectando esses documentos, pois a web opera no protocolo HTTP, que
permite o tráfego desses materiais. Hoje, com o avanço da web, podemos
consumir diferentes tipos de conteúdo, como textos, imagens e vídeos.

O HTTP é a sigla para Hypertext Transfer Protocol, um protocolo de

comunicação utilizado pelos navegadores para comunicarem com os
servidores, provendo assim os dados ao usuário. Sua primeira versão foi
proposta por Tim Berners-Lee, em 1991, e foi chamada de HTTP/0.9. Seu
objetivo era apenas transferir texto através do método GET, que era o único
existente na época.

Em 1996, surgiu o HTTP/1.0, a segunda versão do protocolo. Nele

foram incluídas várias funcionalidades, como a possibilidade de utilização
de outros tipos de arquivos nas páginas, como imagens, e o método POST,

4
permitindo assim que as páginas não somente buscassem dados no
servidor, mas que também enviassem informações para ele. A terceira
versão do HTTP foi lançada em 1999 e foi chamada de HTTP/1.1, se
estabelecendo como um padrão a ser seguido na internet. Ele implementou
melhorias de performance em relação a sua versão anterior, como a
possibilidade de as páginas serem comprimidas no servidor e
descomprimidas no usuário, diminuindo o tempo de transferência.

Esta versão do protocolo, durante muito tempo, atendeu muito bem

às demandas da internet, porém, à medida que o tempo foi passando, as
páginas começaram a ficar cada vez mais pesadas, incluindo várias imagens,
vídeos e artefatos externos, como arquivos CSS e JavaScript. O número de
dispositivos conectados também cresceu bastante. Com isso, o HTTP/1.1
passou a ter problemas de performance, principalmente pelo fato de ser um
protocolo sequencial, ou seja, o navegador abre uma conexão com o servidor
para buscar determinado recurso e somente quando a transferência termina
é que ele pede o próximo. Para agilizar esse processo, os navegadores
geralmente abrem 6 conexões por servidor, porém, como grande parte das
páginas possui recursos de vários servidores diferentes, o navegador pode
acabar abrindo várias conexões para abrir uma página, o que congestiona o
uso da rede e prejudica outras aplicações. Outro ponto que acaba onerando
as requisições é que a cada requisição é preciso enviar os cabeçalhos e no
HTTP/1.1 ele é enviado em texto puro, aumentando o tamanho da
transferência.

Pensando nessas limitações e em outras melhorias é que surgiu, em

2015, o HTTP/2. Ele foi criado após o Google começar a criar um protocolo
chamado SPDY, que corrigia os problemas de performance do HTTP/1.1.
Após ver as ideais do SPDY, o HTTP Working Group (HTTP-WG) resolveu
trabalhar no HTTP/2, que posteriormente também foi adotado pelo Google.
A semântica do protocolo não foi afetada na nova versão, sendo mantido o
formato dos cabeçalhos e métodos. As melhorias realizadas nesta nova

5
versão foram de performance. A imagem abaixo ilustra a linha do tempo da
evolução do HTTP.

Figura 1 – Linha do tempo do HTTP.

Fonte: https://blog.apiki.com/2016/12/20/http2/

O HTTP/2 trabalha com multiplexação, ou seja, o navegador abre uma

única conexão com o servidor para baixar vários arquivos, e essas
requisições e respostas são paralelas e assíncronas. O navegador pode pedir
vários arquivos ao mesmo tempo e assim que eles estiverem prontos recebê-
los na mesma conexão, sem a necessidade de ficar abrindo múltiplas
conexões com o mesmo servidor. Outra vantagem do HTTP/2 é que nele os
cabeçalhos são binários e compactados, diminuindo o custo de tráfego.
Além disso, o servidor pode utilizar os chamados header tables, enviando
somente os cabeçalhos que forem diferentes, os iguais o navegador pode
manter e reaproveitar. Outra melhoria do HTTP/2 é o chamado server push.
No HTTP/1.1, o navegador precisava primeiro solicitar a página e após ler o
HTML e ver que ele iria precisar de elementos externos é que ele iria
requisitá-los. Com o server push, o servidor pode enviar esses elementos
antes que o navegador os solicite, de forma que quando o navegador vir que
ele precisa de tais recursos, eles já estarão disponíveis para uso.

Com a popularização dos webservices, o protocolo HTTP passou a ser

ainda mais utilizado. Esta nova versão trouxe diversos benefícios para todos,
tanto para os usuários, que têm um carregamento mais rápido dos dados,
quanto para as empresas, que terão uma performance melhor de seus
servidores.

6
Estrutura de uma página web
Uma página web é constituída por 3 componentes básicos: HTML, CSS
e JavaScript. O HTML é a linguagem de marcação responsável por mostrar o
conteúdo. O CSS é a parte responsável por estilizar a página, mudando o
tamanho e cor da fonte, por exemplo. O JavaScript é o responsável por criar
comportamentos na tela, como fazer com que uma informação desapareça
da tela de acordo com alguma condição. O HTML, além de exibir a
informação, também dá significado à página, pois é através dos elementos
contidos neles que buscadores de conteúdo leem a página e entendem o
que os elementos significam. O acrônimo HTML significa Hyper Text Markup
Language. Ele marca as informações com tags, cada qual com um
significado. Por exemplo, ao escrever <h1>Título</h1>, você está falando
que este conteúdo dentro da tag h1 é um título.

Tags são o conjunto de caracteres que formam um elemento. Existem

tags que precisam de fechamento e outras que não. Por exemplo, a tag “p”,
que representa um parágrafo, precisa de fechamento, enquanto a tag <br>,
que representa uma quebra de linha, não precisa ser fechada. Um elemento
é formado a partir de tags e dentro das tags está o conteúdo do elemento.
As tags servem para marcar onde começam e onde terminam os elementos.
Atributos são informações que são passadas na tag para que ela se
comporte da forma esperada e possuem um nome e um valor. Por exemplo,
o atributo “id” é o identificador único do elemento. Um exemplo de utilização
de um atributo seria: <a
href="https://www.xpeducacao.com.br/">Ir para o site da XPE</a>. Esta tag
é uma das principais do HTML, ela cria um link para a URL informada no
atributo href.

Ferramentas
Para criar uma página web, é preciso algum editor de texto para
escrever o código fonte e um navegador para podermos abrir a página e
conferir seu funcionamento. Em relação ao editor de texto, não é obrigatório

7
que seja utilizado algum específico, é possível utilizar até mesmo o Bloco de
Notas que vem instalado no computador. Porém, é muito mais prático
utilizar um editor de texto focado para desenvolvimento, pois ele virá com
diversas funcionalidades para ajudar o trabalho. Recomendamos a utilização
do Visual Studio Code, um editor gratuito e muito popular entre
desenvolvedores. Para realizar a instalação, basta fazer o download pelo link
https://code.visualstudio.com/ e seguir os passos.

Figura 2 – Visual Studio Code.

Fonte: https://code.visualstudio.com/

Em relação ao navegador, existem diversas opções, como Google

Chrome, Firefox, Microsoft Edge, entre outros. A partir dele, você pode digitar
um endereço e ele irá enviar uma requisição que chegará até o servidor que
está hospedando aquela página, que por sua vez responderá com a página
solicitada. Para o desenvolvimento, recomendamos o Google Chrome, por
ser o mais popular entre usuários e desenvolvedores. Para realizar a
instalação, basta fazer o download pelo link https://www.google.com/intl/pt-
BR/chrome/ e seguir os passos.

Nas aulas gravadas, usaremos muito uma ferramenta que vem dentro
do Google Chrome, chamada Chrome Dev Tools. Ela serve para inspecionar
a página que estiver aberta, sendo possível analisar sua estrutura,
elementos e estilos. Para acessá-la, basta apertar a tecla F12, estando
dentro da página, ou clicar com o botão direito do mouse em qualquer lugar
da página e clicar em “Inspecionar” no menu.

8
 Figura 3 – Google Chrome.

Fonte: https://www.google.com/intl/pt-BR/chrome/

9
2
Capítulo 2. HTML
Neste capítulo, veremos como estruturar documentos HTML
usando os principais elementos; não estilizaremos os elementos, iremos
vê-los na página com a sua visualização padrão, sem CSS. A partir do
próximo capítulo, começaremos a utilizar o CSS para estilizar os
documentos, melhorando a forma que são apresentados na página.

Estrutura básica
Um documento HTML possui uma estrutura básica, sendo dividido em
três blocos principais: o doctype, o head e o body. O doctype é este código:
<!DOCTYPE html>. Ele não é uma tag HTML, é uma instrução que sempre
deve estar presente nos documentos, de forma a informar ao navegador e a
outros programas que queiram ler a página que o código contido ali é HTML.
Ele sempre deve estar na primeira linha do documento. A tag head contém
informações que não são mostradas para quem estiver lendo o documento.
Eles são dados de uso e controle do documento, como vinculação de outros
arquivos e aplicação de lógicas de programação através de scripts
Javascript. Dentro da tag head pode estar incluída a tag meta, que não
produz nenhum efeito aparente na página, porém é responsável por definir
algumas informações da página, que poderão ser utilizadas por exemplo por
buscadores para pegar algumas informações básicas da página, como o
título e uma pequena descrição. A tag body contém o documento em si, é
nesta tag em que ficarão as informações visíveis aos usuários. Nesta tag,
ficará todo o texto e toda a informação de mídia que será apresentada, como
imagens. Os campos de formulários nos quais os usuários irão entrar com
dados também estão incluídos no body. A figura abaixo ilustra a estrutura
básica de um documento HTML.

11
Elementos e atributos
Um elemento é composto por três partes, a tag de abertura, o
conteúdo e a tarde de fechamento. A tag de abertura é representada pelo
nome do elemento entre os sinais de menor e maior, definindo qual o local
de início do elemento. A tag de fechamento é parecida com a tag de
abertura, porém ela tem uma barra antes do nome do elemento e serve
para definir onde é o final da tag. O conteúdo do elemento é o que fica
entre as tags de abertura e de fechamento. É importante que a tag seja
fechada corretamente, evitando a ocorrência de erros. A imagem abaixo
ilustra um exemplo de elemento chamado “p”, que cria um parágrafo na
página, com suas tags de abertura, fechamento, o texto como conteúdo.

Atributos são formas de definir informações adicionais para os

elementos. Eles são sempre configurados na tag inicial, no formato de
chave e valor. A imagem abaixo ilustra um elemento chamado âncora,
representado pela letra “a”, que serve para criar um link na página que, ao
ser clicado, redireciona o usuário para o endereço definido. Na imagem,
também podemos observar o atributo “href”, com o endereço ao qual o
usuário será redirecionado ao clicar. O conteúdo deste elemento é o texto

12
“Clique aqui”. A imagem abaixo também mostra como este link é mostrado
na tela.

Também é possível aninhar elementos, colocando um dentro do

outro e respeitando a abertura e o fechamento das tags. A imagem abaixo
ilustra a tag “strong”, que transforma seu conteúdo em negrito, aninhada
ao conteúdo de um parágrafo. Note que a tag “strong” tem abertura e
fechamento ainda dentro da tag “p”, pois a ordem neste caso é importante.
A própria composição de um documento HTML é um exemplo de
aninhamento de elementos, já que começamos a estruturar a página
dentro da tag “body”.

Também é possível ter alguns elementos vazios, que não possuem

conteúdo. Um exemplo deste caso é a tag “img”, que é utilizada para
mostrar uma imagem na tela. O caminho da imagem que será mostrada é
definido no atributo “src”, não sendo necessário nenhum tipo de conteúdo.
A imagem abaixo ilustra uma tag “img”, com um atributo “src”, que indica a
imagem que será carregada no local que esta tag foi colocada. Note que a
tag “img” tem sua abertura, porém não tem o fechamento, pois esta tag
tem tudo que precisa em seus atributos, não necessitando que um
conteúdo seja informado entre tags de abertura e fechamento.

13
Cabeçalhos
O HTML tem 6 elementos para gerar cabeçalhos, são eles: “h1”,
“h2”, “h3”, “h4”, “h5” e “h6”. A tag “h1” define o cabeçalho mais importante
da página, enquanto o “h6” define o menos importante. A letra “h” da tag
vem da palavra “heading”, em inglês, que significa cabeçalho. A imagem
abaixo mostra a utilização destas tags e como elas são geradas na página.

Por mais que seja possível criar o mesmo efeito visual das tags de
cabeçalho combinando um elemento de texto como a tag “p” e CSS, o uso
das tags de cabeçalho é importante pois mecanismos de busca como o
Google, ao analisar a página para realizar a indexação do conteúdo,
utilizam muito da estrutura da página, e estas tags informam claramente
que aquele conteúdo ali é um cabeçalho, ajudando o mecanismo a
entender os títulos da página, começando do “h1” como mais importante e
descendo em nível de importância até o “h6”.

Parágrafos
A tag “p” indica um parágrafo, iniciando o conteúdo em uma nova
linha, com um espaçamento dos outros elementos na margem superior e
na inferior. Seu conteúdo geralmente é um texto, que pode ser informado

14
entre as tags de abertura e fechamento. A imagem abaixo ilustra um
exemplo de utilização desta tag.

Comentários
Em arquivos HTML, também é possível colocar comentários, que
não serão interpretados pelo browser no momento da leitura. Eles podem
ser utilizados para deixar alguma explicação no código HTML, ou até
mesmo algum lembrete de uma tarefa pendente. A imagem abaixo ilustra a
utilização de um comentário, que se inicia com o símbolo “<!--“ e se encerra
com “-->”. O comentário pode ter somente uma linha ou várias. Tudo que
estiver entre estes dois símbolos não será mostrado na página.

Links
Link é uma funcionalidade essencial para a web, pois ele permite
que o usuário navegue entre documentos ao clicar em um link. Um link é
definido pela tag “a”.

O atributo “href” é utilizado para indicar o caminho para qual o

usuário será redirecionado. Este link pode ser um endereço de um site, ou
até mesmo documento local, como um outro arquivo HTML. Neste caso, o
caminho é definido utilizando uma URL relativa a partir do local que o
arquivo que contém o link está. A imagem abaixo ilustra um exemplo no
qual o link redireciona para um outro arquivo, chamado
“outra_pagina.html”, que está dentro de um diretório chamado
“meu_diretorio”, que está localizado no mesmo diretório do arquivo atual.
Caso você queira que o novo endereço abra em uma nova aba do navegador
ao invés de abrir na janela atual, é possível especificar um atributo
chamado “target” com o valor “_blank”. Com o atributo “title”, é possível

15
definir o título do link, que será mostrado ao passar o mouse por cima do
link. A imagem abaixo ilustra como este link é mostrado.

Imagens
A tag “img” é utilizada para mostrar uma imagem no documento
HTML. No atributo “src” é especifico o caminho da imagem, seja ele um
caminho relativo ou um endereço na internet. As imagens não são
literalmente inseridas na página, o que é feito é a alocação do espaço
definido na tag para mostrar a imagem e ela será carregada quando a
página HTML for aberta. Uma tag de imagem possui um atributo chamado
“alt”, no qual podemos fornecer um texto que será mostrado no lugar da
imagem caso não seja possível carregá-la por algum motivo. Este atributo
também é utilizado por leitores de tela, por isso, visando a acessibilidade
das páginas, é interessante que toda imagem tenha um atributo “alt”
definido com uma frase curta que explique o conteúdo da imagem. Para
alterar o tamanho da imagem, podemos utilizar os atributos “height” para
altura e “width” para largura, ambos em pixels. Também é possível alterar o
tamanho utilizando CSS, que iremos discutir no próximo capítulo.

Favicon
Favicon é uma pequena imagem mostrada na aba do navegador, ao
lado do título da página. Geralmente ela é chamada de “favicon.ico” e pode
ser configurada na tag “head” do documento HTML, usando a tag “link”
para isso, conforme a imagem abaixo. A tag “link” não tem conteúdo, logo
não precisa de fechamento, somente dos atributos “rel”, “type” e “href”.

16
Tabelas
No HTML existem tags que permitem a criação de tabelas, com a
quantidade de linhas e colunas que for necessário. A tag “table” define a
criação da tabela, e o seu conteúdo serão as linhas, representadas pelas
tags “tr”. Dentro de cada “tr”, podemos criar as colunas. Cada coluna é
representada pela tag “td”. No caso da primeira linha, se quiser que ela
tenha o formato de um cabeçalho, pode ser usada a tag “th” ao invés da
“td”. O conteúdo das colunas, também chamadas de células, pode ser
qualquer elemento HTML, seja ele um texto ou uma imagem, por exemplo.
A tag “tr” é a abreviação de “table row”, “td” é “table data”, e “th” é “table
header”. As imagens abaixo ilustram o código para a criação de uma tabela
simples e como ela é visualizada na página.

17
Listas
O HTML também possui uma tag voltada para a criação de listas de
elementos. A lista pode ser não ordenada, na qual os itens serão
representados por um ponto, ou podem ser ordenadas, na qual os itens são
numerados. Para a lista não ordenada, podemos utilizar a tag “ul”; para a
ordenada, a tag “ol”. Nos dois casos, os conteúdos da tag serão tags “li”,
cada uma representando um item. A imagem abaixo ilustra a utilização das
duas listas e como elas são visualizadas na página.

Entidades de Caracteres HTML

O HTML possui alguns caracteres que são reservados, como os
símbolos de maior (>) e menor (<), pois eles são usados na construção das
tags, logo, não é possível utilizá-los diretamente desta forma no meio do
código, pois, caso contrário, o navegador entenderá que ali está sendo
criada uma tag.

Para utilizar este tipo de caracteres como texto, é preciso usar

entidades de caracteres, que são códigos específicos que, ao serem
utilizados, serão substituídos no momento da construção da página pelo
respectivo símbolo. Por exemplo, para mostrar o símbolo “<”, pode ser

18
utilizado o código “&lt;” ou “&#60;”, e, para o símbolo “>”, seria “&gt;” ou
“&#62;”. A imagem abaixo ilustra a utilização destes dois símbolos.
Existem diversas tabelas na internet que mostram todos os códigos para
diversos símbolos, como disponível neste link: https://unicode-
table.com/en/html-entities/

Quebra de linha e separador

O HTML possui um elemento representado pela tag “br” que produz
uma quebra de linha. Pode ser utilizado no meio de texto no qual é preciso
dividir a linha. Em alguns casos também pode ser utilizado para auxiliar no
layout da página, quando é preciso inserir algum espaçamento, porém,
neste caso, o mais indicado é trabalhar com CSS, como veremos no
próximo capítulo.

Um outro elemento que pode ser utilizado quando precisamos

separar seções da página é o elemento “hr”, que cria uma linha na
horizontal, ocupando todo o espaço disponível. Tanto a tag “br” quanto a
“hr” não possui conteúdo, logo não é necessário fechá-las. A imagem
abaixo ilustra um exemplo de utilização destas duas tags.

19
Elementos Inline e Block
Existem dois tipos de elementos HTML, os de tipo block e os de tipo
inline. Os elementos do tipo block são gerados na página um abaixo do
outro, enquanto os inline são gerados um ao lado do outro.

Os elementos do tipo block sempre iniciam em uma nova linha e

ocupam todo o espaço horizontal disponível. Podemos citar como exemplo
as tags de cabeçalho, parágrafo, lista, tabela e separador. Uma tag de tipo
block muito utilizada na criação de páginas é a tag “div”. Ela serve para
agrupar elementos, criando divisões ou seções na página, atuando como
um container para outros elementos. Ela é muito utilizada em conjunto
com o CSS para estilizar e posicionar grupos de elementos.

Os elementos do tipo inline não iniciam uma nova linha. As tags “a”
e “img” são exemplos. Uma outra tag inline muito utilizada é a tag “span”.
Ela é uma tag genérica que sozinha não mostra nada na tela, porém é
muito utilizada para agrupar um conteúdo textual por exemplo, de forma
que possamos aplicar um código CSS no elemento. A tag “span” pode ser
vista como um container inline, enquanto a “div” seria um container em
bloco. As imagens abaixo ilustram.

20
3
Capítulo 3. CSS
CSS é a sigla para Cascading Style Sheets e é uma linguagem utilizada
para definir a aparência de documentos que adotam linguagens de
marcação para o seu desenvolvimento, como o HTML. Ele define como serão
exibidos os elementos contidos no código de um documento e sua maior
vantagem é efetuar a separação entre o formato e o conteúdo de um
documento.

O CSS foi criado porque, à medida que a tecnologia foi evoluindo,

passou a ser necessário melhorar a apresentação dos documentos, de forma
a deixá-los mais atrativos aos usuários. Com isso, criaram-se no HTML novas
tags e atributos de estilo, de forma que ele passou a exercer, além da função
de estruturar o documento, a função de estilizá-lo. Porém, isso começou a
gerar problemas para os desenvolvedores, pois não havia uma forma de
definir um estilo padrão para alguns elementos em específico, como estilizar
todos os cabeçalhos de um projeto da mesma forma, e assim era preciso
alterar manualmente cada arquivo. Para solucionar esse tipo de problema é
que nasceu o CSS, sendo desenvolvido primeiramente para habilitar a
separação do conteúdo e formato de um documento de sua estilização.
Dessa forma, as cores e formatos de fonte, por exemplo, poderiam ficar
separadas da estrutura do documento, podendo assim ser reaproveitas por
várias páginas. Esta separação aumentou esta flexibilidade, favorecendo o
compartilhamento do formato e reduzindo a repetição de código na
estrutura dos documentos.

Sintaxe
A sintaxe do CSS é bem simples, ela define a forma como o estilo
será aplicado aos elementos HTML. A sintaxe é composta por três partes
principais, um seletor, uma propriedade e o valor que será aplicado. O
seletor seria, por exemplo, um elemento HTML como uma “div” ou “body”,
no qual a regra escrita será aplicada. A propriedade é o atributo do

22
elemento no qual a regra será aplicada, como “color”, “font” ou “position”. O
valor é a característica que será aplicada na propriedade do seletor
informado, por exemplo, uma determinada cor ou tamanho de fonte. A
figura abaixo ilustra um exemplo de uma regra CSS, no qual é aplicada a
cor preta no fundo do elemento “body”. O “body” seria o seletor, a
propriedade o “background-color” e o valor seria “black”.

CSS Inline, Global e Externo

CSS pode ser aplicado de 3 formas. A primeira é chamada de inline e
consiste em aplicar o CSS a um elemento do HTML utilizando seu atributo
“style”. Dessa forma, o CSS é aplicado somente naquele elemento em
específico. Outros elementos do mesmo tipo na página não receberão este
estilo aplicado. A figura abaixo exemplifica esta forma.

A segunda maneira de aplicar CSS é chamada de CSS interno e

consiste em utilizar a tag “style” dentro do “head” de uma página HTML.
Desta forma, o CSS é válido para toda a página. Assim, o estilo aplicado em
um seletor em específico valerá para toda a página. Por exemplo, caso seja
aplicada uma regra que define o tamanho da fonte dos elementos “span”
como 40px, todos os “span” da página teriam esta regra aplicada. A figura
abaixo ilustra o CSS interno.

23
 A terceira forma de aplicar CSS é chamada de CSS externo. Esta forma
consiste em criar um ou mais arquivos com extensão .css e incluí-los na tag
“head” do documento HTML. A regra de aplicação é similar ao CSS interno,
de forma que um estilo aplicado a um seletor específico valerá para toda a
página. A diferença do externo para o interno é que no externo as regras são
encapsuladas em um arquivo que pode ser reaproveitado por várias páginas,
e no interno estas regras deveriam ser copiadas e coladas em cada uma das
páginas na qual fosse utilizar, o que não é o ideal, pois no caso de uma
mudança ela deveria ser replicada manualmente em todas as páginas, ao
contrário do externo no qual a mudança seria feita somente em um arquivo.
A imagem abaixo ilustra o CSS externo.

Seletores
Um seletor CSS, além de poder ser um elemento como um “body” ou
“div”, também pode ser uma “class” ou um “id”. Uma “class” é uma forma de
identificar um grupo de elementos. Através dela, pode-se atribuir regras a
vários elementos de uma vez. Ao escrever um CSS para uma “class”, todos
os elementos que tiverem a mesma propriedade “class” serão afetados. A
imagem abaixo ilustra um CSS para uma “class” e sua utilização em várias
tags “div”. No CSS, uma classe é identificada pelo ponto antes do início do
nome da classe e é esse nome que será utilizado no atributo “class” dos
elementos.

24
 Id é uma forma de identificar um elemento, devendo haver um único
Id para cada. Através dele, pode-se atribuir um CSS para um elemento em
específico, ao contrário da class. A imagem abaixo ilustra um CSS para
alguns ids em específico e sua utilização no HTML. Para identificar que o
CSS irá se aplicar somente ao elemento com aquele id em específico,
usamos no CSS o símbolo de “#” seguido do id do elemento.

25
Comentários
Comentários no CSS são realizados utilizando os símbolos “/*” para
iniciar o comentário e “*/” para fechar. Eles podem ter somente de uma linha
ou várias. Assim como os comentários no HTML, eles não influenciam no
código, sendo ignorados pelo navegador. A imagem abaixo ilustra a
utilização.

Cores
O CSS possui 140 cores já definidas que podem ser utilizadas apenas
com o nome. O seguinte link possui uma relação com todas as cores
predefinidas: https://www.w3schools.com/colors/colors_names.asp. Caso a
cor desejada não esteja previamente definida, é possível especificar o código
hexadecimal relativo à cor ou o seu código RGB.

26
 Em relação à cor, no formato hexadecimal, ela é especificada iniciando
com o caractere “#” e uma sequência de 6 letras ou números, da seguinte
forma: #rrggbb. As letras “rr”, “gg” ou “bb” são valores hexadecimais,
variando entre “00” e “ff”. O “rr” indica a quantidade de vermelho que a cor
terá, “gg” a quantidade de verde e “bb” a quantidade de azul. Utilizar “ff”
indica que é o valor máximo daquela cor, enquanto “00” indica o valor
mínimo.

Em relação ao formato rgb, a cor é informada com o seguinte formato:

rgb (r, g, b), no qual as letras dentro dos parênteses indicam a quantidade de
vermelho, verde e azul, variando de 0 a 255. Este formato tem uma variação
chamada rgba, em que é passado o quarto parâmetro, chamado de alpha, o
qual define qual o nível de transparência da cor, com valor entre 0 e 1, com
0 indicando totalmente transparente e 1 indicando sem transparência.

Usamos cores em diversas propriedades do CSS, como ao definir a cor

de um texto, quando podemos utilizar a propriedade “text-color”, e para a
cor de fundo de uma div, a propriedade “background-color”. A imagem abaixo
ilustra um exemplo de utilização de cores usando os 4 formatos citados
acima, em que tanto a primeira propriedade quanto as outras 3 comentadas
possuem o mesmo efeito.

Background
A partir do CSS, podemos definir o background elementos HTML. Já
vimos anteriormente como definir uma cor sólida para um background, a
partir da propriedade “background-color”. Também é possível colocar

27
imagem como fundo ao invés de uma cor, usando para isso a propriedade
“background-image” e o valor como url (“endereco_da_imagem”), onde o
endereço pode ser o caminho de uma imagem local ou um endereço na
internet. Por padrão, essa imagem é repetida várias vezes até cobrir o
elemento inteiro. Caso não queira que a imagem seja repetida, basta
adicionar a propriedade “background-repeat: no-repeat”. A imagem abaixo
ilustra essa utilização.

Bordas
É possível estilizar bordas de elementos, como de uma “div”. Para isso,
podemos utilizar a propriedade “border-style” para definir o tipo da borda,
com ela podendo ter algumas opções como “solid” para uma borda sólida,
“dashed” para tracejada ou “dotted” para formato de pontos. A largura da
borda é definida pela propriedade “border-width”, e a cor pela propriedade
“border-color”. É possível unificar estas 3 propriedades em uma só, chamada
“border”. Existe ainda a opção de colocar uma curvatura na borda, com a
propriedade “border-radius”, na qual quanto maior o número em pixels, mais
curva será a borda. A imagem abaixo ilustra esta utilização.

Margin e Padding
Margins são usadas para criar um espaçamento ao redor dos
elementos, do lado de fora da borda, enquanto o padding também é usado
para espaçamento ao redor dos elementos, porém no lado de dentro da
borda. É possível especificar o margin ou padding com tamanhos diferentes
em cada um dos quatro cantos. Para isto, basta adicionar a palavra “top” para

28
a parte superior, “bottom” para a inferior, “left” para a esquerda e “right” para
a direita, da seguinte forma: “margin-top”, “margin-bottom”, “margin-left”,
“margin-right” ou “padding-top”, “padding-bottom”, “padding-left” e
“padding-right”. Ao utilizar somente o “margin” ou “padding” e passando
somente um valor, esse valor será utilizado nos 4 lados. Caso queira
especificar os 4 valores, também é possível colocá-los em sequência como
valor para a propriedade “margin” ou “padding”, não havendo a necessidade
de usar as propriedades separadas. Neste caso, a ordem que o navegador
entenderá é “top”, “right”, “bottom” e “left”. A imagem abaixo ilustra um
exemplo de utilização desses comandos.

Height e Width
A propriedade “height” é utilizada para definir a altura de um
elemento e a “width” para definir a largura. Também é possível definir o
tamanho máximo ou mínimo de elementos, como uma “div”. A largura ou
altura máxima é definida adicionando a palavra “max” ao início das
propriedades. Dessa forma, ao definir a propriedade “min-width”, estamos
definindo qual a largura mínima do elemento, ele não será menor do que o
definido. Da mesma forma, com o “max-width” o elemento não passará da
largura definida. O mesmo se aplica para a propriedade “height”.

29
Textos
A respeito de estilização de textos, já vimos a propriedade “text-color”
para mudar a cor da fonte. Também é possível utilizar a propriedade
“background-color” para colocar uma cor de fundo no texto. Uma outra
propriedade interessante é a “text-align”, que permite alinhar o texto à
esquerda, que é o padrão, com o valor “left”, ao centro com o valor “center”
e à direita com o valor “right”. Uma outra propriedade interessante é a “text-
decoration-line”, que permite sublinhar um texto com o valor “underline”, ou
colocar uma linha por cima do texto com o valor “overline” ou um risco no
meio do texto com o valor “line-through”. Essas últimas propriedades podem
ser utilizadas em conjunto. Outra propriedade interessante é a “text-
transform”, que permite transformar o texto que será mostrado na tela a
partir do CSS em letras maiúsculas com o valor “uppercase”, em letras
minúsculas com “lowercase”, ou colocando a primeira letra de cada palavra
como maiúscula com o valor “capitalize”. A partir da propriedade “font-
family”, é possível alterar a fonte de um texto. Você pode especificar mais de
uma fonte, pois, caso o navegador não consiga mostrar a primeira, ele irá
tentar a segunda e assim por diante. A imagem abaixo ilustra a utilização de
algumas dessas propriedades.

30
4
 Capítulo 4. História do JavaScript, DOM e HTML5
História do JavaScript
O JavaScript foi criado em 1995 por Brendan Eich, que era
funcionário da Netscape. Nesta época, os browsers ainda eram estáticos e o
mais famoso da época era o Mosaic, da NCSA. Em 1994, a Netscape foi
fundada para explorar a web, criando-se então o Netscape Navigator, que
em pouco tempo se tornaria o browser dominante da época. Como os
browsers eram estáticos, a Netscape chegou à conclusão de que a web tinha
que se tornar mais dinâmica, pois sempre precisava-se fazer uma requisição
no servidor para obter uma resposta no navegador. Brendan Eich foi
contratado para criar uma linguagem que resolvesse esse problema. As
imagens abaixo ilustram o navegador Mosaic e Navigator da época.

Figura 42 – Navegador Mosaic

Fonte: http://shipit.resultadosdigitais.com.br/blog/javascript-1-uma-breve-
historia-da-linguagem/

Figura 43 – Navegador Netscape Navigator.

32
 Fonte: http://shipit.resultadosdigitais.com.br/blog/javascript-1-uma-breve-
historia-da-linguagem/

A ideia inicial era que fosse implementada a linguagem Scheme, uma

linguagem funcional baseada no LISP no Navigator. Porém, a Netscape já
tinha outros projetos em parceria com a Sun Microsystems e desejava
colocar a promissora linguagem Java no Navigator. Houve uma discussão
interna e optou-se por ter uma linguagem ao invés das duas. A linguagem
deveria parecer com o Java, pois como é uma linguagem funcional Scheme,
tem um nível de complexidade maior, o que poderia fazer com que a
linguagem não ficasse popular. Mesmo assim, o JavaScript sofreu influência
de linguagens funcionais, como Self, Perl e Python. Em maio de 1995, foi
criado um protótipo chamado Mocha da linguagem em 10 dias. O nome
depois foi alterado para LiveScript. Em novembro de 1995, saiu uma versão
do Navigator com a versão da linguagem feita em 10 dias, sem muitas
alterações. Em dezembro de 1995, devido ao fato do Java estar em seu ápice,
a linguagem foi renomeada para JavaScript.

Em agosto de 1996, a Microsoft criou uma linguagem idêntica ao

JavaScript para ser utilizada no Internet Explorer 3. Devido a isso, a
Netscape resolveu normatizar a linguagem através da organização ECMA
International, que era uma companhia especializada em padrões e
normativas. Em novembro de 1996, iniciaram-se os trabalhos em cima da
normativa ECMA-262. Como o nome JavaScript era patenteado pela Sun
Microsystems (hoje Oracle), ele não poderia ser usado, por isso foi dado o
nome ECMAScript. Porém, até hoje a linguagem é mais conhecida por
JavaScript e o nome ECMAScript é mais utilizado para se referir às versões
da linguagem. O ECMA-262 é mantido pelo Comitê Técnico 39, também
chamado de TC39, e é formado por especialistas de grandes empresas, como
Microsoft, Mozilla e Google. Desde a adesão ao ECMA, o ECMAScript passou
várias versões. Segue abaixo uma breve explicação sobre elas:

33
 – ECMAScript 1: lançada em 1997, representa a primeira
versão da linguagem com padrões e normativas definidos
após a adesão ao ECMA.

– ECMAScript 2: criada em agosto de 1997 para se adequar à

ISSO/IEC 16262.

– ECMAScript 3: criada em dezembro de 1999, contendo

melhorias consideráveis como laços de repetição do-while,
tratamento de exceções, dentre outros recursos.

– ECMAScript 4: foi concluída em 2008, sendo baseada em ML,

uma linguagem funcional utilizada em ambientes
acadêmicos. Como a linguagem seria muito diferente do
ECMAScript 3, optou-se por abandoná-la e dar continuidade
à versão anterior.

– ECMAScript 5: em 2012, foi lançada com recursos

importantes como suporte nativo ao JSON, métodos
avançados de manipulação de arrays, getters e setters, entre
outros.

– ECMAScript 6: lançada em 2015 com recursos avançados

como reflection, collections, binary data, entre outros.

– ECMAScript 7: lançada em 2016, também chamada de

ECMAScript 2016, foram adicionados mais recursos como
operadores exponenciais, entre outros.

– ECMAScript 8: foi lançada em junho de 2017, adicionando

mais funcionalidades como métodos para string padding,
entre outros.

Podemos notar que depois que o JavaScript passou a ser mais

utilizado pela comunidade, principalmente após o lançamento do NodeJs, o

34
pessoal está trabalhando ativamente em melhorias da linguagem, lançando
todo ano uma nova versão com a adição de novas funcionalidades.
Geralmente os navegadores modernos passam a dar suporte as novas
versões rapidamente, porém, alguns mais antigos podem não suportar
recursos novos que foram adicionados. Nestes casos, existem alguns
Polyfills que podem ser adicionados aos projetos para fazer com que a
aplicação funcione em browsers antigos. O que um polyfill faz é simular o
funcionamento daquele código de uma forma que o navegador antigo
entenda, para que a aplicação possa funcionar sem precisar alterar seu
código.

Uma ferramenta muito utilizada pelos desenvolvedores é o Babel. Ele

basicamente é um compilador de JavaScript, que permite que os
desenvolvedores escrevam código utilizando funcionalidades não
suportadas pela versão mais recente do ECMAScript, porém que já estão
previstas para as próximas versões. O Babel então pega esse código e o
converte para uma forma que funcione de acordo com a especificação atual.
Ele então permite que os desenvolvedores trabalhem hoje com novidades
que ainda estão por vir.

DOM
O DOM é uma interface de programação para documentos HTML e
XML. Ele provê uma representação da estrutura do documento e define um
meio pelo qual a estrutura pode ser acessada por programas, permitindo
assim que, além dela, estilo e conteúdo sejam alterados. Quando uma
página web é carregada por um browser, é criado o seu DOM da página,
representando a sua árvore de objetos. Com o DOM, o Javascript consegue
criar páginas dinâmicas, sendo possível trocar elementos e atributos da
página, alterar CSS, remover e incluir elementos e atributos do HTML e
reagir ou criar eventos na página. O DOM é um padrão da W3C que define
padrões para acesso e manipulação do conteúdo da página.

35
HTML5
O HTML foi criado por Tim Berners-Lee, na tentativa de criar uma
linguagem que fosse entendida por meios de acesso diferentes. Na década
de 90 ele ganhou força e passou a ser adotado por fabricantes de browsers,
compartilhando as mesmas convenções. Entre 1993 e 1995, surgiram
novas versões do HTML (HTML+, HTML 2.0, HTML 3.0), nas quais foram
propostas diversas mudanças para enriquecer a linguagem, porém ela
ainda não era tratada como padrão. Em 1997, o W3C trabalhou na
padronização da linguagem, gerando a versão 3.2. Em 2004, foi fundado o
WHATWG (Web Hypertext Application Tecnnology Working Group) por
empresas como Mozilla, Apple e Opera, iniciando os trabalhos de
desenvolvimento da nova versão do HTML, hoje chamada de HTML5.

O HTML5 é a nova versão do HTML4 e um dos seus principais

objetivos é facilitar a manipulação dos elementos. Ele fornece ferramentas
para o CSS e o Javascript atuarem de forma mais fácil, deixando a página
mais leve e funcional. Foram criadas tags, outras foram descontinuadas e
outras modificadas. Todas as mudanças foram realizadas de forma a
manter a retro compatibilidade, ou seja, páginas desenvolvidas em versões
anteriores continuam funcionando.

Foram criados elementos semânticos para facilitar a organização

das páginas, de forma a facilitar o entendimento do desenvolvedor e do
browser. Por exemplo, no HTML4, para definir um footer para a página, era
comum os desenvolvedores criarem uma div com o id chamado footer e lá
dentro colocarem o conteúdo do rodapé da página; no HTML5, foi criada a
tag footer para subrir essa necessidade. Da mesma forma, foi criada uma
tag para o header da página, uma tag para seções da página, chamada
section, entre outros. A imagem abaixo exemplifica alguns elementos
semânticos criados pelo HTML5 para definir diferentes partes da página.

36
 Figura 43 – Elementos Semânticos HTML5.

Fonte: https://www.w3schools.com/html/html5_semantic_elements.asp

No HTML, foram criadas diversas tags de multimídia, como a tag

vídeo, que permite reproduzir vídeos dentro da página. Antes do HTML5,
isso só era possível com o auxílio de plug-ins, como o Flash. É possível
executar comandos sobre o vídeo através do Javascript, como iniciar ou
parar o vídeo. Da mesma forma, também foi criada a tag áudio, que também
permite reproduzir arquivos de áudios diretamente do browser. Antes do
HTML5 isso também só era possível através de plug-ins. Outra tag criada
foi o canvas, com a qual é possível desenhar gráficos com o auxílio do
Javascript diretamente na página.

Uma importante API criada no HTML5 que facilita muito a vida dos
desenvolvedores é a Web Storage, com a qual é possível armazenar dados
localmente no browser do usuário. Antes do HTML5, os dados de aplicação
eram armazenados em cookies, que eram enviados em todas as requisições
ao servidor. O Web Storage, ao contrário dos cookies, não envia dados para
o servidor, além de permitir armazenar quantidades maiores de informação
sem afetar o desempenho da página. Cada origem possui seu próprio Web
Storage, ou seja, todas as páginas de um mesmo domínio conseguem
armazenar e acessar os mesmos dados, porém páginas de outros domínios
não conseguem ver os dados de outros. Esta API provê dois tipos de
objetos para armazenar dados no browser, o localStorage que armazena os
dados sem data de expiração, e o sessionStorage que mantém os dados
durante uma sessão, sendo removidos quanto a aba é fechada.

37
 Outra funcionalidade do HTML5 é o WebRTC (Real Time
Communication), que é uma tecnologia que permite o streaming de áudio e
vídeo e compartilhamento de dados entre dois browsers. WebRTC é um
conjunto de padrões que fornece ao navegador a capacidade de
compartilhar dados do aplicativo e realizar conferências de ponto a ponto,
sem a necessidade de instalar plug-ins ou software de terceiros. Os
componentes WebRTC são acessados através APIs JavaScript. Em relação
à conectividade, outra tecnologia disponibilizada pelo HTML5 são os
WebSockets. Através deles, é possível abrir uma sessão de comunicação
interativa entre o browser do usuário e o servidor. Com esta API, é possível
enviar mensagens para o servidor e receber respostas orientadas a eventos
sem ter que consultar o servidor para obter uma resposta. Isso permite que
o servidor possa enviar dados para o browser sem que ele tenha pedido.
Esta tecnologia é muito útil para sistemas em tempo real, por exemplo
dashboards de monitoramento. Ao invés da página ter que ficar fazendo
requisições de tempos em tempos ao servidor para verificar se há novos
dados (técnica também chamada de pooling), o servidor, assim que tiver
alguma informação nova para disponibilizar ao browser, pode enviar
através da conexão que está aberta através do WebSocket, isso evita que
seja feita uma sobrecarga desnecessária ao servidor através do pooling de
vários browsers tentando verificar se há dados novos para recuperar.

Outra API interessante é a de geolocalização, a qual permite que a

aplicação, mediante concessão de permissão do usuário, busque as
posições geográficas do usuário. Esta API é muito útil para sites que
utilizam a localização do usuário para lhe oferecer melhores ofertas e
sugestões, por exemplo. Além dessa API, também há outras
funcionalidades que auxiliam muito a utilização das páginas em
dispositivos móveis, como a API de acesso a câmera, a capacidade de
entender qual a rotação da tela, de forma a permitir adaptar o layout caso a
tela esteja na vertical ou na horizontal e até mesmo a capacidade de

38
detectar eventos de touchscreen e permitir que a aplicação responda a eles
através de ações com o Javascript.

O HTML5 trouxe diversas tecnologias que melhoram muito o

desenvolvimento de páginas web. Neste capítulo, foi dada uma visão geral
de algumas das novas funcionalidades. Caso deseje aprofundar melhor no
conteúdo, consulte a documentação da Mozilla sobre o tema no link
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5, que é bem
completa e detalhada.

39
40
7
10
6
9
8
5

41