Curso de Web Designer PROF. GLAUBER FREITAS

Tribunal Superior do Trabalho
Web Design - Prof. Glauber Freitas 1

Objetivos
 Desenvolver competências para o
domínio das técnicas de utilização dos
aplicativos mais comuns (Dreamweaver
e Photoshop) e também conhecimentos
fundamentais para a programação
visual de Websites.
 Carga horária: 80h

Docente: Prof. Glauber
Freitas
 Professor e Instrutor de Informática
 Formado em Sistemas de Informação
 Pós Graduando em Objetos, Sistemas
Distribuídos e Internet – UnB
Contato: glaubox@gmail.com

Alunos
 Bem-Vindos
 Quem é Quem

O curso...
 Introdução
 HTML
 Dreamweaver
 Photoshop
 Design para Web
 Projeto de Web Site

Introdução - HTML

A Internet

Endereçamento na
Internet
 nome@ domínio
Nome = identificação do usuário
(geralmente o login)
@ = AT, “está localizado”
Domínio = Nome do computador onde
“está localizado” o usuário “nome”

Elementos de um Projeto
Web
 Página Web – Arquivo de texto
formatado como HTML
 Home Page – Página pessoal ou inicial
do site.
 Web Site – Sítio, Lugar; conjunto de
páginas HTML, que contém informações
relacionadas. Também podem fazer
parte de um Web Site arquivos de texto,
programas, imagens, etc.

Estrutura de um Web
Site
 Um Web Site pode estár organizado de
três maneiras:
○ Sequencial
○ Árvore
○ Mista

Estrutura de um Web Site :
Sequencial

Árvore
Home
Page

Mista

HTML
 Hypertext Markup Language
 Linguagem ultilizada para criação de páginas
na Web
 Atualmente trabalha em conjunto com outras
tecnologias (JavaScript, CSS), que
proporciona páginas mais interativas.
 Interpretado pelo navegador e exibido da
maneira correspondente

Editores WYSIWYG
 What you see is what you get!
 Programas editores que criam o HTML
automaticamente. Ex: Dreamweaver,
Front Page, Composer
 Funcionamento

Tags HTML
 Os comandos em HTML são chamados de
tags
 Eles dizem ao navegador como o texto, a
informação e as imagens serão formatadas e
exibidas
 Os Tags são identificados pelos símbolos < >
e </>
 < nome da tag >
.
.
.
</nome da tag>

Tags HTML
 Os tags podem ser:
Abertos (simples): <comando> ex. <br>
Fechados: <comando> . . . </comando>
Compostos: <comando>
<elemento 1> ... </elemento 1>
<elemento 2> ... </elemento 2>
...
<elemento n> ... </elemento n>
</comando>

Regras e Dicas HTML
 Fechar sempre os tags fechados e
compostos
 NUNCA esquecer um sinal de “<“ ou de

”>” no ínicio ou fim da tag
 Não usar espaço no tag (no interior dos

sinais < e > )
 </ comando> ERRADO!!!
 <com na do> NUNCA!!!

