1

Apostila Programador Web v4.0 Prof. Alexandre Unterstell – alexunter@gmail.com – www.alex.inf.br

Antes de começar a desenvolver um site na internet é importante que conheçamos alguns fatores importantes

que contribuirão para que o resultado final seja sucesso de público e crítica. Pontos a serem analisados:

Site Responsivo.

Existem diversas resoluções de vídeo em diversos dispositivos, a home page deve ser do tamanho da área do browser, sem necessitar de barras de rolagem. Site ou layout responsivo, ou também conhecido como site flexível é quando o site automaticamente se encaixa no dispositivo do usuário (PC, celular, tablet, etc). Um site responsivo muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. Então, se

o usuário tem uma tela pequena, os elementos se reorganizam para lhe mostrar as coisas principais em primeiro lugar. Em smartphones a navegação e experiência do usuário fica difícil e limitada tendo que usar recursos de zoom in e out para ler a página na integra. Outros detalhes como botões e menus ficam deselinhados pois não foram feitos para esse dispositivo ou resolução.

Principais Resoluções de telas

Tempo de carregamento da página.

Procure manter as páginas (incluídas imagens) do seu site abaixo de 800 Kbytes Considere que para uma conexão “Banda Larga”, com velocidade de 1Mbps, a velocidade estimada para download é de

100Kb/segundo. EX:

A img011.jpg tem 4Mb de tamanho, quanto tempo levaria para carregar em uma internet com velocidade de 2Mbps?

Layout das páginas.

A página inicial deve responder facilmente sobre o que se trata o site, o que esse site oferece (produtos, serviços, entretenimento) e o que o usuário pode fazer nele (encontrar informações, realizar compras, entrar

em contato, etc.). Quanto mais claro e direto, maior a chance de o usuário permanecer no site. È importante o

restante do site mantém o padrão de design do site original

2

Design

O design de um site não é importante apenas para garantir um bom visual, mas deve ser utilizado também para auxiliar no controle da navegação através de técnicas aplicadas com a finalidade de dar maior ou menor foco no conteúdo, de acordo com as necessidades, proporcionando equilíbrio e harmonia. Diversos aspectos são importantes para um design bem feito e um deles é estar coerente com a identidade visual da empresa, de

forma a contribuir para o fortalecimento da marca.

Conteúdo

A principal parte de um site com certeza está no conteúdo. Não importa se você tem um ótimo design, se o

conteúdo deixa a desejar. Ao mesmo tempo que o conteúdo deve ser claro e objetivo para manter a atenção do usuário, deve ser completo e suficiente para que possa repassar toda a informação necessária.

Navegabilidade / Usabilidade

Mantenha em mente que o usuário conta com um número muito grande de fontes de informação e não irá perder muito tempo em um site difícil de navegar. Facilite para o seu público procurando manter no máximo

três níveis para todo o conteúdo. O site pode ser acessado por diversos navegadores em suas enumeras versões, há necessidade de plug-ins?

Acessibilidade.

Seu site deve ser fácil de acessar e navegar para o diverso público existente na web, incluído pessoas com

diversas deficiências e especifidades.

Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e páginas), nesta pasta.

- Se o arquivo que você estiver salvando for a sua página inicial deve-se obrigatoriamente salvá-lo como index (index.html) e tudo em letra minúscula, sem espaços e sem acentos. Os outros arquivos que estarão “pendurados” na home-page podem ser salvos com o nome de sua preferência, mas também devem estar em

letras minúsculas, sem espaços e sem acento!

- Formato de Imagens: Qualidade das cores das imagens apresentadas no site estão intimamente ligadas ao formato de imagem escolhido. As imagens devem ter o tamanho mínimo possível em Kb, Confira a diferença entre alguns formatos

JPG:> É o formato ideal para imagens com grande número de cores como fotografias. Podem apresentar até 16,7 milhoes de cores.

GIF:> O Gif possui um esquema de compressão eficaz especialmente em imagens ou gráficos que usam até 256 cores. Esse formato é usado para logotipos e banners. Os arquivos gifs aceitam cor transparente e animação.

PNG:> pode apresentar até 16,7 milhões de cores, animação e transparência, porem gera um arquivo de tamanho maior SWF:> Arquivo do Flash, ideal para apresentações multimídia com interação.

- O site deve possuir uma barra de navegação que funciona como uma espécie de menu com links para

as seções principais. - Cuidado com as fontes pouco convencionais; para visualizar a sua página com a fonte que você escolheu, o usuário deve possuir esta mesma fonte instalada no computador dele.

Existem basicamente dois tipos de fontes: as com serifa e as sem serifa. As fontes serifadas geralmente se

