Programação Web - Aula 04

AULA 04 – HTML5+CSS+BOOTSTRAP
• Recife-PE, 21 de março de 2020
Curso: SOFTWARE PROGRAMMING FOR WORK

Módulo: Programação Web
O que é CSS?
• CSS = Cascading Style Sheets
• Folhas de Estilo em Cascata
• Estilos definem como os elementos HTML devem ser
apresentados.
• Linguagem simples e de fácil aprendizagem para a criação de
layouts para web sites.
2
Vantagens do CSS
• Linguagem poderosa e precisa para formatação.
• Reduz o consumo de banda do usuário.
• Padrão W3C. Suportada por vários browsers.
• Facilita a manutenção do site.
• Separa a formatação do conteúdo.
3
Inserindo CSS no documento
• Folhas de estilo inline
• Declarada diretamente no elemento que se deseja formatar através do
atributo style.
• Deve ter o uso limitado.
Exemplo:
<p style=“color: #ff0000; “>
Este texto aparecerá na cor vermelha
</p>
• <p>Este texto volta à cor padrão</p>
4
• Folhas de estilo incorporadas
• É declarada no <head> do documento através do tag <style>
• A formatação só será aplicada ao documento onde o CSS está
incorporado
5
• Exemplo:
...
<head>
<style type=“text/css”>
p { color: #ff0000; }
</style>
</head>
<body>
<p>Este texto aparecerá na cor vermelha</p>
<p>Este texto também será vermelho</p>
...
6
• Folhas de estilo externas
• É um documento texto com a extensão css, onde ficam contidas as
regras de estilo.
• Pode ser vinculada a vários documentos HTML através do tag <link
/>
<head>
<link rel="stylesheet" type=“text/css”
href=“estilo.css” />
</head>
7
Sintaxe de CSS
• Regras CSS definem como o estilo deve ser aplicado a um
elemento html.
• Conjunto de regras = folha de estilo.
• Regras são compostas de três partes:
• Seletor - elemento html sobre o qual o estilo será aplicado. Por
exemplo: body, form
• Propriedade – atributo do elemento html. Por exemplo: color, font
• Valor – característica assumida.
seletor { propriedade : valor; }
8
Sintaxe de CSS
• Para definir mais de uma propriedade, deve ser utilizado o ;
como separador.
• Agrupamento de seletores: separador é a vírgula.
body { color : black; }

p {text-align:center;color:red}
p {font-family:”sans serif”}
h1,h2,h3{color:green}
9
Sintaxe de CSS - Classes
Classes
• Possível definir estilos diferentes para um mesmo elemento
HTML.
• Podem ser aplicadas a qualquer elemento HTML.
• Caso não seja informado o elemento, a classe poderá ser
aplicada a qualquer elemento.
nome_elemento.nome_classe { propriedade : valor; }
10
Exemplo 01 - CSS
<html> <body>Background
<head> amarelo.
<style> <h1>Fonte 36pt</h1>
body { <h2>Texto Azul</h2>
background- <p class=“preto”>
color:yellow; paragrafo preto </p>
}
h1{ </body>
font-size:36pt; </html>
}
h2 { color:blue; }
p.preto {
color:#000000;}
p.azul { color:#0000FF;}
</style>
</head>
11
Exemplo 02 - CSS
<html> /* arquivo c1.css */
<head>
<link rel=“stylesheet” body {
type=“text/css” background-
href=“c1.css”/> color:yellow;
</head> }
<body>Background h1{
amarelo. font-size:36pt;
<h1>Fonte 36pt</h1> }
<h2>Texto Azul</h2> h2 { color:blue; }
<p class=“preto”> p.preto {
paragrafo preto </p> color:#000000;}
</body> p.azul { color:#0000FF;}
</html>
12
TAG - DIV
A tag <div> serve para alterar o estilo em partes específicas da
página e posicionar objetos. Exemplo:
1.<html>
2.<head>
3.<title>Divs</title>
4.</head>
5.<body>
6.<div style="background-color:#00BFFF;text-align:center">
7.<p>Primeira Div</p>
8.</div>
9.<div style="border:3px dotted #9F0">
10.<p>Segunda Div</p>
11.</div>
12.</body>
13.</html>
13
TAG - DIV
Devemos iniciar pela tag <div> e terminar com a tag </div>, colocando todo conteúdo
entre as duas.
A tag <div> deve sempre ser estilizada por um arquivo .css, mas para isso é preciso
definirmos um id ou class para ele.
Exemplo ID:
HTML: <div id=”nome_do_id”></div>

CSS: #nome_do_id{ }
Exemplo Classe:
HTML: <div class=”nome_da_div”></div>

CSS: .nome_da_classe{ }
14
TAG - DIV
Vamos agora criar um layout
simples e criar a marcação da sua
estrutura:
1.<html>
2.<head>
3.<title>Divs</title>
4.<link rel="stylesheet" type="text/css" href="exemploDIV.css"
/>
5.</head>
6.<body>
7.<div id="global">
8.<div id="topo">TOPO</div>
9.<div id="conteudo">CONTEUDO</div>
10.<div id="menu">MENU</div>
11.<div id="rodape">RODAPE</div>
12.</div>
13.</body>
14.</html>
15
TAG - DIV
Vamos agora criar o que estará contido na folha de estilo (CSS):
#global { height:490px;
margin: 0 auto; /* Alinhando o layout no centro */ }
width: 800px; /* Largura do layout */
height: 600px; /* Altura do layout */ #menu {
} border:1px solid #000;
float:right; /* Flutuando à direita */
#topo{ width:20%;
margin-bottom:1px; /* Espessura da margem inferior */ height:490px;
border:1px solid #000; /* Borda com espessura de 1px do tipo }
solida e da cor preta */
width:100%;
#rodape {
height:50px;
margin-top:1px; /* Espessura da margem superior */
}
border:1px solid #000;
width:100%;
#conteudo {
height:50px;
border:1px solid #000;
float:left;
float:left; /* Flutuando à esquerda */
}
width:79%;
16
Frameworks
Após o início do desenvolvimento web até os dias de
hoje vários desenvolvedores de software passaram por diversos
problemas na criação de aplicações web, e por isso, diversas
soluções foram desenvolvidas. Então em noss caminho como
desenvolvedores, provavelmente, iremos passar pelos mesmos
problemas.
Mas o que os Frameworks tem haver com isso?

Frameworks
Eles são conjunto de arquivos que possuem códigos para
a solução de problemas comuns entre desenvolvedores
durante a criação de aplicações.
É importante entender seu problema e escolher de
maneira sábia, já que frameworks são opinativos e podem
engessar o fluxo da sua aplicação ou página web, impedindo
que elas cresçam ou, seja difícil incluir novas funcionalidades.
No universo do desenvolvimento web existem diversos
frameworks que proporcionam soluções para os mais diversos
problemas na construção de páginas web ou para o
gerenciamento de conteúdo.
Frameworks
Em JavaScript, existem diversos frameworks que
implementam essa arquitetura, exemplos: Angular, Ember,
Vue.
Caso você não tenha nenhum designer em sua equipe e
tenha dificuldades em combinar cores, os frameworks CSS
fornecem um guia de estilo para sua aplicação, facilitando a
criação de componentes e páginas web. Exemplos: Bootstrap,
Foundation, Polymer.
Bootstrap
Cria projetos responsivos para dispositivos móveis na
web com a biblioteca de componentes front-end, ele é um dos
mais populares Frameworks do mundo.
O Bootstrap é uma ferramenta gratuita para
desenvolvimento HTML, CSS e JS. Crie protótipos rapidamente
ou aplicações completas, sistemas de grid responsivo,
componentes pré-construídos e poderosos plugins com jQuery.
Site para download: https://getbootstrap.com.br/
Template inicial
1. <!DOCTYPE html>
2. <html lang="pt-br">
3. <head>
4. 
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7. 
8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

crossorigin="anonymous">
9. <title>Olá, mundo!</title>
10. </head>
11. <body>
12. <h1>Olá, mundo!</h1>
13. 
14. 
15. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
16. <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>
17. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"

crossorigin="anonymous"></script>
18. </body>
19. </html>
Exemplos de utilização
BOTÃO DROPDOWN: Qualquer .btn pode se transformar em um dropdown, com algumas
adições na marcação HTML.
Aqui está como você pode fazê-los funcionar, usando <button>:
1.<div class="dropdown">
2. <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
3. Botão dropdown
4. </button>
5. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
6. <a class="dropdown-item" href="#">Alguma ação</a>
7. <a class="dropdown-item" href="#">Outra ação</a>
8. <a class="dropdown-item" href="#">Alguma coisa aqui</a>
9. </div>
10.</div>
DICA(S)
Entrem e testem vários componestes possíveis para
adicionar em seus sites, como Carousel, Menus, Alertas e etc.
Façam modificações em seus códigos CSS e JS no BootStrap e
veja visualizem tudo que foi feito. Praticamente tudo que vocês
precisam esta no site:
• https://getbootstrap.com.br/docs/4.1/getting-started/introduction/
• https://www.w3schools.com/bootstrap/bootstrap_examples.asp
E-mail: profguibsonsantana@gmail.com
OneDrive: https://tinyurl.com/wjpwvcn

Programação Web - Aula 04

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programação Web - Aula 04

Enviado por

Direitos autorais:

Formatos disponíveis

AULA 04 – HTML5+CSS+BOOTSTRAP

• Recife-PE, 21 de março de 2020

Curso: SOFTWARE PROGRAMMING FOR WORK

seletor { propriedade : valor; }

body { color : black; }

nome_elemento.nome_classe { propriedade : valor; }

HTML: <div id=”nome_do_id”></div>

HTML: <div class=”nome_da_div”></div>

Mas o que os Frameworks tem haver com isso?

4.

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

7.

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

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

13.

14.

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

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

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

Você também pode gostar