ÍNDICE

HTML

1. DEFINIÇÃO

01

2. CRIANDO DOCUMENTOS HTML

03

2.1 - ELEMENTOS BÁSICOS

05

2.1.1 - TÍTULOS

05

2.1.2 - CABEÇALHO

06

2.1.3 - PARÁGRAFO

07

2.1.4 - QUEBRA DE LINHA

08

2.1.5 - COMENTÁRIOS

09

2.1.6 - LISTA DE ELEMENTOS BÁSICOS

09

2.1.7 - DICAS

10

3. FORMATAÇÃO DE TEXTO

11

3.1 - DEFININDO FONTES

11

3.2 - ESTILO DE TEXTOS

12

3.3 - FORMATANDO BLOCO DE TEXTOS

13

3.3.1 - TAG DIV

13

4. CONTROLE DE CORES E GRÁFICOS DE FUNDO

15

4.1 - CORES E ELEMENTOS GRÁFICOS DE FUNDO

15

4.1.1 - BACKGROUND (IMAGEM DE FUNDO)

15

4.1.2 - BGCOLOR

16

4.2 - CORES DE LETRAS E LINKS

18

4.2.1 - ATRIBUTO TEXT

18

4.2.2 - ATRIBUTO LINK, VLINK E ALINK

19

5. LINKS

21

5.1 - ÂNCORAS

21

5.2 - INTERLIGANDO DOCUMENTOS EM OUTROS DIRETÓRIOS

22

5.3 - INTERLIGANDO URL'S

25

5.4 - LINKS PARA E-MAILS

25

6. LISTAS

26

6.1 - LISTAS NÃO NUMERADAS

26

6.2 - LISTAS NUMERADAS

28

6.3 - LISTA DE DEFINIÇÕES

30

6.4 - LISTA INTERCALADAS

33

7. IMAGENS

35

7.1 - INSERINDO IMAGENS NA PÁGINA

36

7.2 - DIMENSIONANDO IMAGENS

37

7.3 - ALINHANDO IMAGENS

38

7.3.1 - ALINHAMENTO EM RELAÇÃO AO NAVEGADOR

38

7.3.2 - ALINHAMENTO EM RELAÇÃO AO TEXTO

39

7.4 - OUTROS ATRIBUTOS

40

8.TABELAS

42

8.1 - MARCAÇÕES BÁSICAS

42

8.2 - DESENVOLVENDO UMA TABELA SIMPLES

43

8.3 - ATRIBUTOS DE CONTROLE DE TABELAS

45

8.4 - CORES E IMAGEM NA TABELA

56

8.4.1 - CORES NA TABELA

56

8.5 - IMAGEM DE FUNDO NAS TABELAS

57

9. CORES

55

9.1 - MATIZ, SATURAÇÃO E TONALIDADE

55

9.2 - SISTEMA DE REPRESENTAÇÃO DAS CORES

55

9.3 - PSICOLOGIA DAS CORES

56

10. TIPOLOGIA

59

10.1 - ESTILO ANTIGO

59

10.2 - ESTILO MODERNO

60

10.3 - SERIFA GROSSA

61

10.4 - SEM SERIFA

62

10.5 - MANUSCRITO

62

10.6 - DECORATIVO

63

PHOTOSHOP

11. FERRAMENTAS DO PHOTOSHOP

64

11.1 - INICIANDO O PHOTOSHOP

64

EXERCÍCIOS PARA REVISÃO

66

12. VISUALIZANDO AS IMAGENS

67

EXERCÍCIOS PARA REVISÃO

68

13. SELECIONANDO E MOVENDO IMAGENS

69

13.1 - MARCA DE SELEÇÃO

69

13.2 - LAÇO

70

13.3 - VARINHA MÁGICA

71

13.4 - CORTE DEMARCADO

73

EXERCÍCIOS PARA REVISÃO

73

14. MODIFICANDO AS SELEÇÕES

74

14.1 - FILTROS

75

EXERCÍCIOS PARA REVISÃO

76

15. TRANSFORMANDO AS SELEÇÕES

77

15.1 - PINCEL

78

15.2 - FERRAMENTA DEGRADÊ

78

15.3 - CARIMBO

80

15.4 - DESFOQUE, NITIDEZ E BORRAR

81

EXERCÍCIOS PARA REVISÃO

81

16. FERRAMENTAS DE TEXTO

82

EXERCÍCIOS PARA REVISÃO

84

17. CRIAÇÕES DE ARQUIVOS PARA WEB

86

EXERCÍCIOS PARA REVISÃO

88

18. VOCABULÁRIO UTILIZADO NO PHOTOSHOP

89

19. SEJA UM BOM WEB DESIGNER

91

DREAMWEAVER

20. APRESENTANDO O DREAMWEAVER

93

20.1 - BARRA DE TÍTULOS

94

20.2 - BARRA DE MENUS

94

20.3 - BARRA INSERIR

94

20.4 - BARRA DE FERRAMENTAS DOCUMENTOS

94

20.5 - PAINÉIS

95

20.6 - GRUPOS DE PAINÉIS

95

20.7 - ÁREA DE DESENVOLVIMENTO

95

20.8 - VISUALIZAÇÃO DO DREAMWEAVER

95

20.9 - BARRA DE STATUS

96

20.1.1 - MENUS CONTEXTUAIS

96

EXERCÍCIOS PARA REVISÃO

96

