Buscar

Apostila - Criação de Plataformas Digitais

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 130 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 130 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 130 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

Criação de Sites e Plataformas Digitais 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
CRIAÇÃO DE SITES E PLATAFORMAS DIGITAIS 
 
 
Criação de Sites e Plataformas Digitais 
INTRODUÇÃO 
Figura 1 - Criação de Sites / Fonte: Profissionais da WEB 
 
 A web é um ambiente em constante crescimento, com o tempo, as tecnologias evoluíram para 
proporcionar aos desenvolvedores a capacidade de criar gerações de experiências úteis e imersivas. 
Atualmente é um resultado dos esforços contínuos de uma comunidade aberta que ajuda a definir 
essas tecnologias garantindo que elas sejam suportadas em todos os navegadores. 
 Quando se pretende criar um site, blog ou loja virtual, é preciso buscar informações que 
indiquem como criar tais recursos. O que muitos esquecem, é que não basta criar o site é preciso 
dominar a linguagem para poder explorá-la e assim transformá-la em uma poderosa ferramenta de 
produção que é claro vai exigir muito mais conhecimento e criatividade. 
 
Apresentação 
 E tudo começa com o a linguagem HTML, à primeira vista simples, mas que guarda muitos 
recursos ainda utilizados até hoje. Desde simples editores de texto até ferramentas mais sofisticadas 
permitem que um arquivo HTML possa ser criado e processado. Porém como dito anteriormente a 
Web evoluiu ficou mais exigente, assim podemos dizer. Um outro passo importante foi o surgimento 
do CSS que possibilitou melhorar ainda mais a capacidade de quem desenvolve para a internet. Um 
conjunto de novas possibilidades que ajudam a ter um melhor controle sobre o layout e o 
gerenciamento do site. 
 
 
 
Criação de Sites e Plataformas Digitais 
 
 Por fim a internet é, podemos dizer, um caminho de mão dupla, na outra ponta está o usuário. 
Nessa evolução, a interação é algo que ambos os lados procuram. Do lado do desenvolvedor, buscar 
as melhores experiências para quem está atrás da tela. Do lado, do usuário, a exigência de algo que 
funcione, que dê a ele essa “melhor experiência”. Nesse ambiente surge também o JavaScript. Este 
se tornou uma das linguagens mais populares para desenvolvimento web, suportada pelos 
navegadores mais atuais. 
 Como podemos perceber há muito o que aprender. Dentro de cada etapa há um universo, que 
se explorado traz o conhecimento e com o conhecimento, grandes chances de se tornar um profissional 
atento às últimas atualizações. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Tema 01: HTML - Hypertext Markup Language ou Linguagem de Marcação de Hipertexto 
 
 
 
 
 
 
 
 
 
 
 
Figura 2 - Tela HTML / Fonte: Autoria própria 
 
É a língua mãe para a publicação de hipertexto na World Wide Web. Representa um formato não 
proprietário baseado em SGML (Standard Generalized Markup Language - Padrão Genérico para 
Linguagens de Marcação), o HTML pode ser criado e processado por uma ampla gama de ferramentas, 
desde simples editores de texto até ferramentas de autoria sofisticadas. 
Um breve histórico sobre HTML 
A linguagem HTML foi originalmente criada por Tim Berners-Lee quando ele trabalhava como 
pesquisador para o CERN e popularizada pelo aparecimento do browser Mosaic criado por Marc 
Andreessen quando ele estudava na Universidade de Illinois. 
Durante os anos noventa a linguagem espalhou-se com o crescimento explosivo da Web, 
expandindo- se de várias maneiras. O fato de o HTML depender de autores de páginas e de 
vendedores que compartilhassem as mesmas convenções acabou motivando o trabalho conjunto na 
criação de especificações para a linguagem. 
A primeira versão da linguagem HTML surgiu em 1992, seguida do HTML+, em 1993. Em novembro 
de 95 foi criado o HTML 2.0 sob a direção da EITF (Internet Engineering Task Force) com o objetivo 
de codificar práticas já comuns na época. Embora nunca tivessem alcançado um consenso geral nas 
discussões sobre padrões, estes rascunhos levaram à adoção de uma faixa de novas características. 
 Os esforços do grupo de trabalho do Consórcio WWW para codificar práticas comuns em voga até 
o ano de 1996 resultaram no HTML 3.2, especificado em janeiro de 97.Em 24 de dezembro de 1999 
foi sancionada a versão 4.01 do HTML, que é uma versão revisada do HTML 4. O HTML5 oferece 
ferramentas para o CSS e o Javascript efetuarem seu trabalho da melhor forma possível para que 
continue leve e funcional. 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Grande parte das pessoas concorda que: 
 • Os documentos HTML deveriam trabalhar bem em diferentes browsers; 
 • Os documentos HTML deveriam trabalhar bem em diferentes plataformas. 
Uma vez conseguido estes objetivos os desenvolvedores de conteúdo economizariam tempo e 
dinheiro precisando desenvolver somente uma versão do documento. 
Versões 
Existe um grupo voltado para buscar padronização na Internet, é chamado Word Wide Web 
Consortium ou W3C e pode ser encontrado no endereço www.w3c.org, que produz “Recomendações" 
para HTML. São especificações criadas pelos grupos de trabalho W3C e votadas pelos Membros do 
Consórcio.Uma Recomendação W3C indica que foi alcançado consenso entre os membros do 
consórcio para determinada especificação, ou seja, esta é apropriada para uso geral. A versão atual 
do HTML 5. Que é recomendada como a versão mais atual da linguagem, oferecendo novas 
características: 
Suporte a style sheets ou páginas de estilo: 
É possível controlar cores, fontes e layout das páginas Web por de Css. 
 
Características de internacionalização: O HTML consegue tratar texto escrito da direita para a 
esquerda, como por exemplo, texto em árabe e hebraico. Isto é conseguido pelo atributo LANG que 
pode ser usado com vários marcadores para ajudar o browser a exibir o texto de uma maneira 
apropriada à linguagem em questão. 
Características de acessibilidade: Alguns usuários utilizam-se de sintetizadores de voz ou leitores 
de Braile quando navegam pela Web. HTML 4 inclui características que fazem a Web mais acessível 
a quem tem problemas de visão ou outras deficiências. 
XHTML 
O XHTML (eXtensible Hypertext Markup Language) reformulou a linguagem de marcação HTML 
com base no XML. Combina as tags de marcação HTML com regras da XML, um processo que 
padronizou a exibição de um site nos mais diversos dispositivos como os celulares, tablets, desktops, 
entre outros com o objetivo de melhorar a acessibilidade. Pode ser interpretado por qualquer 
 
dispositivo, seja qual for a plataforma utilizada, as marcações dão um significado para as máquinas. O 
HTML não entende esta reformulação, entretanto, não há muitas diferenças entre o HTML e o XHTML. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Para verificar se uma página XHTML está bem construída, o melhor método é validar o código 
dentro de uma aplicação Web disponibilizado pela W3C. 
Uma página é delimitada pelos comandos <html> </html>, estes são o primeiro e último dos 
comandos do código respectivamente. Toda página é composta por um cabeçalho e um corpo sendo 
que na codificação, o cabeçalho vem antes do corpo. 
• Comandos do cabeçalho: <head> </head> 
• Comandos do corpo: <body> </body> 
 
 
 
 
 
 
O exemplo abaixo exibe o código da página que já pode ser visualizada no browser. 
 
Figura 4 - Estrutura básica do HTML / Fonte: Autoria própria 
 
Para testar cada código apresentado no exemplo: 
No Bloco de Notas 
Digite o código. 
Dica: No menu Arquivo, acione o comando “Salvar Como”, salve o arquivo com a extensão .html. Na 
opção "Salvar como tipo", a opção "Todos os arquivos" estará selecionada, caso não altere, será 
acrescentada automaticamente a extensão .txt ao final do nome do arquivo. 
 
 Para digitar o código HTML utilizamos qualquer editor de texto que não tenha formatação, ou 
seja, que desconsidera toda a formatação como por exemplo: Bloco de notas, Notepad++, etc. 
 Já o editor de texto Word possui formatação então não serve para editar arquivos HTML,porque 
quando copiamos algo do Word (Ctrl+C) e colamos (Ctrl+V) vem como essas formatações 
Figura 3 - Exemplo de delimitação do cabeçalho corpo da página 
Fonte: Autoria própria 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Declaração de tipo de documento (DocType); 
 Atualmente acham-se inúmeros padrões de HTML e XHTML (HTML 4.01 Strict, HTML 4.01 
Transitional, HTML 5.0 etc.). Para que o navegador interprete o código de maneira rápida e correta, 
exibindo a página conforme o planejamento, é necessário declarar o DOCTYPE (Definição do Tipo de 
Documento) que serve para dizer ao navegador ou a qualquer programa que se utiliza para ler o 
arquivo. Essa instrução não é exclusiva da linguagem HTML e deve ser colocada antes mesmo da 
marcação HTML. 
<!DOCTYPE html> 
Note que no código acima não informa a versão HTML, pois a W3C que define as normas da 
linguagem criou o DOCTYPE que diz ao navegador para utilizar a última versão de HTML naõ tendo a 
necessidade de alterar as páginas já criadas quando surgir uma nova versão. 
Cabeçalho (Head) 
Delimitado pelos comandos <head> e </head>, o cabeçalho da página contém informações 
sobre a página a qual não serão visualizadas no navegador, porém por web robots e buscadores. 
Principais marcadores do cabeçalho da página 
Título da página (Title) 
<title>Título da página</title> 
Define o texto que será exibido na barra de títulos da página. 
 Quando o usuário entra em uma ferramenta de busca (como Yahoo, Cadê, etc.) procurando 
por um assunto específico, o conteúdo do marcador <title> de uma página é a primeira coisa a ser 
vasculhada. É importante em escolher títulos razoáveis para as páginas e que consigam interpretar o 
conteúdo da página em poucas palavras. 
 
