CONSTRUÇÃO DE

WEBSITES COM
PHP E MYSQL
 Sobre o Instrutor
• Formado em Ciências da Computação e pós-Graduado em Sistemas de
Informação.
• Atuo como Gerente de TI do Coren-DF.
• Atuei por mais de 15 anos como professor universitário.
• Atuei por 5 anos como instrutor de cursos técnicos e de qualificação
profissional no Senac.

2
 Sobre você
• Nome e como gostaria de ser chamado(a).
• Local onde mora.
• Porque está fazendo este curso?
• Quais são suas expectativas?

3
 Sobre o curso
• Este curso tem como objetivo proporcionar ao aluno, conceito e conhecimento
sobre desenvolvimento de sites utilizando a linguagem de programação PHP,
além de apresentar as principais características de Bancos de Dados, com foco no
MySQL.
• É destinado a pessoas interessadas em desenvolver websites com linguagem de
programação PHP e Banco de Dados MySQL.

4
 INTRODUÇÃO E
UTILIZAÇÃO DE UM
AMBIENTE DE
PROGRAMAÇÃO WEB
 World Wide Web (WWW)
• O World Wide Web (WWW) é um termo técnico (e anglicismo de tecnologia da
informação) que foi traduzido para a língua portuguesa como rede mundial de
computadores, também conhecido como Web, que designa um sistema de
documentos em hipermídia que são interligados e executados na Internet.
• Os documentos podem estar na forma de vídeos, sons, hipertextos e imagens.
Para consultar a informação, pode-se usar um programa de computador
chamado navegador web (Internet Explorer, Google Chrome, Mozilla Firefox,
Microsoft Edge, Opera etc), para baixar informações (chamadas "documentos" ou
"páginas") de servidores web (ou "sítios") e mostrá-los na tela do usuário (tela do
utilizador).
• O usuário (utilizador) pode então seguir as hiperligações (links) na página para
outros documentos ou mesmo enviar informações de volta para o servidor para
interagir com ele. O ato de seguir hiperligações é, comumente, chamado
"navegar" ou "surfar" na Web. 7
 Padrões
• A funcionalidade da web é baseada em três padrões:
• Uniform Resource Locator (URL) ou ocalizador uniforme de recursos, um sistema
que especifica como cada página de informação recebe um "endereço" único
onde pode ser encontrada.
• protocolo://domínio:porta/caminho/recurso?query_string#fragmento
• Hypertext Transfer Protocol (HTTP) ou Protocolo de Transferência de Hipertexto,
um protocolo que especifica como o navegador e servidor web comunicam entre
si.
• HyperText Markup Language (HTML) ou Linguagem de Marcação de Hipertexto,
uma linguagem de marcação para codificar a informação de modo que possa ser
exibida em uma grande quantidade de dispositivos.

8
 Funcionamento
• Visualizar uma página web ou outro recurso disponibilizado normalmente inicia
ou ao digitar uma URL no navegador ou seguindo (acessando) uma hiperligação.
Primeiramente, a parte da URL referente ao servidor de rede é separada e
transformada em um endereço IP, por um banco de dados da Internet chamado
domain name system (DNS). O navegador estabelece, então, uma conexão TCP-IP
com o servidor web localizado no endereço IP retornado.
• O próximo passo é o navegador enviar uma requisição HTTP ao servidor para
obter o recurso indicado pela parte restante da URL (retirando-se a parte do
servidor). No caso de uma página web típica, o texto HTML é recebido e
interpretado pelo navegador, que realiza então requisições adicionais para
figuras, arquivos de formatação, arquivos de script e outros recursos que fazem
parte da página.
• O navegador, então, renderiza (reconstitui) a página na tela do usuário
(utilizador), assim como descrita pelos arquivos que a compõe. 9
Funcionamento - Modelo Cliente Servidor
na Web

10
 Client-side
• É tudo processado no lado do cliente. O client-side é interpretado diretamente
pelo browser (navegador) do usuário.
• Sendo assim ao acessar uma página web o HTML, CSS e JavaScript são
interpretados todos pelo navegador sem intervenção nenhuma de um servidor.
Por isso podemos exibir o código fonte em nosso browser e visualizar o HTML,
CSS e o JavaScript.

11
 Server-side
• O oposto do client-side. Aqui as informações são processadas por um servidor
web que interpretara e retornará o resultado que será exibido no browser. Sendo
assim não é possível visualizar o código de uma aplicação rodando no Server-side.

12
 Servidor Web
• Servidor web é um software responsável por aceitar pedidos em HTTP de
clientes, geralmente os navegadores, e servi-los com respostas em HTTP,
incluindo opcionalmente dados, que geralmente são páginas web, tais como
documentos em HTML com objetos embutidos (imagens, etc.) ou um
computador que executa um programa que provê a funcionalidade descrita
anteriormente.
• Os sites e as aplicações web são implantados em computadores denominados
Web Servers.
• O mais popular, e mais utilizado no mundo, é o servidor Apache (software livre).
A Microsoft possui a sua própria solução denominada IIS (Internet Information
Services).

13
 Aplicação web
