HTML / JavaScript V1.0.

Apresentação em tema: "HTML / JavaScript V1.0."— Transcrição da apresentação:

1 HTML / JavaScript V1.0

2 Introdução HTML = HyperText Markup Language HTML é a linguagem de marcação universal para Web. HTML permite que você formate texto, adicione gráficos, crie links, entradas de formulários, frames, tabelas, etc e salve tudo em uma arquivo texto que qualquer navegador pode ler e exibir. A chave do HTML são as tags que indicam qual conteúdo virá em seguida.

3 Conceitos Hipertexto: um documento hipertexto provê links visualmente claros a outros documentos e selecionando um link em um documento nos leva a outra documento Internet: é um sistema global de computadores em rede que permite comunicação entre usuários e transferência de arquivos entre quaisquer duas máquinas da rede

4 Conceitos Multimídia: combina várias tecnologias de apresentação num esforço de apelar aos vários sentidos quanto possível (vale-se de gráficos, sons, animações e vídeos para criar um completa e rica experiência computacional)

5 Serviços básicos da Internet
correio eletrônico FTP: transferência de arquivos WWW: comunicação por meio de hipertexto

6 Modelo Cliente / Servidor
Browser Servidor Web request response Mozilla Firefox Internet Explorer Opera Konqueror Safari Chrome Apache Internet Information Server (IIS)

7 Modelo Cliente-Servidor
Cliente Web (web client)  é o programa responsável para exibição das páginas solicitas pelo usuário Servidor Web (web server)  armazena e permite o acesso aos dados

8 Browser (navegador ou paginador) Exemplos:
Clientes Web Browser (navegador ou paginador) Exemplos: Internet Explorer Mozilla Firefox Opera Safari Konqueror Chrome

9 URL (Uniform Resource Locator)
Permite que cada documento na Web possua uma endereço único que indica o nome do arquivo, diretório, nome do servidor e o protocolo usado para requisição do documento URL = Localizador Uniforme de Recursos

10 Exemplo Onde:  protocolo usado  nome do servidor files_biblioteca  diretório dentro do servidor normalizacao_bibliografica.pdf  nome do arquivo solicitado

11 Protocolos file: um arquivo no PC local
ftp: um arquivo em um servidor FTP http: um arquivo em WWW gopher: um arquivo em um servidor Gopher mailto: um em um servidor de s news: um Newsgroup da UseNet telnet: uma conexão Telnet wais: um arquivo em um servidor WAIS WAIS Wide Area Information Service ou Serviço de Informação de Longa Distância. É um serviço que permite a procura de informações em bases de dados distribuídas, cliente/servidor, através de uma interface bastante simples. Sua principal peculiaridade é a conversão automática de formatos para visualização remota de documentos e dados.

12 Site (Web Site) ou Sítio
Um site WWW é um conjunto de páginas (com uso de hipertexto) relacionados organizadas hierarquicamente onde podemos encontrar informações do um assunto, empresa, etc.

13 Conceitos Website: é uma ou mais páginas Web ligadas de uma forma significativa Web server: é o computador real que armazena o website Web pages: são os elementos individuais de um website, como uma página é para um livro. Home page: em termos de publicação web, é o ponto de entrada ao resto de páginas em um website (é a página inicial ou mais importante)

14 Protocolos HTTP (Hypertext Transport Protocol) FTP (File Transfer Protocol)

15 SGML e HTML SGML (Standard Generalized Markup Language) que é uma linguagem usada para fazer documentos que possam ser lidos em diversas plataformas HTML  é baseada na SGML Não possui uma estrutura rígida e exata Define a estrutura da página estabelecendo suas características

16 Linguagem HTML (Hypertext Markup Language)
Define a estrutura de uma página estabelecendo seu título, texto, listas, subtítulos, localização de imagens, etc. É uma linguagem para criação e manipulação de textos, imagens e não necessita de grande conhecimentos teóricos e lógica de programação