Boas Práticas
HTML/Dicas
 Nome dos TAGS – Maiúsculas (não é estritamente
necessário mas facilitada a leitura do código.
 Nome dos arquivos (inclusíve extenção “.html” ou
“.htm”) – Minúsculas.
 Verifique suas págins em diferentes navegadores
para assegurar uma experiencia de visualização
consistente.
 Revise a grafia e gramatica antes de publicar sua
página; Verifique todos os links entre as Páginas

Estrutura Básica de uma
Página
<HTML>
<HEAD>
<TITLE> Aula 01 </TITLE>
</HEAD>
<BODY>
Minha primeira página HTML
</BODY>
</HTML>

Estrutura Básica de uma
Página
<HTML>
<HEAD>
</HEAD>
<BODY> Aqui você
coloca seus
Minha primeira página HTML códigos HTML,
Textos,
</BODY> Imagens e
Informações
</HTML>

Atributos do Tag
<BODY>
 BGCOLOR; cor de fundo da pagina
 TEXT; cor do texto da pagina
 LINK; cor dos links
 VLINK; cor dos links visitados
 ALINK; cor do link ativo
 BACKGROUND; define uma imagem
como fundo da pagina

Tabela de cores RGB

Exemplo da tag
<BODY>
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=“#FFCCCC” TEXT=“#000099”
LINK=”#009900” VLINK=“#FF0000”
ALINK=“#FF99FF”>
Minha segunda página HTML
</BODY>
</HTML>

Atributo <BODY
BACKGROUND>
 Atributo “background”
Serve para adicionar uma imagem como plano de
fundo da página HTML.
<BODY background=”imagem_fundo.jpg”>
 BGPROPERTIES= "FIXED” IE users only
<BODY BACKGROUND = "PISO.GIF" BGPROPERTIES= "FIXED ">

Títulos/Cabeçalhos
 No corpo do texto podem ser colocados
até seis níveis de títulos.
 A hierarquia começa em <H1>, como o
maior título, e termina em <H6>, como o
menor.

Exemplo
Títulos/Cabeçalhos
 <H1> Aqui será Exibido o texto com a cor padrão da página, e no
maior tamanho possível </H1>
 <H2>Aqui será exibido um texto menor...</H2>
 <H3>...aqui será exibido um texto menor...</H3>
 <H6>...E aqui será exibido o menor texto possível com a tag </H6>

<CENTER> ...
</CENTER>
 Ultilizea tag <CENTER> quando você
quiser centralizar blocos de texto,
imagens, tabelas etc. dentro da página
exibida.
 Seu uso é muito simples e pode ser
descrito da seguinte forma:
<CENTER><H1> Essa frase aparecerá

centralizada na página. </H1></CENTER>

Tag <P>
 A principal diferença entre a página HTML e um editor
de textos tradicional é que a página não reconhece o
fim de um parágrafo com o pressionamento da tecla
Enter. Se você simplesmente escrever palavras sem
TAGS de formatação em um arquivo html elas serão
formatadas em um grande único parágrafo. Você
precisa forçar o fim do parágrafo e a quebra de linha
usando TAGS especiais. O TAG responsável pela
quebra de parágrafos é o TAG <P> . Ele iniciará um
novo parágrafo e pulará uma linha entre o texto.

Observação <P>
 Os parágrafos são digitados normalmente. O tag <P>
serve para indicar o início de um novo parágrafo. Se o tag
<P> for colocado antes de um título (<H2>, por exemplo),
a marca de parágrafo é ignorada. Nesse caso, o próprio
título se encarrega de colocar o espaço necessário.
 Atributo align; alinhamento, left – center –

right.
ex: <P align=“center”>

Tag <BR>
 Linhas
 Assim como as marcas de parágrafo, as
quebras de linha são indicadas por um
tag simples. Para abrir uma nova linha,
usa-se o tag <BR>.

Tag <HR atributos>
 A tag <HR> cria uma linha horizontal no documento.
 Tem função decorativa
 Utilizada normalmente para separar seções de
informação
 Atributos:
 Align; posição (right, left, center).
 Size; espessura da linha em pixels.
 Width;largura da linha em px ou porcentagem em relação a
página.
Ex: <HR ALIGN=CENTER SIZE=2 WIDTH=100%>

Listas
 Na linguagem HTML existem elementos
específicos para a criação de listas, que
podem ser listas ordenadas (OL),
listas sem ordenação (UL), ou listas
de definições (DL).
 Podem ser criadas listas aninhadas, ou
seja, listas dentro de listas.

Listas Ordenadas <OL>
Ordered Lists
 <OL TYPE=... START=... > </OL>

 Entre os elementos de início e fim, os itens da lista
são definidos pelos elementos <LI> </LI>.
 O atributo opcional TYPE define como será o tipo
de numeração de cada linha. Os tipos disponíveis
são: “A” (A, B, ..., Z), “a” (a, b, ..., z), “I” (i, ii, ..., v),
e “1” (1, 2, ..., 5). Se omitido, é utilizado o tipo
padrão (1, 2, 3, 4).
 O atributo opcional START define a partir de que
elemento a numeração deve se iniciar.

Exercício <OL>
<html>
<head>
<title> Listas Ordenadas </title>
</head>
<body>
<h2> Lista ordenada por números </h2>
<ol>
<li> Elemento 1 </li>
</ol>
<h2> Lista ordenada por letras, iniciando em D </h2>
<ol type=''a''” start=4>
</ol>
</body>
</html>

Listas Não Ordenadas <UL>
Unordered Lists.
 <UL TYPE=...> ... </UL>
 A estrutura das listas sem ordenação é a mesma
das listas ordenadas, sendo que, na
apresentação, os itens serão precedidos por um
marcador (bullet).
 O atributo TYPE pode ser:
 – square: É um quadrado preenchido.

 – circle: É um círculo vazado.
 – disk: É um círculo preenchido .

Exercício <UL>
<html>
<head>
<title> Listas Não-Ordenadas </title>
</head>
<body>
<h2> Lista Não-Ordenada </h2>
<ul>
</ul>
Código do exercício continua
no slide seguinte...

Exercício <UL> continuação...
<h2> Duas listas Não-Ordenadas aninhadas </h2>

<ul type=square>
<li> Elemento 2
<ul>
<li> Elemento 2.1 </li>
</ul>
</li>
</ul>
</body>
</html>

Lista de Definição
 <DL> ... </DL> - São marcas que englobam uma
lista de definições, ideais para a criação de
glossários e coisas do gênero. A estrutura desta
lista é diferente das outras, pois existem dois
elementos – o termo a ser definido (DT), e a
definição propriamente dita (DD). Na exibição
cada termo aparece em uma linha, e a respectiva
definição na linha seguinte, deslocada para a
direita.

Exercício : Lista de
Definição
<html>
<head>
<title> Listas de Definição </title>
</head>
<body>
<h2> Listas de Definição </h2>
<dl>
<dt> HTML </dt>
<dd> HyperText Markup Language </dd>
<dt> OL </dt>
<dd> Listas Ordenadas </dd>
<dt> UL </dt>
<dd> Listas Sem Ordenação </dd>
<dt> LI </dt>
<dd> Elemento da Lista </dd>
</dl>
</body>
</html>

Margem
 Outro controle sobre o alinhamento dos elementos da página pode ser
conseguido através da mudança de margem. O texto sempre começa a
uma determinada distância da janela do navegador (um pouco diferente
em cada navegador). Às vezes, será necessário aumentar essa margem e
fazer com que o texto comece mais para dentro da página. O par de tags
<BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem.
O efeito desse tag pode ser acumulado para conseguir margens maiores.
Veja os exemplos:
 <BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>
 <BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem

ainda</BLOCKQUOTE></BLOCKQUOTE>

Texto Pré-Formatado
<PRE>
 Apresenta o Texto da mesma maneira que foi
digitado
 Com este tag, todos os espaços e entradas de
parágrafo (o resultado da tecla ENTER) são
respeitados.
 Com a Pré-Formatação, pode-se controlar o
espaçamento com abrra de espaço e colocar o
texto em praticamente qualquer lugar da
página
 <PRE> . . . . </PRE>

Formatação de Texto
 Todos os TAGS de formatação e estilo de texto devem ter seus tag
de fechamento, pois senão ele se espalhará em toda sua página e
não apenas onde você escolheu.
 Estilos de caracteres
 Os principais estilos de texto são:
Estilo Sintaxe Função

Negrito <B> Texto </B> Deixa o texto em Negrito
Itálio <I> Texto </I> Deixa o texto em Itálio
Sublinhado <U> Texto </U> Deixa o texto Sublinhado

Fontes, Tamanhos e Cores
<FONT>
 O Tag <FONT> é ultilizado para produzir a maioria das
modificações em blocos de texto
 <FONT
 FACE =“FONTE1, FONTE2, FONTE3” – Irá defiinir que tipo de
fonte seu texto irá utilizar (ARIAL, TIMES, VERDANA)
 SIZE=“VALOR” – Irá definir qual o tamanho da fonte utilizada. Os
valores inteiros vão de 1 a 7.
 COLOR=“VALOR” – Irá definir qual a cor aplicada na fonte entre
os tag <FONT>
<FONT FACE ="ARIAL" COLOR="RED" SIZE =“5"> Feliz 2008! </FONT>

Hyperlinks <A>
 Com o HTML é possível fazer-se
ligações a partir de um bloco de texto ou
imagem à um outro documento e
também ligações entre os elementos do
próprio documento, como áreas ou
seções diferentes no do decorrer do
documento.
 Os Hyperlinks são destacados nos browsers por
cores distintas ou sublinhados. (obs.: Nem sempre)

Hyperlinks <A>
 Criação de um hyperlink básico:
<A HREF=url*> âncora* </A>
 url = é o caminho absoluto ou relativo do
documento/arquivo/seção de destino.
 âncora = bloco de texto ou imagem que será ultilizado
como ligação entre o elemento especificado no atributo
HREF e o documento que possui o link. É ela que será
clicada pelo usuário para que o hyperlink passe a funcionar
 Ex:
<A HREF=“http://www.google.com”> Visitar o Google </A>

Caminhos Absolutos
 Ultilizama URL completa do documento
que está sendo referenciado pelo link

Caminhos Relativos

Links para seções de um
documento

Especificando um
Destino

Curso de Web Designer PROF. GLAUBER FREITAS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de Web Designer PROF. GLAUBER FREITAS

Uploaded by

Copyright:

Available Formats

Tribunal Superior do Trabalho

Web Design - Prof. Glauber Freitas 1

 Carga horária: 80h

Web Design - Prof. Glauber Freitas 2

Web Design - Prof. Glauber Freitas 3

Web Design - Prof. Glauber Freitas 4

Web Design - Prof. Glauber Freitas 5

Web Design - Prof. Glauber Freitas 6

Web Design - Prof. Glauber Freitas 7

Web Design - Prof. Glauber Freitas 8

Web Design - Prof. Glauber Freitas 9

Web Design - Prof. Glauber Freitas 10

Web Design - Prof. Glauber Freitas 11

Web Design - Prof. Glauber Freitas 12

Web Design - Prof. Glauber Freitas 13

Web Design - Prof. Glauber Freitas 14

Web Design - Prof. Glauber Freitas 15

Web Design - Prof. Glauber Freitas 16

Fechados: <comando> . . . </comando>

Web Design - Prof. Glauber Freitas 17

 NUNCA esquecer um sinal de “<“ ou de

 Não usar espaço no tag (no interior dos

Web Design - Prof. Glauber Freitas 18

Web Design - Prof. Glauber Freitas 19

Web Design - Prof. Glauber Freitas 20

Web Design - Prof. Glauber Freitas 21

Web Design - Prof. Glauber Freitas 22

Web Design - Prof. Glauber Freitas 23

Web Design - Prof. Glauber Freitas 24

 BGPROPERTIES= "FIXED” IE users only

<BODY BACKGROUND = "PISO.GIF" BGPROPERTIES= "FIXED ">

Web Design - Prof. Glauber Freitas 25

Web Design - Prof. Glauber Freitas 26

 <H2>Aqui será exibido um texto menor...</H2>

 <H3>...aqui será exibido um texto menor...</H3>

 <H4>...aqui será exibido um texto menor...</H4>

 <H5>...aqui será exibido um texto menor...</H5>

Web Design - Prof. Glauber Freitas 27

<CENTER><H1> Essa frase aparecerá

Web Design - Prof. Glauber Freitas 28

Web Design - Prof. Glauber Freitas 29

 Atributo align; alinhamento, left – center –

Web Design - Prof. Glauber Freitas 30

Web Design - Prof. Glauber Freitas 31

Ex: <HR ALIGN=CENTER SIZE=2 WIDTH=100%>

Web Design - Prof. Glauber Freitas 32

Web Design - Prof. Glauber Freitas 33

 <OL TYPE=... START=... > </OL>

Web Design - Prof. Glauber Freitas 34

Web Design - Prof. Glauber Freitas 35

 O atributo TYPE pode ser:

 – square: É um quadrado preenchido.

Web Design - Prof. Glauber Freitas 36

Web Design - Prof. Glauber Freitas 37

<h2> Duas listas Não-Ordenadas aninhadas </h2>

Web Design - Prof. Glauber Freitas 38

Web Design - Prof. Glauber Freitas 39

Web Design - Prof. Glauber Freitas 40

 <BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

 <BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem

Web Design - Prof. Glauber Freitas 41

Web Design - Prof. Glauber Freitas 42

Estilo Sintaxe Função

Web Design - Prof. Glauber Freitas 43