Slide 1
Slide 1 text
21 de Agosto de 2015
HTML5 & CSS3
Criando interfaces para navegadores web
Slide 2
Slide 2 text
HTML
É uma linguagem de marcação utilizada para
criar interfaces gráficas pelo navegador. Define
blocos de construção de elementos visuais,
como imagens ![]()
, formularios ,
títulos
entre outros.
Slide 3
Slide 3 text
CSS
É uma linguagem para aplicação de estilos em
documentos HTML, isto é, mudar sua
aparência visual, através da mudança dos
atributos como cor de fundo background, tipo
de fonte font-style, cor color, bordas
border e assim por diante.
Slide 4
Slide 4 text
Conteúdo / Informação Estilo / Apresentação
Resumidamente
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Criando uma página HTML
Um HTML é um arquivo texto como qualquer
outro. Crie um novo arquivo index.html e
abra-o no seu editor de texto favorito.
Slide 7
Slide 7 text
1
2
3
4
5
Linguagem de marcação
...
São instruções baseadas em tags, utilizada
para simplificar e abstrair a construção de
interfaces.
Slide 8
Slide 8 text
0
1
2
3
4
5
6
7
8
9
10
Estrutura básica
Título da página
Slide 9
Slide 9 text
0
1
2
Doctype
Sempre iniciamos um documento HTML
com um doctype, sua função é informar ao
navegador como ele deve desenhar a
página. Nesse caso indicamos que é um
documento HTML5.
Slide 10
Slide 10 text
0
1
2
HTML
Logo após temos a tags html que é o nó inicial
do documento, dentro dele definimos todas as
propriedades do documento.
Slide 11
Slide 11 text
0
1
2
Head
Título da página
Dentro do head está todas as configurações do
documento que não são visíveis, mas definem
como ele deve ser construido, como por
exemplo incluir outros arquivos.
Slide 12
Slide 12 text
0
1
2
Body
Em contrapartida o body é o nó onde é inserido
todos os elementos visíveis, isto é, que vão ser
desenhados pelo navegador e exibido ao
usuário.
Slide 13
Slide 13 text
Tags de marcação
O HTML5 possui diversos tipos de tags,
algumas são usadas para definir sua estrutura:
header Cabeçalhos
nav Menus de navegação
main Conteúdo principal
section Sessões do conteúdo
div Bloco estrutural
footer Rodapé
Slide 14
Slide 14 text
Slide 15
Slide 15 text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Título da página
Slide 16
Slide 16 text
Semântica
Buscadores como o Google se baseiam nos
elementos HTML para adivinhar qual texto da
página é importante. Utilizar as tags corretas
para cada situação é uma técnica conhecida
como web semântica.
Slide 17
Slide 17 text
Especializadas em exibir elementos gráficos
como texto, lista, tabelas, imagem, formulários:
Tags de conteúdo
h1, h2, h3, h4, h5, h6 Títulos
p, strong, em Elementos textuais
ol, ul, li Listas
img Image
a Links com outras páginas
Slide 18
Slide 18 text
0
1
2
3
4
5
6
7
8
9
10
Títulos
Título H1
Título H2
Título H3
Título H4
Título H5
Título H
Título H1 Título H2 Título H3 Título H4 Título H5 Título H6Slide 19
Slide 19 text
0
1
2
3
4
5
6
7
8
9
10
Listas
Ordenada
- Item 1
- Item 2
Desordenada
- Item 3
- Item 4
Slide 20
Slide 20 text
0
1
2
3
4
5
6
7
8
9
10
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Minus, dolor que ducimus officia modi reprehenderit saepe.
Elementos textuais Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolor que dolor ducimus officia modi reprehenderit saepe.Slide 21
Slide 21 text
0
1
2
3
4
5
6
7
8
9
10
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Minus, dolor que ducimus officia modi reprehenderit saepe.
Elementos textuais Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolor que dolor ducimus officia modi reprehenderit saepe.
Google
Slide 23
Slide 23 text
0
1
2
3
4
5
6
7
8
9
10
A1
A2
B1
B2
Tabelas
A1 A2
B1 B2
Slide 24
Slide 24 text
0
1
2
3
4
5
6
7
8
9
10
Formulários
...
Enviar
Slide 25
Slide 25 text
Elementos block e inline
Elementos block são aqueles que ocupam uma
linha inteira:
Slide 26
Slide 26 text
1
2
3
4
5
Elementos block e inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolorque ducimus officia modi reprehender saepe.
Elementos inline não forçam a quebra de linha mantendo a continuidade do texto, geralmente, são usados, para da realçe as palavras:Slide 28
Slide 28 text
0
1
2
3
4
5
6
7
8
9
10
Elementos inline
span
a
img
strong, em, cite, sub, sup
button, input, label, select, textarea
Slide 29
Slide 29 text
Exercício
Criar um arquivo HTML, como os items abaixo,
cada qual em um section com uma classe:
● Header com um título;
● Paragrafos (como negrito, itálico e um link)
● Listas ordenadas e desordenadas
● Tabelas
● Formulário (Para inserir um texto e botão)
Slide 30
Slide 30 text
Folhas de estilo
Slide 31
Slide 31 text
Criando um CSS
Um CSS também é um arquivo texto, crie um
novo arquivo estilo.css e abra-o no seu
editor de texto favorito.
Slide 32
Slide 32 text
1
2
3
4
5
Para usar o CSS para estilizar o HTML, nós
precisamos inclui-lo neste último. Para tal
inserimos a tag link no head, tal qual:
Vinculando o HTML com o CSS
Título da página
Slide 33
Slide 33 text
1
2
3
4
5
Adicionar um estilo à um elemento
p {
color: red;
}
Para tal precisamos selecionar o elemento e
aplicar um estilo, no exemplo abaixo aplicamos
a cor de fonte vermelha no elemento p:
Slide 34
Slide 34 text
1
2
3
4
5
Classes
É uma forma de selecionar elementos pelo
atributo class, ao invés da tag, além de
permitir o seu multiplo encadeamento.
Planta
Hulk
Slide 35
Slide 35 text
0
1
2
3
4
5
6
7
8
9
10
Estilizando classes
/* Classes sempre se iniciam com um ponto */
.verde {
color: green;
}
.grande {
font-size: 50px;
width: 1000px;
}
Atenção com o ponto e vírgulo no final de cada diretriz!
Slide 36
Slide 36 text
1
2
3
4
5
Permite selecionar o elemento pelo attributo
id, porém, apenas um elemento.
IDs
Hello
World
Slide 37
Slide 37 text
0
1
2
3
4
5
6
7
8
9
10
Estilizando com IDs
/* IDs sempre se iniciam com uma cerquilha */
#elemento1 {
background-color: #000000;
color: white;
border: 1px solid red;
}
#elemento2 {
text-align: center;
padding: 15px;
width: 90%;
}
Slide 38
Slide 38 text
0
1
2
3
4
5
6
7
8
9
10
Estilos comuns
.classe {
background-image: url(imagem.jpg); /* Imagem */
background-color: #ffffff; /* Cor de fundo */
border: 2px solid #000000; /* Borda */
float: left; /* Flutuação do block */
color: #000000; /* Cor da fonte */
font-size: 16px; /* Tamanho da fonte */
text-align: left; /* Alinhamento do texto */
height: 200px; /* Altura do bloco */
width: 500px; /* Largura do bloco */
}
Slide 39
Slide 39 text
Flutuação de blocks
Slide 40
Slide 40 text
0
1
2
3
4
5
6
7
8
9
10
Flutuação de blocks
/* A largura total NÃO pode exceder 100%! */
section {
width: 85%;
}
aside {
float: right;
width: 15%;
}
Slide 41
Slide 41 text
Detalha as opções de
ajuste da caixa de um
elemento. A soma de
todos esses elementos
é representa sua largura
total.
Box-model
margin
border
padding
width
Slide 42
Slide 42 text
0
1
2
3
4
5
6
7
8
9
10
.classe {
/* Cores */
color: #000000; /* Hexadecimal #RRGGBB */
color: rgb(0, 128, 255); /* RGB */
color: rgba(0, 128, 255, 0.5); /* Transparencia */
/* Dimensões */
width: 100px;
width: 100%;
font-size: 1em; /* Relativo a resolução */
}
Unidades
Slide 43
Slide 43 text
0
1
2
3
4
5
6
7
8
9
10
Hierarquia
body {
font-family: Arial;
}
.classe {
color: red;
}
.classe .classe-filha {
color: green;
}
.classe-filha, .classe-prima {
text-align: center;
}
Slide 44
Slide 44 text
0
1
2
3
4
5
6
7
8
9
10
Planta
Planta
Planta
Hierarquia
Slide 45
Slide 45 text
Cada navegador implementa seu próprio motor
de renderização de HTML, isso, faz com que
possam acontecer inconsistencias.
Problemática dos navegadores
Slide 46
Slide 46 text
Biblioteca de estilos comuns, que pode ser
utilizada como base para a construção de
interfaces web.
Bootstrap
Slide 47
Slide 47 text
http://getbootstrap.com
Slide 48
Slide 48 text
Debug
Slide 49
Slide 49 text
JavaScript
É uma linguagem de programação interpretada,
projetada para se executada pelo navegadores
e capaz de manipular e interagir com os
elementos HTMLs.
Slide 50
Slide 50 text
FIM
Slide 51
Slide 51 text
Criar um arquivo CSS e vincula-lo, com o HTML
():
● Alterar a fonte do geral para Arial 12px;
● Crie classes com bordas e margens e
aplique nos elementos;
● Deixa o "designer" em você fluir!
Exercício