HTML CSS Javascript

HTML, CSS e Javascript
Carlos Bazilio
Depto de Cincia e Tecnologia
Plo Universitrio de Rio das Ostras
Universidade Federal Fluminense
Arquitetura
Vantagens
Portabilidade da soluo no lado do
cliente
Facilidade de deployment
Facilidade de manuteno, restaurao e
atualizao da aplicao
Desvantagens
Nmero expressivo e crescente de dispositivos
diferentes com acesso a web (computao
ubqua)
Compatibilidade entre browsers
Novos desafios para a Engenharia de Software:
Adequao ao internet time
Metodologias voltadas para o desenvolvimento web
Computao Concorrente
Execuo no Cliente
(Browser)
HTML
CSS
Tableless
JavaScript
XML
XSLT
HTML
Hyper Text Markup Language
Especificao definida pelo consrcio W3C:
http://www.w3.org/
Um arquivo html contm marcadores (tags)
Estes marcadores indicam para o navegador
(browser) como a pgina deve ser apresentada
Marcadores usualmente vem em pares:
<tag>...</tag>
Tambm podem aparecer de forma abreviada:
<tag atributo=valor ... />
HTML
<html>
<head>
<title>Ttulo da Pgina</title>
</head>
<body>
Esta minha primeira pgina.
</body>
</html>
HTML
Tags Bsicas
Tag
Descrio
<html>
Define um documento HTML
<body>
Define o corpo de um
documento
<h1> to <h6>
Define cabealhos 1 a 6
<p>
Define um pargrafo
<br>
Insere uma quebra de linha
<hr>
Define uma linha horizontal

Define um comentrio
HTML
Tags de Formatao
Tag
Descrio
<b>
Formata um texto em negrito
<big>
Formata um texto com fonte maior
<em>
Formata um texto com nfase
<i>
Formata um texto em itlico
<small>
Formata um texto com fonte pequena
<strong>
Formata um texto em destaque
<sub>
Formata um texto subscrito
<sup>
Formata um texto sobrescrito
<ins>
Formata um texto sublinhado
<del>
Formata um texto anulado
HTML
Entidades
Utilizadas para apresentao de caracteres
especiais em html. Ex.: <
Sada
Descrio
Nome da Entidade
Nmero
Espao sem quebra

<
Menor que
<
<
>
Maior que
>
>
&
E comercial
&
&
"
Aspas
"
"
'
Apstrofo
' (does not work in IE)
'
HTML
Links e Imagens
<a href=www.sirius.com.br>Pgina da Sirius!
</a>
Pgina da Sirius
<a name=Endereco>Como Chegar</a>

Trecho da pgina que informa detalhes sobre
localizao
<a href=www.sirius.com.br#Endereco>
Localizao</a>
Localizao
<img src=logo.gif alt=Logo da Sirius/>
HTML
Tabelas
<table border="1">
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
<tr>
<td>linha 1, valor 1</td>
</tr>
<tr>
</tr>
</table>
HTML
Background e Fontes
Formas de se definir um background preto para
o corpo da pgina
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Definindo uma imagem de fundo

<body background="logo.gif">
<body
background="http://www.sirius.com.br/clouds.gif">
Configurando uma fonte

<font size="2" face="Verdana">Texto com fonte
especfica.</font>
HTML
Formulrios
HTML possibilita a criao de formulrios online
utilizando tags
A tag <form> a mais comum e permite a
criao de um formulrio de entrada de dados
<body><form>
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
</form></body>
HTML
Formulrios
Tipos que podem ser utilizados com a tag <input>:
button: Insere um boto
checkbox: Insere um checkbox; para vrios itens, basta
inserirmos vrios inputs deste tipo
file: Insere boto seleo de arquivo atravs de uma caixa de
dilogo
hidden: Campo pertencente ao formulrio, mas que no ser
exibido na pgina
image: Insere uma imagem como um boto submit
password: Insere um campo password (caracteres digitados no
aparecem)
radio: Insere um radiobox (anlogo ao checkbox)
reset: Restaura os valores iniciais do formulrio
submit: Encaminha os dados inseridos para algum arquivo
text: Insere um campo de edio de texto
HTML
Formulrios
Quando algum elemento do tipo submit
inserido num formulrio e acionado, seus
dados so enviados para um arquivo
O arquivo mencionado indicado pelo
atributo action do elemento <form>
Este arquivo dever estar armazenado
num servidor web (Apache, Tomcat,
IIS, ...), e estar escrito em alguma
linguagem de programao de servidores:
jsp, php, asp, sevlets, ...
HTML
Formulrios
<body>
<form action=processaForm.jsp" >
<input type="submit" value="Enviar">
</form>
</body>
URL aps clicar no boto: .../sirius/processaForm.jsp?

