Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010

CENTRO DE CIÊNCIAS EXATAS E TECNOLÓGICAS
TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

EDUARDO BERTOLUCCI

TRABALHO DE HTML, CSS E JAVASCRIPT

Londrina
2010

EDUARDO BERTOLUCCI

TRABALHO DE HTML, CSS E JAVASCRIPT

Trabalho de HTML, CSS E JAVASCRIPT apresentado à
Universidade Norte do Paraná - UNOPAR, como
requisito parcial para a obtenção de média bimestral na
disciplina de TÓPICOS ESPECIAIS EM
DESENVOLVIMENTO DE SISTEMAS.

Professor: Marcio Roberto Chiaveli

Londrina
2010

SUMÁRIO

1 INTRODUÇÃO .................................................................................................... 3
2 HTML .................................................................................................................. 4
3 CSS .................................................................................................................... 7
4 JAVASCRIPT .................................................................................................... 11
REFERÊNCIAS ....................................................................................................... 17

3

1 INTRODUÇÃO

A Internet possui diversos serviços. A World Wide Web (conhecido
também como Web) é o nome do serviço mais popular da Internet. Por esse motivo,
é freqüentemente confundida com a própria Internet.
Internet é o nome dado ao conjunto de computadores, provedores
de acesso, satélites, cabos e serviços que formam uma rede mundial baseada em
uma coleção de protocolos de comunicação conhecidas como TCP/IP. É essencial
pra quem pretende desenvolver e colocar no ar páginas e aplicações saber disso.
A World Wide web é um serviço TCP/IP baseado no protocolo de
nível de aplicação HTTP (HyperText Transfer Protocol – Protocolo de Transferência
de Hipertexto). É o meio virtual formado pelos servidores HTTP (servidores web),
clientes HTTP (navegadores) e protocolo HTTP (regras comunicação entre cliente e
servidor).

4

2 HTML

HyperText Markup Language é a linguagem universal da Web. É
através dela que a informação disponível nas páginas da www pode ser acessada
por máquinas de arquiteturas e sistemas operacionais diferentes. Não é uma
linguagem de programação com a qual se possa construir algoritmos, mas uma
linguagem declarativa que serve para organizar informações em um arquivo de
textos que será visualizado em um browser. Define uma coleção de elementos para
marcação (definição de estrutura) de texto. um arquivo HTML é um arquivo de texto
simples recheado de marcadores que se destacam do texto pelos caracteres
especiais "<" e ">".
Com HTML é possível publicar documentos estruturados on-line,
recuperar informações através de vínculos de hipertexto, projetar uma interface
interativa com formulários para acesso a serviços remotos como buscas e comércio
eletrônico, e incluir imagens, vídeos, sons, animações e outras aplicações interativas
dentro de documentos visíveis no browser.
Exemplo de um documento HTML Simples.
<html>
<head>
<title>exemplo de html</title>
</head>
<body>
<p>olá mundo!
</body>
</html>

5

Exemplo de um documento HTML Avançado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pt-br">
<head>

<title>Eduardo Bertolucci - Curriculo </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<meta http-equiv="content-language" content="pt-br" />

<meta name="keywords" content="eduardo bertolucci, curriculo,
curriculum, cambé, pr,site pessoal" />
<meta name="description" content="Página contendo o curriculo de
Eduardo Bertolucci" />

</head>
<body>
<div>
<h1>Eduardo Bertolucci</h1>

<h2>Dados Pessoais</h2>
<p>
Estado Civil: <strong>Solteiro</strong> <br />
Data de Nasc.: <strong>03/12/1985</strong>
</p>

<h2>Experiência Profissional</h2>

<ul>
<li>Webee</li>
<li>Desenvolvedor <abbr title="Rede de alcance mundial" lang="pt-
br">WEB</abbr></li>
</ul>

<h2>Minhas atividades preferidas são</h2>

