Desenvolvimento Web

Professor Mário de Jesus
E-mail: analista.mario@gmail.com
▪ O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear
Research) na suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa
próximas, e compartilhar documentos com facilidade. Em 1992, foi liberada a biblioteca de
desenvolvimento WWW ( World Wide Web), uma rede de alcance mundial, que junto com o HTML
proporcionou o uso em escala mundial da WEB.
▪ O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem
surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada.

▪ O endereço solicitado é conhecido como URL (Uniform Resource Locator), do tipo http, observe o
endereço seguinte:
▪ http://www.meusite.com.br/pagina/contato.html
▪ Desmembrando este endereço temos o seguinte esquema:
▪ scheme://host.domian:port/path/filename
▪ A palavra scheme é usada para definir o protocolo usado no endereço, neste caso o http. O termo
host é utilizado para definição do domínio, ou seja, identificar onde a solicitação será feita, na sua
omissão o padrão é www. O termo domain é o nome do domínio, no nosso exemplo é
meusite.com.br. Na sequência :port que define o número da porta para o host, este valor
geralmente é omitido, mas para conhecimento o número da porta para o protocolo http é 80. Depois
path, que descreve o caminho para os arquivos ou documentos presentes no servidor e por fim o
termo filename, ou nome do arquivo.
▪ O site oficial do W3C é http://www.w3c.org, sua sigla
significa World Wide Web Consortium e é usada para definir o

Consórcio Internacional responsável pelo desenvolvimento,
implantação e regulamentação das linguagens pertinentes a
internet.
Para centralizar um texto ou algum elemento da tela podemos usar a tag <center> conteúdo</center>
A inserção de comentário no código html é realizado através das tags .
Esse recurso era muito utilizado para criar um movimento de texto na página
usando a tag <marquee> texto</marquee>
behavior
Define como o texto é rolado dentro da área do letreiro. Os valores possíveis são scroll, slide e alternate.
Se nenhum valor for especificado, o valor padrão será scroll.
bgcolor
Define a cor do plano de fundo do letreiro através do nome da cor (ex: red, blue) ou de um valor
hexadecimal.
direction
Define a direção da rolagem do texto dentro do letreiro, os possíveis valores são: left, right, up & down.
Se nenhum valor for especificado, o valor padrão será "left".
height
Define a altura do letreiro em pixeis ou em um valor percentual.
vspace
Aplica uma margem vertical em pixeis ou em valor percentual.
width
Define a largura em pixeis ou em um valor percentual.
hspace
Aplica a margem horizontal.
loop
Define o número de repetições da animação do letreiro. Se nenhum valor for especificado assumirá o
valor padrão de -1, que significa que a animação será repetida infinitamente.
scrollamount
Define em pixeis o tamanho de rolagem em cada intervalo, o valor padrão é 6.
scrolldelay
Define o intervalo de tempo entre cada animação de rolagem em milissegundos. O valor padrão é 85.
Qualquer valor menor que 60 será ignorado e o valor 60 será usado, a menos que seja especificado como
truespeed.
truespeed
Por padrão, valores abaixo de 60 milissegundos são ignorados, a menos que o valor truespeed esteja
presente, caso esteja estes valores são aceitos.
ASCII foi o primeiro padrão de codificação de caracteres (também chamado
de conjunto de caracteres). O ASCII definiu 128 caracteres alfanuméricos
diferentes que podem ser usados na Internet: números (0-9), letras inglesas (AZ) e
alguns caracteres especiais como! $ + - () @ <>.
ISO-8859-1 era o conjunto de caracteres padrão para HTML 4. Esse conjunto de
caracteres também suportava 256 códigos de caracteres diferentes.
ANSI (Windows-1252) foi o conjunto de caracteres original do Windows. ANSI é
idêntico ao ISO-8859-1, exceto que o ANSI tem 32 caracteres extras.
Como o ANSI e o ISO-8859-1 eram tão limitados, o HTML 4 também suportava o
UTF-8.
Além do tipo da letra podemos definir o tamanho size e a cor da letra color
Você pode usar o title dentro da tag img para que um texto apareça
quando o usuário posicionar o mouse sobre a imagem.
Lista é um importante recurso de HTML, pois permite criarmos tópicos de
textos para uma melhor exemplificação de um determinado assunto. São
recursos extremamente usados, inclusive quando nem imaginamos que ele
esta sendo usado, como no caso de menus. Hoje, boa parte dos menus em
HTML é feito com listas.

As listas ordenadas ou numeradas são usadas para indicar alguma sequência ou
numeração. As tags usadas para criar uma lista ordenada são <ol> e <li>.
A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da
lista.
<OL TYPE=”formato” START=”n”>
<LI> Tópico 1
<LI> Tópico 2
<LI> Tópico n
</OL>
Onde:
• <OL>: início da lista numerada;
• TYPE=”formato”: o formato da numeração pode ser:
• 1: lista numérica (não é necessário ser definido); • A: lista alfabética com letras maiúsculas;
• A: lista alfabética com letras minúsculas; • I: Lista numérica com números romanos maiúsculos;
• I: lista numérica com números romanos minúsculos; • START=”n”: o valor inicial de uma lista numerada;
• <LI>: tópicos da lista; • </OL>: fim da lista numerada;
As listas não numeradas são usadas para listar itens, sem se preocupar com sua
sequência. Chamamos de lista de marcadores apenas. As tags usadas para criar
uma lista não ordenada são <ul> e <li>.
A tag <ul> é usada para definir a lista e a tag <li> é usada para cada item da
lista.
<UL TYPE=”formato”>
<LI> Tópico 1
<LI> Tópico 2
<LI> Tópico 3
</UL>
Onde:
• <UL> : Início da lista pontuada; • TYPE=”formato”: o formato do marcador pode ser:
• disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar);
• square: o marcador é um quadrado;
• circle: o marcador é um ponto.
• <LI>: tópicos da lista, não é necessário encerrar a TAG;
Listas de definição são usadas em assuntos onde há um termo
e em sequência a sua definição, estilo perguntas e respostas.
As tags usadas são <dl>, <dt> e <dd>.

<dl> - cria a lista de definição
<dt> - onde o termo é proposto
<dd> - onde o termo é definido
Crie uma página que reproduza o mesmo efeito da imagem e texto abaixo dentro de uma tabela sem borda
Possibilidade de navegações entre diversos recursos disponíveis na WEB
através de hipertextos Visualização, normalmente, na forma de textos destacados
ou de imagens no corpo do documento Elementos clicáveis: quando clicados, o
navegador é levado a carregar e visualizar o recurso apontado pelo link Atributo
obrigatório: HREF Localização, no sistema de arquivos local ou na web, de
qualquer recurso disponível na WEB (páginas HTML, imagens, arquivos de áudio
ou de vídeo, etc.) Sintaxe:
<a href="localização_recurso_web" >Texto</a>
Exemplo 01: menu1.html, links para páginas HTML localizadas no mesmo local no
qual se encontra a página abaixo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemplo 01</title>
</head>
<body>
<h1 align="center">Café Starbuzz</h1> <hr/>
<p align="center"><a href="cafe.html">Mistura de Casa</a></p>
<p align="center"><a href="pag02.html">Café arábico com leite</a></p>
<p align="center"><a href="pag03.html">Cappucino</a></p>
<p align="center"><a href="pag04.html">Chá Chai</a></p>
</body>
</html>
Âncoras: links para apontamento de conteúdo em uma mesma página HTML. Uso comum em
páginas com conteúdo extenso, definição de seções; para cada seção, é definido um link âncora, para
o qual deverá ser especificado o atributo
NAME
Atributo NAME: nome de referência para referencialmente do link âncora em links comuns
Atributo HREF: não especificado em links âncoras. Conteúdo interno da tag: igualmente não
especificado. Em função disso, ausência de elemento visual para identificação visual deste tipo de
link Sintaxe:
<a name="nome_seção"></a>
Referência de links âncoras em links comuns
Atributo HREF: indicação do nome do link âncora, precedido do símbolo “#”
Sintaxe
<a href="#nome_seção">Conteúdo HTML</a>
Crie a página ancora.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Exemplo 05</title>
</head>
<body>
<h1 align="center">FAQ</h1>
<p align="center"><i><a href="#faq">1. O que é FAQ?</a><br/>
<a href="#linux">2. Linux</a><br/>
<a href="#gnu">3. GNU</a><br/>
<a href="#software">4. Software Livre</a><br/>
<a href="#fsf">5. Free Software Foundation</a></i></p>
<hr />
<a name="faq"></a>
<h3><strong>O que é FAQ?</strong></h3>
<p align="justify">FAQ é um acrónimo da expressão inglesa Frequently Asked Questions, que significa
Perguntas Frequentes.</p>
<a name="linux"></a>
</body>
</html>
Reproduza a página abaixo dentro de uma tabela com links para outras páginas
▪ https://github.com/
Professor:
Mário de Jesus
ROTEIRO
• INTRODUÇÃO • MODELOS DE CONTEUDO