Corpo (Body) 
Os marcadores <body> e </body>, irão delimitar o corpo que contém informações que serão 
visualizadas na tela. 
background é uns dos atributos do marcador body: 
<body background="Url_da_imagem"> 
Especifica a imagem (GIF ou JPEG) utilizada para preencher a tela. É importante observar se o 
endereço da imagem esteja correto. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Criação de comentários 
 Os comentários são tudo que estiver entre seus comandos ou tags <! -- -->, eles não são 
mostrados ou executados ao carregar uma página no navegador. Sua finalidade é ajudar o 
webdesigner, muitas vezes a página foi criada há algum tempo e por algum motivo precisa passar por 
manutenção ou atualização e pode ser que não lembre o porquê ele colocou aquele comando, estando 
comentado o código vai facilitar o entendimento. 
A sintaxe do comentário é este: 
no-cache <!-- este atributo não armazena a página no cache --> 
 
Principais Metatags de HTML 
 As metas tags são utilizadas para fornecer informações auxiliarão os mecanismos de busca 
nas pesquisas e configuração da página no browser. As duas categorias de meta dados são http-equiv 
e name e na página html elas devem ser incluídas dentro da tag <head> </head>. 
<head> 
 <meta http-equiv=”” content=””> 
 <meta name=”” content=””> 
</head> 
 
content-language 
 Especifica o tipo de idioma dentro da página, o parâmetro content pode ter um idioma ou mais 
pt-br (Português Brasil), en-US (inglês), fr (francês), it (italiano) e etc. 
 
<meta http-equiv=”content-language” content= “pt-br”> 
ou 
<meta http-equiv=”content-language” content="pt-br, en-US, fr, it"> 
 
content-type 
 Especifica o tipo de conteúdo que contém a página, a definição desta tag pode ajudar em 
erros como erros com palavras acentuadas. 
<meta http-equiv = “content-type” content= “text/html;charset=UTF-8”> 
reflesh 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 Faz um recarregamento da página do browser depois de tempo especificado. Muito utilizado 
para redirecionar para outra url ou então atualizar a mesma página em por determinado tempo. 
Direcionamento para outro site 
<meta http-equiv = “refresh” content =”3; url=http://www.escola.com.br”> 
Atualizar o documento a cada 30 segundos: 
<meta http-equiv="refresh" content="30"> 
 
Copyright 
Específica o autor, empresa que criou a página. 
<meta name=”copyright” content = “2020 ApostiladoCurso”> 
 
Description 
Mostra uma descrição da página na pesquisa dos motores de busca. 
<meta name=”description” content = “Apostila criada para os alunos do curso de html”> 
 
Formatação de uma página 
Títulos 
 Identifica títulos, usados para dividir seções do texto. Existem 6 níveis de títulos, numerados de 
H1 a H6, que são exibidos em fonte maior que a do texto normal. Os marcadores de título podem ser 
alinhados pelo atributo align. 
 
Figura 5 - Resultado dos títulos no navegador 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Parágrafos 
Os parágrafos HTML são definidos com a tag <p>: 
<p>Isto é um parágrafo</p> 
Estilos 
Os estilos negrito, itálico e sublinhado são os mais utilizados nas páginas Web. 
Exemplos: 
 
Figura 6: Estilos negrito. itálico e sublinhado / Fonte: Autoria própria 
 
Dica: As tags <strong></strong> e <em></em>, negrito e itálico respectivamente, também podem 
ser utilizados como marcadores. 
Inserção de imagens 
As imagens no HTML são definidas com a tag <img> que tem como atributos o arquivo de 
origem (src), o texto alternativo (alt) e largura e altura (width/height): 
<img src="imagem" align=”alinhamento” border="borda" width="largura " 
height="altura"alt="texto_descritivo"> 
A tag <img> e seus principais atributos: 
src endereço da imagem 
align Alinhamento da imagem ou texto na página: esquerda (left), direita (right), centro 
(center) 
border Borda na imagem 
width / height Tamanho da imagem na página 
alt Mostra uma descrição da imagem quando o ponteiro do mouse sobre ela 
 
SRC (endereço da imagem) 
 
 
 
 
Criação de Sites e Plataformas Digitais 
A imagem a ser inserida na página podem ser arquivos nos formatos .jpg .png ou .gif. A palavra 
src é a abreviação de source que, em inglês, significa "origem" por isso há a necessidade de indicar o 
caminho correto do arquivo. 
Exemplo: 
 
Figura 7: Imagem inserida em uma página / Fonte: Autoria própria 
 
 
Dica: É interessante deixar as imagens em um diretório separado para facilitar a manutenção dos 
arquivos. 
 
Alinhamento da imagem 
<img src="imagem" align="alinhamento"> 
Especifica a forma de alinhamento entre a imagem e texto da página. 
As opções de alinhamento são: left, right, top, center, middle, absmiddle, baseline, bottom. 
<img src="img/casa.jpg" align="" > 
Opções para “align” 
left Alinha a imagem pela margem esquerda. 
right Alinha a imagem pela margem direita. 
top Alinha a imagem à parte mais alta da linha 
center Alinha a imagem no centro 
middle A base da linha de texto coincide com o meio vertical da imagem. 
absmiddle Ajusta a imagem ao meio absoluto da linha 
bottom Ajusta o baixo da imagem ao texto. 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 8: Imagem alinhada à esquerda e texto à direita / Fonte: Autoria própria 
 
Borda: 
<img src="imagem" border="valor"> (Determina a espessura de borda da imagem) 
Exemplo: 
 
Figura 9: Imagem com borda / Fonte: Autoria própria 
Dica: Uma imagem, onde é criado um link, automaticamente tem bordas. Neste caso é necessário 
incluir no marcador img da imagem o atributo border="0" para que as bordas desapareçam. 
 
Largura e Altura 
<img src="imagem" width="largura " height="altura "> (Especifica a largura (width) e a altura 
(height) da imagem) 
• Quando um valor maior do que o da imagem é declarado, acontecem deformações na figura 
da imagem (pixelização). 
 
 
 
 
Criação de Sites e Plataformas Digitais 
• Quando um valor menor do que o da imagem é declarado, existe um desperdício de "banda", 
pois a imagem continua com o mesmo volume em kb, apesar de ser exibida menor na tela. 
 A melhor maneira de utilizaro atributo de tamanho é declarar o que a imagem possui. Dessa 
forma a imagem não sofre deformações e não é perdida a banda do usuário sem motivo. 
Exemplo: 
 
Figura 10: Imagem com atributo de tamanho declarado / Fonte: Autoria própria 
 
Texto descritivo 
<img src=”imagem” alt=”texto_descritivo”> 
 Exibe uma descrição da imagem quando o cursor se move sobre ela. Essa marcação é bastante 
significativa e atualmente quase uma obrigação na construção de páginas acessíveis. Criadas 
pensando num público que utiliza softwares de leitura de tela essa marcação "narra" o que a imagem 
quer dizer, permitindo um entendimento (não visual) do significado da imagem. Também é uma 
marcação importante na otimização para mecanismos de busca. Ao contrário do internauta padrão, o 
mecanismo de busca não enxerga, apenas lê o conteúdo HTML, encontrando assim mais palavras-
chaves na descrição da imagem. 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 11: Imagem com atributo alt / Fonte: Autoria própria 
 
Criação de vínculos 
 No HTML é possível criarmos vínculos dentro de uma página, entre essas possibilidades 
podemos utilizar a tag <a> (âncora) para criar um vínculo (link) com outro documento. A tag <a> é 
usada para criar uma âncora onde vinculamos o atributo <href> que é usado para indicar o endereço 
de um documento, palavras, url etc. 
Vamos criar uma âncora HTML dentro de uma mesma página: 
Criando o link para âncora: Para criarmos um link para a âncora em HTML utilizamos a tag "a" com 
o parâmetro “href” preenchido com o nome da âncora e o texto que deseja exibir. Nesse exemplo 
vamos usar o nome “#essaescola” e texto que será exibido no navegador com o link será: “Essa 
Escola Profissionalizante”. 
Exemplo: 
colocar entre <body> e </body> 
Agora vamos adicionar a tag <a> com o atributo name: Nesse exemplo vamos usar “essaescola”. 
O conteúdo deste atributo será a âncora. 
Exemplo: 
colocar entre <body> e </body> 
<h1><a href="#essaescola">Essa Escola Profissionalizante</a></h1> 
 
ATENÇÃO: Os nomes tanto para a âncora “<a name>” como para o link “<href>”devem ser iguais. 
A diferença é que temos de colocar no link o “#” antes do nome. Podemos vincular (criar um link para 
uma página externa). Nesse exemplo vamos criar um link para a página inicial da ESSA – Escola 
Profissionalizante: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Exemplo: 
colocar entre <body> e </body> 
<h1><a href="https://www.essa.g12.br/" target="_blank">Essa Escola Profissionalizante</a></h1> 
 
OBS: Para um link externo não utilizamos “#” porém adicionamos target="_blank" para que a 
página externa abra em uma outra aba do navegador 
 
Criação de Listas 
 As listas podem ser utilizadas também para a criação de menus de navegação. Existem dois 
tipos de listas em HTML, as ordenadas <ol> e as desordenadas <ul>. No editor de texto Microsoft 
Word, essas listas são chamadas de Numeradores e Marcadores. 
Exemplos: 
 
Figura 12: Lista com marcadores / Fonte: Autoria própria 
 
 
Figura 13: Lista com numeradores / Fonte: Autoria própria 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Criação de tabelas 
 As tabelas são um recurso básico para o layout da página, em especial para posicionar imagens 
e texto. São compostas de linhas e colunas, o conteúdo de cada célula pode ser um texto, uma imagem 
ou até mesmo outra tabela. Uma tabela é delimitada pelos marcadores <table> </table>, sendo que 
dentro destes marcadores são colocados as linhas e as colunas da tabela. No HTML semanticamente 
correto, a tabela deve ser utilizada apenas para guardar dados tabulares, como os resultados de um 
campeonato, um calendário ou uma lista de preços. 
 