21. CRIANDO UM NOVO SITE

97

22. INICIANDO UMA PÁGINA NO DREAMWEAVER

98

22.1 - CRIANDO E SALVANDO UMA NOVA PÁGINA

98

22.2 - CRIANDO O ARQUIVO INDEX.HTM

98

22.3 - DEFININDO AS PROPRIEDADES DA PÁGINA

99

22.4 - INSERINDO TABELAS

100

22.5 - MAPEAMENTO DE IMAGENS

101

EXERCÍCIOS PARA REVISÃO

102

23. LINKS E NAVEGAÇÃO

103

23.1 - LOCALIZAÇÃO E CAMINHOS DOS DOCUMENTOS

103

23.2 - TESTANDO A PÁGINA

105

EXERCÍCIOS PARA REVISÃO

106

24. FORMULÁRIOS

107

25. DICAS PARA A CRIAÇÃO DE UM SITE

110

25.1 - DEFINIR O CONTEÚDO, O QUE SERÁ DIVULGADO NO SITE

110

25.2 - ESTABELECER OBJETIVOS

110

25.3 - DIVIDA SEUS CONTEÚDOS EM TÓPICOS

111

25.4 - QUAIS AS QUESTÕES QUE DEVO LEVANTAR COM RELAÇÃO

À ORGANIZAÇÃO E NAVEGAÇÃO DE UM SITE?

111

25.5 - Próxima etapa do planejamento

111

1

. DEFINIÇÃO

Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo .doc (formato Word) para HTML.

A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.

Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria e seguem algumas regras:

As TAGs aparecem sempre entre os sinais de “menor que” ();

Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).

A maioria das etiquetas tem a sua correspondente de fechamento:

De um modo geral, as tags aparecem em pares, por exemplo:

Cabecalho

Onde:

A tag

indica o início na instrução;

O texto Cabeçalho indica o texto que será formatado; E a tag

O símbolo que termina uma determinada etiqueta é igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente.

As etiquetas são necessárias, pois servem para definir a formatação de um bloco de texto, e assim marcamos onde começa e termina o texto com a formatação especifica por ela.

____________________________________________________________ Página - 1 -

IDEPAC - Instituto de Desenvolvimento Profissional Amigos

Contabilistas, Empresários, Profissionais Liberais e Informática

Há excessões para a utilização dos pares de etiquetas. Por exemplo, a que indica um final de um parágrafo:

não necessita de uma correspondente

____________________________________________________________ Página - 2 -

2

. CRIANDO DOCUMENTOS HTML

Todo documento HTML precisa conter certas tags padronizadas, no mínimo , , e , pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento).

Curso de WebDesign

Este é o primeiro nível de cabeçalho.

Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.

Este é o segundo paragráfo

A tag contém, entre outras coisas, o (título), e a tag armazena

todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, etc.

Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam informações em acordo com as especificações HTML.

Abra o bloco de notas, e digite o código acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).

____________________________________________________________ Página - 3 -

1.1 Modelo de arquivo HTML

Explicação:

A primeira TAG que encontramos no documento é . Ela é o elemento raiz de um documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags e .

O texto contido ente as TAG e define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.

A tag define o título da página. Observe a figura 1.1 o topo do navegador, está informado Curso de WebDesign.

A tag informa ao navegador o que deverá ser exibido graficamente. O corpo da página “BODY” é constituido pelo conteúdo que está entre as tags e .

____________________________________________________________ Página - 4 -

2.1 ELEMENTOS BÁSICOS

2.1.1 TÍTULOS

Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.

As tag utilizadas para títulos são: e .

Este é o título

E este o cabeçalho de nível 2

Fígura2.1 Modelo de título

2.1.2 CABEÇALHO

Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.

Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabeçalhos. O primeiro cabeçalho de uma página deve ser marcada como

.

____________________________________________________________ Página - 5 -

COMANDO:

Texto do Cabeçalho

Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do

cabeçalho.

COMANDO:

Cabeçalho nível 1

Cabeçalho nível 2

Cabeçalho nível 3

Cabeçalho nível 4

Cabeçalho nível 5

Cabeçalho nível 5

Fígura 2.1 Modelo de Cabeçalhos

____________________________________________________________ Página - 6 -

2.1.3 PARÁGRAFO

A tag

é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag

também é responsável pelo alinhamento dos parágrafos. O alinhamento pode ser:

LEFT : Parágrafo alinhado a esquerda. CENTER: Parágrafo alinhado ao centro. RIGHT: Parágrado alinhado a direita. JUSTIFY : Parágrafo justificado.

Alinhamento de parágrafos

Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).

Este parágrafo utiliza o alinhamento centralizado

Este parágrado utiliza o alinhamento à direita.

Fígura 2.2 Modelo de alinhamento de parágrafos

____________________________________________________________ Página - 7 -

2.1.4 QUEBRA DE LINHA

A tag
é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag
, ou “line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas. Veja a diferença entre o uso da tag

e da tag
:

MODELO I

Utilizando a tag p

Vamos separar esta linha com a marcação de paragráfo.

Para verificar a diferença.

MODELO II

Utilizando a tag br

Diferença quando separamos duas linhas utilizando
a marcação de quebra de linha

Diferença quando separamos duas linhas utilizando
a marcação de quebra de linha

Verificou a diferença?

Fígura 2.3 Modelos de quebra de linha

____________________________________________________________ Página - 8 -