1
Apostila Programador Web v3.0
Prof. Alexandre Unterstell – [email protected] – www.alex.inf.br
Antes de começar desenvolver um site na internet é importante que conheçamos alguns fatores importantes
que contribuirão para que o resultado final seja sucesso de público e crítica. Pontos a serem analisados:
Tamanho de tela, resolução do monitor e adaptações.
Existem diversas resoluções de vídeo, a home page deve ser do tamanho da área do browser, sem necessitar
de barras de rolagem. Leve em conta a largura de 780 pixels para que não seja necessária a barra de rolagem
horizontal.
Tempo de carregamento da página.
Procure manter as páginas (incluídas imagens) do seu site abaixo de 800 Kbytes Considere que para uma
conexão “Banda Larga”, com velocidade de 1Mbps, a velocidade estimada para download é de
100Kb/segundo
Layout das páginas.
A página inicial deve responder facilmente sobre o que se trata o site, o que esse site oferece (produtos,
serviços, entretenimento) e o que o usuário pode fazer nele (encontrar informações, realizar compras, entrar
em contato, etc.). Quanto mais claro e direto, maior a chance de o usuário permanecer no site. È importante o
restante do site mantém o padrão de design do site original
Design
O design de um site não é importante apenas para garantir um bom visual, mas deve ser utilizado também
para auxiliar no controle da navegação através de técnicas aplicadas com a finalidade de dar maior ou menor
foco no conteúdo, de acordo com as necessidades, proporcionando equilíbrio e harmonia. Diversos aspectos
são importantes para um design bem feito e um deles é estar coerente com a identidade visual da empresa,
de forma a contribuir para o fortalecimento da marca.
Conteúdo
A principal parte de um site com certeza está no conteúdo. Não importa se você tem um ótimo design, se o
conteúdo deixa a desejar. Ao mesmo tempo que o conteúdo deve ser claro e objetivo para manter a atenção
do usuário, deve ser completo e suficiente para que possa repassar toda a informação necessária.
Navegabilidade / Usabilidade
Mantenha em mente que o usuário conta com um número muito grande de fontes de informação e não irá
perder muito tempo em um site difícil de navegar. Facilite para o seu público procurando manter no máximo
três níveis para todo o conteúdo. O site pode ser acessado por diversos navegadores em suas enumeras
versões, há necessidade de plug-ins?
Acessibilidade.
Seu site deve ser fácil de acessar e navegar para o diverso público existente na web, incluído pessoas com
diversas deficiências e especifidades.
2
Dicas Importantes:
- Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e páginas),
nesta pasta.
- Se o arquivo que você estiver salvando for a sua página inicial deve-se obrigatoriamente salvá-lo como index
e tudo em letra minúscula, sem espaços e sem acento. Os outros arquivos que estarão “pendurados” na
home-page podem ser salvos com o nome de sua preferência, mas também devem estar em letras minúsculas,
sem espaços e sem acento!
- Formato de Imagens: Qualidade das cores das imagens apresentadas no site estão intimamente ligadas ao
formato de imagem escolhido. As imagens devem ter o tamanho mínimo possível em Kb, Confira a diferença
entre alguns formatos
JPG:> É o formato ideal para imagens com grande número de cores como fotografias. Podem apresentar até
16,7 milhoes de cores.
GIF:> O Gif possui um esquema de compressão eficaz especialmente em imagens ou gráficos que usam até 256
cores. Esse formato é usado para logotipos e banners. Os arquivos gifs aceitam cor transparente e animação.
PNG:> pode apresentar até 16,7 milhões de cores, animação e transparência, porem gera um arquivo de
tamanho maior
SWF:> Arquivo do Flash, ideal para apresentações multimídia com interação.
- O site deve possuir uma barra de navegação que funciona como uma espécie de menu com links para as
seções principais.
- Cuidado com as fontes pouco convencionais; para visualizar a sua página com a fonte que você escolheu, o
usuário deve possuir esta mesma fonte instalada no computador dele.
Existem basicamente dois tipos de fontes: as com serifa e as sem serifa. As fontes serifadas geralmente se
perdem na resolução dos monitores, tornando-se inadequada a sua utilização. O texto sem serifa não perde
resolução e tem mais potencial de velocidade de leitura:
HTML
Para desenvolver um site na internet o primeiro conceito é do HTML - HyperText Markup Language ou
Linguagem de Marcação Hipertexto, Essa linguagem é bastante simples e tem como finalidade básica formatar
o texto exibido e criar ligações entre as páginas da Web, criando assim documentos com o conceito de
hipertexto.
O documento em HTML é um arquivo texto comum que pode ser escrito através de qualquer editor de textos
tem a terminação .htm ou .html. Como é uma linguagem interpretada, a partir do momento em que se salvou
o arquivo HTML o mesmo já pode ser aberto por qualquer navegador, que é o único software que pode
determinar se o documento foi escrito dentro dos padrões da linguagem.
Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela
chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de
comandos específicos da linguagem. Observe que a construção de páginas exigir o uso de marcadores chamados
de “TAGS”. Obs: Recomenda-se o uso de letras minúsculas para as tags e os atributos devem estar em aspas
duplas, ex: <body bgcolor=”blue”>
3
Para entender melhor a Linguagem HTML, usaremos o Notepad +++, mas poderíamos usar qualquer editor de
texto como Bloco de Notas, a única exigência e colocar a extensão htm ou html na hora de salvar o arquivo.
ESTRUTURA BÁSICA (HTML 5), DOCTYPE E CHARSETS
A estrutura básica do HTML é sendo a mesma das versões anteriores da linguagem, há apenas uma excessão
na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:
Salve esse arquivo como exe01.htm (ATENÇÃO ESSE É O NOME DO ARQUIVO, ELE DEVE TER A EXTENSÃO
HTM OU HTML, para que o Sistema Operacional, interprete que deve abrir o arquivo no navegador padrão)
Tags estudadas:
O Doctype deve ser a primeira linha de código do documento antes da tag HTML. O
<!DOCTYPE html!>
<html>
<head>
Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha
informações sobre qual versão de código a marcação foi escrita.
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos
de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag
HTML.
<html lang=”pt-br”> O atributo LANG é necessário para que os user-agents saibam qual
a linguagem principal do documento
Marca o início e do fim do cabeçalho onde são inseridas tags utilizadas para indexação do
documento HTML (<title>, <meta>, <script>, <link> e ,base>)
<meta charset=”utf-8”> É uma metatag responsável por chavear qual tabela de caracteres a página está utilizando
Obs: existem importante metatags que serão analisadas posteriormente.
<title>
Utilizada para definir o título da página, que é um dos principais conteúdos indexados
pelas ferramentas de buscas e é o primeiro elemento processado por leitores de tela.
<body>
Marca o início e o fim do do corpo da página
4
Exe02.htm:
<!—xx -->
Insere comentários nas páginas
<hn>
Marca um título. Sendo que n representa um valor que pode ser de 1 a 6, o tamanho muda de forma
decrescente, ou seja, o número 1 é o maior tamanho do título.
<hr>
Insere uma linha horizontal
<p>
Marca um parágrafo e acrescenta uma linha em branco.
<br>
Insere uma quebra de linha
<b> <i> <u> Negrito – itálico e sublinhado (sublinhado deve usar CSS)
É importante estruturar as páginas de seu site com as tags de cabeçalho, onde a H1 é a mais importante (e
maior), e H6 é a menos importante, na hierarquia.
Isso é tão útil, que até o Google usa as headings em seu complexo sistema de rankeamento dos resultados de
busca, pois ele entende que as keywords em tags H1 e H2 são muito importantes e refletem um resumo do
conteúdo do artigo.
No HTML5, existe um elemento que tem por função agrupar essas tags de cabeçalho, que é a tag hgroup,
especialmente voltada para as headings.
5
Exe03.htm:
align
Serve para alinha parágrafos e títulos
Center (Centro), left (esquerda), right (direita) e justify (justificado)
Para centralizar textos, podemos usar somente a tag <center>
<blockquote> Adiciona uma margem de cerca de um centímetro
<hr>
Insere uma linha horizontal. Atributos:
Size = define a altura da linha. Exemplo: <hr size=50>
Width = define a largura da linha horizontal. (% ou pixels)
Noshade = desenha a linha sem a sombra para dar o efeito de três dimensões.
Color = define a cor , para definir a cor devemos usar o nome em inglês (Ex: White, Red, Green,
Blue, Magenta, Cyan, Black, Yellow, violet, etc) ou o código em hexadecimal (veremos nos
próximos exemplos.
OBS: Alguns atributos (color, size, etc) servem para várias tags, como veremos nos próximos
exemplos
6
exe04.htm
<font>
Modifica a formatação do texto.Atributos:
Size = define o tamanho da letra. Ex: <font size=5>Texto</font>
Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font color=red>Texto</font>
<marquee>
Cria letreiro em movimento com imagens e textos (TAG descontinuada)
Behavior (Slide, alternate e behavior)especifica o movimento que será usado no letreiro .Veja
alguns dos movimentos:
Bgcolor: Cor de fundo
Direction: Direção na qual o texto irá se mover.A direção pode ter, left, right ,down e up.
Width: É a largura do letreiro.
Height: È a altura do letreiro.
Caracteres Especiais Uma página web é vista por diferentes países, que usam conjuntos de caracteres
distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma série de
caracteres raros serão bem vistos em todos os computadores do mundo, independentemente de seu jogo de
caracteres. Vejam alguns exemplos:
7
espaço
&nbsp;
&
e comercial
&amp;
¨
acento trema
&uml;
´
acento agudo
&cute;
“
aspas duplas
esquerda
&ldquo;
”
aspas duplas
direita
&rdquo;
–
travessão ‘en’
&ndash;
—
travessão ‘em’
&mdash;
…
reticências
&hellip;
¦
barra vertical
&brvbar;
<
Menor
&lt;
>
Maior
&gt;
‘
aspas simples
esquerda
&lsquo;
’
aspas simples
direita
&rsquo;
º
ordenal
masculino
&ordm;
ª
ordinal feminino
&ordf;
•
marcador
&bull;
‣
marcador
triangular
&#8227;
Veja a lista completa em: http://erikasarti.net/html/acentuacao-caracteres-especiais/
exe05.htm
8
Marca o início e o fim de uma lista ordenada. Recebem na primeira linha um número ou letra.
Devem ser usados com tag <li>. Atributos:
<ol>
Start = especifica o número a partir do qual os itens começam a ser contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: número, letras ou algarismo romano.
Ex: 1, A, a, I, i
Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista recebem símbolos na
primeira linha. Devem ser usados com tag <LI>. Atributos:
<ul>
Type
=
modifica
o
tipo
do
marcador
(símbolo),
que
Circle = um círculo vazio, Disc = um círculo cheio, Square = um quadrado cheio
pode
ser:
Definindo O Corpo Da Página
exe06.htm
Cores:
O código RGB numérico
RGB é a sigla para Red, Green, Blue (Vermelho, Verde, Azul), que gera o padrão de cores pelo qual o monitor
obtém cores com brilho. A codificação das cores está baseada na mistura cromática. Ou seja, certas
quantidades dessas 3 cores são misturadas para se obter uma determinada cor.as cores podem ser codificadas
em diferentes bases.
Base 10: O valor de cada componente (R, G e B) deve ser um número inteiro que pode variar entre 0 e 255,
gerando um código numérico, em base 10.Exemplo: A cor vermelha é representada por #255 0 0:
red (vermenho): 255, green (verde): 0 e blue (azul): 0.
Ao se usar a notação decimal a representação da cor fica extensa. Para evitar isso convencionou-se utilizar a
representação hexadecimal das tonalidades de cada cor. È importante notar que os números hexadecimais
devem ser precedidos pelo caractere cerquilha também chamado "sustenido"ou "jogo da velha" (#).
Deste modo cada cor pode variar de 00 a ff na representação hexadeciamal. combinando-se a intensidade das
cores do RGB temos a representação da cor. Veja a tabela básica abaixo:
Cor
Hexadecimal
Cores Claras
Hexadecinal
Cor
Hexadecimal
Branco
#FFFFFF
Branco-neve
#F4F4F4
Cinza
#808080
Preto
#000000
Cinza-claro
#C0C0C0
Amarelo
#FFFF00
Azul
#0000FF
Azul-claro
#D9FFFF
Amarelo-claro
#FFFFF5
Verde
#008000
Verde-claro
#DEFEDA
Roxo-claro
#EFDFFF
Vermelho
#FF0000
Rosa-claro
#FFD5D5
9
exe07.htm:
<Body >
Marca o início e o fim do corpo da página. Atributos:
Bgcolor = define a cor do fundo da página
Text = define a cor do texto padrão da página
Background = permite inserir uma imagem como fundo da página
Bgproperties = fixa a imagem no fundo da página quando a página é rolada, criando um efeito de
marca d’água.
IMPORTANTE: As imagens devem estar na mesma pasta, onde estará o documento HTML, ou numa
subpasta, se estiver em uma subpasta deve-se mostrar o caminho na html.
EX: <body backround=imagens/parede.gif
Nome da pasta
exe08.htm
Nome da imagem, que deve estar na pasta
10
<img >
Insere uma imagem. Atributos
Src: indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da imagem
align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto circunda imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador não exibe a imagem. Sendo que n é o
título que identifique a imagem. Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>
exe09.htm:
Como não foi definido o tamanho da tabela, ela se adapta ao tamanho do conteúdo inserido em suas
células.
Depois de salvo altere a seguinte linha:
<table border=2> <! Aqui começa a Tabela>
Por essa:
<table border=1 width=600 height=50 cellpadding=5 cellspacing=5>
Apesar de usarmos mais tabelas como estrutura básica dos sites. Seu uso continua muito
importante.
11
Exe10.htm
<table >
Marca o início e o fim de uma tabela. Atributos:
Width: define a largura da tabela ou da célula
Height: define a altura da tabela ou da célula
Cellpadding: define a margem dentro das células
Cellspacing: define o espaço entre as células
Bgcolor: define a cor de fundo da tabela ou da célula
Border:define a largura da broda da tabela
Align: alinha o conteúdo na horizontal (left, center ou right)
Valign: (alinha o conteúdo na vertical (top, bottom ou middle)
Bordercolor: Define a cor da borda da tabela
<tr>
Marca o início e o fim de uma linha
<td>
Marca o início e o fim de uma célula (linha)
Também é possível colocar imagens dentro das células:
Ex: <td> <img src=foto.jpg> </td>
12
Exe11.htm
LINKS
Estamos produzindo páginas de hipertextos, ou seja, textos que podem fazer ligações com
outros textos, ligando páginas entre si e a WEB. Então, estes pontos nós chamamos de links ou
hyperlinks, âncoras de hipertexto, todos com a mesma função, de através de um único clique
sobre a frase ou imagem conduzir a algum lugar no site ou na WEB.
O Tag responsável é o <A>, onde dentro deste, através de um atributo coloco a referência, ou
seja, A URL (Uniform Resource Locator). Para criar um link usamos a seguinte sintaxe:
SINTAXE: <A HREF=”URL”>Frase que aparece na página</a>
Onde:
<a> tag que marca o início e o fim do link href= atributo que especifica o nome da referência
HTML AVANÇADO
Meta tags
São linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os
buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te
encontrar, por exemplo. Por meio delas, você pode também "assinar" seu site, declarando sua autoria sobre o
código fonte.
13
Cada vez mais os buscadores levam em consideração a qualidade do conteúdo nos resultados de pesquisa, e por
isso simplesmente adicionar meta tags no código fonte da sua página não vai melhorar o posicionamento dela.
Porém, as meta tags ainda tem seu espaço se utilizadas corretamente.
Como utilizar as meta tags
Keywords
Nesta tag você deve incluir uma quantidade de palavras que se referem ao conteúdo da página. Mantenha o
limite de aproximadamente 150 caracteres. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca
quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado.
Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas - alguns buscadores têm
problemas com letras maiúsculas e podem ignorar seu site.
<meta name="keywords" content="sites, web, desenvolvimento, html, design">
Description
Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site. Procure manter
um limite de aproximadamente 90 caracteres.
<meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes">
content-type
Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta
meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento
da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre
páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é
fundamental para que eles sejam exibidos corretamente.
Os valores mais comuns são: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Author
Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte:
<meta name="author" content="Erika Sarti">
Redirecionando o visitante para outra página
Alguma vez você já deve ter visitado um site que mudou de endereço e que exibe uma mensagem do tipo:
Você será redirecionado para um novo site em 5 segundos. Se não quiser aguardar, clique aqui.
Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha:
<meta http-equiv="refresh" content=" 5 ;url=http://www.novosite.com/">
Obs: O conceito de formulários em HTML será estudado juntamente com com a linguagem PHP
Scripts
Java
Script
É uma linguagem interpretada, que pode ser usada junto com o HTML e permite inserir váios efeitos, permitindo
que o site (ou uma mensagem de correio eletrônico) fique mais dinâmico, e uma maior interação com o leitor.
O código JavaScript, não é compilado, e deve ser colocado, no código fonte, junto com os comandos da
linguagem HTML.
Aplicação de um efeito
Script é uma sequência de comandos que deve ser colocada em uma posição determinada na página ou como
um arquivo anexado. No último caso terá extensão js.
14
É importante lembrar que é preciso conhecer uma linguagem de programação para criar um script. Aqui só
modificaremos alguns parâmetros e assim podermos modificar efeitos.
Em geral, a seqüência se inicia com <SCRIPT ... > e termina com </SCRIPT>
Java e JavaScript
Java é uma linguagem de programação e JavaScript é uma linguagem de scripting.
Pode-se criar programas reais com Java. Com JavaScript apenas cria-se efeitos que só funcionam dentro de uma
página em HTML, por exemplo.
Assim, pode-se admitir que JavaScript é mais uma extensão do HTML do que outra linguagem de computação.
Exemplos:
Java01.htm:
------------------------------------------------------------------------------<body>
<script>
alert("Minha primeira mensagem!")
</script>
<h2> Aparece uma mensagem POP UP <h2>
</body>
Java02.htm:
------------------------------------------------------------------------------<html>
<head>
<script type="text/javascript">
function teste(){
var nome = window.prompt("Digite seu Nome");
alert ("Ola " + nome + " , Seja BEM VINDO !! ");
document.write("Olá " + nome);
}
</script>
</head>
<body>
<input type="button" onclick="teste();" value="Clique Aqui">
</body>
</html>
Java03.htm:
--------------------------------------------------------------------------------------<body>
<script> document.write(new Date()) </script>
</body>
-------------------------------------------------------------------------------