<html>  .css  bootstrap

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

Programa de Trainee CITi 2017.1

OLÁR

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

Agenda

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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/CSS/Bootstrap vanessa.barreiros@citi.org.br

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!

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

O que são?

HTML

HyperText Markup Language

CSS

BOOTSTRAP

Cascading StyleSheet

Framework

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

HTML

CSS

JavaScript

Informação

formatação

comportamento

Em resumo

HTML

CSS

JavaScript

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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?

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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/CSS/Bootstrap vanessa.barreiros@citi.org.br

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 vai
1. Olá
2. Oi
3. Como vai
HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

html 

<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>
HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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>
HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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;
}
HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

CSS 

<mesa>
   <prato></prato>
   <prato id="bonito"></prato>
   <prato></prato>
</mesa>

Como selecionar?

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

CSS - Box model

É um conceito que engloba:

  • conteúdo (content)
  • espaçamento (padding)
  • bordas (border)
  • margens (margin)

CONTENT

PADDING

BORDER

MARGIN

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

CSS - MEDIA QUERIES

Responsividade

.caixa {
  background: blue;
}

@media (max-width: 200px) {
  .caixa {
    background: yellow;
  }
}

como é na prática?

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

CSS - flexbox 

Flexible box

💎

Solução para posicionamento

flex container

flex item

flex item

.caixa {
   display: flex;
   justify-content: space-between;
}

.col {
   flex: 1;
}
HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

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:

  1. A página deve ter pelo menos um cabeçalho
  2. A página deve usar uma lista não ordenada (<ul>) com pelo menos um item (<li>)
  3. A página deve ser dividida em duas colunas usando flexbox
  4. A página deve conter pelo menos um link (<a>)
assets/img/teemo.jpg

#1

use a criatividade!

HTML/CSS/Bootstrap vanessa.barreiros@citi.org.br

OBRIGADA!🐷

Vanessa Barreiros

Analista de Marketing @ CITi

vanessa.barreiros@citi.org.br

Made with Slides.com