Baixar o livro Pílula HTML

1ª Edição - Março 2014
Nenhuma parte deste livro pode ser u lizada ou
reproduzida sob quaisquer meios existentes sem autorização por
escrita do autor.
Marco Aurélio Lang - Todos os Direitos Reservados ©2014
Sobre o autor
Marco Aurélio Lang é publicitário, apaixonado por internet,
Bacharel em Comunicação Social e MBA em Marke ng e
Administração. Professor de web design no CNEC e de
desenvolvimento Web na Universidade do Site.
Sumário
Introdução
4
Conhecendo o Web design
5
Que diabos é HTML?
7
Tags HTML
10
Estrutura básica do HTML
12
Criando uma página
14
Marcações textuais
17
Hyperlinks
24
Comentários em HTML
31
Linhas horizontais
32
Listas em HTML
33
Imagens em HTML
36
Tabelas em HTML
40
Formulários em HTML
42
Elementos bloco e inline
44
Conclusão
47
Introdução
Decidi escrever este livro sobre HTML depois de procurar pela
Internet por um material em lingua portuguesa de qualidade sobre
o assunto para indicar aos alunos da Universidade do Site. O que
encontrei foi muita informação desconexa, desatualizada e escrita
em linguagem complexa demais.
A única alterna va que me restou foi dedicar dois meses
escrevendo um material que compila todas as principais marcações
(tags) HTML necessárias para dominar a linguagem.
Como tenho mais de 10 anos de experiência em web design,
para escrever um livro como este ve que me colocar no lugar dos
estudantes de desenvolvimento de sites e criar algo acessível e
rápido de assimilar, porém ao mesmo tempo completo.
Escrito totalmente em conformidade com as recomendações
da W3C para HTML5, apresento este material para todos
estudantes de web design, e me orgulho em dizer que é o livro que
melhor ensina HTML no menor tempo.
Bons estudos...
Marco Aurélio Lang
1
Conhecendo o Web design
O Web design é uma extensão da prá ca do design aplicada ao
desenvolvimento de sites e demais peças para a Internet. O
profissional que trabalha com esse po de design é conhecido
como web designer, e precisa dominar diversas disciplinas como a
arquitetura da informação, programação, ergonomia, usabilidade,
acessibilidade entre outros.
O webdesigner pode trabalhar como empregado em qualquer
empresa que tenha uma área de web, em uma agência digital, ou
ainda como freelancer, oferecendo seus serviços como profissional
autônomo.
A maioria do trabalho do webdesigner é desenvolvido em
HTML (estrutura), CSS (formatação es lís ca) e SCRIPTS
(comportamento). Existem normas técnicas de padronização para
cada um deles que são recomendadas pelo W3C, orgão esse
responsável pelos padrões de desenvolvimento para a internet.
Para criar sites o webdesigner precisa de um simples editor de
texto e algum programa para ilustrações, apesar de exis rem bons
so wares que auxiliam o desenvolvimento para web, como o
Dreamweaver, WYSIWYG Web Builder, Notepad++, etc.
Como você pode ver, a pessoa precisa dominar diversas
competências para se tornar um Webdesigner profissional e
cumprir com o principal obje vo do Web Design, que é tornar a
experiência do usuário do site a mais agradável e intui va possível.
5
Pílula HTML
1. Conhecendo o Web design
Web Design x Webdesigner
É comum ver as pessoas confundindo o nome da profissão
Webdesigner com o nome da técnica Web Design. Se você é - ou
deseja ser - um profissional da internet jamais pode cometer o
pecado de confundir esses dois termos.
 Web Design: área do design que desenvolve sites e demais
peças/aplicações para a Internet;
 Webdesigner: profissional que "faz" web design.
6
Pílula HTML
2
Que diabos é HTML?
O termo HTML é usado para abreviar a expressão HyperText
Markup Language, que significa Linguagem de Marcação de
Hipertexto, ou seja, é a “matéria prima” que cons tui os sites na
internet. São as marcações HTML que dizem ao browser como
exibir o documento ao internauta.
Essa linguagem pode ser interpretada pelos navegadores
(browsers) de formas diferentes, onde uma marcação não
reconhecida por determinado so ware simplesmente é ignorada,
resultando em diferenças na apresentação da página ao internauta.
Por esse mo vo que existe a necessidade de sempre que
desenvolvermos algo em HTML testarmos em diferentes
navegadores.
A World Wide Web Consor um (W3C) é uma organização
criada para manter as especificações do H T M L. Ela faz
recomendações tanto para web designers quanto para
desenvolvedores de so wares na tenta va de padronizar a
linguagem. Até o ano de 2006 a organização trabalhou em uma
nova linguagem que foi chamada de XHTML, que posteriormente
foi subs tuída pelo chamado HTML5, linguagem essa que tem
como principal caracterís ca uma sintaxe mais rigorosa e menos
ambígua para tornar o HTML mais simples de ser processado e
extendido.
“ Se quiser conhecer mais sobre a história do HTML, assista o vídeo:
h ps://www.youtube.com/watch?v=NSmapCNcSyI”
7
Pílula HTML
2. Que diabos é HTML?
Diferentes versões do HTML
A tabela a seguir mostra as diferentes versões do HTML
lançadas até hoje.
Versão do HTML
Ano
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.1
1999
XHTML
2000
HTML5
2012
Características do HTML
 Documentos HTML podem ser criados em qualquer editor