17 Linguagem HTML A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto

18 Linguagem HTML Uma página HTML pode ser criada com uso de qualquer editor de textos porém deve ter a extensão .html ou .htm O .htm (três caracteres de extensão é por razões históricas). Use preferencialmente .html

19 Estrutura básica de uma página HTML
<head> </head> <body> </body> </html> Cabeçalho Documento HTML Corpo Uma página HTML possui um cabeçalho e um corpo.

20 Exemplo <html> </html> <head>
<title>Primeira pagina</title> </head> <body> <p>Primeiro Paragrafo </body> </html>

21 Tags e Atributos Tags (marcações) Atributos
Tags são representadas entre os sinais < e > e finalizadas por </ > Atributos são características dos comandos representados pelas tags. Os atributos podem apresentar parâmetros Exemplo: <INPUT TYPE="text" VALUE=Campinas NAME=‘cidade’ READONLY> A tag INPUT possui os atributos TYPE, VALUE e READONLY com os valores text, Campinas.

22 <h1 align="center"> ... </h1>
Exemplos de tags <h1> ... </h1> <br> <p> <h1 align="center"> ... </h1> nome do atributo

23 Exemplos de editores HTML
Dreamweaver FrontPage NVU Veja outros editores em:

24 Comentários em HTML <!-- [comentário] -->

25 Tags <br>  faz a quebra de uma linha
<p> e </p>  parágrafo <tag />  tag única, sem lista de atributos <tag p1=“val1” p2=“val2” />  tag única, com lista de valores <tag>texto</tag>  par de tags, sem lista de valores e conteúdo inserido entre elas <tag p1=“val1”>texto</tag> par de tags, sem lista de valores e conteúdo inserido entre elas <NOBR> <WBR>

26 Cabeçalhos Cabeçalhos são definidos com as tags <h1> a <h6> <h1> defines o maior cabeçalho enquanto <h6> define o menor cabeçalho. <h1>Este é um cabeçalho</h1> <h2>Este é um cabeçalho</h2> <h3>Este é um cabeçalho</h3> <h4>Este é um cabeçalho</h4> <h5>Este é um cabeçalho</h5> <h6>Este é um cabeçalho</h6>

27 Formatação de Textos Dois tipos de formatação: Lógica Física A idéia dessa separação é a independência entre especificação e apresentação

28 Formação Lógica e Física
A formatação lógica acompanha o significado lógico do texto marcado. Sua apresentação varia em função do navegador usado podendo oferecer resultados distintos A formatação física especifica explicitamente o estilo que se quer o texto, como letras em itálico, negrito, sublinhado, etc.

29 color define a cor da fonte do texto
Tag <font> Atributos: size  tamanho da fonte color define a cor da fonte do texto face  é o nome da fonte que a tag vai apresentar O tag <font> em HTML está deprecated. É suposta sua retirada em um futura versão do HTML. Mesmo que muitas pessoas ainda estejam usando, você deve tentar evitar seu uso e usar estilos ao invés da tag <font>

30 Atributos Atributo Exemplo Proposta
size="número" size="2" Define o tamanho da fonte size="+número " size="+1" Aumenta o tamanho da fonte size="-número " size="-1" Diminui o tamanho da fonte face="nome-da-face" face="Times" Define o nome da fonte color="valor-da-cor" color="#eeff00" Define a cor da fonte color="nome-da-cor" color="red" Define a cor da fonte

31 Padrão de cores RGB (Red, Green, Blue)
Padrões de Cores Padrão de cores RGB (Red, Green, Blue) Padrão de cores CMYK (Cyan, Magenta, Yellow, Black) RGB = R (vermelho), G (verde), B (azul)

32 Algumas cores nomeadas
Black Marron Green Navy Sliver Red Lime Blue Gray Puple Olive Teal White Fuchsia Yellow Aqua Veja para mais detalhes