<ol>
<li>Navegar na Internet</li>
<li>Passeios - <q>Gosto também de viajar</q></li>
<li>Palestras</li>
<li>Cursos</li>
</ol>

<h2>Endereço</h2>

<address class="hcard">
<span class="street-address">Rua Genésio G. <br />
<acronym title="Jardim">Jd.</acronym> Tarobá - CEP <span
class="postal-code">86191-400</span> <br />
Cambé - <acronym title="Paraná">PR</acronym> <br />
<acronym title="Telefone">Fone</acronym>: <span class=""+55 43
9976-2138
</address>

</div>
</body>
</html>

6

Figura 1 – Exemplo de um documento HTML avançado renderizado no Firefox.

7

3 CSS

CSS, Cascading Style Sheets, é um poderoso, contudo simples
instrumento para escrever websites. A finalidade da CSS é fácil, alterar a aparência
dos elementos do site . Pode mudar, por exemplo cor, fonte, largura, altura, posição,
alpha, z-index, e assim por diante. O uso de CSS é muito simples, fácil e pode ser
colocado em documentos HTML.
No estilo, você especifica a aparência dos elementos, neste caso
você está mudando a cor e o tamanho. Você pode mudar o tamanho para 20, o tipo
da letra para Arial e cor para vermelho. Isso é facilmente feito usando CSS. Veja:
<p style="font-size: 20; font-family: Arial; color: red;"> Bem-vindo ao meu
site </ p>

O código CSS, é feito de três coisas: a primeira é elemento HTML, id
ou classe, segundo é propriedade, seguido por dois pontos (:) e a terceira é o valor
que vai ser mudado. Estamos mudando a cor do paragráfo.
p { color: red (vermelho); }

Esta é a forma como é simples. Agora, estamos mudando o tipo de
letra e tamanho, usando o font-family e font-size :
Font-family: Arial; font-size: 20;

Aqui estão alguns dos mais utilizados.
Font-weight - usado para fazer o tipo de letra negrito -
normal/bold/bolder/lighter

Background-color - usado para alterar a cor do fundo - color-
name/#000000/transparent/rgb(123,123,123)

