html / javascript
Post on 19-Jan-2016
110 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Browser Servidor Webrequest
response
Mozilla FirefoxInternet ExplorerOperaKonquerorSafariChrome
ApacheInternet Information Server (IIS)
Cliente Servidor
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_bibliografica.pdf
Onde:http:// protocolo usadowww.policamp.edu.br nome do
servidorfiles_biblioteca diretório dentro do
servidornormalizacao_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)
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 SGMLNão possui uma estrutura rígida e exataDefine a estrutura da página estabelecendo
suas características
16
Linguagem HTML (Hypertext Markup Language)
Define a estrutura de uma página estabelecendo seu título, texto, listas, subtítulos, localização de imagens, etc.
É uma linguagem para criação e manipulação de textos, imagens e não necessita de grande conhecimentos teóricos e lógica de programação
17
Linguagem HTML
A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto
18
Linguagem HTML
Uma página HTML pode ser criada com uso de qualquer editor de textos porém deve ter a extensão .html ou .htm
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 </ >
Atributossã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 doatributo
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
26
Cabeçalhos
Cabeçalhos são definidos com as tags <h1> a <h6>
<h1> defines o maior cabeçalho enquanto <h6> define o menor cabeçalho.
<h1>Este é um cabeçalho</h1> <h2>Este é um cabeçalho</h2> <h3>Este é um cabeçalho</h3> <h4>Este é um cabeçalho</h4> <h5>Este é um cabeçalho</h5> <h6>Este é um cabeçalho</h6>
27
Formatação de Textos
Dois tipos de formatação: Lógica FísicaA idéia dessa separação é a
independência entre especificação e apresentação
28
Formação Lógica e Física
A formatação lógica acompanha o significado lógico do texto marcado. Sua apresentação varia em função do navegador usado podendo oferecer resultados distintos
A formatação física especifica explicitamente o estilo que se quer o texto, como letras em itálico, negrito, sublinhado, etc.
29
Tag <font>
Atributos:size tamanho da fontecolor define a cor da fonte do textoface é o nome da fonte que a tag vai
apresentar
30
Atributos
Atributo Exemplo Propostasize="número" size="2" Define o tamanho da fontesize="+número " size="+1" Aumenta o tamanho da fontesize="-número " size="-1" Diminui o tamanho da fonteface="nome-da-face" face="Times" Define o nome da fontecolor="valor-da-cor" color="#eeff00" Define a cor da fontecolor="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
37
Listas – de definição
É usada para definir termos, criar textos explicativos, dicionários, entre outras funções. Uma lista de definição é composta de duas partes: termo definição
38
Lista de Definição – Exemplo
<dl>
<dt>
HTML
<dd>Hypertext Markup Language
<dt>XML
<dd> Extensible Markup Language
</dl>
ResultadoHTML 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. primeiro2. segundo3. terceiro
40
Listas – Não ordenadas
Uso das tags <ul>Exemplo:<ul>
<li>primeiro<li>segundo<li>terceiro
</ul>
Resultado
primeiro segundo terceiro
41
A tag <a> (Anchor) e o atributo href
HTML usa a tag <a> (anchor) para criar um link para outro documento.
Um anchor (âncora) pode apontar para qualquer recurso na Web: uma página HTML, uma imagem, uma trilha sonora, um clipe, etc.
Sintaxe para criação de uma âncora: <a href="url">Texto para ser exibido</a>
42
A tag <a> (Anchor) e o atributo href
A tag <a> é usada para criar uma ligação (vínculo) ao link,
O atributo href é usado para endereçar o documento ao qual o endereço está apontando,
e as palavras entre o abre e fecha âncora será exibido como o hyperlink.
43
A tag <a> (Anchor) e o atributo href
Esta âncora define um link para página da Policamp:
<a href="http://www.policamp.edu.br/">Policamp</a>
A linha acima parecerá como a linha abaixo no browser:
Policamp
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>
45
Atributos
name: marca um indicador, isto é, uma região de um documento como destino de uma ligação
href: indica a URL de destino da ligação do hipertexto
title target: destino
46
Âncoras – links na mesma página
Âncoras são inseridas pelo atributo name da tag <a>.
Exemplo:<a href="#link1">link1</a><br><a href="#link2">link2</a><br><a name="link1">djshj asjhja ahdjka asdh<a name="link2">sjdkas asdhkj asjdh ash
47
Imagens
<img> inclui uma imagem em uma página HTML
48
Atributos da tag <IMG> SRC: URL da imagem que será exibida ALIGN: top | bottom | middle | left | right WIDTH: estabelece a largura da imagem HEIGHT: estabelece a altura da imagem VSPACE: controla o espaço acima e abaixo da
imagem HSPACE: controla o espaço a esquerda e a
direita da imagem BORDER: define a borda ao redor da imagem ALT: define uma descrição sucinta da imagem LOWSRC
49
Exemplo
<img src="angry.gif" alt="Angry"/>
50
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
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)
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
60
Frames
Com frames é possível visualizar mais de um documento HTML na mesma janela do browser.
Cada documento HTML é chamado um frame e cada frame é independente dos outros
Desvantagens no uso de frames: o desenvolvedor Web deve manter o
gerenciamento de mais de um documento HTML é difícil imprimir a página inteira
61
Frames
Tag Descrição
<frameset> Define um conjunto de frames
<frame> Define uma sub-janela (um frame)
<noframe> Define uma sessão noframe para browsers que não suportam janelas
<iframe> Define um sub-janela inline (frame)
62
A tag Frameset
A tag<frameset> define como dividir uma janela em frames
Cada frameset define um conjunto de linhas ou colunas
O valor das linhas/colunas indicam a quantidade da área da tela que cada linha /coluna ira ocupar.
63
Frames - Tags
Tag <frameset> é usada para organizar múltiplas janelas
Atributos:cols: define o número e tamanho das
colunas em um framesetrows: define o número e tamanho das
linhas em um frameset
64
A tag <frame>
A tag <frame> define que documento HTML será alocado em cada frame
No exemplo abaixo temos um frameset com duas colunas. A primeira coluna ocupara 25% da largura da janela do navegador e a segunda coluna ocupara 75% da largura. O documento HTML "frame_a.htm" é colocado na primeira coluna e o documento "frame_b.htm" is colocado na segunda coluna
65
Exemplo
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
66
Formulários
Permite aos usuários entrar com dados e assim criar uma interatividade nas páginas HTML.
O uso de formulário é muito usado quando tratamos de aplicações web.
67
Formulários
Um formulário é uma área que contém elementos de formulários.
Elementos de formulários são elementos que permitem ao usuário entrar com informações (como text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc) em um formulário.
Um formulário é definido com o tag <form>.
68
Formulários – Tag <form>
<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=>
77
Text Field (Caixa de entrada de uma linha)
<html><body>
<form action="" name="Form1" method="get">
<p>Nome: <input type="text" name="nome" size="20" /> <br/> <p>Sobrenome: <input type="text" name="sobrenome" size="20" />
</form>
</body></html>
78
Password (Senha)<html><body>
<form action=""> Usuario: <input type="text" name="user" size="20" /> <br /> Senha: <input type="password" name="password" size="20" /></form>
<p><b>Nota:</b>O navegador exibe asteriscos ou bullets ao invés dos caracteres
digitados com campo password.</p>
</body></html>
79
Checkboxes (Caixa de Seleção)<html><body>
<form action="" name="Form" method="POST">Eu tenho uma bicicleta:<input type="checkbox" name=“tem_bicicleta" value=“bicicleta"
/><br/>Eu tenho um carro: <input type="checkbox" name=“tem_carro" value=“carro" /><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>
</body></html>
81
Button (Botão)
<html><body> <form action=""> <input type="button" value="Hello
world!" /> </form></body></html>
82
Submit (Botão de envio)<body>
<form name="input" action="form_action.asp" method="get"> Digite seu primeiro nome: <input type="text" name="FirstName" value="Mickey" size="20" /> <br /> Digite seu último nome: <input type="text" name="LastName" value="Mouse" size="20" /> <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>
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>
85
Lista
Atributos: size – determina quantos itens serão
vistos multiple – permite mais de uma seleção value - selected – especifica que essa opção é
selecionada por padrão
86
Label
87
Fieldset e Legend
O elemento fieldset organiza os controles do form em grupos que aparecem no navegados
O elemento legend exibe o título do fieldset
88
Exemplo
<fieldset> <legend>Entrada de Dados</legend> <label for="control4">Qual é seu time de
futebol favorito ?</label> <input type="text" name="timefavorito"
id="control4" /> <input type="submit"></fieldset>
89
Estilos
90
Usando estilos
Há três forma de trabalhar com folhas de estilo:
In-line utilizados na própria tag Estilo incorporado definido no início da
página Estilo vinculado (página de estilo) o estilo
é definido em uma página separada e pode ser reaproveitado em outras páginas
91
CSS (Cascade Style Sheet)
Exemplo: estilo10-03.css
P {font-family: arial}
Exempo de uso:<html><head><link rel="stylesheet"
href="css/estilo10-03.css" type="text/css">
</head><body><p>texto</p></body></html>
92
Estilos
Podem ser atribuídos: a uma tag a uma classe a ...
93
Estilos em Eventos
active hover link visited
94
Estilos
Formatação de texto Formatos de tamanho Cores e fundos Formatação de parágrafos Formatação de listas Formatação de tabelas Posicionamento Dinâmico
95
Script
<script type=“JavaScript" src="[URL]">...</script>
A tag script deve ser inserida entre as tags <head> e </head>
96
Atributos
type tipo do script (ex: JavaScript) src permite a inclusão de um
arquivo externo contendo o script
Exemplo:<script language=“JavaScript” src=
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
101
Comentários em JavaScript
// usado para comentários de uma única linha
/* ... */ comentário de múltiplas linhas
102
Variáveis
São espaços de memória onde podemos guardar uma informação, como um número ou uma cadeia de caracteres
var a=1; var b=5; var c=6; var valor=1.20; var nome="policamp"; var cidade="campinas";
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 HTMLhttp://www.w3schools.com/html/
Tutorial http://www.htmlcodetutorial.com/
111
Links
Link para vários tutoriaishttp://www.devguru.com/home.asp
Tutorial HTML do ICMC-USPhttp://www.icmc.usp.br/ensino/material/html/
Tutoriais de HTMLhttp://www.truquesedicas.com/tutoriais/html/00001a.htm
112
Links
Site TableLess http://www.tableless.com.brHá 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/
top related