Copyright © 2013 by Centro de Qualificação Profissional Ltda.
Todos os direitos reservados. Proibida a reprodução, mesmo parcial, por qualquer
processo, seja mecânico, eletrônico, fotocópia, gravação, digitalização ou outros,
sem prévia autorização escrita para o Centro de Qualificação Profissional.
Pesquisa e planejamento, Redação: Tido Ferraz.
Diagramação: NixOnline.
Revisão de Prova: Thiego Hurbath.
Unidades de Ensino:
Av. Tancredo Neves, 148, Loja 63
Shopping Iguatemi, 1º Piso — Tel. (71) 2109-0404
41820-020 — Salvador — BA
Av. Tancredo Neves, 274
Centro Empresarial Iguatemi, Bloco B, Térreo, Cam. das Árvores — Tel. (71) 22239144
41820-000 — Salvador — BA
HTML
Sumário
5
Apresentação.................................................9
Introdução...................................................13
O que é um Webdesigner?.......................................... 13
Softwares utilizados.................................................. 14
Sobre o curso........................................................... 15
Como surgiu a Internet?...............................16
O que é a Internet?.......................................17
O que é um site?...........................................18
Hipertexto................................................................ 18
Protocolos de transferência........................................ 19
Limitações para o webdesign.........................19
O peso dos websites..................................................
Tipografia.................................................................
Incompatibilidade de Navegadores..............................
Resolução de monitor................................................
20
21
22
22
O que é HTML?............................................27
Comandos básicos..................................................... 28
Categorias................................................................ 30
Metadata content.........................................................31
Flow content................................................................32
Projeto Meu 1º HTML (parte 1)....................37
Principais comandos HTML...........................41
<BR>.......................................................................
<P>..........................................................................
<DIV>......................................................................
<A>.........................................................................
41
41
41
41
HREF...........................................................................41
<IMG>..................................................................... 42
SRC.............................................................................43
ALT.............................................................................43
WIDTH.........................................................................43
HEIGHT.......................................................................43
BORDER......................................................................43
Sumário
6
Projeto Meu 2º HTML..................................45
Estilos CSS...................................................51
Vinculando as Folhas de Estilo.................................... 51
Folha de Estilo Externa..................................................51
Folha de Estilo Interna..................................................51
Inline...........................................................................52
A sintaxe dos Estilos CSS..............................52
As Propriedades...........................................53
Propriedade Font....................................................... 53
Fonte Padrão do Site.....................................................53
Novo Estilo Fonte.........................................................53
Propriedades das fontes............................................. 54
Valores para a Propriedade Font.....................................54
Propriedade Texto..................................................... 55
Algumas propriedades:.................................................55
Valores válidos..............................................................55
Cor de link................................................................
Propriedade Plano de Fundo.......................................
Propriedade Margin...................................................
Valores válidos..........................................................
56
56
56
57
Criando Seções de Conteúdo.........................57
Header.....................................................................
Article......................................................................
Aside.......................................................................
Nav..........................................................................
Section.....................................................................
Footer......................................................................
58
58
58
58
58
58
Projeto Construindo Sites com Seções...........61
Posicionando Elementos com CSS..................65
Margens................................................................... 65
Afastamentos........................................................... 66
Posicionando Divisões e Seções.................................. 66
Static...........................................................................67
Relative........................................................................67
Fixed...........................................................................68
Float ou Flutuar............................................................68
Display........................................................................70
Clear...........................................................................71
Projeto Posicionando os Elementos na
HTML
Construção do Site.......................................73
Inserindo Imagens como Plano de Fundo
(Background)...............................................77
Fonts do Google...........................................78
O seletor de classe........................................79
Projeto Construindo um Novo Site................81
Twitter e Facebook.......................................89
Álbum de Fotos com Jquery..........................89
Aplicar GoogleMaps.....................................90
Projeto Integrando o Site com Redes Sociais.93
7
Apresentação
Nos últimos doze anos a internet mudou muito, acompanhando
as inovações tecnológicas ocorridas neste período. Quem não
lembra dos antigos aparelhos celulares, que eram imensos e
faziam apenas ligações, hoje eles também oferecem recursos
de tv, máquina fotográfica, rádio e acesso a internet, coisas que
antes só podiam ocorrer nos filmes de 007 ou nos desenhos da
família Jetsons? E a época da internet discada, que para ver
um vídeo, ou apenas visualizar páginas no momento de pico
na conexão, era necessária uma imensa dose de paciência
Tibetana? Hoje quase não se encontra um usuário com acesso
por meio discado, quase todos utilizam a internet dedicada por
meio de cabo, sinal de rádio ou de tecnologia 3G. E o melhor
de tudo é a facilidade que as classe sociais menos privilegiadas
passaram a ter com o acesso através de rede compartilhada para
a conexão ou até mesmo através de lan houses ou Infocentros
públicos.
Com a chegada da internet 2.0, o usuário deixou apenas de ser
um coadjuvante neste novo meio de comunicação e passou a
participar de uma maneira democrática publicando o seu próprio
conteúdo, foi quando surgiram os serviços de Blogs, Fotologs e
até mesmo a revolução criada nas redes sociais promovida pelo
orkut. A partir deste momento todos puderam publicar as suas
ideias, denunciar, elogiar algo, ou apenas postar o seu dia a dia
através de textos e fotos.
Neste momento de mudanças revolucionárias na internet e no
modo de fazer páginas, surge um novo conceito no sistema
de busca desenvolvido pelo Google, que consolida esta nova
maneira de construção do código-fonte dos sites. Junto com
estas mudanças veio a profissionalização do mercado e a
necessidade de um maior conhecimento para a criação e
construção de um site.
Hoje existe uma revolução em todos os setores da sociedade
promovida pela internet. Os meios de comunicação mudaram,
pois a comunicação possibilitada pela internet é instantânea, por
sinal serve de apoio aos curtos telejornais. A EAD (Educação a
Distância) é uma realidade, muito questionada no início, porém
foi possível comprovar que é possível excelentes resultados a
um custo muito baixo para levar a educação para todos num
país como o Brasil que é de proporções continentais. O mercado
online em crescimento durante sete anos consecutivos, sempre
crescendo mais do que o mercado real e ao contrário do que se
pensa e é divulgado, muito mais seguro do que o mercado físico.
E diversos outros setores e serviços do mercado.
Porém não é tão simples ingressar nesta área, em primeiro lugar
como em qualquer outra profissão é necessário ter nascido para
isto, ou seja, ter o dom. O profissional web bem sucedido possui
algumas características em comum, ele é criativo, curioso,
autodidata, gosta de navegar (é claro) e sempre vai buscar a
informação na internet. Outro detalhe importante para quem vai
trabalhar com interfaces, é que não basta ser criativo é importante
saber o que se vê, ou que se lê e o que se ouve, grandes idéias
vem de um repertório criado durante a vida, nos momentos em
que estamos vendo bons filmes, lendo bons livros, indo numa
exposição de artes e contemplando o que é belo.
Neste curso, o objetivo será de ensinar os recursos iniciais
utilizados nos escritórios de desenvolvimento web, além de
trazer tendências e novidades que podem não estar neste livro,
pois como sabemos a informação é dinâmica e neste exato
momento em que escrevo este texto, pode está surgindo algo e
que ficou de fora.
Aproveite este livro para acompanhar as aulas e para referência
nos seus projetos em casa. Bom Trabalho!!!
Tido Ferraz
[email protected]
HTML
Capítulo 1
Introdução
• O que é um Webdesigner
• Softwares Utilizados
• Sobre o Curso
HTML
Introdução
O que é um Webdesigner?
O webdesigner é o arquiteto e o pedreiro da Internet. É o
responsável por criar um padrão visual, distribuir as informações
de um site, produzir e trabalhar todas as imagens, montar as
páginas, transferir os arquivos para o endereço Web, onde eles
estarão hospedados; e ainda, às vezes, atualizar as informações
desse site. Muita coisa, não é?
Webdesign é uma área profissional multidisciplinar. Para
ser webdesigner é necessário conhecer várias ferramentas
diferentes: programas de computação gráfica, editores de
linguagem HTML, clientes de FTP, alguns recursos de novas
tecnologias como Java Scripts, Applets JAVA, DHTML, XML,
PHP, ASP, JSP, CSS…
Mas tudo bem, não se desespere. É por isso que você está aqui.
Ao final do curso, você saberá o que significa cada uma dessas
siglas. Todas juntas parecem uma sopa de letrinhas, mas cada
uma representa uma importante ferramenta no desenvolvimento
de websites.
Só há uma coisa que é inerente a todo webdesigner. E isto
não é uma coisa “ensinável”. Todo profissional da Web precisa
gostar da Web. Ele tem que compreender como os sites guiam
13
Capítulo 1
14
os internautas através de suas páginas, como alguns são mais
atraentes do que outros e como as informações são distribuídas.
Isto só navegando muito na Web pra começar a entender.
Sobretudo, os webdesigners têm que ser viciados em sites!
Softwares utilizados
Produzir um site é uma tarefa que passa por vários programas
diferentes.
O processo começa num computador pessoal, que quase todo
mundo já tem. Ao receber o trabalho, o webdesigner tem de
planejar todas as etapas. Ele tem de distribuir as informações
do site de uma forma lógica, fazendo com que o internauta
consiga se aprofundar nas informações de acordo com as
suas necessidades. A primeira etapa da produção de um site
é a elaboração da árvore, ou, como veremos no estudo do
Dreamweaver, é o mapa do site, um fluxograma das informações.
Nessa árvore, fica clara a quantidade de páginas que terá o site
e a estrutura de navegação de tal, a página que leva à outra, ou
a que contenha tal informação…
A árvore (Fig. 1.1), geralmente, é produzido por algum programa
para criação de diagramas, fluxogramas ou organogramas como
o Visio da Microsoft, ou no BizAgi que é gratuíto. Além de ajudar o
webdesigner a entender melhor o site que ele está produzindo, a
árvore serve como descrição gráfica para o cliente. Ou seja, com
a árvore anexada à proposta, fica fácil para o cliente visualizar o
que ele está pagando, qual será o resultado do seu site.
Figura 1.1
HTML
O próximo passo é pensar no layout, que é o padrão visual de
um site. Um layout é um arquivo base a partir do qual você irá
salvar todas as imagens que serão inseridas na sua página.
Nesta fase, rabiscar um pouco sempre ajuda. Papel e lápis
afinal de contas NÃO são tecnologias obsoletas. Normalmente,
os layouts são produzidos em programas bitmap de computação
gráfica. Opa! E o que é um programa “bitmap”? Falaremos disso
assim que começarmos a estudar o Fireworks, que é o editor de
imagens bitmaps que usaremos no nosso curso.
Layout pronto, o próximo passo é salvar todas as imagens
que serão inseridas nas páginas. Os formatos mais comuns
da Internet são os JPEGs (com extensão .jpg), os Gifs (com
a extensão .gif) e os PNGs (com extensão .png). O Fireworks
produz imagens com as três extensões.
A próxima etapa é a montagem das páginas, que se faz num
editor de texto qualquer, podendo ser usado até mesmo os mais
rudimentares editores, como o Bloco de Notas do Windows.
Obviamente existem programas especializados na criação
de páginas Web, que nós conhecemos como editores HTML.
Eles continuam sendo editores de texto, mas especializados
na linguagem de programação HTML, e incorpora, inclusive,
soluções em novas tecnologias como JAVA Script, Applet JAVA,
DHTML, XHTML, XML e Flash.
Por último, depois do site pronto, é necessário transferir
os arquivos que o compõe para um servidor Web, que é o
computador onde o site estará hospedado. Para isso, utilizamos
programinhas que conhecemos como clientes de FTP, muitas
vezes já incorporados aos editores HTML. Tanto o editor HTML,
quanto o cliente de FTP, que utilizaremos em nosso curso, serão
o Dreamweaver.
Sobre o curso
Para otimizar o aproveitamento, optamos por criar este curso
baseado num processo prático de aprendizado. Após as
noções teóricas iniciais, serão aplicados vários exercícios que
conduzirão o aluno à construção de um website. Tudo começa
com a construção de páginas simples, no método de digitação
de comandos num editor de texto qualquer. Isto dará a base
necessária para o entendimento dos editores HTML. A partir daí,
15
Capítulo 1
16
já estudando o editor Dreamweaver, desenvolveremos exercícios
no decorrer do curso. Neste módulo, encontraremos sempre
indicações sobre o modo de desenvolver o estudo proposto, a
partir de imagens e dicas.
Esperamos que você não encontre dificuldades e tenha o
máximo aproveitamento.
Como surgiu a Internet?
Como sabemos, na década de 60 o mundo estava dividido em
dois grandes blocos, de um lado o bloco capitalista liderado
pelos americanos e do outro lado o bloco socialista liderado pela
antiga União Soviética. Neste período o mundo vivia a chamada
“Guerra Fria”, nome designado por não existir nenhum conflito
físico entre as nações, mas que ao mesmo tempo ocorria uma
enorme corrida armamentista entre os dois grandes blocos,
a possibilidade de ocorrer uma nova grande guerra era muito
grande.
Sabendo desta possibilidade o governo norte-americano
resolveu investir em pesquisas para comunicação das bases
militares, a intenção era fazer com que mesmo se o Pentágono
fosse atacado a comunicação entre o resto das bases não
fosse perdida, até este momento a rede que existia passava
por um computador central que ficava no Pentágono, o que
deixava a comunicação vulnerável. No ano de 1968, a ARPA
(Advanced Research and Projects Agency) orgão de defesa
norte-americano, aprovou um projeto de comunicação e abriu
uma licitação para implementação deste projeto.
A BBN (Bolt, Beranek e Newman) ganhou a concorrência e
instalou o primeiro ponto de comunicação no dia 1º de maio
de 1969 na Universidade da Califórnia em Los Angeles. Até o
fim de 69 mais três pontos estavam interligados, foram eles o
Instituto de Pesquisas de Stanford, a Universidade da Califórnia
em Santa Bárbara e a Universidade de Utah. Esta pequena
rede com quatro pontos recebeu o nome de Arpanet. O novo
formato de comunicação utilizava um backbone que passava
por baixo da terra e interligava militares e pesquisadores sem a
necessidade de um computador central.
Em 1971, a Arpanet ampliou seus pontos para quinze nós
e incluiu os computadores da própria BBN, MIT, RAND
HTML
Corporation, Universidade de Harvard, Universidade de Stanford,
Universidade de Illinois em Urbana, Universidade Carnegie
Mellon (CMU) e do centro de pesquisas Ames da Agência
Nacional de Administração Espacial (NASA), entre outros.
Para que pudessem ser trocados arquivos independentemente
das plataformas utilizadas, foram necessário criar procedimentos
para que todos os computadores interpretassem os dados.
Criou-se então, o protocolo TCP/IP (Transmission Control
Protocol/Internet Protocol). Em 1981, todos os computadores
hospedeiros (hosts) ligados à Arpanet eram 213. Em 1986, a
tabela de máquinas hospedeiras na Internet já chegava a 2308.
Hoje, pouco mais de 40 anos depois da criação da Arpanet, já
existem mais de 7 bilhões de usuários desta rede.
O que é a Internet?
Em primeiro lugar, quando falamos em Internet, devemos
entender que ela é um conceito abstrato. Internet não é um
supercomputador em algum lugar do mundo, não é uma
máquina de qualquer espécie, nem um alienígena com
anteninhas piscando. Internet é a comunicação entre dois ou
mais computadores através de impulsos telefônicos, rádio ou
cabo. Se houvesse um grande blecaute mundial, e todos os
computadores fossem desligados simultaneamente, neste
momento não haveria Internet. Agora, supondo que dois desses
computadores, não conectados diretamente, voltassem a
funcionar e trocassem dados entre si, teríamos a própria Internet
voltando a viver.
17
Capítulo 1
18
Existem computadores que ficam conectados à Internet cem
por cento do tempo. São reconhecidos como servidores. Nós os
chamamos assim porque eles ficam 24 horas por dia oferecendo
informação.
A Internet tem vários fins, por exemplo, correio eletrônico
(e-mails), operações online (saldos bancários), transmissão de
arquivos (programas de MP3), compras online, contato através
de redes sociais, alimentar blogs e navegação.
Este último também é conhecido como WWW, a área que vamos
abordar aqui com maior enfoque. É nesta parte da Internet que
os webdesigner trabalham: fazem a distribuição de informações
em forma de hipertexto. Em resumo, criam a parte visual dos
nossos sites.
O que é um site?
Um site nada mais é do que um diretório, uma pasta, no disco
rígido de um servidor, com arquivos que podem ser lidos pelos
navegadores (browsers).
Os tipos de arquivos que compõem um site são o de hipertexto,
imagem, geralmente GIFs e JPGs; som, vídeo e animação.
Hipertexto
Hipertexto é um tipo de documento interativo, cujas informações
se desdobram de acordo com a nossa necessidade.
HTML
Se, por exemplo, estivéssemos pesquisando sobre a Europa
e, num determinado momento, decidíssemos nos aprofundar
em informações sobre a França, puxaríamos esta informação.
A partir daí, se desejássemos saber mais sobre Paris, ainda
poderíamos entrar numa nova vertente do texto, que enfocaria
particularmente esta cidade. Daí por diante, poderímos nos
aprofundar ainda mais, buscando informações sobre a torre
Eiffel ou sobre os rebites que foram usados em sua construção.
Podemos deduzir então, que um website é tão somente um
conjunto de documentos de hipertexto, nos quais nós mesmos
escolhemos que tipo de informação desejamos passar e obter.
Protocolos de transferência
Para que os dados transmitidos pela Intenet cheguem aos
seus destinos de forma segura, inalterada, ou mesmo, sigilosa,
é necessário arrumar essas informações em “pacotes”, que
serão embalados e desembalados por computadores, software
e até sistemas operacionais distintos. Este procedimento de
organização de dados para a transferência é o que chamamos
de “protocolos”. Usamos vários protocolos diferentes na
Internet: o SMTP, para transmissão de mensagens de correio
eletrônico; o FTP, para transferência de arquivos; e o HTTP, para
transferência e visualização de hipertexto.
O FTP é o protocolo que utilizaremos para enviar os nossos
arquivos do disco rígido do nosso computador para o disco de
um servidor no momento de hospedar o nosso website. Uma
das características do protocolo FTP é que ele serve tanto para
enviar quanto para receber arquivos, diferente do HTTP que, no
geral, é só receptor.
Limitações para o webdesign
Infelizmente, nem tudo na Internet ainda são flores. As
lentas conexões dos sistemas de telefonia, as insistentes
incompatibilidades de browser, monitores antigos e pouco
potentes ainda reduzem, e muito, as possibilidades de um
designer. Diferente do papel, onde tudo pode ser feito, a Internet,
por enquanto, não permite que um webdesigner realize um site
sem ceder em determinados pontos. Estudaremos cada caso
19
Capítulo 1
20
particularmente.
No desenvolvimento do seu projeto Web, você deverá levar em
consideração o público-alvo do site em desenvolvimento. Caso
esteja desenvolvendo um site para designers, publicitários ou
arquitetos, o projeto passará a ter uma liberdade maior quanto
às limitações da Web. É bom lembrar que cada produto ou
serviço possui seu público específico e é para esse público que
será contruído o site.
O peso dos websites
Com as novas tecnologias que estão surgindo, esse problema
vem sendo sanado. Internet via rádio e a cabo permitem uma
velocidade de transferência muito superior às que conhecemos
hoje. No Brasil, ainda teremos de aguardar um pouco para que
essas tecnologias se popularizem, é fácil notar que fora dos
grandes centros a internet ainda deixa a desejar na velocidade.
Até lá, e mesmo um pouco depois disso, ainda será exigido o
bom senso para produzir páginas de Internet leves.
Pesquisas apontam que a maioria dos internautas só resiste a 6
segundos diante de uma página que não carrega. Passado este
tempo, eles vão embora e não voltam.
HTML
Tipografia
De início, vamos ao conceito de tipografia. Tipografia é o estudo
das famílias de fontes e da sua melhor utilização. Portanto,
tipografia na Internet é o estudo dos melhores tipos de letras a
serem utilizadas na mídia eletrônica.
A tipografia sempre foi um dos principais elementos no design de
uma peça, seja digital seja impressa. Porém, os webdesigners
sofrem com uma limitação na WWW: só podem contar, para
textos, com as fontes que o usuário possua instaladas em sua
máquina ou que estejam disponíveis em servidores web. Não
definir corretamente a fonte, fará com que o navegador mude a
fonte escolhida para a fonte padrão e boa parte dos navegadores
é a Times New Roman. O problema maior é que, além de mudar
o design da sua página, a fonte Times não permite uma boa
leitura em monitores, pois foi projeta para ser visualizada em
impressos, que utilizam uma resolução maior que a resolução
da Web.
Como se não bastasse, não há um padrão de tamanho para as
fontes nas diversas plataformas e browsers. Por exemplo, um
texto que está adequadamente legível no PC pode ficar pequeno
demais no Macintosh. Este é um dos motivos para que qualquer
projeto de webdesign seja testado em vários computadores e,
de preferência, em várias plataformas diferentes.
Para uma melhor leitura na tela de um computador, convém
utilizar fontes do tipo bastão, como a fonte Arial ou Verdana.
Esta última foi criada pelo inglês Matthew Carter, no início dos
anos 90, e utilizada pela Microsoft, em 1994, com o seu design
perfeito. Ainda é a melhor fonte para ser lida na Web.
21
Capítulo 1
22
Incompatibilidade de Navegadores
Os navegadores mais utilizados hoje em dia são o Mozilla Firefox,
Internet Explorer, Ópera, Chrome e o Safari. O mais utilizado
no mundo é o Internet Explorer, porém temos que projetar o
site lembrando dos outros, pois alguns usuários podem estar
visualizando a página num navegador diferente do seu.
Projetados por empresas rivais, estes browsers costumam
promover significativas mudanças a cada atualização de versão,
adaptando, inclusive, às novas interpretações HTML. Suas ações
não são feitas de comum acordo, portanto você corre um grave
risco de ver aquele efeito que aplicou no seu projeto só funcionar
em um navegador ou outro. Ainda por cima, determinados
controles do HTML são implementações recentes, não podendo
ser visualizados em versões mais antigas. Neste momento o
navegador que melhor trabalha com HTML é o Ópera.
Antes de dar o seu site como finalizado, experimente-o em várias
plataformas e browsers. Tenha pelo menos três navegadores
instalados na máquina e teste a página em todos os três. Certas
surpresas desagradáveis podem esperar o seu projeto no
computador do lado.
Resolução de monitor
Resolução de monitor é, a grosso modo, a capacidade que o
seu monitor tem de mostrar as coisas para você. Uma imagem
numa tela é formada por pixels, que são minúsculos pontinhos
vermelhos, verdes ou azuis que se combinam para formar todas
as outras cores.
HTML
Resolução é a quantidade de pixels que o seu monitor tem de
largura e altura. As mais comuns são 1366 x 768 pixels, com
uma média de 15,216% dos usuários mundiais , 1024 x 768
pixels (975 x 720) usada por 12,74%, 1280 x 800 pixels usada
por 11,32%, 1280 x 1024 pixels (1240 x980), usada por 7,97 e
1440 x 900 pixels, usada por 6,51%.
Ou seja, uma página Web bem projetada deve ser bem
visualizada em quase todas essas resoluções, trabalhando com
uma área útil de 975 pixels de largura por 720 de altura. Isso, se
você não quiser barras de rolagem na sua página. Lembre-se
que o browser possui barras de ferramentas que consomem boa
parte da tela e cada usuário faz a configuração da interface do
seu navegador de uma maneira específica.
Este costuma ser o maior problema dos webdesigners amadores.
Por desconhecimento ou por resistência a uma determinada
resolução, eles projetam sites que estão sendo bem visualizados
no monitor deles, e não no dos outros, ignorando resoluções
inferiores ou superiores. Lembre-se que respeitar as diversas
visualizações é garantir cliques no seu site.
Note que os portais desenvolvem as suas páginas respeitando
todas as resoluções, pois sabem que vários tipos de usuários
acessam as suas páginas.
23
HTML
Capítulo 2
O Que é HTML?
• Comandos Básicos
• Categorias
HTML
O que é HTML?
HTML é a principal linguagem de programação que organiza as
informações (texto, imagens e sons) de uma página Web. Foi
desenvolvida originalmente por Tim Berners-Lee e ganhou força
a partir de 1990.O Hypertext Markup Language, ou linguagem de
hipertexto baseada em marcas, descreve de forma lógica o que
será mostrado pelos navegadores, que poderíamos classificar
como tradutores de linguagem HTML. É comum encontrar ainda
diferenças nos resultados das páginas nos buscadores atuais,
porém as empresas responsáveis demonstram que estão
buscando unificar os resultados.
Essa linguagem é construída através de comandos (ordens que
os browsers devem interpretar) e parâmetros (detalhamento
dessas ordens). A partir de 1997 o W3C buscou manter o padrão
do código através da versão 3.2, fazendo com que a linguagem
fosse tratada como prática comum. Desta forma seria possível
desenvolver um site independente do Sistema Operacional ou
do navegador.
Outra preocupação do W3C foi o padrão para acessibilidade,
tornando o site acessível à dispositivos para deficientes visuais,
27
Capítulo 2
auditivos e dispositivos móveis.
28
Neste momento o HTML está se firmando na versão 5.0, que foi
desenvolvido pelo grupo WHATWG.
Para facilitar a compatibilidade do site desenvolvido entre os
navegadores é interessante desenvolver o site de acordo com o
motor de renderização de cada navegador. Segue abaixo a lista
dos principais navegadores e seus motores:
Safari, Google Chrome – Webkit; Firefox, Mozilla - Gecko;
Internet Explorer – Trident; Opera - Presto
Qualquer documento Web se divide em duas partes: Cabeçalho
(HEAD) e corpo (BODY). Como é um arquivo de texto, pode ser
gerado até nos assistentes de digitação mais simples, já dito
anteriormente.
Você pode visualizar o código-fonte de uma página Web através
do menu secundário, geralmente, alcançado pelo clique no botão
direito do mouse sobre a página; ou através do menu Exibir.
Adotou-se como padrão que a primeira página de um site se
chamaria index.html. Desta forma, quando um usuário digita
um endereço sem discriminar a página para a qual quer ir, ele
sempre cairá na primeira página. Quando digitar um endereço
discriminado, por exemplo, http://www.realedados.com.br/
cursos.html, imediatamente cairá na página “Cursos”.
Com a prática você perceberá como é simples criar documentos
HTML.
Comandos básicos
Os “comandos” são ordens escritas no HTML, sempre
representadas entre os sinais “<” e “>”. Nosso documento
HTML deverá iniciar com o Doctype, neste caso o Doctype
não é um comando (tag) do HTML e sim uma instrução para
o navegador saber qual a versão do código desenvolvido. Em
versões anteriores do HTML era comum encontrar o DTD, porém
a partir da versão 5.0 a referência de qual DTD utilizar ficou de
responsabilidade do navegador. Abra o Bloco de Notas e digite
alinha de comando a seguir:
<! DOCTYPE html>
HTML
Uma observação é que o código não é case sensitive, ou seja,
ele não vai diferenciar entre maiúsculas e minúsculas, porém no
caso acima foi utilizado o DOCTYPE em letras maiúsculas.
Após o DOCTYPE teremos os comandos <html> e </html>. A
barra antes do nome do comando na segunda tag (comando)
indica que ali é o fim do comando. Com o comando (tag)
<HTML> usaremos o atributo lang que serve para que os useragents que rodam da internet saibam qual a linguagem principal
do documento, no nosso caso “pt-br” de português brasileiro.
Segue o código:
<! DOCTYPE html>
<html lang=”pt-br”>
</html>
User agent: Uma aplicação que age como cliente em uma
transação cliente-servidor feita sobre um determinado protocolo
de rede. Na web esse protocolo é o HTTP e os user-agents
são os browsers, crawlers, dispositivos móveis, leitores de tela,
painéis em braile e qualquer outra aplicação usada por um
usuário para navegar por páginas web. (Torres, Bruno. Termos
e definições. Disponível em: <http://www.obasicodaweb.com/
termos-e-definicoes/> Acesso em: 19 de julho de 2012)
Devemos sempre dividir o documento em HEAD e BODY.
No HEAD, ficam os comandos inteligentes do site como
informação do título, software em que foi desenvolvido, palavraschave para catálogos de busca e inserções de comandos
específicos de Java Script e Folhas de Estilo. Neste exemplo
vamos usar o metadados <meta charset=”utf-8”> que servirá
para chavear a tabela de caracteres da página. Esta tabela evita
que o site tenha erro na representação de caracteres, como
troca de acentuações e cedilhas, erro muito comum na internet.
No BODY, está descrita, de forma lógica, toda a diagramação do
texto, as informações que ele apresenta ao usuário, suas cores,
links, enfim, toda a parte “visível” do documento.
O HEAD começa com o comando <head> e termina com o
comando </head>.
O BODY começa com o comando <body> e termina com o
29
Capítulo 2
comando </body>.
30
Eis o código completo:
<! DOCTYPE html>
< html lang=”pt-br”>
<meta charset=”utf-8”>
<head>
<title> html </title>
</head>
<body>
Meu primeiro documento HTML
</body>
</html>
O “<title>” é o comando que define o título de sua página e
aparecerá na barra colorida sobre a barra de ferramentas padrão
do seu browser (navegador). Utilize sempre títulos nas páginas,
pois servem para descrever o site que está sendo visitado e para
ajudar nos buscadores.
Agora salve o arquivo como index.html e em seguida, abra o
arquivo tanto no Mozilla Firefox quanto no Internet Explorer.
Repare que incluímos quebras de linhas entre cada comando,
separando o comando de abertura <html>, o head e o body
e o fechamento </html>. Isso não é obrigatório, porém uma
organização, deixará o seu documento muito mais legível.
Nunca se esqueça de fechar os seus comandos, porque a
maioria deles é de fechamento obrigatório. Muitas vezes a falta
de uma só letra ou sinal é responsável pelo não funcionamento
da sua página.
Categorias
Cada elementos é separado em uma categoria, isto facilitará o
entendimento e utilização de cada comando. As categorias são:
HTML
Metadata content
Destina-se a fornecer metadados, ou seja, informações
adicionais à página.
Seguem alguns tipos de matadados que podemos inserir no
nosso site:
a) Meta Description: <meta name=”description” content=”descreve
o conteúdo da página”>
b) Meta Robots: <meta name=”robots” content=”index, follow”>
all: Os robôs dos buscadores não recebe nenhuma informação;
index. Os robôs dos buscadores incluem a página;
noindex. Os links podem ser seguidos, mas a página não é
indexada;
follow: Robôs indexam a página e seguem os links para outras
páginas;
noFollow: A página é indexada, mas os links não são seguidos;
none: Os robôs devem ignorar a página;
c) Meta Author: <meta name=”author” content=”tido ferraz”>,
informa quem desenvolveu o site.
d) Meta Keywords: <meta name=”keywords” content=”palavra 1,
palavra 2, palavra 3”>, informa as palavras de relevância com
o conteúdo do site. O abuso do uso desta meta tag pode banir
o site da lista dos buscadores, neste caso você deverá utilizar
palavras que realmente tenha concordância com o conteúdo.
e) Link: <link href=”style.css” rel=”stylesheet”>. Este tipo de
link deverá amarrar o arquivo style.css ao site, este arquivo
será responsável pela organização estética do site. Veremos
mais adiante como trabalhar com as folhas de estilos (CSS).
Uma observação importante é que na versão anterior do html
o atributo type era obrigatório, desta maneira o comando ficava
da seguinte maneira <link href=”style.css” rel=”stylesheet”
type=”text/css”>.
Ainda podemos encontrar entre os metadados os seguintes
comandos: base, command, noscript, script e style.
31
Capítulo 2
O código deverá ficar da seguinte maneira:
32
<! DOCTYPE html>
< html lang=”pt-br”>
<meta charset=”utf-8”>
<meta name=”description” content=”descreve o conteúdo da
página”>
<meta name=”robots” content=”index, follow”>
<meta name=”author” content=”tido ferraz”>
<meta name=”keywords” content=”palavra 1, palavra 2, palavra
3”>
<head>
<title> html </title>
</head>
<body>
Meu primeiro documento HTML
</body>
</html>
Flow content
Boa parte dos elementos utilizados no Body são categorizados
como de Fluxo de Conteúdo (Flow Content). Veja alguns destes
elementos, vamos entrar em detalhes no decorrer do curso:
a
abbr
address
area (se for um decendente de um elemento de mapa)
article
aside
HTML
audio
b
bdo
blockquote
br
button
canvas
cite
code
command
datalist
del
details
dfn
div
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
33
Capítulo 2
h5
34
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
keygen
label
map
mark
math
menu
meter
nav
noscript
object
ol
output
p
pre
progress
HTML
q
ruby
samp
script
section
select
small
span
strong
sub
sup
svg
table
textarea
time
ul
var
video
wbr
Text
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content
35
HTML
Projeto Meu 1º HTML (parte 1)
Objetivo: Aplicar os princípios aprendidos sobre HTML.
Você poderá encontrar as repostas no final deste capítulo.
1. Abra o Bloco de Notas e crie uma página com os seguintes
dados:
a. Descrição: aula de webdesign
b. Autor: Coloque o seu nome
c. Conteúdo: html, css, webdesign
d. Título: Curso de Webdesign - Meu 1º Site
e. Corpo: Estou aprendendo HTML
f. Salve como index.html (todo em letras minúsculas), dentro
da seguinte pasta: c:/wamp/www/seunome/aula01. No final
da aula salve o arquivo no seu pendrive ou envie por e-mail.
37
Capítulo 2
Resposta
38
<! DOCTYPE html>
< html lang=”pt-br”>
<meta charset=”utf-8”>
<meta name=”description” content=”aula de webdesign”>
<meta name=”author” content=”tido ferraz”>
<meta name=”keywords” content=”html, css, webdesign”>
<head>
<title> Curso de Webdesign - Meu 1º Site </title>
</head>
<body>
Meu primeiro documento HTML
</body>
</html>
HTML
Capítulo 3
Principais Comandos
HTML
• Principais Comandos HTML
HTML
Principais comandos HTML
Existem alguns comandos de Fluxo de Conteúdo (Flow Content)
que são muito utilizados em HTML. Eles estão presentes em
praticamente todos os documentos que você encontrar na rede.
Se você souber inglês, que foi a língua utilizada como base para
o HTML, você terá ainda mais facilidade para aprendê-los. São
eles:
<BR>
Quebra de linha ou break, de onde vem a abreviação BR. Tem o
efeito de terminar o texto em uma linha e passar para a seguinte.
É um dos poucos comandos em HTML que não precisam de
fechamento.
<P>
Indica parágrafo. O comando P insere uma linha em branco após
o seu fechamento. Seu fechamento é </P>.
<DIV>
Serve para dividir o layout em seções, estruturando todo o layout
do projeto. Seu fechamento é </DIV>.
Exemplo: <DIV ID=”Topo”> Real & Dados </DIV>
<A>
Indica link para um outro documento. Só funciona com o
parâmetro de direcionamento HREF. Seu fechamento é </A>.
Exemplo: <A HREF=”http://www.realedados.com.br”> Real &
Dados </a>
HREF
O principal parâmetro do comando <A>. Indica o endereço que
o link está direcionado. Os endereços devem ser representados
41
Capítulo 3
completos se o alvo estiver em um diretório diferente do que
está o seu documento. Por exemplo:
42
<A HREF=”http://www.realedados.com.br/index.html”>
Clique aqui para ir à Real & Dados.
</A>
Neste caso, a frase contida no comando aparecerá sublinhada
e, com a cor especificada no comando BODY, será o link para o
endereço contido no comando <A>.
Para uma página no mesmo diretório, os endereços de links
podem ser simplificados. Levantemos a hipótese de que o seu
site esteja hospedado no endereço http://www.seunome.com.br
e você queira fazer um link entre a página index.html e a página
pessoal.html, que estão no mesmo diretório. Você, então, poderá
representar este link da seguinte forma:
<A HREF=”pessoal.html”>
Clique aqui para me conhecer melhor
</A>
Ou ainda, se esta página estiver no subdiretório seunome, dentro
do diretório onde está localizada sua página index, representará
desta forma:
<A HREF=”seunome/pessoal.html”>
Clique aqui para me conhecer melhor
</A>
<IMG>
Indica imagem e as insere. Só funciona com o parâmetro que
diz o endereço onde a imagem deve ser buscada (SRC). Não
necessita de fechamento.
Exemplo: <img src=”armazem.jpg”>
Para o comando <IMG>
HTML
SRC
Ou source, de onde origina a abreviação SRC. Indica o endereço
onde a imagem está localizada. Por exemplo:
<IMG SRC=”../imagens/foto.jpg”>
ALT
Insere um texto explicativo em forma de etiqueta. Este recurso
é super-importante pois permite o acesso de portadores de
necessidades visuais. Por exemplo:
<IMG SRC=”../imagens/foto.jpg ALT=”Este sou eu.”>
WIDTH
Indica a largura da imagem. Não é obrigatório e pode servir para
esticar ou comprimir a imagem. O valor deve ser dado em pixels
ou porcentagem. Por exemplo:
<IMG SRC=”../imagens/foto.jpg
WIDTH=”230”>
ALT=”Este
sou
eu.”
HEIGHT
Indica a altura da imagem. Como o WIDTH, não é obrigatório,
pode servir para esticar ou comprimir a imagem e o valor deve
ser dado em pixels ou porcentagem.Por exemplo:
<IMG SRC=”../imagens/foto.jpg
WIDTH=”230” HEIGHT=”400”>
ALT=”Este
sou
eu.”
BORDER
Configura uma borda para a imagem. Os valores devem ser
dados em pixels ou porcentagem.
43
HTML
Projeto Meu 2º HTML
Objetivo: Aplicar os princípios aprendidos sobre os parâmetros
do HTML.
1. Crie o index.html e salve na pasta c:/wamp/www/seunome/
aula02. Configure o HTML da seguinte maneira:
a. Título: Curso de Webdesign - Continuando o Site
b. Corpo: Estou “matando a pau” no HTML, insira um parágrafo
com o seguinte texto: Carros | Real & Dados.
c. Crie dentro da pasta aula02 uma pasta com o nome imagens.
d. Copie da pasta Área Gráfica as imagens tb_carro_1 e tb_
carro_2 e cole dentro da pasta imagens criada.
e. Crie um arquivo novo, salve como carros.html, insira as
imagens tb_carro_1 e tb_carro_2, (utilizando o comando de
imagem “IMG SRC”) lembre de colocar o caminho da pasta,
ou seja, o local onde a imagem se encontra em seu site.
f. Aplique um parágrafo, digite o texto “voltar” abaixo das
imagens da página carros.html e insira o comando de link
para voltar ao index.html.
g. Retorne para o arquivo index.html e insira um link na palavra
“Carros” para navegar até a página carros.html. Depois,
ponha um link na palavra “Real & Dados” para o site http://
www.realedados.com.br.
45
Capítulo 3
46
h) Salve o arquivo, abra a página index.html nos navegadores
e teste se os links estão corretos. Caso não estejam, analise o
código fonte.
Resposta
Página index.html
<! DOCTYPE html>
<html lang=”pt-br”>
<meta charset=”utf-8”>
<meta name=”description” content=”aula de webdesign”>
<meta name=”author” content=”tido ferraz”>
<meta name=”keywords” content=”html, css, webdesign”>
<head>
<title>Curso de Webdesign - Continuando o Site</title>
</head>
<body>
<p>Estou “matando a pau” no HTML</p>
<p><a href=”carros.html”>Carros</a> | <a href=”http://www.
realedados.com.br”>Real & Dados</a></p>
</body>
</html>
Página carros.html
<! DOCTYPE html>
<html lang=”pt-br”>
<meta charset=”utf-8”>
<meta name=”description” content=”aula de webdesign”>
<meta name=”author” content=”tido ferraz”>
<meta name=”keywords” content=”html, css, webdesign”>
<head>
HTML
<title>Carros</title>
</head>
<body>
<p><img src=”imagens/tb_carro_1.jpg” >
<img src=”imagens/tb_carro_2.jpg”>
</p>
<p><a href=”index.html”>Voltar</a></p>
</body>
</html>
47
HTML
Capítulo 4
Estilos CSS
• Tipos de Estilos
• A Sintaxe
• As Propriedades
HTML
Estilos CSS
“CSS” é a abreviação de Cascading Style Sheet, termo que foi
traduzido para português como “Folha de Estilo em Cascata”.
Até um passado próximo, os desenvolvedores Web não utilizavam
os CSS. A necessidade gerada com a comercialização da Web,
a implementação tecnológica e a evolução na solução visual dos
websites fizeram com que a W3C normatizasse os estilos CSS
para facilitar a vida desses desenvolvedores.
A facilidade vai da velocidade com que as páginas são
reestruturadas à interpretação feita pelos navegadores.
Vinculando as Folhas de Estilo
As folhas de estilo podem ser vinculadas à página de 3 maneiras:
1. Externa ou Linkada;
2. Interna;
3. Inline.
Folha de Estilo Externa
Esta opção é ideal para a manutenção de várias páginas, pois
características como plano de fundo, cor e tamanho de letras
ficam armazenadas num arquivo comum à todo site. Assim, caso
modifique uma página, você estará modificando todas as outras.
Para criar uma folha estilo externa, você deverá criar uma
página com a extensão .css e aplicar a marcação de link dentro
do cabeçalho do código-fonte como no exemplo abaixo:
<link href=”geral.css” rel=”stylesheet” type=”text/css” > ou <link
href=”geral.css” rel=”stylesheet” > no HTML 5.
Folha de Estilo Interna
Uma folha de estilo é interna quando ela é inserida no códigofonte da página. Esta opção não é ideal para elementos comuns
à outras páginas. Ela é ideal para elementos próprios da página.
51
Capítulo 4
Veja o exemplo a seguir:
<style type=”text/css”>
52
<!-body {
background-image: url();
background-color: #000000;
}
.style2 {
color: #FF3300;
font-weight: bold;
}
-->
</style>
Inline
Esta opção é aplicada direta no código. Não é a melhor opção.
Veja o exemplo:
<p style=”text-indent: 5px;”>Recuo de 5px</p>
A sintaxe dos Estilos CSS
O conjunto de regras dos estilos CSS formam uma folha de
estilos. Esta regra é composta pelo seletor, valor e propriedade.
Segue a estrutura:
seletor {propriedade: valor;}
Exemplo:
a:link {color: #0066FF;}
O “seletor” é o elemento HTML identificado por sua marcação,
classe ou ID. No exemplo, o a:link se refere ao link, pois a letra
“a” representa a marcação link.
HTML
A “propriedade” é o atributo que receberá a regra. Observando o
exemplo citado vemos a propriedade cor (Color).
O “valor” é a característica aplicada. Notamos no exemplo que
é a cor aplicada ao link. A cor é aplicada no valor Hexadecimal,
note que a cor deverá ter o sinal de # e depois mais seis valores,
caso estes valores sejam 3 pares, a cor poderá ser reduzida
para apenas 3 valores.
A sintaxe é construída com o seletor, depois acrescentamos as
chaves, entre as chaves, colocamos a propriedade e o valor,
separando-os por dois pontos.
As Propriedades
Propriedade Font
É utilizada para inserção de texto. Você definirá o tamanho das
fontes, modelo e as demais características do texto.
Fonte Padrão do Site
Você poderá criar uma fonte padrão para todo o seu site. Esta
opção não impede de você criar outros estilos para as fontes. O
estilo criado para uma fonte padrão é aplicado ao seletor Body.
Veja o exemplo abaixo:
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
Novo Estilo Fonte
Para criar um novo estilo, basta criar um novo seletor com um
ponto (.) antes, ou seja, uma classe, mais adiante abordaremos
as classes. Veja o exemplo abaixo:
53
Capítulo 4
.texto-rodape {
54
font-size: 9px;
}
Propriedades das fontes
Segue uma lista de algumas propriedades para a fonte:
a. Color: cor da fonte;
b. Font-family: tipo da fonte;
c. Font-size: tamanho da fonte;
d. Style: estilo da fonte.
Valores para a Propriedade Font
a. Color: cor da fonte (Código hexadecimal: #FFFFFF).
b. Font-family: nome da fonte (Verdana, Arial).
c. Font-size: tamanho da fonte (9px, 10 px...).
d. Font-style: definição do estilo para a fonte (italic, oblique,
normal).
e. Font-weight: peso da fonte (normal, bold, bolder, lighter, 100,
200, 300, 400, 500, 600, 700, 800, 900).
Exemplo:
body {
font-size: 12px;
font-style: italic;
font-weight: normal;
font-variant: normal;
color: #096;
}
HTML
Propriedade Texto
Utilizada para definir as características do texto.
55
Algumas propriedades:
a. Color: cor do texto;
b. Letter-spacing: espaçamento entre letras;
c. Word-spacing: espaçamento entre palavras;
d. Text-align: alinhamento do texto;
e. Text-transform: transformação no texto;
f. Text-indent: recuo do texto;
Exemplo:
.corpo_texto{
color: #096;
letter-spacing: 0,1em;
word-spacing: 0,1em;
text-align: justify;
text-transform: capitalize;
text-indent: 0,2;
}
Valores válidos
A seguir exemplos de valores válidos para o css:
a. color: código
(255,235,222);
hexadecimal
(#009966),
cores
rgb
b. letter-spacing: normal (é o espaçamento padrão) e lenght
(px, pt, em, cm, ...);
c. word-spacing: normal (é o espaçamento padrão) e lenght
(px, pt, em, cm, ...);
Capítulo 4
d. text-align: left, right, center e justify;
56
e. text-transform: none (texto normal), capitalize (todas as
primeiras letras do texto em maiúsculas), uppercase (todas
as letras do texto em maiúsculas) e lowercase (todas as
letras do texto em minúsculas);
f. text-indent: lenght (px, pt, em, cm, ...), %;
Cor de link
O link possui 4 opções: Link (normal), Active (Ativo), Hover
(Cambiável) e Visited (Visitado). A sua estrutura recebe a letra
“a” referente à marcação dos links precedida por dois pontos e
com a opção a ser definida (link, active, hover ou visited).
A opção Link pode receber os mesmos valores da propriedade
Font.
a:link {color: #0066FF; text-decoration: none;}
a:active {text-decoration: none;}
a:hover {text-decoration: none; color: #FF6600;}
a:visited {text-decoration: none; color: #FF6600;}
Obs.: O text-decoration serve para remover a decoração do
texto, ou seja, o sublinhado.
Propriedade Plano de Fundo
A cor e a imagem de plano de fundo são aplicadas ao seletor
Body, pois estas opções fazem parte do corpo do site.
Cor do Plano de Fundo
Para aplicar uma cor de fundo no site, basta utilizar o seguinte
código:
body {background-color: #000000;}
Propriedade Margin
Esta propriedade define os valores para as margens dos
HTML
elementos HTML.
As propriedades são:
a. Margin: aplica margem em todos os lados;
b. Margin-top: aplica apenas margem no topo;
c. Margin-bottom: aplica apenas margem na base;
d. Margin-right: aplica apenas margem na direita;
e. Margin-left: aplica apenas margem à esquerda.
Exemplo:
<!-p {margin-right: 50px;}
-->
Valores válidos
A seguir exemplos de valores válidos para o css:
a. Auto: aplica um valor automático à margem;
b. Length: aplica valores reconhecidos pelas CSS (px, pt, cm,
...);
c) Porcentagem da largura do elemento pai: %.
Criando Seções de Conteúdo
Estes elementos marcam um conteúdo separado, agrupando
elementos com conteúdo relacionado, estes elemento são:
header, article, aside, nav ,section e footer. No Html estes
elementos são representados como uma marcação (tag).
Veja o exemplo do rodapé:
<footer>
<div id=”footer-botom”>Todos os Direitos.</div>
57
Capítulo 4
</footer>
Header
58
Este comando é aplicado no cabeçalho da página e também
pode ser usado para marcar formulários de busca ou marcas
importantes para o site.
Article
Esta tag marca o conteúdo como posts, artigos, matérias e
comentários de um site.
Aside
Geralmente é aplicado nas barras laterais com conteúdo auxiliar
do site.
Nav
Esta marcação recebe um grupo de links para navegação.
Section
A tag section define uma nova seção do site, como os destaques,
as novidades e uma chamada para conteúdo completo.
Footer
Este elementos destina-se ao rodapé do site.
Veja um pequeno exemplo de estrutura de site com divs e
seções:
HTML
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
HTML
<meta charset=”utf-8” />
<link href=”style.css”rel=”stylesheet”>
<title>Aula 03</title>
</head>
<body>
<header>
<div id=”top-header”>
<h1><img src=”imagem/logo.png” alt=”Marca HTML5”></h1>
<nav>
</nav>
</div>
</header>
<article>
<h1>HTML5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
et rutrum odio. Suspendisse aliquam massa vel felis venenatis
cursus.
</article>
<footer>
<div id=”footer-botom”>Todos os Direitos.</div>
</footer>
</body>
</html>
CSS
/* CSS Document */
body{font-family:Verdana, Geneva, sans-serif;}
59
Capítulo 4
header{height:150px;width:100%;background:#009;}
nav {width:100%;height:120px;}
60
article{width:100%;background:#CCC;}
footer{width:100%;background:#000; color: #fff;}
HTML
Projeto Construindo Sites com
Seções
Objetivo: Construir sites com seções de acordo com o conteúdo
abordado. A imagem a seguir é do site como ficará com a
conclusão do Projeto no próximo capítulo.
1. Crie o index.html e salve na pasta c:/wamp/www/seunome/
aula03. Configure o HTML da seguinte maneira:
a. Título: Curso de Webdesign – Site em Seções;
b. Aplique o linque ao arquivo css. Aproveite e crie a página css
e salve na pasta aula03;
c. Defina a fonte padrão para Verdana com tamanho 11pixels.
d. Aplique um header com altura de 150px, largura 100% e cor
de fundo #009;
e. Crie a seção de navegação após a seção header, coloque
com largura de 960 pixels. Crie a seção no arquivo HTML e
dentro de uma lista digite “Menu”;
f. Faça a seção artigo com largura de 960 pixels e cor de
fundo #CCC´. Dentro da seção digite o texto “Título do Site”
e aplique a marcação h1. Após o texto do título aplique um
texto ilustrativo para dois parágrafos. Caso queira gere o
texto através do site http://br.lipsum.com;
61
Capítulo 4
g. Por último faça a seção rodapé com largura 100% e cor de
background com #000.
h. Faça as respectivas seções no arquivo html.
62
i. Salve os arquivos e teste nos navegadores.
HTML
Capítulo 5
Posicionando Elementos
com CSS
• Margens
• Afastamentos
• Posicionamento de Divs e Seções
HTML
Posicionando Elementos com CSS
Margens
As margens podem ser aplicadas tanto para texto como vimos
anteriormente, assim como a elementos de seções, divisões,
imagens e outros. A propriedade margin (margem) é aplicada no
css dos elementos e define o espaço entre os elementos HTML.
Figura 1.1
As declarações podem ser feitas da seguinte maneira:
margin-top: 10px; margin-right:20px; margin-bottom: 25px;
margin-left:15px;
Esta declaração pode ser abreviada, simplificando o código. Note
que ela foi feita no sentido horário iniciando pelo topo, depois
seguindo para a direita, depois base e por último à esquerda.
Sendo assim o código pode ficar da seguinte maneira:
margin: 10px 20px 25px 15px;
Caso o código possua dois pares consecutivos como no exemplo
a seguir:
margin-top: 10px; margin-right:20px; margin-bottom: 10px;
margin-left:20px;
65
Capítulo 5
A declaração poderá ficar da seguinte maneira:
margin: 10px 20px;
66
Assim a declaração será aplicada no topo com o valor de 10
pixels, depois na direita com o valor de 20 pixels e ele repete 10
pixels para a base e o valor de 20 para o lado esquerdo.
Se os valores forem iguais como no exemplo a seguir:
margin-top: 10px; margin-right:10px; margin-bottom: 10px;
margin-left:10px;
A declaração fica ainda mais simples, veja:
margin: 10px;
Afastamentos
A declaração para o afastamento é o padding, muitas vezes é
confundido com o margin, pois são bem parecidos. O padding é
o espaço entre o conteúdo e as bordas de um elemento, desta
maneira ao definir o valor de margin estamos definindo um
espaço entre os elementos e o conteúdo que estiver ao lado.
Ao especificar um padding em uma camada, por exemplo,
estamos definindo o espaço que há entre a borda da camada e
o que tiver dentro.
A declaração para o padding segue as mesmas regras do
margin, veja o exemplo:
padding-top: 10px; padding-right:10px; padding-bottom: 10px;
padding-left:10px;
E a simplificação do código funcionará da mesma maneira:
padding: 10px
Posicionando Divisões e Seções
Para posicionar os elementos no HTML podemos usar a
propriedade position e principalmente o float, para esta definição
é necessário ter o projeto bem definido em mãos, por isso vamos
trabalhar algumas estruturas de layout para o site.
HTML
67
Figura 1.2
É importante entender o momento para utilizar cada um dos
recursos. Vamos ver cada uma das opções:
Static
Opção padrão para todo elemento HTML, ou seja, o elemento
não tem posicionamento definido e seu fluxo ocorre normalmente
no documento HTML. Exemplo:
#div_qualquer {position: static}
Não é necessária definir esta opção para os elementos da página
devido ao seu valor ser padrão.
Relative
Esta opção permite utilizar as declarações top, bottom, right ou
left para posicionar os elementos na página em relação ao lugar
Capítulo 5
que ele ocuparia no fluxo do documento.
#div_qualquer {position: relative; top: 10px; left: 20px;}
68
No exemplo acima o elemento foi posicionado a 10px do topo
e a 20px da esquerda em relação ao lugar que ele ocuparia no
documento. Vale lembrar que utilizando position:relative todo
esse espaço que foi definido ainda continua sendo ocupado pelo
elemento na página.
Absolute
Esta opção posiciona o elemento exatamente em relação ao
primeiro elemento pai com posição diferente de “static”.
#div_qualquer {position: absolute; top: 40px; right:0; }
No exemplo a seguir a div_qualquer ficará relativa à div_pai e
não mais ao Body, isto ocorre devido ao aninhamento das divs.
Exemplo do HTML:
<div id=”div_pai”><div id=”div_qualquer”></div></div>
Fixed
Posiciona o elemento fixamente na página em relação ao
navegador.
#div_qualquer {position: fixed; top:10px; left:20px; }
Verifique a diferença entre as posições no endereço www.
nixonline.com.br/positions
Float ou Flutuar
O principal recurso para posicionamento é o float, que pode ser
usado para posicionar o elemento à esquerda ou à direita.
No exemplo www.nixonline.com.br/float você poderá encontrar
alguns exemplos com divs e imagem.
Para posicionar um elemento à esquerda utilize float:left e para
posicionar o elemento à direita utilize o float:right.
Vamos ver o exemplo abaixo no HTML:
HTML
<div id=”geral”>
<div id=”div_left”>
<h1>Div Esquerda</h1>
</div>
<div id=”div_right”>
Esquerda</h1>
69
<h1>Div
Direita
com
Imagem
à
<p><img src=”imagens/mitologia-gregao-pensador.jpg” width=”120” height=”205” class=”img”>Foi
criada a classe img e aplicada no HTML:<br> &lt;img src=...
class=&quot;img&quot;&gt;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer et odio eu leo luctus viverra. Nunc dictum porttitor est,
ac semper metus ornare euismod. Donec placerat, nibh non
posuere aliquet, sapien leo interdum erat, condimentum ultricies
nunc tellus eu mi. Sed metus mauris, posuere eu imperdiet quis,
tempus vel odio. Curabitur tristique aliquam odio, quis rhoncus
libero mattis non.</p>
</div>
</div>
Note que foi criada uma div geral que servirá para limitar a
largura do site.
Agora veja o CSS:
body{
font: 12px Verdana;
}
#geral {
margin:0 auto;
width: 960px;
}
Capítulo 5
#div_left{
70
float:left;
width: 250px;
background-color: #9FC;
}
#div_right{
float:left;
width: 710px;
background-color: #FF3;
}
.img{
float:left;
padding:5px;
}
Visite a página float do site da NixOnline e verifique o código
completo.
Display
A propriedade Display faz com que se tenha controle sobre como
o elemento será renderizado pelo navegador. Veja algumas
opções:
a) Block para exibir elementos como blocos. Um bloco contém
um espaço em branco em volta e não permite outros elementos
HTML ao lado, exceto se tiver sido declarada a propriedade float
para o elemento próximo ao bloco;
b) Inline para exibir elementos na mesma linha
c) Inline-block para exibir elementos como blocos e na mesma
linha/lado a lado). Útil na estruturação de documentos.
HTML
d) Table renderiza o elemento como uma tabela. Veja a opção
feita anteriormente com o recurso do display:table.
#geral {
margin:0 auto;
width: 960px;
display:table;
background:#C99;
}
Clear
Utilizamos o recurso do clear para posicionar o rodapé abaixo
das demais colunas. A declaração para o clear é a opção boht.
Veja o exemplo abaixo:
footer{height:220px;clear:both;}
71
HTML
Projeto Posicionando os
Elementos na Construção do Site
Objetivo: Posicionar os elementos e completar o primeiro site.
1. As intervenções serão feitas no arquivo css e no index.html,
vá na pasta e abra este arquivo.
2. Acrescente no body o margin:0 auto para que todo o conteúdo
seja centralizado; padding:0; font-size:12px; color:#FFF;
3. No header aplique um margin-top de 2 pixels, isto deverá
aplicar uma suave distância no topo.
4. Na seção nav aplique um comando para flutuar à direita,
uma margem com os seguintes valores: 60px 20px 0 0.
5. Insira o código body nav ul li{display:inline;}. Note que neste
caso foi aplicada apenas na lista que fica dentro da seção
nav.
6. Para os linques aplique as seguintes propriedades: color:
#FFFFFF;font-weight: bold;padding: 0 5px 0 10px;textdecoration: none;.
7. Na seção article aplique uma opção para alturma mínima de
300 pixels, deixe centralizada usando o comando margin,
aplique a cor branca (#000) e um afastamento de 5 pixels.
8. No rodapé (footer) aplique a opção para limpar posição
(clear:both), uma margem de topo com 30 pixels, um
afastamento de 0 pixels e um alinhamento de texto com
valor à esquerda (text-align: left).
9. Vamos criar as declarações do parágrafo da seção artigos,
coloque 18 pixels para a altura da linha, uma margem da
base com 5 pixels e um afastamento de 0 (article p {lineheight: 18px;margin-bottom: 5px;padding: 0;}).
10.Vamos criar uma div #top-header aninhada à div de seção
header e aplciar os seguintes valores: height: 150px;
largura:960px; margem:0 auto; afastamento:5px; cor de
plano de fundo:#9C3.
11. Centralize em relação à altura a imagem que está dentro da
div top-header (#top-header img.logo{vertical-align: middle).
73
Capítulo 5
12.Coloque a imagem do topo para flutuar à esquerda (float:left;);
74
13.Crie uma div aninhada à seção footer com o nome de footerbotom, aplique as seguintes regras: largura de 960 pixels,
margem para centralizar, afastamento de 5 pixels e altura
de 80 pixels.
HTML
Capítulo 6
Imagens de Plano de
Fundo, Fontes do Google
e Classes
• Inserindo Imagens com Plano de
Fundo (Background)
• Fontes do Google
• Seletor de Classes
HTML
Inserindo Imagens como Plano de
Fundo (Background)
As imagens usadas como plano de fundo dos sites ou elementos
HTML devem estar no formato .gif, .jpg ou .png, você irá
aprender a como fazer uma imagem nestes formatos no módulo
do Fireworks.
Ao planejar a imagem para o site é importante ficar atento ao
seu comportamento padrão. Um destes comportamentos é a
repetição da imagem caso ela não preencha toda a área do
fundo, ou seja, se a imagem for aplicada como fundo do site e
ela for menor que o espaço disponível no navegador, a imagem
irá se repetir ao lado e abaixo.
Outro fator é que ela inicia sempre da esquerda para a direita e
de cima para baixo.
Para aplicar uma imagem de plano de fundo, devemos usar
a propriedade background no css com os valores do caminho
completo da pasta onde se encontra a imagem. Veja o exemplo:
background-image:(imagens/bg.jpg); ou a forma abreviada
background:(imagens/bg.jpg);
Veja alguns valores válidos para a imagem de plano de fundo:
a. background-image: imagem como plano de fundo;
b. background-repeat: controla a repetição da imagem. Os
valores são no-repeat para não repetir, repeat-y para repetir
apenas na vertical e repeat-x para repetir na horizontal;
c. background-attachment: mantém a imagem fixa na tela. Os
valores são fixed para deixar a imagem fixa e scroll para
rolar a imagem;
d. background-position: controla a posição da imagem. Alguns
dos valores são top left para a imagem ficar fixa no topo e à
esquerda, top center no topo e no centro, top right no topo e
à direita, center left no centro em relação à altura e à direita,
center center totalmente no centro, center right no centro e à
direita, bottom left na base e à esquerda.
77
Capítulo 6
Fonts do Google
78
Sempre foi um grande problemas para os designers a limitação
para o uso de fontes no site, isto foi resolvido com a disponibilidade
de fontes nos servidores. A vantagem desta solução é que a
fonte fica disponível na internet, além de encontrar uma boa
variedade tipográfica.
Neste capítulo você aprenderá a usar as fontes disponibilizadas
pelo Google.
Para acessar as fontes para visitar o endereço http://www.
google.com/webfonts.
Figura 6.1
Siga os passos para utilizar uma fonte:
1. Escolha a fonte desejada clicando em Add to Collection.
2. Com a fonte adicionada à sua coleção, clique na opção Use.
3. Copie o html do passo 3 e cole antes do fechado da tag
head.
Exemplo:
<link
href=’http://fonts.googleapis.com/
css?family=Snowburst+One’ rel=’stylesheet’ type=’text/css’>
4. Copie o css do passo 4 e cole no body do seu código css.
Desta maneira a fonte será a padrão do site.
Exemplo: body{font-family: ‘Snowburst One’, cursive;}
HTML
O seletor de classe
As classes servem para não ficarmos restrito apenas a utilização
de tags HTML, além de dar liberdade para mudarmos uma
determinada tag no meio do documento HTML.
Você pode dar qualquer nome e com ele criar uma classe a qual
definirá as regras CSS.
Para criar uma classe você deverá dar o nome precedido de um
ponto(.), exemplo:
.nome-da-classe{propriedade:valor;}
No HTMl você pode aplicar da seguinte maneira:
<p class=”nome-da-classe”></p>
79
HTML
Projeto Construindo um Novo
Site
O objetivo deste projeto é aplicar a imagem de Plano de Fundo,
posicionar as seções e divs e deixar pronto para o próximo
capítulo.
1. Abra seu código html, lembrando de:
a. Abrir com o DOCTYPE.
b. Utilizar as opções de meta (charset, descrição, autor e
palavras-chave).
c. Usar o título Jquery, Twitter e FanPage.
d. Digitar teste no Body e testar no navegador.
2. Note na imagem que você encontrará a seção header,
article, nav, aside e footer, que as quatro primeiras seções
ficarão contidas numa div que podemos chamar de div geral
e que a div footer contém uma div dentro dela para permitir a
centralização ou organização do conteúdo “Todos os Direitos
81
Capítulo 6
82
Reservados”.
Vamos iniciar pela div geral dentro do body e depois vamos criar
as seções header, article, nav, aside, após o fechamento da div
geral abra a seção div footer e dentro dela faça a div footer-geral.
3. Faça o linque para o arquivo style.css.
4. Vamos usar a fonte Roboto do Google Webfonts, para isto
insira o código a seguir, de linque dentro da tag head: <link
href=’http://fonts.googleapis.com/css?family=Roboto+Cond
ensed:400,700’ rel=’stylesheet’ type=’text/css’>. Caso queira
pode acessar o site e solicitar para o Google gerar o código
HTML e CSS. Salve o arquivo.
5. Crie o arquivo style.css e insira as seguintes informações
para o body:
a. Margens e afastamentos: 0;
b. Tamanho da fonte com valor de 100%;
c. Família da fonte ‘Roboto Condensed’ e sans-serif como
segunda opção;
d. Aplique a imagem bg.jpg como plano de fundo do site. A
imagem não deverá repetir, deverá ficar fixa no topo e no
centro da página (background:no-repeat url(imagens/bgaula07.jpg) top center;).
6. Salve o arquivo e teste no navegador.
7. Crie os estilos para Título 2 com tamanho 18 pixels e Título
3 com 14 pixels e salve o arquivo style.css.
HTML
8. Abra o index, crie a tag <h2></h2> dentro da seção article e
digite dentro desta tag a palavra Apresentação.
9. Dentro da seção Aside, crie a tag <h3></h3>, dentro dela
digite Twitter, repita os passos e digite Facebook, salve o
arquivo e teste no navegador.
10.Volte para o arquivo style.css e crie a div geral com margem
com valores 0 e auto para centralizar a página e largura 960
pixels.
11. A div Header deverá ter apenas altura de 220 pixels, salve
o arquivo.
12.Retorne para o index, dentro da div header digite o seguinte
comando para chamar a imagem <img src=”imagens/logo.
png” width=”220” height=”170”/>, salve o arquivo e teste no
navegador.
13.Retorne para o arquivo style.css, aplique uma altura de 50
pixels para a div nav e salve o arquivo.
14.Vamos criar o menu no arquivo index. Dentro da tag nav
digite o código a seguir:
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Quem Somos</a></li>
<li><a href=”#”>O que Fazemos</a></li>
<li><a href=”#”>Participe</a></li>
<li><a href=”#”>Notícias</a></li>
<li><a href=”#”>Participe</a></li>
<li><a href=”#”>Fale Conosco</a></li>
</ul>
Salve o arquivo e teste no navegador.
15.Note que o menu ficará na vertical, com os marcadores e
o sublinhado de linque. Vamos retornar ao css para mudar
estas propriedades.
83
Capítulo 6
16.Insira a seguinte linha no seu código para fazer com que
o menu fique na horizontal nav ul li{display:inline;}. Salve o
arquivo e teste no navegador.
84
17.Vamos deixar as palavras do menu mais afastadas com um
valor de 10 pixels, remover o sublinhado da decoração de
linque, em negrito (bold) e com a cor #030. Veja o código nav
a{padding: 0 10px; text-decoration: none;font-weight:bold;
color:#030;}. Salve o arquivo e veja as mudanças.
18.Agora vamos mudar as cores dos linques do tipo sobreposto
e visitado, além de colocar uma borda inferior de 2 pixels.
Veja código nav a:hover{color:#F60;border-bottom: 2px solid
#f60;} e nav a:visited{color:#666;border-bottom: 2px solid
#666;}
19.Aplique uma largura de 650 pixels para a seção article,
aplique um afastamento de 10 pixels para todos os lados
com exceção do lado esquerdo que deverá receber um valor
de 45 pixels e deixe o box flutuando à esquerda. Veja código
article{width:650px;padding:10px 10px 10px 45px;float:left;}.
20.Aplique uma largura de 220 pixels para a seção aside, com
afastamento de 10 pixels para todos os lados, uma borda
de pixel à esquerda para separar o conteúdo das seções e
faça o box flutuar à direita. Veja código aside{width:220px;p
adding:10px;border-left:1px solid #030; float:right;}. Salve o
arquivo e teste no navegador.
21.Para o footer colocaremos uma altura de 220 pixels, a
posição deverá ser modificada de acordo com as divs acima,
uma cor de plano de fundo de #030, uma borda no topo de
2 pixels, cor da fonte branca e tamanho de 0.8em. Veja o
código
footer{height:220px;clear:both;background:#030;
border-top: 2px solid #0C0;color:#FFF;font-size:0.8em;}.
Salve e teste no navegador.
22.Vamos criar uma div entro da seção footer, esta div terá o
nome de footer-central e deverá ter largura de 870 pixels, pois
teremos que dar o desconto de 90 pixels para as larguras e
margem 0 auto para centralizar a div. Segue código #footercentral{width:870px;margin:0 auto;padding:20px 45px;}.
Salve e teste.
23.Note que a marca ficou desalinhada em relação ao conteúdo,
HTML
para isto vamos aplicar uma classe na tag img do index, dê
o nome para classe de marca. Veja como ficará o código:
<header>
<img src=”imagens/logo-aula07.png” width=”220” height=”170”
class=”marca” />
</header>
24.No css aplique o seguinte código: .marca{padding:10px 0 0
25px;} e salve o seu arquivo. No próximo capítulo você irá
terminar o site.
85
HTML
Capítulo 7
Integrando o Site com as
Redes Sociais e Usando a
Biblioteca Jquery
• Integrando com o Twitter
• Integrando com o Facebook
• Integrando com o Google Maps
• Banner com Recurso Jquery
HTML
Twitter e Facebook
Hoje é comum integrar os sites com as Redes Sociais, fazendo
com que o conteúdo seja atualizado diretamente no site.
Para fazer com que suas últimas postagens do Twitter apareçam
no seu site, baixe o código www.nixonline.com.br/downloads/
twitter.txt e cole no local desejado do seu site. Note que no código
você encontrará o local para colocar o seu login no Twitter, assim
como mudar as propriedades de dimensão e cores.
Para integrar com o curtir da FanPage, você deverá baixar o
código
www.nixonline.com.br/downloads/face.txt. Note que
neste código também possível mudar o endereço da FanPage,
assim como as propriedades.
Álbum de Fotos com Jquery
Segundo o Wikipedia Jquery é é uma biblioteca JavaScript
cross-browser desenvolvida para simplificar os scripts client side
que interagem com o HTML. Ela foi lançada em janeiro de 2006
no BarCamp de Nova York por John Resig. Usada por cerca de
55% dos 10 mil sites mais visitados do mundo, jQuery é a mais
popular das bibliotecas JavaScript.
jQuery é uma biblioteca de código aberto e possui licença dual,
fazendo uso da Licença MIT ou da GNU General Public License
versão 2. A sintaxe do jQuery foi desenvolvida para tornar
mais simples a navegação do documento HTML, a seleção
de elementos DOM, criar animações, manipular eventos e
desenvolver aplicações AJAX. A biblioteca também oferece a
possibilidade de criação de plugins sobre ela. Fazendo uso de
tais facilidades, os desenvolvedores podem criar camadas de
abstração para interações de mais baixo nível, simplificando
o desenvolvimento de aplicações web dinâmicas de grande
complexidade.
Fonte: http://pt.wikipedia.org/wiki/JQuery
É fácil encontrar bibliotecas Jquery disponíveis na internet para
diversos tipos de recursos que podem ser utilizados no site,
inclusive para a utilização de galeria de imagens e banner.
Clique nestes linques para experimentar um banner em jquery
89
Capítulo 7
www.nixonline.com.br/jquery.txt e jquery.rar. No primeiro arquivo
você entrará código que deverá ser inserido dentro da tab head
e da tag body, o segundo link contém os arquivos e pastas que
devem estar juntos do arquivo html.
Aplicar GoogleMaps
90
A localização da empresa no Google Maps é um recurso muito
utilizado para que o visitante possa saber como chegar na
empresa, caso a empresa esteja cadastrada no Google Maps
basta que digite o seu nome.
Para fazer a busca de um endereço acesse o site do Google
Maps através do linque https://www.google.com/maps.
Digite o endereço desejado na busca, caso clique no marcador
do endereço o resultado será como na Figura 7.1.
Figura 7.1
HTML
Para colocar o endereço no seu site, clique no ícone de corrente
que fica na parte superior esquerda e escolha a opção Copiar
HTML para incorporar no website (Figura 7.2).
91
Figura 7.2
HTML
Projeto Integrando o Site com
Redes Sociais
O objetivo deste projeto é incluir o banner e a integração com as
Redes Sociais.
93
1. Copie os arquivos da aula anterior e cole dentro de uma
nova pasta com o nome aula08.
2. O primeiro passo será criar o nosso banner usando a
biblioteca jquery, para isto acesse o arquivo http://nixonline.
com.br/downloads/jquery.txt. Coloque o código script antes
do fechamento da tag head, o do banner coloque logo após
a abertura da tag article e restante dentro do css. Salve os
arquivos.
3. Baixe os arquivos jquery.rar e coloque descompactado
dentro da pasta e teste o index nos navegadores.
4. Baixe o arquivo http://nixonline.com.br/downloads/twitter.txt
e cole logo após o título Twitter, faça as configurações para
o seu Twitter.
5. Baixe o arquivo http://nixonline.com.br/downloads/face.txt e
cole logo após o título Facebook, faça as configurações para
o seu Twitter. Salve os arquivos e teste nos navegadores.