1 - Introdução A Web

Linguagem Tcnica de
Programao III
Introduo Web
Thiago Leite
thiago.leite@udf.edu.br
segunda-feira, 8 de abril de 13
Bibliografia
DAVIS, Michele E.;

PHILLIPS, Jon A. 1973-.
Aprendendo PHP &
MySQL. Rio de Janeiro:
Alta Books, 2008.
Bibliografia
DALLOGLIO, Pablo.
PHP: programando
com orientao a
objetos. So Paulo:
Novatec Editora, 2007.
Bibliografia
NIXON, Robin.
Learning PHP,
MySQL, JavaScript,
and CSS: A Stepby-Step Guide to
Creating Dynamic
Websites. California:
O'Reilly Media Inc, 2012.
Ementa
1. Introduo a Web
2. Introduo a PHP
3. Orientao a objetos
4. Manipulao de Dados
Avaliao
Primeiro bimestre
Trabalhos em grupo (5 pontos)
Grupo de 3 alunos
Online no Blackboard
Avaliao bimestral (5 pontos)
Avaliao
Segundo bimestre
Projeto (5 pontos)
Grupo de 3 alunos
Online no Blackboard
Avaliao bimestral (5 pontos)
Avaliao
No h arredondamento de
notas
Presena em Sala de
Aula
Limite de 20 faltas
2 faltas por dia de aula
Presena do aluno ser cobrada
Estilo das Provas

Bimestrais
(FUMARC) Assinale a opo que corresponde sintaxe correta de um
programa desenvolvido na linguagem PHP.
a) <begin php
echo "<p>Ol Mundo</p>" ;
end>
b) <php
/php>
c) <?php
?>
d) <php {
}>
10
Estilo das Provas

Bimestrais
(FUMARC) Assinale a opo que corresponde sintaxe correta de um
programa desenvolvido na linguagem PHP.
a) <begin php
end>
b) <php
/php>
c) <?php
?>
d) <php {
}>
10
Instituto de Tecnologia
de Massachusetts
Acesso a todo o material da universidade
MitOpenCourseWare
http://ocw.mit.edu
Acesso a parte do contedo em portugus
Parceria entre MIT e Universia
http://mit.universia.com.br
11
Cursos Stanford
University
Cursos online gratuitos
Livre para qualquer pessoa se inscrever
Entrega de certificado da Universidade de
Stanford
12
Cursos Piazza
Cursos online gratuitos pela plataforma
Piazza
https://piazza.com/itunesu
disponvel em plataforma Web e Mobile
13
Cursos de Extenso
Curso Preparatrio para

Certificao Linux
LPIC-1
Fundamentos,
Configurao e
Instalao de Ativos de
Rede Cisco
http://migre.me/dmGQh
14
Introduo Web
Tim Berners-Lee
inventor do WWW
(World Wide Web)
props sistema de
gerncia de
informaes em 1989
diretor da W3C
(World Wide Web
Consortium)
15
O que WWW?
16
16
Introduo Web
HTTP (Hyper Text Transfer Protocol)
Framework para navegar entre contedo
Linguagem de marcao HTML
Primeiro navegador e servidor Web
17
Introduo Web
HTML (Hyper Text Markup Language)
utilizado para criar as pginas Web,

incluindo texto e comandos de marcao
18
Introduo Web
HTTP um protocolo baseado no modelo
cliente/servidor
um servidor pode gerir mltiplas

diferentes conexes
todas as respostas so enviadas com

garantia de entrega
19
Modelo Cliente/Servidor
20
Modelo Cliente/Servidor
21
Introduo Web
Componentes para pginas Web estticas
Navegador Web (ex: Firefox, Internet
Explorer, Chrome, Safari)
Servios de traduo de nomes (ex: DNS

- Domain Name Service)
Servidor Web (ex: Microsoft IIS, Apache)

22
Acesso Web Esttico

23
Introduo Web
Componentes para pginas dinmicas Web
Linguagem de script servidor (ex: PHP,
ASP, Perl, Python)
Banco de Dados (ex: MySQL, Microsoft

SQL Server, Oracle)
Linguagem de script cliente (ex:

JavaScript,VBScript)
24
Acesso Web Dinmico

25
Introduo Web
Apache
muito alm de simplesmente de troca de

arquivos solicitados
serve arquivos HTML, imagens, Flash, udio,

RSS (Really Simple Sindication)...
servir arquivos dinmicos criados por

linguagens como PHP
suporte modularizado a outras atividades
26
Introduo Web
PHP (PHP: Hypertext Preprocessor)
linguagem para gerar arquivos dinmicos
acesso irrestrito ao servidor web
interpretar contedo em arquivos .php
analisa contedo entre os smbolos <?
php e ?>
27
Introduo Web
MySQL
banco para armazenamento de dados
banco de dados relacional
meio de armazenamento mais eficiente que

arquivos
bases de dados
tabelas
campos
28
Introduo Web
JavaScript
linguagem de script para manipular
HTML
dinamicamente realizar operaes no

