Apostila 1

Primeiros Passos Em HTML
Orientador
Osvaldo capelani
Osvaldo Capelani (Técnico em Tecnologia da Informação)

E-mail: osvaldo.capelani@gmail.com
Primeiros Passos Em HTML
HTML significa HyperText Markup Language. Para quem não sabe, o HTML serve
para criar páginas na Internet. Bem, não falar muito sobre tecnicismos e introduções
teóricas. Os melhores tutoriais, e os que eu mais gosto são aqueles mais práticos
em que as pessoas ficam com as idéias na cabeça e não se cansam tão facilmente.
Vamos começar com o tutorial propriamente dito. Primeiro, vocês perguntam: “Mas
como vamos programar HTML? Que programa precisamos?” Essa é a parte
engraçada. Existem vários programas na Internet para programarem HTML e cada
um com as suas vantagens. Mas, para nós, chega perfeitamente o Bloco de Notas
do Windows. Sim, é verdade, podemos criar páginas da Internet no Bloco de Notas
que todos nós utilizamos sempre no Windows.
As principais tags são:
• <html></html>
• <head></head>
• <title></title>
• <body></body>
Vamos ver primeiro como é a estrutura do código, para isso digite as linhas abaixo
no bloco de notas e salve como “meusprimeirospassos.html” sem as aspas. Não
esqueça de colocar a extensão .html.
<html>
<head>
<title>Titulo Teste</title>
</head>
<body>
Meu primeiro trabalho WEB!
</body>
</html>
Vamos agora analisar linha por linha:
<html> - </html> -> Dentro destas duas tags dizemos ao nosso browser (Firefox,
Internet Explorer, etc…) que o código que vamos escrever é em HTML.
<head> - </head> -> Dentro destas duas tags dizemos quais as informações que
vão ser lidas antes de a página ser carregada.
<title>Titulo Teste</title> -> Destro destas duas tags dizemos qual será o título da
nossa página. Neste caso dizemos que é “Titulo Teste”. Pode ser qualquer título.
<body> - </body> -> Dentro destas duas tags é onde se encontra a nossa página. A
página que vemos é programada aqui.
Nada que saber até agora pois não? Isto foi o mais chato do tutorial. Agora vamos
fazer alguns exemplos.

Muita atenção aqui. Se nós guardassemos normalmente, ele guardaria como um
ficheiro de texto, mas se pusermos (nome qualquer).html o Bloco de Notas salvará
como um arquivo de WEB. Vejam a figura. Guardei a nossa página com o nome
“meusprimeirospassos.html“. Façam o mesmo. Agora vão onde guardaram a página
(aconselho o ambiente de trabalho pois é fácil de alcançar). Vão ver o resultado.
Tcharam! Têm aí a vossa primeira página web. Sei que não é lá grande coisa mas
para começar não está mal. Bem vamos melhorá-la. Vamos agora mudar o tipo de
letra. Para isso, vamos adicionar este código.
Vejam o código que adicionei.
<font face=Verdana size=13>Meu primeiro trabalho WEBfont>
Vejamos por partes.
<font… -> Indica que vamos alterar o parâmetro fonte.
… face=Verdana … -> Aqui dizemos que o tipo de letra será “Verdana”. Poderia ser
“Arial”, “Comic Sans”, etc… Foi só para dar um exemplo.
… size=13> -> Dizemos que o tamanho da letra será 13.
Ok, adicionem lá isto à vossa página. Eu espero… Ok, agora que já adicionaram isto
gravem e abram a vossa página.
As letra ficaram um pouco grandes, não foi? Eu sei… o tipo de letra e o tamanho
alteraram. Bem vamos ver só mais um código. Vamos adicionar isto:

Reparem no que adicionei:
<center> … </center> -> Estas tags fazem com que o texto dentro delas fique
centrado.
Agora vamos avançar umpouco mais. Para isso vamos criar uma tabela siples para
inserir. Veja como ela ficará:
Agora vamos ver o código dessa tabela
<html>
<head>
</head>
<body>
<center>
<font face=Verdana size=13>Meu primeiro trabalho WEB!</font>
<table border="1">
<tr>
<td> linha 1 coluna 1 </td>
</tr>
<tr>
</tr>
</table>
</center>
</body>
</html>
A tag <table>……….</table> informa que estamos criando uma tabela.

A tag <tr>..........</tr> informa que estamos criando uma linha na tabela.
A tag <td>..........</td> informa que estamos criando uma coluna na tabela.
Como podemos ver a construção de tabelas é bastante simples. Vamos incrementar

um pouco mais a tabela inserindo uma cor de fundo nas células da tabela:
<html>
<head>
</head>
<body>
<center>
<font face=Verdana size=13>Meu primeiro trabalho WEB!</font>
<table border="1">
<tr>
<td bgcolor=”006666”> linha 1 coluna 1 </td>
</tr>
<tr>
</tr>
</table>
</center>
</body>
</html>
O complemento bgcolor indica que estamos inserindo uma cor no fundo do objeto.
Essa instrução pode ser utilizada em quase todas as tags de HTML.