Figura 14: Marcadores para Tabelas / Fonte: Autoria própria 
 
Dica: Existe um marcador para a criação de cabeçalhos na tabela. Esse marcador é o <th>e é 
utilizado ao invés do <td>. 
Exemplo de uma tabela com duas linhas e três colunas: 
 
Figura 15: Tabela com duas linhas e três colunas / Fonte: Autoria própria 
 
Principais atributos de uma tabela 
Atributo da Tabela Descrição 
border Espessura da borda 
width Largura da tabela 
height Altura da tabela 
align Podem ser alinhadas à esquerda / direita / centro 
 
 
 
 
Criação de Sites e Plataformas Digitais 
cellpadding Especifica o deslocamento do texto em relação às bordas de cada célula da 
tabela. 
cellspacing Especifica o espaçamento entre cada célula da tabela. 
bgcolor Atributo que define a cor de fundo da tabela 
 background Este atributo define a imagem de fundo para a tabela 
 
Exemplo de uma tabela com duas linhas e três colunas com borda: 
 
Figura 16: Tabela com duas linhas e três colunas com borda / Fonte: Autoria própria 
 
Width e Height 
 Indica o tamanho da tabela que será exibida na página que pode ser relativo ou absoluto. Uma 
tabela de tamanho relativo é chamada "tabela elástica" e se estica de acordo com o tamanho da página 
apresentada. Neste caso a largura e altura da tabela são fornecidas tendo a porcentagem como 
unidade de medida. 100% indica uma tabela que ocupará a tela toda. 
<table width="largura_da_tabela" height="altura_da_tabela"> 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 17: Tabela de tamanho relativo / Fonte: Autoria própria 
 
Uma tabela de tamanho absoluto permanece fixa seja qual for a resolução da página em que 
ela será exibida, auxilia quando existem imagens que não podem separar-se, alinhadas dentro de 
uma tabela. Neste caso a largura e altura da tabela são fornecidas tendo o pixel como unidade de 
medida. 
Exemplo: 
 
Figura 18: Tabela com tamanho absoluto / Fonte: Autoria própria 
Align 
Com o atributo "align" dentro da tag <table> as tabelas podem ser alinhadas à esquerda, direita ou 
centro: 
table align="left (esquerda), right (direita), center (centro)"> 
 
Exemplo de alinhamento no centro: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 19: Tabela alinhada ao centro / Fonte: Autoria própria 
Cellpadding 
Especifica o deslocamento do texto em relação às bordas de cada célula da tabela. 
<table cellpadding="valor numérico"> 
 
Exemplo: 
 
Figura 20: Deslocamento do texto em relação às bordas / Fonte: Autoria própria 
 
 
 
Cellspacing 
Especifica o espaçamento entre cada célula da tabela. 
<table cellspacing="valor numerico"> 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 21: Tabela com espaçamento entre as células / Fonte: Autoria própria 
 
Bgcolor 
Especifica uma cor de fundo para a tabela que pode ser declarada pelo nome em inglês, e de 
preferência, pelo código hexadecimal. 
<table bgcolor="cor"> 
 
Exemplo: 
 
Figura 22: Cor de fundo em tabela / Fonte: Autoria própria 
Background 
Especifica uma imagem de fundo para a tabela. A imagem de fundo será repetida, como um ladrilho. 
<table background: background="caminho do diretorio que esta imagem"> 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 23: Imagem de fundo em uma tabela / Fonte: Autoria própria 
 
Principais atributos de uma célula 
• Cada célula possui os atributos: 
• Cor de fundo e imagem de fundo; 
• Largura e altura. 
Alinhamento 
Cada célula pode ter seu conteúdo alinhado horizontalmente e verticalmente. 
Alinhamento Horizontal: Podem ser LEFT (esquerda), RIGHT (direita) ou CENTER (centro). 
 
Alinhamento Vertical: TOP (topo da célula), MIDDLE (região mediana da célula), BASELINE (alinha 
a linha de base do arquivo da célula com os dados da linha), BOTTOM (alinha o conteúdo da célula 
com a região inferior da célula). 
 
 
Exemplo: 
<tr align="valor" > ou <td align="valor" > 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 24: Alinhamento das células / Fonte: Autoria própria 
 
DESAFIO 
1. O que é faz a declaração DocType ? 
2. <meta http-equiv="refresh" content="30">. O quefaz esta instrução? 
3. Quais os níveis de títulos e como são classificados? 
4. Como deve ser escrita uma linha de código em um arquivo html para chamar uma imagem? 
faz <img src="img/logo" border=1> em um arquivo html? 
5. Qual a função dos elementos <a> </a> faz em uma página HTML? 
6. Como se compõem uma tabela e o que ela pode conter? 
 
Trabalho em equipe 
Em grupo construa 5 páginas em html: 
Cada página deve conter: 
• Título em nível <h1> em negrito e subtítulo em nível <h3> em itálico 
• uma imagem centralizada em cada página (as imagens devem ser o print da linha de código 
de cada página em html) 
As páginas devem ter a seguinte ordem: 
• Página 1: Uma tabela com 4 colunas e 3 linhas com borda e elástica 
• Página 2: Lista numerada com 10 itens 
• Página 3: Uma tabela com 3 colunas e 1 linhas com cor de fundo 
 
 
 
 
Criação de Sites e Plataformas Digitais 
• Página 4: Lista ordenada com 10 itens 
• Página 5: Uma tabela com 3 colunas e 1 linhas com imagem de fundo 
 
TEMA 02: FORMULÁRIOS 
 
 
Figura 25: Exemplo formulário / Fonte: ESSA 
 
 Estão presentes na Internet para possibilitar cadastros, pesquisas, envio de comentários, 
aumentando controle de interação com os visitantes dos sites. Um formulário contém além de texto 
elementos especiais chamados controles, estes são representados por caixas de checagem: botões 
tipo rádio, caixas de seleção, campos de texto, entre outros.Os usuários preenchem os campos do 
formulário submetendo-o em seguida a algum agente de processamento. Neste momento, todos os 
dados fornecidos são enviados a um programa, escritas especialmente para processar esses dados 
de acordo com alguma necessidade ou especificação. As informações são gravadas, em alguns casos, 
num banco de dados, também podem ser exibidas em uma nova página ou serem encaminhadas via 
e-mail. 
Os componentes do formulário ficam delimitados pelas tags <form> </form>: 
<form name = “nome_do_formulario” method="get ou post" action="onde será enviado os dados"> 
 
 objetos (hidden, textarea, select, checkbox, input, radio, button, text, password) 
 
</form> 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Descrição 
name: Especifica o nome do formulário. Útil em eventos de validação de campos, por exemplo, 
quando se utiliza uma linguagem de scripts como JavaScript. 
method: Define como os dados serão transmitidos para o programa que irá processá-los. Deve ter 
os valores GET ou POST, a diferença entre eles está no modo como os dados são empacotados. O 
método Post é utilizado geralmente em formulários de postagem de dados, por exemplo, em um 
cadastro ou em formulários de contato. O método Get é utilizado na consulta de dados, como por 
exemplo em um formulário de busca. 
action: Indica a direção do projeto que receberá os dados do cadastro. 
Exemplos: 
 
Figura 26: Exemplo formulário simples / Fonte: Autoria própria 
 
Principais campos de um formulário (input, text, password, hidden, textarea, select, checkbox, radio, 
button): 
Input 
Caixa de Texto 
<input type="text" name="nomedocampo" value="valorinicial" maxlength="quantidade máxima de 
caracteres"> 
 
 
Senha 
<input type="password" name="nomedocampo" size="comprimentodocampo"> 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
No valor PASSWORD (senha) do atributo TYPE aplicam-se os atributos do tipo TEXT, todas as 
letras informadas aparecem mascaradas 
 
Campos Escondidos 
<input type="hidden" name="nome" value="valor"> 
O valor HIDDEN (escondido) no parâmetro TYPE define dados que devem ser passados ao 
programa, embora não estejam visíveis na página. 
NAME: Identifica o dado; 
VALUE: Define o valor que deve ser passado. 
 
Caixa de arquivos 
<textarea name="nomedocampo" rows="numero_de_linhas" cols="numero_de_colunas"> 
</textarea> 
O marcador TEXTAREA (área de texto) define um campo de texto com várias linhas. 
ROWS: Define a quantidade de linhas; 
COLS: Define quantos caracteres (colunas) cada linha possui; 
Select 
Cria um campo de seleção única. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 27: Linha de código: campo de seleção única / Fonte: Autoria própria 
 
 
Resultado: 
 
Figura 28: Exemplo option / Fonte: Autoria própria 
 
Radio 
O botão do tipo radio permite a escolha de apenas um item. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 29: Exemplo radio / Fonte: Autoria própria 
 
Checkbox 
tipo checkbox permite a escolha de várias opções. 
 
Figura 30: Exemplo checkbox / Fonte: Autoria própria 
 
Button 
Botão Limpar 
<input type="reset" value="Apagar"> 
 
O valor RESET do atributo TYPE indica um botão que limpa todos os campos. 
No atributo VALUE, pode-se indicar o que estará escrito no botão. Caso nenhum valor seja incado 
por padrão ficará Botão Enviar 
 
 
 
 
Criação de Sites e Plataformas Digitais 
<input type="submit" value="Enviar"> 
 
O valor SUBMIT no atributo TYPE indica um botão que aciona o envio das informações preenchidas 
no formulário ao programa interpretador. 
O atributo VALUE estipula o que estará escrito no botão. Caso nenhum valor seja definido, aparecerá 
somente "Submit" 
Link 
É o "endereço" de um documento, com ele é possível conectar, quando clicado, a outros endereços 
que podem ser: 
• Um e-mail; 
• Uma outra página no mesmo site; 
• Arquivos de vários tipos; 
• Outro site. 
 Esta poderosa capacidade de conexão de ideias entre links - talvez a maior qualidade da 
