SlideShare uma empresa Scribd logo
1 de 113
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 
 E-mail: correio eletrônico 
 FTP: transferência de arquivos 
 WWW: comunicação por meio de hipertexto
6 
Modelo Cliente / Servidor 
Cliente Servidor 
request 
Browser Servidor Web 
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 
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
10 
Exemplo 
 http://www.policamp.edu.br/files_biblioteca/normalizacao_ 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
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 email em um servidor de Emails 
 news: um Newsgroup da UseNet 
 telnet: uma conexão Telnet 
 wais: um arquivo em um servidor WAIS
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)
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 
15 
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 
16
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
19 
Estrutura básica de uma página HTML 
<html> 
<head> 
</head> 
<body> 
</body> 
</html> 
Cabeçalho 
Corpo 
Documento HTML
20 
Exemplo 
<html> 
<head> 
<title>Primeira pagina</title> 
</head> 
<body> 
<p>Primeiro Paragrafo 
</body> 
</html>
21 
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>
22 
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: 
http://baixaki.ig.com.br/categorias/cat125_1.htm
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
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. 
26 
 <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 
27
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.
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 
29
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ões de Cores 
 Padrão de cores RGB (Red, Green, Blue) 
 Padrão de cores CMYK (Cyan, Magenta, 
Yellow, Black)
32 
Algumas cores nomeadas 
Black Marron Green Navy 
Sliver Red Lime Blue 
Gray Puple Olive Teal 
White Fuchsia Yellow Aqua
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)
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 
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>
36 
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: 
37 
 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
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
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. 
41 
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. 
42
A tag <a> (Anchor) e o atributo href 
Esta âncora define um link para página da 
Policamp: 
<a href="http://www.policamp.edu.br/">Policamp</a> 
A linha acima parecerá como a linha abaixo 
no browser: 
Policamp 
43
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> 
44
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"/>
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 
50
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) 
51
52 
Tabelas – Tag <table> 
<table 
[border="n"] 
[cellpadding="n"] 
[cellspacing="n" 
[width="n"] 
[align="left"|"center"|"right" 
> 
... 
</table>
53 
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>
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
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 
60
Frames 
Tag Descrição 
<frameset> Define um conjunto de frames 
<frame> Define uma sub-janela (um 
61 
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.
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 
63
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.
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>. 
67
68 
Formulários – Tag <form> 
<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
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
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
72 
Entrada de dados através do formulários 
 Entrada de dados 
 Á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
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= 
>
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> 
77
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 
78 
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" /> 
<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> 
80 
</body> 
</html>
Button (Botão) 
<html> 
<body> 
<form action=""> 
<input type="button" value="Hello world!" /> 
</form> 
</body> 
</html> 
81
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" /> 
<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> 
83
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> 
84
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
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> 
88
89 
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 
90
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>
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
Script 
<script type=“JavaScript" src="[URL]"> 
... 
</script> 
A tag script deve ser inserida entre as tags 
<head> e </head> 
95
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= 
http://www.mltech.com.br/script.js>
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. 1996. 
 [4] LEMAY, L, COLBURN R. Web Publishing 
with HTML and CSS. Indiana. SAMS. 2006.
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
Comentários em JavaScript 
//  usado para comentários de uma única 
linha 
/* ... */  comentário de múltiplas linhas 
101
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"; 
102
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 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/
111 
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
112 
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
113 
Site do Professor 
 http://www.mltech.com.br/

Mais conteúdo relacionado

Mais procurados

Projecto e Produção Multimédia
Projecto e Produção MultimédiaProjecto e Produção Multimédia
Projecto e Produção MultimédiaGoncalo
 
Lista de exercícios tipos de arquitetura infraestrutura de software
Lista de exercícios tipos de arquitetura   infraestrutura de softwareLista de exercícios tipos de arquitetura   infraestrutura de software
Lista de exercícios tipos de arquitetura infraestrutura de softwareIsabel Araujo
 
Processos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e práticaProcessos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e práticaRalph Rassweiler
 
Workshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produtoWorkshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produtoCarla De Bona
 
Gerenciamento de projetos - Tempo, Recursos e Custo
Gerenciamento de projetos - Tempo, Recursos e CustoGerenciamento de projetos - Tempo, Recursos e Custo
Gerenciamento de projetos - Tempo, Recursos e CustoClaudio Barbosa
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlTiago Luiz Ribeiro da Silva
 
Engenharia de Software Baseada em Componentes
Engenharia de Software Baseada em ComponentesEngenharia de Software Baseada em Componentes
Engenharia de Software Baseada em Componenteselliando dias
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Sistemas operacionais sistemas-distribuidos
Sistemas operacionais sistemas-distribuidosSistemas operacionais sistemas-distribuidos
Sistemas operacionais sistemas-distribuidosrobsons75
 
Gestão de Serviços de TI com a ITIL. Uma introdução
Gestão de Serviços de TI com a ITIL. Uma introduçãoGestão de Serviços de TI com a ITIL. Uma introdução
Gestão de Serviços de TI com a ITIL. Uma introduçãoRildo (@rildosan) Santos
 
DIGCOMP - competências digitais
DIGCOMP - competências digitaisDIGCOMP - competências digitais
DIGCOMP - competências digitaismargarida lucas
 
Introdução à Gerência de configuração de Software
Introdução à Gerência de configuração de SoftwareIntrodução à Gerência de configuração de Software
Introdução à Gerência de configuração de SoftwareLucas Amaral
 
Arquitetura de software : Cliente-Servidor
Arquitetura de software : Cliente-ServidorArquitetura de software : Cliente-Servidor
Arquitetura de software : Cliente-ServidorAlexsandro Oliveira
 

Mais procurados (20)

Projecto e Produção Multimédia
Projecto e Produção MultimédiaProjecto e Produção Multimédia
Projecto e Produção Multimédia
 
Lista de exercícios tipos de arquitetura infraestrutura de software
Lista de exercícios tipos de arquitetura   infraestrutura de softwareLista de exercícios tipos de arquitetura   infraestrutura de software
Lista de exercícios tipos de arquitetura infraestrutura de software
 
Processos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e práticaProcessos de Desenvolvimento de Software - teoria e prática
Processos de Desenvolvimento de Software - teoria e prática
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Workshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produtoWorkshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produto
 
Gerenciamento de projetos - Tempo, Recursos e Custo
Gerenciamento de projetos - Tempo, Recursos e CustoGerenciamento de projetos - Tempo, Recursos e Custo
Gerenciamento de projetos - Tempo, Recursos e Custo
 
Html
HtmlHtml
Html
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Engenharia de Software Baseada em Componentes
Engenharia de Software Baseada em ComponentesEngenharia de Software Baseada em Componentes
Engenharia de Software Baseada em Componentes
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Integração Contínua
Integração ContínuaIntegração Contínua
Integração Contínua
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Sistemas operacionais sistemas-distribuidos
Sistemas operacionais sistemas-distribuidosSistemas operacionais sistemas-distribuidos
Sistemas operacionais sistemas-distribuidos
 
Gestão de Serviços de TI com a ITIL. Uma introdução
Gestão de Serviços de TI com a ITIL. Uma introduçãoGestão de Serviços de TI com a ITIL. Uma introdução
Gestão de Serviços de TI com a ITIL. Uma introdução
 
DIGCOMP - competências digitais
DIGCOMP - competências digitaisDIGCOMP - competências digitais
DIGCOMP - competências digitais
 
Introdução a gerenciamento de projetos e PMBoK®
Introdução a gerenciamento de projetos e PMBoK®Introdução a gerenciamento de projetos e PMBoK®
Introdução a gerenciamento de projetos e PMBoK®
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 
Introdução à Gerência de configuração de Software
Introdução à Gerência de configuração de SoftwareIntrodução à Gerência de configuração de Software
Introdução à Gerência de configuração de Software
 
Arquitetura de software : Cliente-Servidor
Arquitetura de software : Cliente-ServidorArquitetura de software : Cliente-Servidor
Arquitetura de software : Cliente-Servidor
 

Destaque

2014年メディア工房勉強会 第3章「Webアプリ制作」
2014年メディア工房勉強会 第3章「Webアプリ制作」2014年メディア工房勉強会 第3章「Webアプリ制作」
2014年メディア工房勉強会 第3章「Webアプリ制作」Takashi Endo
 
Gestión de contratación eléctrica
Gestión de contratación eléctricaGestión de contratación eléctrica
Gestión de contratación eléctricaStaCaterinaFM
 
Pandai pntar dan cerdas
Pandai pntar dan cerdasPandai pntar dan cerdas
Pandai pntar dan cerdasEman Msm
 
Professione blogger, una scelata possibile?
Professione blogger, una scelata possibile?Professione blogger, una scelata possibile?
Professione blogger, una scelata possibile?GGDBologna
 
Maestros indígenas nayarit 2012
Maestros indígenas nayarit 2012Maestros indígenas nayarit 2012
Maestros indígenas nayarit 2012Valentin Flores
 
#PortadaLat Awards 2015
#PortadaLat Awards 2015#PortadaLat Awards 2015
#PortadaLat Awards 2015Portada
 
Corrosão das armaduras
Corrosão das armadurasCorrosão das armaduras
Corrosão das armadurasjoseh1758
 
My Learning In Ict
My Learning In IctMy Learning In Ict
My Learning In IctDachund
 
Portada Online Video Forum 2015
Portada Online Video Forum 2015Portada Online Video Forum 2015
Portada Online Video Forum 2015Portada
 

Destaque (20)

seksigo
seksigoseksigo
seksigo
 
2014年メディア工房勉強会 第3章「Webアプリ制作」
2014年メディア工房勉強会 第3章「Webアプリ制作」2014年メディア工房勉強会 第3章「Webアプリ制作」
2014年メディア工房勉強会 第3章「Webアプリ制作」
 
Gestión de contratación eléctrica
Gestión de contratación eléctricaGestión de contratación eléctrica
Gestión de contratación eléctrica
 
Pandai pntar dan cerdas
Pandai pntar dan cerdasPandai pntar dan cerdas
Pandai pntar dan cerdas
 
Professione blogger, una scelata possibile?
Professione blogger, una scelata possibile?Professione blogger, una scelata possibile?
Professione blogger, una scelata possibile?
 
Fotos da Itália
Fotos da ItáliaFotos da Itália
Fotos da Itália
 
чуковский к.и.
чуковский к.и.чуковский к.и.
чуковский к.и.
 
ccccccc
cccccccccccccc
ccccccc
 
Taller 13
Taller 13Taller 13
Taller 13
 
Maestros indígenas nayarit 2012
Maestros indígenas nayarit 2012Maestros indígenas nayarit 2012
Maestros indígenas nayarit 2012
 
NTRY Ticketing
NTRY TicketingNTRY Ticketing
NTRY Ticketing
 
#PortadaLat Awards 2015
#PortadaLat Awards 2015#PortadaLat Awards 2015
#PortadaLat Awards 2015
 
Yo soy uniatlantico
Yo soy uniatlanticoYo soy uniatlantico
Yo soy uniatlantico
 
Aeropuertos
AeropuertosAeropuertos
Aeropuertos
 
Corrosão das armaduras
Corrosão das armadurasCorrosão das armaduras
Corrosão das armaduras
 
Android - Day 1
Android - Day 1Android - Day 1
Android - Day 1
 
My Learning In Ict
My Learning In IctMy Learning In Ict
My Learning In Ict
 
Electro
ElectroElectro
Electro
 
Portada Online Video Forum 2015
Portada Online Video Forum 2015Portada Online Video Forum 2015
Portada Online Video Forum 2015
 
Test ppt
Test pptTest ppt
Test ppt
 

Semelhante a Html

0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdfRubenManhia
 
Portifolio net
Portifolio netPortifolio net
Portifolio netlaerciopds
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Html completo
Html completoHtml completo
Html completoEMSNEWS
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mércia Regina da Silva
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte IIigorpimentel
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxJEANCLEVERSONPRATAS
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLFabio Moura Pereira
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 

Semelhante a Html (20)

0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Html completo
Html completoHtml completo
Html completo
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
 
Cs 02 introducao_html
Cs 02 introducao_htmlCs 02 introducao_html
Cs 02 introducao_html
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Sobre o HTML
Sobre o HTMLSobre o HTML
Sobre o HTML
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte II
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
426 curso html
426 curso html426 curso html
426 curso html
 

Último

análise de redação completa - Dissertação
análise de redação completa - Dissertaçãoanálise de redação completa - Dissertação
análise de redação completa - DissertaçãoMaiteFerreira4
 
Aula de História Ensino Médio Mesopotâmia.pdf
Aula de História Ensino Médio Mesopotâmia.pdfAula de História Ensino Médio Mesopotâmia.pdf
Aula de História Ensino Médio Mesopotâmia.pdfFernandaMota99
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfCamillaBrito19
 
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....LuizHenriquedeAlmeid6
 
Construção (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãConstrução (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãIlda Bicacro
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.Mary Alvarenga
 
Literatura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.pptLiteratura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.pptMaiteFerreira4
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Ilda Bicacro
 
Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?AnabelaGuerreiro7
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividadeMary Alvarenga
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...azulassessoria9
 
Discurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxDiscurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxferreirapriscilla84
 
Mapa mental - Classificação dos seres vivos .docx
Mapa mental - Classificação dos seres vivos .docxMapa mental - Classificação dos seres vivos .docx
Mapa mental - Classificação dos seres vivos .docxBeatrizLittig1
 
Atividades sobre Coordenadas Geográficas
Atividades sobre Coordenadas GeográficasAtividades sobre Coordenadas Geográficas
Atividades sobre Coordenadas Geográficasprofcamilamanz
 
Libras Jogo da memória em LIBRAS Memoria
Libras Jogo da memória em LIBRAS MemoriaLibras Jogo da memória em LIBRAS Memoria
Libras Jogo da memória em LIBRAS Memorialgrecchi
 
Ficha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdfFicha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdfFtimaMoreira35
 
A poesia - Definições e Característicass
A poesia - Definições e CaracterísticassA poesia - Definições e Característicass
A poesia - Definições e CaracterísticassAugusto Costa
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdfLeloIurk1
 

Último (20)

análise de redação completa - Dissertação
análise de redação completa - Dissertaçãoanálise de redação completa - Dissertação
análise de redação completa - Dissertação
 
Aula de História Ensino Médio Mesopotâmia.pdf
Aula de História Ensino Médio Mesopotâmia.pdfAula de História Ensino Médio Mesopotâmia.pdf
Aula de História Ensino Médio Mesopotâmia.pdf
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdf
 
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
 
Construção (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãConstrução (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! Sertã
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.
 
Literatura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.pptLiteratura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.ppt
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"
 
Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividade
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 
Discurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxDiscurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptx
 
Mapa mental - Classificação dos seres vivos .docx
Mapa mental - Classificação dos seres vivos .docxMapa mental - Classificação dos seres vivos .docx
Mapa mental - Classificação dos seres vivos .docx
 
Atividades sobre Coordenadas Geográficas
Atividades sobre Coordenadas GeográficasAtividades sobre Coordenadas Geográficas
Atividades sobre Coordenadas Geográficas
 
CINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULACINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULA
 
Libras Jogo da memória em LIBRAS Memoria
Libras Jogo da memória em LIBRAS MemoriaLibras Jogo da memória em LIBRAS Memoria
Libras Jogo da memória em LIBRAS Memoria
 
Ficha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdfFicha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdf
 
A poesia - Definições e Característicass
A poesia - Definições e CaracterísticassA poesia - Definições e Característicass
A poesia - Definições e Característicass
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
 

Html

  • 1. 1 HTML / JavaScript V1.0
  • 2. 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. 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. 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. 5 Serviços básicos da Internet  E-mail: correio eletrônico  FTP: transferência de arquivos  WWW: comunicação por meio de hipertexto
  • 6. 6 Modelo Cliente / Servidor Cliente Servidor request Browser Servidor Web response Mozilla Firefox Internet Explorer Opera Konqueror Safari Chrome Apache Internet Information Server (IIS)
  • 7. 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. 8 Clientes Web  Browser (navegador ou paginador)  Exemplos:  Internet Explorer  Mozilla Firefox  Opera  Safari  Konqueror  Chrome
  • 9. 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
  • 10. 10 Exemplo  http://www.policamp.edu.br/files_biblioteca/normalizacao_ 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
  • 11. 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 email em um servidor de Emails  news: um Newsgroup da UseNet  telnet: uma conexão Telnet  wais: um arquivo em um servidor WAIS
  • 12. 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. 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. 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 15 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 16
  • 17. 17 Linguagem HTML  A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto
  • 18. 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
  • 19. 19 Estrutura básica de uma página HTML <html> <head> </head> <body> </body> </html> Cabeçalho Corpo Documento HTML
  • 20. 20 Exemplo <html> <head> <title>Primeira pagina</title> </head> <body> <p>Primeiro Paragrafo </body> </html>
  • 21. 21 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>
  • 22. 22 Exemplos de tags  <h1> ... </h1>  <br>  <p>  <h1 align="center"> ... </h1> nome do atributo
  • 23. 23 Exemplos de editores HTML  Dreamweaver  FrontPage  NVU Veja outros editores em: http://baixaki.ig.com.br/categorias/cat125_1.htm
  • 24. 24 Comentários em HTML  <!-- [comentário] -->
  • 25. 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
  • 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. 26  <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 27
  • 28. 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. 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 29
  • 30. 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. 31 Padrões de Cores  Padrão de cores RGB (Red, Green, Blue)  Padrão de cores CMYK (Cyan, Magenta, Yellow, Black)
  • 32. 32 Algumas cores nomeadas Black Marron Green Navy Sliver Red Lime Blue Gray Puple Olive Teal White Fuchsia Yellow Aqua
  • 33. 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)
  • 34. 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. 35 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>
  • 36. 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: 37  termo  definição
  • 38. 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
  • 39. 39 Listas - Ordenadas Uso das tags <ol> Exemplo: <ol> <li>primeiro <li>segundo <li>terceiro </ol> Resultado 1. primeiro 2. segundo 3. terceiro
  • 40. 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. 41 Sintaxe para criação de uma âncora: <a href="url">Texto para ser exibido</a>
  • 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. 42
  • 43. A tag <a> (Anchor) e o atributo href Esta âncora define um link para página da Policamp: <a href="http://www.policamp.edu.br/">Policamp</a> A linha acima parecerá como a linha abaixo no browser: Policamp 43
  • 44. 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> 44
  • 45. 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. 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. 47 Imagens  <img>  inclui uma imagem em uma página HTML
  • 48. 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. 49 Exemplo  <img src="angry.gif" alt="Angry"/>
  • 50. 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 50
  • 51. 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) 51
  • 52. 52 Tabelas – Tag <table> <table [border="n"] [cellpadding="n"] [cellspacing="n" [width="n"] [align="left"|"center"|"right" > ... </table>
  • 53. 53 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>
  • 54. 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. 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. 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. 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. 58 Título da tabela  Tag caption  Deve ser usado dentro da tag <table>
  • 59. 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 60
  • 61. Frames Tag Descrição <frameset> Define um conjunto de frames <frame> Define uma sub-janela (um 61 frame) <noframe> Define uma sessão noframe para browsers que não suportam janelas <iframe> Define um sub-janela inline (frame)
  • 62. 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 63
  • 64. 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. 65 Exemplo <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
  • 66. 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>. 67
  • 68. 68 Formulários – Tag <form> <form name ="[nome]" method ="[get|post]" action ="[url]" enctype="[tipo]" > ... </form>
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. 72 Entrada de dados através do formulários  Entrada de dados  Área de textos  Lista
  • 73. 73 Tag <input>  A tag <input> define o tipo da tag para entrada de dados
  • 74. 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
  • 75. 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. 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> 77
  • 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 78 digitados com campo password. </p> </body> </html>
  • 79. 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" /> <br/> Eu tenho um avião: <input type="checkbox" name=“tem_aviao" value=“avião" /> </form> </body> </html>
  • 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 <br/> <input type="radio" name="sexo" value="F">Feminino </form> 80 </body> </html>
  • 81. Button (Botão) <html> <body> <form action=""> <input type="button" value="Hello world!" /> </form> </body> </html> 81
  • 82. 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" /> <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>
  • 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> 83
  • 84. 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> 84
  • 85. 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
  • 87. 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> 88
  • 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 90
  • 91. 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>
  • 92. 92 Estilos Podem ser atribuídos:  a uma tag  a uma classe  a ...
  • 93. 93 Estilos em Eventos  active  hover  link  visited
  • 94. 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> 95
  • 96. 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= http://www.mltech.com.br/script.js>
  • 97. 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. 1996.  [4] LEMAY, L, COLBURN R. Web Publishing with HTML and CSS. Indiana. SAMS. 2006.
  • 99. 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. 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 101
  • 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"; 102
  • 103. 103 Caixas de mensagens  Mensagem de Alerta (alert)  Mensagem de Confirmação (confirm)  Mensagem de prompt para entrada de dados
  • 104. 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. 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. 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. 107 Definição de Funções
  • 108. 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. 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. 110 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/
  • 111. 111 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
  • 112. 112 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
  • 113. 113 Site do Professor  http://www.mltech.com.br/

Notas do Editor

  1. URL = Localizador Uniforme de Recursos
  2. 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.
  3. O .htm (três caracteres de extensão é por razões históricas). Use preferencialmente .html
  4. Uma página HTML possui um cabeçalho e um corpo.
  5. A tag INPUT possui os atributos TYPE, VALUE e READONLY com os valores text, Campinas.
  6. &amp;lt;NOBR&amp;gt; &amp;lt;WBR&amp;gt;
  7. O tag &amp;lt;font&amp;gt; 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 &amp;lt;font&amp;gt;
  8. RGB = R (vermelho), G (verde), B (azul)
  9. Veja http://www.w3schools.com/tags/ref_colornames.asp para mais detalhes
  10. &amp;lt;b&amp;gt; .. &amp;lt;/b&amp;gt; &amp;lt;i&amp;gt; .. &amp;lt;/i&amp;gt; &amp;lt;tt&amp;gt; .. &amp;lt;/tt&amp;gt; &amp;lt;s&amp;gt; .. &amp;lt;/s&amp;gt; &amp;lt;u&amp;gt; .. &amp;lt;/u&amp;gt;
  11. 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
  12. DL – Definition Lista (lista de definição) DT – Definition Term (termo a ser definido) DD – Definition Detail (detalhes da definição)
  13. Anchor = âncora
  14. HTML usa hyperlink para ligar a outro documento na Web. Target: _blank _self _top nome
  15. Obs: use &amp;nbsp; para representar um espaço em branco
  16. &amp;lt;td&amp;gt; = table data &amp;lt;th&amp;gt; = table header
  17. 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=&amp;quot;n&amp;quot; --&amp;gt; define a largura mínima da tabela. Width também pode ser definido em &amp;quot;%&amp;quot; da área ocupada pela tela do navegador.
  18. 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&amp;var2=valor2&amp;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
  19. 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&amp;var2=valor2&amp;var3=valor3
  20. 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
  21. Os seguintes atributos são obrigatórios: name, type Atributos opcionais: value, size, maxlength
  22. 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: &amp;lt;INPUT TYPE=&amp;quot;checkbox&amp;quot; NAME=&amp;quot;nome&amp;quot; VALUE=&amp;quot;valor de retorno&amp;quot;&amp;gt;texto da caixa onde: Name Type Value Texto da caixa
  23. Sintaxe: &amp;lt;INPUT TYPE=&amp;quot;radio&amp;quot; NAME=&amp;quot;nome do botão de opção&amp;quot; VALUE=&amp;quot;valor de retorno&amp;quot;&amp;gt;Texto da Caixa onde: name (obrigatório) type (obrigatório) value (obrigatório) texto da caixa (opcional)
  24. 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
  25. Atributo multiple  permite selecionar mais de um item.
  26. CSS (Cascade Style Sheet) – Folha de estilos em cascata
  27. 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