<html> .css bootstrap
Programa de Trainee CITi 2017.1
OLÁR
Agenda
1ª AULA (27/05/17)
HTML: Tags, estrutura, semântica, elementos
CSS: Conceitos básicos, hierarquia, media queries, box model, flexbox
Exercício em sala: Desafio #0
2ª AULA (03/06/17)
Resolução do exercício: Desafio #1
Bootstrap
3ª AULA (10/06/17)
Exercício em sala: Desafio #3
Resolução de dúvidas
HTML
- Estrutura
- Tags, atributos, elementos
- Semântica
CSS
- Conceitos básicos
- Hierarquia
- Media queries
- Box model
- Flexbox
Exercício em sala: Desafio #0
1ª AULA (27/05/17)
hoje!
O que são?
HTML
HyperText Markup Language
CSS
BOOTSTRAP
Cascading StyleSheet
Framework
HTML
CSS
JavaScript
Informação
formatação
comportamento
Em resumo
HTML
CSS
JavaScript
html
<p class="hello">Lula ladrão roubou meu coração</p>tags
Linguagem de Marcação Hipertexto
Serve pra estruturar a página e dispor informações
Deve-se usar semântica
atributo
elemento
mas o que é isso?
Estrutura de uma página HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minha página</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<img src="assets/img/teemo.jpg">
<h1>Olá, mundo</h1>
Lorem ipsum dolor sit amet.
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>Informa ao browser que esse é um documento HTML
Inicia a marcação do documento
Bloco de código com dados implícitos, mas importantes para a página
Codificação da página
Início do documento em si, da informação legível ao usuário
Título da página
Link do CSS
Cabeçalho
Link do JavaScript
Imagem
Semântica
// máquina: ok, essa estrutura parece um menu de navegação...?
<div class="classe-inutil"><ul><li><a href="link_interno">...</div>
// máquina: ah, um menu de navegação!
<nav class="classe-inutil"><ul><li><a>...</nav>É importante por causa da acessibilidade
Facilita a leitura do código
É o uso de tags com um propósito
html
<h1>Olá</h1>Elementos básicos
Cabeçalhos (h1, h2, h3...)
Parágrafo
<p>Olá</p>Lista (Não ordenada)
<ul>
<li>Olá</li>
<li>Oi</li>
<li>Como vai</li>
</ul>Lista (Ordenada)
<ol>
<li>Olá</li>
<li>Oi</li>
<li>Como vai</li>
</ol>• Olá
• Oi
• Como vai1. Olá
2. Oi
3. Como vaihtml
<img src="foto.jpg">imagem, formulários e botões
Imagem
Formulário (form, input, etc)
<form class="formulario">
<input type="text" name="nome" required>
<textarea></textarea>
<button type="submit">Enviar</button>
</form>Bloco
<div>Olá</div>Semântica
e aí?
<1>Cabeçalho do meu site</1>
<2>
Início
Sobre
Fale conosco
</2>
<3>
Olá, seja bem-vindo ao meu site
Eu gosto de:
<4>
<4.1>Comer</4.1>
<4.1>Dormir</4.1>
<4.1>Comer mais um pouco</4.1>
</4>
</3><h1>Cabeçalho do meu site</h1>
<nav>
Início
Sobre
Fale conosco
</nav>
<p>
Olá, seja bem-vindo ao meu site
Eu gosto de:
<ul>
<li>Comer</li>
<li>Dormir</li>
<li>Comer mais um pouco</li>
</ul>
</p>CSS
seletor {
propriedade: valor;
}Folha de Estilo em Cascata
Adiciona estilo aos elementos
<!-- index.html -->
<h1>Olá</h1>
<!-- style.css -->
h1 {
color: red;
}
Exemplo
Olá
Pode-se selecionar elementos por .classe, #id e tag
Link: Praticar CSS
CSS - Hierarquia
Elemento filho (A > B)
p > span {
color: red;
}Elemento irmão (A + B)
input + label {
color: blue;
}Não é (A:not(B))
p:not(.catchenga) {
color: orange;
}Seletores complexos
input[type=text] {
background: lightblue;
}CSS
<mesa>
<prato></prato>
<prato id="bonito"></prato>
<prato></prato>
</mesa>Como selecionar?
CSS - Box model
É um conceito que engloba:
- conteúdo (content)
- espaçamento (padding)
- bordas (border)
- margens (margin)
CONTENT
PADDING
BORDER
MARGIN
CSS - Box model
.caixa {
width: 20px;
height: 20px;
border: 5px solid orange;
padding: 5px;
margin: 10px;
}
/* qual a largura? */nota: não está na proporção correta
CSS - MEDIA QUERIES
Responsividade
.caixa {
background: blue;
}
@media (max-width: 200px) {
.caixa {
background: yellow;
}
}como é na prática?
CSS - flexbox
Flexible box
💎
Solução para posicionamento
flex container
flex item
flex item
.caixa {
display: flex;
justify-content: space-between;
}
.col {
flex: 1;
}Link: guia completo de FLexbox
na
PRÁTICA
Usando o projeto que você baixou do GitHub e o que a gente aprendeu agora, crie um perfil de um personagem que você gosta com nome, origem, o que faz, qualquer coisa... Tudo isso seguindo os requisitos abaixo:
- A página deve ter pelo menos um cabeçalho
- A página deve usar uma lista não ordenada (
<ul>) com pelo menos um item (<li>) - A página deve ser dividida em duas colunas usando flexbox
- A página deve conter pelo menos um link (
<a>)
assets/img/teemo.jpg#1
use a criatividade! ✨
OBRIGADA!🐷
Vanessa Barreiros
Analista de Marketing @ CITi
vanessa.barreiros@citi.org.br
HTML/CSS/Bootstrap
By Vanessa Barreiros