internet - é proporcionada pela linguagem HTML por entre marcador âncora de hipertexto, 
representado por <a> </a>. Dentro desta tag colocamos a referência ao arquivo destino, que se dá 
entre atributo href. 
<a href="referência_ao_arquivo_destino"> texto_ou_imagem_origem</a> 
 
Dica: Observe que o texto ou a imagem, que servirão de origem para o link aparecendo em destaque 
na página, deverão vir entre o par de marcadores <a> e </a> 
Exemplos: 
 
Figura 31: Exemplo links / Fonte: Autoria própria 
 
 
 
 
Criação de Sites e Plataformas Digitais 
DESAFIO 
1. Qual a função de um formulário? 
2. Explique o que são e dê exemplo para que servem os componentes name, method e action em 
um formulário. 
3. Cite os principais campos de um formulário? 
4. Com base na resposta número 3 explique a função de 2 campos de um formulário. 
5. Explique a função dos botões radio e checkbox. 
6. Qual a função de um link? 
 
Trabalho em equipe 
Com base no desafio do Tema 1 crie na: 
 • Página 1: Um formulário contendo os componentes input, text e password 
 • Página 3: Um formulário contendo os componentes hidden, textarea e select 
 • Página 5: Um formulário contendo os componentes checkbox, radio, button 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
TEMA 03: Folha de Estilos (CSS – Cascading Style Sheets) 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 32: CSS – Folha de estilo / Fonte: Tecfores. 
 
CSS (Cascading SyleSheets ou Folhas de Estilos em Cascata) é uma tecnologia padronizada 
pela W3C, não é parte do HTML padrão, e sim um grupo de novas tags que auxiliam a ter um melhor 
domínio sobre o layout e o gerenciamento do site. 
Por que usar CSS em páginas Web? 
Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim 
de manter a apresentação, seguindo assim um padrão. As Folhas de Estilos em Cascata permitem 
uma versatilidade maior na programação do layout de páginas Web sem aumentar o seu tamanho em 
Kb, pois oferece várias possibilidades que antes eram conseguidas com a uso de gifs e jpgs. O CSS 
permite ao designer um maior controle sobre as propriedades tipográficas das páginas de um site, 
como cor e tamanho das fontes, caracteres e espaçamento entre linhas, margem do texto, etc. Pelo 
motivo das vantagens do CSS, grande parte dos sites estão utilizando em suas páginas. Como 
informado,existe um grupo voltado para buscar um mínimo de padronização na Internet, que é 
chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereço www.w3.org. O 
CSS possui os níveis 1 e 2. 
Existe uma diferença que na CSS 2 foi implementado o recurso de posicionamento e colocação 
de elementos em camadas, permitindo a sobreposição de texto sobre texto ou texto sobre figuras. O 
W3C aconselha que as folhas de estilo sejam usadas em vez das tags padrão do HTML, podemos 
verificar e confirmar na própria documentação do HTML quando encontramos uma tag ou parâmetro 
marcado com "deprecated". O CSS é suportado pela maioria dos navegadores. 
 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
É importante deixar bem claro que, embora seja essa uma especificação padrão do W3C, não 
são todos os browsers e versões que apresentam os mesmos resultados e também podem não ter 
alguma característica implementada. Torna-se importante ainda o uso dos principais browsers do 
mercado para testar as bases do CSS. 
Conceitos básicos 
 Para que uma folha de estilo possa definir o visual de um documento, o browser precisa saber 
que ela existe. A tag <style> e </style> determinam o início da style sheet. Cada estilo que você cria é 
descrito como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 
Elemento {atributo1:valor;atributo2:valor...} 
Elemento: Descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML, mas 
sem os sinais de maior e menor. Também podem ser utilizadas classes personalizadas. 
Atributo: O aspecto específico do elemento usado como estilo. Deve ser um nome de atributo CSS 
válido, como o atributo font-size. 
Valor: Uma configuração que é aplicada ao atributo deve ser uma configuração válida para atributo 
como 20pt para font-size. 
Exemplo: 
 
Figura 33: Linha de código – css para estilos / Fonte: Autoria própria 
 
Dica: É possível declarar mais de um atributo para um elemento, essas declarações são separadas 
por (";"). Costuma-se utilizá-lo também para declarar apenas um atributo. 
 
Métodos de uso das folhas de estilo 
Existem quatro (4) maneiras para incluir estilos CSS nas páginas: 
Estilo In-Line: Utilizado para aplicar o estilo em elementos individuais na página. 
 
 
Folhas de Estilo incorporadas: Utilizado para aplicar estilo em qualquer elemento da página. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Folhas de estilo externas: Permite usar uma folha de estilo em várias páginas HTML. 
Importação de estilo: Permite importar uma folha de estilo de outro arquivo. 
 
Estilo in-line 
Método utilizado para aplicar o estilo em elementos individuais no arquivo. Este estilo é incluso no 
corpo do código HTML pelo do atributo STYLE. 
Exemplo: 
 
Figura 34: Página HTML – exemplo de método In-Line / Fonte: Autoria própria 
 
 
Folhas de Estilo Incorporadas 
 Método utilizado para aplicar estilo em qualquer elemento da página incorporados a tag 
<head>. Nesse método as definições do style sheet valem para toda a extensão um arquivo HTML. O 
atributo type="text/css" quer dizer que o estilo se trata de um tipo MIME, assim os navegadores que 
não suportam CSS podem ignorar o código. 
 
 
 
 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 35: Exemplo utilizando método Folhas de estilo incorporadas / Fonte: Autoria própria 
 
 
Folhas de Estilo Externas 
 Com este método, podemos fazer com que várias páginas HTML usem estilos em um único 
arquivo central assim basta alterar em um único local e todas as páginas vinculadas ao arquivo 
também serão alteradas. 
Agora vamos criar o arquivo CSS com o nome estilos.css 
Exemplo: 
 
Figura 36: Exemplo utilizando método Folhas de estilo externa / Fonte: Autoria própria 
 
 
 
Importação de estilos 
 
 
 
 
Criação de Sites e Plataformas Digitais 
A importação de um style sheet é similar ao método anterior, a diferença é que não podemos 
combinar o método de link com outros métodos de inserções de estilos, porém pode-se combinar a 
importação. 
Exemplo: 
 
Figura 37: HTML utilizando método de importação css / Fonte: Autoria própria 
 
Responsividade de sites 
 No passado a grande maioria dos usuários acessavam os sites pelo computador e o tamanho 
da tela não era um problema. Hoje como cada vez mais o mercado de smartphone, tablet e demais 
dispositivos moveis tem aumentando, como resultado o acesso a sites por estes meios tem aumentado 
proporcionalmente. 
 Isto tornou se um problema para os desenvolvedores de páginas web, os dispositivos tem 
tamanhos de telas variados, ficando quase impossível ter uma versão de site para cada um. Uma nova 
ideia surgiu, sites responsivos, um site responsivo é aquele que independente do dispositivo que o 
usuário esteja acessando o site, seja ele móvel ou não, a visualização do site se adapta 
automaticamente ao tamanho da tela do aparelho. 
Vamos fazer um exemplo simples para ver funcionamento. 
Abra o bloco de notas, digite o código abaixo e salve como o nome index: 
 
Figura 38: Código index / Fonte: Autoria própria 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Agora vamos criar 3 arquivos css para diferentes tamanhos de telas 
O primeiro terá o nome de smartphone.css com o código abaixo: 
 
Figura 39: Visualização tela smartphone / Fonte: Autoria própria 
 
O segundo como o nome tablet.css e digite: 
 
Figura 40: Visualização tela tablet / Fonte: Autoria própria 
 
 
 
 
O terceiro com o nome notebook.css e digite: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 41: Visualização tela notebook 
 
Agora para simular o tamanho da tela de vários dispositivos, altere o tamanho da tela do 
navegador. você notará que a div que colocamos com teste vai mudando de tamanho e cor. 
Resultado simulando tamanho tela smartphone, tablet e notebook: 
 
Figura 42: Responsividade de sites / Fonte: Autoria própria 
 
 
 
 
 • Desafio do tema 
 1. O que é CSS? 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 2. Qual a organização que controla os padrões na internet? 
 3. Qual tag determina o início da CSS? 
 4. Descreva o que é estilo externa 
 6. Qual método permite importar uma folha de estilo de outro arquivo e quando é indicado a sua 
utilização? 
 
Trabalho em equipe 
Utilizando os desafios desenvolvidos nos temas 1 e 2, aplique o CSS em todas as páginas: 
 • font: color, tamanho 
 • cor de fundo da página, margens, bordas 
 • aplique a folha de estilo de outro arquivo em duas páginas 
 
 
 
 
 
 
 
 
 
 
 
 
 
TEMA 04: Conceito Tableless 
 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 43: Conceito Tabless / Fonte: Yesbr 
 
Definição 
 É um modo de estruturação de sites que não utiliza tabelas para criar layout da página. A W3C, 
órgão que regulamenta os padrões para web, defende que os códigos HTML devem ser usados para 
a finalidade que foram criados. Tabelas devem ser utilizada em dados tabulares. Ao aplicar as regras 
de Web Standard, surge um problema referente à maneira tradicional de criação de layouts. 
 A tag <table>, utilizada para a diagramação de páginas, foge do seu valor semântico correto, 
que é o de apresentar dados tabulares. Para solucionar essa incoerência, foi criado o Tableless (sem 
tabela), método onde cada módulo do web site (cabeçalho, menu, conteúdo, etc.) é colocado dentro 
de um container (caixa). Esse container é montado utilizando a tag <div>, normalmente identificada 
por um id (classe de nome único). 
 Essas caixas são formatadas posteriormente com estilos de texto CSS. Dessa maneira não são 
