Sumário

1 Conhecendo html5 e css3................................................................................................................ 3

1.1 O html e suas mudanças................................................................................................................. 3..7
1.2 Organizando pastas........................................................................................................................ 8..10

2 Conhecendo Brackets e primeiras Tag’s........................................................................................ 11

2.1 Brackets............................................................................................................................................ 11..12
2.2 Estrutura básica........................................................................................................................... 12..14
2.3 Textos e títulos................................................................................................................................. 15
2.4 Listas............................................................................................................................................. 16
2.5 Estrutura do site.............................................................................................................................. 17..19

3 Inserindo imagens,Link’s e Tabelas............................................................................................... 20

3.1 Imagens........................................................................................................................................... 20
3.2 Link’s................................................................................................................................................ 21..24
3.3 Tabelas............................................................................................................................................. 25..26

4 Primeiros passos, dividindo site.................................................................................................... 27

4.1 Dividindo site................................................................................................................................... 27
4.2 Preenchendo seções..................................................................................................................... 28..32
4.3 Revisando código............................................................................................................................ 33
4.4 Criando formulário....................................................................................................................... 34..37

5 Linkando elementos com id e começando css.............................................................................. 38

5.1 Criando links.................................................................................................................................... 38..39
5.2 Trabalhando com css....................................................................................................................... 40..45

6 Formatando menu de navegação.................................................................................................. 46

6.1 Incluindo estilos e fonts.................................................................................................................. 46..49
6.2 Formatando menu.......................................................................................................................... 50..56

7 Formatando Header, sobre e jogos......................................................................................... 57

7.1 Formatando Header........................................................................................................................ 57..59
7.2 Formatando seção sobre................................................................................................................ 59..62
7.3 Formatando seção jogos........................................................................................................ 63..66

8 Finalizando e configurando full screen................................................................................... 67

8.1 Formatando portfólio............................................................................................................. 67..68
8.2 Formatando seção contato................. .................................................................................. 69
8.3 Formatando footer................................................................................................................. 69..70
8.4 Configurando full screen................. ...................................................................................... 71..79

1
 9 Hospedando site e conhecendo Dreamweaver................................................................. 80
9.1 Conhecendo Dreamweaver............................................................................................... 80..84
9.2 Hospedagem..................................................................................................................... 84..85
9.3 Subindo arquivos............................................................................................................... 86..91
9.4 Configurando arquivos...................................................................................................... 92..96

10 Conhecendo jQuery.................................................................................................................. 97
10.1 O que é jQuery.......................................................................................................................... 97
10.2 Aplicando jQuery...................................................................................................................... 98..104

11 Slides com jQuery...................................................................................................................... 105

11.1 Organizando arquivos............................................................................................................. 105..107
11.2 Adicionando as imagens...................................................................................................... 108..109
11.3 Formatando botões................................................................................................................. 110..113

12 Enviando e-mail com php....................................................................................................... 114

12.1 Conhecendo php...................................................................................................................... 114
12.2 Construindo formulário........................................................................................................... 115
12.3 Formatando com css............................................................................................................... 116..118
12.4 Criando página php.................................................................................................................. 119..124
12.5 Script de redirecionamento de página................................................................................... 125
12.6 Testando a aplicação.............................................................................................................. 126..128

2
 O HTML E SUAS MUDANÇAS

Quando o HTML4 foi lançado, o W3C alertou os

desenvolvedores sobre algumas boas práticas que
deveriam ser seguidas ao produzir códigos client-
side. Desde este tempo, assuntos como a separação
da estrutura do código com a formatação e princípios
de acessibilidade foram trazidos para discussões e à
atenção dos fabricantes e desenvolvedores.

Contudo, o HTML4 ainda não trazia diferencial real para

a semântica do código. o HTML4 também não facilitava
a manipulação dos elementos via Javascript ou CSS.
Se você quisesse criar um sistema com a possibilidade
de Drag’n Drop de elementos, era necessário criar
um grande script, com bugs e que muitas vezes não
funcionavam de acordo em todos os browsers.

O HTML5 é a nova versão do HTML4. Enquanto o WHATWG

define as regras de marcação que usaremos no HTML5 e no
XHTML, eles também definem APIs que formarão a base da
arquitetura
web. Essas APIs são conhecidas como DOM Level 0 Um
dos principais objetivos do HTML5 é facilitar a manipulação
do elemento possibilitando o desenvolvedor a modificar
as características dos objetos de forma não intrusiva e de
maneira que seja transparente para o usuário final.

Ao contrário das versões anteriores, o HTML5 fornece

ferramentas para a CSS e o Javascript fazerem seu trabalho
da melhor maneira possível. O HTML5 permite por meio
de suas APIs a manipulação das características destes
elementos, de forma que o website ou a aplicação continue
leve e funcional.

3
 O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML
não continham um padrão universal para a criação de seções comuns e específicas como rodapé,
cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags.
Não havia um método de capturar de maneira automática as informações localizadas nos rodapés
dos websites.

Há outros elementos e atributos que sua função e significado foram modificados e que agora podem
ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram descontinuados
em versões anteriores do HTML agora assumem funções diferentes e entregam mais significado
para os usuários.

O HTML5 modifica a forma de como escrevemos

código e organizamos a informação na página.
Seria mais semântica com menos código. Seria
mais interatividade sem a necessidade de
instalação de plugins e perda de performance.
É a criação de código interoperável, pronto para
futuros dispositivos e que facilita a reutilização
da informação de diversas formas.

O WHATWG tem mantido o foco para manter

a retrocompatibilidade. Nenhum site deverá
ter de ser refeito totalmente para se adequar
aos novos conceitos e regras. O HTML5 está
sendo criado para que seja compatível com os
browsers recentes, possibilitando a utilização
das novas características imediatamente.

Antigamente, para que uma nova versão do HTML

ou do CSS fosse lançada, todas as ideias listadas na
especificação deveriam ser testadas e desenvolvidas
para então serem publicadas para o uso dos browsers e
os desenvolvedores.

Esse método foi mudado com o lançamento do HTML5

e o CSS3. A partir de agora, as duas tecnologias foram
divididas em módulos. Isso quer dizer que a comunidade
de desenvolvedores e os fabricantes de browsers não
precisam esperar que todo o padrão seja escrito e
publicado para utilizarem as novidades das linguagens.

As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. Há um grupo

cuidando da propriedade Background, outro da propriedade Border, outro das propriedades de
Texto e etc. Cada um destes grupos são independentes e podem lançar suas novidades a qualquer
momento.

Logo, o desenvolvimento para web ficou mais dinâmico, com novidades mais constantes. O ponto
negativo nesse formato, é que problemas de compatibilidade podem ocorrer com mais frequência.
Por exemplo, um browser pode adotar bordas arredondadas e outro não. Ou um browser pode
escolher suportar um API diferente do API que o concorrente implementou. Contudo, os browsers
tem mostrado grande interesse em se manterem atualizados em relação aos seus concorrentes.

4
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:

O Doctype deve ser a primeira linha de código do documento antes da tag HTML.

<!DOCTYPE HMTL!>

O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em
versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o
HTML5, a referência por qual DTD utilizar é responsabilidade do Browser. O Doctype não é uma tag
do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código
a marcação foi escrita.

A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados
são informações sobre a página e o conteúdo ali publicado.

TAG LINK

Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documentos
e a tag LINK, que são links para fontes externas que serão usadas no documento. No nosso
exemplo há uma tag LINK que importa o CSS para nossa página:

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a
folhas de estilo. Há outros valores para o atributo REL, como por exemplo o ALTERNATE:

<link rel=”alternate” type=”application/atom+xml” title=”feed” href=”/feed/”>

Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho
alternativo via Atom FEED.

No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma
referência a uma coleção de material histórico da página. Por exemplo, a página de histórico de um
blog pode ser referenciada nesta tag.

5
 Abaixo segue uma lista dos novos elementos e atributos incluídos no HTML5:

section - A tag section define uma nova seção genérica no documento. Por exemplo, a home de
um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação
de contato e chamadas para conteúdo interno.

nav - O elemento nav representa uma seção da página que contém links para outras partes do
website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que
contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são
colocados no Rodapé e também para compor o menu principal do
site.

article - O elemento article representa uma parte da página que poderá ser distribuído e reutilizável
em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou
apenas um bloco de texto comum.

aside - O elemento aside representa um bloco de conteúdo que referência o conteúdo que está
envolta. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade
ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo
principal do website.

hgroup - Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de
título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc.

header - O elemento header representa um grupo de introdução ou elementos de navegação. O

elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até
mesmo logos.

footer - O elemento footer representa literalmente o rodapé da página. Seria o último elemento
do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer
necessariamente no final de uma seção.

time - Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa
no calendário gregoriano.

Novos valores para o atributo type:

O elemento input aceita os seguintes novos valores para o atributo type:

tel

Telefone. Não há máscara de formatação ou validação, propositalmente, visto não haver no mundo
um padrão bem definido para números de telefones. É claro que você pode usar a nova API de
validação de formulários (descrita no capítulo 8) para isso. Os agentes de usuário podem permitir a
integração com sua agenda de contatos, o que é particularmente útil em telefones celulares.

search

Um campo de busca. A aparência e comportamento do campo pode mudar ligeiramente dependendo

do agente de usuário, para parecer com os demais campos de busca do sistema.

6
email

E-mail, com formatação e validação. O agente de usuário pode inclusive promover a integração
com sua agenda de contatos.

url

Um endereço web, também com formatação e validação.

Datas e horas

O campo de formulário pode conter qualquer um desses valores no atributo type:

• datetime
• date
• month
• week
• time
• datetime-local

Todos devem ser validados e formatados pelo agente de usuário, que pode inclusive mostrar um
calendário, um seletor de horário ou outro auxílio ao preenchimento que estiver disponível no
sistema do usuário.

O atributo adicional step define, para os validadores e auxílios ao preenchimento, a diferença mí

nima entre dois horários. O valor de step é em segundos, e o valor padrão é 60. Assim, se você usar
step=”300” o usuário poderá fornecer como horários 7:00, 7:05 e 7:10, mas não 7:02 ou 7:08.

Nós vamos ao longo desse módulo conhecer e saber como aplicar estas TAG’s que acabamos de
ver, assim também como veremos o seu resultado em um website e quando utilizá-las. Agora que
sabemos um pouco da história do HTML e sabemos que o HTML5 é um produto já evoluído, o CSS
também não poderia ter ficado pra trás já que os dois estão sempre conectados para obter um
resultado profissional na construção de sites.

CSS 3

7
 CONHECENDO CSS

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

Essa informação pode ser qualquer coisa: imagem,
texto, vídeo, áudio ou qualquer outro elemento
criado. Grave isso: CSS formata a informação. Essa
formatação na maioria das vezes é visual, mas não
necessariamente. CSS é o acrônimo de “Cascading
Style Sheets” que em português seria algo como
“folhas de estilo em cascata”. É uma especificação que
define como os elementos que compõem uma página,
um documento ou aplicação Web serão exibidos

Com as atualizações do CSS3 e com os browsers atualizando o suporte do CSS2.1, nós entramos
em patamar onde sem dúvida o CSS é a arma mais poderosa para o designer web. Segue uma
pequena lista dos principais pontos que podemos controlar nesse novo patamar:

1) selecionar primeiro e último elemento;

