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.
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira, basta usar o sinal de\.
Uma tag HTML pode conter outra
tag dentro dela, e quantas forem necessárias.
É 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.
- 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.
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.
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.
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.
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.
Cabeçalho
No cabeçalho trazemos
informações que serão usadas pelo navegador como:
TITLE –Sou o título da página
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
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:
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
Demais:
Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.
Existe ainda a tag
Como
funciona uma página?
O
espaço para sua página na Internet fica em um computador, onde estão todos os
seus arquivos de HTML, som, imagem, etc. O computador onde fica a sua home page
é chamado de Servidor, pois a qualquer hora do dia ou da noite ele vai estar
ligado para as pessoas poderem acessar sua home page.
Quando
a pessoa entra na sua home page, ela está acessando este espaço. As páginas são
feitas usando a linguagem HTML (HyperText Markup Language). Trata-se de uma
linguagem simples e bem leve, por isso ela é o padrão da Internet. Nas páginas
você coloca sons, imagens, cores.
Além
disso, as páginas da Web podem ser ligadas entre si, formando o que se chama de
Link. Com isso, você pode criar uma página sobre um assunto que lhe agrade a
partir de uma outra, com sua foto e um link entre elas. Quando uma pessoa clica
neste link, ela vai diretamente para aquela página que você definiu.
Vamos
passar agora às aulas de HTML para você poder começar a construir seu site.
Para visualizar as páginas é necessário um navegador. Os mais conhecidos e
utilizados são o Internet Explorer e o Netscape.
Estes
navegadores fazem basicamente a mesma coisa - mostrar as páginas -, mas devido
a algumas diferenças de programação, alguns recursos são visíveis em um e no
outro não. O mesmo acontece com versões mais antigas. Navegadores versão 3 não
conseguem mostrar uma página HTML corretamente. Por isso, durante a construção
do seu site, procure testá-lo nos dois navegadores para verificar se a
visualização está correta.
Introdução
ao HTML
:
Este é o fechamento da tag para que ela possa funcionar.**
*
xxx é apenas uma representação de uma tag, não é uma tag HTML.
**
Algumas tags não necessitam do fechamento. Neste caso você será avisado.
Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá ser mostrada direito ou nem mesmo irá aparecer.
-
A tag
O
"corpo" do documento deve ser demarcado pelo par ...
. Nesta parte do documento serão colocados todos os comandos para
apresentação de uma página HTML. Entre as tags e é que
você vai colocar todos os códigos para sua página.
TABELAS DE CORES
Outros Sites de pesquisa de códigos:
Adobe Kuler
Site Maujor
|
Cor
|
Código Java
|
Código HTML
|
|
Snow
|
255
250 250
|
#FFFAFA
|
|
GhostWhite
|
248
248 255
|
#F8F8FF
|
|
WhiteSmoke
|
245
245 245
|
#F5F5F5
|
|
Gainsboro
|
220
220 220
|
#DCDCDC
|
|
FloralWhite
|
255
250 240
|
#FFFAF0
|
|
OldLace
|
253
245 230
|
#FDF5E6
|
|
Linen
|
250
240 230
|
#FAF0E6
|
|
AntiqueWhite
|
250
235 215
|
#FAEBD7
|
|
PapayaWhip
|
255
239 213
|
#FFEFD5
|
|
BlanchedAlmond
|
255
235 205
|
#FFEBCD
|
|
Bisque
|
255
228 196
|
#FFE4C4
|
|
PeachPuff
|
255
218 185
|
#FFDAB9
|
|
NavajoWhite
|
255
222 173
|
#FFDEAD
|
|
Moccasin
|
255
228 181
|
#FFE4B5
|
|
Cornsilk
|
255
248 220
|
#FFF8DC
|
|
Ivory
|
255
255 240
|
#FFFFF0
|
|
LemonChiffon
|
255
250 205
|
#FFFACD
|
|
Seashell
|
255
245 238
|
#FFF5EE
|
|
Honeydew
|
240
255 240
|
#F0FFF0
|
|
MintCream
|
245
255 250
|
#F5FFFA
|
|
Azure
|
240
255 255
|
#F0FFFF
|
|
AliceBlue
|
240
248 255
|
#F0F8FF
|
|
lavender
|
230
230 250
|
#E6E6FA
|
|
LavenderBlush
|
255
240 245
|
#FFF0F5
|
|
MistyRose
|
255
228 225
|
#FFE4E1
|
|
White
|
255
255 255
|
#FFFFFF
|
|
Black
|
0
0 0
|
#000000
|
|
DarkSlateGray
|
47
79 79
|
#2F4F4F
|
|
DimGrey
|
105
105 105
|
#696969
|
|
SlateGrey
|
112
128 144
|
#708090
|
|
LightSlateGray
|
119
136 153
|
#778899
|
|
Grey
|
190
190 190
|
#BEBEBE
|
|
LightGray
|
211
211 211
|
#D3D3D3
|
|
MidnightBlue
|
25
25 112
|
#191970
|
|
NavyBlue
|
0
0 128
|
#000080
|
|
CornflowerBlue
|
100
149 237
|
#6495ED
|
|
DarkSlateBlue
|
72
61 139
|
#483D8B
|
|
SlateBlue
|
106
90 205
|
#6A5ACD
|
|
MediumSlateBlue
|
123
104 238
|
#7B68EE
|
|
LightSlateBlue
|
132
112 255
|
#8470FF
|
|
MediumBlue
|
0
0 205
|
#0000CD
|
|
RoyalBlue
|
65
105 225
|
#4169E1
|
|
Blue
|
0
0 255
|
#0000FF
|
|
Cor
|
Código Java
|
Código HTML
|
|
DodgerBlue
|
30
144 255
|
#1E90FF
|
|
DeepSkyBlue
|
0
191 255
|
#00BFFF
|
|
SkyBlue
|
135
206 235
|
#87CEEB
|
|
LightSkyBlue
|
135
206 250
|
#87CEFA
|
|
SteelBlue
|
70
130 180
|
#4682B4
|
|
LightSteelBlue
|
176
196 222
|
#B0C4DE
|
|
LightBlue
|
173
216 230
|
#ADD8E6
|
|
PowderBlue
|
176
224 230
|
#B0E0E6
|
|
PaleTurquoise
|
175
238 238
|
#AFEEEE
|
|
DarkTurquoise
|
0
206 209
|
#00CED1
|
|
MediumTurquoise
|
72
209 204
|
#48D1CC
|
|
Turquoise
|
64
224 208
|
#40E0D0
|
|
Cyan
|
0
255 255
|
#00FFFF
|
|
LightCyan
|
224
255 255
|
#E0FFFF
|
|
CadetBlue
|
95
158 160
|
#5F9EA0
|
|
MediumAquamarine
|
102
205 170
|
#66CDAA
|
|
Aquamarine
|
127
255 212
|
#7FFFD4
|
|
DarkGreen
|
0
100 0
|
#006400
|
|
DarkOliveGreen
|
85
107 47
|
#556B2F
|
|
DarkSeaGreen
|
143
188 143
|
#8FBC8F
|
|
SeaGreen
|
46
139 87
|
#2E8B57
|
|
MediumSeaGreen
|
60
179 113
|
#3CB371
|
|
LightSeaGreen
|
32
178 170
|
#20B2AA
|
|
PaleGreen
|
152
251 152
|
#98FB98
|
|
SpringGreen
|
0
255 127
|
#00FF7F
|
|
LawnGreen
|
124
252 0
|
#7CFC00
|
|
Green
|
0
255 0
|
#00FF00
|
|
Chartreuse
|
127
255 0
|
#7FFF00
|
|
MedSpringGreen
|
0
250 154
|
#00FA9A
|
|
GreenYellow
|
173
255 47
|
#ADFF2F
|
|
LimeGreen
|
50
205 50
|
#32CD32
|
|
YellowGreen
|
154
205 50
|
#9ACD32
|
|
ForestGreen
|
34
139 34
|
#228B22
|
|
OliveDrab
|
107
142 35
|
#6B8E23
|
|
DarkKhaki
|
189
183 107
|
#BDB76B
|
|
PaleGoldenrod
|
238
232 170
|
#EEE8AA
|
|
LtGoldenrodYello
|
250
250 210
|
#FAFAD2
|
|
LightYellow
|
255
255 224
|
#FFFFE0
|
|
Yellow
|
255
255 0
|
#FFFF00
|
|
Gold
|
255
215 0
|
#FFD700
|
|
LightGoldenrod
|
238
221 130
|
#EEDD82
|
|
goldenrod
|
218
165 32
|
#DAA520
|
|
DarkGoldenrod
|
184
134 11
|
#B8860B
|
|
Cor
|
Código Java
|
Código HTML
|
|
RosyBrown
|
188
143 143
|
#BC8F8F
|
|
IndianRed
|
205
92 92
|
#CD5C5C
|
|
SaddleBrown
|
139
69 19
|
#8B4513
|
|
Sienna
|
160
82 45
|
#A0522D
|
|
Peru
|
205
133 63
|
#CD853F
|
|
Burlywood
|
222
184 135
|
#DEB887
|
|
Beige
|
245
245 220
|
#F5F5DC
|
|
Wheat
|
245
222 179
|
#F5DEB3
|
|
SandyBrown
|
244
164 96
|
#F4A460
|
|
Tan
|
210
180 140
|
#D2B48C
|
|
Chocolate
|
210
105 30
|
#D2691E
|
|
Firebrick
|
178
34 34
|
#B22222
|
|
Brown
|
165
42 42
|
#A52A2A
|
|
DarkSalmon
|
233
150 122
|
#E9967A
|
|
Salmon
|
250
128 114
|
#FA8072
|
|
LightSalmon
|
255
160 122
|
#FFA07A
|
|
Orange
|
255
165 0
|
#FFA500
|
|
DarkOrange
|
255
140 0
|
#FF8C00
|
|
Coral
|
255
127 80
|
#FF7F50
|
|
LightCoral
|
240
128 128
|
#F08080
|
|
Tomato
|
255
99 71
|
#FF6347
|
|
OrangeRed
|
255
69 0
|
#FF4500
|
|
Red
|
255
0 0
|
#FF0000
|
|
HotPink
|
255
105 180
|
#FF69B4
|
|
DeepPink
|
255
20 147
|
#FF1493
|
|
Pink
|
255
192 203
|
#FFC0CB
|
|
LightPink
|
255
182 193
|
#FFB6C1
|
|
PaleVioletRed
|
219
112 147
|
#DB7093
|
|
Maroon
|
176
48 96
|
#B03060
|
|
MediumVioletRed
|
199
21 133
|
#C71585
|
|
VioletRed
|
208
32 144
|
#D02090
|
|
Magenta
|
255
0 255
|
#FF00FF
|
|
Violet
|
238
130 238
|
#EE82EE
|
|
Plum
|
221
160 221
|
#DDA0DD
|
|
Orchid
|
218
112 214
|
#DA70D6
|
|
MediumOrchid
|
186
85 211
|
#BA55D3
|
|
DarkOrchid
|
153
50 204
|
#9932CC
|
|
DarkViolet
|
148
0 211
|
#9400D3
|
|
BlueViolet
|
138
43 226
|
#8A2BE2
|
|
Purple
|
160
32 240
|
#A020F0
|
|
MediumPurple
|
147
112 219
|
#9370DB
|
|
Thistle
|
216
191 216
|
#D8BFD8
|
|
Snow1
|
255
250 250
|
#FFFAFA
|
|
MistyRose1
|
255
228 225
|
#FFE4E1
|
|
MistyRose2
|
238
213 210
|
#EED5D2
|
|
MistyRose3
|
205
183 181
|
#CDB7B5
|
|
MistyRose4
|
139
125 123
|
#8B7D7B
|
|
Azure1
|
240
255 255
|
#F0FFFF
|
|
Azure2
|
224
238 238
|
#E0EEEE
|
|
Azure3
|
193
205 205
|
#C1CDCD
|
|
Azure4
|
131
139 139
|
#838B8B
|
|
SlateBlue1
|
131
111 255
|
#836FFF
|
|
SlateBlue2
|
122
103 238
|
#7A67EE
|
|
SlateBlue3
|
105
89 205
|
#6959CD
|
|
SlateBlue4
|
71
60 139
|
#473C8B
|
|
RoyalBlue1
|
72
118 255
|
#4876FF
|
|
RoyalBlue2
|
67
110 238
|
#436EEE
|
|
RoyalBlue3
|
58
95 205
|
#3A5FCD
|
|
RoyalBlue4
|
39
64 139
|
#27408B
|
|
Blue1
|
0
0 255
|
#0000FF
|
|
Blue2
|
0
0 238
|
#0000EE
|
|
Blue3
|
0
0 205
|
#0000CD
|
|
Blue4
|
0
0 139
|
#00008B
|
|
DodgerBlue1
|
30
144 255
|
#1E90FF
|
|
DodgerBlue2
|
28
134 238
|
#1C86EE
|
|
DodgerBlue3
|
24
116 205
|
#1874CD
|
|
DodgerBlue4
|
16
78 139
|
#104E8B
|
|
SteelBlue1
|
99
184 255
|
#63B8FF
|
|
SteelBlue2
|
92
172 238
|
#5CACEE
|
|
SteelBlue3
|
79
148 205
|
#4F94CD
|
|
SteelBlue4
|
54
100 139
|
#36648B
|
|
DeepSkyBlue1
|
0
191 255
|
#00BFFF
|
|
DeepSkyBlue2
|
0
178 238
|
#00B2EE
|
|
DeepSkyBlue3
|
0
154 205
|
#009ACD
|
|
DeepSkyBlue4
|
0
104 139
|
#00688B
|
|
SkyBlue1
|
135
206 255
|
#87CEFF
|
|
SkyBlue2
|
126
192 238
|
#7EC0EE
|
|
SkyBlue3
|
108
166 205
|
#6CA6CD
|
|
SkyBlue4
|
74
112 139
|
#4A708B
|
|
LightSkyBlue1
|
176
226 255
|
#B0E2FF
|
|
LightSkyBlue2
|
164
211 238
|
#A4D3EE
|
|
LightSkyBlue3
|
141
182 205
|
#8DB6CD
|
|
LightSkyBlue4
|
96
123 139
|
#607B8B
|
|
SlateGray1
|
198
226 255
|
#C6E2FF
|
|
SlateGray2
|
185
211 238
|
#B9D3EE
|
|
SlateGray3
|
159
182 205
|
#9FB6CD
|
Outros Sites de pesquisa de códigos:
Adobe Kuler
Site Maujor
Muiito Massa isso...
ResponderExcluir