33 Tags de estilos físicos
<b> (bold) negrito <i> (italic) itálico <tt> fonte de máquina de escrever (monoespaçada) <u> (underline) sublinhado <s> (strikethrough) <b> .. </b> <i> .. </i> <tt> .. </tt> <s> .. </s> <u> .. </u>

34 Parágrafo Tag <p>
<p align="[left|right|center|justify]"> [texto] </p> left – seleciona alinhamento a esquerda right – seleciona alinhamento a direita center – seleciona alinhamento ao centro justify – justifica o texto do parágrafo Exemplo <p>Primeiro parágrafo</p>

35 Em HTML a separação é realizada por meio da tag <hr> Exemplo:
Linha Horizontal As linhas horizontais podem ser usadas para separar visualmente seções de uma página da web. Em HTML a separação é realizada por meio da tag <hr> Exemplo: <hr size="5" width="50%" align="center" noshade> onde size: configura a espessura da linha em pixels width: configura o comprimento da linha align: define o posicionamento da linha noshade: indica que a linha não terá um efeito tridimensional

36 Listas Listas de definição Listas Ordenadas Listas Não ordenadas

37 Listas – de definição É usada para definir termos, criar textos explicativos, dicionários, entre outras funções. Uma lista de definição é composta de duas partes: termo definição

38 Lista de Definição – Exemplo
<dl> <dt> HTML <dd>Hypertext Markup Language <dt>XML <dd> Extensible Markup Language </dl> Resultado HTML Hypertext Markup Language XML Extensible Markup Language DL – Definition Lista (lista de definição) DT – Definition Term (termo a ser definido) DD – Definition Detail (detalhes da definição)

39 Listas - Ordenadas Uso das tags <ol> Exemplo: <ol>
<li>primeiro <li>segundo <li>terceiro </ol> Resultado 1. primeiro 2. segundo 3. terceiro

40 Listas – Não ordenadas Uso das tags <ul> Exemplo: <ul>
<li>primeiro <li>segundo <li>terceiro </ul> Resultado primeiro segundo terceiro

41 A tag <a> (Anchor) e o atributo href
HTML usa a tag <a> (anchor) para criar um link para outro documento. Um anchor (âncora) pode apontar para qualquer recurso na Web: uma página HTML, uma imagem, uma trilha sonora, um clipe, etc. Sintaxe para criação de uma âncora:  <a href="url">Texto para ser exibido</a> Anchor = âncora

42 A tag <a> (Anchor) e o atributo href
A tag <a> é usada para criar uma ligação (vínculo) ao link, O atributo href é usado para endereçar o documento ao qual o endereço está apontando, e as palavras entre o abre e fecha âncora será exibido como o hyperlink.

43 A tag <a> (Anchor) e o atributo href
Esta âncora define um link para página da Policamp: <a href=" A linha acima parecerá como a linha abaixo no browser: Policamp

44 Os links tornam possível a navegação entre páginas.
name="[nome]" href="[url]" title="[titulo]" target="[_blank | _self | _top | nome]" > [âncora] </a> HTML usa hyperlink para ligar a outro documento na Web. Target: _blank _self _top nome

45 Atributos name: marca um indicador, isto é, uma região de um documento como destino de uma ligação href: indica a URL de destino da ligação do hipertexto title target: destino

46 Âncoras – links na mesma página
Âncoras são inseridas pelo atributo name da tag <a>. Exemplo: <a href="#link1">link1</a><br> <a href="#link2">link2</a><br> <a name="link1">djshj asjhja ahdjka asdh <a name="link2">sjdkas asdhkj asjdh ash

47 Imagens <img>  inclui uma imagem em uma página HTML

48 Atributos da tag <IMG>
SRC: URL da imagem que será exibida ALIGN: top | bottom | middle | left | right WIDTH: estabelece a largura da imagem HEIGHT: estabelece a altura da imagem VSPACE: controla o espaço acima e abaixo da imagem HSPACE: controla o espaço a esquerda e a direita da imagem BORDER: define a borda ao redor da imagem ALT: define uma descrição sucinta da imagem LOWSRC

