Webdesign 27/04/11

Curso de WebDesign 2011 - CPFP Valdemar Mattei – Santo André – Professora Ana Cláudia
Aula 1 - Personalização de DESKTOP
Barras
Clique com o botão direito do mouse sobre uma área livre da barra que deseja
personalizar, nas opções temos:
Adiciona itens na barra.
Abre a janela abaixo, para configurar cor, tamanho,etc.
Retira a barra selecionada.
Adiciona uma nova barra.
Abre a janela de ajuda.
Informa a versão do GNOME usado.
Navegador IceWeasel – Aplicações ›› Internet ›› Navegador Ice Weasel

Programa navegador de internet (exemplos Mozilla Firefox, Google Chrome, Internet
Explorer, Opera, Safari)
gedit - Editor de Texto - Aplicativos ›› Acessórios ›› Editor de Textos

Programa usado para digitar os comandos HTML (freeware para Windows=Notepad++)
Nautilus – Navegador de arquivos - Aplicações ›› Ferramentas de Sistema ›› Navegador de

Arquivos (equivale ao Windows Explorer)
Personalização do Nautilus
Criaremos as pastas “exercicios”, “imagem” e “meu_site”, sem acentuação e tudo em
minúsculas. Todos arquivos salvos nestas pastas terão no máximo 7 caracteres, usarão
apenas letras minúsculas, sem acentuação e sem caracteres especias.
Clicando Ctrl+L substituímos o caminho(fig à esq) pela barra de endereços(fig à dir).
Para trocar o “background” do Nautilus basta ir ao Menu Editar ›› Planos de Fundo e

Emblemas ›› abas Padrões ou Cores e selecionar o desejado.
Podemos enfeitar as pastas com o uso de Emblemas, para diferenciá-las, mas use
emblemas com moderação, ou seu computador poderá demorar para abri-las.
Menu Editar ›› Planos de Fundo e Emblemas ›› aba Emblemas.
Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

Escritos em verde são os comandos, em rosa as variáveis, em azul exemplos de textos que ficarão visíveis no HTML. 1-30
Aula 2 - Comandos Básicos de HTML
< ou > - Tags ou etiquetas, todo comando HTML deve ser digitado entre as tags.
Estrutura Básica de HTML
<html> - Abre todo documento de HTML.
<head> - Abre o cabeçalho informativo da barra de títulos do navegador.
<title> Texto </title> - Título de cabeçalho do navegador.
</head> - Fecha o cabeçalho da barra de títulos do navegador.
<font color=”blue” size=”3” face=”arial”> - Definições de fonte que serão usadas.

Aqui são definidos:
Cor da fonte(color) que podem ser definidas pelo nome da cor em inglês ou por uma
tabela de códigos de cores para html.
Tamanho da fonte(size) que é variável entre 1 sendo o menor e 7 sendo o maior.
Tipo da fonte(face), aqui pode-se escolher o modelo da fonte que será usada.
<body bgcolor=”white”> - Inicio da estrutura de texto(corpo de texto).

Bgcolor – é o comando para escolha da cor de fundo (BackGroundCOLOR)
Usamos a palavra Texto apenas como exemplo – corpo do texto
</body> - Fecha estrutura de texto.
</font> - Fecha definições de fonte.
</html> - Fecha o documento HTML.
________________________________________________________________________________
Efeitos de fonte:
Negrito - <b> Bold </b> Itálico - <i> Italic </i> Sublinhado - <u> Underline</u>
<br> - Quebra de linha, um dos raros casos de comando HTML que não é necessário
fechar.
<p align=”justify”> ….. </p> - Parágrafo, sendo align= Alinhamento, que pode ser
“center”(centralizado), “left”(à esquerda), “right”(à direita) ou “justify”(justificado).
<h1> Texto </h1> - Título de texto, ou topo da página, variando tamanho de 1(maior)
até 6(menor).
<marquee> Texto </marquee> - Efeito de letreiro.
<blink> Texto </blink> - Efeito de pisca-pisca.(não funciona no Google Chrome).

Texto <small> pequeno </small> - O texto selecionado fica menor que o padrão usado,
como no exemplo: Texto pequeno.
Texto <big>G</big>rande – O texto selecionado fica maior que o padrão usado, como
no exemplo: Texto Grande.
<sub>subscript</sub> - O texto selecionado fica subscrito, como o “10” no exemplo:

log10(h)
<sup>superscript</sup> - O texto selecionado fica sobrescrito, como o 2 do exemplo:

ax2+bx+c=0
<s>Strikethrough</s> - Risca o texto selecionado, como no exemplo: Riscado
Atenção: COMANDOS HTML COM VARIÁVEIS - Não esqueça que estes comandos são
normalmente seguidos do sinal de igual(=) com a definição entre aspas(“ ”).
Escritos em verde são os comandos, em rosa as variáveis, em azul exemplos.
Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes:
Ctrl+T no Nautilus funciona pra abrir nova aba (janela).
Quando não aparecer a barra lateral no Nautilus, vá na Barra de Menu » Ver » Painel (ou
Barra) Lateral e confirme o mesmo, ou pressione a tecla F9.
EXERCICÍOS
01 - Escrever um texto de apresentação, com nome, idade, formação escolar, curso,