• Em computação, aplicação web designa, de forma geral, sistemas de informática
projetados para utilização através de um navegador, através da internet ou
aplicativos desenvolvidos utilizando tecnologias web HTML, JavaScript e CSS.
Pode ser executado a partir de um servidor HTTP (Web Host) ou localmente, no
dispositivo do usuário.
• Uma aplicação web também é definida em tudo que se é processado em algum
servidor, exemplo: quando você entra em um e-commerce a página que você
acessa antes de vir até seu navegador é processada em um computador ligado a
internet que retorna o processamento das regras de negócio nele contido. Por
isso se chama aplicação e não simplesmente site web.

14
 Desenvolvimento Web
• Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de
sites, na Internet ou numa intranet. Este é o profissional que trabalha
desenvolvendo websites, podendo ser um Web Designer (Desenvolvedor do
Layout), ou Web Developer(Desenvolvedor de sistemas).
• O desenvolvimento refere-se a um processo de construção e testes do software
especifico para a web, com a finalidade de se obter um conjunto de programas,
que satisfazem as funções pretendidas, quer em termos de usabilidade dos
usuários ou compatibilidade com outros programas existentes.
• O desenvolvimento web pode variar desde simples páginas estáticas a aplicações
ricas, comércios eletrônicos ou redes sociais.

15
 Codificação no cliente (Front-end)
• A separação de sistemas de software em front-end e back end simplifica o
desenvolvimento e separa a manutenção.
• Uma regra de ouro é que o lado front (ou "cliente") é qualquer componente
manipulado pelo usuário.
• Desenvolvedor front-end: é o responsável que projeta as interfaces de um
website. São eles que trabalham com o HTML, JavaScrip e o CSS para construir as
páginas web.
• O desenvolvedor front-end é responsável por “dar vida” à interface. Trabalha com
a parte da aplicação que interage diretamente com o usuário. Por isso, é
importante que esse desenvolvedor também se preocupe com a experiência do
usuário.
• Na parte de estudo, este profissional foca em HTML (linguagem de marcação),
CSS (linguagem de estilo) e JavaScript (linguagem de script/programação). 16
 Codificação no servidor ( Back-end )
• O código do lado servidor (ou "back-end") reside no servidor.
• Desenvolvedor back-end: é o responsável por dinamizar o site através das
linguagens de programação.
• Desenvolvedores que preferem se especializar apenas em back-end, geralmente,
não são muito bons em deixar páginas bonitas e com boa usabilidade, mas são
melhores em regras de negócio, banco de dados e todas as coisas que rodam no
servidor.
• É o back-end que fornece e garante todas as regras de negócio, acesso a banco de
dados, segurança e escalabilidade.
• Esses desenvolvedores trabalham com linguagens de programação como, por
exemplo, Java, C#, PHP, Python, Ruby ou até mesmo JavaScript (sim, tem jeito de
rodar JavaScript no servidor também).
17
18
Conceitos básicos
de HTML5
 O que é HTML?
• O HTML é uma das linguagens que utilizamos para desenvolver websites. O
acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em
português Linguagem de Marcação de Hipertexto.
• O HTML é a linguagem base da internet. Foi criada para ser de fácil entendimento
por seres humanos e também por máquinas, como por exemplo o Google ou
outros sistemas que percorrem a internet capturando informação.
• Atualmente a HTML encontra-se na versão 5 e é padronizada pelo W3C (World
Wide Web Consortium), uma organização internacional responsável por
estabelecer padrões para a internet, como a linguagem XML, as CSS e o SOAP.

20
 O que é HTML segundo W3C
• HTML significa Hyper Text Markup Language.
• HTML descreve a estrutura das páginas da Web usando marcação.
• Os elementos HTML são os blocos de construção de páginas HTML.
• Os elementos HTML são representados por tags.
• As tags HTML peças de conteúdo, como "título", "parágrafo", "mesa", e assim por
diante
• Browsers não exibem as tags HTML, mas usa para processar o conteúdo da
página.

21
 Quem criou o HTML?
• Tim Berners-Lee. Esse é o nome do homem que criou o HTML. Ele criou o HTML
para a comunicação e disseminação de pesquisas entre ele e seu grupo de
colegas. O HTML ficou bastante conhecido quando começou a ser utilizada para
formar a rede pública daquela época, o que se tornaria mais tarde a internet que
conhecemos hoje.

22
 Marcas ou marcadores (tags)
• Todo documento HTML possui marcadores (do inglês: tags), palavras entre
parênteses angulares (chevron) (< e >).
• Os marcadores são os comandos de formatação da linguagem.
• Um elemento é formado por um nome de marcador (tag), atributos, valores e
filhos (que podem ser outros elementos ou texto).
• Os atributos modificam os resultados padrões dos elementos e os valores
caracterizam essa mudança.

23
 Estrutura Básica HTML
• doctype – tipo do documento
• <html> – tag principal, ela marca o início e o final
do documento.
• <head> – tag usada para delimitar o cabeçalho do
documento. Dentro dela outras tags de cabeçalho
serão usadas, como o title, meta, link, entre
outros.
• <title> – tag usada para indicar o título do
documento.
• <body> – tag usada para definir o corpo do
documento. Dentro dela serão colocadas as tags
que irão compor a nossa página

24
25
26
27
 HTML Títulos
