introdução ao html, css e php.pdf
Post on 12-Oct-2015
106 Views
Preview:
TRANSCRIPT
-
Sumrio Introduo ao HTML .................................................................................................................................... 12
Lio 1: Vamos comear .............................................................................................................................. 12
O que necessrio? ................................................................................................................................ 12
Preciso estar online? ............................................................................................................................... 13
Lio 2a: O que HTML? ............................................................................................................................. 13
Para que devo usar o HTML? .................................................................................................................. 13
OK, mas o que significa H-T-M-L? ........................................................................................................... 14
Lio 3a: O que so tags HTML? .................................................................................................................. 14
Voc pode mostrar alguns exemplos? .................................................................................................... 14
Este um ttulo ......................................................................................................................................... 15
Este um subttulo ............................................................................................................................... 15
As tags devem ser escritas com letras maisculas ou minsculas? ........................................................ 15
Onde devo colocar todas estas tags? ...................................................................................................... 15
Lio 4a: Criando seu primeiro website ...................................................................................................... 16
Na lio 1 vimos o que necessrio para construir um website: um navegador e o Notepad (ou um
editor de texto similar). Uma vez que voc esta lendo esta pgina, provavelmente est com seu
navegador aberto. Agora abra outra janela do seu navegador de modo que voc tenha duas janelas
na tela, uma para ler este tutorial e outra para visualizar o website que voc vai construir. ................ 16
O que posso fazer? .................................................................................................................................. 16
At aqui tudo bem, mas como colocar contedo no meu website? ...................................................... 17
Lio 5a: O que voc j aprendeu? ............................................................................................................. 18
O que significa isto? ................................................................................................................................ 19
O que fazer agora? .................................................................................................................................. 19
Lio 6a: Mais tags HTML ............................................................................................................................ 20
E agora? ................................................................................................................................................... 20
Posso usar vrias tags simultaneamente? .............................................................................................. 21
Mais tags! ................................................................................................................................................ 21
Uau! Isto tudo? ..................................................................................................................................... 22
Lio 7a: Atributos ...................................................................................................................................... 22
Como isto? ............................................................................................................................................ 22
Como a pgina ficou vermelha? .............................................................................................................. 23
Quais tags podem usar atributos? .......................................................................................................... 23
-
Ento, quais so as partes que constituem uma tag? ............................................................................. 23
Lio 8a: Links .............................................................................................................................................. 24
Como so os links entre minhas prprias pginas? ................................................................................ 24
Como so os links dentro de uma mesma pgina? ................................................................................. 24
Exemplo 5: ........................................................................................................................................... 25
Cabealho 1 ................................................................................................................................................. 25
Cabealho 2 ................................................................................................................................................. 25
Posso criar link para mais alguma coisa? ............................................................................................ 25
Existem outros atributos que eu deva conhecer? .................................................................................. 26
Lio 9a: Imagens ........................................................................................................................................ 26
Onde consigo minhas imagens? .............................................................................................................. 27
Isto tudo o que eu preciso saber sobre imagens? ............................................................................... 27
Existem outros atributos que eu deva conhecer? .................................................................................. 28
Lio 10a: Tabelas ....................................................................................................................................... 29
Qual a diferena entre e ? ........................................................................................................ 30
Existem atributos? ................................................................................................................................... 31
Mais atributos? ....................................................................................................................................... 32
O que posso inserir em tabelas? ............................................................................................................. 32
Lio 11a: Mais tabelas ............................................................................................................................... 32
O que mais existe? .................................................................................................................................. 32
Que tal rowspan? .................................................................................................................................... 34
Lio 12a: Layout (CSS) ................................................................................................................................ 34
Est parecendo que h uma grande quantidade de trabalho a executar ............................................... 35
O que mais posso fazer com CSS? ........................................................................................................... 36
CSS no nada mais do que cores e tipos de fontes? ............................................................................ 36
Legal sim. Mas, fcil? ............................................................................................................................... 37
Lio 13a: Uploading pginas ...................................................................................................................... 37
O mundo est preparado para ver suas pginas? ................................................................................... 37
Isto tudo que eu preciso? ..................................................................................................................... 38
Como eu fao o upload das pginas? ...................................................................................................... 38
Lio 14a: Web standards e validao ........................................................................................................ 39
Legal! Posso anunciar? ............................................................................................................................ 39
Validao? Porqu deveria eu fazer isto? ............................................................................................... 40
Lio 15a: Dicas finais .................................................................................................................................. 40
-
Como eu aprendo mais? ......................................................................................................................... 41
Introduo ao CSS ....................................................................................................................................... 41
Quais softwares eu precisarei? ............................................................................................................... 42
Lio 1b: O que CSS? ................................................................................................................................ 42
Qual a diferena entre CSS e HTML? .................................................................................................... 42
Quais so os benefcios do uso de CSS? .................................................................................................. 43
Lio 2b: Como funciona CSS? .................................................................................................................... 43
A sintaxe bsica das CSS .......................................................................................................................... 43
Aplicando CSS a um documento HTML ................................................................................................... 44
Mtodo 1: In-line (o atributo style) ..................................................................................................... 44
Mtodo 2: Interno (a tag style) ........................................................................................................... 44
Mtodo 3: Externo (link para uma folha de estilos)............................................................................ 44
Faa voc mesmo .................................................................................................................................... 46
default.htm .......................................................................................................................................... 46
style.css ............................................................................................................................................... 46
Lio 3b: Cores e fundos ............................................................................................................................. 46
Cor do primeiro plano: a propriedade 'color' ......................................................................................... 46
A propriedade 'background-color' .......................................................................................................... 47
Images de fundo [background-image] .................................................................................................... 47
Imagem de fundo repetida [background-repeat] ................................................................................... 48
Image de fundo fixa [background-attachment] ...................................................................................... 48
Posio da imagem de fundo [background-position] ............................................................................. 49
Compilando [background] ....................................................................................................................... 50
Lio 4b: Fontes........................................................................................................................................... 51
Famlia de fontes [font-family] ................................................................................................................ 51
Estilo da fonte [font-style] ...................................................................................................................... 52
Fonte variante [font-variant] .................................................................................................................. 53
Peso da fonte [font-weight] .................................................................................................................... 53
Tamanho da fonte [font-size] .................................................................................................................. 53
Compilando [font] ................................................................................................................................... 54
Lio 5b: Textos ........................................................................................................................................... 55
Indentao de texto [text-indent] ........................................................................................................... 55
Alinhamento de textos [text-align] ......................................................................................................... 55
Decorao de textos [text-decoration] ................................................................................................... 56
-
Espao entre letras [letter-spacing] ........................................................................................................ 56
Transformao de textos [text-transform] ............................................................................................. 57
Lio 6b: Links ............................................................................................................................................. 57
O que pseudo-classe? ........................................................................................................................... 58
Pseudo-classe: link .............................................................................................................................. 58
Pseudo-classe: visited ......................................................................................................................... 58
Pseudo-classe: active .......................................................................................................................... 59
Pseudo-classe: hover ........................................................................................................................... 59
Exemplo 1: Efeito quando o ponteiro est sobre o link .......................................................................... 59
Exemplo 1a: Espaamento entre as letras .......................................................................................... 59
Exemplo 1b: UPPERCASE e lowercase ................................................................................................. 59
Exemplo 2: Removendo sublinhado dos links ......................................................................................... 60
Lio 7b: Identificando e agrupando elementos (classes e id) ................................................................... 62
Agrupando elementos com uso de classe ............................................................................................... 62
Identificando um elemento com uso de id ............................................................................................. 63
Lio 8b: Agrupando elementos (span e div) .............................................................................................. 64
Agrupando com .......................................................................................................................... 64
Agrupando com ............................................................................................................................. 65
Lio 9b: O box model ................................................................................................................................. 65
O box model em CSS ............................................................................................................................... 66
Definindo margin de um elemento ......................................................................................................... 67
Definindo padding de um elemento ....................................................................................................... 68
Lio 11b: Bordas ........................................................................................................................................ 69
A espessura das bordas [border-width] .................................................................................................. 69
As cores das bordas [border-color] ......................................................................................................... 69
Tipos de bordas [border-style] ................................................................................................................ 69
Exemplos de definio de bordas ........................................................................................................... 70
Compilando [border] ............................................................................................................................... 71
Lio 12b: Altura e largura .......................................................................................................................... 71
Atribuindo largura [width] ...................................................................................................................... 71
Atribuindo altura [height] ....................................................................................................................... 72
Lio 13b: Flutuando elementos (floats)..................................................................................................... 72
Como isto feito? ................................................................................................................................... 73
Outro exemplo: colunas .......................................................................................................................... 73
-
A propriedade clear ................................................................................................................................. 74
Lio 14b: Posicionando elementos ............................................................................................................ 75
O Princpio de Posicionamento CSS ........................................................................................................ 75
Posicionamento absoluto ........................................................................................................................ 76
Posicionamento relativo ......................................................................................................................... 77
Lio 15b: Usando z-index (Layers) ............................................................................................................. 77
Lio 16b: Web-standards e validao ........................................................................................................ 79
Validador CSS .......................................................................................................................................... 79
Introduo ao PHP ...................................................................................................................................... 79
O que necessrio? ................................................................................................................................ 80
Lio 1: O que PHP ................................................................................................................................... 80
O que PHP? ........................................................................................................................................... 80
Como funciona o PHP? ............................................................................................................................ 80
Lio 2c: Servidores ..................................................................................................................................... 82
Opo 1: Servidor remoto de hospedagem ............................................................................................ 82
Opo 2: Instalao de PHP no seu computador .................................................................................... 82
Opo 3: XAMPP ..................................................................................................................................... 82
Lio 2c-2: Instalao de XAMPP ................................................................................................................ 82
Download ................................................................................................................................................ 82
Instalao ................................................................................................................................................ 83
Teste ........................................................................................................................................................ 85
Problemas mais comuns ......................................................................................................................... 85
O servidor Apache no inicia ............................................................................................................... 85
Lio 3c: Sua primeira pgina PHP .............................................................................................................. 86
Scripts PHP .............................................................................................................................................. 86
Examplo: Hello World! ............................................................................................................................ 86
Exemplo: Agora! ...................................................................................................................................... 88
Lio 4c: Trabalhando com datas e horas ................................................................................................... 91
Funes para data e hora ........................................................................................................................ 91
A hora : 1358202025 ............................................................................................................................. 91
Mas afinal qual a utilidade prtica? ........................................................................................................ 93
Loop "while" ............................................................................................................................................ 94
Loop "for" ................................................................................................................................................ 95
Loops dentro de loops ............................................................................................................................. 96
-
Lio 6c: Condicionais ................................................................................................................................. 96
If... ........................................................................................................................................................... 97
if ... else ... ............................................................................................................................................... 97
if ... elseIf ... else... ................................................................................................................................... 99
switch ... case .......................................................................................................................................... 99
Lio 7c: Comentando seus scripts ........................................................................................................... 101
Por que importante comentar os scripts?.......................................................................................... 101
Como inserir comentrios? ................................................................................................................... 101
Lio 8c: Arrays ......................................................................................................................................... 102
O que array? ....................................................................................................................................... 102
Como usar um array? ............................................................................................................................ 102
Loop por um array ................................................................................................................................. 104
Como encontrar o tamanho de um array ............................................................................................. 104
Outro exemplo ...................................................................................................................................... 104
Lio 9c: Funes ...................................................................................................................................... 105
O que funo? .................................................................................................................................... 105
Exemplo 1: Funo com vrios parmetros .......................................................................................... 106
Exemplo 2: Data e hora em ingls ......................................................................................................... 106
Lio 10c: Passando variveis no URL ....................................................................................................... 107
Como isto funciona?.............................................................................................................................. 107
Como recuperar o valor de uma varivel com PHP? ............................................................................. 107
Vrias variveis no mesmo URL ............................................................................................................ 108
Lio 11: Passando variveis com uso de formulrios .............................................................................. 109
: Para o elemento form destinado a marcar um formulrio esto previstos, entre outros,
dois atributos de suma importncia, so eles: action e method. ......................................................... 109
Formulrio em uma pgina HTML ......................................................................................................... 109
Dados do usurio e condicionais ........................................................................................................... 110
Exemplo: Formulrio de contato .......................................................................................................... 113
Lio 12c: Sesso ....................................................................................................................................... 114
Session ................................................................................................................................................... 114
Exemplo de uso de sessions .................................................................................................................. 114
Sistema de login com uso de sesso ..................................................................................................... 115
Lio 13c: Cookies ..................................................................................................................................... 116
O que cookie? ..................................................................................................................................... 117
-
Como a informao armazenada no cookie? ..................................................................................... 117
Como se recupera o valor de um cookie? ............................................................................................. 117
Quem pode ler um cookie? ................................................................................................................... 118
Exemplo de cookie ................................................................................................................................ 118
Lio 14c: Sistema de arquivos ................................................................................................................. 119
Diretrios ............................................................................................................................................... 120
Lio 15c: Ler arquivos de texto ................................................................................................................ 121
Abrir um arquivo de texto ..................................................................................................................... 121
Exemplo 1: Ler uma linha de um arquivo de texto ............................................................................... 121
Exemplo 2: Ler todas as linhas de um arquivo de texto ....................................................................... 122
Exemplo 3: Diretrio de links ................................................................................................................ 122
Lio 16c: Escrever em arquivos de texto ................................................................................................. 123
Abrir um arquivo de texto para escrever .............................................................................................. 124
Exemplo 1: Escrever uma linha no arquivo de texto ............................................................................. 124
Exemplo 2: Escrever um bloco de texto em um arquivo de texto ........................................................ 125
Conexo com o Banco de Dados ........................................................................................................... 127
Lio 18c: Criando Banco de Dados e suas Tabelas .................................................................................. 128
Criar Banco de Dados e Tabelas com PHP ............................................................................................. 128
Criar Banco de Dados e Tabelas com phpMyAdmin ............................................................................. 129
Lio 19c: Inserindo dados em um Banco de Dados ................................................................................. 130
Inserir dados com SQL ........................................................................................................................... 131
Exemplo: Inserir dados de uma pessoa na Tabela ................................................................................ 131
Inserir uma entrada de usurio no Banco de Dados ............................................................................. 132
Erros mais comuns ................................................................................................................................ 132
Tipo de dado incorreto ...................................................................................................................... 133
Comandos SQL com aspas e barras ................................................................................................... 133
Lio 20c: Extraindo dados de um Banco de Dados .................................................................................. 134
Consultas SQL ........................................................................................................................................ 134
Exemplo 1: Extrair dados de uma tabela .............................................................................................. 134
Exemplo 2: Ordem de sada alfabtica, cronolgica ou nmerica. ....................................................... 135
Extrair dados segundo uma condio ................................................................................................... 136
Exemplo 3: Catlogo de endereos ....................................................................................................... 137
.......................................................................................................... 137 Cdigo para o arquivo list.php
.................................................................................................... 137 Cdigo para o arquivo person.php
-
Lio 21c: Apagando dados de um Banco de Dados ................................................................................. 138
Apagando dados com SQL ..................................................................................................................... 139
Exemplo: Apagar um dado .................................................................................................................... 139
Lio 22c: Atualizando dados em um Banco de Dados ............................................................................. 139
Atualizando dados com SQL .................................................................................................................. 140
Exemplo: Atualizando campos da tabela "people" ............................................................................... 140
Alguns termos vistos ................................................................................................................................. 142
$_COOKIES (Variveis COOKIES) ........................................................................................................... 142
$_GET (Varivel GET) ............................................................................................................................. 142
$_POST (Varivel POST) ........................................................................................................................ 143
Addslashes ............................................................................................................................................. 143
Array ...................................................................................................................................................... 145
closedir .................................................................................................................................................. 146
Date ....................................................................................................................................................... 147
timestamp ............................................................................................................................................. 149
echo ....................................................................................................................................................... 151
Else ........................................................................................................................................................ 152
elseif/else If ........................................................................................................................................... 153
Feof ........................................................................................................................................................ 155
Fgets ...................................................................................................................................................... 156
Fileatime ................................................................................................................................................ 157
Filemtime .............................................................................................................................................. 157
Filesize ................................................................................................................................................... 158
Fopen ..................................................................................................................................................... 159
mode .................................................................................................................................................. 159
use_include_path .............................................................................................................................. 160
context ............................................................................................................................................... 160
For ......................................................................................................................................................... 161
Foreach .................................................................................................................................................. 163
Unpacking nested arrays with list() ................................................................................................... 165
fwrite ..................................................................................................................................................... 167
Fread ..................................................................................................................................................... 168
If ............................................................................................................................................................ 170
Mail ........................................................................................................................................................ 170
-
Exemplo #1 Enviando email. ............................................................................................................. 172
Exemplo #3 Enviando email com um parmetro adicional da linha de comando. ........................... 172
Mysql_close ........................................................................................................................................... 174
Exemplo #1 Exemplo mysql_close() .................................................................................................. 174
Mysql_connect ...................................................................................................................................... 174
Exemplo #1 Exemplo mysql_connect() ............................................................................................. 175
Exemplo #2 Exemplo mysql_connect() usando a a sintaxe servidor:porta ....................................... 175
Exemplo #3 Exemplo mysql_connect() usando a sintaxe ":/caminho/para/socket" ........................ 176
Mysql_fetch_array ................................................................................................................................ 176
Exemplo #1 Consulta com nomes de campos duplicados usando alias............................................ 177
Exemplo #2 mysql_fetch_array() com MYSQL_NUM ....................................................................... 177
Exemplo #3 mysql_fetch_array() com MYSQL_ASSOC ..................................................................... 177
Exemplo #4 mysql_fetch_array() com MYSQL_BOTH ....................................................................... 177
Mysql_query .......................................................................................................................................... 178
Exemplo #1 Consulta Invlida ........................................................................................................... 178
Mysql_select_db ................................................................................................................................... 179
Example #1 mysql_select_db() example ........................................................................................... 180
Opendir ................................................................................................................................................. 180
Exemplo #1 exemplo de opendir() .................................................................................................... 181
Readdir .................................................................................................................................................. 181
Exemplo #1 Listando todos os arquivos de um diretrio .................................................................. 182
Set Cookies ............................................................................................................................................ 182
Exemplo #1 Exemplo de setcookie() para enviar cookies ................................................................. 183
Exemplo #2 Exemplo de setcookie() para deletar cookies ............................................................... 184
Exemplo #3 setcookie() e arrays ....................................................................................................... 184
Problemas comuns: ........................................................................................................................... 185
Swithc .................................................................................................................................................... 185
Exemplo #1 switch structure ............................................................................................................. 186
Exemplo #2 switch structure allows usage of strings ....................................................................... 186
Time ....................................................................................................................................................... 188
Exemplo #1 time() example .............................................................................................................. 188
United Nations ...................................................................................................................................... 188
User-definition fuction .......................................................................................................................... 189
Exemplo #1 Pseudo-cdigo de demonstrao de uma funo ......................................................... 189
-
Exemplo #2 Funes definidas condicionalmente ............................................................................ 189
Exemplo #3 Funes dentro de funes ........................................................................................... 190
Exemplo #4 Funes Recursivas ........................................................................................................ 190
While ..................................................................................................................................................... 191
Links de Referncia ................................................................................................................................... 191
1. $_COOKIES (Variveis COOKIES): http://php.net/manual/pt_BR/reserved.variables.cookies.php . 192
2. $_GET (Varivel GET): .................................................................................................................... 192
3. $_POST (Varivel POST): ............................................................................................................... 192
4. Addslashes: .................................................................................................................................... 192
5. Array: ............................................................................................................................................. 192
6. Closedir: http://php.net/manual/pt_BR/function.closedir.php ....................................................... 192
7. Date: .............................................................................................................................................. 192
8. Echo: http://php.net/manual/pt_BR/function.echo.php ................................................................. 192
9. Else: ............................................................................................................................................... 192
10. Elseif/Else If: .............................................................................................................................. 192
11. Explode: ..................................................................................................................................... 192
12. Feof: http://php.net/manual/pt_BR/function.feof.php ............................................................... 192
13. Fgets: http://php.net/manual/pt_BR/function.fgets.php ............................................................ 192
14. Fgets: http://php.net/manual/pt_BR/function.fgets.php ............................................................ 192
15. Fileatime: http://php.net/manual/pt_BR/function.fileatime.php ............................................... 192
16. Filemtime: http://php.net/manual/pt_BR/function.filemtime.php ............................................. 192
17. Filesize: http://php.net/manual/pt_BR/function.filesize.php ...................................................... 192
18. Fopen: http://php.net/manual/pt_BR/function.fopen.php ......................................................... 192
19. Fopen: http://php.net/manual/pt_BR/function.fopen.php ......................................................... 192
20. For: ............................................................................................................................................ 192
21. Foreach: ..................................................................................................................................... 192
22. Fread: http://php.net/manual/pt_BR/function.fread.php ........................................................... 192
23. Fwrite: http://php.net/manual/pt_BR/function.fwrite.php ......................................................... 192
24. If: ............................................................................................................................................... 192
25. Instalao e Configurao (PHP): http://php.net/manual/pt_BR/install.php .............................. 192
26. Instalando Servidor PHP no Mac OSX: http://php.net/manual/pt_BR/install.macosx.php ......... 192
27. Instalando Servidor PHP no Unix: http://php.net/manual/pt_BR/install.unix.php ...................... 192
28. Instalando Servidor PHP no Windows: http://php.net/manual/pt_BR/install.windows.php ...... 192
29. Mail:........................................................................................................................................... 192
-
30. Manipulao de Sesso: ............................................................................................................ 192
31. Manual do PHP: http://php.net/manual/pt_BR/index.php .......................................................... 192
32. MYSQL - Criar Auto Increment (Ingls): http://dev.mysql.com/doc/refman/5.0/en/example-auto-
increment.html ......................................................................................................................................... 192
33. MYSQL - Criar Blob e Tipos de Textos (Ingls):
http://dev.mysql.com/doc/refman/5.5/en/blob.html ............................................................................. 192
34. MYSQL - Criar Char e Varchar (Ingls): http://dev.mysql.com/doc/refman/5.5/en/char.html ... 192
35. MYSQL - Criar Data-base (Ingls): http://dev.mysql.com/doc/refman/5.5/en/create-
database.html ........................................................................................................................................... 192
36. MYSQL - Criar Primary Key e Unix (Ingls): http://dev.mysql.com/doc/refman/5.5/en/constraint-
primary-key.html ....................................................................................................................................... 192
37. MYSQL - Criar Tabela (Ingls): http://dev.mysql.com/doc/refman/5.5/en/create-table.html .... 192
38. MYSQL - Criar Time (Ingls): http://dev.mysql.com/doc/refman/5.5/en/time.html ................... 192
39. MYSQL - Criar Tipos Numricos (Ingls): http://dev.mysql.com/doc/refman/5.5/en/numeric-
types.html ................................................................................................................................................. 192
40. MYSQL - Date, Datetime e Timestamp: http://dev.mysql.com/doc/refman/5.5/en/datetime.html
192
41. Mysql_close: http://php.net/manual/pt_BR/function.mysql-close.php ...................................... 192
42. Mysql_connect: http://php.net/manual/pt_BR/function.mysql-connect.php ............................ 192
43. Mysql_fetch_array: http://php.net/manual/pt_BR/function.mysql-fetch-array.php .................. 192
44. Mysql_query: http://php.net/manual/pt_BR/function.mysql-query.php ................................... 193
45. Mysql_select_db: http://php.net/manual/en/function.mysql-select-db.php ............................. 193
46. Opendir: http://php.net/manual/pt_BR/function.opendir.php ................................................... 193
47. Readir: http://php.net/manual/pt_BR/function.readdir.php....................................................... 193
48. Set Cookies: http://php.net/manual/pt_BR/function.setcookie.php ........................................... 193
49. Swithc: ....................................................................................................................................... 193
50. Time: .......................................................................................................................................... 193
51. United Nations: http://pt-br.html.net/tutorials/php/unitednations.txt ...................................... 193
52. User-definition fuction: ............................................................................................................. 193
53. While: ........................................................................................................................................ 193
54. XAMPP para Linux: .................................................................................................................... 193
55. XAMPP para Mac OSX: .............................................................................................................. 193
56. XAMPP para Windows: http://www.apachefriends.org/en/xampp-windows.html ................ 193
Agradecimentos e Esclarecimentos .......................................................................................................... 193
-
Introduo ao HTML
As pessoas imaginam que muito difcil construir um website. Isto no
verdade! Qualquer um pode aprender como construir um website. Se voc continuar lendo, estar apto a construir um website em uma hora.
Outros pensam - erroneamente - que necessrio softwares avanados e caros para construir websites. verdade que existem muitos softwares capazes de criar um website para voc. Alguns mais fechados que outros. Mas, se voc pretende trilhar o caminho certo, dever criar voc mesmo o website. Felizmente, isto simples voc j tem a sua disposio todos os softwares que presisa.
O objetivo deste tutorial fornecer os conhecimentos bsicos que permitiro construir um website de forma correta. O tutorial parte do zero e no requer qualquer conhecimento prvio de programao.
O tutorial no ensina tudo. Assim necessrio que voc se empenhe, pratique e consolide os ensinamento aqui contidos. Mas, no se aborrea - aprender como construir um website divertido e bastante satisfatrio quando voc trilha o caminho certo de aprendizado.
Como tirar o melhor proveito do tutotial uma deciso sua. Ns sugerimos que voc estude somente duas ou trs lies por dia e pratique bastante tudo o que voc aprender em cada lio.
Lio 1: Vamos comear
Nesta primeira lio apresentaremos as ferramentas necessrias construo de um website.
O que necessrio?
muito provvel que voc j tenha as ferramentas que precisa.
Voc tem um "navegador". Navegador um programa que permite visualizar e navegar por pginas na Internet. Voc est lendo est pgina em um navegador.
No importa qual navegador voc usa. O mais comum o Microsoft Internet Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.
Voc j deve ter ouvido falar ou at mesmo pode j ter usado programas tais como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos anunciam que podem -
-
criar websites para voc. Por ora, esquea estes programas! Eles no tm qualquer utilidade para voc na tarefa de codificar seu website.
Voc precisar de um simples editor de textos. Se voc tem instalado o Windows, poder usar o Notepad, que normalmente pode ser encontrado no menu Programs em Accessories (Programas Acessrios) - se voc no tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou TextEdit (Mac).
Notepad um editor de texto bsico e simples, mas excelente para codificao, porque no interfere no que voc est digitando. Com ele o controle todo e somente seu. O problema com programas que criam o website para voc, que eles vm com uma srie de funes pr-instaladas para voc escolher. Tudo dever ser projetado para se encaixar nestas funes padro. Assim, muitas vezes no possvel criar exatamente aquilo que voc planejou. Ou - mais frustrante ainda - os programas inserem modificaes no cdigo que voc cria. Usando o Notepad ou qualquer editor de textos simples voc o nico responsvel pelos acertos ou pelos erros do seu cdigo. Um navegador e o Notepad (ou editor similar) so tudo o que voc precisa para acompanhar este tutorial e construir seu website.
Preciso estar online?
No. Voc no precisa estar conectado Internet - tanto para ler este tutorial como para construir seus websites.
Se voc quer desconetar-se enquanto l este tutorial, voc poder imprimir ou simplesmente desconectar-se da Internet enquanto l a tela. Voc pode construir seu website no HD do seu computador e fazer o upload para a Internet quando terminar.
Lio 2a: O que HTML?
HTML a "lngua me" do seu navegador. Resumindo uma longa histria, HTML foi criado em 1990, por um cientista chamado Tim
Berners-Lee. A finalidade inicial era a de tornar possvel o acesso e a troca de informaes e de documentao de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lanou as fundaes da Internet tal como a conhecemos atualmente.
HTML uma linguagem que possibilita apresentar informaes (documentao de pesquisas cientficas) na Internet. Aquilo que voc v quando abre uma pgina na Internet a interpretao que seu navegador faz do HTML. Para visualizar o cdigo HTML de uma pgina use o menu "View" (Ver) no topo do seu navegador e escolha a opo "Source" (Cdigo fonte).
Para quem no conhece, o cdigo HTML pode parecer complicado, mas este tutorial ir tornar as coisas claras para voc.
Para que devo usar o HTML?
Se voc quer construir websites ter que conhecer HTML. Mesmo que voc use um programa para criar seu website, tal como o Dreamweaver, um conhecimento bsico de HTML ser necessrio para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notcia que HTML fcil de aprender e de usar. A partir das duas prximas lies voc j ter aprendido como construir seu primeiro website.
HTML usado para construir websites. simples!
-
OK, mas o que significa H-T-M-L? HTML a abreviatura de "HyperText Mark-up Language" - e isto tudo o que voc precisa saber
por enquanto. Contudo, vamos detalhar isto. Hyper o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caado por
gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ao tinha que esperar a prxima linha de comando para executar a prxima ao e assim por diante de linha em linha. Com HTML as coisas so diferentes - voc pode ir de onde estiver para onde quiser. Exemplificando: no necessrio que voc tenha visitado o site MSN.com antes de visitar o site HTML.net.
Text texto e no h mais nada a acresentar. Mark-up significa marcao e o texto que voc escreve. Voc cria a marcao da mesma
forma que escreve em um editor seus cabealhos, marcadores, negrito, etc Language significa linguagem e exatamente o que HTML ; uma linguagem. A
linguagem HTML usa muitas palavras do ingls. Neste tutorial voc aprender XHTML (Extensible HyperText Mark-up Language) que nada mais
do que uma maneira mais bem estruturada de escrever HTML. Agora que voc j sabe o que HTML (e XHTML) vamos comear aplicando eles para: construir
websites.
Lio 3a: O que so tags HTML?
Tags so rtulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags tm o mesmo formato: comeam com um sinal de menor "". Genericamente falando, existem dois tipos de tags - tags de abertura: e tags de
fechamento: . A diferena entre elas que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento ser processado
segundo o comando contido na tag. Mas, como toda regra tem sua exceo, aqui no HTML a exceo que para algumas tags a
abertura e o fechamento se d na mesma tag. Tais tags contm comandos que no necessitam de um contedo para serem processados, isto , so tags de comandos isolados, por exemplo, um pulo de linha conseguido com a tag .
HTML tag - e nada mais do que tags. Aprender HTML aprender como usar as diferentes tags.
Voc pode mostrar alguns exemplos?
OK, a tag informa ao navegador que todo o texto colocado entre e deve ser mostrado em negrito. (O comando "b" uma abreviao para "bold" - negrito.)
Exemplo 1:
Este texto deve ser em negrito.
Vai ser apresentado no navegador, como mostrado a seguir: Este texto deve ser em negrito.
-
As tags , , , , e informam ao navegador que trata-se de um cabealho (h vem de "heading" - cabealho ), sendo o cabealho de primeiro nvel e aquele apresentado com o maior tamanho de texto, o cabealho de segundo nvel e aquele apresentado com tamanho de texto um pouco menor e o cabealho de sexto nvel e aquele apresentado com o menor tamanho de texto.
Exemplo 2:
Este um ttulo
Este um sub ttulo
Vai ser apresentado no navegador, como mostrado a seguir:
Este um ttulo
Este um subttulo
As tags devem ser escritas com letras maisculas ou minsculas?
Para a maioria dos navegadores indiferente se voc usa maiscula, minscula ou mesmo uma mistura delas., ou normalmente tem o mesmo efeito. Contudo a maneira correta usar minsculas. Ento, crie o hbito de escrever suas tags com minsculas.
Onde devo colocar todas estas tags? Voc deve escrever suas tags em um documento HTML. Um website constituido por um ou
mais documentos HTML. Quando voc navega na Web, voc est abrindo diferentes documentos HTML. Se voc passar para a prxima lio, em dez minutos estar construindo seu primeiro website.
-
Lio 4a: Criando seu primeiro website
Na lio 1 vimos o que
necessrio para construir um website: um
navegador e o Notepad (ou um editor de
texto similar). Uma vez que voc esta
lendo esta pgina, provavelmente est
com seu navegador aberto. Agora abra
outra janela do seu navegador de modo
que voc tenha duas janelas na tela, uma
para ler este tutorial e outra para
visualizar o website que voc vai
construir.
Abra tambm o Notepad ( Iniciar Programas Acessrios): Agora, estamos prontos para comear!
O que posso fazer? Vamos comear com algo simples.
Que tal uma pgina que diga: "Hurrah! Esta a minha primeira pgina web." Continue e voc ver como isto simples de fazer.
HTML simples e lgico. O navegador l HTML de modo idntico ao que voc l um texto qualquer, de cima para baixo e da esquerda para a
direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na pgina e termina com a ltima coisa a aparecer.
A primeira coisa a fazer dizer ao navegador que voc vai "falar" com ele na linguagem HTML. Isto feito com a tag (nenhuma novidade nisto). Ento, antes de mais nada digite "" na primeira linha do documento, no Notepad.
Como sabemos das lies anteriores, uma tag de abertura e deve ser fechada com a tag de fechamento quando voc acabar de digitar seu documento HTML. Para termos certeza que no iremos esquecer de fechar a tag HTML, faa isso agora mesmo, digitando "" localizada a algumas linhas abaixo, assim voc ir escrever seu documento entre as tags digitadas e .
A prxima coisa que o documento precisa um "head" (cabea), que fornece informaes sobre o documento e um "body" (corpo), que abriga o contedo do documento. Como HTML no seria nada se no fosse lgico, a "cabea" ( e ) fica em cima do "corpo" ( e ).
Seu documento agora est como mostrado abaixo:
-
Notar como estruturamos o cdigo em linhas diferentes (usar a tecla Enter para pular para
prxima linha) e tambm a endentao (recuos) do cdigo (usar a tecla Tab para endentar). A princpio no faz qualquer diferena a maneira como voc estrutura (linhas e recuos na digitao) seu documento HTML. Mas um cdigo bem estruturado mais fcil de ler e entender, altamente recomendado que voc adote uma estrutura clara e ntida para seu HTML, usando linhas e endentao (recuos), como mostrado no exemplo acima.
Se o seu documento est como o mostrado acima, voc construiu sua primeira pgina web - uma pgina particularmente chata e provavelmente nada parecido com o que voc sonhou em fazer quando comeou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que voc fez ser um template base para seus futuros documentos HTML.
At aqui tudo bem, mas como colocar contedo no meu website? Como voc j aprendeu, seu documento HTML composto de duas partes: um head e um
body. Na seo head voc escreve informaes sobre a pgina e na seo body voc coloca as informaes que constituem a pgina.
Por exemplo, para dar um ttulo ao documento, ttulo este que aparea no topo da barra do navegador voc dever usar a seo"head". A tag para acresentar um ttulo :
Minha primeira pgina web
Notar que o ttulo no aparece na pgina propriamente dita. Tudo que voc quer que aparea
na pgina contedo e dever ser colocado entre as tags "body". Conforme combinamos, queremos uma pgina dizendo, "Hurrah! Esta a minha primeira
pgina web." Este o texto que queremos comunicar e ele dever ser colocado na seo body. Ento digite na seo body o seguinte:
Hurrah! Esta a minha primeira pgina web.
A letra p na tag a abreviatura para "paragraph" (pargrafo) que exatamente o que o
texto - um texto pargrafo. Seu documento HTML agora est como mostrado a seguir:
Minha primeira pgina web
Hurrah! Esta a minha primeira pgina web.
Pronto! Voc acaba de construir seu primeiro website!
-
Agora basta que voc salve seu trabalho no HD e depois visualize no navegador:
No Notepad v ao menu "Arquivo" no topo da janela e escolha a opo "Salvar como...".
Escolha "Todos os arquivos" no box "Salvar como tipo". Isto muito importante - caso voc no faa isto, o arquivo ser salvo como texto e no como documento HTML.
Salve seu documento com o nome "page1.htm" (a extenso ".htm" indica que se trata de um documento HTML. A
extenso ".html" d o mesmo resultado. Eu sempre uso ".htm", mas voc pode escolher a que voc preferir .htm ou .html). Voc pode salvar o documento onde voc quiser no seu HD - esteja certo de salvar em um lugar que depois voc possa achar com facilidade.
Agora v ao seu navegador: No menu existente no topo do navegador v em "Arquivo" e escolha a opo "Abrir" (CTRL+O). Clique em "Procurar" no box que aparece.
Localize o seu documento HTML e clique em "Abrir".
Voc dever ver no seu navegador: "Hurrah! Esta a minha primeira pgina web." Parabns!
Se voc quer que o mundo todo veja sua pgina, v direto para a Lio 14 e aprenda como fazer upload da sua pgina para a Internet. Se no, tenha pacincia e continue lendo. A brincadeira apenas comeou.
Lio 5a: O que voc j aprendeu?
Comece sempre com o template bsico que construmos na lio anterior:
-
Coloque sempre o ttulo do seu documento na seo head: Ttulo da sua pgina. Ver na figura abaixo como o ttulo aparece no topo superior esquerdo do navegador:
O ttulo muito importante porque usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:
Na seo body voc escreve o contedo da sua pgina. Voc conhece algumas das mais importantes tags:
usado para pargraos.
Torna o texto negrito.
Cabealho
Subttulo
Sub-subttulo
Lembre-se, o nico caminho para aprender HTML por ensaio e erro. Mas, no se preocupe, voc no destruir seu computador e nem a Internet. Ento, faa seus experimentos e testes - esta a melhor maneira de ganhar experincia.
O que significa isto? Ningum se tornar um bom criador de websites aprendendo os exemplos contidos neste
tutorial. O que voc aprender neste tutorial simplesmente o bsico para criao - para se tornar um bom desenvolvedor voc dever descobrir caminhos por si mesmo em maneiras criativas.
Ento mos obra. Comece suas experincias com tudo que voc aprendeu at agora.
O que fazer agora?
-
Tente criar algumas pginas. Por exemplo, construa uma pgina com um ttulo, um cabealho, algum texto, um subttulo e mais algum texto. No h nada contra fazer uma consulta no tutorial para construir as pginas, ou seja, a "cola" permitida. Porm, mais a frente, tente criar sem consultar - "cola" no permitida.
Lio 6a: Mais tags HTML
E a? Voc construiu algumas pginas como sugerimos na lio anterior? No? Sim? Bem, a seguir um exemplo:
Meu website
Um cabealho
texto, texto texto, texto
Subttulo
texto, texto texto, texto
E agora? Agora vamos aprender mais sete tags. Voc j sabe que pode obter negrito com a tag , agora saiba que pode obter itlico - letras
inclinadas - com a tag . J percebeu no ?, "i" vem de "italic".
Exemplo 1: Este texto deve ser itlico.
Ser renderizado no navegador assim:
Este texto deve ser itlico.
De modo similar voc pode fazer seu texto com letra menores usando a tag :
Exemplo 2: Este texto deve ser com letras em tamanho small.
Ser renderizado no navegador assim:
Este texto deve ser com letras em tamanho small.
-
Posso usar vrias tags simultaneamente? Sim voc pode usar quantas tags queira desde que as aninhe convenientemente. Veja como
fazer isto no exemplo abaixo: Exemplo 3:
Para escrever um texto em negrito e itlico faa como mostrado a seguir:
Texto em negrito e itlico.
E no assim:
Texto em negrito e itlico.
Observe que no primeiro exemplo a primeira tag de abertura corresponde a ltima tag de fechamento , e o alinhamento est certo. Isto evita confuso para quem escreve o cdigo e para o navegador que l o cdigo.
Mais tags! Como foi dito na Lio 4 existem tags que so abertas e fechadas em nica tag. Estas tags so
comandos isolados, ou seja, no contm nenhum texto dentro delas para poder funcionar. Um exemplo a tag que serve para criar uma quebra de linha:
Exemplo 4: Um texto e mais texto em nova linha
Ser renderizado no navegador assim: Um texto
e mais texto em nova linha
Notar que a tag escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: . A princpio podemos escrever tambm (sem contedo), mas para que complicar?
Outra tag de comando que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - rgua horizontal ): Exemplo 5:
Ser renderizado no navegador assim:
Exemplo 6:
Um item de lista
Outro item de lista
Ser renderizado no navegador assim: Um item de lista Outro item de lista
Exemplo 7:
-
Primeiro item da lista
Segundo item da lista
Ser renderizado no navegador assim: 1. Primeiro item da lista 2. Segundo item da lista
Uau! Isto tudo? Sim, por enquanto isto tudo. Aconselhamos, novamente, a fazer seus prprios experimentos,
construindo algumas pginas usando as sete tags ensinadas nesta lio: Itlico
Texto tamanho small
Pula linha
Linha Horizontal
Indentao
Lista
Lista ordenada
Item de lista
Lio 7a: Atributos
Como voc deve estar lembrado, uma tag um comando para o navegador (por exemplo, um comando para mudar de linha). Em algumas tags voc pode ser mais especfico, acresentando na tag, informaes adicionais de comando. Isto feito atravs dos atributos.
Exemplo 1:
Eu adoro HTML
Atributos so escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas so
declaradas as informaes do atributo. As informaes quando mais de uma, devem ser separadas por ponto e vrgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.
Como isto?
Existem vrios atributos. O primeiro que voc aprender o atributo style. Com o atributo style voc pode adicionar estilizao e layout ao seu website. Por exemplo, uma cor de fundo:
Exemplo 2:
-
O cdigo acima renderiza uma pgina com cor de fundo vermelha - v em frente! experimente
voc mesmo, construa uma pgina vermelha. A seguir explicaremos como funcionam as cores. Notar que algumas tags e atributos usam nomes do idioma ingls dos E.U.A. muito importante
que voc use os nomes exatamente como mostrados neste tutorial - se voc mudar uma letra que seja, o navegador no ir entender seu cdigo. importante tambm que voc no se esquea de fechar as aspas nas informaes do atributo.
Como a pgina ficou vermelha? No exemplo acima ns usamos o cdigo "#ff0000" para fazer a pgina na cor vermelha. Eate o
cdigo para a cor vermelha no sistema chamado de nmeros hexadecimal (HEX). Cada cor representada por um nmero hexadecimal. A seguir alguns exemplos:
Branco: #ffffff Preto: #000000 Vermelho: #ff0000 Azul: #0000ff Verde: #00ff00 Amarelo: #ffff00
Um cdigo hexadecimal para cores formado por um sinal # seguido de seis dgitos e/ou letras.
Existe mais de 1000 cdigos HEX e no fcil decorar o cdigo para todas as cores. Para facilitar as coisas ns desenvolvemos uma carta com as 216 cores mais usadas na web: Carta das 216 cores seguras para a Web.
Para algumas cores, voc pode usar o nome das cores em ingls (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).
Exemplo 3:
Chega de cores. Voltemos aos atributos.
Quais tags podem usar atributos? Atributos podem ser aplicados maioria das tags. Voc normalmente usar atributos com mais freqncia em algumas tags, tais como a
tag body e raramente usar em outras, como por exemplo, a tag br que um comando para pular de linha e no precisa de nenhuma informao adicional.
Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos so empregados em tags especficas enquanto outros servem para vrias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vrios tipos.
Isto pode parecer um pouco confuso, mas medida que voc for praticando vai constatar que tudo fcil e lgico, bem como vai verificar as inmeras possibilidades que os atributos oferecem.
Este tutorial apresentou a voc, os atributos.
Ento, quais so as partes que constituem uma tag? A constituio bsica de uma tag denominada elemento (por exemplo p em ). Assim, uma
tag constituida de um elemento (por exemplo), ou por um elemento e um ou mais atributos (por exemplo ). Simples!
-
Lio 8a: Links
Nesta lio voc aprender como construir links entre pginas. Para construir um link voc usa o que tem usado at agora para codificar HTML: uma tag. Uma
simples e pequenina tag com um elemento e um atributo suficiente para voc construir links para onde quiser. A seguir um exemplo de link para o site HTML.net:
Exemplo 1: Aqui um link para HTML.net
Ser renderizado no navegador assim: Aqui um link para HTML.net
O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para "hypertext reference" - referncia a hypertexto - e especifica o destino do link - que normalmente um endereo na Internet ou um arquivo.
No exemplo acima o atributo href tem o valor "http://www.html.net", que o endereo completo do site HTML.net e chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser includo nas URLs. A frase "Aqui um link para HTML.net" o texto mostrado no navegador como link. Lembre-se de fechar a tag com um .
Como so os links entre minhas prprias pginas?
Se voc quer construir links entre pginas de um mesmo website voc no precisa escrever o endereo completo de cada pgina (URL). Por exemplo, se voc tem duas pginas (vamos cham-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretrio voc constri um link de uma para a outra usando somente o nome do arquivo no link. Nestas condies, um link da pgina1.htm para a pagina2.htm como mostrado abaixo:
Exemplo 2: Aqui um link para a pagina 2
Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link como mostrado abaixo:
Exemplo 3: Aqui um link para a pagina 2
Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a seguir:
Exemplo 4: Aqui um link para a pagina 1
"../" aponta para o diretrio a um nvel acima do arquivo onde foi feito o link. Seguindo o
mesmo princpio voc pode apontar para dois (ou mais) nveis acima, escrevendo ../../". Como alternativa voc pode usar sempre o endereo completo do arquivo (URL).
Como so os links dentro de uma mesma pgina? Voc pode criar links internos, dentro da prpria pgina - por exemplo, uma tabela de
contedos ou ndice com links para cada um dos captulos em uma pgina. Tudo o que voc precisa usar o atributo id e o smbolo "#".
-
Use o atributo id para marcar o elemento que o destino do link. Por exemplo: Cabealho 1
Voc agora pode criar um link que leve quele elemento usando o smbolo "#" no atributo do
link. O smbolo "#" informa ao navegador para ficar na mesmo pgina que est. O smbolo "#" deve ser seguido pelo valor atribudo a id para onde o link vai. Por exemplo: Link para o cabealho 1
Tudo fica claro com um exemplo:
Exemplo 5:
Link para cabealho 1
Link para cabealho 2
Cabealho 1
Texto texto texto texto
Cabealho 2
Texto texto texto texto
Ser renderizado no navegador assim (clique nos dois links): Link para cabealho 1 Link para cabealho 2
Cabealho 1
Texto texto texto texto
Cabealho 2
Texto texto texto texto
(Nota: O nome de um atributo ID deve comear com uma letra)
Posso criar link para mais alguma coisa?
Voc pode criar link para um endereo de e-mail. Isto feito de modo semelhante aos links para documentos.
Exemplo 6: Enviar e-mail para nobody em HTML.net
-
Ser renderizado no navegador assim:
Enviar e-mail para nobody em HTML.net
A nica diferena que no lugar do endereo do documento voc escreve mailto: seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail padro do usurio aberto com o endereo do link j digitado na linha para destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de e-mail instalado na sua mquina. Faa uma experincia com este tipo de link clicando no exemplo acima.
Existem outros atributos que eu deva conhecer?
Par criar links voc sempre usa o atributo href. Adicionalmente voc pode usar um title (ttulo) para seu link:
Exemplo 7: HTML.net
Ser renderizado no navegador assim: HTML.net O atributo title usado para fornecer uma breve descrio do link. Se voc - sem clicar no link -
colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda HTML".
Lio 9a: Imagens
O que voc acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua pgina?
Talvez, mas muito fcil de fazer. Tudo o que voc precisa da nossa j conhecida tag:
Exemplo 1:
Ser renderizado no navegador assim:
O que voc tem a fazer dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).
Notar que a tag imagem do tipo comando isolado, isto , uma s tag de abertuta e fechamento. Semelhante a tag que no precisa de um texto inserido nela. "tim.jpg" o nome do arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso do tipo de imagem. Tal como a extenso ".htm" para arquivos de
-
documentos HTML, ".jpg" informa ao navegador que o arquivo uma imagem. So trs os tipos de imagens que voc pode inserir na sua pgina:
GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Em geral imagens GIF so melhores para grficos e desenhos e imagens JPEG so melhores para
fotografia. Existem duas razes para isto: primeiro, imagens GIF so constituidas por 256 cores, e imagens JPEG por milhes de cores, segundo, imagens GIF so melhores otimizadas para imagens simples ao passo que imagens JPEG so melhores otimizadas para imagens complexas. Quanto melhor a compresso tanto menor o tamanho do arquivo e tanto mais rpido a pgina carregada no navegador. Como voc deve saber por experincia prpria, pginas desnecessariamente "pesadas" para carregar so frustantes para o usurio.
Tradicionalmente os formatos GIF e JPEG tm sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG em vrios aspectos melhor que os formatos JPEG e GIF: milhes de cores e efetiva compresso.
Onde consigo minhas imagens? Para criar suas prprias imagens voc precisa de um programa de edio de
imagens. Um programa de edio de imagens a ferramenta essencial para criao de websites com grande impacto visual.
Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, voc deve considerar a aquisio do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que so os trs melhores editores de imagens atualmente existentes no mercado.
Contudo, como j dissemos, no h necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, voc poder fazer o download de um exelente editor de imagens chamado Irfan View que freeware, isto , no custa nada.
Ou voc pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para no violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:
1. Clique com o boto direito do mouse na imagem da Internet. 2. No menu que aparece escolha a opo "Salvar imagem como...". 3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".
Faa isto com a imagem abaixo e salve no seu computador no mesmo local onde est localizado seus documentos HTML. (Notar que dever ser salvo o arquivo com formato PNG: logo.png):
Agora voc pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que voc criou neste tutorial.
Isto tudo o que eu preciso saber sobre imagens? Existem mais algumas coisinhas que voc precisa saber.
-
Primeiro voc pode inserir imagens que esto localizadas em outros diretrios ou at mesmo em outros websites:
Exemplo 2:
Exemplo 3:
Segundo, imagens podem ser links:
Exemplo 4:
Ser renderizado no navegador assim: (clique na imagem):
Existem outros atributos que eu deva conhecer? Voc sempre ter que usar o atributo src, que diz ao navegador onde a imagem est localizada.
Alm dele existem alguns outros atributos que podem ser bastante teis quando voc insere imagens em uma pgina.
O atributo alt usado para fornecer uma descrio textual alternativa da imagem caso por alguma razo a imagem no seja renderizada para o usurio. Isto particularmente importante para usurios com restries visuais ou quando a imagem carregada muito lentamente. Em conseqncia, sempre use o atributo alt:
Exemplo 5:
Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando o
usurio passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt a de fornecer uma alternativa textual para imagem. O atributo alt no deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passaro uma mensagem que no descreve a imagem para os usurios com restries visuais.
O atributo title pode ser usado para fornecer uma curta descrio da imagem:
Exemplo 6:
Ser renderizado no navegador assim:
Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa pop-up com o texto "Aprenda HTML no site HTML.net" .
Dois outros atributos importantes so width e height:
-
Exemplo 7:
Ser renderizado no navegador assim:
Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas o pixel. Pixel a unidade de medida usada para medir a resoluo da tela. (As resolues de tela mais comuns so de 800x600 e 1024x768 pixels). Ao contrrio de centmetros, pixel uma inidade de medida relativa que depende da resoluo da tela. Usurios com grande resoluo de tela tero 25 pixels em 1 centmetro de tela enquanto aqueles com baixa resoluo de tela tero os mesmos 25 pixels em 1,5 cm de tela.
Se no forem definidos os valores para width eheight, a imagem ser inserida com seu tamanho real. Com width e height voc pode alterar o tamanho da imagem:
Exemplo 8:
Ser renderizado no navegador assim:
Contudo, o tempo de descarga da imagem ser sempre aquele requerido como se ela tivesse suas dimenses reais, mesmo que voc diminua seu tamanho com uso destes atributos. Assim, voc no deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se voc precisa diminuir a imagem diminua suas dimenses reais em um editor de imagem para tornar suas pginas mais leves e mais rpidas.
Dito isto, acrescentamos que sempre uma boa idia definir os atributos width e height para imagens, pois assim fazendo o navegador reservar o espao para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedncia (antes de descarregar as imagens) como ser o layout da pgina.
Por enquanto isto tudo sobre o Tim Berners-Lee e sobre imagens.
Lio 10a: Tabelas Tabelas so usadas para apresentar "dados tabulares" , isto , informao que deva ser
apresentada em linhas e colunas, de forma lgica. Criar tabelas em HTML pode parecer complicado, mas se voc ficar frio e acompanhar passo a
passo a explicao, ver que tudo evidente - tal como acontece com tudo no HTML.
Exemplo 1:
Clula 1
Clula 2
-
Clula 3
Clula 4
Ser renderizado no navegador assim:
Clula 1 Clula 2
Clula 3 Clula 4
Qual a diferena entre e ? Como voc deve ter visto no exemplo acima, este foi o cdigo HTML mais complicado que
escrevemos at agora. Vamos analisar isto por partes e explicar as diferentes tags: 3 tags bsicas so usadas para inserir tabelas: comea e termina uma tabela. Evidente. significa "table row" - linha de tabela - comea e termina e uma linha horizontal da tabela.
Tambm evidente. significa "table data" - dados da tabela. comea e termina cada clula contida nas linhas da
tabela. Tudo simples e evidente. Eis o acontece no Exemplo 1: a tabela comea com , segue-se uma , que indica o incio
de uma nova linha. Duas clulas so ento inseridas na linha: Clula 1 e Clula 2. A linha termina com e uma nova linha comea imediatamente a seguir. A nova linha tambm contm duas clulas. A tabela termina com .
Para esclarecer: linhas so horizontais e colunas so verticais, ambas contendo clulas:
Clula 1 Clula 2
Clula 3 Clula 4
Clula 1 e Clula 2 formam uma linha. Clula 1 e Clula 3 formam uma coluna. No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabe
top related