de texto (notepad, edit, etc...);
 Os documentos HTML não são compilados, seu código
sempre é visível e editável;
 Existem editores e conversores que automa zam grande
parte da escrita HTML;
 HTML não faz diferença entre maiúsculas e minúsculas, ou
seja, a notação <body> é equivalente a <BODY> ou
<bODy>. Porém segundo recomendações da W3C
devemos sempre usar as marcações em letras minúsculas.
8
Pílula HTML
2. Que diabos é HTML?
Glossário básico
A seguir alguns termos básicos do HTML que o webdesigner
precisa conhecer:
 Documento: é a unidade mínima da informação do
HTML, a página.
: é a unidade mínima da informação do HTML, a página.
 Elementos: são as diferentes partes do documento HTML,
por exemplo tulos, parágrafos, imagens, etc.
 Marcações: são as e quetas (tags) usadas geralmente em
duplas que formam os diferentes elementos. Ex: <p>;
 Tags: o mesmo que marcações;
 Atributos: configuram as tags com determinados valores.
Ex: <a href=”pagina2.html>, nesse caso href é o atributo.
 Browser: é o navegador usado pelos internautas para
renderizar os arquivos HTML. Por exemplo Google Chrome,
Internet Explorer, Firefox, Safari.
9
Pílula HTML
3
Tags HTML
O HTML tem como principal caracterís ca o uso de tags (ou
e quetas) para marcação dos elementos no documento.
Uma tag sempre começa com o símbolo “<”, seguida do nome
da marcação, e fechada com “>”. De modo geral as tags sempre são
usadas em pares para formar um elemento, sendo uma para iniciar
a marcação e outra para finalizá-la, esta úl ma caracterizada pelo
uso de uma barra “/” logo após sua abertura. Um exemplo é a tag
que inicia todo documento “<html>” e a que o finaliza “</html>”.
As tags podem ainda conter outras informações referentes a
atributos e valores do elemento, sempre com a finalidade de
modificar os resultados padrões que os elementos geram quando
renderizados pelo browser.
Outra caracterís ca das tags é que elas podem ser aninhadas
(podemos abrir tags dentro de tags). Inclusive a própria lógica de
um documento HTML consiste em um aninhamento de tags
(elementos).
10
Pílula HTML
3. Tags HTML
Exemplo de elemento simples
O exemplo a seguir mostra um parágrafo com o texto exemplo
na formatação mais básica do elemento <p>.
<p>Exemplo de parágrafo simples.</p>
Exemplo de elementos aninhados
O exemplo a seguir mostra o mesmo texto, porém com uma
das palavras em negrito, demonstrando um dos possíveis
aninhamento que podem ser feitos em HTML.
<p>Exemplo de <strong>parágrafo</strong> simples.</p>
11
Pílula HTML
4
Estrutura básica do HTML
A estrutura básica do HTML é o mínimo que um documento
deve ter para que o servidor e o browser consigam “entregar” o
conteúdo ao visitante. Ela consiste nas seguintes tags:
 <html>: inicia o documento HTML e indica ao browser que
todo conteúdo que vier depois dela deve ser tratado como
uma série de códigos HTML.
 <head>: define o cabeçalho de um documento HTML,
trazendo informações sobre o mesmo como tulo, ligações
de folhas de es lo, scripts, entre outros.
 <body>: onde são colocados os demais elementos que vão
compor a página, ou seja, é a área que ficará visível aos
visitantes da mesma.
Apesar de muitos browsers conseguirem renderizar páginas
sem essa estrutura básica, a presença dessas três tags é altamente
recomendada em qualquer documento HTML, jamais deixe de
u lizá-las.
12
Pílula HTML
4. Estrutura básica do HTML
Exemplo de estrutura básica do HTML
O exemplo a seguir mostra a estrutura básica que você precisa
usar para criar um documento HTML.
<html>
<head>
<title>Minha página</title>
</head>
<body>
<p>Exemplo de texto.</p>
</body>
</html>
Hora de praticar!
1. Abra o seu editor de texto (ex. Bloco de Notas do Windows);
2. Copie o código da estrutura básica do HTML nele;
3. Salve esse arquivo como index.html;
4. Localize o arquivo e abra-o no browser de sua preferência;
5. Pronto! Você acaba de criar sua primeira página em HTML.
13
Pílula HTML
5
Criando uma página
Um website é um conjunto de páginas em hipermídia sob um
mesmo domínio, portanto, para começar um site o primeiro passo
é criar a página inicial - também conhecida como homepage ou
simplesmente home – que servirá como uma espécie de índice para
o restante do site.
Para criar essa página inicial, acesse o editor de texto de sua
preferência e crie um arquivo novo chamado “index.html”. A
palavra index vem do inglês e significa índice, ou seja, será ela que
remeterá o visitante as demais páginas que compõem o site.
O index.html é o arquivo padrão a ser mostrado quando a URL
requisitada corresponde a uma pasta. Por exemplo, se o internauta
digitar “uol.com.br/esportes” o arquivo que será carregado será
provavelmente “uol.com.br/esportes/index.html”. Diz-se que é
provavelmente esse arquivo porque determinados servidores
podem aceitar outras nomenclaturas ou formatos, como
index.htm, index.php, default.htm, default.asp, etc.
Dica Quente!
A Dica Quente para quem esta começando a desenvolver sites
é sempre nomear o arquivo da homepage (primeira página do site)
como index.html.
14
Pílula HTML
5. Criando uma página
Colocando conteúdo em sua página
Começar a construção de uma página implica em escrever a
estrutura básica (mínima) do documento HTML, conforme visto
anteriormente. Abra um editor de texto qualquer (notepad, por
exemplo), e digite o código a seguir:
<html>
<head>
<title>Nome da sua página</title>
</head>
<body>
<p>Primeiro elemento que aparecerá na página</p>
</body>
</html>
Além das tags <html>, <head> e <body> das quais falamos
anteriormente, você pode ver no exemplo anterior:
 < tle>: Título do documento que aparecerá na Barra de