• Cabeçalhos HTML são definidas com a <h1> de <h6> tags.
• <h1> define o título mais importante. <h6> define o título menos importante:
• Exemplo
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>

28
 HTML parágrafos
• Parágrafos HTML são definidas com a <p> tag:
• Exemplo:
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>

29
 Links em HTML
• Links HTML são definidas com a <a>tag:
• Exemplo:
• <a href="https://www.w3schools.com">This is a link</a>

30
 Imagens de HTML
• Imagens HTML são definidas com a <img> tag.
• O arquivo de origem ( src), texto alternativo ( alt), width e height são fornecidos
como atributos:
• Exemplo:
• <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

31
 Botões HTML
• Botões HTML são definidas com a <button>tag:
• Exemplo:
• <button>Click me</button>

32
 Listas de HTML
• Listas HTML são definidas com a <ul>(lista não ordenada / bala) ou o
<ol>(ordenado / lista numerada) tag, seguido por <li> tags (os itens da lista).
• Exemplo:
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
• </ul>

33
 HTML Styles
• O HTML styleatributo tem a seguinte sintaxe :
• <tagname style="property:value;">
• O background-color propriedade define a cor de fundo para um elemento HTML.
• <body style="background-color:powderblue;">
• O color propriedade define a cor do texto para um elemento HTML:
• <h1 style="color:blue;">This is a heading</h1>
• A font-family propriedade define a fonte a ser usado para um elemento HTML:
• <h1 style="font-family:verdana;">This is a heading</h1>
• A font-size propriedade define o tamanho do texto para um elemento HTML:
• <h1 style="font-size:300%;">This is a heading</h1>
• A text-align propriedade define o alinhamento do texto horizontal para um elemento HTML.
• <h1 style="text-align:center;">Centered Heading</h1>

34
 Elementos formatação HTML
• <b> - Texto em negrito
• <strong> - texto Importante
• <i> - O texto em itálico
• <em> - texto enfatizado
• <mark> - texto marcado
• <small> - texto pequeno
• <del> - O texto excluído
• <ins> - Texto inserido
• <sub> - Texto Subscrito
• <sup> - texto sobrescrito

35
 HTML tags de comentário
• <!-- This is a comment -->

• <p>This is a paragraph.</p>

• <!-- Remember to add more information here -->

36
 Valores de cor
• Em HTML, as cores também pode ser especificado usando valores RGB, valores HEX, valores HSL,
valores RGBA e valores HSLA:
• Em HTML, uma cor pode ser especificado como um valor RGB, usando a seguinte fórmula: RGB (
vermelho, verde , azul )
• Cada parâmetro (vermelho, verde e azul) define a intensidade da cor entre 0 e 255.
• Por exemplo, RGB (255, 0, 0) é apresentado como vermelho, vermelho porque é definido para o
valor mais alto (255) e os outros são definidos como 0.
• Para exibir a cor preta, todos os parâmetros de cor deve ser definida como 0, assim: rgb (0, 0, 0).
• Para exibir a cor branca, todos os parâmetros de cor deve ser definida para 255, assim: rgb (255,
255, 255).
• <h1 style="background-color:#ff6347;">...</h1>

37
Valores de cor

38
 HTML Tabelas
• Uma tabela HTML é definido com a <table> tag.
• Cada linha da tabela é definida com a <tr> tag.
• Um cabeçalho da tabela é definida com a <th>.
• Por padrão, títulos de tabela estão em negrito e centralizados
• Um dados / célula da tabela é definida com a <td> etiqueta.

39
 O elemento <form>
• O HTML <form> elemento define uma forma que é utilizado para a recolha de
entrada de usuário.
• O action atributo define a ação a ser executada quando o formulário é enviado.
• O method atributo especifica o método HTTP ( GET ou POST ) para ser utilizado
aquando da apresentação de dados do formulário.

40
 O elemento <input>
• O <input> elemento é o mais importante elemento de formulário.
• O <input> elemento pode ser apresentado de várias maneiras, dependendo do
tipo de atributo.
• Aqui estão alguns exemplos:
• <Input type = "text"> Define um campo de entrada de texto de uma linha
• <Input type = "radio"> Define um botão de rádio (para a seleção de uma das
muitas escolhas)
• <Input type = "submit"> Define um botão de envio (para enviar o formulário)

41
Exemplo <form>

42
43
 Tipos que podem ser utilizados com a tag
<input>
• button: Insere um botão
• checkbox: Insere um checkbox; para vários itens, basta inserirmos vários “inputs” deste tipo
• file: Insere botão seleção de arquivo através de uma caixa de diálogo
• hidden: Campo pertencente ao formulário, mas que não será exibido na página
• image: Insere uma imagem como um botão submit
• password: Insere um campo password (caracteres digitados não aparecem)
• radio: Insere um radiobox (análogo ao checkbox)
• reset: Restaura os valores iniciais do formulário
• submit: Encaminha os dados inseridos para algum arquivo
• text: Insere um campo de edição de texto

44
Input Type

45
 Web Design Responsive
• Web Design Responsive é sobre o uso de HTML e CSS para redimensionar
automaticamente, ocultar, reduzir ou ampliar, um site, para torná-lo ficar bem em
todos os dispositivos (computadores, tablets e telefones).
• Exemplo:
• <meta name="viewport" content="width=device-width, initial-scale=1.0">