perdem na resolução dos monitores, tornando-se inadequada a sua utilização. O texto sem serifa não perde resolução e tem mais potencial de velocidade de leitura:

3

Para desenvolver um site na internet o primeiro conceito é do HTML - HyperText Markup Language ou Linguagem de Marcação Hipertexto, Essa linguagem é bastante simples e tem como finalidade básica formatar

o texto exibido e criar ligações entre as páginas da Web, criando assim documentos com o conceito de hipertexto.

História

O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear Research) na

suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa próximas, e compartilhar

documentos com facilidade. Em 1992, foi liberada a biblioteca de desenvolvimento WWW ( World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala mundial da WEB.

O documento em HTML é um arquivo texto comum que pode ser escrito através de qualquer editor de

textos tem a terminação .htm ou .html. Como é uma linguagem interpretada, a partir do momento em que se

salvou o arquivo HTML o mesmo já pode ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito dentro dos padrões da linguagem.

Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela

chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de

comandos específicos da linguagem. Observe que a construção de páginas exigir o uso de marcadores chamados

de “TAGS”. Obs: Recomenda-se o uso de letras minúsculas para as tags e os atributos devem estar em aspas duplas, ex: <body bgcolor=”blue”>

Para entender melhor a Linguagem HTML, usaremos o Notepad +++, mas poderíamos usar qualquer editor de texto como Bloco de Notas, a única exigência e colocar a extensão htm ou html na hora de salvar o arquivo.

ESTRUTURA BÁSICA (HTML 5), DOCTYPE E CHARSETS

A estrutura básica do HTML é sendo a mesma das versões anteriores da linguagem, há apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:

HTML

4

Salve esse arquivo como exe01.htm (ATENÇÃO ESSE É O NOME DO ARQUIVO, ELE DEVE TER A EXTENSÃO HTM OU HTML, para que o Sistema Operacional, interprete que deve abrir o arquivo no navegador padrão) Tags estudadas:

<!DOCTYPE html!> O Doctype deve ser a primeira linha de código do documento antes da tag HTML. O

Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha

informações sobre qual versão de código a marcação foi escrita.

<html> O código HTML é uma série de elementos em árvore onde alguns elementos são filhos

de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag

HTML. <html lang=”pt-br”> O atributo LANG é necessário para que os user-agents saibam qual a

linguagem principal do documento

<head> Marca o início e do fim do cabeçalho onde são inseridas tags utilizadas para indexação do

documento HTML (<title>, <meta>, <script>, <link> e ,base>)

<meta charset=”utf-8”>

É uma metatag responsável por chavear qual tabela de caracteres a página está utilizando

Obs: existem importante metatags que serão analisadas posteriormente.

<title> Utilizada para definir o título da página, que é um dos principais conteúdos indexados

pelas ferramentas de buscas e é o primeiro elemento processado por leitores de tela.

<body> Marca o início e o fim do do corpo da página

Elementos e atributos de HTML em desuso

A World Wide Web Consortium (W3C) é uma comunidade internacional, desenvolve padrões abertos para a

Web e recomenda o desuso de elementos e atributos de rótulos HTML tags.

Os elementos em desuso no HTML eram utilizados como apoio para a camada de apresentação. As

funcionalidades destes elementos são encontradas no CSS, onde este controla eficazmente o design e layout

da camada de apresentação e com isso se mantem a semântica da marcação dos elementos HTML.

Elementos de rótulo HTML em desuso

acronym: acrostinos

applet: Java applet

basefont: Tamanho base de “fonte”

big: fonte grande

center: abreviação para DIV align=center

dir: listagem de diretório

font: estilo de “fonte” inline

frame e frameset

isindex: linha de prompt

menu: menu de lista

noframes:

s: texto riscado

strike: texto riscado

tt: Teletype

u: texto sublinhado

5

Atributos e propriedades em desuso

As recomendações e diretrizes fornecidas pela World Wide Web Consortium (W3C) para melhor acessibilidade

ao conteúdo e informações em páginas de sites e blogs, são para a exclusão dos atributos e propriedades align,

background, bgcolor, color, height e width, de elementos HTML. A definição de valores para os atributos e

propriedades citados são manipuladas por marcação de classes CSS.

Um exemplo de HTML com tags em desuso:

Lembre para visualizar o resultado salve como exe02.html

Tags:

<font> Modifica a formatação do texto.Atributos:

Size = define o tamanho da letra. Ex: <font size=5>Texto</font>

Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>

Color = define a cor da letra. Ex:<font color=red>Texto</font>

<marquee> Cria letreiro em movimento com imagens e textos (TAG descontinuada)

Behavior (Slide, alternate e behavior)especifica o movimento que será usado no letreiro .Veja alguns

dos movimentos:

Bgcolor: Cor de fundo

Direction: Direção na qual o texto irá se mover.A direção pode ter, left, right ,down e up.

Width: É a largura do letreiro.

Height: È a altura do letreiro.

<!—xx --> Insere comentários nas páginas

6

<p> Marca um parágrafo e acrescenta uma linha em branco.

<br> Insere uma quebra de linha

<b> <i> <u> Negrito – itálico e sublinhado

<hr> Insere uma linha horizontal. Atributos: Size = define a altura da linha. Exemplo: <hr size=50> Width = define a largura da linha horizontal. (% ou pixels) Noshade = desenha a linha sem a sombra para dar o efeito de três dimensões. Color = define a cor , para definir a cor devemos usar o nome em inglês (Ex: White, Red, Green,

Blue, Magenta, Cyan, Black, Yellow, violet, etc) ou o código em hexadecimal (veremos nos

próximos exemplos.

OBS: Alguns atributos (color, size, etc) servem para várias tags, como veremos nos próximos

exemplos

Caracteres Especiais Uma página web é vista por diferentes países, que usam conjuntos de caracteres

distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma série de caracteres raros serão bem vistos em todos os computadores do mundo, independentemente de seu jogo de caracteres. Vejam alguns exemplos:

espaço &nbsp; & e comercial &amp;

¨ acento trema &uml; ´ acento agudo &cute;

“ aspas duplas

esquerda &ldquo; ” aspas duplas

direita &rdquo;

– travessão ‘en’ &ndash; — travessão ‘em’ &mdash;

… reticências &hellip; ¦ barra vertical &brvbar;

< Menor &lt; > Maior &gt;

‘ aspas simples

esquerda &lsquo; ’ aspas simples

direita &rsquo;

º ordenal

masculino &ordm; ª ordinal feminino &ordf;

• marcador &bull; ‣ marcador

triangular &#8227;

Veja a lista completa em: http://erikasarti.net/html/acentuacao-caracteres-especiais/

Cores e o código RGB numérico RGB é a sigla para Red, Green, Blue (Vermelho, Verde, Azul), que gera o padrão de cores pelo qual o monitor obtém cores com brilho. A codificação das cores está baseada na mistura cromática. Ou seja, certas

quantidades dessas 3 cores são misturadas para se obter uma determinada cor.as cores podem ser codificadas em diferentes bases. Base 10: O valor de cada componente (R, G e B) deve ser um número inteiro que pode variar entre 0 e 255, gerando um código numérico, em base 10.Exemplo: A cor vermelha é representada por #255 0 0: red

(vermenho): 255, green (verde): 0 e blue (azul): 0.

7

Ao se usar a notação decimal a representação da cor fica extensa. Para evitar isso convencionou-se utilizar a

representação hexadecimal das tonalidades de cada cor. È importante notar que os números hexadecimais devem ser precedidos pelo caractere cerquilha também chamado "sustenido"ou "jogo da velha" (#).

Deste modo cada cor pode variar de 00 a ff na representação hexadeciamal. combinando-se a intensidade das cores do RGB temos a representação da cor. Veja a tabela básica abaixo:

Cor Hexadecimal Cores Claras Hexadecinal Cor Hexadecimal

Branco #FFFFFF Branco-neve #F4F4F4 Cinza #808080

Preto #000000 Cinza-claro #C0C0C0 Amarelo #FFFF00

Azul #0000FF Azul-claro #D9FFFF Amarelo-claro #FFFFF5

Verde #008000 Verde-claro #DEFEDA Roxo-claro #EFDFFF

Vermelho #FF0000 Rosa-claro #FFD5D5

Exe03.htm:

É importante estruturar as páginas de seu site com as tags de cabeçalho, onde a <h1> é a mais importante (e maior), e <h6> é a menos importante, na hierarquia.

Isso é tão útil, que até o Google usa as headings em seu complexo sistema de rankeamento dos resultados de busca, pois ele entende que as keywords em tags H1 e H2 são muito importantes e refletem um resumo do

conteúdo do artigo.

No HTML5, existe um elemento que tem por função agrupar essas tags de cabeçalho, que é a tag hgroup, especialmente voltada para as headings.

8

Listas:

<ol> Marca o início e o fim de uma lista ordenada. Recebem na primeira linha um número ou letra. Devem

ser usados com tag <li>. Atributos:

Start = especifica o número a partir do qual os itens começam a ser contados. Ex: <ol start=3> Type

= modifica o tipo do numerador que pode ser: número, letras ou algarismo romano. Ex: 1, A, a, I, i

<ul> Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista recebem símbolos na

primeira linha. Devem ser usados com tag <LI>. Atributos:

Type = modifica o tipo do marcador (símbolo), que pode ser: Circle = um círculo vazio, Disc = um círculo cheio, Square = um quadrado cheio

Características - tag UL (texto - lista não ordenada)

uso

HTML 4.01 <UL><LI>...</LI></UL>

XHTML <UL><LI>...</LI></UL>

HTML 5 <UL><LI>...</LI></UL>

Formatação Padrão estilo de marcação disco

e xe0l.htm

9

compensação à esquerda 40px

visualização bloco

Atributos Aceitos id, class, lang , dir, title, style

Características - tag OL (texto - lista ordenada)

uso

HTML 4.01 <OL><LI>...</LI></OL>

XHTML <OL><LI>...</LI></OL>

HTML 5 <OL><LI>...</LI></OL>

Formatação Padrão

estilo de marcação decimal

compensação à esquerda 40px

visualização bloco

Atributos Aceitos id, class, lang , dir, title, style

Fonte: w3.org

Imagens

exe07.htm:

<body > Marca o início e o fim do corpo da página. Atributos: Bgcolor = define a cor do fundo da página Text = define a cor do texto padrão da página Background = permite inserir uma imagem como fundo da página Bgproperties = fixa a imagem no fundo da página quando a página é rolada, criando um efeito de

marca d’água.

IMPORTANTE: As imagens devem estar na mesma pasta, onde estará o documento HTML, ou numa

subpasta, se estiver em uma subpasta deve-se mostrar o caminho na html. EX: <body backround=imagens/parede.gif

Nome da pasta Nome da imagem, que deve estar na pasta

10

<img > Insere uma imagem. Atributos

Src: indica o nome da imagem a ser carregado. align=middle centraliza o base do texto

com o centro da imagem align=left faz a imagem flutuar a esquerda enquanto o texto

circunda imagem à direita. align=top alinha o texto no topo align=right faz a imagem flutuar a direita enquanto o texto

circunda imagem à esquerda. alt=”n” indica o texto para ser exibido quando o navegador não

exibe a imagem. Sendo que n é o título que identifique a imagem. Exemplo: <img src=fig.jp

alt=”Esta é uma imagem legal”>

exe08.htm

exe0 9 .htm :

11

Como não foi definido o tamanho da tabela, ela se adapta ao tamanho do conteúdo inserido em suas

células.

Depois de salvo altere a seguinte linha: <table

border=2> <! Aqui começa a Tabela>

Por essa:

<table border=1 width=600 height=50 cellpadding=5 cellspacing=5>

Apesar de usarmos mais tabelas como estrutura básica dos sites. Seu uso continua muito

importante.

<table > Marca o início e o fim de uma tabela. Atributos:

Width: define a largura da tabela ou da célula Height: define a altura da tabela ou da célula Cellpadding: define a margem dentro das células Cellspacing: define o espaço entre as células Bgcolor: define a cor de fundo da tabela ou da célula Border:define a largura da broda da tabela Align: alinha o conteúdo na horizontal (left, center ou right) Valign: (alinha o conteúdo na vertical (top, bottom ou middle) Bordercolor: Define a cor da borda da tabela

<tr> Marca o início e o fim de uma linha

<td> Marca o início e o fim de uma célula (linha)

Também é possível colocar imagens dentro das células: Ex: <td> <img src=foto.jpg> </td>

HTML5 – Tabelas – ESTILOS>>>>

Tabela com células de título

12

Áudio e Vídeo O HTML5 introduz o suporte de mídia embutido por meio dos elementos <audio> e <video>, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.

Incorporando mídia:

Incorporar mídia em documentos HTML é simples:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>

Seu navegador não suporta o elemento <code>video</code>.

</video>

Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

Aqui há um exemplo de áudio incorporado em um documento HTML

<audio src="/test/audio.ogg">

<p>Seu nevegador não suporta o elemento audio.</p>

</audio>

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

<audio src="audio.ogg" controls autoplay loop>

<p>Seu navegador não suporta o elemento audio </p>

</audio>

Esse exemplo de código usa atributos do elemento <audio>:

controls : Mostra os controles padrão para o áudio na página.

autoplay : Faz com que o áudio reproduza automaticamente.

loop : Faz com que o áudio repita automaticamente.

<audio src="audio.mp3" preload="auto" controls></audio>

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

"none" não carrega o arquivo

"auto" carrega o arquivo

"metadata" carrega apenas os meta dados do arquivo

Vários arquivos podem ser especificados utilizando o elemento <source> para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:

<video controls> <source src="foo.ogg" type="video/ogg">

<source src="foo.mp4" type="video/mp4"> Seu navegador não suporta o elemento <code>video</code>.

</video>

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg,

o navegador reproduz o arquivo MPEG-4. Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

<video controls>

13

<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">

Seu navegador não suporta o elemento <code>video</code>. </video>

Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.

Links:

Estamos produzindo páginas de hipertextos, ou seja, textos que podem fazer ligações com outros textos, ligando

páginas entre si e a WEB. Então, estes pontos nós chamamos de links ou hyperlinks, âncoras de hipertexto, todos

com a mesma função, de através de um único clique sobre a frase ou imagem conduzir a algum lugar no site ou

na WEB.

O Tag responsável é o <A>, onde dentro deste, através de um atributo coloco a referência, ou seja, A URL

(Uniform Resource Locator). Para criar um link usamos a seguinte sintaxe: SINTAXE: <A HREF=”URL”>Frase que aparece na página</a>

Onde:

<a> tag que marca o início e o fim do link href= atributo que especifica o nome da referência

Meta tags São linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te

encontrar, por exemplo. Por meio delas, você pode também "assinar" seu site, declarando sua autoria sobre o código fonte.

Cada vez mais os buscadores levam em consideração a qualidade do conteúdo nos resultados de pesquisa, e

por isso simplesmente adicionar meta tags no código fonte da sua página não vai melhorar o posicionamento

dela. Porém, as meta tags ainda tem seu espaço se utilizadas corretamente.

Como utilizar as meta tags

14

Keywords

Nesta tag você deve incluir uma quantidade de palavras que se referem ao conteúdo da página. Mantenha o limite de aproximadamente 150 caracteres. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Sempre separe as palavras com vírgula e declare todas elas em letras minúsculas - alguns buscadores têm

problemas com letras maiúsculas e podem ignorar seu site.

<meta name="keywords" content="sites, web, desenvolvimento, html, design"> Description

Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site. Procure manter

um limite de aproximadamente 90 caracteres.

<meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes">

content-type

Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento

da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é

fundamental para que eles sejam exibidos corretamente. Os valores mais comuns são: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

Author

Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte: <meta name="author" content="Erika Sarti">

Redirecionando o visitante para outra página

Alguma vez você já deve ter visitado um site que mudou de endereço e que exibe uma mensagem do tipo: Você será redirecionado para um novo site em 5 segundos. Se não quiser aguardar, clique aqui.

Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha:

<meta http-equiv="refresh" content=" 5 ;url=http://www.novosite.com/">

Obs: O conceito de formulários em HTML será estudado juntamente com com a linguagem PHP

Scripts

Java Script – JS - É uma linguagem interpretada, que pode ser usada junto com o HTML e permite inserir váios

efeitos, permitindo que o site (ou uma mensagem de correio eletrônico) fique mais dinâmico, e uma maior interação com o leitor.

O código JavaScript, não é compilado, e deve ser colocado, no código fonte, junto com os comandos da linguagem HTML.

Aplicação de um efeito

Script é uma sequência de comandos que deve ser colocada em uma posição determinada na página ou como um arquivo anexado. No último caso terá extensão js.

É importante lembrar que é preciso conhecer uma linguagem de programação para criar um script. Aqui só

modificaremos alguns parâmetros e assim podermos modificar efeitos.

Em geral, a seqüência se inicia com <SCRIPT ... > e termina com </SCRIPT>

Java e JavaScript

Java é uma linguagem de programação e JavaScript é uma linguagem de scripting.

15

Pode-se criar programas reais com Java. Com JavaScript apenas cria-se efeitos que só funcionam dentro de

uma página em HTML, por exemplo.

Assim, pode-se admitir que JavaScript é mais uma extensão do HTML do que outra linguagem de

computação.

Exemplos:

Java01.htm:

-------------------------------------------------------------------------------

<body> <script>

alert("Minha primeira mensagem!")

</script>

<h2> Aparece uma mensagem POP UP <h2>

</body>

Java02.htm:

-------------------------------------------------------------------------------

<html>

<head>

<script type="text/javascript"> function teste(){

var nome = window.prompt("Digite seu Nome"); alert ("Ola " + nome + " , Seja BEM VINDO !! ");

document.write("Olá " + nome);

}

</script>

</head> <body>

<input type="button" onclick="teste();" value="Clique Aqui">

</body> </html>

Java03.htm:

---------------------------------------------------------------------------------------

<body> <script> document.write(new Date()) </script> </body>

-------------------------------------------------------------------------------