WEBDESIGN - paulotrentin.com.br · Objetivos para esta aula Debater sobre sites estáticos e...

WEBDESIGN

Professor: Paulo Trentin – paulo@paulotrentin.com.br

http://www.paulotrentin.com.br

Escola CDI de Videira

1 CDI - Curso de Webdesign - Prof. Paulo Trentin

Objetivos para esta aula

Debater sobre sites estáticos e dinâmicos

Revisar conceitos a serem usados nesta aula

Conhecer estrutura básica do HTML

Criar nossa primeira página HTML

Prover navegação entre páginas HTML

Entender navegação via URL

Acessar site dos colegas

2 CDI - Curso de Webdesign - Prof. Paulo Trentin

Revisão rápida

O que é um servidor?

Computador de alto desempenho que contém

serviços e os disponibiliza na rede.

O que é um serviço?

Serviços são programas com uma finalidade

específica que rodam de forma contínua

respondendo requisições em determinadas portas.

Exemplo: httpd, proftpd, named.

3 CDI - Curso de Webdesign - Prof. Paulo Trentin

Revisão rápida

Qual programa responde requisições HTTP e HTTPS?O programa Apache, normalmente na porta 80 e 443 respectivamente.

Qual a função do apache?O Apache é responsável por responder pedidos do protocolo HTTP. Em resumo, ele processa requisições de um cliente, encontra a página responsável por responder aquela requisição, processa tal página e a entrega para o cliente.

4 CDI - Curso de Webdesign - Prof. Paulo Trentin

Revisão rápida

O que são páginas?

Como vimos, páginas são apenas arquivos de texto

contendo elementos HTML que serão interpretados

pelo navegador.

5 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Inicialmente vá até a pasta www do seu apache. No

nosso caso: D:\webdesign\wamp\www e crie a pasta

meusite.

6 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Acesse a pasta criada e crie um arquivo de texto

chamado index.html. Observe que por enquanto ele

é um arquivo de texto. Seu nome completo na

verdade é index.html.txt

7 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Por que o nome dele é index.html.txt? O windows, por padrão, oculta as extensões dos

arquivos. São exemplos de extensões: .jpg, .gif,

.doc, .docx, .html, .php

Qual a finalidade das extensões?Elas informam ao sistema operacional com qual

programa deve ser aberto determinado arquivo.

Por exemplo, um arquivo html, por padrão, será

aberto com o navegador padrão da máquina.

8 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Por que o windows oculta as extensões? O windows quer garantir que nenhum usuário, ao

alterar o nome de uma foto por exemplo, exclua a

extensão, deixando a foto impossibilitada de ser

aberta ao dar um duplo clique sobre ela.

9 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Como exibo as extensões dos arquivos? Estando na pasta meusite, pressione a tecla Alt vá

até a aba Ferramentas e clique em Opções de

Pasta.

10 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Como exibo as extensões dos arquivos?

Cont..

Estando na janela Opções de Pasta, acesse a aba

Modo de Exibição, e dento de Configurações

Avançadas procure por Ocultar as extensões dos

tipos de arquivos conhecidos e desmarque esta

opção.

11 CDI - Curso de Webdesign - Prof. Paulo Trentin

12 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Como exibo as extensões dos arquivos?

Cont..

Após salvar as alterações, voltemos a pasta

meusite. Agora vemos o nome completo do arquivo.

13 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Basta agora você renomear o arquivo index.html.txt

para index.html e verificar que agora ele é um

arquivo html que por padrão irá abrir com o google

chrome (se ele for seu navegador principal).

14 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Por que index?

Com o surgimento do html e seus hyperlinks tornou-se necessário um índice que seria a primeira página de um domínio a ser exibida.

Podemos usar outro nome para o índice?

Sim, o apache permite configurar vários índices, seguindo uma hierarquia (se o primeiro não for encontrado, ele procura o próximo e assim por diante).

15 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Configuração do Apache (httpd.conf) para índices.

# DirectoryIndex: sets the file that Apache will serve if a directory

# is requested.#<IfModule dir_module>

DirectoryIndex index.php index.php3 index.html index.htm

</IfModule>

16 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Acessando nossa página

Abra o arquivo que você criou dando duplo clique sobre ele. Teremos então o Chrome (ou seunavegador padrão) aberto como mostrado abaixo. Repare o endereço do navegador.

17 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Editando nossa página

Abra o NetBeans e vá na aba Arquivo e

depois em Abrir Arquivo…

18 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Editando nossa página

Navegue até

D:\webdesign\wamp\www\meusite e abra o

arquivo que você criou, index.html.

19 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

O que vem primeiro?A primeira coisa que você deve definir em umapágina HTML é DTD que define o tipo de documento (Document Type Defenition) que a página está usando.

