HTML Básico

TUTORIAL WEB DESIGN

contadores para blog

Desenvolvimento - HTML

Desenvolvimento - HTML

HTML Básico

Neste tutorial veremos uma introdução de como funciona a linguagem HTML. Veremos as principais tag's da linguagem.

Read more: http://www.linhadecodigo.com.br/artigo/81/html-basico.aspx#ixzz2En5wDRii

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	Conteúdo da tag

Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:

1

Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.

1 2 3

texto

Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.

1

/>

É 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

- Evitem de colocar elementos redundantes no código. Um uso comum é o de 

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 –

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 –

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 –

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

O inserido antes da tagno 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

No cabeçalho trazemos informações que serão usadas pelo navegador como:

TITLE –

Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)

LINK – 

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	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>

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:

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: 

Demais: 

Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.

Existe ainda a tag

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.

Caracteres Acentuados no Português

á	á	Á	Á	ã	ã	Ã	Ã	â	â	Â	Â
à	à	À	À	é	é	É	É	ê	ê	Ê	Ê
í	í	Í	Í	ó	ó	Ó	Ó	õ	õ	Õ	Õ
ô	ô	Ô	Ô	ú	ú	Ú	Ú	ç	ç	Ç	Ç

voltar para o topo ↑

Caracteres Especiais

	espaço		&	e comercial	&	ˆ	acento circunflexo	ˆ	˜	acento til	˜
¨	acento trema	¨	´	acento agudo	&cute;	¸	cedilha	¸	"	aspas duplas	"
“	aspas duplas esquerda	“	”	aspas duplas direita	”	‘	aspas simples esquerda	‘	’	aspas simples direita	’
‚	aspas baixas simples	‚	„	aspas baixas duplas	„	º	ordenal masculino	º	ª	ordinal feminino	ª
‹	aspas angulares simples esquerda	‹	›	aspas angulares simples direita	›	«	aspas angulares duplas esquerda	“	»	aspas angulares duplas direita	»
–	travessão ‘en’	–	—	travessão ‘em’	—		hífen oculto		¯	macron	¯
…	reticências	…	¦	barra vertical	¦	•	marcador	•	‣	marcador triangular	‣
¶	parágrafo	¶	§	parágrafo legal	§

voltar para o topo ↑

Caracteres Comerciais

©	copyright	©	®	marca registrada	&reg	™	trade mark	™	£	libra esterlina	£
¢	centavo	¢	₥	Mill (US$.001)	₥	€	Euro	€	¥	Iene (yen)	¥
₢	Cruzeiro (Brasil)	₢	₣	Franco (França)	₣	₤	Lira (Itália)	₤	₯	Drachma (Grécia)	₯
₦	Naira (Nigéria)	₦	₧	Peseta (Espanha)	₧	₨	Rupee (Índia)	₨	₩	Won (Coréia)	₩
₪	New sheqel (Israel)	₪	₫	Dong (Vietnã)	₫	₭	Kip (Laos)	₭	₮	Tugrik (Mongólia)	₮
¤	símbolo monetário	¤

voltar para o topo ↑

Caracteres Matemáticos e Lógicos

A¹	elevado a um	¹	A₁	um subscrito	₁
A²	ao quadrado	²	A₂	dois subscrito	₂
A³	ao cubo	³	A₃	trés subscrito	₃
A⁴	elevado a quatro	⁴	A₄	quatro subscrito	₄
A⁵	elevado a cinco	⁵	A₅	cinco subscrito	₅
A⁶	elevado a seis	⁶	A₆	seis subscrito	₆
A⁷	elevado a sete	⁷	A₇	sete subscrito	₇
A⁸	elevado a oito	⁸	A₈	oito subscrito	₈
A⁹	elevado a nove	⁹	A₉	nove subscrito	₉
A⁰	zero sobrescrito	⁰	₀	zero subscrito	₀
A⁼	igual sobrescrito	⁼	A₌	igual subscrito	₌
A⁺	mais sobrescrito	⁺	A₊	mais subscrito	₊
A⁻	menos sobrescrito	⁻	A₋	menos subscrito	₋
A⁽	parênteses sobrescrito	⁽	A⁾	parênteses sobrescrito	⁾
A₍	parênteses subscrito	₍	A₎	parênteses subscrito	₎
Aⁿ	elevado a n	ⁿ	Aⁱ	elevado a i	ⁱ