2) selecionar elementos pares ou ímpares;
3) selecionarmos elementos específicos de um determinado grupo de elementos;
4) gradiente em textos e elementos;
5) bordas arredondadas;
6) sombras em texto e elementos;
7) manipulação de opacidade;
8) controle de rotação;
9) controle de perspectiva;
10) animação;
11) estruturação independente da posição no código HTML;

É agora que começa diversão ao formatar sites com CSS.

A sintaxe do CSS é simples:

seletor {
propriedade: valor;
}

A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente
a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até
mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes você não precisa aprender
do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades
são criadas todos os dias e não é um ato de heroísmo você saber todas as propriedades do CSS e
seus respectivos valores.
Os seletores são a alma do CSS e você precisa dominá-los. É com os seletores que você irá
escolher um determinado elemento dentro todos os outros elementos do site para formatá-lo. Boa
parte da inteligência do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável
e inteligente.

8
O que é um seletor?

O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar
quais elementos de um grupo de elementos serão formatados.

Seletores encadeados e seletores agrupados são a base do CSS. Você os aprende por osmose
durante o dia a dia. Para você lembrar o que são seletores encadeados e agrupados segue um
exemplo abaixo:

Exemplo de seletor encadeado:

div p strong a {
color: red;
}

Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez
está dentro de um DIV.

Explicando de uma maneira bem fácil e clara, o CSS serve para organizar e embelezar o seu site.
Considere o HTML como se fosse o “esqueleto” ou estrutura de um boneco desenhado e o CSS
fosse toda cor, retoques, altura, roupa, cabelo e etc.

HTML HTML + CSS

Claro que essa é uma maneira figurada de explicar o funcionamento do CSS juntamente com o
HTML, mas ela funciona. O HTML é toda estrutura e funcionamento do site, enquanto que o CSS
trata da parte visual de como isso será apresentado para o cliente/usuário.

Dentro deste módulo nós vamos entender e ver como utilizar o CSS na estrutura do nosso site, por
enquanto é preciso que você apenas entenda o conceito e qual o papel desta ferramenta para um
WebDesigner.

9
 O objetivo final do módulo é conseguir fazer um site responsivo, bem estruturado e agradável
visualmente, como o mostrado abaixo:

10
 BRACKETS
BRACKETS

Para desenvolver um site utilizando código HTML e CSS nós iremos precisar primeiro de um bom
editor de texto. Iremos usar o Brackets.
O Brackets é um editor de código aberto escrito
em HTML, CSS e JavaScript com foco principal no
desenvolvimento web. Foi criado pela Adobe Systems
, licenciado sob a licença MIT , e atualmente é mantido
no GitHub . Brackets está disponível para download
para as plataformas Mac , Windows e Linux .

Em 4 de novembro de 2014, a Adobe anunciou o

lançamento 1.0 de Brackets. A atualização introduziu
novos recursos, como combinações de teclas de
atalho personalizadas e insinuações JavaScript mais
precisas. O Brackets tem um foco importante no
desenvolvimento em JavaScript, CSS e HTML .

11
 A plataforma do Brackets é bem sofisticada e bem suave, ele é um programa simples de usar e
com bons atalhos. O brackets já vem com um código de html e css demonstrativo que quando
executado, abre um site com algumas informações a mais sobre o programa. Para executar o
código do Brackets diretamente no navegador, basta clicar em File, e marcar essas duas opções:

Essa é uma das vantagens do Brackets, pois tudo que você muda no código já muda automaticamente
no site, fazendo com que você tenha uma melhor noção das suas alterações em tempo real. Se
você redimensionar as janelas, é possível trabalhar com o código e a visualização abertos, como
mostrado acima na imagem.

COMEÇANDO PROJETO

Agora que já conhecemos a ferramenta que vamos utilizar, iniciaremos o nosso projeto.
Primeiro crie uma pasta chamada Projeto no seu desktop.

Depois, dentro do Brackets, iremos clicar no botão “Getting Started” e depois em “Open Folder”.

12
Depois de clicar basta escolher a pasta que você acabou de criar.

Você irá perceber que o projeto irá aparecer vazio a princípio, isto porque não criamos nada dentro
dele ainda.

Agora para começarmos é necessário ir no menu File-> New.

13
 Veja que agora temos um arquivo ainda sem nome e sem especificação, ou seja, por enquanto ele
é apenas um arquivo de texto comum. Para que ele vire um arquivo .html, nós vamos precisar dizer
isto ao programa, nós fazemos isto clicando em File-> Save as e salvando o arquivo com o nome
index.html, a página index é um padrão utilizado para toda página inicial de um projeto.

Agora no nosso editor nós veremos que temos uma página .html. Depois de criar uma página e
salvá-la, irá se abrir 2 partes no menu, a parte de cima, corresponde à página do projeto que você
está trabalhando no momento, enquanto a de baixo, corresponde à todos as páginas ou arquivos
que se encontram deste desse projeto, como por enquanto só temos este arquivo somente ele
aparece.

ESTRUTURA BÁSICA

Vamos iniciar o nosso projeto com as Tags principais para um arquivo HTML.

Como mostrado na aula anterior, esta é uma estrutura padrão do HTML, se qualquer uma dessas
Tag’s não estiver no arquivo, ele não irá funcionar corretamente. Veja que na Tag <title>, nós
colocamos o título de “Meu Projeto”, esta frase irá aparecer no barra do seu site, como título. Clique
no botão para executar no browser e veja:

14
Dentro da Tag <body> irá ser formado todo o corpo do nosso site, ou seja, todo o conteúdo que
tivermos no site, estrutura e etc, ficará dentro desta Tag.

Uma coisa importante de se ter em mente é deixar o seu código sempre indentado. A indentação é
a organização do seu site, separando as Tag’s por espaços definidos. Os editores de texto atuais,
geralmente fazem isso automaticamente ao pular uma linha, mas é importante você ter em mente
que seu código precisa estar organizado com uma boa indentação.

TEXTOS E TÍTULOS

Vamos começar aprendendo um pouco sobre como funciona as Tag’s de texto, começando
pelas Tag’s h1 à h6.

Executando o Preview, podemos ver que quanto maior o número menor a letra e vice versa. As
Tag’s com “H” são usadas para títulos e subtítulos dentro do seu site. Além de formatar o tamanho
da letra ela também da um espaço para esse título tanto acima da frase quanto abaixo dela. Veja a
diferença se o texto for escrito sem a tag “h”.

Podemos perceber que além de não ter pulado a linha, o texto fica “cru” sem nenhuma formatação.

Guarde sempre que o site, deve ter pelo menos um título por página, e assim que nos vamos
seguir também, deixando um título e dando continuidade no restante das Tags referente a texto.

15
 LISTAS

A Tag <p> forma um parágrafo, sempre que for utilizada será no sentido de texto. A Tag <ul> forma
uma lista não ordenada, utilizando esta lista ela coloca cada elemento da Tag <li> em uma linha
sendo apresentada por um ponto no começo de cada linha. Sempre que utilizarmos uma lista não
ordenado <ul> os seus elementos serão as <li>, tudo que quiser colocar na lista será dentro das
<li>.
Se no caso você desejar criar uma lista numerada a Tag que você irá utilizar será <ol> invés
de <ul>, dentro da lista de <ol> você terá os mesmos elementos <li> para compô-la.

Para destacar uma parte do texto, deixando em Negrito ou em itálico, você irá utilizar as Tag’s
<strong> e <em> respectivamente.

16
 ESTRUTURA DO SITE

O HTML5 contém também algumas Tag’s que se tornaram um certo padrão da linguagem, mesmo
não sendo como as primeiras Tag’s que mostramos, que são indispensáveis para a estrutura de
uma página HTML. Essas Tag’s que vamos ver a seguir, se tornaram um padrão por tornar o código
HTML muito mais organizado e de fácil entendimento para qualquer um que veja. Essas são as
Tag’s <header>, <footer>, <section> e <nav>.

Como você poder perceber, elas não tem nenhum efeito no site, ou nos elementos que podem estar
dentro delas. Então para que elas servem? E porque tem cada uma tem um nome diferente? Então,
para entender melhor vamos ver uma imagem, exemplificando o papel dessas Tag’s.

Um bom exemplo é o próprio site do nosso curso, onde o usuário pode ver uma parte de cima do
site composta pela logo e o menu de navegação, logo abaixo podemos ver alguns outros elementos
como a nossa galeria e mais abaixo ainda podemos ver algumas outras informações que também
está destacada ou dividida do restante do site:

17
 Se fossemos ver o código deste site, nós veríamos que está dividido mais ou menos assim:
nav

header

section

section

18
 footer

Este exemplo, nos ajuda a entender melhor visualmente como ficaria cada parte dessas 4 Tag’s
no nosso código. Podemos perceber que a Tag <section> define vários elementos diferentes, isto
porque, a Tag <section> pode ser usada diversas vezes que não terá nenhum efeito negativo no
seu site e nem no seu código, ela define exatamente o que sua tradução diz, uma “seção”.

Uma seção pode ser usada pra separar qualquer tipo de conteúdo, assim como nós vimos
no site de exemplo, cada seção tinha um elemento diferente, um continha texto, o outro imagens
e texto o outro uma galeria, e assim pode continuar seguindo com vídeo, gifs e etc, cada um com
uma seção. Ela também pode conter todos esses elementos juntos, dentro da mesma seção.

Já a Tag <nav> tem um objetivo mais específico, ela é utilizada quando queremos criar um conteúdo
de navegação. No exemplo do site, essa Tag será encontrada no menu de navegação do site:

Sempre que encontrar uma Tag <nav> em um código, ela com certeza estará ligada a um conteúdo
ou menu de navegação, onde se pode clicar em cada link e ir para uma página ou seção diferente.

A Tag <header> serve para criar um cabeçalho. O cabeçalho é utilizado para armazenar os elementos
de “introdução” do seu site, aquilo que o usuário irá ver primeiro, e deve ficar no topo do site.

Já a Tag <footer> serve para criar um Rodapé no seu site. O rodapé ou o footer, contém toda a
informação que ficará localizada na parte de baixo ou parte final do seu site.

Geralmente essa Tag é utilizada para colocar as informações do seu site ou sobre a empresa que
o site referencia, como: endereço; telefone; parceiros; desenvolvedor e etc.

Essas referências de nomes diferentes para cada Tag, também auxilia muito na hora de
utilizar o CSS. Para trabalhar com o CSS nós precisamos indicar qual elemento do HTML que nós
queremos formatar, então ter essa divisão de Tag’s facilita muito nosso trabalho.

19
 IMAGENS
IMAGENS
Antes de começar nosso site, precisamos conhecer algumas outras Tag’s importantes. Por exemplo
a Tag para adicionar uma imagem dentro do seu site.

Para trabalharmos com imagens nós iremos precisar de uma pasta que contenham as imagens
para o nosso projeto, crie uma pasta com nome “img” dentro da pasta “Projeto” e coloque as
imagens que você baixou desta aula dentro dela.

Veja que nós colocamos os nomes das imagens já se referindo ao lugar onde vamos usá-la no
nosso site, então é importante que você tenha isso em mente para que possa ter uma organização
dos seus arquivos e imagens. Além disso cada imagem dependendo para onde vai ser usada tem
um tamanho determinado, como podemos ver na miniatura da imagem a imagem do fundo é maior
que as outras que escolhemos que por sua vez tem o mesmo tamanho, pois serão utilizadas no
nosso portfólio.
20
Então se nós formos utilizar nossa Tag <img src=”” alt=””>, nós iriamos ter a chave “src(source)” e
dentro o valor(local e nome da imagem) entre “ “ (aspas), assim também teriamos a chave “alt” e o
valor dela que seria o nome ou descrição daquela imagem.

