HTML / JavaScript
V1.0
1
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.
2
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
3
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)
4
Serviços básicos da Internet
E-mail: correio eletrônico
FTP: transferência de arquivos
WWW: comunicação por meio de
hipertexto
5
Modelo Cliente / Servidor
Cliente
Servidor
request
Browser
Servidor Web
response
Mozilla Firefox
Internet Explorer
Opera
Konqueror
Safari
Apache
Internet Information Server (IIS)
6
Modelo Cliente-Servidor
Cliente Web é o programa
responsável para exibição das páginas
solicitas pelo usuário
Servidor Web armazena e permite o
acesso aos dados
7
Clientes Web
Browser (navegador ou paginador)
Exemplos:
Internet Explorer
Mozilla Firefox
Opera
Safari
Konqueror
8
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
9
Exemplo
http://www.policamp.edu.br/files_biblioteca/n
ormalizacao_bibliografica.pdf
Onde:
http:// protocolo usado
www.policamp.edu.br nome do servidor
files_biblioteca diretório
normalizacao_bibliografica.pdf nome do
arquivo solicitado
10
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
11
Site
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.
12
Protocolos
HTTP (Hypertext Transport Protocol)
FTP (File Transfer Protocol)
13
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
14
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
15
Linguagem HTML
A linguagem HTML é transportada pelo
protocolo HTTP (HyperText Transfer
Protocol) ou Protocolo de Transferência
de Hypertexto
16
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
17
Estrutura básica de uma página
HTML
<html>
<head>
</head>
<body>
</body>
Cabeçalho
Documento HTML
Corpo
</html>
18
Exemplo
<html>
<head>
<title>Primeira pagina</title>
</head>
<body>
<p>Primeiro Paragrafo
</body>
</html>
19
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>
20
Exemplos de tags
<h1> ... </h1>
<br>
<p>
<h1 align="center"> ... </h1>
atributo
21
Comandos
22
Exemplos de editores HTML
Dreamweaver
FrontPage
NVU
Veja outros editores em:
http://baixaki.ig.com.br/categorias/cat125_1.htm
23
Comentários em HTML
<!-- [comentário] -->
24
Tags
<br> faz a quebra de uma linha
<p> e </p> parágrafo
25
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
<h2>Este
<h3>Este
<h4>Este
<h5>Este
<h6>Este
é
é
é
é
é
é
um
um
um
um
um
um
cabeçalho</h1>
cabeçalho</h2>
cabeçalho</h3>
cabeçalho</h4>
cabeçalho</h5>
cabeçalho</h6>
26
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
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.
28
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
Atributos
Atributo
Exemplo
Proposta
size="número"
size="+número "
size="-número "
face="nome-da-face"
color="valor-da-cor"
color="nome-da-cor"
size="2"
size="+1"
size="-1"
face="Times"
color="#eeff00"
color="red"
Define o tamanho da fonte
Aumenta o tamanho da fonte
Diminui o tamanho da fonte
Define o nome da fonte
Define a cor da fonte
Define a cor da fonte
30
Padrões de Cores
Padrão de cores RGB (Red, Green, Blue)
Padrão de cores CMYK (Cyan, Magenta,
Yellow, Black)
31
Algumas cores nomeadas
Black
Marron
Green
Navy
Sliver
Red
Lime
Blue
Gray
Puple
Olive
Teal
White
Fuchsia
Yellow
Aqua
32
Tags de estilos físicos
<b> (bold) negrito
<i> (italic) itálico
<tt>
<u> (underline) sublinhado
<s>
33
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>
34
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>
35
Listas
Listas de definição
Listas Ordenadas
Listas Não ordenadas
36
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
37
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
38
Listas - Ordenadas
Uso das tags <ol>
Exemplo:
<ol>
<li>primeiro
<li>segundo
<li>terceiro
Resultado
1. primeiro
2. segundo
3. terceiro
</ol>
39
Listas – Não ordenadas
Uso das tags <ul>
Exemplo:
<ul>
<li>primeiro
<li>segundo
<li>terceiro
Resultado
primeiro
segundo
terceiro
</ul>
40
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>
41
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
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
45
Â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
46
Imagens
<img> inclui uma imagem em uma
página HTML
47
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
48
Exemplo
<img src="angry.gif" alt="Angry"/>
49
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
<tr> ... </tr> delimita uma linha
<td> ... <td> delimita uma coluna
51
Tabelas – Tag <table>
<table
[border="n"]
[cellpadding="n"]
[cellspacing="n"
[width="n"]
[align="left"|"center"|"right"
>
...
</table>
52
Exemplo de Tabela
<table>
<tr>
<td> linha
<td> linha
</tr>
<tr>
<td> linha
<td> linha
</tr>
</table>
1, coluna 1 </td>
1, coluna 2 </td>
2, coluna 1 </td>
2, coluna 2 </td>
53
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
cellpadding
cellspacing
54
Atributos (2)
border especifica a largura da borda
(use o valor "0" para não exibir as
bordas)
bordercolor
bordercolordark
bordercolorlight
55
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
56
Áreas das tabelas
<thead> define um table head ou
cabeçalho da tabela
<tfoot> define um table foot ou
rodapé da tabela
<tbody> define um table body ou
corpo da tabela
57
Título da tabela
Tag caption
Deve ser usado dentro da tag <table>
58
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
59
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
frame)
Define uma sessão noframe para
browsers que não suportam
janelas
Define um sub-janela inline
61
(frame)
<noframe>
<iframe>
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.
62
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
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
64
Exemplo
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
65
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.
66
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
Formulários – Tag <form>
<form
name
="[nome]"
method ="[get|post]"
action ="[url]"
enctype="[tipo]"
>
...
</form>
68
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
69
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
70
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
71
Entrada de dados através do
formulários
Entrada de dados
Área de textos
Lista
72
Tag <input>
A tag <input> define o começo de uma
campo de entrada onde o usuário pode
entrar com dados
73
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
74
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
75
Tag input
<input
type="tipo"
name="nome"
id="id"
value="valor"
size="tamanho"
maxlength=[limite de caracteres]
checked readonly disabled tabindex=
>
76
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
<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>
78
Checkboxes (Caixa de
Seleção)
<html>
<body>
<form action="" name="Form" method="POST">
Eu tenho uma bicicleta:
<input type="checkbox" name="veiculo" value="Bike" />
<br/>
Eu tenho um carro:
<input type="checkbox" name=" veiculo" value="Car" />
<br/>
Eu tenho um avião:
<input type="checkbox" name=" veiculo" value="Airplane" />
</form>
</body>
</html>
79
Radio Button (botão de rádio)
<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>
80
Button (Botão)
<html>
<body>
<form action="">
<input type="button" value="Hello world!" />
</form>
</body>
</html>
81
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>
Se você clicar no botão "Enviar" você enviará sua entrada a uma nova
página chamada "form_action.asp".
</p>
</body>
</html>
82
Á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>Firefox</option>
<option>Opera</option>
<option>Safari</option>
</select>
84
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
85
Estilos
86
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
87
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>
88
Estilos
Podem ser atribuídos:
a uma tag
a uma classe
a ...
89
Estilos em Eventos
active
hover
link
visited
90
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
91
Script
<script type="" src="[URL]">
...
</script>
92
Atributos
type
src
93
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.
94
JavaScript
Fundamentos
95
JavaScript
É uma linguagem de programação client
side, isto é, executado no lado cliente
da aplicação.
É case sensitive (diferencia maiúsculas
e minúsculas)
Toda instrução é finalizada com ";"
96
Comentários em JavaScript
// usado para comentários de uma
única linha
/* ... */ comentário de múltiplas linhas
97
Variáveis
var
var
var
var
var
var
a=1;
b=5;
c=6;
valor=1.20;
nome="policamp";
cidade="campinas";
98
Caixas de mensagens
Mensagem de Alerta (alert)
Mensagem de Confirmação (confirm)
Mensagem de prompt para entrada de
dados
99
Eventos
São ações identificáveis em um sistema
100
Eventos
Onload
Onunload
Onclick
Ondblclick
Onmousedown
Onmouseup
Onmouseover
Onmousemove
Onmouseout
101
Eventos
Onfocus
Onblur
Onkeypress
Onkeydown
Onsubmit
Onreset
Onselect
onchange
102
Definição de Funções
103
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
104
Vantagens do DHTML
Maiores recursos estéticos
Maior controle dos objetos na página
Identificação das formatações
Reaproveitamento de código
105
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/
106
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
107
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#min
itoc
108
Download
