webdesign: construindo páginas com html
DESCRIPTION
TRANSCRIPT
WEBDESIGN:CONSTRUINDO PÁGINAS EM HTMLProf. José PirauáI JORNADA DE ENSINO, PESQUISA E EXTENSÃO DO CAA
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
O QUE É DESIGN?E WEBDESIGN?
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
TECNOLOGIAS• Para interface
- HTML, CSS, Flash
• Para programação
- PHP, ASP, ActionScript
• Banco de dados
- MySQL, Oracle, Coldfusion
O que um websitetem em comum
com uma cebola?
Internet direcionada
para tarefas
Internet direcionadaa informação
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
COMO FAZER UM WEBSITE?
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
METODOLOGIA1. Analise o problema
- Briefing, entrevistas etc
2. Gere alternativas- Brainstorm, Método 635 etc
3. Avalie e selecione as alternativas- Teste de usabilidade, Vox populi etc
4. Implemente- HTML, PHP, MySQL etc
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
HTML
• Hypertext Markup Language
• É uma linguagem escrita com tags
• Serve para organizar o conteúdo
• Não é programação
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
TAGS
• São códigos que definem o HTML
• Sempre vem entre “<” e “>”
• Entre a tag que abre e a que fecha fica o conteúdo
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
TAGS ESSENCIAIS
• <html> - define o tipo do arquivo
• <head> - seção para conteúdo técnico
• <title> - título que aparece na barra
• <body> - corpo do arquivo
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
TAGS BÁSICAS
• Títulos: <h1>, <h2>, <h3>
• Parágrafos: <p>
• Quebra de linha: <br/>
• Comentários: <!-- conteúdo aqui -->
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
DREAMWEAVER
• Programa para editar arquivo de código (como o HTML) para a Internet
• Os itens mais importantes:
- Barra de Inserção
- Inspetor de propriedades
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
BARRA DE INSERÇÃO
• Aparece abaixo da Barra do Menu
• Apresenta os principais elementos para construir uma página em HTML
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
INSPETOR DE PROPRIEDADES
• Aparece na área inferior da janela
• Exibe as propriedades do elemento selecionado
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
EXERCÍCIO 1
Criemos juntos um arquivo simples em HTML usando as tags aprendidas.
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
EXERCÍCIO 2
Crie um arquivo HTML com o seguinte poema. Visualize-o no browser e depois faça do último verso um comentário em HTML.
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
Autopsicografia
O poeta é um fingidor.Finge tão completamenteQue chega a fingir que é dorA dor que deveras sente.
E os que lêem o que escreve,Na dor lida sentem bem,Não as duas que ele teve,Mas só a que eles não têm.
Fernando Pessoa
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
FORMATAÇÃO DE TEXTO
• Negrito: <strong>
• Itálico: <em>
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
EXERCÍCIO 3
1. Volte ao poema e use negrito na palavra “dor”
2. Use itálico no nome do autor
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
ATRIBUTOS
• São códigos inseridos dentro das tags
• Exemplos:
- href (para links)
- width (para imagens)
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
LINKS
• Exemplos:
<a href=“http://www.google.com”>google</a>
<a name=“topo”>Autopsicografia</a>
<a href=“#topo”>Voltar ao topo</a>
• Não esqueça o “http://”
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
EXERCÍCIO 4
1. Insira abaixo do poema quinze parágrafos de HTML sem texto
2. No final insira um link para voltar ao topo do arquivo
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
EXERCÍCIO 5
1. Crie um novo arquivo HTML
2. Salve-o na mesma pasta do anterior
3. Crie um link do novo arquivo para o poema e vice-versa
4. Crie um link do arquivo novo para o site da UFPE
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
LIVROS
• GARRET, Jesse James. The Elements os Use Experience: User Center Design for The Web. New Riders, 2003.
• MEMÓRIA, Felipe. Design para a Internet. São Paulo: Campus, 2005.
• PREECE, J; ROGERS, Y; SHARP, H. Design de interação. Porto Alegre: Bookman, 2005.
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
REFERÊNCIAS ONLINE
• http://www.maujor.com.br/
• http://www.w3schools.com/html
• http://pt-br.html.net/