HTML e Hipertexto

@ Rui Barreiro – 2008/2009e-mail: [email protected]

Escola Secundária de Tomaz Pelayo

UNIÃO EUROPEIA

Fundo Social Europeu

Módulo 3: Criação de Páginas Web

Sumário:Sumário:

•Conceitos de HTML e hipertexto;

•Criação de uma página em HTML;

•Javascript.

Escola Secundária Tomaz Pelayo - TIC 204/10/23

Hipertexto

Com o aparecimento da World Wide Web, como método de disponibilização de informação trouxe um novo conceito: o Hipertexto;

Os documentos na Web são páginas de Hipertexto, contendo pedaços de texto, imagens, sons e vídeo, podendo conter ponteiros ou “links” para outras páginas;

HTTP (Hypertext Transfer Protocol) – Protocolo para a transferência de hipertexto na Web.


Hipertexto

As páginas WWW estão guardadas nos servidores em ficheiros de texto, escritos em linguagem HTML

VídeoVídeo

FotosFotos

Página de Hipertexto

Página 2

Outras Páginas


HTML - HyperText Mark-up Language

HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee;

Consiste na linguagem utilizada nas páginas Web;

O HTML é uma linguagem de formatação de texto, capaz de ser interpretada pelo browser;

Um documento HTML pode ser criado em qualquer editor de texto, por exemplo, Bloco de Notas do Windows, desde que guardado com a extensão “*.html” ou “*.htm”.


HTML - HyperText Mark-up Language Num documento HTML, os elementos/marcas

de formatação são sempre delimitados pelos caracteres “<“ e “>”;

Um elemento de formatação inicia a aplicação de uma determinada característica a uma zona de texto e deve sempre corresponder a um outro elemento a terminar a aplicação da característica, por ex:

<u>O meu texto sublinhado</u>O meu texto sublinhado


HTML - HyperText Mark-up Language Estrutura da página:

<html><head>…</head>

<body>… </body>

</html>Del

imita

o in

ício

/fim

do

docu

men

to

Delimita o cabeçalho

Marca os limites do corpo do documento

<title>

…

</title>

Delimita o título (aparece no topo

da janela)


As Tags <H>: Headings

Os headings servem para estruturar o documento em títulos. Existem 6 níveis de headings h1, ..., h6.

Exemplo:<html> <head> <TITLE>Um Pequeno Exemplo</TITLE> </head> <body> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </body>

</html>


A Tag <P>: Parágrafo As mudanças de linha no HTML são ignoradas. Uma mudança de

linha necessita da tag <BR>. Para se definir um parágrafo é necessário utilizar a tag <P>. A tag <P> tem um argumento opcional: ALIGN. Pode tomar os

valores CENTER e RIGHT, por omissão é LEFT. Por exemplo:

<P>isto é um parágrafo </P> <P ALIGN=CENTER>isto é outro parágrafo, <BR>mas centrado </P>

Terá o seguinte resultado, com uma linha de intervalo entre os dois parágrafos.:

isto é um parágrafo

isto é outro parágrafo, mas centrado


Formatar o estilo das letras

<B> define texto a bold, ou negrito.<B>Este texto está a negrito.</B>Este texto está a negrito.

<I> define texto a itálico.<I>Este texto está a itálico.</I>Este texto está a itálico.

<TT> define texto com letras de tamanho fixo, tipo Courier.<TT>Este texto está a TT.</TT>Este texto está a TT.


Introduzir Links

Para introduzir links utiliza-se a tag <A>

A tag <A> tem um argumento: HREF que define o URL para o qual se quer fazer o link.

Exemplo:<A HREF=“http://www.estp.edu.pt”>Escola Secundária

Tomaz Pelayo</A>

Escola Secundária Tomaz Pelayo


Referências absolutas e relativas Suponhamos que nos encontramos na seguinte página

www.pagina.pt/inicial.html A referência <A HREF=“estudo.html”>estudo</A> é relativa. E é relativa à página actual. Portanto obtemos

www.pagina.pt/estudo.html Um outro link relativo é

<A HREF=“trabalhos/relatório.html”>relatório</A> O resultado é: www.pagina.pt/trabalhos/relatório.html A referência absoluta para o mesmo endereço seria:

<A HREF=“http://www.pagina.pt/trabalhos/relatório.html”>relatório</A> A vantagem das referências relativas é a mobilidade do trabalho,

pois todas as páginas são relativas à primeira.


Inserção de imagens

Para a inserção de imagens utiliza-se a tag img.

Esta tem como atributo obrigatório o SRC; que define a localização da imagem a inserir e os opcionais: WIDTH e HEIGHT; que definem a largura e altura da imagem. Por omissão estes valores são os definidos pela imagem.

Exemplo: <IMG SRC=“imagem.jpg” WIDTH=50 HEIGHT=50>


Composição de Tags

O HTML permite que se componham tags.

Por exemplo, um link que é uma imagem.

<A HREF=“http://ruibarreiro.wordpress.com”><IMG SRC=“logo.gif”></A>


Backgrounds

Pode-se definir uma cor ou uma imagem para o fundo da página. Para definir a cor ou a imagem de fundo configura-se a tag Body. Exemplo: formatar a cor de fundo para vermelho.

<body bgcolor=“red”> Exemplo: formatar o fundo com a imagem img.jpg

<body background=“img.jpg”> Existem várias cores pré-definidas: white, black, blue, etc. Quem

quiser cores diferentes pode utilizar a palete RGB, por exemplo, bgcolor=“#FF02DF”. Os dois primeiros digitos definem a quantidade de vermelho em hexadécimal (00 a FF), os segundos de verde e os terceiros de azul.


Algumas Cores em Hexadecimal

Branco: #FFFFFF Amarelo: #FFFF00

Preto: #000000 Magenta: #FF00FF

Cinza: #999999 Azul claro: #00FFFF

Vermelho: #FF0000 Laranja: #FF6600

Verde: #00FF00 Verde escuro: #006600

Azul: #0000FF Azul escuro: #000066


Javascript

O Javascript é uma linguagem de script que é incorporada nas etiquetas Html;

Permite incrementar a apresentação e interactividade das páginas Web;

Javascript é então uma extensão do código HTML das páginas Web;

Estes scripts vão ser gerados e executados pelo próprio browser sem fazer apelo aos recursos de um servidor.


Javascript

<html><head>

<Title> Teste Javascript</title></head><script language=“JavaScript”>

Alert (“Atenção: Esta é uma mensagem Javascript”);</script><body>

<p>Pagina de Teste Javascript!</p></body>

</html>


Jogo em Javascript<html>

<head><title> Adivinhe o número </title><SCRIPT LANGUAGE="Javascript">var num=Math.round(100*(Math.random()));var num_in, x=50, tentativas=0;while(true){

num_in=prompt("Adivinhe o numero? (0-100):",x);tentativas++;if (num_in==num) break;if(num_in>num){

alert("Grande demais! Tente de novo...");} else {

alert("Pequeno demais! Tente de novo...");}x=num_in;

}document.write("Numero: ",num);document.write("<br>Acertou em ",tentativas," tentativas!<br>");</script>

</head><body>

Prima F5 para jogar de novo ...</body>

</html>

Documents

HTML e Hipertexto