Título do browser do internauta. Como regra geral todo o
documento HTML precisa de um tulo que descreva em
pouquíssimas palavras o assunto do mesmo.
 <p>: Criação de um novo parágrafo no corpo da página.
Ambas as tags serão explicadas com maior profundidade
posteriormente, no momento você pode u lizá-las para começar a
montar sua primeira página de teste.
Dica Quente!
15
Jamais use acentos e espaços nos nomes de seus arquivos
HTML. A forma indicada é, por exemplo “pagina-colecao.html”.
Pílula HTML
5. Criando uma página
Testando sua página
O próximo passo é testar como o browser renderiza sua
página. Para tanto, vá até a pasta onde se encontra seu arquivo
index.html e no menu do botão direito do mouse selecione a opção
“Abrir com...” e selecione o browser de sua preferência.
No começo basta testar seu arquivo HTML em um único
navegador, porém conforme o documento for ficando mais
complexo é interessante renderizá-lo em outros browser. Os
principais sugeridos são:
Principais Browsers (navegadores) da atualidade
Google Chrome
Apple Safari
Mozilla Firefox
Opera
Internet Explorer
Apesar de atualmente o Chrome ser o líder absoluto no
ranking dos navegadores mais u lizados jamais devemos esquecernos dos demais browsers, principalmente em um mercado de
grande oscilação quanto esse, onde até poucos anos o Internet
Explorer da Microso reinava absoluto, porém foi superado por
outros so wares principalmente devido à baixa par cipação de
mercado em smartphones.
Conforme você for avançando no desenvolvimento de sites
16
verá o quão são importantes os diversos testes de desempenho do
site, não só em diferentes browsers como também em variadas
resoluções e disposi vos.
Pílula HTML
6
Marcações textuais
As marcações textuais, denominadas de tags para texto,
servem para montar os elementos que compõem o texto do
documento HTML, como parágrafos,
tulos, citações, entre
outros. O uso adequado das mesmas além de tornar o documento
mais compa vel com a linguagem o torna mais relevante perante
os buscadores como o Google e o Bing.
Dica Quente!
O melhor editor de arquivos HTML é o Notepad++, que pode
ser baixado gratuitamente pelo site h p://notepad-plusplus.org/download/. Esse mesmo programa será ú l também para
trabalhar com CSS, JavaScript, PHP e demais linguagens com as
quais você, como webdesigner, pode se deparar.
17
Pílula HTML
6. Marcações textuais
Heading Tags
As Heading tags também são conhecidas como Cabeçalhos e
servem para marcar tulos e sub tulos no documento HTML. É
comum a confusão entre a tag < tle> e as heading tags, pois
geralmente a tle tag é igual à primeira heading tag do texto. Vejo o
exemplo a seguir:
<html>
<head>
<title>Carros esportivos</title>
</head>
<body>
<h1>Carros esportivos</h1>
<p>Vamos falar sobre carros esportivos...</p>
</body>
</html>
O resultado desse código é:
< tle>
<h1>
18
Pílula HTML
6. Marcações textuais
O HTML possui 6 níveis dis ntos de heading tags, sendo o
número 1 o de maior destaque até chegar ao 6, que é o Cabeçalho
de menor destaque. É fundamental manter a hierarquia deste po
de tags abrindo sempre o próximo nível sem pular etapas:
Uso Correto
Uso Incorreto
<h1>Cabeçalho1</h1>
<h2> Cabeçalho2</h2>
<h3> Cabeçalho3</h3>
<h4> Cabeçalho4</h4>
<h1>Cabeçalho1</h1>
<h3> Cabeçalho3</h3>
<h4> Cabeçalho4</h4>
<h5> Cabeçalho2</h5>
Note que no exemplo incorreto anterior a tag <h3> está aberta
sem que exista uma tag <h2>, subvertendo a ordem crescente de
tulos.
A seguir os diferentes níveis de heading tags e sua
renderização padrão nos browsers.
HTML
No Browser
<h1>Cabeçalho 1</h1>
Cabeçalho 1
<h2>Cabeçalho 2</h2>
Cabeçalho 2
<h3>Cabeçalho 3</h3>
Cabeçalho 3
<h4>Cabeçalho 4</h4>
Cabeçalho 4
<h5>Cabeçalho 5</h5>
Cabeçalho 5
<h6>Cabeçalho 6</h6>
Cabeçalho 6
19
Pílula HTML
6. Marcações textuais
Parágrafos
Como o HTML não reconhece os caracteres de quebra de linha
dos editores de texto é necessário usar a marcação <p> para criar
um novo parágrafo.
<p>Texto que aparecerá no primeiro parágrafo.</p>
<p>Segundo parágrafo aberto.</p>
<p>Terceiro e último parágrafo do texto.</p>
O código anterior monta 3 pequenos parágrafos na sequência,
deixando uma linha em branco entre eles.
Quebra de linha
A tag “<br>” serve para fazer a quebra de linha forçada, que
não deve ser confundida com a criação de um novo parágrafo que
além de quebrar a linha também adiciona um espaço em branco
entre os parágrafos. Veja a diferença no código a seguir.
<h1>Tag P</h1>
<p>Diferença usando a tag P.</p>
<p>Observe o espaço entre os parágrafos.</p>
<h1>Tag BR</h1>
<p>Exemplo de uso do BR.<br>Observe o espaço entre as
linhas.</p>
A seguir compare os resultados:
20
Pílula HTML
6. Marcações textuais
Formatação básica de texto
O HTML possui tags específicas para fazer marcações de
formatação em textos. A forma de marcação é a mesma de
qualquer outro elemento, onde o trecho formatado deve aparecer
entre o par de tags da formatação: <tag de formatação>Texto a ser
formatado</tag de formatação>.
 <b>: negrito – prefira sempre usar <strong>;
 <i>: itálico, usado para mudar a “voz” na oração - prefira
