Introdução ao HTML e JavaScript

•

UNAMA

Caio Fernandes

15.04.2019

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Cálculo II

64.234 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

*
*
HTML / JavaScript
*
*
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.
*
*
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
*
*
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)
*
*
Serviços básicos da Internet
E-mail: correio eletrônico
FTP: transferência de arquivos
WWW: comunicação por meio de hipertexto
*
*
Modelo Cliente / Servidor
Mozilla Firefox
Internet Explorer
Opera
Konqueror
Safari
Chrome
Apache
Internet Information Server (IIS)
Cliente
Servidor
*
*
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
*
*
Clientes Web
Browser (navegador ou paginador)
Exemplos:
Internet Explorer
Mozilla Firefox 
Opera
Safari
Konqueror
Chrome
*
*
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
*
*
Exemplo
http://www.policamp.edu.br/files_biblioteca/normalizacao_bibliografica.pdf
Onde:
http://  protocolo usado
www.policamp.edu.br  nome do servidor
files_biblioteca  diretório dentro do servidor
normalizacao_bibliografica.pdf  nome do arquivo solicitado
*
*
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 email em um servidor de Emails
news: um Newsgroup da UseNet
telnet: uma conexão Telnet
wais: um arquivo em um servidor WAIS 
*
*
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.
*
*
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)
*
*
Protocolos
HTTP (Hypertext Transport Protocol)
FTP (File Transfer Protocol)
*
*
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
*
*
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
*
*
Linguagem HTML
A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto
*
*
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
*
*
Estrutura básica de uma página HTML
<html>
<head>
</head>
<body>
</body>
</html>
Cabeçalho
Corpo
Documento HTML
*
*
Exemplo
<html>
<head>
<title>Primeira pagina</title>
</head>
<body>
<p>Primeiro Paragrafo
</body>
</html>
*
*
Tags e Atributos
Tags (marcações)
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>
*
*
Exemplos de tags
<h1> ... </h1>
<br>
<p>
<h1 align="center"> ... </h1>
nome do
atributo
*
*
Exemplos de editores HTML
Dreamweaver
FrontPage
NVU
Veja outros editores em:
http://baixaki.ig.com.br/categorias/cat125_1.htm
*
*
Comentários em HTML
<!-- [comentário] -->
*
*
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
*
*
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>
*
*
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
*
*
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.
*
*
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
*
*
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
*
*
Padrões de Cores
Padrão de cores RGB (Red, Green, Blue)
Padrão de cores CMYK (Cyan, Magenta, Yellow, Black)
*
*
Algumas cores nomeadas
*
*
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)
*
*
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>
*
*
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>
*
*
Listas
Listas de definição
Listas Ordenadas
Listas Não ordenadas
*
*
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
*
*
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
*
*
Listas - Ordenadas
Uso das tags <ol>
Exemplo:
<ol>
<li>primeiro<li>segundo
<li>terceiro
</ol>
Resultado
1. primeiro
2. segundo
3. terceiro
*
*
Listas – Não ordenadas
Uso das tags <ul>
Exemplo:
<ul>
<li>primeiro
<li>segundo
<li>terceiro
</ul>
Resultado
primeiro
segundo
terceiro
*
*
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>
*
*
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.
*
*
A tag <a> (Anchor) e o atributo href
Esta âncora define um link para página da Unama:
<a href="http://www.unama.br/">Unama</a> 
A linha acima parecerá como a linha abaixo no browser:
Policamp
*
*
Links
Os links tornam possível a navegação entre páginas.
<a 
 name="[nome]" 
 href="[url]" 
 title="[titulo]" 
 target="[_blank | _self | _top | nome]"