46
Exercício: Criar em HTML um formulário

47
 VSCode IDE
• O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft
para Windows, Linux e macOS.
• Ele inclui suporte para depuração, controle Git incorporado, realce de sintaxe,
complementação inteligente de código, snippets e refatoração de código.
• Extensão:
• Emmet - https://docs.emmet.io/cheat-sheet/
• Tema: Omni
• Live Server: Alt+l+O
• Identação de Código: Shift+Alt+F

48
Conceitos básicos
de CSS
 Introdução a CSS
CSS é a sigla em inglês para Cascade Style Sheet (Folha de Estilo em
Cascata)
É um mecanismo simples para adcionar estilos (fontes, cores, espaçamentos, bordas, etc) aos
documentos web
CSS é um Web Standard
conjunto de normas, diretrizes, recomendações produzidos pelo W3C e destinados a orientar
desenvolvedores para o uso de práticas que possibilitem a criação de uma Web acessível para
todos (independente de dispositivo ou necessidades especiais.
 Porque usar CSS?

• A grande vantagem é a separação da marcação da apresentação do site

• O HTML destina-se unicamente a estruturar e marcar o conteúdo
• O CSS fica com a responsabilidade de todo o visual do documento
• HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos
da página
• CSS define cores, posicionamento na tela, estilos de linhas, bordas, fontes e tudo o mais relacionado a
apresentação
 Porque usar CSS?
A adoção dessa técnica resulta em múltiplas vantagens e benefícios que
não são conseguidos quando se utiliza atributos de estilização dentro das
tags HTML
É possível isolar toda a parte de apresentação é replicar em quantas
páginas for necessário.
Se o site contar com 200 páginas HTML é possível aplicar em segundos toda a parte da
apresentação para todas as páginas!
Isso não seria possível se a apresentação tivesse misturada junto com as tags HTML.
 A regra CSS e sua sintaxe
A regra do CSS é composta de duas partes

Regra de estilo

seletor { propriedade: valor; }

Declaração

Seletor: é o alvo da regra de estilo. É a parte da marcação capaz de definir em qual parte
será aplicado o estilo.
Propriedade: define o que será estilizado.
Valor: define o quanto ou como será estilizado.
 A regra CSS e sua sintaxe
Observações
A declaração deve ser colocada entre sinais de chaves ( { } )
Um sinal de dois pontos ( : ) separa a declaração do seu valor
Quando houver mais de uma declaração em uma regra, a separação é feita por meio de ponto
é vírgula ( ; ). Entretanto, é uma boa técnica utilizar sempre o ( ; ) após cada regra, mesmo
tendo apenas uma.

body{
background-color: blue;
}
 A regra CSS e sua sintaxe

body{
background-color: blue;
}

No exemplo
o seletor é o documento todo (body)
a propriedade é a cor do fundo
e o valor é a cor azul
 A regra CSS e sua sintaxe

body{
background-color: blue;
font-familly: “Arial Narrow”;
}

No exemplo, mais uma declaração foi adcionada.

Note que, se o valor for composto por mais de uma palavra, deverá vir
entre aspas (“ ”)
 Folhas de Estilo
Conjunto de regras de estilo aplicáveis às páginas de um site
Existem 3 formas de declaração de folhas de estilo
Incorporada (embedded) – dentro da própria página
Externa (linked) – em um arquivo externo com extensão .css
Locais (inline) – colocada dentro da tag de abertura do elemento de marcação (menos
recomendado. Evitar tanto quanto possível!)
 Estilos INLINE
As regras de estilo são escritas diretamente dentro da tag de abertura do
elemento.
Informações de estilo são definidas para apenas um elemento, utilizando-se
o atributo style
É o método menos recomendado porque as alterações devem ser feitas
localmente.

<!DOCTYPE...>
<html xmlns=...>
<head> ... </head>
<body>
<p style="color:white; background-color: green; text-align: center;
font-family:Arial Narrow; font-size:15pt; font-weight:bold;">
Este parágrafo tem cor branca, fundo verde, está centralizado, <br>
fonte Arial Narrow , tem tamanho 15 e está em negrito.
</p>
</body>
...
 Estilos INCORPORADOS

• A declaração da folha de estilo é realizada dentro da tag <head> e comoelemento <style>

• A folha de estilo fica incorporada nas tags <style> e </style> da páginaem questão

<!DOCTYPE...>
<html xmlns=...>
<head>
<title> Exemplo de CSS </title> ...
<style> <body>
p{ <p>
color: white; Este parágrafo tem cor branca,
background-color: green; fundo verde, está centralizado,
text-align: center; fonte Arial Narrow , tem tamanho
font-family: “Arial Narrow”; 15 e está em negrito.
font-size: 15pt; </p>
font-weight: bold;
} </body>
</style> </html>
</head>
...
Estilos INCORPORADOS
 Estilos Externos
Nesse método, a declaração é definida em um arquivo externo com
extensão .css contendo as regras de estilo e pode ser aplicada a vários
documentos (várias páginas)
Existem 2 tipos
Folhas de estilo “linkadas” – é criado um link para o arquivo externo no elemento <head>,
com o uso do elemento link

...
<head>
<link rel=“stylesheet” type=“text/css” href=“estilo.css” media=“all”>
</head>
...
Estilos Externos
 Estilos Externos
Folhas de estilo “importadas” – usa-se a diretiva @import dentro do elemento <style>

...
<head>
<style type=“text/css”>
@import url(“estilo.css”) all;
</style>
</head>

...
 Seletor Universal
Aplicado a todos os elementos do documento.
O exemplo abaixo indica que todos os elementos textuais terão a cor azul

* { color: blue; }
 Seletor de Tipo
O estilo é aplicado diretamente a um determinado elemento de marcação
No exemplo abaixo, a folha de estilo criada (meuestilo.css) indica que
todos os parágrafos estarão em itálico com cor verde, os cabeçalhos h3 e
h4 serão da fonte Arial e os itens de uma lista terão tamanho 12px.
É possível definir a mesma regra para vários elementos, separando-os por vírgulas
 Seletor de Tipo
É possível ainda, ter várias regras para o mesmo elemento

h3, h4 {
font-family: Arial;
}

h3{
color: blue;
}

h4{
color: yellow;
}
Seletor de Tipo
 Propriedades
color: define a cor de primeiro plano de um elemento. Já vimos o que essa
propriedade faz em exemplos anteriores
background-color: define a cor de fundo de um elemento
 Propriedades (Background)
background-image: usada para definir uma imagem de fundo para a página
 Propriedades (Background)
background-repeat: usada para definir a frequencia de repetição da
imagem de fundo.
Por padrão, o valor é repeat (repetir na direção x e y)
 Propriedades (Background)
background-position: permite alterar a posição padrão de uma imagem de
fundo
Por padrão, o valor é canto superior esquerdo
 Propriedades (Background)
background-attachment: permite fixar o plano de fundo. Quando rolar pela
página, permanecerá fixo.
background-attachment: fixed;
background-attachment: scroll;
 Propriedades (Fontes)
font-family: prioridade para apresentação de um elemento em uma página. Se a primeira
fonte da lista não estiver disponível na máquina do usuário, deverá ser usada a segunda e
assim por diante:
font-sytle: pode assumir os valores normal, italic ou oblique.
font-weight: normal, bolder, bold, lighter,...
 Unidades de Medidas
Quando valores são definidos para as propriedades
CSS, são utilizadas algumas medidas;
Dividem-se em 2 grupos:
Unidades absolutas:
in – polegada
cm – centímetro
mm – milímetro
pt – ponto
pc – pica. 1 pc = 12 pt

Unidades relativas:
font-size: 30px;
%
font-size: 12pt;
em – 1 em é igual ao tamanho da fonte definido
ex – 1 ex equivale à altura da letra “x” minúscula
font-size: 120%;
px – define o tamanho de um pixel no monitor font-size: 1em;
 Propriedades (Fontes)

• As propriedades são herdadas dos elementos superiores. O parágrafo p herda

as propriedades definidas no body. Com isso, a fonte vista é a definida na regra
do body.
• Já os cabeçalhos possuem uma regra específica que define sua família de fonte.
Com isso, a regra definida em de h3 e h4 tem prioridade sobre a regra do body.
 Propriedades (Text)
As propriedades de text alteram as propriedades dos elementos de linha
dentro de elementos de bloco.

text-align: left, right, center, justify

text-decoration: underline, overline, line-through...
text-transform: uppercase, lowercase, capitalize...

o elemento <img> terá seu alinhamento alterado caso seja definido uma propriedade
text-align para um elemento de bloco onde o <img> esteja aninhado, pois ele é um
elemento de linha!
 Um pouco sobre cores
Sistema de Cores
RGB
O vermelho (R - red), o verde (G – green) e o azul (B – blue) são combinados para formar
outras cores.
 Um pouco sobre cores
CSS permite especificar cores de diferentes modos
As cores podem ser definidas usando seu nome
Mas só há apenas algumas cores que são definidas pelo nome: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Através de seus percentuais de vermelho (Red), verde (Green) e azul (Blue)

Utilizando porcentagem: rgb(80%, 40%, 0%)
Ou valor entre 0 e 255: rgb(204, 102, 0)

Códigos hexadecimais: cada conjunto de dois dígitos representa o vermelho, o verde e o azul
Hexadecimal: #cc6600
É o mais utilizado. Sempre inicie com o #. Em hexadecimal, os valores permitidos vão de 0 a F (0 a 9, A a F)
Um pouco sobre cores
h3 {
color: aqua;
}

Ou ainda...

h3{
color: rgb(0, 255, 255);
}

Ou ainda...

h3{
color: #00FFFF;
}
 Tabela de Cores RGB
Neste endereço pode ser encontrada uma tabela com diversos códigos de
cores RGB
Entretanto, são possíveis 16 milhões de combinações
 Tipos de Seletores
Como fazer para aplicar diferentes estilos a elementos de um mesmo tipo?
Se quiser que os dois parágrafos abaixo possuam estilos diferentes?

<p> Meu primeiro texto </p>

<p> Meu segundo texto </p>

p{ p{
border: 1px solid blue; border: 3px dashed purple;
color: red; color: gray;
} }
 Seletor de Classe
Utiliza o atributo “class” diferencia elementos (não deve ser iniciada com
números)

<p class=“tipo1”> Meu primeiro texto </p>

<p class=“tipo2”> Meu segundo texto </p>

p.tipo1{ p.tipo2{
border: 1px solid blue; border: 3px dashed purple;
color: red; color: gray;
} }

Alba Lopes, Profa.

[email protected]
Seletor de Classe
 Seletor de Classe
Agrupa elementos diferentes em uma mesma classe

<h1 class=“estilo1”> Meu cabeçalho</h1>

<p class=“estilo1”> Meu parágrafo</p>

Nesse caso, o nome do elemento não é inserido na regra CSS. Apenas o

nome da class:

.estilo1{
background-color: yellow;
margin: 50px;
border: 1px dashed blue;
color: #339966;
}
Seletor de Classe
 Seletor de ID
Funciona como o seletor de classe, mas seleciona elementos que o id case
com o especificado na regra.

<h1 id=“meucabecalho”> Cabeçalho </h1>

Nesse caso, ao invés do ( . ) é utilizado o ( # )

#meucabecalho{ h1#meucabecalho{
border: 1px solid blue; border: 1px solid blue;
color: red; color: red;
} }
 Seletores de ID
