Alunos do Curso de Manutenção Microcomputadores - Sexta Feira Matutino

Turma de Manutenção em Microcomputadores 2013.2

Nossos colegas: Ederilza, Cesar, Afonso, Maurício, Davi, Guilherme, Jebinel, Wesley, Reinaldo, Júlio, Moisés, Yraci, Felipe, Ezequias, Adriana, Marilza e Nivaldo. Todos atentos à aula de manutenção de microcomputadores. A aula trata sobre eletricidade e fonte de alimentação.

                                                         13/09/2013 -   Fonte: Gerson

Aula 02.3 - Webdesign: HTML e TAG's

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.

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

 

 

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

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

 Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag , na primeira linha do código, e terminar com na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por:

 

: Este é o inicio da tag;*

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

 

Após iniciar o documento com a tag você deve incluir o cabeçalho que é feito com as tags . E também um título usando o par . Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos.

 

- 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

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