utilizadas imagens para o layout e existe uma separação entre conteúdo e formatação (visual). 
Dicas: O Tableless é chamado também de box model (modelo de caixas). 
 
 
 
 
Benefícios do Tableless 
Existem diversosbenefícios em desenvolver com esse novo método, pois: 
• Reduz o tamanho final dos arquivos (isola 80% do código); 
 
 
 
 
Criação de Sites e Plataformas Digitais 
• Menor tempo de espera para visualização das páginas; 
• Menor consumo de banda (custos); 
• Facilita alterações no layout e na estrutura, reduzindo o custo de manutenção do projeto; 
• Permite manter uma padronização visual ao longo de um projeto mais extenso; 
• Maior acessibilidade a usuários com necessidades especiais e equipamentos móbile como 
celulares e PDAs. 
Divs 
 Sabemos que cada tag tem um propósito específico, por exemplo, A tag p é usada para 
especificar o parágrafo, as tags <h1> a <h6> são usadas para especificar cabeçalhos, mas a tag <div> 
é como uma unidade de contêiner que é usada para encapsular outros elementos da página e divide 
os documentos HTML em seções. 
 A tag div é geralmente usada por desenvolvedores da web para agrupar elementos HTML e 
aplicar estilos CSS a muitos elementos de uma vez. Por exemplo: se você agrupar um conjunto de 
elementos de parágrafo em um elemento div, poderá aproveitar as vantagens dos estilos CSS e aplicar 
o estilo de fonte a todos os parágrafos de uma vez, em vez de codificar o mesmo estilo para cada 
elemento de parágrafo. 
 Dentro do Tableless, a tag mais importante é a <div>. Utilizada agora para a criação de caixas 
(e não mais para alinhamento de blocos de parágrafos) essa marcação é quem cria o esqueleto em 
XHTML, que terá sua forma formatada com estilos CSS. Cada módulo do web site é "etiquetado" com 
uma div. Podemos criar quantas divs forem necessárias para o layout, assim como eram criadas 
tabelas e células. 
 As divs podem conter um menu, o conteúdo do site, imagens de fundo, banners e etc. Sua 
posição, cores, bordas, formatação de texto e imagens de fundo são definidas numa folha de estilo 
separada do código XHTML. Com identificações, o código é mais fácil de ser entendido, pois é claro 
para que serve cada uma das divs criadas. 
 
 
 
Exemplos: 
<div id="topo">Aqui entra o topo do web site</div> 
 
 
 
 
Criação de Sites e Plataformas Digitais 
<div id="menu">Aqui entra o menu de navegação</div> 
<div id="conteudo">Aqui entra o conteúdo do web site</div> 
 
Dica: Evite identificar uma div como "menuesquerdo" ou "azul". Se o aspecto do site for mudado no 
futuro, o código fica incoerente, dificultando o entendimento e manutenção. 
Uma div pode ser colocada dentro da outra. Dessa maneira, as propriedades da div de nível superior 
serão herdadas pelas divs internas. 
Exemplo: 
<div id="pai"> 
<div id="filha">Conteúdo da div filha, com heranças da div pai</div> 
</div> 
 
Conteúdo 
O conteúdo em Web Standard é preocupado em manter a semântica correta, respeitando títulos, 
listas e parágrafos. Cada parte do conteúdo, layout e navegação é colocada dentro de sua div 
correta. O código em Standard é mais organizado e simples de ser entendido pelo desenvolvedor. 
Todo o texto de conteúdo pode ser colocado na div de identificação "conteudo". Sua formatação é 
feita utilizando CSS. 
 
 
 
 
 
 
Exemplo: 
<div id="conteudo"> 
 
 
 
 
Criação de Sites e Plataformas Digitais 
<h1>Título da página</h1> 
<p>Esse é um parágrafo da div conteúdo</p> 
</div> 
 
Imagens 
As imagens do conteúdo, como fotos, banners e gráficos também são colocadas dentro das divs. As 
imagens que constituem o layout, como fundos de páginas, topo e rodapé são declaradas em CSS. 
Exemplo: 
 
Figura 44: Exemplo DIV / Fonte: Autoria própria 
 
Uma div pode ser colocada dentro da outra. Dessa maneira, as propriedades da div de nível superior 
serão herdadas pelas divs internas. 
Exemplo: 
 
Figura 45: Exemplo div-herança / Fonte: Autoria própria 
 
Navegação e link 
 Em Standard é comum a navegação ser colocada em uma div própria e utilizando listas ao 
invés de parágrafos ou tabelas. Isso permite maior dinamismo em mudanças de layout, possibilitando 
inverter a posição de um menu, assim como sua orientação (vertical ou horizontal). 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 46: Linha de código – navegação e links / Fonte: Autoria própria 
, 
Dica: É possível criar um link vazio colocando um # (sustenido) ao invés de um endereço URL. 
 
Propriedade 
 Podemos definir como características (cor, fonte, borda, etc.) cujo valor define o aspecto de 
como o navegador deve exibir os elementos. 
Exemplo: 
 
Figura 47: Linha de código – propriedades na DIV / Fonte: Autoria própria 
 
Bordas 
 No conceito tableless o estilo da borda de um elemento pode ser combinado aplicando os 
mesmos valores a todas as bordas, ou para as quatro bordas separadamente. Os valores podem vir 
em qualquer ordem e não são obrigatórios, mas, é aconselhável definir os três valores. 
 
 
 
 
 
O exemplo abaixo aplicamos o mesmo estilo em todas as bordas: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 48: Linha de código – exemplo DIV com estilos de bordas / Fonte: Autoria própria 
 
Abreviações 
 É possível deixar um arquivo CSS menor, ou seja, podemos abreviar algumas declarações. Um 
código limpo e comentado facilita o desenvolvimento e manutenção de um site. As abreviações para 
declarações podem ser usadas para fontes, fundo de página, margens, espaçamento, listas, etc. 
Exemplos: 
Forma convencional: 
 
Figura 49: Fonte – forma convencional / Fonte: Autoria própria 
Forma abreviada: 
 
Figura 50: Fonte – forma abreviada / Fonte: Autoria própria 
 
Margens 
Forma convencional: 
 
Figura 51:Margens – forma convencional / Fonte: Autoria própria 
 
 
 
Forma abreviada: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 52: Margens – forma abreviada / Fonte: Autoria própria 
 
Listas 
Forma convencional: 
 
Figura 53: Listas – forma convencional / Fonte: Autoria própria 
Forma abreviada: 
 
Figura 54: Listas – forma abreviada / Fonte: Autoria própria 
 
Padding (espaçamento) 
 Tem um funcionamento muito semelhante ao da margem, com o padding podemos preencher 
o espaçamento interno do elemento. Podem ser definidos o espaço: superior, inferior, direito e 
esquerdo. 
Exemplos: 
padding-top 
 
Figura 55: Linha de código: padding-top / Fonte: Autoria própria 
 
padding-right 
 
Figura 56: Linha de código: padding-right / Fonte: Autoria própria 
 
padding-bottom 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 57: Linha de código: padding-botton / Fonte: Autoria própria 
 
padding-left 
 
Figura 58: Linha de código: paddinf-left / Fonte: Autoria própria 
 
 
 Desafio do tema 
 1. Explique os conveito do Tableless 
 2. O que é Div e como utiliza-lá? 
 3. Quais os beneficios do Tableless? 
 4. Explique o conceito de abreviações 
 6. Dê 3 exemplos de declarações na sua forma convencional e abreviada 
 
Trabalho em equipe 
Utilizando os desafios desenvolvidos nos temas anteriores aplique os conceitos: 
 • de abreviações 
 • Padding (espaçamento) 
 • lista 
 
 
 
 
TEMA 05: Criação de layouts com camadas e formatação CSS. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 59: Formatação CSS: camadas / Fonte: Matheus Webdesigner 
 
 Desenvolver sites para web significa usar cada tecnologia de acordo com o objetivo para o qual 
ela foi desenvolvida. Assim podemos organizar os códigos em "camadas", em suma, cada página do 
website pode ser desenvolvida em quatro camadas que se sobrepõe e conseguimos chegar em um 
resultado: 
 Conteúdo: o objetivo é fazer a demarcação dos blocos de conteúdo propostos pelo 
planejamento e pelo layout do website. Aqui a principal linguagem utilizada é o HTML. 
 Formatação: O objetivo é editar o conteúdo do modo como ele foi formatado na criação do 
layout. Para isso são utilizadas imagens e a linguagem CSS. 
 Comportamento: Incorporamos nas páginasrecursos de interação e reação para uma melhor 
interação do usuário. São incluídos movimentos e recursos no conteúdo do site. Podemos utilizar a 
linguagem JAVASCRIPT, JQUERY e seus plugins. 
 Automação: envolve o gerenciamento das informações do website, tanto por parte de usuários 
administradores quanto pelos visitantes do site. Podem ser utilizadas linguagens avançadas de 
programação, como o C#, Java ou PHP e banco de dados, como MsSQL ou MySQL. 
CSS 
Definições 
 Em Web Standard, toda a formatação do layout (imagens, cores, tipografia, margens etc.) é 
declarada em uma folha de estilo CSS, separada do XHTML (onde fica apenas o conteúdo). 
 Essa forma de desenvolvimento é que permite as vantagens relativas ao desempenho e 
manutenção, vistas anteriormente. A formatação será feita em etapas, formatando a disposição geral 
 
 
 
 
Criação de Sites e Plataformas Digitais 
das divs, o conteúdo e, finalmente, o menu de navegação. Os estilos CSS utilizados são basicamente 
os mesmos vistos em outros exemplos e exercícios, porém utilizados com outros objetivos. 
Posicionamento e tamanho de divs 
 Existem basicamente duas técnicas de construção de layouts utilizando CSS, que podem ser 
utilizadas em conjunto para criação de layouts mais complexos, utilizando: 
• Tags div com posicionamento absoluto (position: absolute); 
• Tags div com a propriedade float (float: left | float: right | clear). 
Float 
 Propriedade do CSS que permite posicionar elementos à direita ou à esquerda de outro 
