Construindo páginas HTML

WEBDESIGN:
CONSTRUINDO
PÁGINAS EM HTML
Prof. José Pirauá
I JORNADA DE ENSINO, PESQUISA E EXTENSÃO DO CAA

E WEBDESIGN?
O QUE É DESIGN?

Prof. José Pirauá • Webdesign: Construindo páginas em HTML

TECNOLOGIAS
• Para interface
- HTML, CSS, Flash
• Para programação
- PHP, ASP, ActionScript
• Banco de dados
- MySQL, Oracle, Coldfusion

O que um
website
tem em
comum
com uma
cebola?

Internet Internet
direcionada direcionada
para tarefas a informação

COMO FAZER
UM WEBSITE?


METODOLOGIA
1. Analise o problema
- Brieﬁng, 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

HTML

• Hypertext Markup Language
• É uma linguagem escrita com tags
• Serve para organizar o conteúdo
• Não é programação

TAGS

• São códigos que deﬁnem o HTML
• Sempre vem entre “<” e “>”
• Entre a tag que abre e a que fecha
ﬁca o conteúdo

TAGS ESSENCIAIS

• <html> - deﬁne o tipo do arquivo
• <head> - seção para conteúdo técnico
• <title> - título que aparece na barra
• <body> - corpo do arquivo

TAGS BÁSICAS

• Títulos: <h1>, <h2>, <h3>
• Parágrafos: <p>
• Quebra de linha: <br/>
• Comentários:

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

BARRA DE INSERÇÃO

• Aparece abaixo da Barra do Menu
• Apresenta os principais elementos para
construir uma página em HTML

INSPETOR DE PROPRIEDADES

• Aparece na área inferior da janela
• Exibe as propriedades do elemento
selecionado

EXERCÍCIO 1

Criemos juntos um arquivo simples em
HTML usando as tags aprendidas.

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.

Autopsicografia
O poeta é um fingidor.
Finge tão completamente
Que chega a fingir que é dor
A 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

• Itálico: <em>
• Negrito: <strong>
FORMATAÇÃO DE TEXTO


EXERCÍCIO 3

1. Volte ao poema e use negrito
na palavra “dor”
2. Use itálico no nome do autor

ATRIBUTOS

• São códigos inseridos dentro das tags
• Exemplos:
- href (para links)
- width (para imagens)

LINKS
• Exemplos:
<a href=“http://www.google.com”>google</a>
<a name=“topo”>Autopsicograﬁa</a>
<a href=“#topo”>Voltar ao topo</a>

• Não esqueça o “http://”

EXERCÍCIO 4

1. Insira abaixo do poema quinze
parágrafos de HTML sem texto
2. No ﬁnal insira um link para voltar ao
topo do arquivo

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

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.

REFERÊNCIAS ONLINE

• http://www.maujor.com.br/
• http://www.w3schools.com/html
• http://pt-br.html.net/

Construindo páginas HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Destaque

Destaque (14)

Semelhante a Construindo páginas HTML

Semelhante a Construindo páginas HTML (20)

Mais de José Pirauá

Mais de José Pirauá (12)

Construindo páginas HTML