IDs em HTML devem ser únicos na página. Não se deve ter dois elementos
com o mesmo valor de atributo de id!

ERRADO:

<h1 id=“meucabecalho”> Cabeçalho h1 </h1>

<h2 id=“meucabecalho”> Cabeçalho h2 </h1>

CERTO:

<h1 id=“meucabecalhoh1”> Cabeçalho h1 </h1>

<h2 id=“meucabecalhoh2”> Cabeçalho h2 </h1>
 Seletor de atributo
Adcionando estilo em elementos com atributos específicos.

input[type=“text”]{
background-color: blue;
color: white;
}
 Links
Aplicar propriedades aos links de acordo com o seu estado (visitado, não
visitado, ativo)
Normalmente (dependendo do navegador)
Links não visitados são da cor azul
Links visitados são da cor roxa
VER EXEMPLO

Utilização de pseudo-classes
Adcionar “efeitos especiais” a alguns seletores
Utilização de “:”
 Links
Elemento a. Pseudo-classe: link

Quando o link não foi visitado

a:link{
color: green;
}
 Links
Elemento a. Pseudo-classe: hover

Quando o mouse estiver em cima do link

a:hover{
color: gray;
}
 Links
Elemento a. Pseudo-classe: visited

Quando o link já tiver sido visitado