½	fração um meio	½	⅓	fração um terço	⅓	¼	fração um quarto	¼
⅕	fração um quinto	⅕	⅙	fração um sexto	⅙	⅛	fração um oitavo	⅛
⅔	fração dois terços	⅔	⅖	fração dois quintos	⅖	¾	fração três quartos	¾
⅗	fração três quintos	⅗	⅜	fração três oitavos	⅜	⅘	fração quatro quintos	⅘
⅚	fração cinco sextos	⅚	⅝	fração cinco oitavos	⅝	⅞	fração sete oitavos	⅞

≠	diferente	≠
≈	quase igual	≈	≅	aproximadamente igual	≅
∝	proporcional	∝	≡	idêntico	≡
>	maior que	>	<	menor que	<
≤	menor ou igual	≤	≥	maior ou igual	≥
±	mais ou menos	±	−	sinal de subtração	−
×	sinal de multiplicação	×	÷	sinal de divisão	÷
∗	asterisco	∗	⁄	barra de fração	⁄
‰	por-mil	‰	∫	sinal de integral	∫
∑	somatório	∑	∏	PI	∏
√	raiz quadrada	√	∞	infinito	∞
∠	ângulo	∠	⊥	perpendicular	⊥
′	minuto	′	″	segundo	″
°	grau	°	∴	consequentemente	∴
⋅	ponto	⋅	·	ponto do meio	·
∂	diferença parcial	∂	ℑ	parte imaginária do número	ℑ
ℵ	alef	ℵ	ℜ	parte real do número	ℜ
∇	nabla	∇
⊕	soma direta	⊕	⊗	produto de vetor	⊗
ø	produto vazio	ø	Ø	produto vazio	Ø
∈	elemento de/pertence a	∈	∉	nã é elemento de	∉
∩	interseção	∩	∪	união	∪
⊂	subconjunto de	⊂	⊃	superconjunto de	⊃
⊆	subconjunto de ou igual a	⊆	⊇	superconjunto de ou igual a	⊇
∃	existe	∃	∀	qualquer	∀
∅	vazio	∅	¬	não lógico	¬
∧	e lógico	∧	∨	ou lógico	∨
◊	losango	◊	↵	retorno de carro	↵
⌈	teto esquerdo	⌈	⌉	teto direito	⌉
⌊	piso esquerdo	⌊	⌋	piso direito	⌋

voltar para o topo ↑

Números Decorados

❶	❶	❷	❷	❸	❸	❹	❹	❺	❺
❻	❻	❼	❼	❽	❽	❾	❾	❿	❿
➀	➀	➁	➁	➂	➂	➃	➃	➄	➄
➅	➅	➆	➆	➇	➇	➈	➈	➉	➉
①	①	②	②	③	③	④	④	⑤	⑤
⑥	⑥	⑦	⑦	⑧	⑧	⑨	⑨	⑩	⑩
⑪	⑪	⑫	⑫	⑬	⑬	⑭	⑭	⑮	⑮
⑯	⑯	⑰	⑰	⑱	⑱	⑲	⑲	⑳	⑳
㉑	㉑	㉒	㉒	㉓	㉓	㉔	㉔	㉕	㉕
㉖	㉖	㉗	㉗	㉘	㉘	㉙	㉙	㉚	㉚
㉛	㉛	㉜	㉜	㉝	㉝	㉞	㉞	㉟	㉟
㊱	㊱	㊲	㊲	㊳	㊳	㊴	㊴	㊵	㊵
㊶	㊶	㊷	㊷	㊸	㊸	㊹	㊹	㊺	㊺
⓪	⓪
➊	➊	➋	➋	➌	➌	➍	➍	➎	➎
➏	➏	➐	➐	➑	➑	➒	➒	➓	➓
⓫	⓫	⓬	⓬	⓭	⓭	⓮	⓮	⓯	⓯
⓰	⓰	⓱	⓱	⓲	⓲	⓳	⓳	⓴	⓴
⓵	⓵	⓶	⓶	⓷	⓷	⓸	⓸	⓹	⓹
⓺	⓺	⓻	⓻	⓼	⓼	⓽	⓽	⓾	⓾

