Introdução ao desenvolvimento web: HTML, CSS e planejamento de sites

Introdução ao Web
Design
Como funciona a internet, o que é HTML e
CSS, criando um site básico

Ana Rute Mendes
Web Designer
Formada em
Comunicação Social -
Midialogia e técnica
em Informática
@ana_rute
Virgílio Santos
Desenvolvedor
Formado em
Engenharia de
Computação
@virgilionsantos
Paula Furtado
Especialista em
Educação
Formada em Letras,
mestranda em
Linguística Aplicada
@paularfurtado
http://escolamupi.com.br
https://github.com/mupi/
QUEM SOMOS

O Web Design
Back-end X Front-end
Design Thinking

Planejamento
Wireframes
Mockups
Protótipos

Tarefa #1
Em uma folha de
papel, fazer um
mockup a mão de
uma página de perfil
ou currículo

HTML
Hipertext Markup Language
Linguagem de marcação
Estrutura e organização

HTML
Semântica
Elementos, tags e atributos
<a href="http://escolamupi.com.br">
Escola Mupi
</a>

Estrutura básica
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title>Meu primeiro site</title>
</head>
<body>
<h1>Olá mundo!</h1>
<p>Oba, meu primeiro site!</p>
</body>
</html>

Principais tags
Títulos: <h1></h1>
Parágrafos: <p></p>
Imagens: <img />
Quebra de linha: <br />
Listas: <ul></ul>, <ol></ol> e <li></li>
Âncoras: <a></a>
Destacar palavras: <strong></strong> e
<em></em>

Tarefa #2
Estruturar o seu mockup
em uma página HTML

Elementos em bloco
vs. em linha
Div e span
Elementos semânticos
<header></header>, <footer></footer>,
<aside></aside>, <nav></nav>

CSS
Cascade Style Sheets
Linguagem para estilização

CSS & HTML
Classe e ID
Seletores
http://paularfurtado.github.io/
css-selector-game

Inserindo CSS
<p style="color: #FF0000;">Oi!</p>
<style type="text/css">
p.exemplo{
border: 1px dashed #00F;
}
</style>
<link rel="stylesheet" type="text/css" href="caminho/arquivo.css" />
Inline
Através das
tags <style>
Em arquivos externos, através da tag <link>
1.
2.
3.

CSS
Sintaxe da linguagem
seletor {
propriedade: valor;
}

Propriedades tipográficas
Cor de texto: color
Família de fonte: font-family
Tamanho da fonte: font-size
Estilo de fonte: font-style
Peso da fonte: font-weight
Altura da linha: line-height
p {
color: #000088;
font: italic normal bold 14px 100% Georgia,
serif;
}

Valores das
propriedades
Cores na web: RGB, Hex,
RGBa
Pixels e medidas

Modelo de caixa
largura: width
altura:height
borda: border
Conteúdo do
elemento
distância interna: padding
margem: margin

Exemplos de uso
section {
height: 100px;
margin: 0 auto; /* centraliza o elemento */
width: 150px;
}
footer {
border-top: 1px solid #ccc;
padding: 2em;
margin-top: 5px;
}

Tarefa #3
Crie um arquivo CSS, insira-
o no seu HTML e estilize a
sua página

Introdução ao desenvolvimento web: HTML, CSS e planejamento de sites

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Introdução ao desenvolvimento web: HTML, CSS e planejamento de sites

Similaire à Introdução ao desenvolvimento web: HTML, CSS e planejamento de sites (20)

Introdução ao desenvolvimento web: HTML, CSS e planejamento de sites