firstname=Carlos&lastname=Bazilio&senha=abcdefg
HTML
Outras tags de Formulrios
Tag
Descrio
<form>
Define um formulrio para entrada do usurio
<input>
Define um campo de entrada
<textarea>
<label>
Define um campo texto com mltiplas linhas

Define um label para algum controle
<fieldset>
Desenha uma caixa em torno de um conjunto de

elementos
<legend>
Define um ttulo para um <fieldset>
<select>
Cria uma lista drop-down
<optgroup>
Criar uma hierarquia nas opes de uma lista drop-down
<option>
Uma opo na lista drop-down
<button>
Insere um boto. Difere de <input> por poder conter

algum contedo, como uma imagem
HTML
Outras tags de Formulrios
CSS
Cascading Style Sheets
Estilos definem como elementos html devem ser
apresentados
Permite a separao entre definio de
contedo e formatao em HTML
Style sheets externos so definidos atravs de
arquivos CSS
Atualmente o padro para insero de estilo
na construo de pginas html
http://www.csszengarden.com/
CSS
Formato geral:
seletor { propriedade: valor }
Uma definio de estilo em CSS ser composta
por uma sequncia de definies como esta
acima
Exemplos:
body { color: black }
p { font-family: Verdana; text-align: center; color: red
}
h1,h2,h3,h4,h5,h6 { color: green }
p {margin-left: 20px}
CSS
Classes em CSS permitem que um mesmo
elemento seja exibido de diferentes formas
Formato usando classes:
seletor.classe { propriedade: valor }
Exemplos:
p.direita {text-align: right} // Alinha direita
p.centro {text-align: center} // Centraliza
.esquerda {text-align: left} // Aplicado a qualquer
elemento html que contenha classe esquerda
<p class=direita>Este pargrafo ser alinhado direita</p>
<p class=centro>Este pargrafo ser centralizado</p>
<p class=esquerda>Este ser esquerda</p>
CSS
Como definir (1/3)
Existem 3 maneiras se definir um CSS
para um documento HTML
Criando um link externo
<html>
<head><link rel="stylesheet"
type="text/css" href="mystyle.css" /></head>
<body>
Esta minha primeira
pgina. do arquivo mystyle.css */
/* Contedo
</body>
hr {color: sienna}
</html>
body {background-image:
url("images/back40.gif")}
CSS
Como definir (2/3)
Internamente (dentro da prpria pgina HTML
a ser exibida)
<html>
<head>
<style type="text/css>
hr {color: sienna}
body {background-image:
url("images/back40.gif")}
</style>
</head>
<body>
</body>
</html>
CSS
Como definir (3/3)
Definindo de forma inline
<html>
<head</head>
<body style=color: sienna;
text-align: center>
</body>
</html>
Caso existam vrias definies para um
mesmo elemento, a prioridade : inline,
interna e externa
Aplicaes
Com CSS podemos formatar:
Background
Textos
Fontes
Margens
Bordas
Listas
Tabelas
http://www.w3schools.com/css/css_examples.asp
Tableless
Padro que vem sendo adotado na web para
uso massivo de html+css
Objetiva, principalmente, melhor acessibilidade
de pginas web
Prope a no utilizao tabelas html para a
construo do layout da pgina (origem do
nome)
Naturalmente, este uso no deveria ser evitado
se o que se deseja construir uma tabela de
fato
JavaScript
a linguagem de script utilizada por milhes de
pginas web
Foi projetada para aumentar interatividade das
pginas web:
Validao de formulrios, interao com o usurio
(p.ex., tratamento de cliques de botes), deteco de
navegadores, etc
reconhecida pela maioria dos navegadores

Seu processamento feito na mquina cliente
(browser)
No h relao com Java
JavaScript - Exemplo
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write(Esta minha
primeira pgina.");
</script>
</body>
</html>
JavaScript Onde ocorrem

Uma tag <script/> pode ser definida numa
seo head, numa seo body e tambm
pode ser definida externamente:
Na seo head, os scripts so executados
quando so chamados ou quando algum
evento ocorre;
Na seo body, os scripts so executados na
carga da pgina web
Para definio externa, um arquivo .js
precisa ser fornecido com as funes
necessrias
JavaScript Exemplo
<html>
<head>
<script src="hello.js"></script>
</head>
<body onload="message()">
document.write(<h1>Esta minha primeira
pgina.</h1>");
</script>
</body>
</html>
JavaScript - Sintaxe
Possui construes existentes na maioria
das linguagens de programao (sintaxe
similar a C):
Declarao de variveis (var x;)
Comandos condicionais, repeties, definio
de funes de usurio
Operadores de atribuio, comparao, ...
JavaScript
Janelas Popup
Funes para criao de janelas popup:
Alerta ( alert(Texto a ser exibido); )
Confirmao ( confirm(Texto a ser exibido
em janela<body>
OK/Cancel); )
Entrada de <script
dado ( type="text/javascript">
prompt(Label do campo
var nome = prompt("Seu nome");
de entrada, valor padro); )
if (nome != null && nome != "")

document.write("Oi
" + nome);
Janelas que possuem
o boto Cancel,
else
quando acionado retorna valor null
document.write("Oi annimo!");
</script>
</body>
JavaScript Eventos
Eventos so aes que podem ser
detectadas por um script
Exemplos de eventos:
Clique do mouse, abertura de uma pgina
web ou imagem, envio de um formulrio html,
uma tecla pressionada, etc
O tratamento destes eventos pode ser a

chamada de funes do script
JavaScript Eventos
<html>
<head><script src="event.js"></script>
</head>
/* Contedo do arquivo event.js */
<body>
function mouseOver()
<img border="0"
{
src="quadrado1.gif"
document.imagem.src ="quadrado2.gif";
name="imagem"
}
onmouseover="mouseOver()"
function mouseOut()
onmouseout="mouseOut()"
/>
{
</body>
document.imagem.src ="quadrado1.gif";
</html>
}
Lista de eventos:
http://www.w3schools.com/jsref/jsref_events.asp
JavaScript Objetos
JavaScript uma linguagem OO
Com isto, algumas classes utilitrias padres
esto disponveis, as quais possuem mtodos e
propriedades:
String: manipulao de strings no script
/* Exemplo de funo de script que calcula

o tamanho de uma string */
function tamanho(msg)
{
return msg.length;
}
http://www.w3schools.com/jsref/jsref_obj_string.asp
JavaScript Objetos
Date: manipulao de datas no script
/* Exemplo de funo de script que manipula
datas */
function bug(data)
{
var x = new Date();
x.setFullYear(2000,0,0);
if (data > x)
alert(Bug do milnio!);
}
http://www.w3schools.com/jsref/jsref_obj_date.asp
JavaScript Objetos
Outras classes disponveis na linguagem
JavaScript:
Array: armazenamento de conjuntos de
valores
http://www.w3schools.com/js/js_obj_array.asp
Boolean: manipulao de valores booleanos