Veja que nós precisamos colocar o valor “img/portfolio1.jpg”, porque a imagem se encontra dentro
da pasta “img”. Então a divisão precisa ser escrita com o diretório completo da imagem, para que
se possa localizar corretamente e esse caminho se divide com a barra( / ) sempre que for dentro
de uma pasta assim seria também se tivessem mais pastas. Algo muito bom no Brackets também
é que ele apresenta a miniatura da imagem que você esta adicionando, basta passar o mouse por
cima do caminho que você escreveu dentro do valor da src, isto auxilia a não se confundir.

LINK’S

Outra Tag importante é a Tag <a href>. Esta Tag é que torna possível termos links dentro do nosso
site, nos direcionarmos a outras páginas dentro do mesmo site ou a outros sites através de um link
no nosso site.

A Tag deve ter a chave “href” e dentro dela o seu valor entre aspas( “ “ ), o endereço do site ou
página que você quer endereçar deve estar dentro destas aspas, pois o endereço será o valor. Por
exemplo, se quisermos linkar um site exterior ao nosso site, como o google, nós iriamos usar o
seguinte valor:

21
 Esse valor pode ser encontrado em qualquer site, basta olhar na barra de endereço no navegador,
assim você pode copiar o endereço diretamente da barra para fazer o link.

Depois do valor, você deve colocar um texto para que possa ter algo físico para o usuário clicar.
Você pode utilizar o nome do próprio site que você quer que o usuário abra assim que clicar no link.

Quando colocamos um link, automaticamente o navegador coloca esse efeito de cor azul e um
sublinhado no texto para deixar explícito a presença de um link, porém nós podemos configurar isto
depois através do css. Agora vamos ver como podemos colocar um link direcionando para outra
página dentro do mesmo site. Para isso vamos agora criar uma outra página, a página formulários.

Na barra lateral, onde esta referindo a sua pasta “Projeto” clique com o botão direito do mouse e
escolha a opção New File.

22
Quando colocamos um link, automaticamente o navegador coloca esse efeito de cor azul e um
sublinhado no texto para deixar explícito a presença de um link, porém nós podemos configurar isto
depois através do css. Agora vamos ver como podemos colocar um link direcionando para outra
página dentro do mesmo site. Para isso vamos agora criar uma outra página, a página formulários.

Lembrando que uma boa prática dos documentos em html é evitar o uso de acentos em seus
nomes. Depois de criar a nova página coloque a estrutura básica do html nela e escreva a frase
“página de formulário”.

Agora nós podemos colocar dentro da nossa primeira página um link para esta página. Desta vez,
não iremos copiar o endereço da barra de endereço do navegador, como a página faz parte do
mesmo projeto, nós podemos colocar o link direcionando diretamente para o nome do arquivo html
que acabamos de criar, então o nosso valor será o nome do arquivo “formularios.html”.

Veja que o Brackets já traz o nome do arquivo, como sugestão assim que começamos a escrever,
isto porque ele já reconhece que há um arquivo com aquele nome dentro deste mesmo projeto.

23
 Veja que o Brackets já traz o nome do arquivo, como sugestão assim que começamos a escrever,
isto porque ele já reconhece que há um arquivo com aquele nome dentro deste mesmo projeto.

Note que estamos ainda na página index.html olhando pela barra de endereço, clicando no link que
acabamos de criar seremos redirecionados.

Caso você queira voltar para a página anterior basta criar um link também na página de formulários
com o valor da página index e o nome “voltar”:

Assim que clicar ela voltará para página index.html.

Outra coisa importante para trabalharmos é saber estruturar o seu site, usar tables para isso pode
ser algo válido.

24
 TABELAS

A sintaxe para utilizar a Tag table é a seguinte:

No uso de tabelas, nós temos os elementos de Tag’s <table>, <tr> e <td>, nesta ordem. Cada
<table> forma uma tabela e cada tabela deve conter um número determinado de linhas “<tr>” e de
colunas para essas linhas “<td>”. Veja que cada separação de <tr> compõe os elementos de cada
linha, sendo necessário a divisão desses elementos sempre com a <td> por coluna.

No exemplo acima podemos ver um exemplo de um boletim de notas de 3 alunos, onde se encontra
as notas do primeiro e segundo bimestre, veja que temos 4 colunas “<td>” e cada uma com sua
informação dentro de suas linhas “<tr>”. Uma coisa é importante destacar, só podemos ver a tabela
porque utilizamos o elemento border com o valor “1”, referente ao tamanho da borda da tabela. Se
mudarmos este valor para 0, as informações da tabela continuam organizadas, porém sem ter uma
borda visível.

25
 Utilizando a Tag <br>, nós pulamos uma linha, podendo deixar a informação um pouco mais fácil
de ser lida:

Podemos também organizar o texto utilizando a Tag <align> e os valores “center”(ao centro), “left”(à
esquerda) e “rigth”(à direita):

Utilizando o “align”(alinhar), nós formatamos a nossa tabela, deixando as informações mais

organizadas, escolhendo a posição “center”, podemos destacar melhor as informações deixando
mais agradável visualmente.
A Tag de alinhamento pode ser utilizada em qualquer elemento do seu site, seja ele um texto uma
imagem, até mesmo uma tabelas inteira pode ser alinha ao centro da página. Porém muitas dessas
formatações nós iremos fazer no CSS, que é o mais recomendável, já que hoje em dia temos a
possibilidade de formatar todo nosso site através dessa ferramenta de maneira muito mais fácil e
melhor visualmente.

26
 DIVIDINDO SITE
DIVIDINDO SITE
Para começar a dividir o nosso site, nós iremos usar as Tag’s que já falamos e descobrimos sua
função. Na estrutura do site elas tem uma ordem e ficará assim:

Antes de começar nós temos que pensar em todo este conteúdo, o que precisamos, como ficará
para o usuário lidar com o nosso site de maneira fácil, qual tipo de site será e etc. Vamos construir um
site no formato de uma loja virtual, que venda artigos de computadores ou games. Começando
pela <nav>, construiremos o nosso menu de navegação.

Veja que nós criamos um link com o nome do nosso site “Game Store” e logo abaixo criamos uma
lista, onde colocamos apenas 1 item, um link vazio com o nome “SOBRE”. Utilizamos o “#” somente
para indicar que ali entrará um link, mas por enquanto não colocaremos nenhum ainda. Agora parar
criar o restante dos links para o menu, basta copiar a <li> inteira e colar abaixo, somente trocando
o nome da aba do menu que você irá escolher. Se prestar bem atenção, você verá também que o
texto que colocamos antes está como um comentário. Para adicionar um comentário você precisa
utilizar a Tag <!-- conteúdo -->. Isto serve para indicar o que aquela parte do código contém.

27
 PREENCHENDO SEÇÕES

Depois de copiar a <li> vamos colocar os seguintes menus.

Veja que já temos algo organizado. Esta enquadramento azul, é parte do Brackets que indica em
qual parte do site você está mexendo quando clica no código, isto facilita bastante. Agora no nosso
cabeçalho, nós iremos ter o nosso primeiro título com <h1>.

Observe que colocamos uma Tag <p>, esta Tag serve para criar parágrafos de texto. Sempre que
for criar um texto, utilize esta Tag. Outra coisa que fizemos foi colocar um link dentro deste header,
com o nome de “VER MAIS” que utilizaremos mais a seguir, vamos ver como ficou:

Vale lembrar que esta visualização não é com o site em tela cheia, já que estamos trabalhado com
a visualização simultânea do site e o código.

28
Agora vamos partir para a próxima parte do site, que será a nossa primeira section.

Dentro dele vamos colocar o nosso <h2> já que utilizamos o <h1> anteriormente, precisamos seguir
a hierarquia de tamanho da Tag. Dentro do parágrafo colocamos um texto genérico, chamado de
Lorem Ipsum, que são pedaços de texto usados para preencher o espaço do código, onde depois
poderemos colocar o conteúdo de verdade que queremos ali. Criamos também outro link com o
nome “ ENTRE EM CONTATO”. Veja como esta ficando:

Agora vamos criar mais uma seção, desta vez com o nome de JOGOS como título em <h2> também.

Observe que nessa seção usamos uma <div> que é como se fosse um “container”, ou seja um
determinado espaço que está sendo criado, bastando ser preenchido.
29
 Criando esta nova sessão, nós teremos 4 imagens para apresentar alguns jogos dando uma nova
visão a essa área do site também. Por enquanto as fotos aparecem como links quebrados, porque
ainda não tem o seu caminho especificado, que resolveremos logo depois.

A nossa próxima sessão será a de portfólio:

Nós agora temos as imagens já do nosso portfólio todas adicionadas ao site, porém ainda vamos
precisar configurar o tamanho delas e como vão ficar visíveis no site com o css. Porém para que
não atrapalhe a nossa visão de como o site esta ficando, coloque uma # para ficar visível o resto
das informações.
30
Agora nós iremos criar a section de contato:

Observe que nós temos um parágrafo <p> antes da div porque o texto entrará acima das imagens
que vem a seguir. Uma coisa interessante desses elementos é que temos a possibilidade de colocar
um número como um link:

Isso traz a possibilidade de que quando a pessoa clicar no telefone, poderá ser aberto alguns
programas que o usuário pode ter no computador para fazer uma ligação acione na hora o número
apenas clicando e o usuário confirmando, assim como o skype pode fazer. Assim como no email.

Com a tag de link e o valor “mailto:”, basta o usuário clicar em cima que será aberto para ele o
próprio e-mail, já possibilitando ele mandar um e-mail para você.

31
 Agora no nosso <footer> iremos somente colocar a informação final do nosso site, que pode ser
preenchida com contato, nome da empresa, nome do desenvolvedor e até mesmo outra <nav>,
porém neste momento iremos completar somente com o nome do desenvolvedor, no caso o seu
nome.

Vamos agora dar uma olhada em como está o nosso site em uma janela com tela cheia, sem as
imagens aparecerem:

Depois disso a nossa estrutura em html está praticamente pronta. Mais à frente nós iremos somente
colocar alguns id’s em sections e div’s para que possamos usar na hora da formatação no CSS.
Depois se conseguir visualizar o site coloque os links das imagens corretamente para que apareçam.

32
 REVISANDO CÓDIGO

Nosso código do index.html está assim por enquanto:

33
 CRIANDO FORMULÁRIO

Agora vamos fazer a nossa página de formulários. Nesta página nós iremos criar um formulário de
cadastro para cada usuário que entrar no seu site:

Para trabalhar com formulários que neste caso é o formulário de cadastro, sempre devemos dizer
ao arquivo que os campos a seguir serão campos de formulários que o usuário entrará com dados
a serem lidos, para isto precisa-se ter a Tag <form>. Por padrão nós colocamos um id no formulário
no caso de termos mais de um na mesma página, além disso deixaremos a borda com valor 1.

Nós usaremos este tipo de construção assim como vimos no exemplo anterior com notas e nome
de alunos, porém desta vez iremos sempre separar nossos campos com 1 uma linha e 2 colunas,
onde a primeira coluna será o que o usuário deve preencher e na coluna 2 será o espaço de texto
que ele irá poder escrever:

Agora nós iremos repetir essa tarefa apenas alterando os tipos de dados, no todo nós precisamos
que o usuário informe o seu nome completo, seu e-mail, sua data de nascimento, escolha um
usuário e uma senha.