voltar para o topo ↑

Letras Decoradas

Ⓐ	Ⓐ	Ⓑ	Ⓑ	Ⓒ	Ⓒ	Ⓓ	Ⓓ	Ⓔ	Ⓔ	Ⓕ	Ⓕ
Ⓖ	Ⓖ	Ⓗ	Ⓗ	Ⓘ	Ⓘ	Ⓙ	Ⓙ	Ⓚ	Ⓚ	Ⓛ	Ⓛ
Ⓜ	Ⓜ	Ⓝ	Ⓝ	Ⓞ	Ⓞ	Ⓟ	Ⓟ	Ⓠ	Ⓠ	Ⓡ	Ⓡ
Ⓢ	Ⓢ	Ⓣ	Ⓣ	Ⓤ	Ⓤ	Ⓤ	Ⓥ	Ⓦ	Ⓦ	Ⓧ	Ⓧ
Ⓨ	Ⓨ	Ⓩ	Ⓩ	ⓐ	ⓐ	ⓑ	ⓑ	ⓒ	ⓒ	ⓓ	ⓓ
ⓔ	ⓔ	ⓕ	ⓕ	ⓖ	ⓖ	ⓗ	ⓗ	ⓘ	ⓘ	ⓙ	ⓙ
ⓙ	ⓙ	ⓚ	ⓚ	ⓛ	ⓛ	ⓜ	ⓜ	ⓝ	ⓝ	ⓞ	ⓞ
ⓟ	ⓟ	ⓠ	ⓠ	ⓡ	ⓡ	ⓢ	ⓢ	ⓣ	ⓣ	ⓤ	ⓤ
ⓥ	ⓥ	ⓦ	ⓦ	ⓧ	ⓧ	ⓨ	ⓨ	ⓩ	ⓩ

voltar para o topo ↑

Outros Acentos e Caracteres Especiais

ñ

ñ

Ñ

Ñ

¡

¡

¿

¿

ƒ

ƒ

ß

ß

µ

µ

ä

ä

Ä

Ä

å

å

Å

Å

ë

ë

Ë

Ë

è

`

È

È

ï

ï

Ï

Ï

ì

ì

Ì

Ì

î

î

Î

Î

ö

ö

Ö

Ö

ò

ò

Ò

Ò

ù

ù

Ù

Ù

û

û

Û

Û

ü

ü

Ü

Ü

ý

ý

Ý

Ý

ÿ

ÿ

Ÿ

Ÿ

æ

æ

Æ

Æ

œ

œ

Œ

Œ

†

†

‡

‡

š

š

Š

Š

þ

þ

Þ

Þ

ð

ð

Ð

Ð

voltar para o topo ↑

Caracteres Gregos

α

α

Α

Α

β

β

Β

Β

γ

γ

Γ

Γ

δ

δ

Δ

Δ

ε

ε

Ε

Ε

ζ

ζ

Ζ

Ζ

η

η

Η

Η

θ

θ

Θ

Θ

ι

ι

Ι

Ι

κ

κ

Κ

Κ

λ

λ

Λ

Λ

μ

μ

Μ

Μ

ν

ν

Ν

Ν

ξ

ξ

Ξ

Ξ

ο

ο

Ο

Ο

π

π

Π

Π

ρ

ρ

Ρ

Ρ

σ

σ

Σ

Σ

ς

ς

τ

τ

Τ

Τ

υ

υ

Υ

Υ

φ

φ

Φ

Φ

χ

χ

Χ

Χ

ψ

ψ

Ψ

Ψ

ω

ω

Ω

Ω

ϑ

ϑ

ϒ

ϒ

ϖ

ϖ

Veja também: símbolos especiais, dingbats e desenhos cores em hexadecimal e RGB cores web safe em hexadecimal