http://www.w3schools.com/js/js_obj_boolean.asp
Math: manipulao de valores com operaes

matemticas
http://www.w3schools.com/jsref/jsref_obj_math.as
p
JavaScript Objetos
Exemplo
/* Exemplo de funo de script que manipula objetos
de JavaScript */
function exemplo_objetos()
{
var d=new Date();
var dias=new Array(7);
dias[0]="Domingo"; dias[1]="Segunda";
dias[2]="Tera"; dias[3]="Quarta"; dias[4]="Quinta";
dias[5]="Sexta"; dias[6]="Sbado";
document.write("Hoje " + dias[d.getDay()]);
document.write("Dia qualquer: " +
dias[Math.round(Math.random()*6)]);
document.write(navigator.appCodeName);
}
JavaScript Objetos
Alm destas, todos os objetos HTML DOM
podem ser acessados atravs de scripts
Window: objeto no topo da hierarquia do JavaScript;
representa a janela do browser
Navigator: contm informao sobre o browser do
cliente
Screen: contm informao sobre a tela
History: contm as URLs visitadas
Location: contm informao sobre a URL corrente
http://www.w3schools.com/js/js_obj_htmldom.asp
JavaScript Objetos
Exemplo com Window
<html>
<head>
function currLocation() {
alert(window.location);
}
function newLocation() {
window.location="http://www.w3schools.com";
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="Show current
URL">
<input type="button" onclick="newLocation()" value="Change URL">
</body>
</html>
HTML DOM
Define um padro para acesso a elementos
HTML
O DOM apresenta um documento HTML como
uma estrutura em rvore
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=>My link</a>
<h1>My header</h1>
</body>
</html>
HTML DOM
Relacionamento entre ns numa rvore
DOM
HTML DOM - API

definida por um conjunto de propriedades e
mtodos
Algumas propriedades DOM
x.innerHTML: o valor text de x

x.nodeName: o nome do elemento x
x.nodeValue: o valor de x
x.nodeType: o tipo de x (1 elemento; 2 atributo; 3
texto; ...)
x.parentNode: o n pai de x
x.childNodes: os ns filhos de x
x.attributes: os ns atributos de x
HTML DOM - API

Alguns mtodos DOM
x.getElementById(id): obtm o elemento com
o id fornecido
x.getElementsByTagName(name): obtm
todos os elementos com a tag name
x.appendChild(node): insere um n filho node
em x
x.removeChild(node): remove o n filho node
de x
HTML DOM API

Exemplo
<html>
<body>
<p id="intro">Hello World!</p>
txt=document.getElementById("intro").innerHTML;
document.write(<p>Texto do pargrafo intro: + txt +
"</p>");
</script>
</body>
</html>
HTML DOM API

Exemplo
<html>
<body>
<p id="intro">Hello World!</p>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(<p>Texto do pargrafo intro: + txt +
"</p>");
</script>
</body>
</html>
JavaScript Mais Usos
Criao de cookies
Validao de entrada
Disparo de funes com retardo (tempo)
Criao de objetos prprios
HTML Como funciona o

envio desta mensagem?
<body>
<form action=processaForm.jsp" >
<input type="submit" value="Enviar">
</form>
</body>
URL aps clicar no boto: .../sirius/processaForm.jsp?

Tipos de requisies HTTP

GET
Parmetros so enviados na url da solicitao
http://localhost:8080/sirius/processaForm.jsp?
Envio de parmetros firstname e lastname e senha
para um recurso no servidor (neste caso, uma pgina
jsp processaForm.jsp)
Estas urls podem ser armazenadas como favoritos
Tipo padro (default)
No recomendado para o envio de informaes
sigilosas
AJAX
Termo surgiu em 2005
AJAX (Asynchronous JavaScript and XML) no uma
nova tecnologia, mas sim uma combinao de
tecnologias padro
Tem como objetivo principal enriquecer a interao de
aplicaes web
Combina as seguintes tecnologias:
HTML/XHTML e CSS
DOM
XML e XSLT
JavaScript
XMLHttpRequest
XMLHttpRequest
o sonho dos desenvolvedores web, pois
permite:
Atualizar uma pgina web sem recarreg-la
Enviar requisio de dados a um servidor aps a
pgina ter sido carregada
Receber resposta de requisies aps a pgina ter
sido carregada
Enviar dados para um servidor em background
suportado pela maioria dos navegadores

modernos
Navegao sem AJAX
Navegao com AJAX
AJAX
XMLHttp
Tudo comeou quando o IE (verso 5) ofereceu
suporte ao XML atravs de uma biblioteca
ActiveX (MSXML)
Isto permitia ao desenvolver fazer solicitaes
HTTP via JavaScript; a inteno era que estas
requisies fossem respondidas como XML
A popularidade deste recurso forou os outros
navegadores a oferecerem recurso similar
AJAX - Exemplo
Em seguida veremos um exemplo de uso
do Ajax
Neste exemplo so criadas 3 funes
Javascript:
getXMLObject(): obtm o objeto
XMLHttpRequest
ajaxFuction(): realiza a chamada ao servidor e
configura a funo de callback para tratamento
da resposta
handleServerRespose(): funo de callback
AJAX - Exemplo
<html>
<head> <title>JSP and Servlet using AJAX</title>
function getXMLObject() //XML OBJECT {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old
Microsoft Browsers
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For
Microsoft IE 6.0+
} catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object
then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers }
return xmlHttp; // Mandatory Statement returning the ajax object created
} ...
AJAX - Exemplo
var xmlhttp = new getXMLObject(); //objeto xmlhttp
function ajaxFunction() {
var getdate = new Date();
if(xmlhttp) {
xmlhttp.open("GET","gettime?" + getdate.getTime(),true); //gettime a
url do servlet
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-formurlencoded');
xmlhttp.send(null);
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200)
{ document.myForm.time.value=xmlhttp.responseText; //Atualiza o form }
else {
alert("Error during AJAX call. Please try again"); } } }
</script> ...
AJAX - Exemplo
A propriedade onreadystatechange
configura a funo de callback
O mtodo send envia a requisio
A propriedade readyState defina o estado
da requisio
A propriedade status informa o cdigo
HTTP de status da resposta
A propriedade responseText contm o
texto da resposta
AJAX - Exemplo
<body>
<form name="myForm">
Server Time:<input type="text" name="time" /><br />
<input type="button"
onclick="javascript:ajaxFunction();" value="Click to display Server
Time on Textbox"/><br />
</form>
</body>
</head>
</html>
AJAX - Exemplo
<body>
<form name="myForm">
Usurio: <input type=text"
onkeyup="javascript:ajaxFunction(); size=20 name=nome/><br
/>
<input type=button value=Envie /><br />
Server Time:<input type="text" name="time" /><br />
</form>
</body>
</head>
</html>
Referncias
http://www.w3schools.com/
Site com tutoriais on-line rpidos e com muita
qualidade
http://www.csszengarden.com/
Site que demonstra as potencialidades de CSS
http://del.icio.us/carlosbazilio/{css+html}
Meus favoritos sobre o assunto
http://www.w3.org/
Site do consrcio W3C