sempre usar <em>;
 <small>: define um texto menor;
 <strong>: define texto importante, renderizado como
negrito;
 <em>: define texto importante, renderizado como itálico.
 <sub>: subscrito;
 <sup>: sobrescrito;
 <del>: riscado – usado para mostrar que algo foi apagado;
 <mark>: destacado.
Dica Quente!
A esta altura dos estudos você deve estar se perguntando
sobre como mudar o tamanho da letra, a cor, o alinhamento, etc.
Isso tudo não é feito diretamente com HTML, e sim via CSS, assunto
esse que você encontrará em abundância no site
h p://universidadedosite.com.br/.
21
Pílula HTML
6. Marcações textuais
Observe os exemplos no código a seguir.
<p><strong>Texto em negrito.</strong></p>
<p><em>Texto em itálico.</em></p>
<p><small>Texto pequeno.</small></p>
<p><strong>Texto importante.</strong></p>
<p><b>Texto <sub>subscrito</sub> e outro
<sup>sobrescrito.</sup></b></p>
<p><del>Texto apagado.</del></p>
<p><mark>Texto destacado.</mark></p>
Veja o resultado:
Essa formatação básica serve para estruturar as informações
no texto de seu HTML, muito usada como técnica de SEO
(o mização de sites para buscas). Como é possível ver a formatação
é bastante básica e até parecida – como no caso do <b> e do
<strong> - porém a formatação es lís ca destes elementos pode
ser alterada através de CSS, trabalho esse de competência do
webdesigner.
22
Pílula HTML
6. Marcações textuais
Citações
Uma importante marcação textual em HTML são as citações,
usadas para apresentar trechos de texto de outros autores. Elas
podem ser de dois pos:
 <q>: citação curta dentro da linha do parágrafo;
 <blockquote>: citação longa.
Observe a diferença no exemplo a seguir.
<p>Exemplo do uso de uma <q>citação curta dentro</q> de
um parágrafo.</p>
<blockquote>Já as citações longas, com várias linhas
devem ser colocadas entre a tag blockquote. Note que
nesta caso não abrimos um novo parágrafo, pois o
blockquote em sí já se caracteriza como um. Repare
também na tabulação deste tipo de citação.</blockquote>
O resultado é o seguinte:
Note que no caso de citações curtas colocamos a tag <q>
dentro do <p>, já nas longas não abrimos um novo parágrafo, pois o
<blockquote> em si já se caracteriza como um. Repare também na
tabulação deste po de citação.
23
Pílula HTML
7
Hyperlinks
Como mencionado anteriormente, o termo HTML é o usado
para abreviar a expressão HyperText Markup Language, que em
português significa Linguagem de Marcação de Hipertexto. O
grande trunfo desses hipertextos escritos em HTML está na sua
capacidade de criar ligações (links) a outras partes desse
documento ou a outro documento.
Sempre que você clica em algum “botão” em um site – ou
outra área qualquer de texto destacado clicável - na verdade está
a vando um desses hyperlinks que vão remetê-lo a outro
documento ou arquivo de forma facilitada, tornando a localização
de conteúdos mais rápida.
24
Pílula HTML
7. Hyperlinks
Criando um link simples
Um link (abreviação muito u lizada para se referir ao
hyperlink) é criado com a marcação denominada âncora, aplicada
com a tag “<a>”.
A tag <a> é sempre composta, ou seja, precisa de outros
atributos e valores para funcionar. O principal – e indispensável – é
o href que especificará o documento que será ligado através do link.
Por exemplo:
<a href=”contato.html ">Fale Conosco</a>
A tag <a> é composta pelo href, seguida do sinal matemá co
de “=” e do nome do documento entre aspas duplas.
Posteriormente, segue o texto âncora que aparecerá para o
internauta clicar, e finalmente fecha com a tag </a> que diz ao
browser que aquele elemento link termina ali.
Dica Quente!
Jamais crie links usando todo o caminho do arquivo, por
exemplo “C:/meu-site/produtos.html”. Use somente o nome do
arquivo e da pasta a par r do ponto de par da de seu arquivo.
Digamos que você queira abrir o arquivo produtos.html que está na
mesma pasta “meu-site”, faça o link assim: “produtos.html”.
25
Pílula HTML
7. Hyperlinks
Criando um link em diretório diferente
O processo de fazer ligações entre documento HTML ou
demais arquivos que estão em diretórios diferentes é o mesmo,
basta adicionar ao href o caminho completo para onde o link deve
apontar. Exemplo:
<a href="produtos/camisetas.html ">Camisetas</a>
Agora imagine que dentro do documento Camisetas você
queira criar um link para retornar ao seu index.html, que se
encontra na raiz do site. Se você montar o link chamando
diretamente o documento através da href=”index.html" o link
“quebrará”, pois o index.html se encontra em uma pasta abaixo da
camisetas.html, que é a que você esta acessando. Para resolver o
problema você deve voltar um nível de pastas usando “../”, como no
exemplo a seguir:
<a href="../index.html">Homepage</a>
Dica Quente!
Apesar de na criação de um link para determinada pasta não
ser necessário o uso da barra “/” no final, é aconselhado usá-la, pois
a não u lização da mesma faz a requisição em duplicidade ao
servidor, deixando tanto o site um pouco mais lento quanto o
próprio servidor de hospedagem. Confira o exemplo a seguir:
 Link para pasta correto: <a href=" leite/">