Quem precisa saber disso?O navegador web (web browser), afinal ele é quemirá interpretar a linguagem do arquivo que recebeudo Apache. Sistemas de validadores de site tambémprecisam saber qual linguagem sua página estáusando, do contrário irão asumir funções padroespodendo gerar erros.

20 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Precisarei saber todas essas variações de HTML?

É importante sabermos quais elementos podem ser usados para cada linguagem, encontramos aquihttp://www.w3schools.com/tags/ref_html_dtd.asp a relação de elementos que podem ser usados de acordo com o tipo de documento.

Quantas linguagens existem?

A W3C define os tipos de documentos HTML 4.01 / XHTML 1.0 e XHTML 1.1. Hoje temos também o HTML5, porém ainda não está pronto e seu uso em sites convencionais deve ser bastante restrito.

21 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Como declaro qual doctype (DTD) estou usando?

Encontramos aqui http://www.w3.org/QA/2002/04/valid-dtd-list.htmluma lista completa dos DTD que podemos usar.

Para mais informações sobre doctype acesse este excelente artigo: http://www.alistapart.com/articles/doctype/ recomendado pelo W3C.

Qual Document Type Definition iremos usar?

XHTML 1.0

22 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Declaração do DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

23 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Declaração do DTD

Aqui temos um modelo de referência:

http://www.w3.org/2010/04/xhtml10-

strict.html

24 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Qual o próximo passo?

Precisamos agora iniciar nossa página.

Para informar ao navegador onde ela

começa e termina usamos a tag <html>.

Observação: lembre-se que uma tag deve

ser sempre aberta e depois fechada:

<hmlt></html>

25 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Inserindo tag HTMLObserve que ela contém atributos. xmlns define a namespace do documento e é obrigatório.lang e xml:lang definem a linguagem do documento e da xml usada respectivamente.

26 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Inserindo o cabeçalho e título do documentoTodo site precisa ter um cabeçalho, representado pela tag head, que contém informações da página, como título, meta tags, arquivos javascript e cssentre outros elementos.

27 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Sobre o título da página

A tag title informa ao navegador qual o título da

página atual. Todas as páginas precisam ter títulos

diferentes como produtos, contato, inicial.

Repare no seu navegador que o título é informado

28 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

O que será exibido – inserindo corpo da página

A tag body define o que será exibido na tela do

navegador do usuário. Dentro dela colocamos o

conteúdo de nosso site, o corpo de nossa aplicação.

29 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando nossa primeira página HTML

Título da página e parágrafo

A tag h1 informa ao navegador que estamos

inserindo um título e a tag p, um parágrafo.

30 CDI - Curso de Webdesign - Prof. Paulo Trentin

Criando hyperlinks

A parte mais divertida de fazer um site, é poder

navegar nele. Para criarmos os links que fazem a

ligação entre as páginas usamos um elemento

específico o elemento a:

<a href=“contato.html”>Página de contato</a>

href é um atributo da tag a. Ele contém o endereço

que o navegador irá acessar quando o usuário clicar

neste link chamado “Página de contato”.

31 CDI - Curso de Webdesign - Prof. Paulo Trentin

Hyperlinks que abrem em nova aba

Já notou que em alguns sites, ao clicar em um link você é redirecionado para uma nova página, porém em outra aba?

Por que usar esse atributo?É muito interessante quando você fizer propaganda de algo em seu site, e não deseja que o usuário deixe-o ao clicar nesta propaganda.

<a href=“contato.html” target=“_blank”>Página de contato</a>

target é um atributo da tag a. Ele informa qual é o tipo do destino que você vai usar, _blank é para uma nova página.

Muito útil também se usado com a combinação de frames na página.

32 CDI - Curso de Webdesign - Prof. Paulo Trentin

Atividade

Faça seu primeiro site, com pelo menos três páginas. Cada página deve ser capaz de acessar as outras, através de hyperlinks;

Sugestões de páginas: index.html, sobre.html, contato.html;

Você pode criar quantas páginas quiser;

O título da página deve ter como prefixo seu nome;

Use as tags h1, h2 para título e subtítulo do conteúdo.

33 CDI - Curso de Webdesign - Prof. Paulo Trentin

Acessando o site de seus colegas

Após o término do site, navegue no site de seus colegas através do endereço de IP da máquina deles. Teste a navegação dos sites!

Basta inserir o endereço de ip no navegador:http://ip_de_seu_colega/meusite

O que é um endereço de IP?

Fazendo uma analogia simples, é o nome do computador na rede.

É uma sequência numérica, representada por 4 octetos (4 Bytes) que identifica seu computador na rede.

34 CDI - Curso de Webdesign - Prof. Paulo Trentin