elemento. Esta propriedade possui três (3) valores: 
• Left - Move o elemento para a esquerda e posiciona o texto ao seu redor; 
• Right - Move o elemento para a direita e posiciona o texto ao seu redor; 
• None - Mostra o elemento sem alteração. 
Exemplo (em CSS): 
#esquerda {float:left;} 
#direita {float:right;} 
Clear 
 Para que o elemento abaixo de um float não seja afetado, você deve aplicar a propriedade clear 
com uma das opções a seguir: 
• Clear: left 
• Clear: right 
• Clear: both 
Exemplo (em CSS): 
#limparesquerda {clear:left;} 
#limpardireita {clear: right ;} 
#limparambas {clear: both ;} 
Width / Height 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 Além do posicionamento, também é comum a declaração da largura/altura de uma div. Da 
mesma maneira que o posicionamento o tamanho das divs pode ser fixo ou elástico (px ou %). 
Exemplo (em CSS): 
#elastica {width:100%;} 
#fixa {width:100px;} 
 Na linha dos exemplos anteriores, para criar uma div de nome livro1, com 270 pixels de largura 
e flutuando para a direita do texto ou de outra div teríamos o seguinte código: 
#livro1 {width: 270px; 
Float: right; 
} 
Margens / Preenchimentos 
 Ao flutuar uma div próxima de outra é preciso estar atento às margens e preenchimentos. As 
tags para esse controle são margin e padding. Uma caixa flutua para a direita ou esquerda, o texto se 
encaixa na parte de baixo da div, para que isso não ocorra é utilizado o atributo de margem (margin). 
Exemplo (em CSS): 
#esquerda {height:200px; 
Width: 200px; 
Float: left; 
} 
#direita {margin-left: 200px;} 
No exemplo acima o tema da caixa "direita" ficará separado da caixa "esquerda" e não irá invadir a 
parte de baixo da div esquerda. 
 
Layout com três colunas 
 Seguindo os exemplos vistos anteriormente, é possível criar um layout com topo, 3 
colunas e rodapé com o seguinte código: 
 
HTML 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 60: Linha de código: exemplo HTML / Fonte Autoria própria 
 
Lembrando que esse XHTML cria uma div chamada "geral" com as demais divs sendo suas 
"filhas". Veja agora a formatação básica para o layout, declarada no arquivo estilo01.css (não estão 
declaradas formatações de conteúdos de textos - apenas o layout): 
 
CSS 
 
Figura 61: Linha de código: exemplo CSS / Fonte: Autoria própria 
 
Uma vez salvo e publicado, o resultado é como visto abaixo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 62: Página com CSS / Fonte: Autoria própria 
 
Finalizando o Layout 
Imagens de Fundo 
 Na criação de páginas no modelo tradicional (com tabelas) as imagens do layout são inseridas 
com a marcação img. Isso faz com que o layout fique amarrado com o conteúdo, complicando 
processos como manutenção e atrasando o carregamento das páginas. O Web Standard utiliza 
imagens de fundo para a criação do layout, declarando as informações na folha de estilo CSS. É 
possível modificar o estilo CSS e dessa maneira trocar a forma de todo o web site. A marcação de 
imagem de fundo é a mesma vista anteriormente. Veja no exemplo como fica sua versão abreviada, 
onde são declaradas cor, imagem de fundo e repetição: 
#fundo {background: #CCFF00 url(img/fundo.jpg) repeat-x;} 
Menus de Navegação 
 Utilizando estilos CSS também é possível a criação de barras de navegação, com 
comportamento parecido com botões feitos em programas gráficos ou com JavaScript. Os menus 
criados com listas podem ser posicionados tanto na posição horizontal, quanto na posição vertical. 
O atributo display (responsável pela exibição de elementos do XHTML) é quem cria essa possibilidade. 
Também é interessante desligar os símbolos de marcação da lista, utilizando o atributo list-style. 
 
Exemplo: 
#menu li {display:inline; 
 
 
 
 
Criação de Sites e Plataformas Digitais 
list-style:none;} 
Dicas: No exemplo quem recebeu a configuração foi o elemento li existente na div menu. 
 Qualquer li que esteja fora dessa div não é afetado. A maior parte da configuração dos menus 
em CSS é feita na própria tag "a" (referente ao link). Nessa tag são configurados vários itens, como 
cor de fundo, cor do link, sublinhado, preenchimento, entre outros. 
 Para que a cor do fundo do link ocupe a largura total da sua div (e não apenas o texto exibido) 
é necessário inserir o atributo display, configurado para "block". 
 Abaixo um exemplo de um link com a cor branca, com uma borda esquerda, fundo vermelho, 
sublinhado e com preenchimento descolando o texto do link do fundo: 
 
#menu a {color: #FFFFFF; 
text-decoration: underline; border-left: 2px solid #CC0000; background: #990000; 
display: block; padding: 4px; 
} 
 Quando o visitante do web site posicionar o mouse sobre o link, é interessante criar algum 
destaque, por exemplo modificando a sua cor. Veja no exemplo como isso é feito, com o uso da 
pseudo-classe hover: 
#menu a:hover {color: #990000; 
} 
 
Lembre-se de que, além de cor de fundo, é possível declarar uma imagem. Dessa maneira o efeito é 
o mesmo de vários portais, onde um degradê de uma cor é trocado por um degradê de outra cor. 
 • <a> exibido em bloco, também é possível declarar uma largura e altura fixas, assim pode-se criar 
qualquer tipo de botão. 
 Uma observação importante, ao criar menus horizontais, é preciso adicionar a propriedade 
float:left às declarações do #menu a. 
 
Figura 63: Links / Fonte: Escola Essa 
 
Desafio do tema 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 1. O que compõe os layouts com camadas e formatação CSS? 
 2. Cite e explique 2 delas? 
 3. para o que serve o menu de navegação? 
 4. Explique o conceito de abreviações 
 5. Cite e explique qual são as técnicas de utilização da Div 
 
Trabalho em equipe 
Utilizando os desafios desenvolvidos nos temas anteriores substitua os links por um menu de 
navegação 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Criação de Sites e Plataformas Digitais 
TEMA 06: Sintaxe do JavaScript 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 64: Logo JavaScript / Fonte: Código Fonte 
 
A internet divide se em dois lados o servidor e cliente. Quando o cliente faz uma pesquisa na 
internet ele recebe as informações de um servidor de internet instalado em algum lugar do mundo, por 
isto conveniou-se dizer que o servidor está na nuvem. No começo estas informações passadas não 
eram nadaatraentes, as páginas webs apresentavam textos ou imagens estáticas não havia uma 
interação satisfatória com o cliente. Percebendo esta falta de interação com o usuário, a netscape criou 
a livesScript, era uma linguagem simples que permitia a execução de scripts (códigos) do lado do 
cliente, tornando as páginas webs mais dinâmicas e interativas, posteriormente livesScript ganhou um 
novo nome, sendo chamada de javaScript. 
A Microsoft percebendo o sucesso obtido pelo navegador da netscape criou sua própria versão 
de linguagem de script chamado Jscript. Hoje o javaScript se tornou uma das linguagens mais 
populares para desenvolvimento web, suportada pelos navegadores mais atuais. JavaScript é uma 
linguagem interpretada, ou seja, ela é executada linha a linha,conforme o navegador vai lendo os 
códigos de cima para baixo. Um script (trecho de codigo) javascript deve estar entre as tags 
<Script></Script>, ela pode ser executa diretamente na página, ou por um arquivo externo com 
extensão .js 
Para ser executada deve ser declarada dentro das tag <head></head> ou <body></body. 
 
 
 
 
Veja um Exemplo de código JavaScript sendo executado diretamente na página web: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 65: Linha de código: JavaScript sendo executado diretamente na página web 
Fonte: Autoria própria 
 
Vamos fazer um teste para ver como funciona, copie ou digite o código acima no bloco de notas 
e salve com um nome qualquer com a extensão “.html. Para facilitar crie uma pasta cursojavascript e 
dentro dela salve o arquivo .html com o nome “olaJavascript.html”. Agora acesse a pasta onde foi 
criado o arquivo olajavascript.html e com o mouse sobre ele clique com o botão direito, escolha abrir 
com google Chrome. 
Deve ser mostra esta tela: 
 
Figura 66: Primeiro programa em JavaScript / Fonte: Autoria própria 
 
 
 
 
 
Javascript Inline 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 O código JavaScript fica dentro da tag <script> incorporado a um documento HTML. Inicia-se 
o JavaScript com a linha de código a seguir: 
<script type='text/javascript'> 
Exemplo: 
 <script type="text/javascript"> 
 alert('Olá mundo!'); 
 </script> 
 
Javascript Externo 
 O documento HTML referir-se a um arquivo separado contendo o código em JavaScript, 
fazendo referência a um arquivo JavaScript externo ou URL. Para isso devemos colocar a linha de 
código a seguir: 
script type='text/javascript' src='https://server.xyz/path/to/file.js'> 
Exemplo: 
<script type="text/javascript" src="js/escolaessa.js"></script> 
 
Comentários 
 São usados dentro das tags <Script> </Script> para ajudar entender o código, facilitando na 
hora de uma manutenção ou correção de algum erro, também pode ser usado pelo programador fazer 
uma depuração para ver como o programa está funcionando. Existem dois tipos de comentários: 
// para inserir um comentário de uma linha. 
 Exemplo: 
<script> 
 // isto é um comentário de uma linha 
</script> 
 
 
 
 
 
 
/* */ para comentar várias linhas. 
 Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
<script> 
 /* isto é um bloco 
 de comentário 
*/ 
</script> 
 
Criação de variáveis 
 Como qualquer linguagem de programação javaScript usa variáveis para guardar dados na 
memória. Devemos usar a palavra reservada Var ou let para declarar uma variável. O nome de uma 
variável é chamado de identificador. 
O identificador deve seguir algumas regras: 
Podem começar com letra, $ ou _ 
Exemplo: 
 var $numero = 2, _notas= 10; 
