0792 Criao de pginas para a web em hipertexto

HTML
 HTML
As pessoas imaginam que muito difcil construir um website.
Isto no verdade! Qualquer um pode aprender como
construir um website.
Outros pensam - erradamente - que necessrio softwares
avanados e caros para construir websites. verdade que
existem muitos softwares capazes de criar um website para
voc. Felizmente, isto simples e voc j tem a sua
disposio todos os softwares que precisa.
O objetivo deste mdulo fornecer os conhecimentos bsicos
que permitiro construir um website de forma correta.
 HTML
No necessrio qualquer conhecimento
prvio de programao.
Claro que no vai aprender tudo, pois, tal
como quando aprendeu a ler, primeiro eram
letras soltas, depois slabas e s em seguida
que j sem ajuda de professor/formador,
conseguiu ler palavras que nunca viu.
 HTML
Ferramenta necessria, claro, um
computador.
Navegador(Browser) um programa que
permite visualizar e navegar por pginas
na Internet.
Agora precisar de uma ferramenta que
ajude a escrever o cdigo HTML. Um
simples editor de texto serve. Nas sesses
iremos utilizar o NOTEPAD(Bloco de
notas) que est includo no seu
computador nos ACESSRIOS DO
WINDOWS.
No precisa de ter internet para criar a
pgina.
 HTML

O que HTML?
HTML a "lngua me" do seu navegador.
HTML foi inventado 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
HTML uma linguagem que possibilita apresentar informaes
(documentao de pesquisas cientficas) na Internet.
Aquilo que vm quando abrem 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).
 HTML
PRIMEIRA PERGUNTA, O QUE SIGNIFICAM AS LETRAS H-T-M-L?
H yper - 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.

T ext - texto e no h mais nada a acresentar.

M ark-up - significa marcao e o texto que escrevem. Criam a

marcao da mesma forma que escrevem em um editor, seus
cabealhos, marcadores, negrito, etc.

L anguage - significa linguagem e exatamente o que HTML ; uma

linguagem. A linguagem HTML usa muitas palavras do ingls
 HTML
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 "<" e acabam com um sinal de maior ">". Existem
dois tipos de tags - tags de nicio(abertura): <comando> e tags
de fim(fecho): </comando>. A diferena entre elas que na
tag de fim(ou encerramento) existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag
de fecho ser processado segundo o comando contido na tag.
 HTML
O que so tags HTML?

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 salto de
linha conseguido com a tag <br />.

HTML tag - e nada mais do que tags.

Aprender HTML aprender como usar as diferentes tags.

 HTML

EXEMPLOS
A tag <b> informa ao navegador que todo o texto colocado
entre <b> e </b> deve ser mostrado em negrito.
(O comando "b" uma abreviao para "bold" - negrito.)

<b>Este texto deve ser em negrito.</b> Linha de programa

Este texto deve ser em negrito O que aparece no ecr

 HTML

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao

navegador que trata-se de um cabealho (h vem de "heading" -
cabealho ), sendo
<h1> o cabealho de primeiro nvel e aquele apresentado
com o maior tamanho de texto,
<h2> o cabealho de segundo nvel e aquele apresentado
com tamanho de texto um pouco menor e
<h6> o cabealho de sexto nvel e aquele apresentado com o
menor tamanho de texto.
 HTML

Exemplo 2:

<h1>Este um ttulo</h1> <h2>Este um sub ttulo</h2>

Linha de programa

Este um ttulo
O que aparece no ecr
Este um subttulo
 HTML

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.
<COMANDO>, <comando> ou <CoMaNdo> 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?

Devem escrever suas tags em um documento HTML. Um
website constitudo por um ou mais documentos HTML.
Quando voc navega na Web, esto abrindo diferentes
documentos HTML.
 HTML

CRIANDO SEU PRIMEIRO WEBSITE

Abrir o NOTEPAD
 HTML
Gravar o ficheiro como index.htm ou index.html
Para dizermos ao navegador que estamos a falar com ele,
temos de introduzir, antes de mais nada a tag <html>, na
primeira linha do documento. No esquecer de no final, colocar
a tag de encerramento </html>.
NOME do ficheiro

Espao para
desenvolver o
nosso site
 HTML
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"
(<head> e </head>) fica em cima do "corpo"
(<body> e </body>).

As tabulaes ou espaos
so uma forma de
organizar a linguagem
 HTML