quais expectativas sobre o curso, cidade em que reside, quais são seus hobbys e
interesses, e profissão.
Salvar este documento como apres.html, na pasta exercicios, não se esqueça de utilizar
o comando de align=”justify”, e ao digitar usar a tabela de caracteres especiais em
acentuações.
02 – Relatar um fato ocorrido em sua vida (1° emprego, como ficou sabendo do curso,
sua rotina, etc.), no minimo 3 parágrafos. Salvarr este documento como fato.html, na
pasta exercicios.

Aulas 3 e 4 – Listas
Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para
uma melhor exemplificação de um determinado assunto. São recursos extremamente
usados, inclusive quando nem imaginamos que ele esta sendo usado, como no caso de
menus. Existem três tipos de listas:
• Desordenada ou Não ordenada
• Ordenada ou numerada
• De definição - usada para fazer comentários sobre os itens expostos
Listas Desordenadas
As listas desordenadas são usadas para listar itens, sem se preocupar com sua
sequência. Podemos chamar também de lista de marcadores. As tags usadas para criar
uma lista desordenada são <ul>(unordered list) e <li>(list item). A tag <ul> é usada para
definir a lista e a tag <li> é usada para cada item da lista.
As opções de marcadores são:
▪ square (quadrado) ° circle (círculo) • disc (disco)
Digitar a estrutura abaixo em HTML, e salvar como listad.html, na pasta exercicios.
O resultado final vemos abaixo, e na sequência as outras opções de marcadores:

Listas Ordenadas
As listas ordenadas ou numeradas são usadas para indicar alguma sequência ou

numeração. As tags usadas para criar uma lista não ordenada são <ol>(ordered list) e
<li>. A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da lista.
As opções de ordem na lista são numéricas por padrão, mas também podemos usar:
A=maiúsculas a=minúsculas I=algarismos romanos
Digitar a estrutura abaixo em HTML, e salvar como listao.html, na pasta exercicios.
O resultado final vemos na primeira figura, nas outras exemplos de listas ordenadas:

Listas de definição
Listas de definição são usadas em locais onde há um termo a em sequência a sua

definição, como em dicionários, listas de glossário ou em perguntas e respostas. As tags
usadas são:
<dl> definition list - cria a lista de definição.
<dt> definition term - onde o termo é proposto.
<dd> definition definition - onde o termo é definido.
Digitar a estrutura abaixo em HTML, e salvar como listadf.html, na pasta exercicios.
O resultado final vemos abaixo:
Aula 5 - EXERCICÍO
Elaborar um arquivo HTML usando todas as listas ensinadas (lista ordenada, lista
desordenada e lista de definição).

GIMP
GIMP (GNU Image Manipulation Program) Aplicativos » Gráficos » Editor de Imagens

GIMP é um programa de código aberto voltado principalmente para criação e edição de
imagens, e em menor escala também para desenho vetorial. Abaixo vemos a raposa
(mascote) que é o ícone do GIMP :
Habitue-se a sempre que aplicar um efeito ou fazer qualquer alteração na imagem salvá-
la novamente no computador. Após a escolha do nome da imagem, escolha o formato
que deseja salvá-la, e nome da extensão (.jpg, gif ou png por exemplo).
Abaixo vemos o programa Gimp completo, com a caixa de ferramentas à direita, imagem
ao centro e caixa de camadas à esquerda:
O atalho de teclado para se abrir o menu de camadas é Ctrl+L.

Para mesclar a caixa de camadas em caixa de ferramentas (principal), mova o mouse até
que a seta do mouse se transforme na mão (link), quando isto ocorrer, clique e arraste
até a caixa de ferramentas, onde mostra a figura esquerda abaixo:
Inteiro
Rompido
Redimensionamento de imagens Menu » Imagem» Redimensionar Imagem

Atenção: Repare no desenho do “elo de corrente”(figura acima direita) se esta rompido
ou não, pois com o elo inteiro a figura manterá suas proporções, já com o elo rompido,
pode-se mudar a largura e altura da imagem ao seu gosto.

Formatos de Imagens
O formato JPEG (Joint Pictures Expert Group) pode trabalhar com esquema de cores em
24 bits. Isso significa que este formato aceita 16,8 milhões de cores. O JPEG é um dos
formatos de imagens mais populares e isso se deve à capacidade de formar imagens
fiéis à original. Além disso, os arquivos em JPEG costumam ser pequenos.
O formato GIF (Graphics Interchange Format) trabalha com uma paleta de 256 cores. Isso
faz com que o GIF não seja recomendável para figuras que precisam de aproximação da
realidade, a não ser que a imagem em questão seja em preto e branco (escala de cinza).
Devido a essa característica, o uso do formato GIF é voltado para ícones ou imagens que
não precisam de muitas cores (ilustrações, por exemplo).
O formato PNG (Portable Network Graphics) é interessante porque consegue trabalhar