• O HTML5 • CATEGORIAS
• DESENVOLVIMENTO MODULAR • HEADINGS
• MOTORES DE RENDERIZAÇÃO • SECTIONS
• COMPATIBILIDADE • CONTEÚDO INTERATIVO
• ESTRUTURA BÁSICA • <VIDEO>
• CHARSET • <AUDIO>
• <LINK> • PERGUNTAS
INTRODUÇÃO
• O HTML é uma linguagem para publicação
de conteúdo (texto, imagem, vídeo, áudio e
etc) na Web.
• HTML é uma abreviação de Hypertext

Markup Language - Linguagem de Tim Berners-Lee
Marcação de Hypertexto.
• Desenvolvido originalmente por Tim

Berners-Lee o HTML.
• Ganhou popularidade após o

desenvolvimento do Mosaic browser na
década de 90. Marc Andreessen
O HTML5
• O HTML5 é a nova versão do
HTML4 e um dos seus principais
objetivos é facilitar a manipulação
dos elementos, possibilitando o
desenvolvedor modificar as
características dos objetos de
forma não intrusiva, fazendo com
que isso fique transparente para
o usuário final.
O DESENVOLVIMENTO MODULAR
• Antigamente para que fosse lançada uma nova versão do HTML ou CSS
todas as ideias teriam de serem listadas nas especificações, testadas e
desenvolvidas e então publicadas para o uso dos browsers.
• Agora as tecnologias foram divididas em módulos. Isso quer dizer que a

comunidade de desenvolvimento não precisa esperar o lançamento do
padrão para iniciar o uso das novidades.
• Isso causa muita incompatibilidade nos navegadores atualmente.

ESTRUTURA BÁSICA
• A estrutura básica do HTML5 continua sendo a mesma das versões
anteriores da linguagem, há apenas uma exceção na escrita do
DOCTYPE. Segue abaixo como a estrutura básica pode ser seguida:
CHARSET
• No nosso exemplo há uma metatag responsável por chavear qual tabela de caracteres a
página está utilizando.
HTML5
<meta charset="utf-8">
HTML Versões anteriores

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Exemplo de acentuação:
• Sem CHARSET=“UTF-8”
Olá
• Com CHARSET=“UTF-8”
Olá
CHARSET
TAG LINK
• Existem dois tipos de LINK no HTML, sendo a tag <A> e a <LINK>.
A tag <a> é utilizada para criar links com outras páginas

EX: <a href=“http://www.Google.com”>Google.com</a>
A tag <link> é utilizada importar estilos CSS.

EX: <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
MODELOS DE CONTEÚDO
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos:
elementos de linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a,
strong, em, img, input, abbr, span.
Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout.
Ex:
<b> Elementos de LINHA! </b>
<div> Elemento de bloco </div>

CATEGORIAS
• Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com
características similares.
HEADINGS
• Esta categoria diz respeito aos títulos da página.

SECTIONS
• A categoria SECTIONS
representa as seções
da página, como o
CABEÇALHO, MENU,
CONTEÚDO, RODAPÉ e
ETC.
CONTEÚDO INTERATIVO
• Esta categoria equivale a todo o conteúdo interativo da página, sendo players de música e
vídeo, imagens, formulários entre outros.
<AUDIO>
• Assim como podemos reproduzir vídeos no HTML5 também podemos
inserir áudios em nossas páginas.
<audio src="http://www.w3schools.com/html/horse.ogg”>
<p>Seu nevegador não suporta o elemento audio.</p>
</audio>
Player padrão HTML5 no Google Chrome
Player CODEBASEHERO de músicas

Áudio
É utilizado o elemento audio para inserir o áudio:
<audio src=”mus.oga” controls=”true” autoplay=”true” />
O elemento controls define se controle de áudio, com botões de play, pause,

volume,etc,será exibido na tela.
Se controls=”false” o player deverá ser controlado pelo javascript com métodos como
play() e pause().
Outros formatos
<audio controls=”true” autoplay=”true”>
<source src=”mus.oga” />
<source src=”mus.mp3” />
<source src=”mus.wma” />
<p>Faça o <a href=”mus.mp3”>download da música</a>.</p>
</audio>
<VÍDEO>
• Uma das maiores novidades do HTML5 foi a possibilidade de ser
inserido vídeos nas páginas sem a necessidade de plugins, tais como o já
falido Flash Player.
<video src="http://www.w3schools.com/html/mov_bbb.mp4" controls>
Seu navegador não suporta o elemento VÍDEO.
</video>
Player padrão HTML5 no Google Chrome
Player personalizado utilizando CSS3 e JS

Vídeo
Para inserir um vídeo utilizasse o elemento video:
<video src=”u.ogv” width=”400” height=”300” />
Como no áudio deve-se oferecer várias alternativas de vídeo:
<video controls=”true” autoplay=”true” width=”400”

height=”300”>
<source src=”u.ogv” />
<source src=”u.mp4” />
<source src=”u.wmv” />
<p>Faça o <a href=”u.mp4”>download do vídeo</a>.</p>
</video>
Picture
A <picture>tag oferece aos desenvolvedores da web mais flexibilidade na especificação de
recursos de imagem.
O uso mais comum do <picture>elemento será para direção de arte em designs responsivos.
Em vez de ter uma imagem que é aumentada ou diminuída com base na largura da janela de
visualização, várias imagens podem ser projetadas para preencher a janela de visualização do
navegador de maneira mais adequada.
O <picture>elemento contém duas tags: uma ou mais tags <source> e uma tag <img> .
O navegador procurará o primeiro elemento <source> onde a consulta de mídia corresponde

à largura da janela de visualização atual e, em seguida, exibirá a imagem apropriada
(especificada no atributo srcset). O elemento <img> é necessário como o último filho do
<picture>elemento, como uma opção de fallback se nenhuma das tags de origem
corresponder.
<VÍDEO>
• Crie uma pasta vídeos no seu projeto e cole seu vídeo mp4
• Copie o código iframe de um vídeo do youtube
pag08.html
Código da pag08.html
Saída
Código da pag09.html
Saída
<VÍDEO> SUPORTE E FORMATOS
<AUDIO> SUPORTE E FORMATOS
Summary com dl, dt e dd
Saída
contenteditable
Para um elemento tornar-se editável basta incluir
contenteditable =“true”.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1> Editar </h1>
<p contenteditable="true" > Este parágrafo é
editável.</p>
</body>
</html>
Saída
REVISÃO ORTOGRÁFICA E GRAMATICAL
O atributo spellcheck especifica se o elemento tem a
sua ortografia e gramática revisada ou não. Para
habilitar a revisão de texto basta inserir
spellcheck=”true” . Para desabilitar spellcheck=”false”.
<!DOCTYPE html>
<html>
<body>
<h1> Atributo SpeelCheck </h1>
<textarea spellcheck="true"
placeholder="spellcheck='true'"></textarea>
<textarea spellcheck="false"
placeholder="spellcheck='false'"></textarea>
</body>
</html>
Multiple
Exemplo
Saída
Saída
Formulários
Formulários
O uso de formulário HTML (ou HTML form) é muito frequente
na web, é um dos principais pontos de interação entre usuários
e uma aplicação web. Geralmente, eles funcionam enviando os
dados para um servidor, porém também podem ser utilizados
para alguma função na própria página.
Elemento <form>
Todos formulários HTML começam com um elemento <form>
como este:
Este elemento define um formulário. É um elemento