49 Exemplo <img src="angry.gif" alt="Angry"/>

50 Uma tabela é composta por linhas e colunas que formam uma célula.
Tabelas Uma tabela é composta por linhas e colunas que formam uma célula. Essas células podem conter textos, imagens e até mesmo outras tabelas Obs: use   para representar um espaço em branco

51 <table> ... </table>  delimita uma tabela
Tabelas - Tags Tags: <table> ... </table>  delimita uma tabela <caption> ... </caption>  define um título para tabela (é opcional) <tr> ... </tr>  delimita uma linha <td> ... </td>  delimita uma coluna <th> ... </th>  tags de cabeçalho (negrito e centralizado) <td> = table data <th> = table header

52 Tabelas – Tag <table>
[border="n"] [cellpadding="n"] [cellspacing="n" [width="n"] [align="left"|"center"|"right" > ... </table> onde: border: largura da borda (se n=0  a borda não será desenhada) (o número identifica a quantidade de pixels da borda) cellpadding: espaço dentro da célula cellspacing: espaçamento entre as células width="n" --> define a largura mínima da tabela. Width também pode ser definido em "%" da área ocupada pela tela do navegador.

53 Exemplo de Tabela <table> <tr>
<td> linha 1, coluna 1 </td> <td> linha 1, coluna 2 </td> </tr> <td> linha 2, coluna 1 </td> <td> linha 2, coluna 2 </td> </table>

54 Atributos da tag <table>
width: especifica a largura da tabela height: especifica a altura da tabela align: alinha a tabela (left|center|right) valign: alinhamento vertical da célula (top|bottom|middle) bgcolor: cor de fundo background: cor da fonte cellpadding: define o espaço entre a célula e sua borda cellspacing: define o espaço entre as células

55 Atributos (2) border  especifica a largura da borda (use o valor "0" para não exibir as bordas) bordercolor  atualiza a cor da corda bordercolordark  atualiza o componente escuro do efeito 3D bordercolorlight  atualiza o componente claro do efeito 3D

56 Atributos para mesclagem de células
colspan  permite mesclar colunas de uma determinada linha de uma tabela rowspan  permite mesclar as linha de uma determinada coluna de uma tabela Sintaxe <td colspan="n"> ... conteúdo da célula </td> <td rowspan="m"> ... conteúdo da célula </td> onde n representa o número de colunas e m o número de linhas a serem mescladas

57 Áreas das tabelas <thead> .. </thead>  define um table head ou cabeçalho da tabela <tfoot> .. </tfoot>  define um table foot ou rodapé da tabela <tbody> .. </tbody>  define um table body ou corpo da tabela

58 Título da tabela Tag caption Deve ser usado dentro da tag <table>

59 Frames É uma divisão que cria um ambiente onde mais de uma página pode ser vista ao mesmo tempo É possível definir regiões fixas onde podemos colocar informações como o logo da empresa, um menu de navegação (por exemplo) e regiões onde são feitas as navegações

60 Frames Com frames é possível visualizar mais de um documento HTML na mesma janela do browser. Cada documento HTML é chamado um frame e cada frame é independente dos outros Desvantagens no uso de frames: o desenvolvedor Web deve manter o gerenciamento de mais de um documento HTML é difícil imprimir a página inteira

61 Frames Tag Descrição <frameset> Define um conjunto de frames
Define uma sub-janela (um frame) <noframe> Define uma sessão noframe para browsers que não suportam janelas <iframe> Define um sub-janela inline (frame)

62 A tag Frameset A tag<frameset> define como dividir uma janela em frames Cada frameset define um conjunto de linhas ou colunas O valor das linhas/colunas indicam a quantidade da área da tela que cada linha /coluna ira ocupar.

63 Frames - Tags Tag <frameset> é usada para organizar múltiplas janelas Atributos: cols: define o número e tamanho das colunas em um frameset rows: define o número e tamanho das linhas em um frameset

64 A tag <frame> A tag <frame> define que documento HTML será alocado em cada frame No exemplo abaixo temos um frameset com duas colunas. A primeira coluna ocupara 25% da largura da janela do navegador e a segunda coluna ocupara 75% da largura. O documento HTML "frame_a.htm" é colocado na primeira coluna e o documento "frame_b.htm" is colocado na segunda coluna

65 Exemplo <frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset>

66 Formulários Permite aos usuários entrar com dados e assim criar uma interatividade nas páginas HTML. O uso de formulário é muito usado quando tratamos de aplicações web.

67 Formulários Um formulário é uma área que contém elementos de formulários. Elementos de formulários são elementos que permitem ao usuário entrar com informações (como text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc) em um formulário. Um formulário é definido com o tag <form>.

68 Formulários – Tag <form>
name ="[nome]" method ="[get|post]" action ="[url]" enctype="[tipo]" > ... </form>

69 Atributos do Form name: nome do formulário method: GET | POST
GET  dados enviados na URL da página (limite de aproximadamente 2000 bytes) POST  dados enviados como variáveis de ambiente action: determina a URL do destino da ação enctype: determina o tipo de empacotamento que os dados serão submetidos (normalmente é string. Para envio de dados binários usa-se multipart/form-data Quando usamos o método Get os valores das variáveis do form são enviados como parte da URL Quando usamos o método post os dados são enviados por uma variável de ambiente, oculta aos olhos do usuário MIME type: application/x-www-form-urlencoded

70 Método GET os dados inseridos em um formulário fazem parte da URL associada a consulta enviada ao servidor. as informações digitadas nesse modo são visualizados na barra de endereço do navegador Quando usamos o método GET os valores das variáveis do form são enviados como parte da URL

71 Método POST os dados inseridos em um formulário fazem parte do corpo da mensagem encaminhada ao servidor que suporta uma grande quantidade de dados. as informações digitadas nesse modo não são visualizados na barra de endereço do navegador Quando usamos o método POST os dados são enviados por uma variável de ambiente, oculta aos olhos do usuário MIME type: application/x-www-form-urlencoded

72 Entrada de dados através do formulários
Área de textos Lista

73 Tag <input> A tag <input> define o tipo da tag para entrada de dados

74 Tag <input> - Atributos
type – informa qual é o tipo do campo de entrada de dados name – informa qual é o nome do campo value – informa um valor padrão para o campo size – informa o tamanho do campo exibido na tela maxlength – informa o número máximo de caracteres que pode ser digitado no campo id – identidade única para tag Os seguintes atributos são obrigatórios: name, type Atributos opcionais: value, size, maxlength

75 Atributo type text – entrada de texto (linha única)
checkbox – caixa de múltiplas opções radio – caixa de opções simples submit – botão de envio button – botão de uso genérico reset – limpa todos os dados inseridos pelo usuário hidden – campo oculto image – botão imagem password – entrada de senha file – entrada de arquivos

76 Tag input <input type="tipo" name="nome" id="id" value="valor"
size="tamanho" maxlength=[limite de caracteres] checked readonly disabled tabindex= >

77 Text Field (Caixa de entrada de uma linha)
<html> <body> <form action="" name="Form1" method="get"> <p>Nome: <input type="text" name="nome" size="20" /> <br/> <p>Sobrenome: <input type="text" name="sobrenome" size="20" /> </form> </body> </html>

78 Password (Senha) <html> <body> <form action="">
Usuario: <input type="text" name="user" size="20" /> <br /> Senha: <input type="password" name="password" size="20" /> </form> <p> <b>Nota:</b>O navegador exibe asteriscos ou bullets ao invés dos caracteres digitados com campo password. </p> </body> </html>

79 Checkboxes (Caixa de Seleção)
<html> <body> <form action="" name="Form" method="POST"> Eu tenho uma bicicleta: <input type="checkbox" name=“tem_bicicleta" value=“bicicleta" /> <br/> Eu tenho um carro: <input type="checkbox" name=“tem_carro" value=“carro" /> Eu tenho um avião: <input type="checkbox" name=“tem_aviao" value=“avião" /> </form> </body> </html> As caixas de seleção (CheckBox) permitem selecionar ou desativar a opção relacionada a elas. Em uma lista com caixas de seleção, várias opções podem ser selecionadas ao mesmo tempo Sintaxe: <INPUT TYPE="checkbox" NAME="nome" VALUE="valor de retorno">texto da caixa onde: Name Type Value Texto da caixa

80 Radio Button (botão de rádio ou seletor)
<html> <body> <form action="" name="Form" method="POST"> Qual é seu sexo ? <br/> <input type="radio" name="sexo" value="M">Masculino <input type="radio" name="sexo" value="F">Feminino </form> </body> </html> Sintaxe: <INPUT TYPE="radio" NAME="nome do botão de opção" VALUE="valor de retorno">Texto da Caixa onde: name (obrigatório) type (obrigatório) value (obrigatório) texto da caixa (opcional)

81 Button (Botão) <html> <body> <form action=""> <input type="button" value="Hello world!" /> </form> </body> </html>

82 Submit (Botão de envio)
<body> <form name="input" action="form_action.asp" method="get"> Digite seu primeiro nome: <input type="text" name="FirstName" value="Mickey" size="20" /> <br /> Digite seu último nome: <input type="text" name="LastName" value="Mouse" size="20" /> <input type="submit" value="Enviar" /> </form> <p>Utilize a tecla <CTRL> para seleção de mais de um item</p> <p> Se você clicar no botão "Enviar" você enviará sua entrada a uma nova página chamada "form_action.asp". </p> </body> </html>

83 Área de texto (Caixa de texto de rolagem)
<p>Entre com seus comentários: <textarea name="comentarios" rows="6" cols="60" > Entre com seus comentários </textarea> Atributos Obrigatórios: Name – nome do campo de entrada de texto Atributos Opcionais: Value Rows número de linha Cols – número de colunas MaxLength Align

84 Tag select (Menu suspenso (Select e Option))
name ="browser" value="Firefox" size ="2" > <option>Internet Explorer</option> <option value=“firefox”>Firefox</option> <option value=“opera”>Opera</option> <option value=“safari”>Safari</option> </select> Atributo multiple  permite selecionar mais de um item.

85 Lista Atributos: size – determina quantos itens serão vistos
multiple – permite mais de uma seleção value - selected – especifica que essa opção é selecionada por padrão

86 Label

87 Fieldset e Legend O elemento fieldset organiza os controles do form em grupos que aparecem no navegados O elemento legend exibe o título do fieldset

88 Exemplo <fieldset> <legend>Entrada de Dados</legend>
<label for="control4">Qual é seu time de futebol favorito ?</label> <input type="text" name="timefavorito" id="control4" /> <input type="submit"> </fieldset>

89 Estilos

90 Usando estilos Há três forma de trabalhar com folhas de estilo:
In-line  utilizados na própria tag Estilo incorporado  definido no início da página Estilo vinculado (página de estilo)  o estilo é definido em uma página separada e pode ser reaproveitado em outras páginas

91 CSS (Cascade Style Sheet)
Exemplo: estilo10-03.css P {font-family: arial} Exempo de uso: <html> <head> <link rel="stylesheet" href="css/estilo10-03.css" type="text/css"> </head> <body> <p>texto</p> </body> </html> CSS (Cascade Style Sheet) – Folha de estilos em cascata

92 Estilos Podem ser atribuídos: a uma tag a uma classe a ...

93 Estilos em Eventos active hover link visited

94 Estilos Formatação de texto Formatos de tamanho Cores e fundos Formatação de parágrafos Formatação de listas Formatação de tabelas Posicionamento Dinâmico

95 Script <script type=“JavaScript" src="[URL]"> ... </script> A tag script deve ser inserida entre as tags <head> e </head>

96 Atributos type  tipo do script (ex: JavaScript) src  permite a inclusão de um arquivo externo contendo o script Exemplo: <script language=“JavaScript” src=

97 Bibliografia [1] LEMAY, L. Aprenda em 1 Semana HTML 4. Rio de Janeiro. Campus. 1999 [2] Marcondes, C. A. HTML 4.0 Fundamental – a base da programação para Web. São Paulo. Érica. 2005 [3] PRATES, R. JavaScript – Guia de Consulta Rápida. São Paulo. Novatec [4] LEMAY, L, COLBURN R. Web Publishing with HTML and CSS. Indiana. SAMS

98 JavaScript Fundamentos

99 JavaScript É uma linguagem de programação client side, isto é, executado no lado cliente da aplicação. É case sensitive (diferencia maiúsculas e minúsculas) É uma linguagem baseado em objetos Toda instrução é finalizada com ";"

100 Por que usar JavaScript
Facilidade de uso não exige a declaração de tipos de variáveis fácil de usar Aumento da eficiência do servidor permite validações locais sem uso do servidor que permite não carregar o servidor permite adicionar validações locais e procedimentos de verificações locais reduzindo o número de transações com o servidor Integração com o navegador permite a manipulação de objetos na página, como links, imagens de elementos de formulários permite controlar o próprio funcionamento do browser, permitindo a alteração do tamanho de janelas, movimentação da janela ao redor da tela e ativando e desativando elementos da interface

101 Comentários em JavaScript
//  usado para comentários de uma única linha /* ... */  comentário de múltiplas linhas

102 Variáveis São espaços de memória onde podemos guardar uma informação, como um número ou uma cadeia de caracteres var a=1; var b=5; var c=6; var valor=1.20; var nome="policamp"; var cidade="campinas"; As variáveis podem ser do tipo string (uso do de aspas simples e/ou aspas duplas) ou numéricas (inteiro ou ponto flutuante) JavaScript é uma loosely typed language (linguagem de tipos fracos)  não há necessidade de declarar qual o tipo de dado a variável irá conter

103 Caixas de mensagens Mensagem de Alerta (alert) Mensagem de Confirmação (confirm) Mensagem de prompt para entrada de dados

104 Eventos São ações identificáveis em um sistema Ocorrem em uma página web normalmente quando o visitante interage com a página de alguma forma: clica num botão, carrega uma página, movimenta o mouse, etc Poder ser interceptados por JavaScripts

105 Eventos Onload: sempre que a página é carregada ou recarregada
Onunload Onclick: sempre que o visitante clica em um elemento específico Ondblclick Onmousedown Onmouseup Onmouseover Onmousemove Onmouseout

106 Eventos Onfocus: sempre que um visitante entra um campo de formulário específico Onblur: sempre que um visitante deixa um campo de formulário específico Onkeypress Onkeydown Onsubmit: sempre que o visitante submeter um formulário Onreset Onselect: sempre que o visitante seleciona o conteudo de um campo específico onchange

107 Definição de Funções

108 Dynamic HTML (DHTML) DHTML, ou HTML dinâmico é um conjunto de recursos somados aos recursos HTML que tornam a formatação, posicionamento e controle das páginas uma tarefa mais segura e prática

109 Vantagens do DHTML Maiores recursos estéticos Maior controle dos objetos na página Identificação das formatações Reaproveitamento de código

110 Links Tutorial de HTML <CriarWeb> Tutorial HTML Tutorial

111 Links Link para vários tutoriais http://www.devguru.com/home.asp
Tutorial HTML do ICMC-USP Tutoriais de HTML

112 Links Site TableLess http://www.tableless.com.br
Há dicas para criar páginas interessantes sem o uso de tabelas Especificação do HTML

113 Site do Professor