Agora iremos preencher o nosso site
Em primeiro lugar queremos
dar a identificao que
aparece na barra do
navegador, para isso existe a
tag <title> e claro </title>.
At agora deixmos um
espao entre a abertura e o
encerramento da tag, mas
quando a tag para dar um
simples comando, podemos
colocar na mesma linha e o
contedo entre elas .
 HTML
Agora 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:

<p>Espectculo! Esta a minha primeira pgina web.</p>

A letra p na tag <p> a abreviatura para "paragraph"

(pargrafo) que exatamente o que o texto - um texto
pargrafo.

Agora o programa tem o seguinte aspeto:

 HTML

No navegador aparecer da seguinte forma:

 HTML
Ttulo

Contedo
 HTML
O ttulo muito importante porque usado pelos mecanismos
de busca (tais como o Google) para indexar seu website.

Agora desloque pasta onde gravou o ficheiro

index.htm, ou index.html, e abra no navegador e ver
o resultado da sua primeira pgina
 HTML
TAGs at ao momento j tomou conhecimento de algumas
tags

<p> usado para pargraos.</p>

<b>Torna o texto negrito.</b>
<h1>Cabealho</h1>
<h2>Subttulo</h2>
<h3>Sub-subttulo</h3>
 HTML

Crie este exemplo:

<html>
<head>
<title>Meu website</title> </head>
<body>
<h1>Nome</h1>
<p>texto, texto, texto, texto</p>
<h2>Morada</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
 HTML

Mais tags

<i>Este texto deve ser itlico.</i>

<small>Este texto deve ser com letras em tamanho small.</small>
<b><i>Texto em negrito e itlico.</i></b>
Um texto<br /> e mais texto em nova linha
<hr /> - linha hotizontal

<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
 HTML

tags

<i>Itlico</i>
<small>Texto tamanho small</small>
<hr /> - Linha Horizontal
<blockquote>Tabulao</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>
<li>Item de lista</li>
http://pt-
br.html.net/tutorials/html/lesson6.php
 HTML

tags

<br /> - Muda de linha esta tag pode ser escrita de forma
semelhante s outras, ou seja, <br></br>, mas como s
para mudar de linha, a forma mais fcil a primeira.
 HTML
ATRIBUTOS

O QUE UM ATRIBUTO?
Tal como j foi referido, uma tag um comando para o navegador
(por exemplo, <br /> 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(cor, tamanho, tipo, etc.).

background ser a cor de fundo

<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>
 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.
Poderemos ver isso no diapositivo seguinte.
 HTML

ATRIBUTOS

O primeiro que voc aprender o atributo style. Com o

atributo style voc pode adicionar aspeto diferente ao seu
website. Por exemplo, uma cor de fundo:
<html>
<head></head>
<body style="background-color:#ff0000;">
</body>
</html>
 HTML
Cada cor representada por um nmero hexadecimal
Exemplo:
Branco: #ffffff
Preto: #000000 (zeros)
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.
HTML
HTML
 HTML
LINKS
O que eu preciso para construir um link?

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.

Exemplo: Aqui um link para a pgina do CIFOTIE

<a href="http://www.cifotie.com/">
</a> href abreviao para
"hypertext reference"
a- "anchor" - ncora
 HTML
No caso da formao, quando fizerem um site com diversas
pginas, podem distingui-las por page1, page2, page3, etc., ou
pelo contedo.
Como so os links dentro de uma mesma pgina?
Podem ser criados 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:

<h1 id="heading1">Cabealho 1</h1>

<a href="#heading1">Link para o cabealho 1</a>
 HTML
EXEMPLO:

<html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabealho 1</a></p>
<p><a href="#heading2">Link para cabealho 2</a></p>
<h1 id="heading1">Cabealho 1</h1>
<p>Texto texto texto texto</p>
<h1 id="heading2">Cabealho 2</h1>
<p>Texto texto texto texto</p>
</body>
</html>
 HTML

Aspecto da pgina

Link para cabealho 1

Link para cabealho 2
Cabealho 1
Texto texto texto texto
Cabealho 2
Texto texto texto texto
 HTML
Criar um link para um mail?
<a href="mailto:formador.veira@gmail.com">Enviar e-mail para o Formador de TIC</a>

Link com indicaes

<a href="http://www.cifotie.com/" title="Visite cifotie.com e inscreva-se nos

cursos HTML">www.cifotie.com</a>
 HTML

IMAGENS
Como sabem, muitas vezes uma imagem vale mais do que mil
palavras, por isso devemos fazer uso delas na criao de sites.
<img src="http://www.cifotie.com/wp-
content/themes/estreia/media/logo_cifotie.gif" alt=CIFOTIE"
/>

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

Poder inserir imagens de trs tipos:

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