cliente
muito utilizado para validao de campos

em formulrios
29
O que Software Livre?

30
30
Introduo Web
WAMP, MAMP e LAMP
Windows, Apache,
MySQL e PHP
Mac, Apache, MySQL

e PHP
Linux, Apache, MySQL

e PHP
31
Introduo Web
HTML uma linguagem de descrio de
pginas web
baseada em tags
tags descrevem um documento
documentos HTML contm tags em
texto puro
32
Introduo Web
Tags HTML
so formadas com os smbolos < e > (
ex: <html>
normalmente vem em pares
ex: <b></b>
o primeiro par abre a tag e o segundo fecha
33
Introduo Web
Elementos HTML
tudo entre duas tags
ex: <p>Isso um pargrafo.</p>
incio da tag
elemento
fim da tag
<p>
Isso um pargrafo
</p>
<a href="default.htm">
Isso um link
</a>
<br>
34
Introduo Web
Atributos HTML
alguns elementos HTML possuem
atributos
<p class="intro">Paragrafo com

classe</p>
35
Estrutura bsica de uma pgina

HTML
36
Introduo Web
Exemplo de cdigo HTML

<html>
<body>
<h1>Meu primeiro ttulo</h1>
<p>Meu primeiro pargrafo.</p>
</body>
</html>
37
Cdigo HTML Interpretado

38
Á
á
Â
â
À
à
Å
å
Ã
ã
Ä
ä
Æ
æ
É
é
Ê
ê
È
è
Ë
ë
Ð
ð
Í
í
Î
î
Ì
ì
Ï
ï
Ó
ó
Ô
ô
Ò
ò
Ø
ø
Õ
õ
Ö
ö
Ú
ú
Û
û
Ù
ù
Ü
ü
Ç
ç
Ñ
ñ
Ý
ý
"
<
>
&
"
<
>
&
®
©
Þ
þ
ß
Tabela de Codificao HTML

utilizando entities
39
Introduo Web
Exemplo de cdigo HTML utilizando entities

<html>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
40
HTML interpretado com entities

41
verso
ano
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML 1.0
2000
HTML5
2012
XHTML5
2013
Verses do HTML
42
Introduo Web
A declarao <!DOCTYPE>
auxilia o navegador a exibir corretamente
uma pgina web
indica a verso e tipo de HTML utilizado
43
Introduo Web
Exemplo de declarao para HTML5
<!DOCTYPE html>
Exemplo de declarao para HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Lista completa de declaraes em http://

www.w3schools.com/tags/tag_doctype.asp
44
Introduo Web
Ttulos em HTML
so definidos de <h1> a <h6>
<h1>Isto eh um ttulo</h1>
45
Introduo Web
Links HTML
so definidos com a tag <a>
podem possuir o atributo target
<a href="http://www.thiagofmleite.com"
target="_blank">Isto um link</a>
46
Introduo Web
Imagens HTML
so definidos com a tag <img>
<img src="w3schools.jpg" width="104" height="142">
47
Introduo Web
Comentrios em HTML
so definidos com a tag 

48
Introduo Web
Linhas horizontais em HTML
so definidos com a tag <hr>
<hr>
49
Introduo Web
Quebras de linhas em HTML
so definidos com a tag <br>
<br>
50
Introduo Web
Texto em negrito com HTML
so definidos com a tag <b>
<b>Texto em negrito</b>
51
Introduo Web
Texto em itlico com HTML
so definidos com a tag <i>
<i>Texto em italico</i>
52
Exerccio
Faa uma pgina web contendo seu

currculo
53
Introduo Web
Tabelas em HTML
as linhas so definidas pelas tags <tr>
(table row)
cada linha so dividas em clulas com

as tags <td> (table data)
o cabealho definido pelas tags <th>

(table header)
54
Exemplo Tabela HTML

<table border="1">
<tr>
<th>Cabealho 1</th>
<th>Cabealho 2</th>
</tr>
<tr>
<td>linha 1, clula 1</td>
</tr>
<tr>
</tr>
</table>
55
Introduo Web
Listas em HTML
listas numeradas definidas pelas tags
<ol> (ordered list)
listas no numeradas definidas pelas

tags <ul> (unordered list)
listas de definies utilizam tags <dl>

(definition list)
56
Introduo Web
Lista numerada em HTML
<ol>
<li>Caf</li>
<li>Leite</li>
</ol>
57
Introduo Web
Lista no numerada em HTML
<ul>
<li>Caf</li>
<li>Leite</li>
</ul>
58
Introduo Web
Lista de definies em HTML

<dl>
<dt>Caf</dt>
<dd>Bebida quente e preta</dd>
<dt>Leite</dt>
<dd>Bebida fria e branca</dd>
</dl>
59
Introduo Web
Formulrios so definidos pelas tags
<form> e so utilizados para passar dados

dos clientes para o servidor
tags <input> so elementos de entrada

de dados
ex: campo, checkbox, password, boto

radio button, boto de submisso e
mais
60
Tipos de Campos para Formulrios

61
Introduo Web
Exemplo de formulrio com campos text
<form>
Primeiro nome: <input type="text"
name="primeironome"><br>
Sobrenome: <input type="text"
name="sobrenome">
</form>
62
Introduo Web
Exemplo de formulrio com campos
password
<form>
Password: <input type="password"
name="password">
</form>
63
Introduo Web
Exemplo de formulrio com campos radio
atributo name define o grupo
<form>
<input type="radio" name="sexo"
value="masculino">Masculino<br>
<input type="radio" name="sexo"
value="feminino">Feminino
</form>
64
Introduo Web
Exemplo de formulrio com campos checkbox
atributo name define o grupo
<form>
<input type="checkbox" name="veiculo"
value="bicicleta">Eu tenho bicicleta<br>
<input type="checkbox" name="veiculo"
value="carro">Eu tenho carro
</form>
65
Introduo Web
Exemplo de formulrio com boto de submisso
atributo action define destino para os dados do

formulrio
atributo method define o mtodo de envio dos

dados
<form name="input" action="server.php"

method="get">
Usurio: <input type="text" name="usuario">
<input type="submit" value="Submeter">
</form>
66
Tag
Descrio
<form>
Define um formulrio
<input>
Define um campo de entrada
<textarea>
Define um campo com vrias linhas
<label>
Define um rtulo para um campo
<fieldset>
Define um grupo de campos relacionados
<legend>
Define uma legenda para o grupo de campos
<select>
Define uma lista drop-down
<optgroup>
Define um grupo de opes na lista drop-down
<option>
Define uma opo na lista drop-down
<button>
Define um boto
<datalist>
Define uma lista de dados para um campo
Tags para Formulrios

67
Introduo Web
Informaes adicionais sobre uma pgina so

definidos pela tag <head>
tag <title> define ttulo da pgina
tag <script> define um script cliente
tag <base> define endereo da pgina

tag <link> define relao com objetos externos
tag <style> define estilos (ex: CSS, JSSS JavaScript Style Sheets)
68
Introduo Web
Tag <meta> define termos para auxiliar a procura da pgina
Define palavras-chave para o documento
<meta name="keywords" content="HTML, CSS,

XML, XHTML, JavaScript">
Define uma descrio ao contedo do documento

<meta name="description" content="Tutorial de
HTML">
Define autor
<meta name="author" content="Thiago Leite">
Define tempo de atualizao da pgina

<meta http-equiv="refresh" content="300">
69
Introduo Web
Tag <style>
define estilos CSS (Cascading Style Sheets) para

um documento HTML a partir da verso 4
linguagem semntica para manipulao HTML
pode ocorrer no escopo da tag <head> (interno)

ou em qualquer outro ponto do documento
(inline)
define regras visuais para os elementos exibidos

nos clientes
70
Introduo Web
Tag <script>
define um script de cliente, como JavaScript
quando o script for JavaScript, no necessrio

especificar o tipo atravs do atributo type
pode definir scripts externos por meio do atributo

src
comum para validao de formulrios e mudana

dinmica de contedo
<script src=meuscript.js type=text/

javascript></script>
71
Introduo Web
JavaScript
Expresses JavaScript so comandos dados aos navegadores

fazerem algo
O uso de ponto e vrgula ao final das linhas facultativo
JavaScript case sensitive
As variveis so fracamente tipadas
Cdigos JavaScript podem ser agrupados em blocos de cdigos,

como funes
JavaScript ignora espaos extras em algumas expresses
As linhas podem ser quebradas utilizando o caractere \ quando
em um contexto de aspas
72
Introduo Web
Exemplo de script em JavaScript
<script>
document.write("Ol Mundo!")
</script>
73
Introduo Web
Tag <noscript>
alguns navegadores podem no suportar scripts no

lado do cliente
retorna feedback ao cliente
<script>
document.write("Ol Mundo!")
</script>
<noscript>Desculpe, seu navegador no
suporta JavaScript!</noscript>
74
Introduo Web
Comentrios em JavaScript
// Escreva o titulo
document.getElementById("meuTitulo").innerHTML="Bem
-vindo!";
/* Escreva um
pargrafo */
document.getElementById("meuParagrafo
").innerHTML="Isto um pargrafo.";
75
Introduo Web
JavaScript
pode reagir a eventos
pode escrever diretamente no
documento HTML
pode manipular estilo do documento

76
Introduo Web
Exemplo de reao a eventos em JavaScript

<html>
<body>
<h1>Meu primeiro JavaScript</h1>
<h2 onclick = "this.innerHTML =
'Ops!'">Clique aqui!</h2>
</body>
</html>
77
Introduo Web
Exemplo de escrita diretamente no documento HTML

<html> <body>
<h1>Meu segundo JavaScript</h1>
<p id="demo">JavaScript pode modificar o HTML. </p>
<script> function minhaFuncao() {
x=document.getElementById("demo") // Procura pelo Elemento
x.innerHTML = "Oi! Modifiquei!"; // Modifica o HTML
} </script>
<button type="button" onclick="minhaFuncao()">Clique-me!</
button>
</body> </html>
78
Introduo Web
Exemplo de manipulao de estilos por JavaScript

<html> <body>
<h1>Meu terceiro JavaScript</h1>
<p id="demo"> JavaScript pode modificar os estilos. </p>
<script> function minhaFuncao() {
x=document.getElementById("demo") // Procura pelo Elemento
x.style.color="#ff0000"; // Modifica o estilo
} </script>
<button type="button" onclick="minhaFuncao()">Clique-me!</
button>
</body> </html>
79
Exerccio
Desenvolva um formulrio para contato
onde os dados sejam enviados por e-mail

atravs do cliente de e-mail local
80
Exerccio
Exemplo de resoluo do exerccio

<form action="mailto:seu@email.com">
Nome:<input type="text" name="nome">
Sobrenome:<input type="text" name="sobrenome">
E-mail:<input type="text" name="email">
Comentrio: <textarea name="comentario" rows=5
cols=20>
<input type="submit" name="submeter"
value="Submeter">
</form>
81
Introduo Web
Funo alert() em JavaScript
<button type="button"
onclick="alert('Bem-
vindo!')">Clique!</button>
82
Introduo Web
Quando um documento web carregado o
navegador cria um Document Object
Model (DOM)
JavaScript procura os elementos baseados

no DOM
83
rvore DOM
84
Introduo Web
Navegando na estrutura DOM
document.head.innerHTML =
"<title>Titulo</title>"
document.body.innerHTML =
"<p>Paragrafo</p>"
85
Introduo Web
Navegando na estrutura DOM

<html> <body>
<p id="intro">Ol Mundo!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script> </body> </html>
86
Introduo Web
Os elementos HTML podem ser
manipulados atravs de
ID
Tag
Nome da classe
87
Introduo Web
Exemplo de JavaScript manipulando por Tag
var x=document.getElementsByTagName("td")
alert(x.length);
88
Introduo Web
Exemplo de JavaScript manipulando por
nome
var x=document.getElementsByName("x");
alert(x.length);
89
Introduo Web
Variveis em JavaScript
texto
nmero
no definidas
booleanas
arrays
objetos
90
Introduo Web
var carro = new String;
var num = new Number;
var undef;
var bool = new Boolean;
var array = new Array;
var obj = new Object;
91
Introduo Web
<html> <body> <script>
var x=5, y=6;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
92
Introduo Web
Variveis globais em JavaScript
variveis que podem ser acessadas de
qualquer trecho do cdigo a partir do

momento que essas so declaradas
variavel=Texto;
93
Introduo Web
Arrays numricos em JavaScript

var carros = new Array();
carros[0] = "Saab";
carros[1] = "Volvo";
carros[2] = "BMW";
document.write(carros[0] + <br>)
94
Introduo Web
Arrays associativos em JavaScript

var itens = new Array();
itens['foo'] = 123456;
itens['bar'] = 789012;
itens['baz'] = 345678;
document.write(itens['foo'] + '<br>')
document.write(itens['bar'] + '<br>')
document.write(itens['baz'] + '<br>')
95
Introduo Web
Arrays multidimensionais em JavaScript

var floricultura = new Array();
floricultura['rosas'] = new
Array( "5.00", "7 itens", "vermelha" );
floricultura['orquideas'] = new
Array( "2.00", "1 item", "branca" );
96
Introduo Web
Formas de criao de arrays em JavaScript
normal
var myCars=new Array();

myCars[0]="Saab";
myCars[1]="Volvo";
condensada
var myCars=new Array("Saab","Volvo");
literal
var myCars=["Saab","Volvo"];
97
Operador
Descrio
Comparao
Retorno
x==8
false
x==5
true
==
igual a
===
exatamente igual
(valor e tipo)
x==="5"
false
x===5
true
!=
no igual
x!=8
true
!==
no exatamente
igual (valor e tipo)
x!=="5"
true
x!==5
false
>
maior que
x>8
false
<
menor que
x<8
true
>=
maior ou igual que
x>=8
false
<=
menor ou igual que x<=8
true
Operadores Relacionais em
JavaScript
98
Operador
Descrio
Exemplo
&&
and
(x < 10 && y > 1) is true
||
or
(x==5 || y==5) is false
not
!(x==y) is true
Operadores Lgicos em JavaScript

99
Introduo a PHP
Estruturas de
controle em
JavaScript
if
switch
while
for
for/in
break
continue
100
if
101
Introduo Web
Estrutura if em JavaScript
if (time<20) {
x="Bom dia";
}
102
Introduo Web
Estrutura if..else em JavaScript
if (time<20) {
x="Bom dia";
} else {
x="Boa tarde";
}
103
Introduo Web
Estrutura if..else if..else em JavaScript

if (time<10) {
x="Bom dia";
} else if (time<20) {
x="Boa tarde";
} else {
x="Boa noite";
}
104
switch
105
Introduo Web
Estrutura switch em JavaScript

var day=new Date().getDay();
switch (day) {
case 0: x="Hoje domingo"; break;
case 1: x="Hoje segunda-feira"; break;
case 2: x="Hoje tera-feira"; break;
case 3: x="Hoje quarta-feira"; break;
case 4: x="Hoje quinta-feira"; break;
case 5: x="Hoje sexta-feira"; break;
case 6: x="Hoje sbado"; break;
default: x="Dia desconhecido";
}
106
Introduo Web
Uso do break com if
for (i=0;i<10;i++) {
if (i==3) break; // para no 3
x=x + "O nmero " + i +
"<br>";
}
107
Introduo Web
Uso do continue com if
for (i=0;i<=10;i++) {
if (i==3) continue; // pula o 3
"<br>";
}
108
Introduo Web
Estrutura do for
for (expr1; expr2; expr3) {
// cdigo a ser executado
}
109
Parmetros
Descrio
expr1
Valor inicial da varivel

contadora (opcional)
expr2
Condio de execuo
expr3
Valor a ser incrementado a

cada execuo (opcional)
for
110
Introduo Web
Exemplo de for
carros=["BMW","Volvo","Saab","Ford"];
for (var i=0, len=carros.length; i<len; i++) {
document.write(carros[i] + "<br>");
}
111
Introduo Web
Exemplo de for/in
var txt
var pessoa={nome:"John",sobrenome:"Doe",idade:
25};
for (x in pessoa) {
txt=txt + pessoa[x];
}
112
while
113
Introduo Web
Exemplo de while
while (i<5) {
"<br>";
i++; // iterador de i
}
114
Introduo Web
Exemplo de do/while
do {
x=x+"O nmero "+i+"<br>";
i++;
} while (i<5);
// teste realizado ao final
115
Introduo Web
Criando objetos em JavaScript
pessoa=new Object();
pessoa.nome="John";
pessoa.sobrenome="Doe";
pessoa.idade=50;
pessoa.olhos="azul";
116
Introduo Web
Acessando propriedades dos objetos
nomeDoObjeto.nomeDaPropriedade
117
Introduo Web
Exemplo de acesso a propriedade de um
objeto
var mensagem = Ol mundo!;

var x=mensagem.length;
118
Exerccio
Criar uma tabela dinamicamente com
JavaScript atravs de um valor fornecido

em formulrio
119
Exerccio
<html> <body>
Nmero de Linhas:<input id="numero" type="text">
<button onclick="criarTabela()">Gerar</button>
<p id="mostratabela"></p>
<script> function criarTabela(){
var tabela = "<table border=1>"
for (var i=0;i<document.getElementById("numero").value;i++) {
tabela = tabela + "<tr><td>Celula</td></tr>"
}
tabela = tabela + "</table>"
document.getElementById("mostratabela").innerHTML = tabela
} </script>
</body> </html>
120
Introduo Web
Validao de formulrios com JavaScript

<html> <body>
<form name="meuFormulario" onsubmit="return
validateForm()" method="post">
Nome: <input type="text" name="nome">
<input type="submit" value="Submit">
</form>
(continua)
121
Introduo Web
Validao de formulrios com JavaScript

(continuao)
<script>
function validateForm() {
var x=document.forms["meuFormulario"]["nome"].value;
if (x==null || x=="") {
alert("Nome deve ser fornecido");
return false;
}
}
122
Exerccio
Faa a verificao dos campos do
formulrio do exerccio anterior com

JavaScript
123
Introduo Web
Folhas de Estilo CSS
Cascading Style Sheets

definem como mostrar elementos HTML
adicionados a partir do HTML 4.0
Estilos podem ser aplicados
inline
internamente
externamente
124
Introduo Web
Estilos inline
aplicado a um nico elemento HTML
<p style="color:blue;margin-left:
20px;">Isto um pargrafo.</p>
125
Introduo Web
Exemplo de uso inline da tag <style> com cor de fundo
aplicvel a quase todas as tags, com exceo de <base>, <head>,

<html>, <meta>, <param>, <script>, <style> e <title>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Isto um ttulo</
h2>
<p style="background-color:green;">Isto um
pargrafo.</p>
</body>
</html>
126
Introduo Web
Aplicar estilos internos com a tag <style> realizando alinhamento de texto

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
<h2>Isto um ttulo</h2>
<p>Isto um pargrafo.</p>
</body>
</html>
127
Introduo Web
Exemplo de uso externo de folhas de estilos com a tag <link>
arquivo meuestilo.css precisar conter os estilos
<html> <head> <head>

<link rel="stylesheet" type="text/css"
href="meuestilo.css">
</head> <body>
<h2>Isto um ttulo</h2>
<p>Isto um pargrafo.</p>
</body> </html>
128
Sintaxe CSS
129
Introduo Web
CSS pode aplicar estilos a seletores
especficos como
Tags
IDs
Classes
Estado dos elementos
130
Introduo Web
Exemplo de estilos aplicados a tags

<html> <head> <style>
body {background-color:yellow;}
h1 {font-size:36pt;}
/* Comentrio em CSS */
h2 {color:blue;}
p {margin-left:50px;}
</style> </head> <body>
<h1>Ttulo tamanho 36</h1>
<h2>Ttulo azul</h2>
<p>Pargrafo com margem afastada 50 pixels a esquerda</p>
</body> </html>
131
Introduo Web
Exemplo de estilo aplicado a um seletor ID

#para1 {
text-align:center;
color:red;
}
<p id="para1">Ol Mundo!</p>
<p>Este pargrafo no ser afetado.</p>
</body> </html>
132
Introduo Web
Exemplo de estilo aplicado a um seletor classe

.center {
text-align:center;
}
<h1 class="center">Ttulo centralizado</h1>
<p class="center">Pargrafo centralizado</p>
</body> </html>
133
Introduo Web
Exemplo de estilo aplicado a um seletor HTML e classe

p.center {
text-align:center;
}
<h1 class="center">Ttulo no centralizado</h1>
<p class="center">Pargrafo centralizado</p>
</body> </html>
134
Introduo Web
Exemplo de estilo aplicado a um seletor HTML e seu estado

hr {color:navy;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
<hr>
<a href="http://pudim.com.br" target="_blank">Isto um link</a>
</body> </html>
135
Introduo Web
Exemplo de estilo aplicado a um seletor HTML e seu estado

a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
<p><a class="ex1" href="http://pudim.com.br">Muda cor</a></p>
<p><a class="ex2" href="http://pudim.com.br">Muda tamanho</a></p>
<p><a class="ex3" href="http://pudim.com.br">Muda cor de fundo</a></p>
<p><a class="ex4" href="http://pudim.com.br">Muda fonte</a></p>
<p><a class="ex5" href="http://pudim.com.br">Adiciona sublinhado</a></p>
</body> </html>
136
Reviso
WWW ou Web
HTTP
Modelo cliente/servidor
Acesso web esttico
Acesso web dinmico
Software livre
Tags
Elementos
Atributos
Estrutura documento HTML
Entities
Ttulos e pargrafos
Tabelas
Aplicao de CSS
Formulrios
JavaScript
rvore DOM
Manipular com JavaScript
Tipos de variveis em JavaScript
Operadores relacionais em JavaScript
Operadores lgicos em JavaScript
Estruturas de controle em JavaScript
Objetos em JavaScript
Validao de formulrios em
JavaScript
137
TRE-BA
(CESPE) Para a construo de pginas web,
pode-se combinar a linguagem HTML com
diferentes tecnologias, entre elas a CSS, que
permite melhorar a apresentao do stio.
a) Certo
b) Errado
138
TRE-BA
(CESPE) Para a construo de pginas web,
pode-se combinar a linguagem HTML com
diferentes tecnologias, entre elas a CSS, que
permite melhorar a apresentao do stio.
a) Certo
b) Errado
138
Fiocruz
(FGV) No que tange ao Cascading Style Sheets CSS,
pode-se colocar os estilos em trs lugares: folhas de estilo,
<style> e style. Nesse sentido, analise as afirmativas abaixo.
I. I. Uma folha de estilo um arquivo independente que pode
ser anexado a um documento HTML, usando-se o
elemento <body> ou o enunciado @import de CSS.
II. <style> um elemento de HTML que pode ser embutido
dentro do documento HTML por si s.
III. Style um atributo que pode ser embutido dentro de
qualquer elemento HTML.
139
(continuao)
a) se somente a afirmativa I estiver correta.
b) se somente a afirmativa II estiver correta.
c) se somente a afirmativa III estiver correta.
d) se somente as afirmativas II e III estiverem
corretas.
e) se todas as afirmativas estiverem corretas.
140
(continuao)
a) se somente a afirmativa I estiver correta.
b) se somente a afirmativa II estiver correta.
c) se somente a afirmativa III estiver correta.
d) se somente as afirmativas II e III estiverem
corretas.
e) se todas as afirmativas estiverem corretas.
140
CNJ
(CESPE) Uma maneira de criar um cdigo
HTML dinmico a partir da definio de
objetos JavaScript dentro da tag <head>
a) Certo
b) Errado
141
CNJ
(CESPE) Uma maneira de criar um cdigo
HTML dinmico a partir da definio de
objetos JavaScript dentro da tag <head>
a) Certo
b) Errado
141
TRE-RJ
(CESPE) HTML (hypertext markup language)
uma linguagem de programao,
atualmente na verso 5, muito utilizada para
ambientes desktop.
a) Certo
b) Errado
142
TRE-RJ
(CESPE) HTML (hypertext markup language)
uma linguagem de programao,
atualmente na verso 5, muito utilizada para
ambientes desktop.
a) Certo
b) Errado
142
PC-ES
(CESPE) O HTML (Hypertext Markup
Language) uma linguagem usada para
acessar dados na Web.
a) Certo
b) Errado
143
PC-ES
(CESPE) O HTML (Hypertext Markup
Language) uma linguagem usada para
acessar dados na Web.
a) Certo
b) Errado
143
TRE-BA
(CESPE) O cdigo Javascript existente em
um documento HTML executado no
navegador que est acessando esse
documento.
a) Certo
b) Errado
144
TRE-BA
(CESPE) O cdigo Javascript existente em
um documento HTML executado no
navegador que est acessando esse
documento.
a) Certo
b) Errado
144
TRE-RJ
(FGV) Assinale a alternativa que contm, na linguagem
HTML, a tag que delimita a rea onde sero inseridas
as informaes que sero exibidas no browser:
a) <BODY>
b) </HEAD>
c) <LINK>
d) <META>
e) <HTML>
145
TRE-RJ
(FGV) Assinale a alternativa que contm, na linguagem
HTML, a tag que delimita a rea onde sero inseridas
as informaes que sero exibidas no browser:
a) <BODY>
b) </HEAD>
c) <LINK>
d) <META>
e) <HTML>
145
PROCON-RJ
(CEPERJ) Ao construir um site para a internet, para gerar
uma pgina cujo fundo corresponda figura procom.jpg,
deve ser inserido um parmetro na tag <body>. Um
exemplo correto para essa sintaxe :
a) <body screen=procom.jpg> ... </body>
b) <body bottom=procom.jpg> ... </body>
c) <body bgcolor=procom.jpg> ... </body>
d) <body watermark=procom.jpg> ... </body>
e) <body background=procom.jpg> ... </body>
146
PROCON-RJ
(CEPERJ) Ao construir um site para a internet, para gerar
uma pgina cujo fundo corresponda figura procom.jpg,
deve ser inserido um parmetro na tag <body>. Um
exemplo correto para essa sintaxe :
a) <body screen=procom.jpg> ... </body>
b) <body bottom=procom.jpg> ... </body>
c) <body bgcolor=procom.jpg> ... </body>
d) <body watermark=procom.jpg> ... </body>
e) <body background=procom.jpg> ... </body>
146
TRT
(FCC - adaptado) Considere a pgina HTML:
<html> <head>
<title>Cadastro</title>
// inserir algo aqui
<p> <a href=music.html>Msicas</p>
</body> </html>
A instruo que deve ser utilizada no interior do elemento para retirar o sublinhado do
link ao posicionar o ponteiro do mouse sobre ele :
a)
a:hover{text-decoration:underline}
b)
a:hover{text-decoration:none}
c)
a:hover{text-decoration:normal}
d)
a:visited{text-decoration:none}
e)
a:{text-decoration:none}
147
TRT
(FCC - adaptado) Considere a pgina HTML:
<html> <head>
<title>Cadastro</title>
// inserir algo aqui
<p> <a href=music.html>Msicas</p>
</body> </html>
A instruo que deve ser utilizada no interior do elemento para retirar o sublinhado do
link ao posicionar o ponteiro do mouse sobre ele :
a)
a:hover{text-decoration:underline}
b)
a:hover{text-decoration:none}
c)
a:hover{text-decoration:normal}
d)
a:visited{text-decoration:none}
e)
a:{text-decoration:none}
147
TRT
(FCC) A especificao HTML 4 indica que uma tag <script> deve ser
posicionada dentro de uma tag <head> ou <body> e que pode aparecer
em um nmero qualquer de vezes em cada uma delas. Entretanto, a posio
da tag <script> no cdigo pode influenciar no desempenho da pgina.
Com relao ao tema, analise as asseres a seguir.
Para garantir que a pgina esteja praticamente renderizada antes que a
execuo do script tenha incio, aconselhvel colocar todas as tags
<script> ao final da pgina, imediatamente antes do fechamento da tag
<body>
PORQUE
toda vez que uma tag <script> for encontrada, a pgina ter que parar e
aguardar o download do cdigo (caso seja externo) e sua execuo antes
que seu restante possa ser processado.
148
(continuao)
correto afirmar:
a) As duas asseres so proposies verdadeiras, mas a segunda no
a justificativa correta da primeira.
b) A primeira assero uma proposio verdadeira, e a segunda, uma
proposio falsa.
c) A primeira assero uma proposio falsa, e a segunda, uma
proposio verdadeira.
d) As duas asseres so proposies verdadeiras, e a segunda a
justificativa correta da primeira.
e) Tanto a primeira quanto a segunda assero so proposies falsas.
149
(continuao)
correto afirmar:
a) As duas asseres so proposies verdadeiras, mas a segunda no
a justificativa correta da primeira.
b) A primeira assero uma proposio verdadeira, e a segunda, uma
proposio falsa.
c) A primeira assero uma proposio falsa, e a segunda, uma
proposio verdadeira.
d) As duas asseres so proposies verdadeiras, e a segunda a
justificativa correta da primeira.
e) Tanto a primeira quanto a segunda assero so proposies falsas.
149
Secretaria de Estado do
Desenvolvimento Econmico
Sustentvel - SC
(CONSULPLAN) Qual TAG usamos no HTML
para definir uma opo em uma drop-down list?
a) <option>
b) <optgroup>
c) <options>
d) <val>
e) <value>
150
Sustentvel - SC
para definir uma opo em uma drop-down list?
a) <option>
b) <optgroup>
c) <options>
d) <val>
e) <value>
150
Sustentvel - SC
para definir uma lista ordenada?
a) <lo>
b) <olist>
c) <ordl>
d) <ol>
e) <rl>
151
Sustentvel - SC
para definir uma lista ordenada?
a) <lo>
b) <olist>
c) <ordl>
d) <ol>
e) <rl>
151
TCE-ES
(CESPE) necessrio que as variveis
tenham a definio de um tipo antes de
serem utilizadas em um programa JavaScript.
a) Certo
b) Errado
152
TCE-ES
(CESPE) necessrio que as variveis
tenham a definio de um tipo antes de
serem utilizadas em um programa JavaScript.
a) Certo
b) Errado
152
TSE
(CONSULPLAN) No que diz respeito aos
operadores em JavaScript, sejam as variveis do
mesmo tipo a=3 e b=5. As operaes
a!=b e a!=3 && b==5
retornaro, respectivamente, os seguintes valores
a) verdadeiro e falso.
b) falso e verdadeiro.
153
TSE
(CONSULPLAN) No que diz respeito aos
operadores em JavaScript, sejam as variveis do
mesmo tipo a=3 e b=5. As operaes
a!=b e a!=3 && b==5
retornaro, respectivamente, os seguintes valores
a) verdadeiro e falso.
b) falso e verdadeiro.
153
TSE
(CONSULPLAN) Observe o cdigo em
JavaScript.
154
(continuao)
Na execuo no browser Internet Explorer
8 BR, este cdigo ir gerar a seguinte sada
a) 1 2 3 5 8 13
b) 0 1 1 2 3 5
155
(continuao)
Na execuo no browser Internet Explorer
8 BR, este cdigo ir gerar a seguinte sada
a) 1 2 3 5 8 13
b) 0 1 1 2 3 5
155