> 
[âncora] 
</a>
*
*
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
*
*
Â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
*
*
Imagens
<img>  inclui uma imagem em uma página HTML
*
*
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
*
*
Exemplo
<img src="angry.gif" alt="Angry"/>
*
*
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
*
*
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)
*
*
Tabelas – Tag <table>
<table 
 [border="n"] 
 [cellpadding="n"] 
 [cellspacing="n" 
 [width="n"]
 [align="left"|"center"|"right"
>
...
</table>
*
*
Exemplo de Tabela
<table> 
 <tr> 
 <td> linha 1, coluna 1 </td>
 <td> linha 1, coluna 2 </td>
 </tr>
 <tr> 
 <td> linha 2, coluna 1 </td>
 <td> linha 2, coluna 2 </td>
 </tr>
</table>
*
*
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
*
*
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
*
*
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
*
*
Á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
*
*
Título da tabela
Tag caption
Deve ser usado dentro da tag <table>
*
*
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
*
*
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
*
*
Frames
*
*
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.
*
*
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
*
*
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
*
*
Exemplo
<frameset cols="25%,75%"> 
   <frame src="frame_a.htm"> 
   <frame src="frame_b.htm">
</frameset> 
*
*
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.
*
*
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>.
*
*
Formulários – Tag <form>
<form 
 name ="[nome]" 
 method ="[get|post]" 
 action ="[url]" 
 enctype="[tipo]"
>
...
</form>
*
*
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
*
*
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
*
*
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
*
*
Entrada de dados através do formulários
Entrada de dados
Área de textos
Lista
*
*
Tag <input>
A tag <input> define o tipo da tag para entrada de dados
*
*
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 únicapara tag
*
*
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
*
*
Tag input
<input 
 type="tipo" 
 name="nome" 
 id="id" 
 value="valor" 
 size="tamanho" 
 maxlength=[limite de caracteres] 
 checked readonly disabled tabindex=
>
*
*
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>
*
*
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>
*
*
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" />
<br/>
Eu tenho um avião: 
<input type="checkbox" name=“tem_aviao" value=“avião" />
</form>
</body>
</html>
*
*
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
<br/>
<input type="radio" name="sexo" value="F">Feminino
</form>
</body>
</html>
*
*
Button (Botão)
<html>
<body>
 <form action="">
 <input type="button" value="Hello world!" />
 </form>
</body>
</html>
*
*
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" />
 <br />
 <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>
*
*
Á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>
*
*
Tag select (Menu suspenso (Select e Option))
<select 
 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>
*
*
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
*
*
Label
*
*
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
*
*
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>
*
*
Estilos
*
*
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
*
*
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>
*
*
Estilos
Podem ser atribuídos:
a uma tag
a uma classe
a ...
*
*
Estilos em Eventos
active
hover
link
visited
*
*
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
*
*
Script
<script type=“JavaScript" src="[URL]">
...
</script>
A tag script deve ser inserida entre as tags <head> e </head>
*
*
Atributos
type  tipo do script (ex: JavaScript)
src  permite a inclusão de um arquivo externo contendo o script
Exemplo:
<script language=“JavaScript” src=http://www.mltech.com.br/script.js>
*
*
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. 1996.
[4] LEMAY, L, COLBURN R. Web Publishing with HTML and CSS. Indiana. SAMS. 2006.
*
*
JavaScript
Fundamentos
*
*
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 ";"
*
*
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
*
*
Comentários em JavaScript
//  usado para comentários de uma única linha
/* ... */  comentário de múltiplas linhas
*
*
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";
*
*
Caixas de mensagens
Mensagem de Alerta (alert)
Mensagem de Confirmação (confirm)
Mensagem de prompt para entrada de dados
*
*
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
*
*
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
*
*
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
*
*
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
*
*
Vantagens do DHTML
Maiores recursos estéticos
Maior controle dos objetos na página
Identificação das formatações
Reaproveitamento de código
*
*
Links
Tutorial de HTML 4.01 http://www.artifice.web.pt/tutoriais/cntd/tut_html1.html
<CriarWeb> http://www.criarweb.com/html/Tutorial HTML http://www.w3schools.com/html/
Tutorial http://www.htmlcodetutorial.com/
*
*
Links
Link para vários tutoriais
http://www.devguru.com/home.asp 
Tutorial HTML do ICMC-USP http://www.icmc.usp.br/ensino/material/html/
Tutoriais de HTML http://www.truquesedicas.com/tutoriais/html/00001a.htm
*
*
Links
Site TableLess http://www.tableless.com.br
Há dicas para criar páginas interessantes sem o uso de tabelas
http://duda.imag.fr/forms-intro.shtml
Especificação do HTML 4.01 http://www.w3.org/TR/html4/cover.html#minitoc
*
*
Site do Professor
http://www.mltech.com.br/
*
URL = Localizador Uniforme de Recursos
*
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. 
*
O .htm (três caracteres de extensão é por razões históricas). Use preferencialmente .html
*
Uma página HTML possui um cabeçalho e um corpo.
*
A tag INPUT possui os atributos TYPE, VALUE e READONLY com os valores text, Campinas.
*
<NOBR>
<WBR>
*
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>
*
RGB = R (vermelho), G (verde), B (azul)
*
Veja http://www.w3schools.com/tags/ref_colornames.asp para mais detalhes
*
<b> .. </b>
<i> .. </i>
<tt> .. </tt>
<s> .. </s>
<u> .. </u>
*
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
*
DL – Definition Lista (lista de definição)
DT – Definition Term (termo a ser definido)
DD – Definition Detail (detalhes da definição)
*
Anchor = âncora
*
HTML usa hyperlink para ligar a outro documento na Web. 
Target:
_blank
_self
_top
nome
*
Obs: use &nbsp; para representar um espaço em branco
*
<td> = table data
<th> = table header
*
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.
*
Quando usamos o método Get os valores das variáveis do form são enviados como parte da URL
http://server/executa_acao?var1=valor1&var2=valor2&var3=valor3
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
*
Quando usamos o método GET os valores das variáveis do form são enviados como parte da URL
http://server/executa_acao?var1=valor1&var2=valor2&var3=valor3
*
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
*
Os seguintes atributos são obrigatórios: name, type
Atributos opcionais: value, size, maxlength
*
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
*
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)
*
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
*
Atributo multiple  permite selecionar mais de um item.
*
CSS (Cascade Style Sheet) – Folha de estilos em cascata
*
*
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