de container como um elemento <div>, mas ele
também suporta alguns atributos específicos para
configurar a forma como o formulário se comporta.
Todos os seus atributos são opcionais, mas é
considerada a melhor prática, definir pelo menos o
atributo action e o atributo method.
Action e Method
O atributo action define o local (uma URL) em
que os dados recolhidos do formulário devem
ser enviados.
O atributo method define qual o método HTTP
para enviar os dados (ele pode ser "GET" ou
"POST" (veja as diferenças aqui).
Crie exemplo01.html
saída
Exemplo 02
Saída
Pattern
Tags do Formulário
Exemplo20.html
Exemplo21.html
Exemplo22.html
Exemplo23.html
Exemplo24.html
Exemplo25.html
Exemplo26.html
Exemplo27.html
Botão com imagem
Exemplo28.html
Desenvolvimento Web I
CSS
Prof° Mário da Silva de Jesus

Uma declaração CSS é bem simples:
• Primeiro declaramos o seletor. (Exemplo p)
• Depois as suas propriedades. (Exemplo color)
• E seus respectivos valores. (Exemplo red)
• Separadas por (;)
• Entre as {} chaves.
pagEx.html
Saída
est.css
Execute a página index.html
Todos os H1 estão vermelhos

O h1 do menu-site vai ficar roxo

Dentro do estilo2.css
A tag a vai ficar laranja dentro do menu

O H1 do conteúdo vai ficar azul

Execute a página
index.html
As caixas vão ficar verdes

Dentro do
estilo2.css
Execute a página
index.html
A primeira caixa vai ficar

com o texto branco
Background-color=Muda a cor do fundo
Color = Cor da letra
Width = Largura = sempre colocar em porcentagem para deixar o conteúdo responsivo
Margin = auto para deixar no centro da página
Padding = espaçamento da entre o conteúdo e a margem.
Border da div
CSS - Padding, margin,
border, float e hover

Mudando o padding para 60px perceba que o espaço
entre o conteúdo para borda vai mudar em todas as
dimensões.
Você também pode mudar um espaçamento específico:
padding-top= para mudar a parte superior
padding-left= para mudar a parte esquerda
padding-right= para mudar a parte direita
padding-bottom= para mudar a parte inferior
A margem é o espaçamento entre a div e a página (Fora do conteúdo)
Você também pode mudar um espaçamento específico:
margin-top= para mudar a parte superior
margin-left= para mudar a parte esquerda
margin-right= para mudar a parte direita
margin-bottom= para mudar a parte inferior
Borda do conteúdo ou div. Você pode usar o mesmo
contexto do padding para especificar um local para
aparecer a borda (top, left, right, bottom).
none: sem borda;
hidden: equivalente a none;
dotted: borda pontilhada;
dashed: borda tracejada;
solid: borda contínua;
double: borda dupla;
groove: borda entalhada;
ridge: borda em ressalto;
inset: borda em baixo relevo;
outset: borda em alto relevo.
A página estava funcionando de forma responsiva quando colocamos
width:80% porém, ao acrescentamos padding, margem e border a
largura do elemento em si aumentou, por isso ele não está mais de
forma responsiva, pois os pixels não são responsíveis.
Para resolver isso devemos acrescentar o box-sizing: border-box,

quando queremos uma div mais responsiva. Você pode colocar dentro
da div ou aplicar na tag body que deve aplicar esse efeito em todas as
divs dentro do seu projeto.
A propriedade float do CSS determina que um elemento deve ser
retirado do seu fluxo normal e colocado a direito ou esquerdo do seu
container, onde textos e elementos em linha irão se posicionar ao seu
redor.
Um elemento flutuante é um tipo de elemento cujo valor de float é
diferente de none
- left
É uma palavra-chave que indica que o elemento deve flutuar à esquerda do bloco.
- right
É uma palavra-chave que indica que o elemento deve flutuar à direita do bloco.
- none
É uma palavra-chave que indica que o elemento não deve flutuar.
- inline-start
É uma palavra-chave que indica que o elemento deve flutuar no lado inicial do seu bloco, ou
seja, o lado esquerdo em scripts e no direito em scripts.
- inline-end
É uma palavra-chave que indica que o elemento deve flutuar no lado final do seu bloco, ou
seja, o lado direito em scripts e no esquerdo em scripts.
CSS - Positions

Position: ela é responsável pelo modo que o elemento é posicionado na página
estilo.css
estilo.css
Vamos acrescentar a position relative e acrescentar o top
200px e left 100px, na primeira div conteudo1 para fazê-la fica
sobre a conteudo2. Veja:
Saída
estilo.css
Outro exemplo
estilo.css
Semântica, tela de login e menus

Não semântico Semântico
semântico
Desenvolvimento Web HTML e css
Professor: Mário de Jesus
Criando e configurando o projeto site e a página html
Crie a pasta site e abra ela com o visual studio code.
Dentro da pasta site crie a pasta img e cole as imagens ao lado
Dentro da raiz do projeto crie o arquivo index.html. Insira o código abaixo:

Código do home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/pokebola.png">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<main>
<img src="img/buba.png" alt="" class="pokemon__image">
<h1 class="pokemon__data">
<span class="pokemon__number">7</span> -
<span class="pokemon__name">Bubassauro</span>
</h1>
<img src="img/pokedex.png" alt="" class="pokedex">

</main>
</body>
</html>
Saída
Criando o estilo.css
Dentro do projeto pokedex, crie a pasta css. Dentro da pasta css crie o arquivo style.css.
Digite o código abaixo:
Código style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
text-align: center;
background: linear-gradient(to bottom, #6ab7f5, #fff);
min-height: 100vh;
}
main{
display: inline-block;
margin-top: 2%;
padding: 15px;
position: relative;
}
.pokedex{
width: 100%;
max-width: 425px;
}
.pokemon__image{
position: absolute;
bottom: 40%;
left: 30%;
transform: translate(-63%, 20%);
width: 30%;
height: 28%;
}
Saída
Aula Professor Mário
Aula css flexbox

O que é FlexBox?
Flexible Box Model – com ele podemos criar e organizar layouts, deixando-os mais
flexíveis e dinâmicos. Nós aplicamos esse css usando o display: flex. Os itens ficam lado a lado,
além da grande capacidade de resposividade (adaptáveis).
Index.html
Saída
Código do index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
<title>Flex</title>
</head>
<body>
<div class="container">
<div class="box1">
<h1>Box 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsam reiciendis neque veniam perspiciatis accusantium! Eveniet iure
dignissimos, natus maxime omnis ea consequatur dolorum eligendi molestiae
ipsum voluptatibus delectus veniam fuga!
</p>
</div>
<div class="box2">
<h1>Box 2</h1>
<p>
</p>
</div>
<div class="box3">
<h1>Box 3</h1>
<p>
</p>
</div>
<div class="box4">
<h1>Box 4</h1>
<p>
</p>
</div>
</div>
</body>
</html>
Código estilo.css
.container{
display: flex;
}
.container div{
border: 2px solid black;
padding: 10px;
margin: 10px;
}
Saída:
Direção dos itens (flex-direction)
Row (padrão): Posição de itens lado a lado.
Column: posicionar os itens um embaixo do outro.

Main axis e cross axis como o justify-content e o align-itens faz
o alinhamento dos itens
No flex-direction:row o main axis é na horizontal e o cros axis na vertical
No flex-direction:columm o main axis é na vertical e o cros axis na horizontal
Visão resumida
Formas de alinhamento (justify-content)
O justify-content alinha os itens no main axis.
Flex-start: Alinha os itens no início do container
Flex-end: Alinha os itens no fim do container

Center: Alinha os itens no centro do container
space-between (espaço entre): Distribui os itens igualmente no container. O espaço entre as

DIVs ocupa o mesmo espaço.
space-around (espaço ao redor): Mesma coisa do space-between, mas ele cria uma margem
no topo e no fundo se a flex-direction for columm ou na esquerda e na direita se for a flex-
direction row.
Formas de alinhamento (align-itens)
O align-itens alinha os itens no cross axis. Vamos começar:
Stretch: ele faz com que os itens cresçam igualmente ocupando todo o cross axis. É o
comportamento (padrão) do flex.
Flex-start: Alinha os itens no início do container

Flex-end: Alinha os itens no fim do container
Center: Alinha os itens no centro do container

Formas de alinhamento (align-itens)
align-content: Alinha as linhas do container verticalmente. Que possui todas as propriedades
dos itens que já vimos até agora.
Responsividade (flex-flow)
Com a propriedade flex-flow podemos adicionar responsividade aos nossos layouts de uma
forma muito simples.
nowrap: Ele não permite a quebra de linha.
Veja que mesmo esticando ou ampliando, ele sempre vai tentar adaptar os itens:
Agora com o flex-flow: wrap ele sempre vai tentar preservar a largura necessária que o item
apareça na tela.
Veja os comportamentos dos textos com e sem wrap
Figura 1 - sem wrap
Figura 2 - Com Wrap
Temos também o wrap-reverse, que manda os itens para a linha de cima

Flex Itens
Com a propriedade flex-item podemos manipular com componentes dentro de uma div flex.
Order: define a ordem dos elementos no container

Flex: define o tamanho do elemento no main axis baseado no tamanho do container
Flex-basics: define o tamanho do elemento no main axis
Cards css responsivo

Crie o index.html
Código do index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Responsive Cards</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="cards">
<section class="card contact">

<div class="icon">
<img src="imagens/lindos.png" alt="Contact us.">
</div>
<h3>Contact us.</h3>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Minima adipisci cupiditate inventore
iste.</span>
<button>Learn More</button>
</section>
<section class="card shop">

<div class="icon">
<img src="imagens/bananas.png" alt="Contact us.">
</div>
elit. Minima adipisci cupiditate inventore
iste.
</span>
</section>
<section class="card rei">

<div class="icon">
<img src="imagens/bananas.png" alt="Contact us.">
</div>
elit. Minima adipisci cupiditate inventore iste.
</span>
</section>
</main>
</body>
</html>
Código
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #F6F9FF;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #434343;
}
main.cards {
display: flex;
padding: 32px;
}
main.cards section.card {
display: flex;
flex-direction: column;
text-align: center;
background: white;
padding: 1rem 1.5rem;
border-radius: 8px;
max-height: 468px;
margin-left: 32px;
}
main.cards section.card:first-child {
margin-left: 0;
}
main.cards section.card .icon {

width: 104px;
height: 104px;
}
main.cards section.card img {

width: 100%;
}
main.cards section.card h3 {
font-size: 100%;
margin: 16px 0;
}
main.cards section.card span {

font-weight: 300;
max-width: 240px;
font-size: 80%;
margin-bottom: 16px;
}
main.cards section.card button {

padding: 0.5rem 1rem;
text-transform: uppercase;
border-radius: 32px;
border: 0;
cursor: pointer;
font-size: 80%;
font-weight: 500;
color: #fff;
}
main.cards section.card.contact button {

background: linear-gradient(to right, #9F66FF, #DFCBFF);
}
main.cards section.card.shop button {

background: linear-gradient(to right, #3e8aff, #BBDEFF);
}
main.cards section.card.rei button {

background: linear-gradient(to right, #FE5F8F, #FFC7D9);
}
main.cards section.card.contact {
box-shadow: 20px 20px 50px -30px #9f66ff;
}
main.cards section.card.shop {
box-shadow: 20px 20px 50px -30px #3e8aff;
}
main.cards section.card.rei {
box-shadow: 20px 20px 50px -30px #fe5f8f;
}
@media screen and (max-width: 720px) {

main.cards {
flex-direction: column;
}
main.cards section.card {
margin-left: 0;
margin-bottom: 32px;
}
main.cards section.card:last-child {
margin-bottom: 0;
}
}
Desenvolvimento Web HTML e css
Criando e configurando o projeto site e a página html
Crie a pasta site e abra ela com o visual studio code.
Dentro da pasta site crie a pasta img e cole as imagens ao lado
Dentro do projeto site, crie a pasta pages e dentro dela crie o arquivo home.html. Digite o
código baixo:
Código do home.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="../css/home.css">
<title>Home</title>
</head>
<body>

<header>
<div class="imagem1">
<img src="../img/fatec.png" alt="">
</div>
<img src="../img/cps.png" alt="">
</div>
</header>

<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="capitao.html">Capitão</a></li>
<li><a href="#">Homem de ferro</a></li>
<li><a href="#">Thor</a></li>
<li><a href="#">Hulk</a></li>
</ul>
</nav>

<div class="row">
<div class="card verde">
<h2>Capitão América</h2>
<p>Sua história é antiga</p>
<a href="capitao.html"><img class="image"
src="../img/capitao.png" alt="money" /></a>
</div>
<div class="card azul">

<h2>Homem de Ferro</h2>
<p>O mais rico</p>
<img class="image" src="../img/iron.png" alt="settings"
/>
</div>
<div class="card vermelho">

<h2>Thor</h2>
<p>Filho de Odim</p>
<img class="image" src="../img/thor.png" alt="article" />
</div>
<div class="card red">

<h2>Huck</h2>
<p>O mais nervoso</p>
<img class="image" src="../img/hulk.png" alt="article" />
</div>
</div>

<footer>
Rodapé da página
</footer>
</div>
</body>
</html>
Saída
Criando o estilo.css e estilizando as tags body e a div container
Dentro do projeto site, crie a pasta css. Dentro da pasta css crie o arquivo home.css. Digite o
código abaixo:
Código home.css
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(#fff, #434343);
.container {
background: #fff;
height: 60vw;
width: 90%;
margin: auto;
position: relative;
}
Saída
Estilizando o cabeçalho (header) da página no home.css
Agora vamos arrumar o cabeçalho. Ainda no arquivo home.css acrescente os códigos abaixo:
Código completo home.css
* {
margin: 0;
padding: 0;
}
body {
.container {
background: #fff;
height: 60vw;
width: 90%;
margin: auto;
position: relative;
}
header {
background: #fff;
width: 100%;
height: 10vw;
position: relative;
padding: 20px;
display: flex;
flex-flow: wrap;
}
header .imagem1 {
position: absolute;
top: 0px;
left: 0px;
padding: 20px;
}
header .imagem2 {
width: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
}
Saída
Estilizando o menu (nav) da página no home.css
Agora vamos estilizar o Menu. Acrescente no home.css o código abaixo:
Código completo home.css
* {
margin: 0;
padding: 0;
}
body {
}
.container {
background: #fff;
height: 60vw;
width: 90%;
margin: auto;
position: relative;
}
header {
background: #fff;
width: 100%;
height: 10vw;
position: relative;
padding: 20px;
display: flex;
flex-flow: wrap;
}
header .imagem1 {
position: absolute;
top: 0px;
left: 0px;
padding: 20px;
}
header .imagem2 {
width: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
}
nav {
background: #000000;
height: 80px;
width: 100%;
text-align: center;
position: -webkit-sticky;
z-index: 999;
}
nav ul li {
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
Saída
Estilizando os cards (. row e .card) da página no home.css
Agora vamos estilizar os cars. Acrescente no home.css o código abaixo:
Código completo do home.css
* {
margin: 0;
padding: 0;
}
body {
}
.container {
background: #fff;
height: 60vw;
width: 90%;
margin: auto;
position: relative;
}
header {
background: #fff;
width: 100%;
height: 10vw;
position: relative;
padding: 20px;
display: flex;
flex-flow: wrap;
}
header .imagem1 {
position: absolute;
top: 0px;
left: 0px;
padding: 20px;
}
header .imagem2 {
width: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
nav {
height: 80px;
width: 100%;
text-align: center;
z-index: 999;
nav ul li {
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
.row {
display: flex;
position: relative;
text-align: center;
margin-top: 40px;
}
.card {
border-radius: 5px;
box-shadow: 7px 7px 13px 0px rgba(50, 50, 50, 0.22);
padding: 30px;
margin: 20px;
width: 400px;
transition: all 0.3s ease-out;
}
.card:hover {
transform: translateY(-5px);
cursor: pointer;
}
.card p {
color: #a3a5ae;
font-size: 16px;
}
.image {
max-width: 150px;
max-height: 150px;
}
.azul {
border-left: 3px solid #4895ff;
}
.verde {
border-left: 3px solid #3bb54a;
}
.vermelho {
border-left: 3px solid #b3404a;
}
Saída
Estilizando o rodapé (footer) e as configurações de tela no @media
Agora vamos acrescentar os códigos do footer e as verificações de tamanho do @media
* {
margin: 0;
padding: 0;
}
body {
.container {
background: #fff;
height: 60vw;
width: 90%;
margin: auto;
position: relative;
}
header {
background: #fff;
width: 100%;
height: 10vw;
position: relative;
padding: 20px;
display: flex;
flex-flow: wrap;
}
header .imagem1 {
position: absolute;
top: 0px;
left: 0px;
padding: 20px;
}
header .imagem2 {
width: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
nav {
height: 80px;
width: 100%;
text-align: center;
z-index: 999;
nav ul li {
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
.row {
display: flex;
position: relative;
text-align: center;
margin-top: 40px;
}
.card {
border-radius: 5px;
padding: 30px;
margin: 20px;
width: 400px;
}
.card:hover {
cursor: pointer;
}
.card p {
color: #a3a5ae;
font-size: 16px;
}
.image {
max-width: 150px;
max-height: 150px;
}
.azul {
}
.verde {
}
.vermelho {
}
footer {
margin-top: 40px;
bottom: 0;
background-color: blue;
color: #FFF;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
}
@media (max-width: 1200px) {

.row{
flex-direction:column;
}
header .imagem1 {
display: none;
}
header .imagem2 {
display: none;
}
.container{
height: 150vw;
}
}
Saída
Criação do capitao.html
Crie o arquivo capitao.html ele é igual ao home.html, com a saída dos cards e a entrada do
main
Código completo do capitao.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
scale=1.0">
<link rel="stylesheet" href="../css/home.css">
<title>capitao</title>
</head>
<body>

<header>
<img src="../img/fatec.png" alt="">
</div>
<img src="../img/cps.png" alt="">
</div>
</header>

<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="capitao.html">Capitão</a></li>
<li><a href="#">Homem de ferro</a></li>
<li><a href="#">Thor</a></li>
<li><a href="#">Hulk</a></li>
</ul>
</nav>

<h1 align="center">Capitão América</h1>
<main>
<div class="imagem">
<img src="../img/capitao.png" alt="">
</div>
<div class="conteudo">
<p>
O Capitão América é a identidade heroica de Steve
Rogers.
Além disso, é considerado como o primeiro Vingador.
Em suma,
o personagem nasceu em 1941,
na revista Captain America Comics #1. Ademais, o
super herói foi
criado por Joe Simon e Jack Kirby, dos estúdios da
Marvel Comics.
O Capitão fez parte de um movimento patriota que
trazia super-heróis,
principalmente, atuando na Segunda Guerra Mundial.
Dessa forma, Steve
atuava ao lado de Bucky Barnes, seu melhor amigo, no
combate contra nazistas.
No entanto, consequentemente, fez com que sua
popularidade ficasse reduzida ao fim da guerra
</p>
</div>
</main>

<footer>
Rodapé da página
</footer>
</div>
</body>
</html>
Estilizando a pag principal (main) home.css
Acrescente as configurações da tag main no home.css
* {
margin: 0;
padding: 0;
}
body {
.container {
background: #fff;
height: 60vw;
width: 90%;
margin: auto;
position: relative;
}
header {
background: #fff;
width: 100%;
height: 10vw;
position: relative;
padding: 20px;
display: flex;
flex-flow: wrap;
}
header .imagem1 {
position: absolute;
top: 0px;
left: 0px;
padding: 20px;
}
header .imagem2 {
width: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
nav {
height: 80px;
width: 100%;
text-align: center;
z-index: 999;
nav ul li {
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
.row {
display: flex;
position: relative;
text-align: center;
margin-top: 40px;
}
.card {
border-radius: 5px;
padding: 30px;
margin: 20px;
width: 400px;
}
.card:hover {
cursor: pointer;
}
.card p {
color: #a3a5ae;
font-size: 16px;
}
.image {
max-width: 150px;
max-height: 150px;
}
.azul {
}
.verde {
}
.vermelho {
}
footer {
margin-top: 40px;
bottom: 0;
background-color: blue;
color: #FFF;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
}
@media (max-width: 1200px) {

.row{
flex-direction:column;
}
header .imagem1 {
display: none;
}
header .imagem2 {
display: none;
}
.container{
height: 150vw;
}
}
main{
display: flex;
}
main .imagem{
margin-left: 100px;
}
main .conteudo{
text-align: justify;
margin-right: 200px;
padding-left: 120px;
}
Saída
Atividade
Termine o link dos outros personagens

BOOTSTRAP
6.53
Professor: Mário da Silva de Jesus

O QUE É O BOOTSTAP?
Bootstrap é um framework front-end

que fornece estruturas de CSS para a
criação de sites e aplicações
responsivas de forma rápida e simples.
Além disso, pode lidar com sites de
desktop e páginas de dispositivos móveis
da mesma forma. 2
O QUE É O BOOTSTAP?
O Bootstrap é um dos mais populares

framework que une o HTML, CSS e o JS
para desenvolvimento responsivo de
aplicações.
3
HISTÓRIA
Originalmente, o Bootstrap foi desenvolvido para o
Twitter por um grupo de desenvolvedores liderados por
Mark Otto e Jacob Thornton, logo e se tornou uma das
estruturas de front-end e projetos de código aberto mais
populares do mundo.
4
HISTÓRIA
O primeiro contato que o público teve com o bootstrap

foi em um evento chamado Hackweek que ocorreu entre os
dias 22 e 29 de outubro de 2010.
Em Agosto de 2011 foi lançado o Twitter Bootstrap.
Em Fevereiro de 2012 foi o projeto mais popular no
GitHub
5
COMO O BOOTSTRAP É DISTRIBUÍDO?
Geralmente, o Bootstrap é distribuído usando o site

oficial e pelo npm. Você também pode criar sua própria
distribuição usando o código-fonte, ou por meio da própria
rede de distribuição de conteúdo conhecida como CDN do
Bootstrap.
Um CDN permite que um site da web recupere com
frequência arquivos públicos usados de servidores
distribuídos globalmente.
6
VIA CDN
https://getbootstrap.com/
7
VIA CDN
Index.html
8
VIA CDN
Saída
9
VIA NPM
10
VIA NPM
VIA NPM
Index2.html
VIA NPM
Saída
13
VIA DOWNLOAD
14
VIA DOWNLOAD
Extrair o arquivo
Renomear para bootstrap
15
VIA DOWNLOAD
Arraste essa pasta para seu projeto no VS Code
16
VIA DOWNLOAD
Index3.html
17
VIA DOWNLOAD
Saída
18
ESTRUTURA DO BOOTSTRAP
19
DOCUMENTAÇÃO
20
INSERINDO OS BOTÕES NO INDEX3.HTML
21
SAÍDA
22
CLASS CONTAINER BOOTSTRAP
O container é um componente do Bootstrap que garante que o seu
layout vai ficar alinhado corretamente na página. Ele pode definir as
margens laterais da página, ou deixar sem margens e, também, posiciona
o conteúdo no centro do browser.
23
24
SAÍDA
25
CLASS CONTAINER-FLUID BOOTSTRAP
Já o container fluído também cria uma área responsiva, mas que
ocupa toda a tela (também conhecido como full width).
26
27
SAÍDA
28
CRIANDO UM SITE COM BOOTSTRAP
29
CABEÇALHO
30
ESTRUTURANDO O PROJETO
CRIE A PASTA SITE_BOOTSTRAP, CRIE A PASTA IMG,

ARRASTE ALGUMAS IMAGENS, COLOQUE A PASTA DO
BOOTSTRAP, CRIE O INDEX.HTML.
INDEX.HTML
NAVBAR(MENU)
NAVBAR(MENU)
SAÍDA
CARROSSEL
CARROSSEL
SAÍDA
CARDS
CARDS
SAÍDA
CONTEÚDO
CONTEÚDO
SAÍDA
FOOTER
RODAPÉ
SAÍDA
ÂNCORAS
LINKS
MENU
Os links do menu vão

procurar os IDs das tags
SAÍDA
CRIANDO MODAL PARA CONTEÚDO
INTERNO
MODAL
Colar abaixo da tag

<p> do primeiro card
MODAL
Arrume o botão inicial

Coloque a imagem e o
Texto dentro do
Modal-body
SAÍDA
IMAGEM RESPONSIVA
• As imagens no Bootstrap são responsivas com .img-fluid.

Isso se aplica max-width: 100%; à height: auto; imagem
para que ela seja dimensionada com a largura do pai.
1/7/20XX Título da apresentação 55

THUMBNAIL (MINIATURA)
• Você pode usar .img-thumbnail para dar a uma imagem uma

aparência de borda arredondada de 1px.

ALINHANDO IMAGENS
• Alinhe imagens com as classes flutuantes auxiliares ou classes de alinhamento
de texto . As imagens podem ser centralizadas usando a classe .mx-auto.
• Link para mais informações: https://getbootstrap.com/docs/5.3/content/images/

TABELA SIMPLES
SAÍDA
TABELA COM INTERCALAÇÃO DE CORES
SAÍDA
TABELA COM FOCO NO MOVIMENTO DO MOUSE
SAÍDA
TABELA COM LINHAS COLORIDAS
SAÍDA
TABELA ESCURA
SAÍDA
TABELA COM CABEÇALHO ESCURO E LINHAS COLORIDAS
SAÍDA
TABELA ESCURA COM FOCO NA LINHA
SAÍDA
TABELA COM CORES VIVAS
SAÍDA
BOTÃO COM LINK PARA OUTRAS PÁGINAS
MOBILE FIRST
Mobile First é um conceito aplicado em projetos web onde o foco inicial da arquitetura e
desenvolvimento é direcionado aos dispositivos móveis.
Mobile First é um conceito aplicado em projetos web onde o foco inicial da arquitetura e
desenvolvimento é direcionado aos dispositivos móveis e em seguida para os desktops. A
técnica tem se popularizado cada vez mais entre os profissionais de marketing e tecnologia.
VALIDANDO CAMPOS BOOTSTRAP
SISTEMA DE GRIDS NO BOOTSTRAP

CUSTOMIZANDO GRIDS
• Por padrão o sistema de grid do bootstrap utiliza 12 colunas ao
longo da página. Essas colunas podem ser divididas, mas você não
é obrigado a usar as 12, você pode agrupar colunas. Veja:

CUSTOMIZANDO GRIDS
• Regras para usar as grids do bootstrap:
• Toda classe “row” deve ser criada no interior de uma classe

bootstrap (container ou container-fluid).
• Toda classe “col-xx-xx”, deve estar dentro de uma classe “row”. As

colunas agrupam o conteúdo, portanto devem ser os únicos
elementos da classe “row”

BREAKPOINTS
• Breakpoints significa pontos de quebra. Este termo é utilizado em design
responsivo para definir a medida de largura na janela do navegador ou
seja, ele faz a adaptação do layout na tela.
• A principal função do bootstrap é aplicar responsividade, ou seja, o
conteúdo deve se ajudar de acordo com dispositivo(viewport). Para isso
ele possui 4 classes de Grid: xs, sm, md e lg.
• col-xs (telefone) define coluna com viewport menor que 768px;
• col-sm (tablet) define coluna com viewport de 768 até 991px;
• Col-md (desktop) define coluna com viewport de 991 até 1199px;
• col-lg (telas grandes) define coluna com viewport maior que 1199px;

CÓDIGO DA INDEX
SAÍDA
CRIE O ESTILO.CSS
DENTRO DO PASTA
SITE
SAÍDA (DIMINUA O TAMANHA DO SEU SITE)
CONSTRUINDO LAYOUT
Vamos imaginar uma situação abaixo onde esse site será utilizando em uma tela grande com logo 3,
nav 9, carrossel 12, imagem 1,2 e 3 com 4, depoimento com 12, twitter e facebook com 6 e
rodapé com 12
3 9
12
4 4 4
12
6 6
12
CONSTRUINDO O SITE
SAÍDA
CONTINUAÇÃO DO SITE
SAÍDA
VEJA UM EXEMPLO COM ADAPTAÇÃO DE TELA:
RESULTADO
SAÍDA
https://startbootstrap.com/
OBRIGADO
Mário da Silva de Jesus
Analista.mario@gmail.com

Programação web
Professor: Mário da Silva de Jesus E-mail: analista.mario@gmail.com
JavaScript (História)
- A primeira coisa que precisamos saber: JavaScript não tem nada a ver com Java. A única coisa parecida entre eles é
o nome.
- Em maio de 1995, Brendan Eich, que trabalhava na Netscape, desenvolveu uma linguagem de
programação em apenas 10 dias. A linguagem era bem simples, com o intuito de atrair novos
programadores. O nome dessa linguagem era Mocha, mas logo foi alterado para Livescript e, por
fim, JavaScript.
- LiveScript foi o nome oficial da linguagem quando ela foi lançada pela primeira vez na versão beta do
navegador Netscape 2.0, em setembro de 1995.
- O Java foi criado em 1991 e comercializado em maio de 1995 pela Sun Microsystems, que prometia
revolucionar o modo de programar.
- Para aproveitar o marketing, o LiveScript teve seu nome alterado para Javascript em 4 de dezembro de
1995. Isso causou uma grande confusão que existe até hoje por conta da semelhança dos nomes, muitos
pensam que é a mesma coisa, ou que o JavaScript é uma versão mais simples do Java.
ECMAScript
- Para padronizar os processos de mercado visando a interpretação dos

navegadores o JavaScript, foi enviado para a ECMA (European Computer
Manufactures Association) entre os anos de 1996 e 1997.
- A ECMA padronizou a linguagem Javascript e deu, a esta padronização, o nome
de ECMAScript.
- ECMAScript 6, ou ECMAScript 2015, como também é conhecido, é tão somente a
padronização da linguagem JavaScript que conhecemos há tanto tempo.
- Obs. O nome JavaScript e ECMAScript definem a mesma linguagem, então
podemos continuar chamando de JavaScript mesmo
Características da Linguagem
1-) O código fonte javascript é incluído no próprio arquivo HTML.
2-) É uma linguagem interpretada (também chamada de linguagem de script).
Isso significa que os comandos javascript são executados um a um diretamente por um interpretador, sem que
haja necessidade de compilação como nas linguagens de programação convencionais. No caso do javascript, quem
faz o papel do interpretador é o navegador do usuário que, ao receber um arquivo html, executa o script na medida
em que encontra os comandos javascript dentro do código HTML.

Nasce o LiveScript
Criado em 10 dias
Por Brendan Eich

que na época trabalhava para Netscape
LiveScript foi alterado para
JavaScript
Na época o Java estava em alta
Não é
Java
O Java é uma linguagem de

programação que precisa ser
Servidor web
compilada e executada em
servidores web, ou seja no
backend ou server side.
(Barreiros, 2018)
JavaScript
O JavaScript é uma
linguagem de programação
executada no navegador, ou
seja no frontend ou client Navegador
side. (Developer Mozilla 2005 <html></html>
à 2020)
Ambiente javascript
Browser (ou) Navegador

DevTools
F12 ou Inspect ou Inspecionar Elementos ou CTRL+ALT+I
É a nossa principal aliada

durante o desenvolvimento
⚔️
DevTools
Elements: Inspeciona os elementos HTML e os estilos
DevTools
Console: exibe diagnósticos do código e páginas, interage com o javascript

da página, executa qualquer javascript digitado
Exercício 1
1. Abra uma nova aba no navegador
(Chrome)
2. Abra o site google.com.br
3. Abra o DevTools: F12
4. Abra a aba Console do DevTools
5. Digite no Console a palavra: document
6. Depois de digitar aperte a tecla enter
document
É um objeto
que dá acesso
à todos
elementos
da página
https://developer.mozilla.org/pt-BR/docs/Web/API/document
Exercício 2
1. Digite no console:
document.write(`oi`)
2. Observe o que aconteceu com a página;
3. Digite document novamente;
4. Observe como ficou a estrutura dos
elementos.
Exercício 3
Digite no console:
document.title
document.all
O que estes comandos retornam?
window
O objeto window representa uma janela que contém um

elemento DOM (DOM é a interface entre a linguagem Javascript e
os objetos do HTML); a propriedade document aponta para o
documento DOM document carregado naquela janela.
https://developer.mozilla.org/pt-BR/docs/Web/API/Window
Exercício 4
Digite no console:
window
O que este comando retornou?
window
É um objeto que dá acesso à janela do
navegador
Exercício 5
Digite no console:
window.alert(`Olá mundo!`)
window.confirm(`Tem certeza?`)
Crie a pasta projetos_js
Abra essa pasta no
visual studio code
Crie a pag01.html
Tipos de variáveis
- Quando falamos em tipos de variáveis, temos as linguagens chamadas de fortemente tipadas e

fracamente tipadas. Em linguagens fortemente tipadas, definimos o tipo da variável no momento de sua
criação. Exemplos de linguagens do tipo: Java; C; C++. Em linguagens fracamente tipadas, não
precisamos definir o tipo da variável, ela é tipada automaticamente quando recebe um valor. Exemplos
de linguagens do tipo: Python; Ruby; Javascript.
Int (inteiro) e float (real)
- Int - Variáveis com valores inteiros.
var idade = 17;
var graus = -3;
var pontos = 0;
var numeroGrande = 2000009283;
- Float - Variáveis com ponto flutuante ou casas decimais.

var peso = 32.59345;
var PI = 3.14;
var meu_saldo = -1034.32
Observação: em linguagens de programação utiliza-se "." (ponto final) para separar casas decimais em
vez da ',' (vírgula).
String (texto) e boleano (V ou F)
 String - Variáveis de texto, normalmente chamada de "cadeia de caracteres". Os valores desse tipo são
atribuídos utilizando aspas duplas (") ou aspas simples (') como delimitador.
 var nome = "Gabriel Mendonça";
var data_nascimento = "17 de Junho de 1988";
var email = "gabriel@host2.com.br";
var tempo = "20s";
 Observação: Tudo o que é declarado entre os delimitadores (") ou (') é entendido como parte da string,
mesmo que sejam números.
 Booleanos - Tipo de dado de dois valores: "true" (verdadeiro) ou "false" (falso).
 var verdadeiro = true;
var verdadeiro2 = 1;
var falso1 = false;
var false2 = 0;
var falso3 = null
 Observação: Apesar dos valores true e false representarem, respectivamente, os valores "verdadeiro" e "falso",
pode-se utilizar outros valores para essa representação, como exemplificado acima.
Concatenar
O operador + também tem outra função além de somar números, ele

serve para concatenar Strings.
Isso significa que podemos usá-lo para juntar duas ou mais Strings em
uma só. Veja o exemplo
“Olá ” + “ - “ + “ João”;
Prompt e Confirm
prompt() exibe uma caixa de diálogo com uma mensagem opcional solicitando ao usuário a entrada de algum texto.
O método confirm() é usado para mostrar uma caixa de confirmação, com uma mensagem especificada, e botões
OK e Cancelar. Retorna True se o usuário clicar em OK, e False se clicar em Cancelar.
pag02.html
Operadores relacionais de Comparação
 Usamos o (==) para comparar se os valores são iguais independente do tipo:
1==‘1’ //resultado verdadeiro
 Usamos o (!=) para comparar se os valores são diferentes independente do tipo:
4!=1 //resultado verdadeiro
 Usamos o (===), ele só retorna verdadeiro se o tipo e o valor forem exatamente iguais.
3===‘3’ //resultado falso 3===3 //resultado verdadeiro
 Usamos o (!==), ele só retorna verdadeiro se o tipo e o valor forem exatamente diferentes.
3!==‘3’ //resultado verdadeiro 3!==3 //resultado falso 3!==4 //resultado verdadeiro

Controles de Fluxo
São comandos da linguagem que permitem desviar o fluxo do programa, dependendo de um teste.
Tipos de if
Crie a pag03.html e teste os itens abaixo

 Encadeado
 Simples  Composto
Crie a pag04.html
Saída no console.log
Switch case e conversão de dados
- O comando Switch Case é do tipo Seleção/Condição,

como o IF: diante de uma condição ele seleciona o que
será feito.
- Podemos converter entre tipos de dados usando funções

específicas no JavaScript, como os
métodos parseInt() e parseFloat(), entre outras.
Crie a pag05.html
Operadores Aritméticos
Os operadores vão nos permitir fazer operações matemáticas, de comparação e lógicas. Para as
operações matemáticas básicas são utilizados os seguintes, adição(+), subtração(-), multiplicação(*) e
divisão(/).
Resto da divisão
Retorna o resto da divisão.

Crie a
pag06.html
Operador Ternário (?:)
- O operador ternário funciona com o mesmo conceito do if e else, porém,

a única diferença é que precisamos devolver um valor após o
teste estritamente em uma única linha. Ele recebe três valores e serve
para verificar uma condição.
3>1 ? ‘É maior’ : ‘É menor’ // retorna a String “É maior”
- Podemos dividir em três partes:

(3>1) ? (‘É maior’) : (‘É menor’ )
Crie a
pag07.html
Laços de repetição
Incremento (++)
Adiciona um a variável. Se utilizado antes(++x) adiciona um retorno a um valor, caso o operador seja
utilizado depois da variável (x++) retorna o valor e adiciona um.
var x=1;
x++; //resultado 2
++x; // resultado 2
Decremento (--)
Subtrai um a variável. Se utilizado antes(--x) subtrai um retorno a um valor, caso o operador seja utilizado
depois da variável (x--) retorna o valor e subtrai um.
var x=2;
x--; //resultado 1
--x; // resultado 1
Var e Let
Toda variável que foi declarada com var ela é global
var teste=4;
O let declara variáveis como local
let teste2=8;
FOR - Crie a pag08.html
.
.
.
(while) Crie a pag09.html
.
.
.
(do while) Crie a pag10.html
Procedimento
Procedimento são ações que podemos definir dentro de um escopo(corpo) e ela não possui retorno. Ela é
composta de:
function nome_função (parâmetro){corpo da função}
Exemplo:
function nome(){
//corpo
//invocação da função
nome();
Funções
Função são ações que podemos definir dentro de um escopo(corpo), ela possui a instrução return que retorna a
informação para o nome da função. Ela é composta de:
function nome_função (parâmetro){corpo da função com return}
Exemplo:
function nome(){
//corpo
return
//invocação da função
nome();
Crie a pag11.html
Outro exemplo
Crie a pag12.html
Modificando documento HTML
Modicando conteúdos html com js
document = referência toda a sua página.
element= referência um objeto com o ID especificado que estiver

contido neste documento.
pag13.html
onclick() e onblur() do html
onClick é acionado quando alguém clica no elemento
onBlur é acionado quando o elemento perde o foco

Tratamento de erro
O Comando throws, PARA a execução do try e

manda a instrução diretor para o catch
isNaN signica não

pag14.html
pag15.html
Mudando a cor dos elementos
O comando style muda a cor de um determinado elemento
pag16.html
Elementos externos
JavaScript externo
Crie o arquivo externo.js

Crie o pag17.html
JavaScript externo pag18.html
JavaScript externo (teste.js)
Saída
pag19.html
script.js
pag20.html
scripts.js
Como inserir texto sem sobrepor o anterior
- createTextNode(dados) = Esse método cria um nó

de textos e os dados do parâmetro gera uma
sequência contendo os dados a serem colocados no
nó de texto.
Pag21.html
Saída
Próximo exemplo com repetição
Pag22.html
Saída
Vetores
Vetores
- Um vetor , ou arranjo (array), é uma estrutura de dados que

armazena uma sequência de objetos, todos do mesmo tipo, em
posições consecutivas da memória
adicionando itens do vetor js
Removendo itens do vetor js
Formulário, vetor e arquivo externo
Pag23.html
Crie o arquivo funcoes.js
Saída
União de vetores
vetor01.html
Saída
vetor01.html
Saída
Spread operation
...
vetor01.html
Saída
mesclando de vetores com
concat
vetor02.html
Saída
streap operation
vetor02.html
Saída
concat
vetor02.html
Saída
Explicação FrameWork
Tipos de variáveis
pag24.html
pag25.html
Saída
Pag26.html
Pag27.html
Referências
 https://www.w3schools.com/js/default.asp
Exemplo de site boostrap
Código
<!DOCTYPE html>
<html lang="pt-br">
<head>
scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Site</title>
</head>
<body>

<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="Logo" width="30" height="24"
class="d-inline-block align-text-top">Home</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-
controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">linguiça</a>
<a class="nav-link" href="#">Fritas</a>
<a class="nav-link" href="#">Prato</a>
<a class="nav-link" href="#">Salada</a>
</div>
</div>
</div>
</nav>
</div>
</div>

<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white">
<h1 class="display-4 fw-bolder"> Restaurante </h1>
<p class="lead fw-normal text-white-50 mb-0"> Venda de Pratos on-
line </p>
</div>
</div>
</header>

<h1 class="text-center">Pratos</h1>

<section class="py-0">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4
justify-content-center">


<div class="col mb-5">
<div class="card h-100">

<img class="card-img-top" src="img/linguiça.png" alt="..." />

<div class="card-body p-4">
<div class="text-center">

<h5 class="fw-bolder">Linguiça</h5>

R$40.00 - R$80.00
</div>
</div>

<div class="card-footer p-4 pt-0 border-top-0 bg-
transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-
auto" href="#">Ver mais opção</a></div>
</div>
</div>
</div>



<div class="badge bg-dark text-white position-absolute"
style="top: 0.5rem; right: 0.5rem">Promoção</div>

<img class="card-img-top" src="img/fritas.png" alt="..."
/>


<h5 class="fw-bolder">Fritas</h5>

<div class="d-flex justify-content-center small text-
warning mb-2">
<div class="bi-star-fill">Fritas com sal</div>
<div class="bi-star-fill"></div>
</div>

<span class="text-muted text-decoration-line-
through">R$20.00</span>
R$18.00
</div>
</div>

transparent">
<div class="text-center"><a class="btn btn-outline-dark
mt-auto" href="#">Adicionar produto</a></div>
</div>
</div>
</div>



<img class="card-img-top" src="img/prato.png" alt="..." />

<h5 class="fw-bolder">Prato Feito</h5>

R$25.00
</div>
</div>
transparent">
mt-auto" href="#">Adicionar Produto</a></div>
</div>
</div>
</div>


<img class="card-img-top" src="img/salada.png"
alt="..." />


<h5 class="fw-bolder">Popular Item</h5>

<div class="d-flex justify-content-center
small text-warning mb-2">
</div>

$40.00
</div>
</div>

transparent">
<div class="text-center"><a class="btn btn-
outline-dark mt-auto" href="#">Add to cart</a></div>
</div>
</div>
</div>

<div class="badge bg-dark text-white position-
absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<img class="card-img-top" src="img/linguiça.png"
alt="..." />
<h5 class="fw-bolder">Sale Item</h5>
<span class="text-muted text-decoration-
line-through">$50.00</span>
$25.00
</div>
</div>
transparent">
</div>
</div>
</div>
<img class="card-img-top" src="img/fritas.png"
alt="..." />
<h5 class="fw-bolder">Fancy Product</h5>
$120.00 - $280.00
</div>
</div>
transparent">
outline-dark mt-auto" href="#">View options</a></div>
</div>
</div>
</div>

<div class="badge bg-dark text-white position-
absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<img class="card-img-top" src="img/fritas.png"
alt="..." />
<h5 class="fw-bolder">Special Item</h5>
</div>
<span class="text-muted text-decoration-
line-through">$20.00</span>
$18.00
</div>
</div>
transparent">
</div>
</div>
</div>
<img class="card-img-top" src="img/prato.png"
alt="..." />
<h5 class="fw-bolder">Popular Item</h5>
<div class="bi-star-fill">dsadsad</div>
</div>
$40.00
</div>
</div>
transparent">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="row">
<img src="img/facebook.png" class="img-fluid" width="30"
height="24" >
</div>
<img src="img/twitter.png" class="img-fluid" width="30"
height="24" >
</div>
</div>
</div>
<footer class="py-5 bg-dark">

<p class="m-0 text-center text-white">Copyright © Your
Website 2023</p>
</div>
</footer>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Site com imagem de fundo
<!DOCTYPE html>
<html lang="pt-br">
<head>
scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<style>
/*Imagem de fundo no site */
body {
background: url('./img/fundo.jpg');
background-repeat: no-repeat;
background-size: cover;
max-width: 100wh;
padding: 0;
margin: 0;
}
</style>
<title>Site</title>
</head>
<body>

<div class="row">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="Logo" width="30" height="24"
class="d-inline-block align-text-top">Home</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-
controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">linguiça</a>
<a class="nav-link" href="#">Fritas</a>
<a class="nav-link" href="#">Prato</a>
<a class="nav-link" href="#">Salada</a>
</div>
</div>
</div>
</nav>
</div>
</div>

<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white">
<h1 class="display-4 fw-bolder"> Restaurante </h1>
<p class="lead fw-normal text-white-50 mb-0"> Venda de Pratos on-
line </p>
</div>
</div>
</header>


<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4
justify-content-center">



R$40.00 - R$80.00
</div>
</div>
transparent">
</div>
</div>
</div>


<img class="card-img-top" src="img/fritas.png" alt="..."
/>
warning mb-2">
</div>
R$18.00
</div>
</div>
transparent">
</div>
</div>
</div>


R$25.00
</div>
</div>
transparent">
mt-auto" href="#">Adicionar Produto</a></div>
</div>
</div>
</div>


<img class="card-img-top" src="img/salada.png" alt="..." />
<h5 class="fw-bolder">Salada</h5>
R$70.00
</div>
</div>
transparent">
auto" href="#">Adicionar Produto</a></div>
</div>
</div>
</div>



R$40.00 - R$80.00
</div>
</div>
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
</div>
</div>
</div>


<img class="card-img-top" src="img/fritas.png" alt="..." />
warning mb-2">
</div>
R$18.00
</div>
</div>
transparent">
</div>
</div>
</div>

R$25.00
</div>
</div>
transparent">
</div>
</div>
</div>


<img class="card-img-top" src="img/salada.png" alt="..." />
<h5 class="fw-bolder">Salada</h5>
R$70.00
</div>
</div>
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
</div>
</div>
</div>
</section>
<div class="row">
<img src="img/facebook.png" class="img-fluid" width="30"
height="24" >
</div>
<img src="img/twitter.png" class="img-fluid" width="30"
height="24" >
</div>
</div>
</div>
<footer class="py-5 bg-dark">

<p class="m-0 text-center text-white">Copyright © Your
Website 2023</p>
</div>
</footer>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Veja o site no celular

Desenvolvimento Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Desenvolvimento Web

Enviado por

Direitos autorais:

Formatos disponíveis

Professor Mário de Jesus

surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada.

significa World Wide Web Consortium e é usada para definir o

textos para uma melhor exemplificação de um determinado assunto. São

recursos extremamente usados, inclusive quando nem imaginamos que ele

HTML é feito com listas.

As tags usadas são <dl>, <dt> e <dd>.

• INTRODUÇÃO • MODELOS DE CONTEUDO

• HTML é uma abreviação de Hypertext

• Desenvolvido originalmente por Tim

• Ganhou popularidade após o

• Agora as tecnologias foram divididas em módulos. Isso quer dizer que a

• Isso causa muita incompatibilidade nos navegadores atualmente.

HTML Versões anteriores

• Existem dois tipos de LINK no HTML, sendo a tag <A> e a <LINK>.

A tag <a> é utilizada para criar links com outras páginas

A tag <link> é utilizada importar estilos CSS.

<div> Elemento de bloco </div>

• Esta categoria diz respeito aos títulos da página.

Player padrão HTML5 no Google Chrome

Player CODEBASEHERO de músicas

<audio src=”mus.oga” controls=”true” autoplay=”true” />

O elemento controls define se controle de áudio, com botões de play, pause,

Player padrão HTML5 no Google Chrome

Player personalizado utilizando CSS3 e JS

<video controls=”true” autoplay=”true” width=”400”

O navegador procurará o primeiro elemento <source> onde a consulta de mídia corresponde

Este elemento define um formulário. É um elemento

Prof° Mário da Silva de Jesus

Todos os H1 estão vermelhos

O h1 do menu-site vai ficar roxo

Execute a página index.html

A tag a vai ficar laranja dentro do menu

O H1 do conteúdo vai ficar azul

As caixas vão ficar verdes

A primeira caixa vai ficar

Prof° Mário da Silva de Jesus

Para resolver isso devemos acrescentar o box-sizing: border-box,

Prof° Mário da Silva de Jesus

Semântica, tela de login e menus

Prof° Mário da Silva de Jesus

Crie a pasta site e abra ela com o visual studio code.

Dentro da pasta site crie a pasta img e cole as imagens ao lado

Dentro da raiz do projeto crie o arquivo index.html. Insira o código abaixo:

<link rel="stylesheet" href="css/style.css">

<img src="img/pokedex.png" alt="" class="pokedex">

Aula css flexbox

Column: posicionar os itens um embaixo do outro.

No flex-direction:columm o main axis é na vertical e o cros axis na horizontal

Flex-start: Alinha os itens no início do container

Flex-end: Alinha os itens no fim do container

space-between (espaço entre): Distribui os itens igualmente no container. O espaço entre as

Flex-start: Alinha os itens no início do container

Center: Alinha os itens no centro do container

nowrap: Ele não permite a quebra de linha.

Figura 1 - sem wrap

Figura 2 - Com Wrap

Temos também o wrap-reverse, que manda os itens para a linha de cima

Order: define a ordem dos elementos no container

Professor: Mário de Jesus

<section class="card contact">

<section class="card shop">

<section class="card rei">

main.cards section.card .icon {