com esquema de 24 bits de cores, ou seja, 16,8 milhões de cores. No entanto, em
comparação com o JPEG, a compressão obtida é mais eficiente e não proporciona perda
de qualidade a cada salvamento, o que permite maior fidelidade à imagem original.
Além disso, as imagens em PNG não requerem muito espaço, podendo-se ter figuras de
alta definição e tamanho em bytes pequeno. Ainda assim, o JPEG costuma ter imagens
de tamanho ainda menor em alguns casos.
Aula 6 - Links
Trecho, palavra ou ícone que conecta um ponto a outro em documentos e/ou sites. A
propriedade mais importante dos documentos html é a possibilidade de fazer
hiperligações. Para isso usa-se a etiqueta a (de anchor). A marca para realizar isso é <a
href = ...></a>, onde o valor de href é o endereço que vamos acessar. O que estiver
entre <a href> e </a> será o nosso link. Links também podem ser utilizados em qualquer
parte do documento entre <body> </body>. Vamos aprender 5 tipos de links, que são:
• Link Interno
• Link Local
• Link Remoto
• Link com Arquivo
• Link com Endereço de correio (definição esta após tabelas)
Link Interno
São os links que apontam para um lugar diferente dentro da mesma página, quando
esta é muito extensa. São usadas por exemplo em FAQs (Perguntas Frequentes),
grandes listas, Ir ao Topo ou Ir Abaixo. Para criar um link deste necessitamos além do
link de origem, um segundo link que será colocado no destino.
<a href=”#abaixo”> Ir abaixo </a> ou ainda <a name=”acima”> </a>

<a name=”abaixo”> </a> <a href=”#acima”> Ir acima </a>
Como exercício pegar um texto grande, digitar em HTML, e inserir links “Ir Acima” e
também “Ir Abaixo” e salvar como linki.html , na pasta exercicios.

Link Local
São os links que se dirigem à outras páginas do mesmo site, por exemplo home,
localização, contato. Devem estar na mesma pasta. Abaixo um exemplo:
<a href=”apres.html”> Apresenta </a>
Para mudar as cores padrões de links podemos usar:

link - define a cor dos link que não foram visitados;
vlink - define a cor dos links já visitados;
alink - define a cor dos link ativos, ou seja, quando clicamos no link.
Este comandos devem ser feitos na tag body, como no exemplo:
<body link=”green” vlink=”red” alink=”yellow”>
Como exercício pegue o arquivo apres.html, na pasta exercicios e crie um link após o
texto de apresentação para listao.html, com a frase “Conheça a lista ordenada” sendo o
link, e no arquivo listao.html insira um link para apres.html, com a frase “Me conheça”
sendo o link no final da lista. Não se esqueça de usar link, vlink e alink.
Link Remoto
São os links que se dirigem às páginas fora do “nosso site”,ou seja outros sites. Veja o
exemplo de link remoto:
<a href=”www.google.com”> Pesquise aqui antes de perguntar </a>
Para abrir um link em uma nova janela, usamos target=”blank” como no exemplo:
<a href=”cpfpwebdesign.blogspot.com” target=”blank”> Visite o Blog do curso </a>
Como exercício insira um link do seu site predileto no apres.html, e não se esqueça de
usar o target.
Link com Arquivo
Este não é um tipo de link propriamente dito, mas o assinalamos aqui porque é um tipo
de link muito habitual e que apresenta alguma complicação para o usuário novato.
O mecanismo é o mesmo que conhecemos nos links anteriores, porém no lugar de nos
dirigir para uma página web, está dirigido para um arquivo de outro tipo.
Se queremos linkar com um arquivo minhafoto.png que se encontra no mesmo diretório
(pasta) que a página, ele seria assim:
<a href=”minhafoto.png”> Baixe um excelente espanta baratas </a>
Como exercício insira um link para um arquivo (mp3, foto, zip, etc) no apres.html. Seja
criativo.

Aula 7 – Links e Estrutura do Site
Atividade Links
Utilize o texto abaixo sobre inclusão digital para realizar esta atividade. Usaremos os 4
tipos de links aprendidos até aqui: link interno, local, remoto e de arquivo.
Para a criação do link interno, copie e cole várias vezes o texto sobre inclusão, até que
apareçam as barras de rolagem.
Para a criação do link local utilize o arquivo de sua apresentação (apres.html).
Para a criação do link remoto utilize um site de sua preferência.
Para a criação do link de arquivo utilize o documento cartilha.pdf.
Não se esqueça de formatar o texto com os comandos HTML e salvar tudo na pasta
exercicios , como exerlinks.html.
INCLUSÃO DIGITAL
Inclusão Digital ou infoinclusão é a democratização do acesso ás tecnologias da

Informação, de forma a permitir a inserção de todos na sociedade da informação.
Inclusão digital é também simplificar a sua rotina diária, maximizar o tempo e as suas
potencialidades. Um incluído digitalmente não é aquele que apenas utiliza essa nova
limguagem, que é o mundo digital, para trocar e–mails, mas aquele que usufrui desse
suporte para melhorar as suas condições de vida.
A Inclusão Digital, para acontecer, precisa de três instrumentos básicos que são:
computador, acesso à rede e o domínio dessas ferramentas pois não basta apenas o
cidadão possuir um simples computador conectado á internet que iremos considerar
ele, um incluído digitalmente. Ele precisa saber o que fazer com essas ferramentas.
http://pt.wikipedia.org/wiki/inclu%C3%A3o_digital
Em HTML, sem copiar e colar diversas vezes ficará assim:

Estrutura do Site
Definição de duplas e assuntos dos sites. Limite de 3 cores para o site. Todas páginas
devem conter o “topo”(logotipo e título do site). A estrutura do site deverá ter 5
páginas, sendo estas:
index.html » Página principal
A página principal deve conter, em 3 ou 4 colunas, os seguintes itens:
• Logotipo do site (feito no GIMP)
• Título do site “topo” será mantido em todas páginas do site
• Barra de navegação (escolher entre lay-out 1 ou 2 abaixo nesta página)
• 1 imagem estática
• 1 imagem em movimento (.gif)
• Pesquisa interna do site
• Enquete
• Contador de acessos
• Janela Pop-up
• Rodapé do site
Ao usar link local, lembre-se do “target”, para abrir em novas abas (janelas).
Abaixo os 2 modelos de lay-out de exemplo para escolha:
den1.html / den2.html » Desenvolvimento do tema

Em duas páginas, com 4 colunas, vamos “falar”(explicar) sobre o tema do site.
Lembrando de manter o “topo” nas duas páginas, com um link para a página principal.
form.html » Formulário
Aqui faremos um formulário para que os internautas respondam, e assim saberemos
melhor qual o tipo de público visita nosso site. Lembrando de manter o “topo” com um
link para a página principal.
port.html » Portfólio
Aqui colocamos a descrição profissional do autor do site, sua formação, experiência,
cursos, contato profissional, etc. Lembrando de manter o “topo” com um link para a
página principal.

Aulas 8 e 9 – Tabelas
As tabelas são muito importantes para o design de uma home-page. Com elas pode-se
fazer alinhamentos que dificilmente seriam possíveis com simples comandos.
O comando para se inserir uma tabela é <table>; para iniciar uma linha devemos
introduzir a tag <tr> e para uma célula (alguns preferem dizer coluna) <td>. Todos estes
comandos são encerrados como </table>, </tr> e </td> respectivamente.
Atributos que possibilitam modificar a tabela, em <table ….> :

align – Alinha horizontalmente a tabela em relação à página.
background – possibilita colocar um fundo para a tabela.
bgcolor – define a cor de fundo da tabela.
border – define, em pixels, a espessura da borda principal.
bordercolor – define a cor da borda.
cellpadding – define, em pixels, o espaço entre as bordas da célula e o seu conteúdo.
cellspacing - define, em pixels, o espaço entre as bordas.
height – define a altura da tabela, em pixels ou porcentagem.
width – define a largura da tabela, em pixels ou porcentagem.
Atributos que possibilitam modificar uma célula (coluna) <td> ou toda uma linha <tr> :
align – Alinhamento da célula ou da linha.
valign – Alinhamento vertical, sendo top=acima, midle=centro e bottom=abaixo.
bgcolor – define a cor de fundo da célula ou linha.
bordercolor – define a cor da borda.
Atributos que possibilitam modificar somente a célula (coluna) <td> :

background – permite colocar um fundo para a célula.
height – define a altura da célula, em pixels ou porcentagem.
width – define a largura da célula, em pixels ou porcentagem.
colspan – mescla uma célula horizontalmente.
rowspan – mescla uma célula verticalmente.
Não esqueça que estes comandos são seguidos do sinal de igual(=) com a definição entre aspas(“ ”).
Links a Endereços de Correio (e-mail)
Saõ aqueles em que ao clicá-los nos abre uma nova mensagem de e-mail dirigido a um
determinado endereço de e-mail. Veja no exemplo:
<a href=”mailto:sickeira@gmail.com”>sickeira@gmail.com</a>
Exercícios
Fazer uma tabela com duas colunas, sendo a primeira coluna nome e a segunda e-mail,
de todos alunos da turma, na primeira linha mesclar as duas célular e escrever “Lista de
Alunos”, inserir link a endereços de correio, deixar a tabela com pelo menos 2 cores de
linha diferente, salvar na pasta exercicios como table1.html. Seja criativo na sua tabela.

Abaixo um exemplo de estrutura de como ficará a tabela, com apenas 2 nomes:
Aula 10 – Exercício Tabela 2
Antes de iniciar, vamos configurar o Gedit para mostrar os números das linhas e ainda
destacar a linha em uso, para isso com o Gedit aberto, vá até a barra de menus Editar »
Preferências » Aba Visão e confirme conforme a figura:
Vamos fazer a estrutura do 1º lay-out de site. Fazer uma tabela de 4 colunas por 7
linhas, mesclar a 1ª linha (coldspan) “TÍTULO DO SITE”, colocar os botões HOME, DEN1,
DEN2, FORM e PORT, na última linha RODAPÉ. Para ficar como a figura abaixo:

Abaixo a resolução em HTML:
Agora pra aprofundar um pouco mais, vamos dividir o “CORPO” em 3 colunas, sendo
que na primeira, vamos dividir em 3 células, como na figura abaixo:
Repare que teremos que inserir outra tabela dentro da tabela, a partir da linha 8 do
exemplo anterior, onde está a palavra corpo, inserimos esta nova tabela, como visto
abaixo da linha 9 até a linha 15 :

Aula 11 – Exercícios Tabela 3
Vamos fazer a estrutura do 2º lay-out de site. Fazer uma tabela de 5 colunas por 4
linhas, 1ª linha “TÍTULO DO SITE”, colocar HOME, DEN1, DEN2, FORM e PORT na linha 2,
na linha 3 inserir 4 colunas, na linha 4 RODAPÉ. Para ficar como a figura abaixo:
Abaixo temos a resolução em HTML, repare que a inserção da segunda tabela ficou
entre as linhas 20 e 27, e que na linha 29 encerro a célula e a linha iniciadas na linha 18:
Após a conclusão do exercício foi distribuído um texto sobre briefing, e pedido que para
na próxima aula entregar as respostas sobre o site que será desenvolvido.
http://www.oficinadanet.com.br/artigo/85/muitas_vezes_um_briefing_bem_desenvolvido_e_o_resp
onsavel_pelo_sucesso_de_um_projeto.

Aula 12 – Formulários
Os formulários são definidos por meio dos comandos <form> e </form>. Entre eles
colocaremos todos os campos e botões que compõe o formulário. Devemos especificar
alguns atributos:
<action> - o formulário é enviado para um correio eletrônico, ou a um programa, ou
script que processa seu conteúdo (usaremos somente o correio eletrônico neste curso).
<method> - métodos de manipulação e organização dos dados.Forma que o formulário

é enviado.Os dois valores são:
post – captura dados do formulário, é usado mais em formulários por ser mais seguro,
os dados que entram pelo formulário fazem parte do corpo da mensagem enviada para
o servidor, é possível transferir grande quantidade de dados.
get – captura dados da URL, utilizado mais para links, os dados de entrada do script
fazem parte do URL associado à consulta enviada para o servidor – por exemplo, nas
consultas a catálogos e buscadores do tipo Google e Yahoo. Limite de tamanho de 1kb.
<enctype> - forma pela qual “viajará” a informação que for enviada pelo formulário.
text/plain – texto comum, sem formatação, vai ao corpo do e-mail. Pesa menos que um
texto em HTML, que suporta negrito, cores, fontes e tamanhos diversos. Exemplo:
<form action=”mailto:endereço@correioeletrônico.com.br” method=”post” enctype=”text/plain”>
Campos de Texto
Texto curto
<input> - Define um campo de entrada, temos de especificar o valor de dois atributos:
type e name.
size – tamanho da caixa de texto, em caracteres.
maxlength – tamanho máximo do texto.
<input type=”text” name=”nome” size=”30” maxlength=”50”>
Texto oculto – para esconder o texto (senha), em type= usamos password.
<input type=”password” name=”senha”>
Texto longo – geralmente usado para comentários, usamos <textarea> e </textarea>.

rows – define o número de linhas do campo de texto.
cols – define o número de colunas(caracteres por linha) do campo de texto.
<textarea name=”comentario” rows=”10” cols”40”>Comente aqui</textarea>
Botão Submit(ou de envio) – para finalizar o processo de preenchimento do formulário e

fazê-lo chegar ao seu gestor, usamos os seguintes comandos:
<input type=”submit” value=”Enviar”>

Exercício
Como exercício faremos um formulário com os campos Nome, E-mail, Senha e
Comentários. Como o da figura abaixo:
Abaixo como ficará em HTML:
Formulários - Listas de opções
As listas de opções são esse tipo de menus desdobráveis que nos permite escolher uma
(ou várias) das múltiplas opções que nos propõem. Para construí-las utilizaremos o
comando <select> e </select>.
Como para os casos já vistos, dentro desta etiqueta definiremos seu nome por meio do
atributo name. Cada opção será incluída em uma linha precedida da etiqueta <option>.
Podemos ver, a partir destas diretrizes, a forma mais típica e simples desta etiqueta:
<select name="estação">
<option>Primavera</option>
<option>Verão</option>
<option>Outono</option>
<option>Inverno</option>
</select>
Esta estrutura pode ser vista e modificada principalmente a partir de outros 2 atributos:
size - Indica o número de valores mostrados da lista. O resto pode ser visto por meio da
barra lateral de deslocamento.

multiple - Permite a seleção de mais vários elementos da lista. A escolha de mais de um

elemento se faz como com o explorador de Windows, a partir das teclas ctrl ou shift.
Este atributo se expressa sem valor algum, ou seja, não se utiliza com o igual:
simplesmente se coloca para conseguir o efeito, ou não se coloca se quisermos uma lista
desdobrável comum.
Conselho: Se for possível, não utilize multiple.
Não recomendamos especialmente a prática desta opção já que o manejo das teclas ctrl
ou shift para escolher várias opções pode ser desconhecido para a maioria dos
navegantes. Evidentemente, sempre cabe a possibilidade de explicar como funciona
apesar de ser uma complicação a mais para o visitante.
Vejamos qual é o efeito produzido por estes dois atributos mudando a linha:
<select name="estação"> por:
<select name="estação" size="3" multiple>
A lista ficará desta forma:
sendo que estão selecionados Verão e Inverno, com o auxilio da

