HTML e Hipertexto
- 1. Módulo 3: Criação de Páginas Web @ Rui Barreiro – 2008/2009 e-mail: [email protected] Escola Secundária de Tomaz Pelayo UNIÃO EUROPEIA Fundo Social Europeu Sumário: Conceitos de HTML e hipertexto; Criação de uma página em HTML; Javascript.
- 2. 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.
- 3. Hipertexto As páginas WWW estão guardadas nos servidores em ficheiros de texto, escritos em linguagem HTML Página de Hipertexto Página 2 Outras Páginas Vídeo Fotos
- 4. 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”.
- 5. 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
- 6. HTML - HyperText Mark-up Language Estrutura da página: <html> <head> … </head> <body> … </body> </html> Delimita o início/fim do documento Delimita o cabeçalho Marca os limites do corpo do documento <title> … </title> Delimita o título (aparece no topo da janela)
- 7. 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>
- 8. 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
- 9. 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.
- 10. 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
- 11. 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.
- 12. 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>
- 13. 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>
- 14. 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.
- 15. Algumas Cores em Hexadecimal Azul escuro: #000066 Azul: #0000FF Verde escuro: #006600 Verde: #00FF00 Laranja: #FF6600 Vermelho: #FF0000 Azul claro: #00FFFF Cinza: #999999 Magenta: #FF00FF Preto: #000000 Amarelo: #FFFF00 Branco: #FFFFFF
- 16. 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.
- 17. 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>
- 18. 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>