Background-image - utilizado para colocar uma imagem de fundo - none / url
( "backgroun.jpg ')

Position - muda se a posição do elemento pode ser alterado pra cima e à
esquerda -absolute/relative

Top - o valor y - valor (value)

Left - o valor x - valor (value)

Border-style - define o estilo da borda de um elemento -
none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset

Border-color - define a cor da borda - color-
name/#000000/transparent/rgb(123,123,123)

Border-width - define a largura da borda -thin/medium/think/(value)

8

Exemplo de uma Folha de Estilo Simples.
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>CSS</title>

<style type="text/css">
#nome_completo {color: #CCC;}
.nome { color: red;}
p span {font-size: 30px; color: #FF6600; }
p.nome { color: blue; font-size: 20px; }
p[lang="en"] { font-weight: bold; color: red; }
p[lang="pt-br"] { font-weight: normal; color: #00ff00; }
a[title] { font-size: 60px; }
a[href^="ftp://"] { color: #999; font-size: 100px; }
p > strong { text-transform: uppercase; }
p:first-child { color: #666; }
</style>
</head>
<body>

<p id="nome_completo" class="nome"> <strong> <a
href="http://www.eduardobertolucci.com" title="Visite meu Site">Eduardo
Bertolucci</a> </strong> <em>TESTE<em> <span>teste</span> </p>
<p lang="en">Idioma Inglês</p>
<p lang="pt-br">Idioma Português</p>
<a href="ftp:eduardobertolucci.com" title="Acesso restrito ao FTP">FTP</a>

</body>
</html>

Figura 2 – Exemplo de uma Folha de Estilo Simples renderizada no Firefox.

9

Exemplo de uma Folha de Estilo Avançada.
<html lang="pt-br">
<head>
<title>Eduardo Bertolucci - Curriculo</title>

<meta name="keywords" content="eduardo bertolucci, curriculo, curriculum, cambé,
pr,site pessoal" />
<meta name="description" content="Página contendo o curriculo de Eduardo
Bertolucci" />

body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
div { width: 598px; margin: auto; padding: 10px; background: #E8EEFA; }
h1 { font-size: 30px; text-transform: uppercase; }
h2 { border: 1px solid #C3D9FF; background: #FFF; }
p { font-size: 20px; font-weight: bold; text-align: center; color: #271672; }
ul { font-weight: bold; text-transform: uppercase; color: #271672; }
ol { font-weight: bold; text-transform: uppercase; color: #271672; }
address { font-style: normal; border: 3px solid #FFF; text-align: right;
color: #fff; background: #3c62a2; }
acronym { border: none; text-decoration: none; font-style: normal; }
</style>

</head>
<body>
<div>
<h2>Dados Pessoais</h2>
<p>
</p>
<h2>Experiência Profissional</h2>
<ul>
<li>Webee</li>
br">WEB</abbr></li>
</ul>
<h2>Minhas atividades preferidas são</h2>
<ol>
<li>Palestras</li>
<li>Cursos</li>
</ol>
<h2>Endereço</h2>
<address class="hcard">
<acronym title="Jardim">Jd.</acronym> Tarobá - CEP <span class="postal-
code">86191-400</span> <br />
<acronym title="Telefone">Fone</acronym>: <span class="">+55 43 9976-
2138</span>
</address>
</div>
</body>
</html>

10

Figura 3 – Exemplo de uma Folha de Estilo Avançada renderizada no Firefox.

11

4 JAVASCRIPT

Javascript é uma linguagem de programação simples desenvolvida
pela Netscape e que se tornou padrão na Internet. Consiste numa linguagem
integrada e embutida no HTML. A linguagem Javascript permite um controle maior
na apresentação de páginas, possibilitando recursos que não são disponíveis em
HTML. Por exemplo, uma janela pode ser criada usando comandos em Javascript
(assim como o botão para fechá-la). Uma vez que o interpretador de Javascript está
incluida no navegador, isto o torna independente de sistemas operacionais. Assim,
código Javascript incorporado em HTML é executável em Windows, Macintosh,
Linux e outros sistemas.
Apesar de Javascript ser muito parecida com Java (outra linguagem,
desenvolvida pela Sun Microsystems), não são idênticas. Java é uma linguagem
muito mais extensa e poderosa, bastante utilizada na criação de programas applet
executáveis no navegador. Uma diferença fundamental entre Java e Javascript é
que a primeira é compilada no servidor e o código executável repassado para o
computador cliente, enquanto que Javascript é interpretada pelo cliente.
Exemplo de um Javascript Simples.
<html lang="pt-br">
<head>



<meta name="keywords" content="eduardo bertolucci, curriculo, curriculum,
cambé, pr,site pessoal" />
Bertolucci" />

body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-
serif; }
div { width: 598px; margin: auto; padding: 10px; background: #E8EEFA;
}
h2 a { font-size: 11px; }
p { font-size: 20px; font-weight: bold; text-align: center; color:
#271672; }
address { font-style: normal; border: 3px solid #FFF; text-align:
right; color: #fff; background: #3c62a2; }

12


.maisinfo_oculto { display: none; }
.maisinfo_exibido { display: block; background: #FFFFCC; }
</style>
<script type="text/javascript">
function exibeOculta (elemento) {
var objeto = document.getElementById (
elemento);

if (objeto.style.display !== "none") {
objeto.style.display = 'none';
}
else {
objeto.style.display = '';
}
}
</script>
</head>
<body>
<div>

<h2>Dados Pessoais <a href="#" onclick="exibeOculta('maisinfo1');">mais
informações</a></h2>
<p id="maisinfo1" style="display: none;">
</p>

<h2>Experiência Profissional <a href="#"
onclick="exibeOculta('maisinfo2');">mais informações</a></h2>

<ul id="maisinfo2" style="display: none;">
<li>Webee</li>
br">WEB</abbr></li>
</ul>

<h2>Minhas atividades preferidas são <a href="#"
<ol id="maisinfo3" style="display: none;">
<li>Palestras</li>
<li>Cursos</li>
</ol>
<h2>Endereço <a href="#" onclick="exibeOculta('maisinfo4');">mais
<address id="maisinfo4" style="display: none;" class="hcard">
<acronym title="Telefone">Fone</acronym>: <span class="">+55 43
9976-2138</span>
</address>

</div>
</body>
</html>

13

Figura 4 - Antes de clicar no link mais informações

Figura 5 - Depois de clicar no link mais informações

14

Exemplo de um Javascript Avançado.
<html lang="pt-br">
<head>


<meta name="keywords" content="eduardo bertolucci, curriculo, curriculum,
cambé, pr,site pessoal" />
Bertolucci" />
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-
serif; }
div { width: 598px; margin: auto; padding: 10px; background: #E8EEFA;
}
h2 a { font-size: 11px; }
p { font-size: 20px; font-weight: bold; text-align: center; color:
#271672; }
address { font-style: normal; border: 3px solid #FFF; text-align:
right; color: #fff; background: #3c62a2; }

.maisinfo_oculto { display: none; }
.maisinfo_exibido { display: block; background: #FFFFCC; }
</style>
<script type="text/javascript">
function exibeOculta (elemento) {
var objeto = document.getElementById (
elemento);

if (objeto.style.display !== "none") {
objeto.style.display = 'none';
}
else {
objeto.style.display = '';
}
}
function alteraCorBody (){
cor = document.getElementById("cor").value;
pagina = document.getElementsByTagName("body");
pagina[0].style.backgroundColor = cor;
}
function alteraCorBox () {
divcaixa = document.getElementById("box");
divcaixa.style.backgroundColor = cor;
}
function alteraCorTexto (){
pagina = document.getElementsByTagName("h2");
pagina[0].style.color = cor;

15

}
</script>
</head>
<body>
<div id="box">

<h2>Dados Pessoais <a href="#" onclick="exibeOculta('maisinfo1');">mais
<p id="maisinfo1" style="display: none;">
</p>

<h2>Experiência Profissional <a href="#"

<ul id="maisinfo2" style="display: none;">
<li>Webee</li>
br">WEB</abbr></li>
</ul>

<h2>Minhas atividades preferidas são <a href="#"

<ol id="maisinfo3" style="display: none;">
<li>Palestras</li>
<li>Cursos</li>
</ol>

<h2>Endereço <a href="#" onclick="exibeOculta('maisinfo4');">mais
<address id="maisinfo4" style="display: none;" class="hcard">
<acronym title="Telefone">Fone</acronym>: <span class="">+55 43
9976-2138</span>
</address>

<form>
<label for="cor"> Cor:
<input name="cor" id="cor" type="text" value="#" size="7" />
</label>
<button type="button" onclick="alteraCorBody()">Altera cor de
fundo</button>
<button type="button" onclick="alteraCorBox()">Altera cor de Box</button>
<button type="button" onclick="alteraCorTexto()">Altera cor de
Texto</button>
<button type="button" onclick="window.print();">Imprimir</button>
</form>

</div>
</body>
</html>

16

Figura 6 – Página com as cores normais

Figura 7 – Página com as cores modificadas.

17

REFERÊNCIAS

http://www.castroinfonet.com/2009/07/css-o-que-e-para-o-que-serve.html

http://www6.ufrgs.br/bioquimica/proginst/oquiejs.htm

Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

En vedette

En vedette (7)

Similaire à Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010

Similaire à Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010 (20)

Dernier

Dernier (20)

Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010