Upload
ana-mendes
View
215
Download
9
Embed Size (px)
DESCRIPTION
Slides do primeiro dia do mini curso de web design dado na SEE - UNICAMP 2014
Citation preview
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çãoFormada em Letras,
mestranda em Linguística Aplicada
@paularfurtado
http://escolamupi.com.brhttps://github.com/mupi/
QUEM SOMOS
HTMLSemâ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 tagsTí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>
Elementos em bloco vs. em linha
Div e span
Elementos semânticos
<header></header>, <footer></footer>,
<aside></aside>, <nav></nav>
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.
Propriedades tipográficasCor 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;
}
Modelo de caixa
largura: width
altura: height
borda: border
Conteúdo do elemento
distância interna: padding
margem: margin
Exemplos de usosection {
height: 100px;
margin: 0 auto; /* centraliza o elemento */
width: 150px;
}
footer {
border-top: 1px solid #ccc;
padding: 2em;
margin-top: 5px;
}