1 
HTML / JavaScript 
V1.0
2 
Introdução 
 HTML = HyperText Markup Language 
 HTML é a linguagem de marcação universal 
para Web. HTML permite que ...
3 
Conceitos 
 Hipertexto: um documento hipertexto 
provê links visualmente claros a outros 
documentos e selecionando um...
4 
Conceitos 
 Multimídia: combina várias tecnologias de 
apresentação num esforço de apelar aos 
vários sentidos quanto ...
5 
Serviços básicos da Internet 
 E-mail: correio eletrônico 
 FTP: transferência de arquivos 
 WWW: comunicação por me...
6 
Modelo Cliente / Servidor 
Cliente Servidor 
request 
Browser Servidor Web 
response 
Mozilla Firefox 
Internet Explore...
7 
Modelo Cliente-Servidor 
 Cliente Web (web client)  é o programa 
responsável para exibição das páginas 
solicitas pe...
8 
Clientes Web 
 Browser (navegador ou paginador) 
 Exemplos: 
 Internet Explorer 
 Mozilla Firefox 
 Opera 
 Safar...
9 
URL (Uniform Resource Locator) 
 Permite que cada documento na Web 
possua uma endereço único que indica o 
nome do ar...
10 
Exemplo 
 http://www.policamp.edu.br/files_biblioteca/normalizacao_ Onde: 
http://  protocolo usado 
www.policamp.e...
11 
Protocolos 
 file: um arquivo no PC local 
 ftp: um arquivo em um servidor FTP 
 http: um arquivo em WWW 
 gopher:...
12 
Site (Web Site) ou Sítio 
 Um site WWW é um conjunto de páginas 
(com uso de hipertexto) relacionados 
organizadas hi...
13 
Conceitos 
 Website: é uma ou mais páginas Web ligadas de 
uma forma significativa 
 Web server: é o computador real...
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 ...
Linguagem HTML (Hypertext Markup Language) 
 Define a estrutura de uma página 
estabelecendo seu título, texto, listas, 
...
17 
Linguagem HTML 
 A linguagem HTML é transportada pelo 
protocolo HTTP (HyperText Transfer 
Protocol) ou Protocolo de ...
18 
Linguagem HTML 
 Uma página HTML pode ser criada com uso 
de qualquer editor de textos porém deve ter 
a extensão .ht...
19 
Estrutura básica de uma página HTML 
<html> 
<head> 
</head> 
<body> 
</body> 
</html> 
Cabeçalho 
Corpo 
Documento HT...
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ã...
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/categ...
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 
 <...
Cabeçalhos 
Cabeçalhos são definidos com as tags <h1> a <h6> 
<h1> defines o maior cabeçalho enquanto <h6> 
define o menor...
Formatação de Textos 
Dois tipos de formatação: 
 Lógica 
 Física 
A idéia dessa separação é a independência 
entre espe...
28 
Formação Lógica e Física 
 A formatação lógica acompanha o 
significado lógico do texto marcado. Sua 
apresentação va...
Tag <font> 
Atributos: 
size  tamanho da fonte 
color define a cor da fonte do texto 
face  é o nome da fonte que a tag...
30 
Atributos 
Atributo Exemplo Proposta 
size="número" size="2" Define o tamanho da fonte 
size="+número " size="+1" Aume...
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 Aqu...
33 
Tags de estilos físicos 
 <b> (bold) negrito 
 <i> (italic) itálico 
 <tt> fonte de máquina de escrever 