A Tag <input> permite colocarmos um campo de um tipo determinado no formulário, alguns campos
são mais comuns em formulários, veja alguns exemplos:

(text)
(email)
(date)
(text)
(password)
(select)
(radio)
(checkbox)
(submit & Reset)

34
Veja como funciona a declaração deles no html e como fica seu efeito no site:

Observe que como não utilizamos o tipo correto de endereço de e-mail, o navegador não permite
enviarmos este formulário. Tudo isto é devido ao tipo de campo que colocamos:

Quando declaramos um campo de texto como “e-mail” no seu tipo, o navegador entende que
aquele campo para ser válido precisa ter um “@” e também “.com”, por isso sempre irá acusar um
endereço falso.

Já o campo declarado como “date” nos possibilita ter um visual de data bem mais agradável e uma
maneira fácil de escolhermos uma data, porém ainda pode ser digitado manualmente a data.

35
 Quando declaramos um campo como type=”password”, o navegador entende que ele é um campo
de senha e para proteger melhor o usuário ele não revela o que está sendo digitado.

O campo <select> já nós permite criar uma “lista” com algumas opções, onde você pode escolher e
clicar na opção que quiser e o formulário a enviará. A Tag select, precisa ser igual a sintaxe acima,
é necessário ser aberta e fechada e dentro para aparecer precisa ter a Tag <option>, onde você
escolhe as opções que quiser e depois fecha a Tag, <select> <option> “opção” </option> </select>.

O tipo “radio” adiciona um botão, assim como o tipo checkbox, a diferença entre eles é que podemos
marcar vários checkbox enquanto o radio só podemos ter uma opção.

As opções “submit” e “reset” são respectivamente lidos como botões para Enviar o formulário ou
apagar o formulário que já foi preenchido, nele você pode conter um valor (value) que será o nome
que irá aparecer no botão.

36
Depois de conhecer as opções, vamos montar o nosso formulário:

Como pode se observar nós também temos o valor required dentro de cada informação, isso faz
com que o usuário seja obrigado a preencher o campo, para que não envie um formulário vazio. Se
ele tentar irá ser enviado um aviso:

Vejamos como está o nosso formulário:

Pronto já temos um campo de formulários criado. Vamos conhecer como trabalhar com o CSS e
depois vamos poder embelezar esta página e talvez alterar visualmente um pouco nosso formulário.

37
 CRIANDO LINKS
CRIANDO LINKS
Se tentarmos clicar nos links que nós criamos no nosso menu <nav> na nossa página index.html,
veremos que eles não estão levando a lugar nenhum, o objetivo do menu é quando usuário clicar
em algum link dele, ser direcionado para outra parte do site ou outra página, isto é simples de se
resolver:

Basta nós criarmos um destino de link. Veja que como já foi explicado anteriormente, nós podemos
linkar uma página dentro do mesmo site ou direcionar para outra parte do site, utilizando o link. O
exemplo mostrado acima mostra que temos direcionamento para 2 páginas:

E 4 links para outra parte da mesma página utilizando o “#”.

Depois de linkar nós precisamos fazer algum elemento do código ser identificado com estes nomes
que colocamos, para isso nós iremos dar um id para cada parte.

38
Se tentarmos clicar nos links que nós criamos no nosso menu <nav>, veremos que eles não estão
levando a lugar nenhum, o objetivo do menu é quando usuário clicar em algum link dele, ser
direcionado para outra parte do site ou outra página, isto é simples de se resolver:

Colocando um id nas sections o código pode reconhecer aquele elemento como único através do
seu id, isso faz com que ele possa ser alterado, formatado ou neste caso linkado através do seu id.
Vale lembrar que o nome do link deve ser o mesmo que está no id o elemento.

Agora assim que clicarmos no link, SOBRE, ou o link JOGOS no menu do site, ele irá direcionar
automaticamente para a parte do site onde está se referindo a estes elementos.

39
 TRABALHANDO COM CSS
Sabendo disso basta linkar todas as sections com o id tendo o mesmo nome que você colocou no
link.
Agora nós vamos partir para o CSS. Para trabalhar com o css nós iremos criar uma nova pasta
dentro da nossa pasta Projeto com o nome css. Dentro desta pasta vamos criar um novo arquivo
com nome de “estilos.css”.

Agora nós iremos trabalhar na nossa página de css. Na nossa primeira aula nós vimos como funciona
um pouco da sintaxe do css, vamos relembrar agora. Por exemplo se quiséssemos modificar a cor
de todas as Tag’s de parágrafo <p> que nós temos no código:

Diferente do html, nós não utilizamos “< >” nós utilizamos o elemento que nós queremos “p” e
depois abrimos as chaves( { ) e logo no final fechamos ( } ). Dentro das chaves nós colocamos a
ação que deverá ser feito com o elemento, no nosso caso, nós ativamos o atributo de cor “color:” e
escolhemos o seu valor para “red”. Fazendo isto o css coloca todos os elementos <p> com a letra
vermelha.

Mas para que isso aconteça, nós iremos ter que especificar mais uma linha de código no nosso
arquivo de index.html.

O link servirá pra você indicar o endereço da página que você quer linkar que será a página estilos.
css que acabamos de criar, dentro da pasta css, que também criamos. O rel=”” recebe o valor
stylesheet que é referente ao valor de uma página de estilos e precisa ser declarado.

40
Fazendo isto nós poderemos ver no navegador que todos os nossos textos em parágrafos ficaram
em vermelho.

Então toda vez que precisar alterar um elemento, nós poderemos também alterar todos os elementos
com o mesmo nome dentro do código. Se caso alterarmos o valor na página do css para green, a
formatação muda na mesma hora no site:

Uma coisa bem interessante do Brackets, é que quando você escreve o valor de uma cor, o Brackets
trás pra você todas as variações daquela cor, basta você clicar em qual você quer. Isto é algo que
facilita muito o desenvolvedor a construir um site diferenciado visualmente.

41
 Você pode testar também modificar o seletor, ao invés do <p> nós podemos colocar o seletor de id,
onde nós usaremos os id’s que colocamos nos nossos elementos em html:

Isso faz com que todos os elementos que estão dentro da section daquele id fiquem com a
formatação que você colocar, no exemplo acima tudo dentro da section “sobre” ficou na cord verde.

Seletor de links:

Faz com que todos os links fiquem com a formatação que você por.

Também podemos ter um seletor de classes, onde nós precisamos criar uma class para determinado
elemento e depois podemos alterar ela pelo css.

42
Vamos criar uma class chamada red para os elementos da Tag <h?>.

Fazendo isto nós criamos uma class com nome de “red” onde incluímos todas as Tag’s <h1> e
<h2> presentes no site.

