WEBDESIGN
Professor: Paulo Trentin – [email protected]
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