Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
HTML_CSS_Javascript
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
HTML, CSS e Javascript
Vantagens
• Portabilidade da solução no lado do
cliente
• Facilidade de deployment
• Facilidade de manutenção, restauração e
atualização da aplicação
Desvantagens
• Número expressivo e crescente de dispositivos
diferentes com acesso a web (computação
ubíqua)
• Compatibilidade entre browsers
• Novos desafios para a Engenharia de Software:
– Adequação ao “internet time”
– Metodologias voltadas para o desenvolvimento web
– Computação Concorrente
Execução no Cliente
(Browser)
HTML
• Hyper Text Markup Language
• Especificação definida pelo consórcio W3C:
http://www.w3.org/
• Um arquivo html contém marcadores (tags)
• Estes marcadores indicam para o navegador
(browser) como a página deve ser apresentada
• Marcadores usualmente vem em pares:
<tag>...</tag>
• Também podem aparecer de forma abreviada:
<tag atributo=“valor” ... />
http://www.w3.org/
HTML
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página – FTEC - Bento.
</body>
</html>
HTML
Tags Básicas
Tag Descrição
<html> Define um documento HTML
<body>
Define o corpo de um
documento
<h1> to <h6> Define cabeçalhos 1 a 6
<p> Define um parágrafo
<br> Insere uma quebra de linha
<hr> Define uma linha horizontal
<!-- --> Define um comentário
http://www.w3schools.com/tags/tag_html.asp
http://www.w3schools.com/tags/tag_body.asp
http://www.w3schools.com/tags/tag_hn.asp
http://www.w3schools.com/tags/tag_p.asp
http://www.w3schools.com/tags/tag_br.asp
http://www.w3schools.com/tags/tag_hr.asp
http://www.w3schools.com/tags/tag_comment.asp
HTML
Tags de Formatação
Tag Descrição
<b> Formata um texto em negrito
<big> Formata um texto com fonte maior
<em> Formata um texto com ênfase
<i> Formata um texto em itálico
<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
http://www.w3schools.com/tags/tag_font_style.asp
http://www.w3schools.com/tags/tag_font_style.asp
http://www.w3schools.com/tags/tag_phrase_elements.asp
http://www.w3schools.com/tags/tag_font_style.asp
http://www.w3schools.com/tags/tag_font_style.asp
http://www.w3schools.com/tags/tag_phrase_elements.asp
http://www.w3schools.com/tags/tag_sup.asp
http://www.w3schools.com/tags/tag_sup.asp
http://www.w3schools.com/tags/tag_ins.asp
http://www.w3schools.com/tags/tag_del.asp
HTML
Entidades
• Utilizadas para apresentação de caracteres
especiais em html. Ex.: “<“
Saída Descrição Nome da Entidade Número
Espaço sem quebra  
< Menor que < <
> Maior que > >
& E comercial & &
" Aspas " "
' Apóstrofo ' (does not work in IE) '
HTML
Links e Imagens
• <a href=“www.ibm.com.br”>Página da IBM!</a>
– Página da IBM
• <a name=“Endereco”>Como Chegar</a>
– Trecho da página que informa detalhes sobre
localização
• <a href=“www.ibm.com.br#Endereco”>
Localização</a>
– Localização
• <img src=“logo.gif” alt=“Logo da IBM”/>
http://www.ibm.com.br/
http://www.ibm.com/#Endereco
HTML
Tabelas
<table border="1">
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
<tr>
<td>linha 1, valor 1</td>
<td>linha 1, valor 2</td>
</tr>
<tr>
<td>linha 2, valor 1</td>
<td>linha 2, valor 2</td>
</tr>
</table>
HTML
Background e Fontes
• Formas de se definir um background preto para
o corpo da página
– <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.dominio.com.br/logo_emp.gif
">
• Configurando uma fonte
– <font size="2" face="Verdana">Texto com fonte
específica.</font>
HTML
Formulários
• HTML possibilita a criação de formulários online
utilizando tags
• A tag <form> é a mais comum e permite a
criação de um formulário de entrada de dados
<body>
<h1>Construindo Formulários</h1>
<form>
Nome: <input type="text" name=“primnome"><br />
Sobrenome: <input type="text" name=“sobrenome"><br/>
Senha: <input type="password" name="senha">
</form>
</body>
HTML
Formulários
• Tipos que podem ser utilizados com a tag <input>:
– button: Insere um botão
– checkbox: Insere um checkbox; para vários itens, basta
inserirmos vários “inputs” deste tipo
– file: Insere botão seleção de arquivo através de uma caixa de
diálogo
– hidden: Campo pertencente ao formulário, mas que não será
exibido na página
– image: Insere uma imagem como um botão submit
– password: Insere um campo password (caracteres digitados não
aparecem)
– radio: Insere um radiobox (análogo ao checkbox)
– reset: Restaura os valores iniciais do formulário
– submit: Encaminha os dados inseridos para algum arquivo
– text: Insere um campo de edição de texto
HTML
Formulários
• Quando algum elemento do tipo “submit” é
inserido num formulário e acionado, seus
dados são 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 programação de servidores:
jsp, php, asp, sevlets, ...
HTML
Formulários
<form action=“SalvaForm.jsp" >
Nome: <input type="text" name=“primnome"><br />
Sobrenome: <input type="text" name=“sobrenome"><br/>
Senha: <input type="password" name="senha"> <br/>
<input type="submit" value="Enviar">
</form>
• URL após clicar no botão:
...//FTEC_2019/“SalvaForm.jsp"?%93primnome%22=Ca
rlos+Tadeu&%93sobrenome%22=Morais&senha=1234
HTML
Outras tags de Formulários
Tag Descrição
<form> Define um formulário para entrada do usuário
<input> Define um campo de entrada
<textarea> Define um campo texto com múltiplas linhas
<label> Define um label para algum controle
<fieldset> Desenha uma caixa em torno de um conjunto de
elementos
<legend> Define um título para um <fieldset>
<select> Cria uma lista drop-down
<optgroup> Criar uma hierarquia nas opções de uma lista drop-down
<option> Uma opção na lista drop-down
<button> Insere um botão. Difere de <input> por poder conter
algum conteúdo, como uma imagem
CSS
• Cascading Style Sheets
• Estilos definem como elementos html devem ser
apresentados
• Permite a separação entre definição de
conteúdo e formatação em HTML
• Style sheets externos são definidos através de
arquivos CSS
• Atualmente é o padrão para inserção de estilo
na construção de páginas html
• http://www.csszengarden.com/
http://www.csszengarden.com/
CSS
• Formato geral:
seletor { propriedade: valor }
• Uma definição de estilo em CSS será composta
por uma sequência de definições 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 parágrafo será alinhado à direita</p>
<p class=“centro”>Este parágrafo 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 página.
</body>
</html>
/* Conteúdo do arquivo mystyle.css */
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
CSS
Como definir (2/3)
– Internamente (dentro da própria página HTML
a ser exibida)
<html>
<head>
<style type="text/css“>
hr {color: sienna}
p {margin-left:20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
<body>
Esta é minha primeira página.
</body>
</html>
CSS
Como definir (3/3)
– Definindo de forma inline
<html>
<head</head>
<body style=“color: sienna;
text-align: center”>
Esta é minha primeira página.
</body>
</html>
– Caso existam várias definições para um
mesmo elemento, a prioridade é: inline,
interna e externa
Aplicações
• Com CSS podemos formatar:
– Background
– Textos
– Fontes
– Margens
– Bordas
– Listas
– Tabelas
• http://www.w3schools.com/css/css_examples.asp
"Style sheets" ou "Folhas
de Estilo"
• CSS é um padrão recomendado pelo
W3C para todos os browsers (World
Wide Web Consortium é a entidade que
cuida do desenvolvimento e
padronização das tecnologias ligadas à
Web).
• "Cascading Style sheets" ou "Folhas de
Estilo Encadeadas" é uma tecnologia
(linguagem) criada para definir estilos
(cores, tipologia, posicionamento, etc ...)
Recomendações para o
desenvolvedor
• Com CSS economiza-se tempo de criação
e manutenção (isola os códigos de
formatação aplicado a várias páginas
HTML em um único arquivo ".css");
• Reduz código de descritores HTML da
página (tags);
• os navegadores (browsers) carregam
mais rápido;
Recomendações para o
desenvolvedor
• maior eficiência no gerenciamento do
layout;
• CSS é simples pois descreve apenas
estilos;
• Com recursos mais avançados de CSS
pode-se conseguir um design
sofisticado sem utilização de imagens e
tabelas.
Ordem de prioridade
• default
• do Browser
• CSS externo (arquivo ".css")
• CSS interno (dentro da tag <head>)
• Estilos inline (dentro do elemento HTML)
Herança
• Herança significa que você pode
especificar estilos variados (classes) para
cada elemento na página, e cada classe
herdará algumas características de estilo
de seu elemento básico ou de seu
elemento pai na estrutura do documento
HTML.
Exemplo 1
• Para produzir um parágrafo básico,
você deve usar simplesmente uma tag
<p>, e para produzir o parágrafo
pequeno e centralizado, você deve
acrescentar o atributo class=small (<p
class=small>).
• Os parágrafos na página que utilizarem
<p class=small> herdarão os estilos
font-family, fontweight e color definidos
para a tag <p>.
Exemplo 1
P {
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 12pt;
color: #00cc00;
}
P.small
{
font-size: 8pt;
text-align: center;
}
Exemplo 2
• a tag <b> herda a característica "font-size"
da tag <p> pois é filha dentro da estrutura
do HTML.
Exemplo 2
<p style="font-size:10pt;color:red;">Este
parágrafo foi definido com tamanho de
fonte de 10pts e cor de texto vermelho.
No meio deste texto uma palavra foi
colocada em <b style="font-
size:120%;color:blue;">negrito</b>
mas foi alterada sua cor para azul e o
tamanho de fonte aumentado em
20%.</p>.
Sintaxe CSS
• A sintaxe CSS compoe-se de três partes: um
seletor, uma propriedade e um valor.
• selector {property: value}
• O seletor é o elemento/tag que definimos
(maioria das vezes trata-se de uma tag HTML),
a propriedade é o atributo que desejamos
inserir para este elemento, e cada propriedade
tem um valor atribuído. A propriedade e o valor
são separados por dois pontos ":" e delimitados
por chaves "{}"
Sintaxe CSS
• Ex: body {color: #000000}
• Se o valor tem múltiplas palavras ele deve
ser colocado entre aspas "" : If the value is
multiple words, put quotes around the
value:
• Ex: p {font-family: "Comic Sans MS"}
Sintaxe CSS
• Algumas aplicações de CSS exigem
um conjunto maior de declarações,
neste caso é aconselhável definir os
seletores um em cada linha. Ex:
• p
{
text-align: center;
color: black;
font-family: arial
}
Atributo class
• Com o atributo "class" podemos definir
diferentes estilos para um mesmo
elemento. Por exemplo, se quiséssemos
ter 2 tipos de parágrafos "<p>" em nosso
documento HTML: um alinhado à direita e
outro centralizado. Fazemos assim: styles:
Atributo class
• Ex:
• p.right {text-align: right}
p.center {text-align: center}
• aplicando os estilos definidos na página HTML:
• <p class="right">Este parágrafo está
alinhado à direita</p>
• <p class="center">Este outro parágrafo está
centralizado</p>
Atributo ID
• Com o atributo ID podemos definir um estilo
único para ser utilizado em muitos elementos.
• Ex:
• #right {text-align: right}
• aplicando o estilo na página HTML :
• <p id="right">Este parágrafo está alinhado à
direita</p>
<h3 id="right">Este header também ficará
alinhado à direita</h3>
• Obs: o atributo ID deve ter valor único no
documento.
Comentário no CSS
• Podemos inserir comentários entre as
definições de estilos para melhor documentar a
finalidade de cada uma delas. Este
procedimento é extremamente saudável visto
que provavelmente não lembraremos dos
significados e aplicação dos estilos em um
futuro próximo.
• O comentário irá ser ignorado pelo Browser. Ele
começa com "/*", e termina com "*/" :
Comentário no CSS
/* este é um comentário */
p
{
text-align: left;
/* outro comentário */
color: blue;
font-family: verdana,arial,sans-serif
}
Aplicando CSS a página
• CSS podem ser utilizados de três
maneiras diferentes: local (modificando
uma tag específica de uma página), geral
(modificando determinados atributos para
a toda a página) ou global (quando
criamos um modelo que será aplicado a
várias páginas simultaneamente).
Aplicando CSS a página
- Local
• Style Sheet pode modificar os atributos de
uma única tag específica, em um
determinado ponto de uma página.
• Os comandos em CSS aplicados
localmente seguem a seguinte sintaxe:
• <tag STYLE="propriedade:valor;
propriedade, valor;"...>
Aplicando CSS a página
- Local
• Pelo código HTML normal, o tamanho
máximo de uma fonte que podemos obter
é estipulado pela tag <FONT>. Utilizando
o CSS podemos aumentar o tamanho com
que as letras seriam tradicionalmente
mostradas.
• <FONT FACE="verdana,arial"
SIZE="7">TEXTO</FONT>
Aplicando CSS a página
• Introduzindo comandos de CSS na tag podemos
modificar seus atributos para mostrar a frase
com outra cor e em tamanho maior.
• <FONT style="font-size:50pt; color:red; line-
height:30pt; font-
family:verdana,arial;">TEXTO</FONT>,
• Com o CSS não há limites para o tamanho da
fonte. Ele pode ser definido em pontos, pixels e
outras unidades.
Aplicando CSS a página-
Geral
• O comando STYLE no cabeçalho do
documento, entre a tag HTML e a tag
BODY, cria um modelo padrão de CSS
que será aplicado a toda uma página e
todo o conteúdo da página obedecerá as
propriedades/valores definidas neste
intervalo. Por exemplo:
Aplicando CSS a página-
Geral
• <HTML>
<TITLE> ... </TITLE>
<HEAD>
<STYLE type="text/css">
<!--
p {font: 12pt "Corrier, Times"; color: black}
h1 {font: 15px "arial,verdana"; color: #00cc00}
-- >
</STYLE>
</HEAD>
<BODY> ..... </BODY> </HTML>
Aplicando CSS a página-
Geral
• Obs: O que está dentro da tag STYLE
aparece em comentário <!-- -->. Isso serve
para evitar problemas com browsers que
não suportam CSS. Estando entre
comentários, os atributos funcionarão
normalmente em browsers com
capacidade para CSS e serão
desprezados por browsers mais antigos.
Aplicando CSS a página-
Global
• Podemos criar um único modelo de Style
Sheets para ser aplicado a múltiplas
páginas. Para tanto, devemos construir
um modelo separado de Style Sheets e
salvá-lo em um arquivo de terminação
".css". Esse modelo pode ser aplicado a
qualquer página, apenas referindo-se ao
arquivo ".css" no seu cabeçalho, como a
seguir:
Aplicando CSS a página-
Global
• <HEAD>
< link rel=stylesheet href="exemplo1.css"
type="text/css">
</HEAD>
Aplicando CSS a página-
Global
• Outra maneira de aplicar o modelo CSS é
importá-lo. A diferença do exemplo acima
e importá-lo é que a segunda maneira
permite acrescentar estilos na própriapágina que está editando, sem precisar
alterar o modelo global (o arquivo .css).
Aplicando CSS a página-
Global
• <HTML>
<STYLE TYPE="text/css">
<!--
@import url (exemplo1.css);
B { font-family: arial; color:black; font-size:10px; }
</STYLE>
<HEAD>
<TITLE>Exemplo 1</TITLE>
</HEAD>
Aplicando CSS a página-
Global
• <BODY>
<P>
O texto segue o modelo de CSS
exemplo1.css, mas os <B>negritos serão
alterados</B>.
</P>
</BODY>
</HTML>
Aplicando CSS a página
• OBS: No caso de uma mesma página ter
mais de um estilo aplicado, para saber
qual predominará deve-se adotar as
regras de "cascata" citadas anteriormente.
Regras aplicadas em
fontes
• font-family - utilizado para indicar qual a fonte
que uma tag ou documento HTML irá mostrar.
De forma geral:
• P { font-family: Verdana, Arial, Helvetica }
• Neste exemplo, tudo o que estiver entre as tag
<P> e </P> no documento HTML será
visualizado na fonte Verdana. A razão de definir
mais de uma fonte deve-se ao fato de que nem
todos os computadores possuem as mesmas
fontes instaladas. No caso, se o computador
não possuir a Verdana instalada,
automaticamente passará para a Arial.
Regras aplicadas em
fontes
• font-size - utilizado para definir o tamanho
das fontes. Existem 3 formas para
definição de tamanho:
– em pontos (pt), pixels (px), cm (cm) e outras
unidades de medida;
– através de palavras-chave;
– em percentagem (%)
Regras aplicadas em
fontes
• Ponto - pode ser usada para definir o
tamanho de um elemento em uma página
HTML. Tem sido a medida mais utilizada
na programação em CSS pois funcionam
bem em todos os browsers e plataformas
operacionais.
• Ex: P { font-size: 20pt } para pontos
Regras aplicadas em
fontes
• Pixel é uma medida familiar aos web
designers. Pode dar uma boa noção do
tamanho que a fonte aparecerá na tela,
mas infelizmente a utilização dessa
medida tem causado problemas para na
impressão das páginas em papel.
• B { font-size: 20px } para pixels, por
exemplo.
Regras aplicadas em
fontes
• As unidades de medida que podem ser
utilizadas são:
– pt: pontos
– px: pixels
– in: inches
– cm: centímetros
– mm: milímetros, e outras.
Regras aplicadas em
fontes
• Palavras-chave - é outra maneira de
determinar tamanhos de fonte em CSS :
– xx-small
– x-small
– small
– medium
– large
– x-large
– xx-large
Regras aplicadas em
fontes
• Percentagem - o tamanho das fontes também
pode ser determinado segundo regras de
percentagem:
• P { font-size: 12pt }
B { font-size: 150% }
• No exemplo acima, todo o texto que estiver
compreendido entre as tags <P> e </P> no
corpo da página será mostrados em 12 pontos,
assim como todas as palavras em negrito (<b>)
entre as duas tags serão apresentadas em um
tamanho 50% maior.
Regras aplicadas em
fontes
• font-weight é o comando CSS que
controla a propriedade bold (negrito) de
uma tag:
• H1 { font-weight: bold }
• No exemplo acima, todas as palavras da
página que estiverem compreendidas
entre as tags <H1> e </H1> serão
mostradas em negrito.
Regras aplicadas em
fontes
• font-style é o comando CSS que controla
a propriedade italic de uma tag.
• H1 { font-style: italic }
• No exemplo acima o browser irá procurar
uma versão itálico da fonte para
apresentar o texto compreendido entre as
tags <H1> e</H1>.
Regras aplicadas em
fontes
• text-transform serve para controlar os
atributos maiúsculas e minúsculas de um
texto:
• P { text-transform: uppercase }
• No exemplo, tudo o que estiver
compreendido entre as tags <P> e </P>
será mostrado em maiúsculas COMO
NESTE EXEMPLO.
Regras aplicadas em
fontes
• text-decoration - serve para controlar o
sublinhado das palavras.
• B { text-decoration: underline }
• No exemplo acima todas as palavras em
negrito da página aparecerão também
sublinhadas.
Regras aplicadas em
fontes
• O mais interessante do comando text-
decoration é que utilizando o atributo none
podemos eliminar o sublinhado de um link.
Como abaixo:
• <style type="text/css">
<!--
A { text-decoration: none }
-->
</style>
Regras aplicadas em parágrafos
• line-height - é o comando que controla o
espaçamento entre as linhas de um texto. O
espaço é definido pela distância entre a base
das linhas de um texto.
• P { line-height: 14pt }
• Obs: as unidades de medida são as mesmas
explicadas para o comando font-size: pt, px, in,
cm, mm, pc, ex, em.
Regras aplicadas em
parágrafos
• text-align é a comando utilizado para o
alinhamento de parágrafos em CSS. Ela
só funciona em elementos que definam
parágrafos, como <P>, <H1>, <H2>,
<BLOCKQUOTE> e <UL>. Os valores que
podem ser aplicados são: left, right, center
e justify (justificado).
• P { text-align:justify }
Regras aplicadas em
parágrafos
• text-indent é o comando que permite
configurar o valor da indentação de um
parágrafo. Também só funciona em
elementos que definam parágrafos, como
os descritos para o text-align.
• P { text-indent:40pt }
Teste
• 1. Qual o significado de CSS?
a. Creative Style Sheets
b. Colorful Style Sheets
c. Cascading Style Sheets
d. Computer Style Sheets
Teste
• 1. Qual o significado de CSS?
c. Cascading Style Sheets
Teste
• 2. Qual é a opção correta para
referenciarmos um CSS
externo?
a. <link rel="stylesheet"
type="text/css"
href="mystyle.css">
b. <style src="mystyle.css">
c.
<stylesheet>mystyle.css</stylesh
eet>
Teste
• 2. Qual é a opção correta para
referenciarmos um CSS externo?
a. <link rel="stylesheet"
type="text/css" href="mystyle.css">
Teste
• 3. Em que parte do documento
HTML é correto referenciar um
arquivo CSS externo?
a. At the top of the document
b. In the <head> section
c. In the <body> section
d. At the end of the document
Teste
• 3. Em que parte do documento
HTML é correto referenciar um
arquivo CSS externo?
b. In the <head> section
Teste
• 4. Qual tag HTML é utilizada para
definir um CSS interno?
a. <css>
b. <style>
c. <script>
Teste
• 4. Qual tag HTML é utilizada para
definir um CSS interno?
b. <style>
Teste
• 5. Qual atributo HTML é utilizado
para definir estilos inline?
a. Styles
b. Style
c. Font
d. class
Teste
• 5. Qual atributo HTML é utilizado
para definir estilos inline?
b. Style
Teste
• 6. Qual é a sintaxe correta CSS?
a. {body;color:black}
b. body {color: black}
c. body:color=black
d. {body:color=black(body}
Teste
• 6. Qual é a sintaxe correta CSS?
b. body {color: black}
Teste
• 7. Como inserir comentários no
arquivo de CSS?
a. /* this is a comment */
b. ' this is a comment'
c. // this is a comment
d. // this is a comment //
Teste
• 7. Como inserir comentários no
arquivo de CSS?
a. /* this is a comment */
Tableless
• Padrão que vem sendo adotado na web para
uso massivo de html+css
• Objetiva, principalmente, melhor acessibilidade
de páginas web
• Propõe a não utilização tabelas html para a
construção do layout da página (origem do
nome)
• Naturalmente, este uso não deveria ser evitado
se o que se deseja construir é uma tabela de
fato
JavaScript
• É a linguagem de script utilizada por milhões de
páginas web
• Foi projetada para aumentar interatividade das
páginas web:
– Validação de formulários, interação com o usuário
(p.ex., tratamento de cliques de botões), detecção de
navegadores, etc
• É reconhecida pela maioria dos navegadores
• Seu processamento é feito na máquina cliente
(browser)
• Não há relação com Java
JavaScript - Exemplo
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<script type="text/javascript">
document.write(“Esta é minha primeira página.");
</script>
</body>
</html>
JavaScript – Onde ocorrem
• Uma tag <script/> pode ser definida numa
seção head, numa seção body e também
pode ser definida externamente:
– Na seção head, os scripts são executados
quando são chamados ou quando algum
evento ocorre;
– Na seção body, os scripts são executadosna
carga da página web
– Para definição externa, um arquivo “.js”
precisa ser fornecido com as funções
necessárias
JavaScript – Exemplo
<html>
<head>
<title>Título da Página</title>
<script src="hello.js"></script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write(“<h1>Esta é minha primeira
página.</h1>");
</script>
</body>
</html>
JavaScript - Sintaxe
• Possui construções existentes na maioria
das linguagens de programação (sintaxe
similar a C):
– Declaração de variáveis (var x;)
– Comandos condicionais, repetições, definição
de funções de usuário
– Operadores de atribuição, comparação, ...
JavaScript
Janelas Popup
• Funções para criação de janelas popup:
– Alerta ( alert(“Texto a ser exibido); )
– Confirmação ( confirm(“Texto a ser exibido
em janela OK/Cancel”); )
– Entrada de dado ( prompt(“Label do campo
de entrada”, “valor padrão”); )
• Janelas que possuem o botão Cancel,
quando acionado retorna valor null
<body>
<script type="text/javascript">
var nome = prompt("Seu nome");
if (nome != null && nome != "")
document.write("Oi " + nome);
else
document.write("Oi anônimo!");
</script>
</body>
JavaScript – Eventos
• Eventos são ações que podem ser
detectadas por um script
• Exemplos de eventos:
– Clique do mouse, abertura de uma página
web ou imagem, envio de um formulário html,
uma tecla pressionada, etc
• O tratamento destes eventos pode ser a
chamada de funções do script
JavaScript – Eventos
<html>
<head><script src="event.js"></script>
</head>
<body>
<img border="0"
src="quadrado1.gif"
name="imagem"
onmouseover="mouseOver()"
onmouseout="mouseOut()" />
</body>
</html>
/* Conteúdo do arquivo event.js */
function mouseOver()
{
document.imagem.src ="quadrado2.gif";
}
function mouseOut()
{
document.imagem.src ="quadrado1.gif";
}
• Lista de eventos:
http://www.w3schools.com/jsref/jsref_events.asp
JavaScript – Objetos
• JavaScript é uma linguagem OO
• Com isto, algumas classes utilitárias padrões
estão disponíveis, as quais possuem métodos e
propriedades:
– String: manipulação de strings no script
/* Exemplo de função 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: manipulação de datas no script
• http://www.w3schools.com/jsref/jsref_obj_date.asp
/* Exemplo de função de script que manipula
datas */
function bug(data)
{
var x = new Date();
x.setFullYear(2000,0,0);
if (data > x)
alert(“Bug do milênio!”);
}
JavaScript – Objetos
• Outras classes disponíveis na linguagem
JavaScript:
– Array: armazenamento de conjuntos de
valores
• http://www.w3schools.com/js/js_obj_array.asp
– Boolean: manipulação de valores booleanos
• http://www.w3schools.com/js/js_obj_boolean.asp
– Math: manipulação de valores com operações
matemáticas
• http://www.w3schools.com/jsref/jsref_obj_math.asp
http://www.w3schools.com/js/js_obj_array.asp
http://www.w3schools.com/js/js_obj_boolean.asp
http://www.w3schools.com/jsref/jsref_obj_math.asp
JavaScript – Objetos
Exemplo
/* Exemplo de função 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]="Terça"; dias[3]="Quarta"; dias[4]="Quinta";
dias[5]="Sexta"; dias[6]="Sábado";
document.write("Hoje é" + dias[d.getDay()]);
document.write("Dia qualquer: " +
dias[Math.round(Math.random()*6)]);
document.write(navigator.appCodeName);
}
JavaScript – Objetos
• Além destas, todos os objetos HTML DOM
podem ser acessados através de scripts
– Window: objeto no topo da hierarquia do JavaScript;
representa a janela do browser
– Navigator: contém informação sobre o browser do
cliente
– Screen: contém informação sobre a tela
– History: contém as URLs visitadas
– Location: contém informação sobre a URL corrente
– http://www.w3schools.com/js/js_obj_htmldom.asp
http://www.w3schools.com/js/js_obj_htmldom.asp
JavaScript – Objetos
Exemplo com Window
<html>
<head>
<script type="text/javascript">
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 padrão 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 nós numa árvore
DOM
HTML DOM - API
• É definida por um conjunto de propriedades e
métodos
• 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 nós filhos de x
– x.attributes: os nós atributos de x
HTML DOM - API
• Alguns métodos DOM
– x.getElementById(id): obtém o elemento com
o id fornecido
– x.getElementsByTagName(name): obtém
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>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write(“<p>Texto do parágrafo intro: ” + txt +
"</p>");
</script>
</body>
</html>
HTML DOM – API
Exemplo
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeV
alue;
document.write(“<p>Texto do parágrafo intro: ” + txt +
"</p>");
</script>
</body>
</html>
JavaScript – Mais Usos
• Criação de cookies
• Validação de entrada
• Disparo de funções com retardo (tempo)
• Criação de objetos próprios
HTML – Como funciona o
envio desta mensagem?
<body>
<form action=“processaForm.jsp" >
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
<input type="submit" value="Enviar">
</form>
</body>
• URL após clicar no botão:
.../sirius/processaForm.jsp?firstname=Carlos&lastname=
Bazilio&senha=abcdefg
Tipos de requisições HTTP
• GET
– Parâmetros são enviados na url da solicitação
– http://localhost:8080/sirius/processaForm.jsp?firstnam
e=Carlos&lastname=Bazilio&senha=abcdefg
– Envio de parâmetros firstname e lastname e senha
para um recurso no servidor (neste caso, uma página
jsp – processaForm.jsp)
– Estas urls podem ser armazenadas como favoritos
– Tipo padrão (default)
– Não recomendado para o envio de informações
sigilosas
http://localhost:8080/sirius/processaForm.jsp?firstname=Carlos&lastname=Bazilio&senha=abcdefg
AJAX
• Termo surgiu em 2005
• AJAX (Asynchronous JavaScript and XML) não é uma
nova tecnologia, mas sim uma combinação de
tecnologias padrão
• Tem como objetivo principal enriquecer a interação de
aplicações 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 página web sem recarregá-la
– Enviar requisição de dados a um servidor após a
página ter sido carregada
– Receber resposta de requisições após a página ter
sido carregada
– Enviar dados para um servidor em background
• É suportado pela maioria dos navegadores
modernos
Navegação sem AJAX
Navegação com AJAX
AJAX
XMLHttp
• Tudo começou quando o IE (versão 5) ofereceu
suporte ao XML através de uma biblioteca
ActiveX (MSXML)
• Isto permitia ao desenvolver fazer solicitaçõesHTTP via JavaScript; a intenção era que estas
requisições fossem respondidas como XML
• A popularidade deste recurso “forçou” os outros
navegadores a oferecerem recurso similar
AJAX - Exemplo
• Em seguida veremos um exemplo de uso
do Ajax
• Neste exemplo são criadas 3 funções
Javascript:
– getXMLObject(): obtém o objeto
XMLHttpRequest
– ajaxFuction(): realiza a chamada ao servidor
e configura a função de callback para
tratamento da resposta
– handleServerRespose(): função de callback
AJAX - Exemplo
<html>
<head> <title>JSP and Servlet using AJAX</title>
<script type="text/javascript">
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-form-
urlencoded');
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 função de callback
• O método send envia a requisição
• A propriedade readyState defina o estado
da requisição
• A propriedade status informa o código
HTTP de status da resposta
• A propriedade responseText contém 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">
Usuário: <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>
Referências
• http://www.w3schools.com/
– Site com tutoriais on-line rápidos 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 consórcio W3C
http://www.w3schools.com/
http://www.csszengarden.com/
http://del.icio.us/carlosbazilio/{css+html}
http://www.w3.org/
Continue navegando
Materiais relacionados
6 pág.
Compartilhar