Quando se trata de classes, nós colocamos sempre um “ . “ antes do nome da classe. Isso serve
para que o css identifique que este elemento é uma classe. Assim como nos id’s que nós colocamos
“ # “, que serve para identificar que aquele elemento é um id. Então sabemos agora que podemos
ter vários tipos de seletores, e vale lembrar que seletor é o elemento que vem antes das chaves “{“.

43
 Agora o próximo elemento é a propriedade. A propriedade sempre vem antes dos dois pontos “ : “,
ela é o que fiz que será alterado, no exemplo anterior a propriedade era “color”, podemos mudar
essa propriedade para background-color.

Conforme mudamos a propriedade, nós alteramos coisas diferentes, como mostrado acima, ao
invés de alterarmos a cor das letras, alteramos o fundo das Tags <p>.

O terceiro elemento é o que vem depois dos dois pontos “ : “ e que tem que ser fechado com ponto
e vírgula “ ; “. Este elemento é o valor determinado para a propriedade que foi escolhida.

O conjunto de propriedade + valor, define uma declaração no css, que por sua vez sempre deve ser
terminada com o ponto e vírgula “ ; “.

Se nós tivermos mais de uma declaração, o que é bem comum no css, nós teremos o que é
chamado de bloco de declarações, onde existe mais de uma formatação no mesmo elemento.

Agora quando nos referimos a todos os elementos: seletor, o bloco de declarações, as declarações
em si, as propriedades e os valores que cabem a ela; Nós damos o nome de “regra”.

44
45
 INCLUINDO ESTILOS
INCLUINDO ESTILOS E FONTS
E FONTS

Agora nós iremos começar a formatar o nosso site diretamente, já que vimos como funciona o css
e já temos uma noção de como trabalhar com ele. Começaremos fazendo um download de um
normalize. O normalize é um bloco de texto em css que ajuda o seu código à se adaptar com o
navegador onde o site está sendo executado, então vamos criar um novo arquivo.

Este código está disponível como arquivo de apoio nesta aula, basta baixá-lo e copiar o seu
conteúdo para dentro desta fila que você acabou de criar, ou apenas baixar e colocá-lo dentro da
sua pasta Projeto-> css.

46
Agora nós precisamos linkar esta página ao nosso arquivo index.html:

Depois disto nós vamos baixar algumas fontes que podem ser encontradas no google fonts. Abra o
navegador e digite na barra de endereço: google.com/fonts.

Vamos adicionar as fontes: Open Sans, Roboto e Pacific. Caso não esteja aparecendo algumas
delas, basta ir na barra de pesquisa no lado superior direito do site:

47
 Clicando no botão “ + “ você consegue adicionar essas fontes, depois disso ela abrirá uma outra
janela com as fontes que você adicionou:

Basta você copiar o código que eles dão e depois colar como um link no seu index:

48
Agora estas fontes estarão disponíveis para nós usarmos no nosso código. Sempre que você
quiser utilizar uma fonte diferente, você pode procurar no google fonts e utilizar o código dela.

Vamos começar agora com o nosso código css. Primeiro vamos dividir em seções a nossa formtação,
utilizando comentários. O comentário no css é escrito com “/* */” , definindo com barra, esterísco,
asterisco e barra, tudo dentro destes asteriscos vai ser entendido como comentário, que servirá
para você ter mais facilidade para entender o seu código e navegar por ele, porém não causa
nenhum efeito no site.

Com o código acima, nós podemos ver que o comentário indica um estilo compartilhado, ou seja
será um código e estilo que servirá para vários elementos em todo o site. O código indica que tudo
que está dentro do <body> ou seja, todo o conteúdo do site, irá utilizar família de fontes: “ Open
Sans” que acabamos de pegar. As outras fontes estão indicando que, caso o navegador do usuário
não conseguir ler a fonte Open Sans, ele tentará ler a fonte Arial e se não conseguir, irá ler a fonte
sans-serif, que é uma fonte bem genérica. Além disso colocamos uma cor mais clara na letra.

Já podemos observar uma grande diferença no estilo das letras, isso significa que o código foi lido
perfeitamente.

49
 Continuando, vamos formatar também nossa Tag’s <h> para um estilo diferente.

FORMATANDO MENU
Agora o nós escolhemos a font “Roboto”, e também colocamos os elementos <h> com a margem
de valor 0, isso fará com que não tenha o espaço abaixo e acima dele.

Veja que já mudou, agora nós iremos partir para a formatação do nosso menu de navegação:

Para entender bem o que o código acima faz, nós temos que pensar que muitas pessoas utilizam
os celulares para qualquer coisa hoje em dia, então nós iremos construir um site responsivo, logo
ele tem que estar compatível com todos os aparelhos, e esse código irá possibilitar isto.

50
A propriedade display é a principal para poder formatar o layout de um objeto, com ela nós
podemos definir como esse objeto vai se comportar no navegador, nós utilizamos o valor flex
para o display, fazendo com que tudo que tem no seletor nav fique flexível podendo se adaptar a
diferentes tamanhos de tela.

A propriedade flex-direction permite escolher em qual direção o conteúdo irá se alinhar, no caso
escolhemos o estilo em coluna com o valor column.

A propriedade align-items permite setar o alinhamento dos objetos, escolhemos alinhar ao centro
com o valor center.

A propriedade backgroun-color, como já vimos antes, permite mudar a cor de fundo deste seletor.
Toda cor no css, tem um valor hexadecimal, compostos de letras e números, mais precisamente de
16 caracteres, sendo estes de 0 à 9 e de A à F, compondo 10 números e 6 letras. Existem muitas
combinações possíveis, por isso, nesta aula deixaremos uma tabela de cores como arquivo de
apoio. Você também pode pesquisar no google alguns valores se desejar.

51
 Agora nós vamos alterar os links que estão dentro desse seletor:

Perceba que nós utilizamos o mesmo seletor <nav> porém agora temos um sinal de “maior que”,
seguido de um outro seletor <a>. Nós sabemos que dentro da nossa <nav> nós temos Tag’s de
link <a>, então é necessário indicar para o css que nós queremos formatar as Tag’s de link <a> que
estão somente dentro da nossa <nav>. Se colocarmos somente o seletor <a> nós iríamos formatar
todas as Tag’s <a> que estão no arquivo index e se não colocarmos o sinal de “maior que”( >)
iriamos formatar todas as Tag’s <a> dentro da nav..
O sinal de “maior que” serve para indicar que este seletor <a> pertence/esta dentro/é uma
filha, da Tag <nav>, por isso precisa ser declarado desta maneira “nav > a”.

A propriedade text-decoration, com o valor “none”(nenhum), faz com que todo o efeito que exista
naquele texto, seja desfeito, assim ele fica como um texto normal para ser formatado.

A propriedade font-weight, com o valor de 700 da o efeito de Negrito para a letra.

A propriedade font-size, serve para indicar o tamanho que a fonte terá, esse valor é indicado em
pixels (px).

Terminando com a fonte da família Pacifico.

52
Com isso nós temos o seguinte resultado:

Porém nós podemos perceber que somente o primeiro link foi formatado, isto porque se formos
conferir no index.html, veremos que os outros links estão dentro da Tag <ul>, que é a lista que
criamos.

Então agora nós precisamos definir para o css que queremos formatar dentro da Tag <nav> a tag
<ul>.

Agora nós iremos tratar da nossa lista:

A propriedade list-style, com o valor “none”, serve para retirar todo tipo de estilo que vem na <ul>
por padrão.

53
 A propriedade padding, com o valor 0, modifica o espaçamento dentro da ul, ao que fica em volta
dos elementos.

Normal Padding 0

Observe que o espaço do quadro da lista fica sem espaçamento e ficam alinhados ao centro
corretamente com o align-items: center.

A propriedade width, permite formatar a largura do elemento, no caso é possível formatar em

pixels(px) ou em porcentagem(%). Colocando para 100% ele sempre irá ocupar 100% da tela,
independente do tamanho da tela, seja celular, tablet ou PC.

Agora precisamos formatar os elementos dentro da <ul> que são as <li>, então temos que declarar
isso para o css, para ele identificar que queremos alterar esses elementos.

54
Alinhamos o texto ao centro e colocamos para ocupar 100% da tela também na sua largura. Porém
nós temos todos os elementos dentro das <li> como links então temos que setar esses elementos.

Por padrão as propriedades dos displays, é com valor “inline”, porém este valor não nos deixa fazer
certas alterações, como espaçamento entre os elementos e alguns outros, por isso nós usamos o
valor inline-block.

O valor inline-block para o display, permite tratar o display como bloco em linha, isso possibilita
fazermos alterações que não seria possível antes, como o espaçamento entre os elementos.

Com o padding 10px 0, nós temos o espaço entre os elementos de 10 pixels, acima e abaixo, e 0
para os lados.

Colocando a porcentagem de 100% o usuário terá um botão ocupando 100% da tela em largura,
na sua linha, mesmo contendo o texto somente no centro:

55
 Agora basta tirar o efeito do texto e escolher sua cor:

Lembrando que por enquanto estamos fazendo o layout, como se fosse para a visualização em um
celular, ou tablet por enquanto, mais a frente deixaremos visível para todas as formas.

Veja como esta ficando:

Já podemos ver que nosso site está tomando forma, porém ainda temos um bom caminho pela
frente para poder finalizá-lo.

Agora que nosso menu de navegação esta pronto, vamos partir para o nosso cabeçalho.

56
 FORMANTANDO HEADER
FORMATANDO HEADER
Para começarmos com nosso cabeçalho, nós iremos adicionar uma imagem, nosso cabeçalho irá
ser composto basicamente por essa imagem e um texto dentro dela.

O valor “url” serve para determinar um link, assim como no html, porém nós precisamos usar a
sintaxe um pouco diferente, já que no css esse link está dentro de parênteses e aspas simples.

A propriedade background-image, permite adicionar uma image no local do seletor que você está
trabalhando.

Após fazer isso, podemos ver que a imagem já foi adicionada, porém ainda esta longe de ficar da
maneira que nós queremos, então vamos continuar.

57
 A propriedade background-size, permite escolhermos o tamanho da imagem, com o valor cover
nós podemos dizer para o código que essa imagem irá preencher/cobrir todo o espaço do seletor.

A propriedade background-position, serve para escolher o posicionamento da imagem, onde

escolhemos o valor ao centro.

A propriedade background-repeat, permite escolher se esta imagem irá se repetir/duplicar, caso

o espaço que ela ocupar seja maior que o tamanho dela, neste caso a imagem é maior do que o
espaço mas mesmo assim colocar o valor no-repeat, para que ela não se repita/duplique.

Até agora temos este resultado, agora vamos configurar o texto que está dentro da imagem:

Escolhemos a cor como o do menu de navegação, um branco escurecido. O display será flex
novamente, a direção da flexibilidade da imagem e os textos será em coluna. Usamos o align-
items sempre que tivermos elementos dentro de outros elementos, no caso alinhamos ao centro
juntamente com o texto. Colocamos também um espaçamento de 20 pixels para os elementos.

58
Agora vamos fazer uma pequena alteração na margem do nosso elemento de parágrafo que temos
dentro da header.

A propriedade margin-bottom, cria um espaço na parte de baixo, ou seja na margem inferior do

elemento, com o valor de 2em, temos um espaçamento. Diferente do pixel(px) o valor (em) é uma
medida relativa que se altera conforme o tamanho da letra e o número antes do “em”.

FORMATANDO SEÇÃO SOBRE

O seletor da nossa seção sobre sera setado com um “#” pois este seletor esta se referindo a um
id, logo é necessário a presença do “#” antes do nome do id.

A única formatação diferente desta seção foi o uso de outra cor, como pode se observar.

59
 Vamos agora formatar o parágrafo dessa seção:

O valor de 1000px, não vai deixar com que o parágrafo ultrapasse esse limite. O valor de 2,5em dá
um espaçamento melhor para o parágrafo em relação a sua margem inferior.

A propriedade max-width, limita um valor determinado para que o elemento não possa ultrapassar
aquele determinado valor.

Agora nós precisamos criar 2 botões para os links do cabeçalho e da seção sobre, para isso nós
iremos ir até o nosso arquivo index.html e criar uma classe botao:

Fazendo isto nós podemos chamar essa classe no arquivo css para poder alterá-lo, utilizando o
seletor de classe com o “ . ” na frente.

60
Depois de criar a class botão, nós já podemos trabalhar com ela no nosso arquivo css, precisamos
começar declarando o seletor sabendo que ela pertence a section sobre logo ficará escrito assim:

Para criar nós precisamos de um link, que nós ja temos e depois apenas fazer com o css uma
“caixa”, para abrigar este link, dando a ele um aspecto de botão mesmo.

Primeiro com estas 3 declarações, alteramos o fundo do link, retiramos o sublinhado, tirando a
decoração do texto e também alteramos a cor do texto.

Agora aplicamos o espaçamento do que fizemos antes, modelando o nosso botão, com 10pixels
de altura e 30 pixels de largura separando a borda do botão do texto, também podemos ver que foi
aplicado um border-radius, que cria uma borda arredondada de acordo com o valor de pixels que
for indicado no botão, deixando o aspecto mais suave. Logo após colocamos uma distância de 1em
do botão para a parte de baixo da seção.

61
 Nós iremos fazer a mesma coisa na nossa seção de cabeçalho, voltando um pouco para cima no
códio, iremos criar um novo bloco de declarações, abaixo do bloco header p.

Agora a única diferença do nosso botão será a cor dos elementos que serão trocados, enquanto
o botão ficará com a cor de fundo com um tom de rosa o texto terá a cor com um tom de branco:

Agora nós temos mais 2 seções prontas:

62
 FORMATANDO SEÇÕES SOBRE E JOGOS
Nosso próximo passo será configurar nossa seção de jogos, onde já temos as imagens adicionadas
porém ainda não temos uma ordem nem um tamanho ideal dentro do site.

Para mostrar todos os nosso jogos, precisamos fazer nós iremos escolher as configurações acima,
deixando um display flex novamente, a direção ainda em coluna, alinhando todos os itens ao centro
assim como o texto, e dando um espaço entre a seção de cima e esta.

Porém podemos perceber que a visualização ainda não é a ideal. Para consertar isto, primeiramente
vamos mexer no nosso título:

Colocando as margens desta maneira, daremos um bom espaço para o nosso título em relação as
imagens e a seção acima.

63
 Agora vamos configurar nossa imagem para ocupar somente 50% da tela, porém ainda no formato
de alinhamento em coluna.

Nós temos agora um modelo já mais organizado para a visualização Mobile(no celular), porém
não temos nenhuma especificação, precisamos agora colocar algum texto e já que nós estamos
fazendo um site que seria uma loja de games e artigos de computador, podemos colocar o nome
e um preço fictício nesses jogos. Para isso vamos voltar no nosso arquivo index.html e fazer estas
alterações:

64
Utilizamos o <h3> para o texto e a Tag <br> para pular uma linha entre o nome do jogo e seu preço.
Agora basta repetir o mesmo processo para os outros jogos, colocando seu nome e preço:

Podemos criar também um botão “COMPRAR” abaixo destes preços, basta adicionarmos um <h4>
colocar um link e formatamos assim como os botões anteriores:

Para melhorar, vamos colocar para cada conjunto desses uma div separada:

65
 Agora vamos no arquivo estilos.css e alterar o estilo do nosso botão:

Veja que no background-color utilizamos um nome de cor desta vez, invés do valor em
hexadecimal(letras e números), como já mostrado antes, o Brackets trás para nós todos os tipos
de cores de determinada cor, ao digitar “green”, é trazido para nós todos os estilos de verde, basta
escolher um e utilizar, assim como se fosse outras cores.

Veja que no background-color utilizamos um nome de cor desta vez, invés do valor em
hexadecimal(letras e números), como já mostrado antes, o Brackets trás para nós todos os tipos
de cores de determinada cor, ao digitar “green”, é trazido para nós todos os estilos de verde, basta
escolher um e utilizar, assim como se fosse outras cores.

Agora temos algo como uma loja virtual.

66
 FORMATANDO PORTFÓLIO
FORMATANDO PORTFÓLIO
Agora nós iremos formatar o nosso portfólio para que ele fique da melhor maneira possível
visualmente.

Primeiro nós vamos alinhar todos os itens e colocar a configuração normal com um display flex
organizado em coluna. Além disso deixaremos um padding de 20px em relação ao topo da seção
e uma margem de 20px também abaixo do h2 que nós temos.

67
 Agora nós vamos colocar um display block nas nossas imagens para poder retirar esse espaço que
existe entre elas.

Além disso vamos colocar o tamanho delas para ocupar somente o a largura da página, com o valor
do width 100%:

68
 FORMATANDO SEÇÃO CONTATO

Agora vamos partir para nossa section contato:

Se formos parar para analisar, iremos perceber que os comandos irão se repetir, isto porque nós
iremos precisar geralmente de uma configuração padrão assim como vemos nesta agora. Nós
iremos apenas alinhar os itens ao centro e colocar o espaçamento de 20 px para cada lado.

Agora só falta finalizarmos o nosso footer(Rodapé).

FORMATANDO FOOTER

Como nosso elemento footer apresenta somente este nome, sem ter nenhuma classe ou nada
parecido, podemos usar o seletor com o nome do próprio elemento “footer”. Veja que colocamos
os mesmos atributos como das outras classes além disse colocamos um espaço interno de 10px,
para cada lado.

69
 Então temos o resultado acima, se observarmos o nosso site agora finalizado na versão mobile nós
podemos ver que os elementos se encaixam perfeitamente para uma tela de celular ou até mesmo
um para de um tablet.

Porém se nós abrirmos em tela cheia ou expandirmos até um determinado ponto, nós iremos
perceber que o site continuará na versão mobile.

70
 CONFIGURANDO FULL SCREEN

E não é isso que nós queremos, então nós precisamos fazer com que o site fique apresentável,
tanto na versão Mobile(celular / tablet), quanto na versão Desktop(Notebook / computador). Para
isso nós precisamos utilizar um método do css chamado de media queries. Utilizando esse método
nós iremos configurar o site para que ele consiga se adaptar ao tamanho da tela do usuário, fazendo
com que ele seja um site responsivo.

A sintaxe para criar um media queries é a mostrada acima, onde iniciamos com o @media seguidos
da informações screen and e determinamos um valor mínimo para as configurações que vamos
colocar abaixo, o valor padrão é de 768 pixels.
O que vamos fazer agora é a configuração dos elementos para os modelos de Desktop.
Isso não implicará em todo código que já fizemos, nós iremos alterar apenas o tamanho de alguns
elementos e trocar a sua direção de Colunm(coluna) para Row(linha).

Nós iremos começar pelo menu de navegação:

71
 Veja que o elemento “Game Store” já está posicionado diferente, onde antes estava no sentido de
cima para baixo, com elementos um em baixo do outro, agora ele já se posicional da esquerda
para direita com o comando flex-direction: row;

Colocando este valor também na lista <ul> do menu de navegação, todos os elementos terão o
mesmo comportamento se alinhando da esquerda para direita ou ao lado do outro:

Agora vamos partir para o nosso elemento header:

Podemos ver que o elemento header está ocupando um espaço pequeno do site, se expandirmos
mais ainda ele ficará ainda menor, enquanto ele deve ser um elemento principal no site, sendo
a “cara do site”. Para aumentarmos o seu valor, basta alterarmos o seu tamanho em pixels e
organizar seus elementos:

72
Vamos partir para a nossa section jogos agora:

Teremos agora que colocar uma configuração um pouco diferente para nossa section de jogos,
onde vamos descobrir algumas propriedades novas.

A propriedade flex-wrap, permite que você diga ao código que você deseja uma quebra de linha
entre os elementos da section, no caso nós temos imagens e texto, então nós iremos quebrar a
cada div que criamos para esses elementos.

73
 A propriedade flex-start, usada no display flex, indica que é para a organização começar de onde o
display começa da esquerda para a direita. Abaixo podemos ver as possíveis flex-directions:

Agora os possíveis comandos para a disposição dos itens dentro do display:

74
Colocamos o valor do max-width para 1000px para que os itens não ultrapassem essa largura,
sempre ocuparam no máximo 1000 pixels. Também alinhamos o nosso título h2 ao centro.

Agora nós vamos poder alterar as div’s que contém os itens das imagens dos jogos e também o
texto com o botão comprar.

A propriedade flex-grow, vai indicar o quanto o elemento pode crescer, foi indicado que ele crescerá
com o valor 1, proporcionalmente em relação aos elementos que estão ao redor.

A propriedade flex-basis, vai indicar o tamanho base que esse elemento vai ter, colocamos o valor
base de 200px;

75
 A propriedade flex-basis, vai indicar o tamanho base que esse elemento vai ter, colocamos o valor
base de 200px;

Finalizamos a nossa section jogos, agora vamos partir para o portfólio:

Agora nós iremos configurar nosso portfólio de imagens para aparecer em tela cheia no nosso
navegador, para isso precisamos alterar a maneira que ele se apresenta:

colocamos o flex-direction com o valor para row(linha), assim os elementos não irão mais se alinhar
um abaixo do outro, mas sim um ao lado do outro até onde tiver espaço. O elemento flex-wrap, faz
com que haja uma quebra de linha entre os elementos.

Assim como as outras sections, vamos colocar o nosso cabeçalho para cima assumindo 100% da
largura da página e alinhando ele ao centro.

Agora o segredo está na formatação das nossas imagens, onde vamos colocá-las para assumir a
largura de 33.33% da página, isso fará com que elas se alinham uma ao lado da outra até completar
100% da página. Já a propriedade float com o valor left, irá fazer com que as imagens sempre
“flutuem/fiquem” à esquerda.

76
Partiremos agora para a nossa section contato:

Nós vamos precisar colocar os elementos na direção de linha, com quebra de linha e justificá-los
com um espaço em volta igual para todos.

Além disso colocamos uma largura máxima para esses elementos ocuparem na página, determinada
em 500 pixels, com a margem 0 para cima e para baixo e automática para os lados.

Deixaremos também o título e os parágrafos dentro destes elementos que seriam o telefone para
contato e o e-mail, com a largura de 100% da section.

77
 Ao final temos este resultado ma versão Desktop:

78
E este na versão Mobile:

A seguir nós iremos complementar nosso site, colocando os textos devidos e podendo incrementar
coisas novas nele, a fim de torná-lo cada vez mais profissional, você pode escolher o texto que
desejar para colocar, lembre-se que o site é uma loja virtual, onde podemos anunciar outros produtos
além dos jogos, e poderemos fazer isto adiante.

79
 CONHECENDO DREAMWEAVER
CONHECENDO DREAMWEAVER

Agora nós vamos conhecer o Dreamweaver, uma ferramenta muito utilizada e bem profissional. O
Drewamweaver é uma ferramenta que permite criar, gerenciar e formatar qualquer tipo de arquivo
referente a construção de sites. Ele faz parte do pacote da Adobe, sendo sua versão mais recente
o Adobe Dreamweaver CS6 e Adobe Dreamweaver CC. Iremos utilizar a versão CS6.

Ao abrir o Dreamweaver nós já percebemos a similaridade que ele tem com os outros programas
do pacote adobe, onde existe uma disposição de menus e painéis muito parecidas.

Ele já nos abre algumas opções de qual tipo de arquivo nós queremos construir ou formatar, clicando
no botão Open.. podemos escolher um projeto ou arquivo já existente. Iremos clicar nele e escolher
o projeto do nosso site que já criamos anteriormente.

80
No Dreamweaver é possível visualizar o seu projeto de maneiras diferentes dentro do próprio
programa.

81
 O modo que vimos antes é o modo de visualização do Código “Code”. Ele mostra o arquivo com o
código que você implementou.

O modo Split, permite você uma ideia de como está ficando o projeto, juntamente com a visualização
do código.

O modo Design permite você visualizar o site como um projeto editável visualmente, é possível
até mesmo apagar o texto que existe em qualquer parte, apagar espaços de padding entre outras
coisas, isso irá refletir diretamente no código, uma vez que será alterado o arquivo.

82
Além disso quando você seleciona um objeto do site, no painél direito é informado as propriedades
daquele objeto de uma maneira bem detalhada.

No modo Live, é mostrado a maneira como estaria ficando no site, porém pode haver uma certa
incompatibilidade de alguns elementos.

83
 Para tirar as dúvidas se o projeto esta realmente da maneira que você projetou, basta ir no ícone
do globo e escolher a opção de ver o projeto no navegador, clicando no Preview in ... Escolhemos
o Chrome para mostrar:

DOMÍNIO
Agora nós vamos ver como podemos publicar o nosso site, para isso nós teremos que ter um
servidor de hospedagem. Todo site precisa de um domínio, onde será por este domínio que o
usuário poderá encontrar o endereço do site. Domínio é um nome que serve para localizar e
identificar conjuntos de computadores na Internet. O nome de domínio foi concebido com o objetivo
de facilitar a memorização dos endereços de computadores na Internet. Sem ele, teríamos que
memorizar uma sequência grande de números.
Para ter um domínio é necessário pagar por ele, muitas empresas na internet oferecem este serviço,
onde você paga para ter um domínio de um site e hospedá-lo em algum servidor remoto que é
fornecido pela própria empresa que lhe vende o domínio. Um exemplo de domínio é o Google.com,
o domínio nada mais é que o nome do site e serve para que usuário possa encontrá-lo na internet.

HOSPEDAGEM

Hospedagem de site é o serviço de armazenamento de um site e disponibilização constante do

mesmo na internet, ou seja, o serviço de hospedagem possibilitará que seu site seja visualizado
24h por dia em todo o mundo.

84
Embora saibamos que é necessário pagar para ter um domínio próprio e a hospedagem, algumas
empresas também disponibilizam alguns domínios gratuitos com algumas limitações, porém
para nosso estudo será o suficiente. Nós iremos usar para hospedagem o domínio da empresa
000webhost, digite o seguinte endereço para localizar: br.000webhost.com

Clicando no botão inscrever-se gratuitamente irá abrir a página para você se cadastrar, nela você
irá inserir seu endereço de e-mail que também será seu login e abaixo irá escolher o nome que o
seu site terá, sabendo que no modo gratuito, sempre terá o endereço 000webhost após o nome.

85
 SUBINDO ARQUIVOS
Antes de começar você precisará confirmar o e-mail que colocou para que possa gerenciar o seu
site:

Agora com o e-mail verificado, vamos clicar em “File manager” (Gerenciador de Arquivos).

Role a tela para baixo e clique no botão “Fazer upload de arquivos agora”:

Será aberta esta página:

86
Agora você pode clicar no botão para fazer upload de arquivo:

87
 Seguindo esses passos irão ser adicionados os arquivos:

Vale lembrar que os arquivos devem estar dentro da pasta public_html. O que nós vamos fazer aqui
neste gerenciador é a mesma coisa que fizemos quando criamos nossos arquivos no computador,
basta recriar aqui no gerenciador do site e colocar os mesmos arquivos, sabendo disto precisamos
criar agora as pastas “img” e “css”.

Agora devemos abrir a pasta css e fazer o upload dos arquivos para dentro dela.

88
89
 Façamos o mesmo para a pasta de imagens, selecionando todas as imagens e abrindo dentro do
arquivo:

Depois disso nós já temos todos os arquivos necessário dentro do nosso site para que ele
funcione na web assim como no nosso servidor local do computador, onde já testamos e vimos seu
funcionamento.

Para ver o site em funcionamento na web, da maneira que ele está disponível para todos, basta
colocar o endereço que você escolheu para ele no navegador:

90
Ou clique nele voltando na página principal e clicando no endereço do seu site:

Lembrando que ao terminar o seu domínio vai ser: nomequecolocou.000webhostapp.com, assim

como no exemplo abaixo:

Veja que existe uma marca abaixo escrito “Powered by 000webhost”, mostrando que o seu site
já está no ar pelo servidor da empresa. Agora vamos ver como podemos configurar nosso projeto
no Dreamweaver para ter ligação direta com o projeto que está no ar, para que quando façamos
alguma alteração, isso possa refletir no site que já está no ar.

91
 CONFIGURANDO ACESSO

Para configurarmos o nosso servidor do site no Dreamweaver, é necessário ir no menu Site ->
Manage Sites.

Depois disso siga para a opção New Site:

Selecione a opção Servers no menu do lado esquerdo e clique no botão “ + “ para adicionar um
novo servidor:

92
O nome do Servidor você poderá escolher, a conexão será sempre FTP. Agora endereço do FTP
(FTP Adress), e username nós podemos voltar ao nosso site para poder conferir. Vá até o servidor
da web que você acabou de utilizar para por o site no ar e clique no menu configurações:

Clique na opção “Geral” e irá se abrir as informações do seu site.

Nós precisamos encontrar:

O nome do host ( Corresponde ao FTP Adress );

O nome de usuário;
Utilizar a mesma senha que utilizamos para entrar no gerenciador do seu site.

93
 Nós iremos precisar somente dessas informações para preencher a configuração do servidor no
Dreamweaver. Basta copiar os nomes e colocar nos campos certos:

Depois de preencher tudo corretamente e clicar no botão “Test” irá aparecer a seguinte mensagem:

94
Na opção Root directory, nós iremos colocar o nome da pasta de arquivos que se encontra no
gerenciador de arquivos do site, que no nosso caso é a “public_html” que é onde se encontra todos
os arquivos que ficam visíveis ao público. Nela ficam guardados os arquivos do site.

No campo de Web URL, basta colocar o endereço do seu site. Salve as configurações e agora
na aba de Site no canto esquerdo, coloque o nome do seu site e o local da pasta que guarda os
arquivos desse site, no nosso caso a pasta projeto, salve novamente:

95
 Depois de salvar irá abrir outra janela mostrando que já foi adicionado seu novo site:

Depois clique em “Done” para finalizar. Agora no painel direito é possível ver seus arquivos na
pasta:

96
 OO QUE
QUE É ÉJQUERY
JQUERY?

Vamos ver agora como podemos inserir alguns novos elementos no nosso site, vamos adicionar
um elemento de Jquery que será uma box de slides.

jQuery é uma biblioteca de funções JavaScript que interage com o HTML, desenvolvida para
simplificar os scripts interpretados no navegador do cliente (client-side). ... jQuery é uma biblioteca
de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public
License versão 2.

O JavaScript é uma linguagem de pequenos scripts (bloco de códigos) que permitem que o seu site
tenha um interação direta com o usuário ou até mesmo possibilita a aplicação de alguns efeitos em
elementos do seu site. Porém os blocos de códigos do JavaScript são muito grandes e o jQuery
surgiu para facilitar o nosso trabalho na implementação desses códigos. Existem 2 maneiras de
utilizar o jQuery, você pode instalar a biblioteca no seu computador através do site do próprio
desenvolvedor ou você pode usar o script que permite o acesso remoto a essa biblioteca.

97
 APLICANDO JQUERY

Nós iremos utilizá-lo da maneira mais simples, acessando a biblioteca remotamente. Para fazer
isso nós precisamos declarar dentro do nosso código html na tag <head>, o link dentro de um script
para poder ter acesso. Abra seu arquivo index.html e vamos começar.

Como pode se observar no exemplo acima, existem 2 scripts, um serve para “puxar” a biblioteca
remota do jQuery e o segundo serve para declarar o tipo de script que você quer utilizar, neste caso
estamos utilizando o script magnifier. Este script serve para podermos aumentar o tamanho de uma
imagem em uma certa quantidade, ao clicar na mesma.
Nesta aula no tópico de arquivo de apoio você poderá baixar um pacote de arquivos, procure o
arquivo jquery.magnifier.js e coloque dentro da sua pasta de projeto. Já o arquivo com nome de
script.txt, você deverá abrir, copiar o conteúdo e colar dentro da sua Tag <head>.

Depois de adicionar o arquivo jquery.magnifier.js na sua pasta de projeto e setar os 2 scripts citados,
basta criar uma classe para as suas imagens do portfólio:

98
Veja agora o funcionamento no site:
VISUALIZAÇÃO NORMAL

VISUALIZAÇÃO DEPOIS DE CLICAR

A imagem aumenta conforme está no declarado no código de javascript que você adicionou
anteriormente à sua pasta de projeto. Isto facilita muito a vida do desenvolvedor, porque além de
não precisar escrever todo o código javascript para fazer o efeito, você também não precisa fazer
grandes coisas no seu arquivo index, fazendo com que o trabalho fique bem mais produtivo e
rápido.

Além desse efeito existem muitos outros que podemos encontrar, podemos pesquisar por vários
tipos de efeitos na internet, onde será disponibilizado todos os arquivos necessários para fazer com
que o efeito funcione. Bastando somente implementar os arquivos e setar no index.

99
 Como vimos anteriormente podemos aplicar o jQuery para conseguir efeito sobre um objeto, no
caso conseguimos em cima de uma imagem, porém, podemos utilizar o jQuery para obter um
“pacote” todo de elementos, já funcionando. Veja o exemplo:

Este exemplo nós trás um menu muito agradável visualmente e bem funcional onde clicando em
cada barra, podemos vê-la deslizando para baixo e trazendo os seus link’s.

Para aplicar este efeito no nosso site bastaria escolher uma section e incrementá-lo dentro do
nosso código fazendo as conexões com os arquivos necessários para compor o efeito. Vamos ver
como esse menu ficaria em uma nova página.

100
Este menu já está pronto e disponível na sua pasta de arquivos de apoio, basta fazermos os
seguintes passos:

Copie o código que está dentro do arquivo códigodomenu.txt, logo depois cole dentro do index.html
do seu site, logo abaixo da Tag <body>.

CTRL + A CTRL + C

101
 CTRL + V

Depois pegue o código dentro do arquivo script.menu.txt e cole dentro da tag <head>.

102
Agora copie o arquivo jquery.menu.js e cole dentro da sua pasta de projeto:

Agora copie o arquivo estilo.menu.css e cole dentro da pasta css, que está dentro da sua pasta de
projeto:

Agora que colocamos o arquivo dentro da nossa pasta de css, precisamos dizer ao nosso arquivo
index.html para utilizar o estilo dessa página de estilos também, vamos colocar dentro da Tag
<head>, Outro link:

103
 Agora que colocamos o arquivo dentro da nossa pasta de css, precisamos dizer ao nosso arquivo
index.html para utilizar o estilo dessa página de estilos também, vamos colocar dentro da Tag
<head>, Outro link:

Porém nós não podemos deixar este efeito no nosso site da maneria que ficou, como mostrado
acima. Então vamos apagar o código dele do nosso index por enquanto assim como o link da
página css dele, para que não cause nenhum efeito negativo no nosso site.

APAGAR

Selecione todo código do menu que colocamos e apague também. Lembre-se que este código
ainda vai estar salvo para utilizar novamente, pois está disponível nesta aula como arquivo de
apoio.
APAGAR

104
 ORGANIZANDO OS ARQUIVOS
ORGANIZANDO ARQUIVOS

Para organizar nossa pasta de projeto, vamos criar uma pasta com nome “js”, nela iremos guardar
todos os arquivos .js que temos até agora, podendo incluir outros mais, a única alteração que
teremos que fazer no código é no lugar do link do arquivo js, onde vamos colocar antes de todo link
o js/.

105
 Nos outros scripts não precisamos colocar, pois eles são acessados remotamente através de
um endereço http, alocado em um servidor remoto, enquanto estes que precisamos colocar são
referentes aos arquivos que temos dentro da nossa pasta.

Fazendo isto você poderá baixar os arquivos de apoio desta aula, nele você irá ver que temos
alguns outros arquivos, agora referente a construção de um slide.

Iremos começar abrindo o arquivo códigoslide.txt copiando o seu conteúdo e colando entre a Tag
</nav> E a Tag <header>.

106
Depois disso basta copiar para sua pasta de projeto os outros arquivos. Dentro da pasta css,
coloque o arquivo css que está disponível no seu arquivo de apoio, faça o mesmo para o arquivo.js.

107
 ADICIONANDO AS IMAGENS

Agora dentro do arquivo de apoio, você verá uma pasta “img”, nela está contida todas as imagens
que vamos estar colocando no nosso slide, copie as imagens da pasta e coloque dentro da sua
pasta de imagens:

É importante pro funcionamento do slide, que as imagens fiquem com os mesmos nomes, caso
contrário precisaríamos alterar no html também. Agora vamos dar um Preview no nosso site, para
ver como está funcionando, deixe o navegador no modo de tela cheia padrão.

Depois de carregar nós poderemos ver o slide assim:

108
Para testar a funcionalidade dele, basta clicar nos botões para frente para trás e no botão do meio
que é responsável por fazer que o slide passe as imagens automaticamente de 3 em 3 segundos.

Assim que se clica no botão de play, do meio ele faz o seu papel de startar o slide e depois some.

Agora que podemos ver o funcionamento e a aplicação de um jQuery, nós vamos ver um pouco
sobre como podemos alterá-lo também. Por exemplo se quisermos alterar o conteúdo, ou até mesmo
acrescentar algo no nosso slide precisamos conhecer um pouco do código que estamos lidando, no
que diz respeito a parte de html e css. Não precisaremos mexer no arquivo de JavaScritp, porque
a aplicação já está funcionando perfeitamente e facilmente quando formos trabalhar com jQuery
precisaremos alterar algo nesse tipo de arquivo.

109
 FORMATANDO BOTÕES

Se nós quisermos alterar o a cor do nosso botão por exemplo, nós devemos achar no código, onde
fica esse botão:

Logo nas primeiras linhas de código nós conseguimos encontrá-los um tem o nome de “control_
next”, que seria o botão para avançar, o outro tem o nome de “play”, que seria o botão do meio para
rodar o slide automaticamente, e o outro seria o de voltar o slide “control_prev”. Agora que nós já
identificamos vamos tentar achar no arquivo css desse jQuery, os botões que queremos alterar.

110
Essas informações são todas referentes aos nosso botões, desde sua posição até sua cor e
composição. O que vamos fazer aqui é brincar, alterando suas cores. Com a base que já conseguimos
em css, nós já sabemos que o que corresponde a cor de fundo do botão é o background enquanto
a propriedade color, será a cor da letra dentro do botão. Nós podemos inverter e ver como fica.

ORIGINAL ALTERADO

Nós podemos também mudar o tamanho do espaço em volta da letra que seria o sinal de “ > “,
Dentro do botão, isso poderia ser feito através da propriedade padding. Agora vamos ver como
ficou as cores do nosso botão.

111
 Vamos alterar um pouco o tamanho dos botões laterais:

ORIGINAL ALTERADO

112
Nós também poderíamos alterar o nosso botão do meio, para estilizar melhor ele. Vamos alterar
usando as propriedades: padding, border-radius e left.

ORIGINAL ALTERADO

Aumentando somente o segundo valor do padding para 35px, vamos poder aumentar a largura do
botão, porque será dado espaço para as laterais do texto dentro dele que é o “ >> “. Alterando o valor
do left para 46% nós iremos realocar o botão para o lugar correto já que ele está com um tamanho
diferente. Temos também de alterar o top para 43% para realocar ele para cima. Colocando um
border-radius, nós vamos arredondar suas pontas, deixando assim:

Como podemos ver existe várias maneiras de alterar esses estilos, você pode “brincar” com essas
alterações para poder ver o melhor estilo que lhe agrade.

113
 CONHECENDO
CONHECENDO PHPPHP

O PHP( Hypertext Preprocessor), é uma linguagem de script open source de uso geral, muito
utilizada, e especialmente adequada para o desenvolvimento web e que pode ser embutida dentro
do HTML.

As páginas PHP contém HTML em código mesclado que faz "alguma coisa" (neste caso, mostra
"Olá, eu sou um script PHP!"). O código PHP é delimitado pelas instruções de processamento (tags)
de início e fim <?php e ?> que permitem que você pule para dentro e para fora do "modo PHP".

O que distingue o PHP de algo como o Javascript no lado do cliente é que o código é executado
no servidor, gerando o HTML que é então enviado para o navegador. O navegador recebe os
resultados da execução desse script, mas não sabe qual era o código fonte. Você pode inclusive
configurar seu servidor web para processar todos os seus arquivos HTML com o PHP, e então não
haverá realmente nenhum modo dos usuários descobrirem se você usa essa linguagem ou não.

Nós iremos ver apenas algumas coisas básicas do php, mas ao final teremos um funcionamento de
formulário perfeitamente prático e profissional.

114
 CONSTRUINDO FORMULÁRIO
Nós temos dentro do nosso projeto na página index, um campo de contato. Usaremos este mesmo
campo para inserir o nosso formulário de contato, com ele a pessoa poderá enviar um e-mail
diretamente para o seu com as informações descritas no formulário. Esta é uma maneira muito
simples e fácil de conseguir contato com seus clientes.

Antes de tudo nós deveremos criar um formulário dentro da seção de contatos. O formulários
deverá conter as informações de Nome, E-mail, Assunto e a Mensagem.

Colocamos o formulário logo abaixo dos elementos que já tinham na section de contato. Colocamos
entre cada elemento um <br>, A Tag <br> Serve para pular uma linha no site, assim cada elemento
ficará em uma linha diferente. Veja também que colocamos um name=”” E também uma class=””.
Nós usaremos a propriedade name para termos uma identificação para esses elementos quando
forem interagir com o php, e a class será utilizada para a nossa formatação no CSS. Veja como
ficou por enquanto:

115
 FORMATANDO COM CSS

Agora nós iremos alterar estes elementos no CSS. Vamos construir um formulários mais elegante.
Crie no arquivo estilos.css, dentro da seção contato alguns outros blocos de comando, com o id do
nosso formulário que foi chamado de formulário também.

Esses primeiros comando vão normalizar os links que antes estavam em azul e sublinhados e
também vão colocar um padrão de cor e tamanho das letras do nosso formulário.

Agora vamos criar uma formatação também para o tamanho dos campos e para as bordas, onde o
usuário vai digitar as suas informações.

116
Com esse comandos nós vamos poder formatar tanto os campos comuns como o campo do textarea
que foi determinado com um campo maior do que os outros, já que seu objetivo é escrever uma
mensagem de algumas linhas. Nosso textarea não possui classe, então a sintaxe dele pode ser
escrita sem o “ . “ antes do seu nome, já os outros pertencem todos a mesma classe, onde deve ser
chamada somente o nome da classe “campos”. Veja o resultado:

Nós podemos também modificar o efeito de quando passamos o mouse por cima do campo de texto,
para que ele mude sua cor ou faça qualquer outra coisa. Vamos utilizar o exemplo de mudança da
cor da borda.

117
 Para isso nós vamos criar os seguinte blocos de comandos:

A propriedade “hover” seguida depois de uma classe ou objeto que for informado, vai fazer com que
os comandos seguintes aconteçam assim que o usuário passar o mouse por cima daquele objeto.
No nosso caso estamos dizendo que assim que o usuário passar o mouse sobre os objetos de
caixa de texto a borda ficará com 5px assim como antes e também a cor desta borda ficará como
#F00 que é um vermelho forte. Enquanto no campo de textarea só colocamos o efeito hover como
a borda colorida. Veja o resultado:

Ao passar o mouse por cima da caixa de texto:

Ao passar o mouse por cima da caixa do textarea:

118
Vale lembrar que estes efeitos são demonstrativos para que se tenha noção do que se pode fazer
com um campo de formulário, porém lembre-se que as vezes o mais simples pode ser mais bonito.

CRIANDO PÁGINA PHP

Vamos agora partir para o nosso arquivo.php. O nosso objetivo principal é fazer com que este
formulário receba as informações escritas nele e automaticamente mande isso para o seu e-mail,
assim você terá controle maior sobre a demanda de possíveis clientes. Para isso nós iremos
precisar criar um novo arquivo com extensão .php.

Após clicar em criar irá ser aberto o arquivo com a base dos comandos HTML, porque o php
funciona integrado com o código e as páginas html.

119
 Agora entre as Tag’s <body> ... </body>, será onde vamos colocar nosso conteúdo. Para começar
a escrever um código em php, vamos utlizar as Tag’s <?php...?>. Por exemplo se quisermos exibir
a mensagem “Olá mundo” na página, deveremos ter um comando echo e logo em seguinte aquilo
que queremos que apareça, lembrando sempre que dentro do php, podemos utilizar Tag’s HTML.

Utilizamos um parágrafo com a frase escrita e ela foi exibida no navegador. Agora nós vamos
começar a desenvolver a nossa página php para que ela funcione como um script que irá fazer a
nossa conexão do site com o e-mail. Enquanto formos avançando iremos entender mais um pouco
sobre esta linguagem.

O que devemos fazer primeiramente, é fazer a nossa página pegar as informações e gravar. Para
isso iremos criar algumas variáveis. Variáveis são “containers” temporários de dados, que ficam
alocados na memória, no PHP uma variável pode conter diversos tipos de dados, strings, inteiros,
números ponto flutuante, objetos, etc.

120
A sintaxe para declarar uma variável no PHP é a seguinte:

Onde dentro das aspas simples [‘ ‘], ficará o elemento que você quer receber. Funciona da seguinte
maneira:

Depois do “$” será o nome da sua variável, o nome da variável será o que o php vai precisar sempre
que você for tentar realizar alguma ação com ela. Para não dificultar nosso trabalho, nós utilizamos
o mesmo nome dos campos que vamos utilizar, que já foram definidos no html.

Nesta parte é dito ao programa que, a variável $nome, irá receber o que entrar no valor dentro das
aspas simples contidas no colchetes. Ou seja o comando $_POST faz a leitura do que irá ser escrito,
desde que seja declarado o que ele deve gravar. Na nossa variável nome nós iremos colocar o
valor dentro das aspas, exatamente igual ao que foi colocado no valor “name” do formulário:

Então basta preenchermos todos os campos de valor do $_POST com os nomes que foram
determinados no name de cada elemento do formulário.

Assim tudo que for digitado no formulário pelo usuário será gravado dentro dessas variáveis.

121
 Bom agora uma parte já esta feita, porém precisamos definir o que irá ser feito depois de aplicação
gravar os dados que forem escritos pelo usuário. Nós queremos que os dados que o usuário
preencher seja enviado em um e-mail, então vamos criar uma variável com nome de $corpoemail,
para que nela seja gravado aquilo que deve aparecer no seu e-mail quando alguém preencher o
formulário.

Como podemos ver acima, a variável $corpoemail está recebendo esses valores: um título de fale
conosco e o nome da empresa; Nome, E-mail, Assunto e Mensagem. Lembrando que tudo que nós
queremos que apareça como texto deve estar dentro das aspas simples ( ‘ ‘ ). O que nos falta agora
é dizer qual o nome, e-mail, assunto e mensagem nós queremos que apareça.

Agora nós devemos dizer para o código que depois desses textos apareçam os respectivos nomes
correspondendo ao que os usuários digitaram, ou seja o nome, e-mail, assunto e mensagem que o
usuário preencher no formulário. Fazendo isto será enviado para o seu e-mail da maneira que for
configurado aqui. Então para adicionar o que o usuário irá digitar devemos chamar as variáveis que
criamos lá em cima, onde agora fica armazenado os dados do formulário preenchido.

Veja que utilizar o “ . “ para unir outro objeto ao nosso texto, que no caso são as variáveis que
criamos. Além disso também temos que colocá-las entre aspas simples ( ‘.$variável. ‘ ).

Agora nós temos que adicionar a ação de enviar todas as informações para um e-mail, faremos
utilizando o comando mail(“e-mail para onde vão as mensagens”), além disso nós temos que
chamar a variável que está guardando todas as informações que devem ir para o e-mail que á a
variável $corpoemail. Podemos por também uma pequena mensagem de “Fale conosco”, tudo isso
deve ser separado por vírgulas para que o código entenda cada elemento. Então ficará assim:

seuemail

Porém quando esse e-mail for enviado o usuário não tem como saber se as informações foram
realmente enviadas, para isso vamos criar uma condição de envio. Vamos dizer ao programa que
se caso o e-mail for enviado apareça uma mensagem na tela para o usuário que a mensagem foi
enviada com sucesso. Para isso nós usaremos o echo e um pequeno script de alerta.

122
Para isso nós teremos de colocar nossa linha de código de enviar e-mail dentro de um “ if ”. O if cria
uma condição “ SE “. Ou seja , Se ( acontecer tudo certo que está aqui ) { então faça isso }. Ficaria
assim o nosso código:

seuemail

Lembrando que a sintaxe do if deve ser assim: if (condição) {ação}, sempre sendo fechado com as
chaves depois de terminar a ação.

Depois de terminar, volte no seu formulário na página index.html e coloque na propriedade action
o nome “enviar.php”.

Agora salve a sua página php com este nome, assim as 2 páginas vão poder se conectar assim
que o formulário for enviado.

123
 Agora nós temos que criar um botão para enviar este formulário, vamos voltar no nosso formulário
na página index.html e criar um botão de Enviar.

Vamos colocar ele na classe “botao” para que possamos editar no css.

Veja o resultado:

124
 SCRIPT DE REDIRECIONAMENTO
Agora nós precisamos colocar um pequeno script para que quando enviarmos o formulário já
preenchido para o e-mail, depois da mensagem de e-mail enviado com sucesso, haja um refresh na
página e ela volte para o index.html. O código deverá ser colocado entre as Tag’s <head>...</head>

Depois de colocar este código que está disponível no arquivo de apoio desta aula, vamos precisar
chamar este código, então vamos abaixo do último script de alert e incrementar outro scrip:

seuemail

Isto vai fazer com que depois de enviar a mensagem, automaticamente a página volte para o index.
html. Agora vamos atualizar as filas com o nosso servidor que já configuramos.

Depois de fazer a atualização das filas, configure o seu server para test também, assim os arquivos
de php irão funcionar.

125
 TESTANDO A APLICAÇÃO

Vamos preencher o nosso formulário e enviar para ver seu funcionamento.

126
Depois disso deverá aparecer a mensagem:

Assim que clicar em OK, o site deverá voltar a página principal:

Agora basta verificar se este e-mail chegou realmente na caixa de mensagem do e-mail que você
determinou na página de enviar.php:

seuemail

127
 Clicando na mensagem, podemos ver todas as informações exatamente como foi preenchido no
formulário, isto quer dizer que nosso formulário está funcionando perfeitamente.

128