26
 Link para pasta incorreto: <a href=" leite">
Pílula HTML
7. Hyperlinks
Criando um link com URL
Na web os endereços que digitamos no browser para acessar
determinado arquivo ou documento são chamados de URL como,
por exemplo, “h p://www.maujor.com/dicas/deprecated.php”.
É comum fazermos ligações usando URL's pelo fato de muitos
links em nossos documentos HTML apontarem para outros sites. O
processo de criação desses hyperlinks é muito parecido com os
links internos:
<a href=" http://www.uol.com/dicas/">HTML Dicas</a>
Criando um link para seção específica
Pode ser bastante ú l para o internauta pular para
determinadas seções de um documento sem precisar passar pelo
conteúdo como um todo. Para isso an gamente era usada a named
anchor, ou âncora em português.
Nas novas versões do HTML ela foi subs tuída pelo atributo
“id”, que torna a criação de links para seções muito mais intui va.
O primeiro passo é criar o link que aponta para a seção
específica, que pode inclusive estar no mesmo documento HTML,
como é o caso do exemplo a seguir:
<a href=" #cachorro">Cachorro </a>
27
Pílula HTML
7. Hyperlinks
O código anterior monta a ligação (note o uso do símbolo “#”),
enquanto que a seguir é definida a seção para onde o link apontará:
<h2 id=”cachorro”>Cachorro</h2>
O resultado disso é que quando o internauta clicar no link
Cachorro ele será direcionado para a seção Cachorro dentro do
mesmo documento, que foi marcada com o atributo “id”.
Digamos que a seção cachorro esteja em outro documento,
basta adicionar o caminho completo no link e definir o atributo “id”
na seção do documento des no:
<a href="animais.html#cachorro">Cachorro</a>
O internauta é direcionado para a seção Cachorro que se
encontra dentro do documento animais.html.
Criando um link com URL
Apesar de exis rem formas melhores de o visitante manter
contato com o site, como um formulário de e-mail, por exemplo, o
link “mailto” pode ser ú l em caso de não dispormos de um script
para contato.
<a href="mailto:[email protected]">Envie
um e‐mail para nós.</a>
Esse link quando clicado abrirá o cliente de e-mail (ex.:
Outlook) padrão do usuário, já com o des natário preenchido.
28
Pílula HTML
7. Hyperlinks
Principais atributos da tag <a>
Como visto anteriormente, a tag “<a>” é sempre composta, ou
seja, precisa de outros atributos para funcionar. Conheça os
principais:
 href: especifica o des no do link para qual o internauta será
reme do quando clicar;

tle: uma breve descrição sobre o documento para o qual o
link aponta que aparecerá quando o visitante colocar o
ponteiro do mouse sobre o mesmo sem clica-lo.
 target: define o alvo onde o documento será aberto, que
pode ser uma determinada janela ou frame. Os principais
são: “_blank”, que abre o documento em uma nova janela;
e “_self”, abre no mesmo frame, caso você u lize esse po
de recurso – o que não é recomendado.
Confira a seguir um exemplo de marcação <a> que abre um
arquivo PDF em uma nova janela:
<a href="imposto‐de‐renda.pdf" title="Formulário de
preenchimento para declaração do IR."
target="_blank">Imposto de Renda</a>
29
Pílula HTML
7. Hyperlinks
O atributo target foi eliminado no XHTML, porém voltou a ser
recomendado no HTML5, devido a sua grande u lidade. U lize-o
sempre de forma moderada e inteligente, evitando definir a
abertura de muitos links em novas janelas, pois isso irrita o
internauta. Quanto ao atributo tle, a recomendação é sempre
usá-lo pois além de ser uma importante técnica SEO facilita a
navegação.
Dica Quente!
Tenha sempre em mente que independente do po de link
que você quiser criar, a estrutura é sempre a mesma:
<a href=”caminho+nome do arquivo+extensão”>Texto
âncora</a>
Hora de praticar!
Hyperlinks são uma das tags HTML que mais confundem os
estudantes, por isso é tão importante você pra car.
1. Crie um documento HTML e salve como index.html;
2. Dentro da pasta onde esta o index.html, crie outra pasta
chamada arquivos;
3. Na pasta arquivos crie outro documento HTML chamado
segundo.html;
4. No index.html crie um link para o segundo.html, e vice-eversa.
30
Esse exercício vai ensiná-lo a linkar páginas em diferentes
diretórios.
Pílula HTML
8
Comentários em HTML
As tags de comentário “<!--" e “ -->” são u lizadas para fazer
observações e apontamentos no código fonte do HTML. Sua
principal caracterís ca é não ficar visível para o visitante na
renderização do browser, porém aparecer sempre que o código
fonte é acessado.
Usar tags de comentário facilita o desenvolvimento do site,
principalmente se o código for muito extenso ou desenvolvido por
uma equipe, pois nesse caso um desenvolvedor pode deixar
observações para os demais envolvidos no projeto. Veja o exemplo
a seguir:
<html>
<head>
<title>Carros esportivos</title> <!‐‐esse título
precisa ser melhorado ‐‐>
</head>
<body>
<h1>Carros esportivos</h1>
<p>Vamos falar sobre carros esportivos...</p>
</body>
</html>
Veja que o desenvolvedor deixou um lembrete no código
alertando sobre uma melhoria necessária no documento.
31
Pílula HTML
9
Linhas horizontais
Existe uma tag HTML específica para a criação de linhas
horizontais no documento: <hr>. Essa marcação é bastante ú l
para a criação de um separador visual simples de conteúdo para as
versões até HTML 4.1. Já para HTML5 ela ganha ainda mais
relevância, pois serve para marcar a quebra de tema no
documento.
Sua principal caracterís ca é a não necessidade de
fechamento, como é possível ver no exemplo a seguir.
<p>Meu primeiro parágrafo.</p>
<hr>
<p>Segundo parágrafo.</p>
Note que o <hr> não necessita de </hr> para que o
complemento seja renderizado corretamente pelo navegador.
<hr>
32
Pílula HTML
10
Listas em HTML
O uso de listas em HTML facilita muito a criação de tópicos,
sejam eles numerados ou não. Ao invés de usar o famigerado
marcador “*” ou números seguidos de pontos, em documentos
HTML u liza-se “<ul>“ para listas não ordenadas e “<ol>“ para
listas ordenadas (numeradas).
Lista não ordenada
Lista ordenada
Dentro de qualquer item de lista é possível colocar - além de
texto – imagens, links, citações, etc., inclusive outras listas.
Dica Quente!
Pessoas gostam de listas, diversas pesquisas de marke ng
comprovam isso. U lize este recurso HTML para criar conteúdo
como “Dicas úteis para...” ou “As 7 técnicas...”.
33
Pílula HTML
10. Listas em HTML
Uso de listas não ordenadas <ul>
Uma lista não ordenada sempre começa com a tag “<ul>”, e
seus itens ficam entre a marcação <li>, como no exemplo a seguir:
<ul>
<li>Fiat</li>
<li>Ford</li>
<li>Chevrolet</li>
</ul>
Veja a seguir o exemplo de lista não ordenada que o código
gera:
Hora de praticar!
1. Crie um documento HTML, sempre usando a estruturá
básica completa;
2. Nele crie um lista ordenada e logo abaixo uma não
ordenada;
34
3. Abra no browser e compare os resultados.
Pílula HTML
10. Listas em HTML
Uso de listas ordenadas <ol>
As listas ordenadas (ou numeradas) são criadas com a
marcação “<ol>”, seguida dos itens colocados entre a tag <li>:
<ol>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ol>
A seguir como a lista ordenada aparece no browser para o
internauta:
Como padrão as listas ordenadas sempre são renderizadas
pelos browsers em uma sequência numérica (1... 2... 3...). Porém
através de es lização CSS é possível alterar essa formatação, assim
como a formatação das listas não ordenadas.
35
Pílula HTML
11
Imagens em HTML
A máxima “uma imagem vale mais que mil palavras” se aplica
perfeitamente a importância das imagens para as páginas da
Internet.
Diferente das imagens colocadas em um documento do Word,
por exemplo, onde as mesmas são inseridas no arquivo do
documento, no caso do HTML elas apenas são “chamadas” para
determinado espaço reservado a elas. Por exemplo, se você criar
um documento HTML com 5 imagens, seis requisições diferentes
de arquivos serão feitas ao servidor – 1 do arquivo HTML e 5 das
imagens. Portanto cuidado com o uso em excesso desse po de
recurso, sob pena de ter uma página lenta.
Para inserir imagens em um documento HTML é necessário
usar a tag “<img>”, sempre acompanhada do atributo “src”, que é
uma abreviação da palavra inglesa source (fonte). No atributo src
é colocado o caminho de sua imagem, como no exemplo a seguir:
<img src="imagens/logo.png">
O código acima exibe a imagem “logo.png” que se encontra
dentro do diretório “imagens” do site. Note como a tag <img> não
precisa de fechamento “/”.
36
Pílula HTML
11. Imagens em HTML
Atributo ALT da tag <img>
O atributo “alt” da tag para imagens serve para especificar um
texto (curto) alterna vo caso a imagem por alguma razão não possa
ser mostrada ao visitante da página. Ela serve também como um
texto âncora que dirá para os motores de busca (Google, Bing...)
qual o conteúdo gráfico daquela imagem.
A seguir um exemplo de atributo alt sendo mostrado pelo
browser porque a imagem “quebrou”:
imagem
com ALT
imagem
quebrada
sem ALT
imagem
quebrada
sem ALT
Apesar de não ser um atributo obrigatório e geralmente não
visível para a maioria dos visitantes, é altamente recomendável
u lizá-lo. Para você ter uma ideia da importância de criar bons alt's
que descrevam a imagem, os internautas com deficiência visual
que usam um navegador apropriado (como Jaws e Orca) ouvem a
narração do texto âncora, já que não podem ver a imagem.
37
Pílula HTML
11. Imagens em HTML
Atributos HEIGHT e WIDTH da <img>
O atributo “height” é u lizado para especificar a altura da
imagem, enquanto o “width” especifica seu comprimento. Apesar
de poder ser definido em porcentagem, por padrão ambos os
valores são em pixels, como no exemplo a seguir:
<img src="imagens/logo.png" alt=”Logomarca colorida da
empresa X.” width="55" height="55">
Já em porcentagem é necessário fazer uso do símbolo “%”:
<img src="imagens/logo.png" alt=”Logomarca colorida da
empresa X.” width="35%" height="35%">
No exemplo acima a imagem ocupa 35% - tanto na largura
quanto no comprimento – do espaço disponível para ela.
Dica Quente!
O uso dos atributos height e width não é obrigatório, porém é
recomendado pela W3C, pois define na rendeziração o espaço que
o browser deve deixar para a imagem antes mesmo de carregá-la. O
efeito de não especificar esse valores será da página ir mudando
conforme as imagens forem sendo carregadas.
38
Pílula HTML
11. Imagens em HTML
Imagens recomendadas para sites
As extensões de imagens recomendadas para uso em sites são
Gif, Jpeg (Jpg) e Png, pois são reconhecidas e bem renderizadas em
todos os browsers.
É comum ouvir a pergunta “qual o melhor formato de imagens
para a internet?”. A resposta é sempre a mesma: o melhor formato
é aquele que gera a melhor relação qualidade x tamanho. Quando
for exportar seu arquivo para usar em um site, teste em Gif, Jpg e
Png e veja qual opção traz a maior riqueza em detalhes e cores com
o menor tamanho em Kb possível.
Formato
GIF (extensão .gif)
PNG (extensão .png)
JPEG (extensão .jpg
ou .jpeg)
Melhor uso
Para imagens com pouquíssimas cores e sem
detalhes muito pequenos, desenhos simples,
vetores exportados e qualquer outro po de
imagem sem gradientes. Esse po de arquivo é
bastante usado para animações e imagens com
fundo transparente.
A limitação do PNG quanto a cores é menor que
em arquivos GIF, com a vantagem ainda da
possibilidade do uso de fundos transparentes
com maior qualidade. Por esse mo vo a grande
maioria dos web designers atualmente migrou do
uso do GIF para PNG.
Melhor opção no caso de imagens complexas
com muitas cores, como é o caso das fotografias.
Como regra geral você pode usar o critério de optar sempre
por Jpeg para fotos e demais imagens com muitas cores e PNG para
todo o restante. Quanto ao Gif, atualmente é u lizado na maioria
39
das vezes para fazer imagens animadas.
Pílula HTML
12
Tabelas em HTML
Por muito tempo as tabelas foram u lizadas por webdesigners
para criação de layouts e formas es lís cas, porém isso não é mais
considerado correto nas atuais versões do HTML. As tabelas devem
ser u lizadas somente para estruturar dados em linhas e colunas.
No design do layout o desenvolvedor deve fazer o uso da tag
“<div>” que será abordada posteriormente.
Para criar uma tabela é necessário aninhar diversas tags
diferentes. A marcação que abre uma tabela é “<table>”, seguida
da divisão por linhas feita com “<tr>” e da criação de células com
“<td>”. Observando o exemplo a seguir fica mais fácil de entender:
<table border="1" >
<tr>
<td>Fiat</td>
<td>Bravo</td>
<td>1.8</td>
</tr>
<tr>
<td>Ford</td>
<td>Focus</td>
<td>2.0</td>
</tr>
</table>
Note que no exemplo acima usamos o atributo “border” que
será abordado mais tarde. O resultado desse código pode ser
visualizado a seguir:
40
Pílula HTML
12. Tabelas em HTML
Caso queira criar um cabeçalho para as colunas de sua tabela,
u lize a tag “<th>” ao invés de “<td>” para abrir a célula. Confira no
exemplo a seguir:
<table border="1" >
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Motorização</th>
</tr>
<tr>
<td>Fiat</td>
<td>Bravo</td>
<td>1.8</td>
</tr>
<tr>
<td>Ford</td>
<td>Focus</td>
<td>2.0</td>
</tr>
</table>
Veja o resultado:
<th>
<td>
Quanto às configurações es lís cas de tabelas em HTML, elas
devem ser feitas através de CSS.
Tabelas complexas em HTML5
O HTML5 possui uma semân ca completa para a criação de
tabelas complexas com tags como “<cap on>”, “<tbody>”,
“<thead>”, “< oot>”, entre outros. Como o uso de tabelas
41
complexas é pequeno para a maioria dos webdesigners optamos
por deixar fora do livro essas tags.
Pílula HTML
13
Formulários em HTML
Os formulários - ou simplesmente “forms” – são uma forma de
transferir dados do internauta para o servidor através do
documento HTML. Os forms HTML podem conter diversos
elementos diferentes para coletar dados, como campos de texto,
botões, checkboxes entre outros.
A tag que abre o formulário é sempre “<form>”, e precisa de
atributos como ac on e method para direcionar os dados que
geralmente são tratados por algum script. Veja o exemplo a seguir:
<form action="login.php" method="get">
Usuário: <input type="text" name="usuario">
<input type="submit" value="Enviar">
</form>
No browser este código será renderizado como:
Dica Quente!
Sempre que precisar criar um form mail em seu site consulte
sua hospedagem. A grande maioria dispõem de scripts prontos já
instalados para você usar.
42
Pílula HTML
13. Formulários em HTML
Como abordado anteriormente, existem diversos elementos
diferentes para coletar dados com um formulário. Observe os
principais no código a seguir:
<form>
Nome: <input type="text" name="nome"><br>
<input type="radio" name="sexo"
value="male">Masculino<br>
<input type="radio" name="sexo"
value="female">Feminino<br>
<input type="checkbox" name="concordar"
value="concordo">Concordo com as regras.<br>
<input type="submit" value="Enviar">
</form>
O código anterior renderiza no navegador da seguinte forma:
43
Pílula HTML
14
Elementos bloco e inline
Os elementos de um documento HTML podem ser divididos
como elementos bloco e elementos inline.
 Bloco: os elementos bloco quando renderizados pelo
browser são como padrão colocados em uma “nova linha”.
Alguns exemplos desses pos de elementos são <h1>, <p>,
<table>, <blockquote>;
 Inline: esses elementos como padrão são apresentados
pelo navegador sem que ele crie uma nova linha. Exemplos:
<strong>, <a>, <img>.
Div’s e Span’s
As tags “<div>” e “<span>” são usadas para criar elementos
que servirão como uma espécie de container para agrupamento de
outros elementos e textos HTML. O principal uso dessas duas tags
para o webdesigner tem cunho es lís co, ou seja, elas basicamente
servem para montar o layout e iden dade visual da página.
A figura acima mostra como o <span> não quebra linha e como
o <div> sempre quebra a linha quando criado.
44
Pílula HTML
14. Elementos bloco e inline
Elemento Div
A tag “<div>” é um elemento bloco usado para agrupar outros
elementos. Por si só, seu uso não produz grandes resultados
esté cos no browser, a não ser uma quebra de linha antes de sua
abertura e outra logo após. Em compensação quando combinado
com CSS se torna um dos elementos mais poderosos do
webdesigner, u lizado principalmente para montar o layout,
subs tuindo o an go uso da “<table>” para o mesmo fim.
No exemplo a seguir você pode ver duas Div's diferentes
separando o conteúdo de uma página.
<div> <!‐‐abre 1ª DIV ‐‐>
<h2>Esportes</h2>
<p>Manchete 1</p>
<p>Manchete 2</p>
<p>Manchete 3</p>
</div> <!‐‐fecha 1ª DIV ‐‐>
<div> <!‐‐abre 2ª DIV ‐‐>
<h2>Policial</h2>
<p>Manchete 1</p>
<p>Manchete 2</p>
<p>Manchete 3</p>
</div> <!‐‐fecha 2ª DIV ‐‐>
Com CSS você poderá, por exemplo, posicionar a Div das
no cias sobre esportes no canto direito da tela, e as no cias
policiais no esquerdo.
45
Pílula HTML
14. Elementos bloco e inline
Elemento Span
O uso do “<span>” em HTML é muito parecido com o da tag
“<div>”, ou seja, serve para “envolver” elementos porém de forma
inline, ou seja, sem quebra de linha.
O principal uso desta tag HTML é es lizar um determinado
trecho de texto ou mudar seu comportamento via JavaScript.
<p>Exemplo do uso da tag span como <span>container
inline</span>em um parágrafo.</p>
Sozinha a marcação “<span>” não produz efeito visual
nenhum, porém combinada com CSS é uma importante tag para o
web design.
Dica Quente!
Faça o download gratuito do infográfico contendo um resumo
de todas as tags HTML que você aprendeu neste livro, clique no
link: h p://universidadedosite.com.br/principais-tags-htmlinfografico/
46
Pílula HTML
Conclusão
Aprender a linguagem HTML é o primeiro passo que a pessoa
deve dar se quiser se tornar um webdesigner, porém desenvolver
um site completo exige além do conhecimento em HTML o
domínio de CSS e o mínimo conhecimento de JavaScript.
Agora que você já estudou todo conteúdo desta apos la tem
duas opções:
1. Aprofundar-se mais no HTML estudando novas marcações
do HTML5 como <address>, <video>, <audio>, <header>, entre
outros;
2. Seguir em frente e começar a estudar CSS (Cascading Style
Sheets) para aprender a formatar es lis camente suas páginas.
Eu, par cularmente, torço para que você escolha a opção 2 e
comece o quanto antes possível a estudar CSS. Não que não seja
importante se aprofundar no HTML, e sim pelo fato de que você já
conhece o essencial da linguagem que será necessário para
desenvolver 95% dos sites. Caso precise usar alguma tag que não
domine em determinado projeto, você terá sempre disponível os
sites da Universidade do Site e W3CSchools para consulta.
Caso tenha alguma dúvida ou queira somente manter contato,
procure-me no site da Universidade do Site. Ficarei feliz em ter você
em nossa lista de e-mails.
Um forte abraço, e muito sucesso!
Marco Aurélio Lang
47
Pílula HTML
Par cipe da lista de e-mails da Universidade do Site e fique
por dentro das úl mas novidades do mercado de
empreendedorismo digital e desenvolvimento para Internet.
www.universidadedosite.com.br/lista
Nenhuma parte deste livro pode ser u lizada ou
reproduzida sob quaisquer meios existentes sem autorização por
escrita do autor.
Marco Aurélio Lang - Todos os Direitos Reservados ©2014