tecla Ctrl (em azul).
A etiqueta <option> ainda pode ser precisada por meio de outros atributos:
selected - Da mesma forma que multiple, este atributo não toma nenhum valor senão
que simplesmente indica que a opção que apresenta está escolhida por padrão.
Assim, se mudamos a linha do código anterior:
<option>Outono</option>
por:
<option selected>Outono</option>
O resultado será:
value - Define o valor da opção que será enviada ao programa ou ao correio eletrônico
se o usuário escolhe essa opção. Este atributo pode ser muito útil se o formulário for
enviado a um programa visto que a cada opção se pode associar um número ou letra, o
qual torna-se mais facilmente manipulável que uma palavra ou texto. Poderíamos assim
escrever linhas do tipo:
<option value="1">Primavera</option>
Deste modo, se o usuário escolhe primavera, o que chegará ao programa (ou ao correio)
é uma variável chamada estação que terá como valor 1. No correio eletrônico
receberíamos: estação=1
Botões de radio
Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a
escolher unicamente uma das opções que lhe propõem.
A etiqueta empregada neste caso é <input> na qual teremos a atributo type que temos
de tomar o valor radio. Vejamos um exemplo:
Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo
para clicar na página. Os textos que aparecem ao lado, assim como as quebras de linha,
colocamos com o correspondente texto no código da página e com as etiquetas HTML
que necessitarmos, inclusive acentuação.

<input type="radio" name="estação" value="1">Primavera <br>

<input type="radio" name="estação" value="2">Verão <br>
<input type="radio" name="estação" value="3">Outono <br>
<input type="radio" name="estação" value="4">Inverno <br>
O resultado é o seguinte:
Como podemos ver, a cada uma das opções se atribui uma etiqueta input dentro da qual
atribuimos o mesmo nome (name) para todas as opções e um valor (value) distinto. Se o
usuário escolhe supostamente Outono, receberemos em nosso correio uma linha tal
como esta: estação=3
Cabe assinalar que é possível pré-selecionar por padrão uma das opções. Isto se pode
conseguir por meio do atributo checked:
<input type="radio" name="estação" value="2" checked>Verão
Vejamos o efeito:
Caixas de validação Estes tipos de elementos podem ser ativados ou desativados pelo
visitante com um simples clique sobre a caixa em questão. A sintaxe utilizada é muita
parecida com as vistas anteriormente:
<input type="checkbox" name="paella">Adoro uma feijoada
O efeito será:
A única diferença fundamental é o valor adotado pelo atributo type. Da mesma forma
que para os botões de radio, podemos ativar a caixa por meio do atributo checked.
O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo:
feijoada=on (ou off dependendo se tiver sido ativada ou não)
Dica:
Para atualizar (Refresh) o navegador e já limpar a cache, pressione ao mesmo tempo as
teclas Ctrl+Shift+R

Exercícios
Aqui acrescentaremos as listas de opções, com a frase visível “Qual tipo de música é a
sua favorita?” em name usaremos “música”, nas opções usaremos, Nacional,
Internacional, Ambas e Nenhuma. Com a opção selected (figura abaixo direita) e com a
opção radio (abaixo a esquerda):
Resolução do primeiro(cinza)
Abaixo a resolução do segundo exemplo (azul):

Modelos de Site 1 e 2
Abaixo segue a estrutura básica do modelo de site 1, em HTML:
Resultado final abaixo:
Claro que para obter o mesmo resultado as linhas 11,15 e 19 foram repetidas mais sete
vezes na sequência.
Partindo deste modelo deve-se alterar cores, altura, tamanho da fonte e todo o
restante de acordo com as diretrizes de seu site, e o seu gosto. Aqui temos apenas a
“carcaça” do que pode vir o site. Seja criativo.

Abaixo segue a estrutura básica do modelo de site 2, em HTML:
Resultado final abaixo:
Partindo deste modelo deve-se alterar cores, altura, tamanho da fonte e todo o
restante de acordo com as diretrizes de seu site, e o seu gosto. Seja criativo.
Pode-se ainda adicionar uma linha (entre as linhas 7 e 8) com os links para navegar pelo
site, como home, formulário, portfólio, den1 e den2.

Aula 13 e 14 – Formulário dentro de Tabela
Abaixo exemplo de um formulário dentro de tabela:
Agora segue o código HTML:
O que temos de novo neste exemplo?
Na linha 6 em action=”mailto:sickeira@gmail.com?subject=contato através da

página”, note que após o e-mail temos “?subject=” que informa o assunto do e-
mail que será enviado pelo formulário.
Na linha 7 temos a tabela iniciada, e encerrada na linha 27.
Na linha 9, <th> e </th> que significam título do formulário (lembram de h1 até h7?).
Podemos ainda incluir o botão de Reset (Apagar Tudo), cuja sintaxe é:
<input type=”reset” value=”Apagar Tudo” name=”reset”>