VER EXEMPLO

a:visited{
color: yellow;
}
 Links
Dica: removendo o sublinhado de links

a{
text-decoration: none;
}

É possível, utilizando várias propriedades de CSS, criar diversos tipos de

menu.
Veja exemplos em: http://maujor.com/tutorial/cssmenu.php
 Listas
list-style-type
Em (X)HTMLexiste 2 tipos de listas (ordenadas e não ordenadas / <ol> e <ul> )
Com CSS, é possível adcionar estilo as listas. Pode utilizar até imagens.

ul{ ul{
list-style-type: circle; list-style-type: square;
} }
 Listas Desordenadas
list-style-type

Valor Descrição
none Sem marcador
disc Default. O marcador é um círculo preenchido
circle O marcador é um círculo
square O marcador é um quadrado
 Listas Ordenadas
list-style-type

Valor Descrição
none Sem marcador
circle Círculo
disc Default. Círculo preenchido
square Quadrado
armenian Número Armenian
decimal Número
decimal-leading-zero Número com zeros iniciais (01, 02, 03, etc.)
georgian Numeração georgiano tradicional (an, ban, gan, etc.)
lower-alpha Letra minúscula (a, b, c, d, e, etc.)
lower-greek Grego minúsculo (alpha, beta, gamma, etc.)
lower-latin Latin minúsculo (a, b, c, d, e, etc.)
lower-roman Romano minúsculo (i, ii, iii, iv, v, etc.)
upper-alpha Letra maiúscula (A, B, C, D, E, etc.)
upper-latin Latino Maiúsculo (A, B, C, D, E, etc.)
upper-roman Romano Maiúscula(I, II, III, IV, V, etc.) A
alba.
Listas
 O Modelo de Caixa (Box Model)

• Descreve os boxes (caixas) geradas pelos elementos HTML. Todos os

elementos possuem uma “caixa invisível” ao redor dele, com algumas
propriedades.
• Detalha as opções de ajustes de margens, bordas, padding e conteúdo para cada
elemento
 O Modelo de Caixa
Exemplo

“HERCULE POIROT PAROU no patamar por um instante

com a cabeça um pouco inclinada, como se esperasse ouvir
alguma coisa. Nenhum ruído vinha do andar de baixo.
Aproximou-se da janela e viu Mary Restarick embaixo
novamente entretida com a jardinagem”

Trecho retirado do livro “A Terceira Moça” de Agatha Christie

 O Modelo de Caixa
Exemplo

