1 HTML / JavaScript V1.0. 2 Introdução HTML = HyperText Markup Language HTML é a linguagem de...

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

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> é 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


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/

1 HTML / JavaScript V1.0. 2 Introdução HTML = HyperText Markup Language HTML é a linguagem de...

Documents

Transcript of 1 HTML / JavaScript V1.0. 2 Introdução HTML = HyperText Markup Language HTML é a linguagem de...