Este artigo trata de uma
introdução ao HTML.
O HTML é uma abreviação de HyperText Markup Language ou seja que em
português significa, Linguagem de marcação de Hipertexto. Os arquivos
HTML são interpretados pelos navegadores (browsers), portanto, caso você
tenha algum arquivo HTML no computador, basta pedir que o seu navegador
abra ele.
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:
1
|
<tag>Conteúdo da tag</tag>
|
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
1
2
3
|
<tag>
<outraTag>texto</outraTag>
</tag>
|
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.
1
|
<img src="caminhoImg.jpg" />
|
É importante seguir alguns padrões ao criar seu arquivo HTML.
- Primeiramente tente sempre que possível usar as letras em caixa baixa, ou seja, todas em minúsculo.
- Nesse artigo irei abordar somente o
HTML.
Antigamente os desenvolvedores personalizavam a aparência da página no
próprio HTML, porém atualmente estamos fazendo isso pelo arquivo CSS.
Portanto, caso gostem desse artigo, posso escrever um sobre
CSS básico para personalizar uma página HTML
- O comentário em HTML é feito da seguinte maneira <!–Comentário a seguir –>
- Tente manter seu documento indentado para facilitar a manutenção.
Uma tabulação com 2-4 espaços é o suficiente para ajudar na endentação
do documento.
Ex:
1
2
3
|
<tag>
<outraTag />
</tag>
|
- Evitem de colocar elementos redundantes no código. Um uso comum é o
de <br /> para pular linhas e definir uma altura para um
elemento, enquanto o correto seria definir a altura através do Css.
- Uma página HTML tem a extensão .html, porém elas podem ser geradas
dinamicamente com alguma linguagem com o PHP, ASP, PYTHON… Então em
alguns casos essa extensão é alterada para a extensão da linguagem
utilizada para gerar a página HTML.
Quais editores HTML usar.
Para escrever
código HTML basta um simples editor de texto como o bloco de notas
(notepad). Porém eu recomendo editores mais robustos para facilitar um
pouco sua vida. Os principais são es seguintes:
-
Sublime Text 2: Considero o melhor editor atualmente.
Experimente usar a extensão Zen Coding em conjunto com ele e experimente
o máximo da performance ao criar seus arquivos HTML.
-
Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também.
-
Dreamweaver: Um excelente editor para iniciantes. Cuidado
com o modo Design. Evite de editar seu HTML por ele pois ele não gera um
código muito semântico.
Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.
HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu
fim. Logo deve ser aberta no início do documento e fechado no seu
final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar
visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<html>
<head>
<!--conteudo do head-->
</head>
<body>
<!--conteudo do body-->
</body>
</html>
|
O <!DOCTYPE html> inserido antes da tag <html> no exemplo
anterior é para especificar para o navegador o tipo de página HTML que
ele vai renderizar. Existem diferentes tipos de HTML usados atualmente
porém os mais usados são o HTML 5, cujo doctype especificado é o que eu
utilizei no exemplo, o HTML 4.1 e o XHTML. Nos últimos dois exemplos o
doctype é um pouco mais complexo, trazendo informações sobre o tipo de
documento (Strict, transitional e frameset). Porém recomendo que sempre
utilizem o doctype do HTML 5, pois ele é mais enxuto e mesmo que não
utilize HTML 5 em sua página não vai prejudicar em nada a renderização
da página pelo browser.
Cabeçalho <head>
No cabeçalho trazemos informações que serão usadas pelo navegador como:
TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
LINK – <link href="" type="" media="" rel="" />
Geralmente usado para selecionar arquivo externo no HTML. Um uso comum
dele é para selecionar arquivos CSS (responsáveis por definir a
aparência da sua página para o usuário final).
Ex:
1
|
<link href="estilo.css" type="text/css" media="screen" rel="stylesheet" />
|
Nessa linha, definimos que arquivo a ser utilizado na página é do tipo
CSS, para ser renderizado em telas (Monitores, TV's, smartphones…)
METATAGS – code><meta name="" content="" />
Metatags
tem uma infinidade de funções que não irei citar aqui, porém nesse link
existem mais informações sobre todas elas,
http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.
Atualmente só costumo utilizar duas. Uma para referenciar para os
buscadores um breve resumo sobre a página, chamada DESCRIPTION. O seu
uso é basicamente da seguinte forma:
<meta name="description" content="Aqui entra o resumo sobre a
página. É recomendável que você não ultrapasse 160 caracteres nesse
texto" />
E a metatag CHARSET. Com ela você define que tipo de codificação que o
seu texto vai usar ao ser renderizado pelo navegador. Recomendo
utilizar o utf-8 mesmo. Porém existem casos onde é preciso usar uma
diferente. Existem duas formas de usar o charset. Uma para HTML 5 e uma
para os demais. Seguem os exemplos:
HTML 5: <code><meta charset="utf-8" /></code>
Demais: <code><meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /></code>
Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.
Existe ainda a tag <script> que é chamada no cabeçalho por
alguns desenvolvedores, porém, prefiro chama-la no final do <body>
para não atrapalhar no carregamento dos demais componentes de suas
página.
Segue uma exemplo de um cabeçalho:
1
2
3
4
5
6
7
|
<!doctype html>
<head>
<title>Título da página</title>
<meta charset="utf-8" />
<meta name="description" content="Breve resumo sobre o conteúdo desta página" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
|
Corpo da página – <body>
Dentro da tag <body> é que vão entrar todos os elementos que
ficarão visíveis aos usuários. As tags usadas dentro do body podem ser
divididas em inline e block. Tags inline são tags que mantem o fluxo
comum do conteúdo e tags block quebram o fluxo e geram o elemento abaixo
do último block. Você pode usar uma tag inline dentro de uma block, mas
não pode usar uma block dentro de uma inline por questões de semântica.
Vou agrupa as principais tags e explicar o seu funcionamento:
<h1></h1>– O H1 é utilizado para marcar um título.
Você pode utilizar diversos níveis de relevância, para isso basta mudar
o número na tag. As heading tags como são chamadas, vão de 1 á 6. Ou
seja, você pode ter um
<h1></h1> <h2></h2> … <h6></h6>.
É recomendável por questões de otimização e semântica que você utilize
apenas um <h1>, que seria o título da página como um todo, e que
posicione ele o quanto antes no <body>. Porém as demais tags de
título podem ser usadas conforme a necessidade.
Ex:
1
|
<h1>Sou um título relevante</h1>
|
<p></p>– O P é utilizado para definir um parágrafo.
Ex:
1
|
<p>Sou um elemento de parágrafo</p>
|
<span></span>– SPAN é uma tag inline usada para
marcar um trecho de texto. Ele é frequentemente usado para personalizar
um trecho de texto em um paragráfo via css, já que naturalmente não
altera nada no HTML.
Ex:
1
|
<p>Sou um<span>pequeno parágrafo</span></p>
|
<Strong></Strong>– O STRONG é utilizado para
deixar um texto em negrito. A tag <b></b> tem um
comportamento semelhante porém a W3C recomenda utilizar o
<Strong>.
Ex:
1
|
<p>O trecho a seguir está em<b>negrito</b></p>
|
<em></em>– A tag EM é utilizada para deixar um
elemento em itálico. A tag <i> foi utilizada durante muito tempo
para isso porém a W3C recomenda que utilize o <em> mesmo.
Ex:
1
|
<p>O trecho a seguir está em<em>itálico</em></p>
|
<u></u>– A tag U é usada para sublinhar um termo.
Ex:
1
|
<p>Pequeno texto com trecho<u>sublinhado</u></p>
|
<br />– A tag BR é utilizada para definir uma quebra de
linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde
deveriam existir paragráfos.
Ex:
1
2
|
<p>Primeira linha<br />
segunda linha</p>
|
<ul></ul> – <ol></ol> – <li></li>–
Os elementos UL e OL são usados para iniciar uma lista, sendo o
<ul> para uma sem ordenação numérica e o <ol> para uma com
ordenação numérica. Os elementos dentro dessa lista devem ser marcados
com a tag LI.
Ex:
1
2
3
4
|
<ul>
<li>Sou um elemento de uma lista</li>
<li>Sou outro elemento dentro da lista</li>
</ul>
|
<a></a>– O A é um elemento responsável por
"linkar" páginas/arquivos na sua página. Através do atributo href você
pode especificar aonde está a página/arquivo a ser linkado na página.
Ex:
1
2
|
<a href="clientes.html">Página de clientes</a>
<a href="currículo.pdf">Curriculo</a>
|
Link externo:
<img /> – A tag IMG é usada para renderizar uma
imagem no site.
É necessário que o campo src seja preenchido com o caminho para a
imagem. Os campos width e height devem ser preenchidos com a largura e a
altura da imagem em pixels, é muito importante que esse campo esteja
sempre preenchido para evitar que o navegador tenha que calcular sozinho
o tamanho da imagem. O campo alt, deve conter uma pequena descrição da
imagem para o caso do navegador não conseguir reproduzir a imagem e por
questões de acessibilidade para leitores de tela usados por cegos.
Ex:
1
|
<img src="imagem.jpg" width="50" height="50" alt="Descrição da imagem" />
|
<div></div>– O DIV é uma tag de bloco, usado para
agrupar elementos semelhantes. Um uso comum dele é para categorizar o
cabeçalho (Header) da página, o conteúdo (content) e o rodapé (footer). É
muito utilizado para auxiliar na personalização do site através do Css.
Ex:
1
2
3
4
|
<div>
<h2>Título relevante</h2>
<p>Texto do bloco</p>
<img src="alerta.jpg" width="10" height="7" alt="alerta" /></div>
|
<table></table> – <td></td> – <tr></tr> – A tag
TABLE
é usada para dermacar uma tabela. As linhas são marcadas com a tag TR
enquanto as colunas ficam com a tag TD. É possível agrupar colunas com o
atributo colspan e linhas com o atributo rowspan. Um <td
colspan="2"></td> significa que aquela coluna vai ocupar o
espaço de duas colunas.
Ex: Tabela 2×2
1
2
3
4
5
6
7
8
9
10
|
<table>
<tr>
<td>Primeira coluna da primeira linha</td>
<td>Segunda coluna da primeira linha</td>
</tr>
<tr>
<td>Primeira coluna da segunda linha</td>
<td>Segunda coluna da segunda linha</td>
</tr>
</table>
|
<form></form>– A tag FORM serve para demarcar a área de um
formulário.
No caso do form abordarei as tags utilizadas por ele em grupos
diferentes pois são muitos. A tag form tem o atributo action, que
determina qual ação vai ser executada quando ele for submetido.
Ex:
1
2
|
<form action="envioFormulario.php">
</form>
|
<input />– A tag
INPUT pode adquirir características especificas de acordo com o atributo type que ele receber.
Ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<input type="text" value="Digite aqui" />
<!--Campo onde o usuário pode digitar um pequeno texto.
Caso queira deixar um valor por padrão,
basta adicionar um atributo value com o valor desejado.-->
<input type="submit" />
<!-- Cria um botão que vai submeter o formulário ao ser clicado.-->
<input type="file" />
<!-- Cria um campo para fazer uploads de arquivos.-->
<input type="radio" type="grupo" />
<!-- Cria um campo para seleção única.
As opções disponíveis são agrupadas pelo type, ou seja,
se houverem 3 inputs radio com o mesmo type,
o usuário só poderá escolher um deles.-->
<input type="checkbox" />
<!-- Bem semelhante ao radio, porém permite múltipla seleção.-->
|
<textarea></textarea>– A tag TEXTAREA tem um comportamento semelhante ao do input text, porém ele é destinado a textos maiores.
Ex:
<label></label>– A tag LABEL permite que você atribua uma legenda a um campo do seu formulário. Existem duas formas de usa-la:
Ex:
1-
1
2
3
|
<label>Sou uma legenda
<input type="text" />
</label>
|
2 -
1
2
|
<label for="campo">Sou uma legenda</label>
<input type="text" id="campo" />
|
ALGUMAS TAGS HTML 5
Não irei muito a fundo nesse tópico pois boa parte das
tags HTML 5
ainda não estão totalmente compatíveis com todos os navegadores.
Principalmente quando falamos do Internet Explorer 8 ou inferior.
<header></header>– A tag HEADER serve para limitar
o cabeçalho da sua página. Ele foi criado com a intenção de simplificar
o famoso <div id="cabecalho"> / <div id="header">. Cuidado
para não confundi-lo com a tag HEAD. O HEADER deve ser utilizado dentro
do BODY como auxiliar semântico, enquanto o HEAD fica dentro da tag HTML
e trás informações somente visíveis para o navegador.
<footer></footer>– O FOOTER assim como o HEADER
serve para auxiliar na formatação da página e veio para substituir a
famoso <div id="rodapé">/<div id="footer">.
<aside></aside>– A tag ASIDE é utilizada para
demarcar as regiões laterais das páginas que geralmente carregam
elementos de navegação, ou informações auxiliares ao conteúdo principal.
<section></section> -A tag SECTION tem um
funcionamento muito semelhante ao da DIV porém ela serve para demarca
que um bloco de conteúdo possui uma relação mais próxima. Enquanto o DIV
não carrega valor semântico algum.
<article></article>– A tag ARTICLE serve para definir o conteúdo principal de uma página.
<nav></nav>– A tag NAV é usada para indicar uma navegação. Ela deve ser usada para agrupar links de navegação.
A principal diferença dessas tags novas das DIV's é que elas passam
valor semântico enquanto a DIV só serve como auxiliar para formatação,
sem passar valor algum.
Caso queiram utilizar as tags citadas acima em qualquer navegador,
mesmo que ele não leia HTML 5, basta inserir o seguinte script no final
de sua página:
1
2
3
|
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
|
ID's e CLASS
Os
ID'ssão atributos que podem ser atribuídos a qualquer tag
presente no <body>. Com ele é possível identificar um elemento
facilmente. Isso ajuda muito no desenvolvimento do Css e na programação
do Javascript (falaremos adiante sobre isso). É importante ressaltar que
o ID deve ser único, ou seja, só pode existir um por página.
Exemplos clássicos de ID's são para definir cabeçalhos, rodapés e blocos de conteúdo.
Ex:
1
2
3
|
<div id="cabeçalho"></div>
<img src="perfil.jpg" height="50" width="20" id="imagemPerfil" />
<span id="horario">12:30</span>
|
Já o
CLASSdeve ser utilizado para agrupar elementos com
atribuições semelhantes. Se você vai usar um botão com as mesmas
características em vários locais do site, vale a pena colocar um CLASS
nele e personalizar somente uma vez no css.
Ex:
1
|
<input type="submit" value="Enviar" class="botaoForm" />
|
CSS e JAVASCRIPT
O
Cssé um arquivo que visa personalizar o modo como seu HTML
aparece para o usuário. Ele deve ser chamado dentro da tag <head>
no topo do site.
Ex: <code><link href="estilo.css" type="text/css" media="screen" rel="stylesheet" /></code>
O
Javascripté
uma linguagem muito ponderosa que permite que o desenvolvedor altere
elementos na página HTML. O ideal é que ele seja chamado no fim da
página (antes do fechamento da tag body) para não atrasar o carregamento
dos demais componentes do seu HTML. Caso tenha interesse em estudar,
recomendo olhar também a biblioteca javascript jQuery.
Ex:
1
2
|
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
|
Vou me conter as esses comentários para não sair do foco do artigo. Em breve postarei sobre Css e Javascript também.
Exemplo de uma página HTML completa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Título da página</title>
<meta name="description" content="Sou o description da página. Uma breve descreição" />
<link href="css/estilo.css" type=text/css rel=stylesheet>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header> <a href="/"><img src="logo.jpg" alt="Logo site" width="200" height="50"></a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="clientes.html">Clientes</a></li>
<li><a href="empresa.html">Empresa</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>
<section>
<h1>Sou o título da página</h1>
<h2>Sou um subtitulo</h2>
<p>Sou um conteúdo comum.
<em>Estou em italico</em>.
<b>Estou em negrito</b>
<u>Estou sublinhado</u></p>
</section>
<footer>Sou o rodapé</footer>
<script src="js/javascript.js" type="text/javascript"> </script>
</body>
</html>
|
ORGANIZANDO E HOSPEDANDO SEU SITE
De aqui em diante falarei de coisas que saem um pouco do escopo do
HTML mas que são essenciais para o desenvolvimento de um site.
A principal dela é a organização. Seu site vai ter diversos arquivos
HTML. Vamos supor que seja um site empresarial. De cara teríamos uma
página para a Home, uma para Empresa, uma para Clientes e uma para
Contatos. Então na pasta principal do site, teríamos um arquivo
home.html (ou index.html), empresa.html, clientes.html e contato.html.
Porém o site teria diversos outros arquivos como por exemplo, arquivos
Css, Imagens usadas no site, Javascripts, documentos anexados nas
páginas… Então acaba sendo interessante, criar pastas para arquivos
semelhantes. Geralmente trabalho com a seguinte estrutura:
- Site (aqui ficam os arquivos html)
– Css (aqui ficam os arquivos css)
– JS (aqui ficam os arquivos javascript)
– Img (aqui ficam as imagens do site)
– Docs (aqui ficam os demais documentos, pdfs, txt…)
Após isso é necessário providenciar duas coisas para que seu site entre de vez no ar. Uma hospedagem e um domínio.
O domínio .com.br pode ser adquirido no registro.br por apenas R$ 30,00 mensais.
Já a hospedagem deve ser paga a uma empresa terceirizada. Existem
planos de R$ 10,00 mensais até planos bem mais caros, porém é importante
pesquisar o que melhor se adequa ao seu caso. Existem hospedagens
gratuitas, porém não recomendo nenhuma delas.
Após o registro do domínio e o plano de hospedagem, vai ser
necessário que você envie seus arquivos para o servidor. Para isso é
necessário uma programa de envio ftp. Eu recomendo o filezilla
(http://filezilla-project.org/). Basta preencher no programa os dados de
host, username e password que a hospedagem irá fornecer e subir o seu
diretório com os arquivos
do site para o servidor. É importante que na raiz do site tenha um
arquivo chamado index.html que seria a página inicial do site.
Geralmente a pasta raiz do site no servidor se chama public_html.
Leandro Oriente –
Desenvolvedor Front-End