<p>
“HERCULE POIROT PAROU no patamar por um instante
com a cabeça um pouco inclinada, como se esperasse ouvir
alguma coisa. Nenhum ruído vinha do andar de baixo.
Aproximou-se da janela e viu Mary Restarick embaixo novamente
entretida com a jardinagem”
</p>
<h4>
Trecho retirado do livro “A Terceira Moça” de Agatha Christie
</h4>
O Modelo de Caixa

Com um pouco de estilo, podemos transformar

 O Modelo de Caixa
Com um pouco de estilo, podemos transformar

TOP
border

margin

padding
padding

padding
margin margin RIGHT
LEFT

padding
margin

BOTTOM
Definindo as Margens de um Elemento

body{
margin-top: 100px;
margin-left: 70px;
margin-right: 40px;
margin-right: 10px;
}

Ou ainda...

body{
margin: 100px 40px 10px 70px;
}
 Definindo o Padding de um elemento
Pode ser entendido como “enchimento” de um elemento.

h4{
background: yellow;
padding: 20px 20px 20px 80px;
}

Antes:

Depois
 Bordas
As bordas podem ser usadas para infinitas coisas
Elemento decorativo ou servir de separação entre dois elementos
CSS proporciona infinitas possibilidades de utilização de bordas

Espessura [border-width]
Pode assumir valores: thin, medium, thick (fina, média e grossa)

Ou um valor numérico
 Bordas
Cores [border-color]

Valores expressos em nomes: red, blue, black, yellow...

Ou em códigos: “#123456” “rgb(123, )
 Bordas
Estilo [border-style]
Vários estilos de borda estão disponíveis. O estilo visível depende do navegador

h4{
background: yellow;
color: #8b0000;
padding: 20px 20px 20px 80px;
border-width: thick;
border-color: #8b0000;

border-style: double;

}
 Bordas
É possível ainda definir propriedades diferentes para cada uma das bordas
(left, right, top, bottom)

h4{
(...)
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: dashed;
border-bottom-color: blue;

}
 “Compilando” valores...
É possível fazer as declarações para o mesmo elemento utilizando uma
linha só:
Isto não serve apenas para bordas

h4{

border-top: thick solid red;

border-bottom: thick dashed blue;

}
 LAYOUT DE SITES
Elementos responsáveis pela estruturação de páginas HTML
div e span
Agrupar e prover estrutura aos documentos

div é um “conteiner” para elementos de bloco.

span é um “container” para elementos de linha

div e span não faz nenhuma modificação aparente no código. Não tem uma
“função” específica quanto elemento. Apenas agrupa outros elementos
dentro dele (não tem valor semântico)

Alba Lopes, Profa.

[email protected]
Layout
Exemplo
 PROPRIEDADES IMPORANTES PARA LAYOUT
Antes de iniciar a criação de layouts, é importante conhecer algumas propriedades
Float
Position
 Propriedade Float
Propriedade float:
Permite empurrar um elemento para a direita ou esquera, permitindo que outros elementos
fiquem em torno dele
Muito utilizado em imagens e quando se trabalha comlayouts
Elementos podem flutuar APENAS na horizontal (left/esquerda ou right/direita).
Elementos DEPOIS do elemento flutuante irão ficar ao seu redor.
Elementos ANTES do flutuante não sofrerão alteração.
 PROPRIEDADES: FLOAT
Propriedade float:
Exemplo: sem usar apropriedade

texto texto texto texto textotexto

texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto
texto texto
 Propriedade Float
Propriedade float
Exemplo: usando a propriedade float:left

texto texto texto texto texto texto

texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto
 PROPRIEDADES: FLOAT
Propriedade float
Exemplo: usando apropriedade float: right

texto texto texto texto texto texto

texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto texto texto texto texto
texto texto
 PROPRIEDADES: FLOAT
Propriedade float
Se tiver vários elementos flutuantes próximos, eles irão flutuar um ao lado do outro, enquanto
houver espaço
Ex: imagem e parágrafos flutuantes.

Ver exemplo
 PROPRIEDADES: FLOAT
Desativando o float
Se for preciso que um elemento flutue pela página mas que nenhum outro elemento fique ao
seu redor, pode-se utilizar propriedade clear

.imagemFlutuante {
clear: both;
}
 PROPRIEDADES: FLOAT

Propriedade Descrição Valores

clear Especifica qual lado de um left
elemento não pode ter outros right
elementos flutuantes
both
none
inherit
float Especifica se uma caixa deve ou left
não flutuar right
none
inherit
 PROPRIEDADES: POSITION
Permite posicionar umelemento
Permite sobreposição de elementos
Posicionamento estático
Elementos HTML são estáticos por padrão. É sempre colocado de acordo com o fluxo normal da
página
 PROPRIEDADES: POSITION
Posicionamento fixo:
Um elemento com posição fixa está posicionado em relação à janela donavegador
Ele não vai mover mesmo se a janela é rolada

p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}

Elementos podemse sobrepor

 PROPRIEDADES: POSITION
Posicionamento relativo:
Elemento é posicionado em relação à sua posiçãonormal

h2.pos_esq {
position: relative;
left: -20px;
}

h2.pos_esq {
position: relative;
left: -20px;
}
 HTML E A TAGDIV
Utilização da tag
<div> ... </div>
Cria uma divisão ou uma seção em um documento
Geralmente usado para formatar um grupo de elementos com estilos

