1.WEB-Manual Ficha 1

Tecnologias de Informao e Comunicao

O Formador: Nuno Santos

UFCD 0792: Criao de pginas para a web em hipertexto

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.

Delegao Regional do Centro

Centro de Emprego e Formao Profissional do Pinhal Interior Norte

Servio de Emprego e Formao Profissional de Arganil

Elaborar pginas para a web, com recurso a hipertexto.

2





Cursos de Aprendizagem O Formador: TIC - UFCD 0792: Criao de pginas para a web em hipertexto Nuno Santos

Conceitos gerais de HTML Ligaes Formatao de texto com HTML Imagens Multimdia na web Animao na web Desenho de pginas web Tabelas Frames Mapas

3






Uma pgina Web uma pgina na World Wide Web, com ligaes de hipertexto que permitem a navegao de uma pgina, ou seco, para outra. As pginas usam com frequncia ficheiros grficos associados para fins de ilustrao, e tambm estes ficheiros podem ser ligaes clicveis.

Uma pgina Web apresentada com o recurso a um navegador, ou browser, e pode ser construda de forma a recorrer a applets (subprogramas que correm dentro da pgina), que muitas vezes fornecem grficos em movimento, interao com o utilizador e som.

4






Uma dificuldade no desenho e teste de pginas Web torn-las adequadas a muitos navegadores e definies, e s diferentes resolues de ecrs.

5






Para criar um website/pgina so usados editores de pginas web.

Estes podem ser de dois tipos:

Editores WYSIWYG (j deves ter ouvido falar de um

exemplo Microsoft FrontPage).

Editores HTML (vamos ver de seguida o que o HTML).

6






Os editores WYSIWYG (What You See Is What You Get) so programas para a criao e edio de websites que permitem ver na sua janela, o aspeto com que o site vai ser apresentado aps a sua publicao.

Estes editores permitem ao utilizador, de uma forma acessvel e sem dominar uma linguagem de programao, desenvolver websites com aparncia profissional. Todo o cdigo necessrio ao funcionamento do website automaticamente gerado.

Editores WYSIWYG:

FrontPage; Dreamweaver; Easy Website Pro; BlueVoda; CoffeeCup; Etc.

7






Estes editores so, essencialmente, editores de texto, embora alguns apresentem funcionalidades acrescidas, como a gerao automtica de cdigo, a insero de cdigos de outras linguagens de programao e a pr-visualizao da pgina.

A utilizao dos editores de HTML implica um conhecimento prvio da sintaxe desta linguagem. Com este conhecimento, consegue-se um maior controlo sobre a criao das pginas web.

Editores HTML:

Notepad++; Bloco de notas; Visual Workshop; Crimson Editor; Site Builder tsWebEditor; LightPad; Etc.

8






O HTML uma linguagem de programao, utilizada para construir pginas web.

A sigla HTML significa: HiperText Markup Language

O HTML foi desenvolvido no incio dos anos 90 e foi sofrendo sucessivas evolues.

Em 1996 foi estandardizado pela W3C World Wide Web Consortium.

9






O HTML no utilizado isoladamente na programao das pginas Web. O HTML a base das pginas, e a complement-lo existem outras linguagens tais como o CSS, o JavaScript, o PHP, entre outras.

O HTML, ao contrrio de outras linguagens de programao, no compilado nem criado um executvel.

O HTML uma linguagem que interpretada.

O software que interpreta o HTML e mostra o resultado da converso do cdigo chama-se navegador ou browser.

Exemplos de browsers:

Internet Explorer Mozilla Firefox Google Chrome

10






A extenso dos ficheiros de HTML .html ou .htm

Para criar ficheiros em HTML pode utilizar-se, por exemplo, o Notepad ++ ou o Bloco de Notas, e depois s guardar os ficheiros com a extenso .html ou .htm

Depois, quando o mesmo aberto por um browser, o browser vai percorrer todas as linhas de cdigo do ficheiro e vai transformar as instrues do cdigo em texto (de vrios tamanhos e cores), imagens, tabelas, hiperligaes, animaes, etc

Por defeito, na maioria dos sistemas operativos, um ficheiro de HTML distinguido pela da extenso html ou htm, pelo que, quando se tenta abrir um ficheiro deste tipo, imediatamente ativado o browser predefinido, de forma a poder visualiza-lo.

11






12






Olhando para o esquema da pgina anterior, vejamos, de uma forma muito resumida, como funciona o acesso as pginas da Web atravs de um browser.

Do lado do computador que acede ao sistema (que, com o seu browser, atua como cliente), este comea por (1) enviar um pedido de um documento HTML a um servidor, atravs do envio para a rede de um endereo URL (Universal Resource Locator).

O pedido canalizado pela Internet (2) at ao servidor indicado no endereo.

O servidor, ao receber o pedido (3), procura a pgina indicada (no caso de esta no ser indicada, e aberta a pgina principal ou homepage do servidor). Em seguida, a pgina correspondente resposta (4) enviada para a Internet e, da, (5) conduzida at ao computador que fez o pedido. Por fim, (6) o browser apresenta a pgina recebida.

13






As instrues bsicas do HTML chamam-se TAGS.

Uma tag uma instruo com uma determinada funo, que vai ser interpretada pelo browser, e vai ter efeitos sobre a estrutura da pgina, sobre o texto, sobre uma imagem, uma hiperligao, etc

As tags colocam-se sempre entre os sinais de < (menor) e > (maior).

Dependendo do facto de terem que ser fechadas ou no, as tags dividem-se em dois grupos:

nicas - quando no existe a tag de fecho.

Duplas quando existe uma tag de fecho, que igual de abertura, mas tem uma barra / a seguir ao sinal de menor.

14






Dependendo das opes (argumentos) que as tags podem ter, elas podem ainda ser classificadas como:

Simples quando so constitudas apenas pelo sinal de

Com argumentos quando a seguir ao nome da tag tm uma ou mais instrues com indicaes complementares sobre a formatao do texto, do fundo, dos limites, etc

Os argumentos so eles tambm instrues para o browser. Os argumentos so constitudos pelo nome, seguidos do sinal de igual, e pela condio de formatao entre aspas. Os vrios argumentos separam-se por um espao.

nome_do_argumento=condio

15






Um documento em HTML comea e termina sempre com a tag

.

.

.

Dentro destas tags, temos duas seces bsicas:

HEAD controla as especificaes do cabealho de uma pgina. Uma tag muito utilizada no HEAD a tag TITLE, que permite escrever o ttulo da pgina.

BODY controla as especificaes da parte principal de uma pgina.

16






Primeira pgina em HTML

Esta minha primeira pgina em HTML!

HEAD

BODY

1.WEB-Manual Ficha 1

Documents

Transcript of 1.WEB-Manual Ficha 1