webdesign: construindo páginas com html
DESCRIPTION
TRANSCRIPT
![Page 1: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/1.jpg)
WEBDESIGN:CONSTRUINDO PÁGINAS EM HTMLProf. José PirauáI JORNADA DE ENSINO, PESQUISA E EXTENSÃO DO CAA
![Page 2: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/2.jpg)
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
O QUE É DESIGN?E WEBDESIGN?
![Page 3: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/3.jpg)
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
![Page 4: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/4.jpg)
O que um websitetem em comum
com uma cebola?
![Page 5: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/5.jpg)
Internet direcionada
para tarefas
Internet direcionadaa informação
![Page 6: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/6.jpg)
Pro
f. Jo
sé P
irauá
• W
ebde
sign
: Con
stru
indo
pág
inas
em
HTM
L
COMO FAZER UM WEBSITE?
![Page 7: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/7.jpg)
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
![Page 8: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/8.jpg)
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
![Page 9: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/9.jpg)
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
![Page 10: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/10.jpg)
![Page 11: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/11.jpg)
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
![Page 12: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/12.jpg)
![Page 13: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/13.jpg)
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 -->
![Page 14: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/14.jpg)
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
![Page 15: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/15.jpg)
![Page 16: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/16.jpg)
![Page 17: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/17.jpg)
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
![Page 18: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/18.jpg)
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
![Page 19: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/19.jpg)
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.
![Page 20: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/20.jpg)
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.
![Page 21: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/21.jpg)
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
![Page 22: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/22.jpg)
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>
![Page 23: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/23.jpg)
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
![Page 24: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/24.jpg)
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)
![Page 25: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/25.jpg)
![Page 26: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/26.jpg)
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://”
![Page 27: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/27.jpg)
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
![Page 28: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/28.jpg)
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
![Page 29: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/29.jpg)
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.
![Page 30: Webdesign: construindo páginas com HTML](https://reader033.vdocuments.net/reader033/viewer/2022042518/547ebc23b4af9fd3158b5774/html5/thumbnails/30.jpg)
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/