<div id=“principal”> <div class=“superior”>

HTM L
</div> </div>

#principal{ .superior{

CSS border: solid 1px black; background-color: gray;

} }
DIV Propriedades CSS para formatar e
posicionar a div:

width
margin
padding
background
border
float
position
...
 LAYOUT
Passos para criação de layouts:
Identificar como você deseja dispor os elementos da sua página
Agrupar os elementos utilizando <div>
Criar CSS para a div especificada
 LAYOUT
Passos para criação de layouts:
Identificar como você deseja dispor os elementos da sua página
Agrupar os elementos utilizando <div>
Criar CSS para a div especificada

<div id=“cabeçalho”> ... </div>

... ...
</div> </div>

<div id=“m<enduiv”>id=“conteudo”>

<div id=“rodape”> ... </div>

Arquivo HTML
Arquivo CSS
Resultado no navegador
Conceitos básicos
do Bootstrap
 Frameworks CSS
• São conjuntos de componentes que provêm uma estrutura básica de elementos
reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a
aplicação será construída.
• São utilizados principalmente para construção de páginas de websites e de sistema para
internet.
• Frameworks CSS oferecem diferentes módulos e ferramentas:
• Redefinição da folha de estilo
• Grid especialmente para o design responsivo
• Tipografia web
• Conjunto de ícones em sprites ou fontes de ícone
• Styling para tooltips, botões, elementos de formulários
• Partes de interfaces gráficas como o acordeão, guias, slideshow ou janelas modais
(Luz)
• Equalizador para criar conteúdo de altura igual

132
 Bootstrap
• Bootstrap é um framework web com código-fonte aberto para desenvolvimento
de componentes de interface e frontend para sites e aplicações web usando
HTML, CSS e JavaScript, baseado em modelos de design para a tipografia,
melhorando a experiência do usuário em um site amigável e responsivo.
• https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
• https://getbootstrap.com.br/
• https://bootsnipp.com/

133
 O Bootstrap é importante?
• Mais do que outros framework front-end, o Bootstrap tem se tornado ao longo
dos anos uma das ferramentas mais importantes para a criação de websites. Isto
porque seus padrões seguem os princípios de usabilidade e as tendências de
design para interfaces.
• Além disso, sua padronização permite que os sites tenham um melhor aspecto,
sendo uma forma de criar páginas esteticamente agradáveis. E você sabe que
quanto melhor o design de uma página, maior a taxa de satisfação dos usuários.

134
 Características e Vantagens do Bootstrap
• Biblioteca de componentes
• Reuso de código
• Documentação e comunidade
• Padrão visual
• Responsividade
• Biblioteca de componentes
• Talvez uma das características mais interessantes deste framework é o fato dele
possuir uma extensa biblioteca de componentes, como ícones, caixas de texto,
painéis e cores em links.

135
 Reuso de código
• Assim como é objetivo de todo framework, o Bootstrap permite que menos
código possa ser escrito, já que ele entrega uma série de formatações visuais
prontas.
• A única necessidade do desenvolvedor é saber qual a classe ele deve chamar.

136
 Responsividade
• Além de padronizar uma série de parâmetros, o Bootstrap é uma das formas mais
fáceis de deixar um site responsivo. Se você não sabe o que significa o termo, ele
quer dizer que um site é adaptável a diferentes tipos de tela, como celular, tablet
ou computador.
• Hoje, indica-se que todos os sites devem ser responsivos para melhorar a
experiência do usuário e trazer benefícios para rankeamento do Google. Com o
Bootstrap, isso é algo extremamente facilitado. Com apenas uma linha de código
é possível deixar todo o projeto responsivo e melhorar a exibição do conteúdo de
acordo com tags específicas.

137
 Template inicial
<!DOCTYPE html>

<html lang="pt-br">

<head>

<!-- Meta tags Obrigatórias -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<title>Olá, mundo!</title>

</head>

<body>

<h1>Olá, mundo!</h1>

<!-- JavaScript (Opcional) -->

<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>

</html>

138
 HTML5 doctype
• Bootstrap exige o uso do doctype HTML5. Sem isso, você verá alguns estilos
incompletos e esquisitos.

<!DOCTYPE html>
<html lang="pt-br">
...
</html>

139
 Meta tag responsiva
• Bootstrap tem uma abordagem mobile first, uma estratégia que optimizamos o
código para dispositivos móveis primeiro e, então, é que começamos a pensar em
media queries para aparelhos maiores. Por isso, para garantir renderização
adequada e touch zooming em todos eletrônicos, use a tag responsiva viewport
no <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

140
 Tables
• <table class="classe">
• .table
• .table-striped
• .table-bordered
• .table-hover
• .table-condensed

141
 Images
• <img src="imagem" class="classe" alt="" width="height="">
• .img-rounded
• .img-circle
• .img-responsive

142
 Jumbotron Inside Container
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

143
 Wells
• Basic Well
• Example
<div class="well">Basic Well</div>

.well-lg
.well-sm

144
 Alerts
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

145
 Buttons
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

146
 NavBar
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

147
 Forms

• Wrap labels and form controls in <div class="form-group"> (needed for optimum
spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements

<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

148
 Modal
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

149