Não podem começar com números 
Exemplo: 
var 123Naopode = ‘nome da variavel não pode começar com números’ 
Podem usar acentos e símbolos; 
ex: var número =32 
Não podem conter espaços; 
ex: var contem texto =”não pode haver espaços” 
Não podem usar palavras reservadas. 
 var return = ‘return é uma palavra reservada’ 
 Quando for criar um nome da uma variável lembre-se que javaScript é uma case-sensitive, uma 
variável com letras maiúsculas e outra minúsculas são diferentes. 
 
 
Exemplo: 
NUMERO, Numero, NuMERO 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 JavaScript é uma linguagem de tipagem dinâmica ou seja não é preciso declarar seu tipo, ela 
faz atribuição do tipo automaticamente. 
Os três principais tipos primitivos variáveis são: 
Variáveis 
primitivas 
Descrição Exemplos 
Strings Variáveis de string são variáveis que contêm zero 
ou mais caracteres e podem ser delimitados por 
“Aspasduplas”, ‘Aspa simples’, ou ‘crases’. 
var frutas = “laranja” 
var objetos = ‘caneta’ 
var Documento = `lp321983` 
number recebem Integer, float, double, ou seja números, 
números inteiros ou reais (ponto flutuante) . 
var numero = 32 // inteirosvar 
total = 12.45 // ponto flutuante 
boolean recebem valores True (1) ou False(0) var controle = True 
var controle = False 
Tabela 01: Variáveis primitivas / Fonte: Autoria própria 
 
Uma variável muito importante que não é uma variável primitiva é o Array 
Arrays 
São variáveis que guardam coleção de dados do mesmo tipo 
Exemplo: 
var notas = [10, 9, 8] 
var alunos = [“José”, “Lúcia”, “Roberto”] 
 
Constantes 
 Não menos importante, temos as constantes, semelhantes a uma variável com a diferença que 
não pode ser alterado o seu valor durante a execução do programa. Na constante devemos usar a 
palavra reservada const. 
 
Exemplo: 
 const pi = 3.14 
 
Objeto document e método Write 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 O objeto de documento representa todo o documento html. Quando o documento html é 
carregado no navegador, ele se torna um objeto de documento. É o elemento raiz que representa o 
documento html. Possui propriedades e métodos. 
Com a ajuda do objeto de documento, podemos adicionar conteúdo dinâmico à nossa página da web. 
Exemplo de como modificar dinamicamente o valor de uma tag : 
 
Figura 67: Listagem do código – alternado o valor de um documento HTML dinamicamente 
Fonte: Autoria própria 
 
Concatenação de variáveis; 
Podemos concatenar (juntar) duas ou mais variáveis usando o operador “+ “ 
Exemplo com variáveis: 
 
Figura 68: Listagem do código – concatenando duas varáveis / Fonte: Autoria própria 
 
 
 
 
 
Exemplo variáveis com strings: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 69: Listagem do código – concatenando uma varável com uma string / Fonte: Autoria própria 
 
Objeto Window e métodos (alert, open, prompt, close, confirm) 
 O objeto window representa uma janela no navegador. Um objeto de janela é criado 
automaticamente pelo navegador. A janela é o objeto do navegador, não é o objeto do javascript. Os 
objetos javascript são string, array, data etc. 
Alguns dos seus métodos do objeto janela são: 
alert() - exibe a caixa de alerta contendo mensagem com o botão ok. 
 
Figura 70: Listagem do código – exibe uma mensagem de alerta com um botão OK / 
Fonte Autoria própria 
 
open () - abre uma nova janela e close () - fecha a janela atual. 
 
 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 71: Listagem do código – abre e fecha uma janela / Fonte: Autoria própria 
 
Também pode usar window.open para ser direcionado para outro site: 
window.open("https://www.w3schools.com"); 
confirm() - exibe a caixa de diálogo de confirmação contendo a mensagem com o botão ok e 
cancelar. 
 
Figura 72: Listagem do código – caixa de diálogo de confirmação / Fonte: Autoria própria 
 
prompt() - cria uma janela onde é solicitada uma resposta ao usuário. 
 
 
 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 73: Listagem do código- solicitada uma resposta ao usuário / Fonte: Autoria própria 
 
 Desafio do tema 
 1. Explique o que é uma constante 
 2. Não é possível declarar um atributo para um elemento css? Justifiquesua resposta. 
 3. Qual o conceito de Array ? 
 4. O que o método alert do objeto window faz? 
 5. O método prompt() exibe uma mensagem na tela do usuário. Justifique 
Trabalho em equipe 
Crie uma página e escolha 3 tópicos desse tema para ser aplicando o CSS e o JavaScript 
 
 
 
 
 
 
TEMA 07: Operadores 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 74: Operadores / Fonte: mecatronicacemporcento.com.br 
 
Os operadores são símbolos que influenciam os operandos através de uma ação resultando 
um determinado valor, que obedecem a uma hierarquia no processamento. São classificados em dois 
grupos: binário é quando a ação incide sobre mais de um operando em uma expressão, por exemplo, 
quando efetuamos algum cálculo (multiplicação, divisão, adição, subtração) e unário quando influencia 
um único operando como por exemplo os números negativos. 
A classificação dos operadores são: 
Operadores aritméticos 
Operadores são as construções que podem manipular o valor dos operandos. 
Exemplos: 2 + 4, 3 * 5 +2 e etc… 
 
 
 
 
 
 
 
 
Os principais operadores em javaScript são: 
Operador Descrição Exemplos 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Adição (+) Soma dois ou mais valores. 15 + 2 = 17 
Sutração (-) Subtrai dois ou mais valores. 15 - 2 = 13 
Multiplicação (*) Multiplica dois ou mais valores 15 * 2 = 30 
Divisão (/) Divide dois ou mais valores 15/2= 7.5 
Resto da divisão (%) Mostra o resto em uma divisão 15 % 2 =1 
Potência (**) cálculo exponencial (potência) 15 ** 2 = 225 
Tabela 02: Operadores aritméticos / Fonte: Autoria própria 
Operadores de incrementos e decremento 
Exemplo: 
 x = x + 1 igual x++ 
 x = x – 1 igual x-- 
Operadores lógicos e relacionais 
Os operadores lógicos são três: ! (negação) , && (conjunção: “e”), || (disjunção: “ou”) 
Operador Descrição Exemplos 
! (negação) o operador de negação é tratado como 
operador unário. 
(! 5) não pode ser igual a 5. 
&& (conjunção: “e”) ambos os operadores relacionais 
devem ser verdadeiros. 
(10 > 3) && ( 8<4) 
|| (disjunção: “ou”) Pelo menos um dos operadores 
relacionais deve ser verdadeiro. 
10 > 3) ||( 8<4) 
Tabela 03: Operadores lógicos e relacionais/ Fonte: Autoria própria 
 
 
 
 
 
 
 
Operadores relacionais 
Os operadores relacionais comparam os valores dos dois lados deles e decidem a relação entre eles. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Operador Descrição Exemplos 
 
 > maior 
Se o valor do operando esquerdo for maior que o 
valor do operando direito, a condição se torna 
verdadeira. 
(10 > 3) = True 
< menor Se o valor do operando esquerdo for menor que o 
valor do operando direito, a condição se torna 
verdadeira. 
 (8 < 4) = False 
 >= maior ou igual Se o valor do operando esquerdo for maior ou 
igual ao valor do operando direito, a condição se 
torna verdadeira. 
(9 >= 7) = True 
== igualdade Se os valores de dois operandos forem iguais, a 
condição se torna verdadeira. 
(10 == 10) = True 
!= não igual Se os valores de dois operandos não forem iguais, 
a condição se torna verdadeira. 
3 != 3 ) = False 
Tabela 04: Operadores relacionais/ Fonte: Autoria própria 
 
Estruturas de controle (sequência, condicional e repetição) 
Comandos de controle de fluxo 
 Toda linguagem de programação tem estruturas para o controle de fluxo do programa, sendo 
elas estruturas de decisão e de repetição (loop). Neste tópico será abordado as principais: if-else, 
switch, for e While. 
If-else (se-senão) 
 Com o If-else, é o comando de tomada da de decisão. Ele funciona da seguinte forma: é feito 
uma verificação, caso seja verdadeira são executadas as linhas codificadas dentro entre a chave de 
abertura e de fechamento do if. E caso seja falsa será executada as linhas de programação que estão 
entre as chaves do else. 
 
Figura 75: Estrutura if/else / Fonte: Autoria própria 
 Com o objetivo de praticar, será feito um exemplo de cada um dos operadores aritméticos, 
incluindo o uso do if-else. As funções serão chamadas quando o usuário clicar no botão 
correspondente a operação desejada. 
Sintaxe: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 76: Linha de código: exemplo incluindo o uso do if/else / Fonte: Autoria própria 
 
Exemplo: 
 
Figura 77: Exemplo de código – estrutura if / Fonte Autoria própria 
 
Switch 
O switch também é um comando para tomada de decisão, a diferença em relação ao if-else é a 
verificação de valore definidos e não intervalos. 
 
 
 
 
 
 
Sintaxe básica: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
 
Figura 78: Linha de código – exemplo switch como comando para tomada de decisão / Fonte: Autoria 
própria 
 
Exemplo: 
 
Figura 79: Exemplo de código – switch / Fonte: Autoria própria 
 
For 
 O for é uma estrutura de repetição, a sua sintaxe é dívida em três partes: valor inicial 
(inicialização); condição para continuar entrando no loop e por último o incremento (aumento) ou 
decremento (diminuição) da variável inicial. Esta última parte do for é importante, pois se o valor da 
inicialização não for alterado, entrará em loop infinito e o processo (ctrl+alt+del) terá que ser finalizado. 
Sintaxe: 
for ([inicialização]; [condição]; [incremento ou decremento]) { 
 
 
 
 
Criação de Sites e Plataformas Digitais 
...executar código 
...executar código 
} 
Exemplo: 
 
Figura 80: Exemplo de código – for / Fonte: Autoria própria 
 