Se desejar inserir outra cor, basta escolher uma nas tabelas abaixo.
Tabela de Cores para Linguagem HTML
Os códigos de cores são estes:
000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Agora vamos modificar a primeira linha para que possamos inserir uma
imagem posteriormente. O código da tabela ficará como mostrado a seguir:
<table border="1">
<tr>
<td colspan="3" bgcolor=”006666”> linha 1 coluna 1 </td>
</tr>
<tr>
<td bgcolor=”9966AA”> linha 2 coluna 1 </td>
</tr>
</table>
Perceba que na primeira linha foram retiradas duas colunas e, também,

acrescentada a complementação colspan=”3” para juntar as três colunas em uma
somente, veja abaixo como ficou a tabela:

Agora vamos inserir uma imagem na tabela onde juntamos as colunas. Para isso
acrescente as linhas negritadas abaixo.
<table border="1">
<tr>
<td colspan="3" bgcolor="006666"><img src="topo.png" width="750"
height="106"> </td>
</tr>
<tr>
</tr>
</table>
A tag <img src="topo.png" width="750" height="106"> mostra que estamos

inserindo uma imagem <img> localizada scr=”topo.png” com largura width=”750”
e altura heigth=”106” confira o resultado na figura abaixo:
Para ficar com uma aparência melhor vamos apagar a linha onde está escrito Meu
primeiro trabalho WEB! Isso fará com que a página fique localizada na parte
superior do browser.
Criando a Segunda Página

Abra um novo documento do bloco de notas e cole o código abaixo:
<html>
<head>
<title>Minha segunda Página</title>
</head>
<body>
<center>

<table border="1" width="750">
<tr>
<td colspan="3" bgcolor="006666"><img src="topo.png" width="750"
height="106"></td>
</tr>
<tr>
<td valign="top" bgcolor=" EECC44" width="15%"> <a
href="meusprimeirospassos.html" target="_parent">Voltar
</a> </td>
<td colspan="2" bgcolor="EECC44">
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
</td>
</tr>
</table>
</center>
</body>
</html>
Agora vamos salvar esse documento com o nome de segundapagina.html veja

como ela ficou:
Para fazer com que a primeira página chame a segunda é preciso criar um LINK. Os
links servem para vincular o conteúdo de uma página a outra. A sintaxe de criação
de links é a seguinte: <a href=”nomedapagina.html”>nome da pagina</a> No
código da segunda página temos um link pronto veja a linha referente a ele
<a href="meusprimeirospassos.html" target="_parent">Voltar </a>. Quando
visualizamos a página só vemos a palavra “Voltar” e ao clicar sobre essa palavra
vamos para a primeira página. Experimente.
Por último, vamos criar um link na primeira página apontando para a

segundapagina.html
Para abrir novamente o arquivo clique sobre ele com o botão direito e escolha Abrir
com  Bloco de notas e cole as seguintes linhas

<table border="1">
<tr>
<td colspan="3" bgcolor="006666"><img src="topo.png" width="750" height="106">
</td>
</tr>
<tr>
<td bgcolor="9966AA"> <a href="segundapagina.html" target="_parent">
Segunda página</a></td>
<td bgcolor="9966AA"> linha 2 coluna 2 </td>
<td bgcolor="9966AA"> linha 2 coluna 3 </td>
</tr>
</table>
O resultado final das duas páginas é o seguinte:
É isso aí, para obter mais materiais acesse o site www.capelani.info


Apostila 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Apostila 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Primeiros Passos Em HTML

Osvaldo Capelani (Técnico em Tecnologia da Informação)

As principais tags são:

Vamos agora analisar linha por linha:

Osvaldo Capelani (Técnico em Tecnologia da Informação)

Vejam o código que adicionei.

<font face=Verdana size=13>Meu primeiro trabalho WEBfont>

Vejamos por partes.

<font… -> Indica que vamos alterar o parâmetro fonte.

… size=13> -> Dizemos que o tamanho da letra será 13.

Osvaldo Capelani (Técnico em Tecnologia da Informação)

Agora vamos ver o código dessa tabela

A tag <table>……….</table> informa que estamos criando uma tabela.

Como podemos ver a construção de tabelas é bastante simples. Vamos incrementar

Osvaldo Capelani (Técnico em Tecnologia da Informação)

Tabela de Cores para Linguagem HTML

Os códigos de cores são estes:

000000 000033 000066 000099 0000CC 0000FF

Osvaldo Capelani (Técnico em Tecnologia da Informação)

Perceba que na primeira linha foram retiradas duas colunas e, também,

Osvaldo Capelani (Técnico em Tecnologia da Informação)

A tag <img src="topo.png" width="750" height="106"> mostra que estamos

Criando a Segunda Página

Osvaldo Capelani (Técnico em Tecnologia da Informação)

Agora vamos salvar esse documento com o nome de segundapagina.html veja

Por último, vamos criar um link na primeira página apontando para a

Osvaldo Capelani (Técnico em Tecnologia da Informação)

O resultado final das duas páginas é o seguinte:

É isso aí, para obter mais materiais acesse o site www.capelani.info

Osvaldo Capelani (Técnico em Tecnologia da Informação)

Anda mungkin juga menyukai