HTML CSS Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML CSS Javascript

Caricato da

Copyright:

Formati disponibili

HTML, CSS e Javascript

Define um documento HTML

Insere uma quebra de linha

Define uma linha horizontal

Formata um texto em negrito

Formata um texto com fonte maior

Formata um texto com nfase

Formata um texto em itlico

Formata um texto com fonte pequena

Formata um texto em destaque

Formata um texto subscrito

Formata um texto sobrescrito

Formata um texto sublinhado

Formata um texto anulado

Espao sem quebra

&apos; (does not work in IE)

<a name=Endereco>Como Chegar</a>

<img src=logo.gif alt=Logo da Sirius/>

Definindo uma imagem de fundo

Configurando uma fonte

URL aps clicar no boto: .../sirius/processaForm.jsp?

Define um formulrio para entrada do usurio

Define um campo de entrada

Define um campo texto com mltiplas linhas

Desenha uma caixa em torno de um conjunto de

Define um ttulo para um <fieldset>

Cria uma lista drop-down

Criar uma hierarquia nas opes de uma lista drop-down

Uma opo na lista drop-down

Insere um boto. Difere de <input> por poder conter

reconhecida pela maioria dos navegadores

JavaScript Onde ocorrem

if (nome != null && nome != "")

O tratamento destes eventos pode ser a

/* Exemplo de funo de script que calcula

Boolean: manipulao de valores booleanos

Math: manipulao de valores com operaes

HTML DOM - API

x.innerHTML: o valor text de x

HTML DOM - API

HTML DOM API

HTML DOM API

JavaScript Mais Usos

HTML Como funciona o

URL aps clicar no boto: .../sirius/processaForm.jsp?

Tipos de requisies HTTP

suportado pela maioria dos navegadores

Navegao sem AJAX

Navegao com AJAX

Potrebbero piacerti anche

' (does not work in IE)