While 
Outra forma de fazer loop, cuja estrutura é difere, enquanto a condição for verdadeira a 
repetição continue. Perceba na sintaxe abaixo que o valor da variável condicional também deve ser 
alterado para que não entre em um loop infinito. Mas como não temos na estrutura do while o 
incremento ou decremento, isto terá que ser feito entre as chaves de abertura e fechamento do while. 
Sintaxe: 
while (condição) { 
...executar código 
...executar código 
} 
Exemplo: 
 
Figura 81: Exemplo de código – while / Fonte: Autoria própria 
 
Do...While 
É muito semelhante ao while com diferença o bloco de código é executado pelo menos uma vez e 
depois é que é verificado a condição: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Definimos uma variável de controle: 
(1) var controle = 0 
o bloco de codigo (2) é repetido pelo menos uma vez antes de ser verificado a condição (3): 
(2) document.write("o valor de controle é " + controle); 
adicionamos uma condição de repetição: 
(3) while (controle <= 5) 
Exemplo com do While: 
 
Figura 82: Exemplo do ...While / Fonte: Autoria própria 
 
 Desafio do tema 
 1. Quais são os operadores lógicos? 
 2. Quais são as principais estruturas de decisão? E explique uma 
 3. Qual a diferença de do..while e while? 
 4. No bloco de código a seguir explique o que acontece. 
 controle=0; 
 do{ 
 controle = controle + 1; 
 }while(controle < 2); 
 5. Que tipo de operadores retornam um valor booleano 
 
Trabalho em equipe 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Desenvolva um código em JavaScript para ser colocado na sua página, deve conter: 
 • Pelo menos uma estrutura de decisão 
 • Uma Estrutura De Repetição 
 • E mostre o resultado empregando uma das formas de exibição 
 
TEMA 08: Funções pré-definidas 
Esse tipo de função realiza procedimento que pode ou não 
retornar um valor, um parâmetro com os dados a serem processados 
dentro da função será passado. Podemos chamá-las em qualquer lugar 
do programa, os parâmetros da função são passados entre parênteses 
e em algumas funções teremos mais de parâmetro. 
Temos funções pré-definidas que podemos utilizar na 
verificação de dados informados em um formulário de uma página web, 
como por exemplo, a função length que verifica o tamanho da string e 
assim podemos verificar se um campofoi preenchido. Esse assunto 
será abordado em um tema futuro. 
Para utilizarmos as funções predefinas da matemática temos que referenciar a biblioteca math 
que contém todas as funções como: tangente, seno, cosseno, arredondamento, valor máximo, valor 
mínimo, entre outros. 
 
Vamos ver alguns dessas funções abaixo: 
A função Math.round retorna o valor de um número arredondado para o inteiro mais próximo 
Sintaxe: 
var nome_var = Math.round(valor); 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 83: Linha de código – exemplo função Math.round / Fonte: Autoria própria 
 
Resultado: 
 
 
Figura 84: Função Math.round / Fonte: Autoria própria 
 
A função Math.pow retorna o valor do número elevado a um expoente power, ou seja, 
base expoente 
Sintaxe: 
var nome_var = Math.pow(valor, expoente); 
 
 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 85: Linha de código – exemplo função Math.pow / Fonte: Autoria própria 
 
Resultado: 
 
Figura 86: Função Math.pow / Fonte: Autoria própria 
 
A função Math.sqrt retorna a raiz quadrada de um número especificado. 
Sintaxe: 
var nome_var = Math.sqrt(valor); 
Exemplo: 
 
Figura 87: Linha de código – exemplo função Math.sqrt / Fonte; Autoria própria 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 88: Função Math.sqrt / Fonte: Autoria própria 
 
A função Math.min retorna o menor valor passado como parâmetro 
Sintaxe: 
var nome_var = Math.min(valor1,valor2); 
Exemplo: 
 
 
Figura 89: Linha de código – exemplo função Math.min / Fonte: Autoria própria 
 
 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 90: Função Math.min / Autoria própria 
 
A função Math.max retorna o maio valor passado como parâmetro 
Sintaxe: 
var nome_var = Math.max(valor1,valor2); 
Exemplo: 
 
Figura 91: Linha de código – exemplo função Math.max / Fonte: Autoria própria 
 
 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 92: Função Math.max / Fonte: Autoria própria 
 
A função Math.tan retorna o valor da tangente de um determinado número 
Sintaxe: 
var nome_var = Math.tan(valor1); 
Exemplo: 
 
Figura 93: Linha de código – exemplo função Math.tan / Fonte: Autoria própria 
 
 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 94: Função Math.tan / Fonte: Autoria própria 
 
A função replace serve para manipulação de strings e permite a substituição de um trecho de uma 
string por outro. 
Sintaxe: 
var nome_var1 = 'a string principal'; 
var nome_var2 = nome_var1.replace('nome_var1', 'sausage'); 
Exemplo: 
 
Figura 95Linha de código – RG com formatação / Fonte: Autoria própria 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 96: Exemplo RG formatado / Fonte: Autoria própria 
 
toLowerCase () é usado para converter caracteres maiúsculos para minúsculos. 
Sintaxe: 
string.toLowerCase() 
Exemplo: 
 
Figura 97: Linha de código – converte string maiúscula para minúscula / Fonte: Autoria própria 
 
 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 98: Exemplo converte string maiúscula para minúscula / Fonte: Autoria própria 
 
Script length() é usado para contar quantos caracteres tem uma string 
Sintaxe: 
senha.length 
Exemplo: 
 
Figura 99: Linha de código – validação de senha / Fonte: Autoria própria 
 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 100: Exemplo validação de senha / Fonte: Autoria própria 
 
ParseInt - Transforma string em inteiro 
Sintaxe: 
parseInt 
Exemplo: 
 
Figura 101: Linha de código – converte string em inteiro / Fonte: Autoria própria 
 
 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 102: Exemplo converte string em inteiro / Fonte: Autoria própria 
 
Trabalhando com datas 
Apenas a função Date() devolve a data e hora. Existem alguns métodos para obter esses dados 
separadamente. 
Date() 
Devolve data no formato: Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano. 
Exemplo: 
 
Figura 103: Linha de código – exibe hora do sistema / Fonte: Autoria própria 
 
 
 
 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 104: Exemplo exibe hora do sistema / Fonte: Autoria própria 
 
DESAFIO 
 1. O que são funções pré-definidas? 
 2. Para que serve a função parseInt? 
 3. Explique a função replace. 
 4. Dê um exemplo de utilização da função Math.sqt. Explique. 
 5. Dê um exemplo de utilização conjunta das funçẽs Math.max e Math.min. 
 
TRABALHO EM EQUIPE 
Desenvolva uma forma de aplicar as 3 funções sugeridas abaixo em sua página: 
• Replace 
• toLowerCase 
• Script length 
 
 
 
 
 
TEMA 09: Métodos e eventos 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 Métodos podemos definir com a forma que será executada uma ação que pode ser através, por 
exemplo, de uma função, ou seja, o método é um bloco de código, neste caso, em javscript no qual 
processa as informações dadas pelo usuário transformando-as em tempo de execução da função. 
Eventos, vamos definir, como um conjunto de ações que são realizadas em um determinado elemento 
da página web, pode ser por exemplo, um texto, uma imagem ou uma div. 
 Podemos considerar eventos muitas das interações do usuário que está visitando uma página 
com o conteúdo de um site. Há uma gama de eventos definidos para uso em JavaScript, abaixo uma 
tabela com os mais utilizados: 
onBlur remove o foco do elemento 
onChange muda o valor do elemento 
onClick o elemento é clicado pelo usuário 
onFocus o elemento é focado 
onKeyPress o usuário pressiona uma tecla sobre o elemento 
onLoad carrega o elemento por completo 
onMouseOver 
 
define ação quando o mouse passa sobre um elemento na página 
onMouseOut define ação quando retira o mouse do elemento 
onSubmit define ação ao enviar um formulário 
 
Onclick, Onmousedown, Onmouseup: 
• onclick: ação é disparada com o click do mouse. 
• onmousedown: ocorre quando o usuário pressiona o botão do mouse 
• onmouseup: ocorre quando o usuário solta o botão do mouse. 
 
 
 
 
 
 
Exemplo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 105: Linha de código – usando eventos – mouse / Fonte: Autoria própria 
Resultado: 
 
Figura 106: Eventos onclick, onmousedowne e onmouseup / Fonte: Autoria própria 
 
onMouseOver e onMouseOut: Eventos responsáveis pelas ações que o usuário faz com o 
mouse. 
Exemplo: 
 
Figura 107: Linha de código - Eventos onMouseOver e onMouseOut / Fonte: Autoria própria 
Resultado: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
 
Figura 108: Exemplo eventos onMouseOver e onMouseOut / Fonte: Autoria própria 
OnLoad 
O evento onload pode ser usado quando queremos que algo seja carregado junto com a página. 
Exemplo: 
 
Figura 109: Linha de código – evento onload / Fonte: Autoria própria 
 
Resultado:
 
Figura 110: Exemplo evento onload / Fonte: Autoria própria 
onChange 
O evento é utilizado para que determinada ação seja realizada após alguma mudança. 
 
 
 
 
Criação de Sites e Plataformas Digitais 
Exemplo: 
 
Figura 111: Linha de código - Evento onChange / Fonte: Autoria própria 
Resultado: 
 
Figura 112: Exemplo evento onChange / Fonte: Autoria própria 
DESAFIO 
1. O que é um método? 
2. O que é um evento? 
3. O que faz a ação onKeyPress? 
4. Cite 3 eventos do mouse mais utilizados? Explique. 
5. Qual a ação disparada pela ação onMouseOver onMouseOut? 
6. O que faz a ação onSubmit? 
7. 
TRABALHO EM EQUIPE 
Em grupo: 
 
 
 
 
Criação de Sites e Plataformas Digitais 
• Elabore uma tela para entrada de dados com a instrução Input e com a onSubmit.

Materiais relacionados

Perguntas relacionadas

Materiais recentes

Perguntas Recentes