1 - Introdução A Web

Caricato da

Informazioni sul documento

Titolo originale

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

1 - Introdução A Web

Caricato da

Copyright:

Formati disponibili

Linguagem Tcnica de

DAVIS, Michele E.;

Estilo das Provas

Estilo das Provas

Curso Preparatrio para

utilizado para criar as pginas Web,

um servidor pode gerir mltiplas

todas as respostas so enviadas com

Servios de traduo de nomes (ex: DNS

Servidor Web (ex: Microsoft IIS, Apache)

Acesso Web Esttico

Banco de Dados (ex: MySQL, Microsoft

Linguagem de script cliente (ex:

Acesso Web Dinmico

muito alm de simplesmente de troca de

serve arquivos HTML, imagens, Flash, udio,

servir arquivos dinmicos criados por

suporte modularizado a outras atividades

banco para armazenamento de dados

banco de dados relacional

meio de armazenamento mais eficiente que

dinamicamente realizar operaes no

muito utilizado para validao de campos

O que Software Livre?

WAMP, MAMP e LAMP

Mac, Apache, MySQL

Linux, Apache, MySQL

so formadas com os smbolos < e > (

normalmente vem em pares

o primeiro par abre a tag e o segundo fecha

<p class="intro">Paragrafo com

Estrutura bsica de uma pgina

Exemplo de cdigo HTML

Cdigo HTML Interpretado

Tabela de Codificao HTML

Exemplo de cdigo HTML utilizando entities

HTML interpretado com entities

indica a verso e tipo de HTML utilizado

Exemplo de declarao para HTML5

Exemplo de declarao para HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

Lista completa de declaraes em http://

Faa uma pgina web contendo seu

cada linha so dividas em clulas com

o cabealho definido pelas tags <th>

Exemplo Tabela HTML

listas no numeradas definidas pelas

listas de definies utilizam tags <dl>

Lista de definies em HTML

<form> e so utilizados para passar dados

tags <input> so elementos de entrada

ex: campo, checkbox, password, boto

Tipos de Campos para Formulrios

Exemplo de formulrio com campos radio

atributo name define o grupo

Exemplo de formulrio com campos checkbox

atributo name define o grupo

Exemplo de formulrio com boto de submisso

atributo action define destino para os dados do

atributo method define o mtodo de envio dos

<form name="input" action="server.php"

Define um campo de entrada

Define um campo com vrias linhas