(monoespaç...
34 
Parágrafo 
 Tag <p> 
 <p align="[left|right|center|justify]"> [texto] </p> 
 left – seleciona alinhamento a esquerd...
35 
Linha Horizontal 
 As linhas horizontais podem ser usadas 
para separar visualmente seções de uma 
página da web. 
 ...
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 li...
38 
Lista de Definição – Exemplo 
<dl> 
<dt> 
HTML 
<dd>Hypertext Markup 
Language 
<dt>XML 
<dd> Extensible Markup 
Langu...
39 
Listas - Ordenadas 
Uso das tags <ol> 
Exemplo: 
<ol> 
<li>primeiro 
<li>segundo 
<li>terceiro 
</ol> 
Resultado 
1. p...
40 
Listas – Não ordenadas 
Uso das tags <ul> 
Exemplo: 
<ul> 
<li>primeiro 
<li>segundo 
<li>terceiro 
</ul> 
Resultado 
...
A tag <a> (Anchor) e o atributo href 
HTML usa a tag <a> (anchor) para criar um link para 
outro documento. 
Um anchor (ân...
A tag <a> (Anchor) e o atributo href 
A tag <a> é usada para criar uma ligação 
(vínculo) ao link, 
O atributo href é usad...
A tag <a> (Anchor) e o atributo href 
Esta âncora define um link para página da 
Policamp: 
<a href="http://www.policamp.e...
Links 
Os links tornam possível a navegação entre 
páginas. 
<a 
name="[nome]" 
href="[url]" 
title="[titulo]" 
target="[_...
45 
Atributos 
 name: marca um indicador, isto é, uma 
região de um documento como destino de 
uma ligação 
 href: indic...
46 
Âncoras – links na mesma página 
 Âncoras são inseridas pelo atributo name da tag 
<a>. 
 Exemplo: 
<a href="#link1"...
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:...
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...
Tabelas - Tags 
Tags: 
<table> ... </table>  delimita uma tabela 
<caption> ... </caption>  define um título 
para tabel...
52 
Tabelas – Tag <table> 
<table 
[border="n"] 
[cellpadding="n"] 
[cellspacing="n" 
[width="n"] 
[align="left"|"center"|...
53 
Exemplo de Tabela 
<table> 
<tr> 
<td> linha 1, coluna 1 </td> 
<td> linha 1, coluna 2 </td> 
</tr> 
<tr> 
<td> linha ...
54 
Atributos da tag <table> 
 width: especifica a largura da tabela 
 height: especifica a altura da tabela 
 align: a...
55 
Atributos (2) 
 border  especifica a largura da borda (use 
o valor "0" para não exibir as bordas) 
 bordercolor  ...
56 
Atributos para mesclagem de células 
 colspan  permite mesclar colunas de uma 
determinada linha de uma tabela 
 ro...
57 
Áreas das tabelas 
 <thead> .. </thead>  define um table head 
ou cabeçalho da tabela 
 <tfoot> .. </tfoot>  defin...
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 def...
Frames 
Com frames é possível visualizar mais de um documento 
HTML na mesma janela do browser. 
Cada documento HTML é cha...
Frames 
Tag Descrição 
<frameset> Define um conjunto de frames 
<frame> Define uma sub-janela (um 
61 
frame) 
<noframe> D...
62 
A tag Frameset 
 A tag<frameset> define como dividir uma 
janela em frames 
 Cada frameset define um conjunto de lin...
Frames - Tags 
Tag <frameset> é usada para organizar 
múltiplas janelas 
Atributos: 
cols: define o número e tamanho das c...
64 
A tag <frame> 
 A tag <frame> define que documento HTML 
será alocado em cada frame 
 No exemplo abaixo temos um fra...
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ários 
Um formulário é uma área que contém elementos de 
formulários. 
Elementos de formulários são elementos que 
p...
68 
Formulários – Tag <form> 
<form 
name ="[nome]" 
method ="[get|post]" 
action ="[url]" 
enctype="[tipo]" 
> 
... 
</fo...
69 
Atributos do Form 
 name: nome do formulário 
 method: GET | POST 
 GET  dados enviados na URL da página (limite d...
70 
Método GET 
 os dados inseridos em um formulário fazem 
parte da URL associada a consulta enviada 
ao servidor. 
 as...
71 
Método POST 
 os dados inseridos em um formulário fazem 
parte do corpo da mensagem encaminhada 
ao servidor que supo...
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 ...
75 
Atributo type 
 text – entrada de texto (linha única) 
 checkbox – caixa de múltiplas opções 
 radio – caixa de opç...
76 
Tag input 
<input 
type="tipo" 
name="nome" 
id="id" 
value="valor" 
size="tamanho" 
maxlength=[limite de caracteres] ...
Text Field (Caixa de entrada de uma linha) 
<html> 
<body> 
<form action="" name="Form1" method="get"> 
<p>Nome: 
<input t...
Password (Senha) 
<html> 
<body> 
<form action=""> 
Usuario: 
<input type="text" name="user" size="20" /> 
<br /> 
Senha: ...
79 
Checkboxes (Caixa de Seleção) 
<html> 
<body> 
<form action="" name="Form" method="POST"> 
Eu tenho uma bicicleta: 
<i...
Radio Button (botão de rádio ou seletor) 
<html> 
<body> 
<form action="" name="Form" method="POST"> 
Qual é seu sexo ? 
<...
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: ...
Área de texto (Caixa de texto de rolagem) 
<p>Entre com seus comentários: 
<textarea 
name="comentarios" 
rows="6" 
cols="...
Tag select (Menu suspenso (Select e Option)) 
<select 
name ="browser" 
value="Firefox" 
size ="2" 
> 
<option>Internet Ex...
85 
Lista 
Atributos: 
 size – determina quantos itens serão vistos 
 multiple – permite mais de uma seleção 
 value - ...
86 
Label
87 
Fieldset e Legend 
 O elemento fieldset organiza os controles 
do form em grupos que aparecem no 
navegados 
 O elem...
Exemplo 
<fieldset> 
<legend>Entrada de Dados</legend> 
<label for="control4">Qual é seu time de futebol 
favorito ?</labe...
89 
Estilos
Usando estilos 
Há três forma de trabalhar com folhas de estilo: 
 In-line  utilizados na própria tag 
 Estilo incorpor...
91 
CSS (Cascade Style Sheet) 
Exemplo: 
estilo10-03.css 
P {font-family: arial} 
Exempo de uso: 
<html> 
<head> 
<link re...
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 l...
Script 
<script type=“JavaScript" src="[URL]"> 
... 
</script> 
A tag script deve ser inserida entre as tags 
<head> e </h...
96 
Atributos 
 type  tipo do script (ex: JavaScript) 
 src  permite a inclusão de um arquivo 
externo contendo o scri...
97 
Bibliografia 
 [1] LEMAY, L. Aprenda em 1 Semana HTML 
4. Rio de Janeiro. Campus. 1999 
 [2] Marcondes, C. A. HTML 4...
98 
JavaScript 
Fundamentos
99 
JavaScript 
 É uma linguagem de programação client 
side, isto é, executado no lado cliente da 
aplicação. 
 É case ...
100 
Por que usar JavaScript 
 Facilidade de uso 
 não exige a declaração de tipos de variáveis 
 fácil de usar 
 Aume...
Comentários em JavaScript 
//  usado para comentários de uma única 
linha 
/* ... */  comentário de múltiplas linhas 
10...
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...
103 
Caixas de mensagens 
 Mensagem de Alerta (alert) 
 Mensagem de Confirmação (confirm) 
 Mensagem de prompt para ent...
104 
Eventos 
 São ações identificáveis em um sistema 
 Ocorrem em uma página web normalmente 
quando o visitante intera...
105 
Eventos 
 Onload: sempre que a página é carregada ou 
recarregada 
 Onunload 
 Onclick: sempre que o visitante cli...
106 
Eventos 
 Onfocus: sempre que um visitante entra um 
campo de formulário específico 
 Onblur: sempre que um visitan...
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 fo...
109 
Vantagens do DHTML 
 Maiores recursos estéticos 
 Maior controle dos objetos na página 
 Identificação das formata...
110 
Links 
 Tutorial de HTML 4.01 
http://www.artifice.web.pt/tutoriais/cntd/tut_html1.html 
 <CriarWeb> 
http://www.cr...
111 
Links 
 Link para vários tutoriais 
http://www.devguru.com/home.asp 
 Tutorial HTML do ICMC-USP 
http://www.icmc.us...
112 
Links 
 Site TableLess http://www.tableless.com.br 
Há dicas para criar páginas interessantes sem o uso 
de tabelas ...
113 
Site do Professor 
 http://www.mltech.com.br/
Próximos SlideShares
Carregando em…5
×

Html

272 visualizações

Publicada em

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Html

  1. 1. 1 HTML / JavaScript V1.0
  2. 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. 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. 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. 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. 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. 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. 8 Clientes Web  Browser (navegador ou paginador)  Exemplos:  Internet Explorer  Mozilla Firefox  Opera  Safari  Konqueror  Chrome
  9. 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. 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. 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. 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. 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. 14 Protocolos  HTTP (Hypertext Transport Protocol)  FTP (File Transfer Protocol)
  15. 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. 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. 17 Linguagem HTML  A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto
  18. 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. 19 Estrutura básica de uma página HTML <html> <head> </head> <body> </body> </html> Cabeçalho Corpo Documento HTML
  20. 20. 20 Exemplo <html> <head> <title>Primeira pagina</title> </head> <body> <p>Primeiro Paragrafo </body> </html>
  21. 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. 22 Exemplos de tags  <h1> ... </h1>  <br>  <p>  <h1 align="center"> ... </h1> nome do atributo
  23. 23. 23 Exemplos de editores HTML  Dreamweaver  FrontPage  NVU Veja outros editores em: http://baixaki.ig.com.br/categorias/cat125_1.htm
  24. 24. 24 Comentários em HTML  <!-- [comentário] -->
  25. 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. 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. 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. 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. 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. 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. 31 Padrões de Cores  Padrão de cores RGB (Red, Green, Blue)  Padrão de cores CMYK (Cyan, Magenta, Yellow, Black)
  32. 32. 32 Algumas cores nomeadas Black Marron Green Navy Sliver Red Lime Blue Gray Puple Olive Teal White Fuchsia Yellow Aqua
  33. 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. 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. 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. 36 Listas  Listas de definição  Listas Ordenadas  Listas Não ordenadas
  37. 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. 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. 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. 40 Listas – Não ordenadas Uso das tags <ul> Exemplo: <ul> <li>primeiro <li>segundo <li>terceiro </ul> Resultado  primeiro  segundo  terceiro
  41. 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. 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. 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. 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. 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. 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. 47 Imagens  <img>  inclui uma imagem em uma página HTML
  48. 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. 49 Exemplo  <img src="angry.gif" alt="Angry"/>
  50. 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. 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. 52 Tabelas – Tag <table> <table [border="n"] [cellpadding="n"] [cellspacing="n" [width="n"] [align="left"|"center"|"right" > ... </table>
  53. 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. 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. 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. 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. 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. 58 Título da tabela  Tag caption  Deve ser usado dentro da tag <table>
  59. 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. 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. 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. 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. 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. 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. 65 Exemplo <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
  66. 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. 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. 68 Formulários – Tag <form> <form name ="[nome]" method ="[get|post]" action ="[url]" enctype="[tipo]" > ... </form>
  69. 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. 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. 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. 72 Entrada de dados através do formulários  Entrada de dados  Área de textos  Lista
  73. 73. 73 Tag <input>  A tag <input> define o tipo da tag para entrada de dados
  74. 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. 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. 76 Tag input <input type="tipo" name="nome" id="id" value="valor" size="tamanho" maxlength=[limite de caracteres] checked readonly disabled tabindex= >
  77. 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. 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. 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. 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. 81. Button (Botão) <html> <body> <form action=""> <input type="button" value="Hello world!" /> </form> </body> </html> 81
  82. 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. 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. 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. 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. 86. 86 Label
  87. 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. 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
  89. 89. 89 Estilos
  90. 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. 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. 92 Estilos Podem ser atribuídos:  a uma tag  a uma classe  a ...
  93. 93. 93 Estilos em Eventos  active  hover  link  visited
  94. 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. 95. Script <script type=“JavaScript" src="[URL]"> ... </script> A tag script deve ser inserida entre as tags <head> e </head> 95
  96. 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. 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. 98. 98 JavaScript Fundamentos
  99. 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. 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. 101. Comentários em JavaScript //  usado para comentários de uma única linha /* ... */  comentário de múltiplas linhas 101
  102. 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. 103 Caixas de mensagens  Mensagem de Alerta (alert)  Mensagem de Confirmação (confirm)  Mensagem de prompt para entrada de dados
  104. 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. 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. 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. 107 Definição de Funções
  108. 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. 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. 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. 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. 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. 113 Site do Professor  http://www.mltech.com.br/

×