HTML Básico
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 um arquivo HTML.
- Primeiramente tente sempre que possível usar as
letras em caixa baixa, ou seja, todas em minúsculo.
- 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>
|
- Evite 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 o recomendado são os seguintes:
- Sublime Text 2: Considerado 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.
As
principais tags e seus funcionamentos
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, 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 recomendado 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:
|
1
|
<a href=http://www.siteexterno.com>Site
externo sendo linkado</a>
|
<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
OsID'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á oCLASSdeve 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
OCssé 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">//Aqui vai o seu código
javascript</script>
|
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>.
|