Criar um novo formulário explorando todos os comandos aprendidos:

input / radio / select / textarea / submit / Expressão no assunto(subject) / reset / th
Pintar as células, centralizar o formulário, e usar font nos caracteres.
Aqui segue a resolução em HTML:

E o que aconteceu com as linhas 23 até a 51? Fazem parte da lista de estados abaixo:
Aula 15 – Lay Out do Site
Separados em duplas, recebemos 5 folhas em branco para esboçar o lay-out do site, com
a definição de cores, conteúdo e textos (como visto na página 11), com a diferença que
serão 4 colunas para o modelo 2, e a home.html será renomeada como index.html.
Tenha pronto pelo menos o index.html, para podermos hospedar o site e reservar o
domínio apropriado.
Criação de E-mail para o site
Para criar um e-mail do Gmail recomendo estes links, que estão bem detalhados:
http://fazerblogs.com/criar-conta-email-gmail/
http://www.amigosnanet.com/profiles/blogs/como-criar-um-email-no-gmail
Anote todos os dados para não esquecer, e use uma senha fácil para a dupla
Hospedagem para o Site
Temos várias opções de hospedagens gratuitas como Hdfree, V10 e XPG. Usaremos a
XPG por ser a disponível no momento. Tenha em mente um domínio para seu site.
Vamos até o site www.xpg.com.br e encontraremos esta tela:

Clique em “Publicar HTML grátis”, à direita da tela, aparecerá um pequeno cadastro para
preenchimento, como o ilustrado abaixo, no campo e-mail usaremos o criado pela dupla
no Gmail, sugiro a mesma senha para facilitar a memorização da dupla.
Após preenchido, concorde com o termo de serviço, e clique em cadastrar, você

receberá os parabéns, e os dados de servidor, login e senha, anote-os para não se
esquecer. Caso não queira preencher seus dados pessoais basta clicar na aba meu site e
depois em “Acessar FTP WEB”
Aparecerá uma tela com os icones abaixo:

Para “subirmos”(upload) o site no XPG usaremos o ícone “Enviar Arquivo”, e

começaremos com o arquivo index.html, que se foi salvo como indicado (na pasta
meu_site) não teremos problemas em encontrá-lo.
Após clicar sobre o ícone “Enviar Arquivo”, abrirá um pop-up como a figura abaixo:
Nele escolhemos o arquivo desejado, depois de selecionado clicamos em “Enviar

arquivo”, e pronto. Já vamos aproveitar e “subir” as outras páginas do site, como
den1.html, den2.html, form.html e port.html.

Aula 16 – FRAMES
Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso,
torna-se possível apresentar mais de uma página por vez: por exemplo, um índice
principal em uma parte pequena da tela, e os textos relacionados ao índice em outra
parte.
É muito fácil colocar frames em páginas, porém, nem todos os usuários gostam deles,
pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação
dos documentos interiores aos frames nos bookmarks. A alternativa natural para os
frames são as tabelas.
Resulta em:
A parte frameset define a divisão da página em “quadros”. Neste exemplo, a página será
dividida em duas linhas(rows), sendo a primeira com 20% do tamanho da tela, e a
segunda linha com os restantes 80% da tela, depois a página será dividida em duas
colunas(cols), sendo a primeira com 10% do tamanho da tela, e a segunda coluna com os
restantes 90% da tela.
Dentro da formatação de frameset, temos os frame src que são referências (links) às
páginas que serão mostradas nos frames definidos.
A formatação de frames inclui também uma parte noframe, que é mostrada
normalmente pelos browsers que não suportam sua apresentação.
Aplicações de Frames e Cuidados

Frames são interessantes para apresentar conjuntos de páginas com um índice fixo para
a navegação. Além disso, torna-se possível mostrar diversas páginas e/ou mídias em
uma única janela do browser.Um cuidado é procurar controlar bem a navegação,
evitando que o acionamento de links não leve o leitor a ver seu browser criar frames
dentro de frames, gerando uma grande confusão (veja item seguinte, sobre "limpar" a
tela).
Limpando a tela
Há basicamente 2 efeitos possíveis para limpar a apresentação de frames, e isso é feito
com "targets" especiais:
target="_top" limpa os frames que estiverem ativos, apresentando a página de destino
na tela inteira
target="_blank" abre uma nova janela do browser para apresentar a página de destino

Exercício
Para melhor compreensão vamos abrir uma pasta “frame” e dentro desta criar os 4
abaixo, corpo.html, menu.html, rodape.html e topo.html (sentido horário):
Cada um esta com uma cor diferente para melhor visualização. Agora faça os dois
modelos abaixo e depois preencha com dados de seu site para ver qual fica melhor:
Os resultados sairão assim, respectivamente:

Links Úteis
Sugestões ou correções:
sickeira@gmai.com
Blog do Curso:
http://cpfpwebdesign.blogspot.com/
HTML:
http://aprenderhtml.webs.com/
Cores:
Tabela de cores
http://www.cultura.ufpa.br/dicas/htm/htm-cor.htm
Nomes das cores
http://www.w3schools.com/html/html_colornames.asp
Tabela de cores HTML
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Listas:
http://www.luis.blog.br/listas-ordenadas-nao-ordenadas-e-de-definicao.aspx
http://www.linhadecodigo.com.br/Artigo.aspx?id=81&pag=4
http://www.icmc.usp.br/ensino/material/html/listas.html
GIMP
http://www.hardware.com.br/tutoriais/gimp/
Texto sobre briefing
http://www.oficinadanet.com.br/artigo/85/muitas_vezes_um_briefing_bem_desenvolvido_e_o_responsavel_pelo_su
cesso_de_um_projeto.
Formulário – Lista de Opções
http://www.criarweb.com/artigos/117.php
Hospedagem gratuita
http://hdfree.com.br/ http://www.v10.com.br/ http://www.xpg.com.br/
Frames
http://www.cultura.ufpa.br/dicas/htm/htm-fra.htm
http://www.icmc.usp.br/ensino/material/html/frames.html
http://orbita.starmedia.com/edaurelio/a9.htm


Webdesign 27/04/11

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Webdesign 27/04/11

Enviado por

Direitos autorais:

Formatos disponíveis

Curso de WebDesign 2011 - CPFP Valdemar Mattei – Santo André – Professora Ana Cláudia

Aula 1 - Personalização de DESKTOP

Navegador IceWeasel – Aplicações ›› Internet ›› Navegador Ice Weasel

gedit - Editor de Texto - Aplicativos ›› Acessórios ›› Editor de Textos

Nautilus – Navegador de arquivos - Aplicações ›› Ferramentas de Sistema ›› Navegador de

Para trocar o “background” do Nautilus basta ir ao Menu Editar ›› Planos de Fundo e

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

Aula 2 - Comandos Básicos de HTML

Estrutura Básica de HTML

<html> - Abre todo documento de HTML.

<head> - Abre o cabeçalho informativo da barra de títulos do navegador.

<title> Texto </title> - Título de cabeçalho do navegador.

</head> - Fecha o cabeçalho da barra de títulos do navegador.

<font color=”blue” size=”3” face=”arial”> - Definições de fonte que serão usadas.

<body bgcolor=”white”> - Inicio da estrutura de texto(corpo de texto).

</body> - Fecha estrutura de texto.

</font> - Fecha definições de fonte.

</html> - Fecha o documento HTML.

<marquee> Texto </marquee> - Efeito de letreiro.

<blink> Texto </blink> - Efeito de pisca-pisca.(não funciona no Google Chrome).

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

<sub>subscript</sub> - O texto selecionado fica subscrito, como o “10” no exemplo:

<sup>superscript</sup> - O texto selecionado fica sobrescrito, como o 2 do exemplo:

<s>Strikethrough</s> - Risca o texto selecionado, como no exemplo: Riscado

Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes:

Ctrl+T no Nautilus funciona pra abrir nova aba (janela).

01 - Escrever um texto de apresentação, com nome, idade, formação escolar, curso,

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

Digitar a estrutura abaixo em HTML, e salvar como listad.html, na pasta exercicios.

O resultado final vemos abaixo, e na sequência as outras opções de marcadores:

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

As listas ordenadas ou numeradas são usadas para indicar alguma sequência ou

A=maiúsculas a=minúsculas I=algarismos romanos

Digitar a estrutura abaixo em HTML, e salvar como listao.html, na pasta exercicios.

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

Listas de definição são usadas em locais onde há um termo a em sequência a sua

<dl> definition list - cria a lista de definição.

<dt> definition term - onde o termo é proposto.

<dd> definition definition - onde o termo é definido.

Digitar a estrutura abaixo em HTML, e salvar como listadf.html, na pasta exercicios.

O resultado final vemos abaixo:

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

GIMP (GNU Image Manipulation Program) Aplicativos » Gráficos » Editor de Imagens

O atalho de teclado para se abrir o menu de camadas é Ctrl+L.

Redimensionamento de imagens Menu » Imagem» Redimensionar Imagem

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

O formato PNG (Portable Network Graphics) é interessante porque consegue trabalhar

<a href=”#abaixo”> Ir abaixo </a> ou ainda <a name=”acima”> </a>

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

<a href=”apres.html”> Apresenta </a>

Para mudar as cores padrões de links podemos usar:

<body link=”green” vlink=”red” alink=”yellow”>

<a href=”www.google.com”> Pesquise aqui antes de perguntar </a>

<a href=”cpfpwebdesign.blogspot.com” target=”blank”> Visite o Blog do curso </a>

Link com Arquivo

<a href=”minhafoto.png”> Baixe um excelente espanta baratas </a>

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

Aula 7 – Links e Estrutura do Site

Inclusão Digital ou infoinclusão é a democratização do acesso ás tecnologias da

Em HTML, sem copiar e colar diversas vezes ficará assim:

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

den1.html / den2.html » Desenvolvimento do tema

Apostila WebDesign por Sickeira , sugestões ou correções sickeira@gmail.com

Na linha 6 em action=”mailto:sickeira@gmail.com?subject=contato através da