1. O documento apresenta um trabalho sobre HTML, CSS e JavaScript desenvolvido por Eduardo Bertolucci para a disciplina de Tópicos Especiais em Desenvolvimento de Sistemas da UNOPAR.
2. O trabalho contém seções sobre HTML, CSS e JavaScript onde são apresentados exemplos de códigos e explicações sobre os principais elementos e propriedades dessas tecnologias.
3. O documento termina com referências bibliográficas.
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
1. 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
2. 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
4. 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).
5. 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>
6. 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>
7. 6
Figura 1 – Exemplo de um documento HTML avançado renderizado no Firefox.
8. 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)
9. 8
Exemplo de uma Folha de Estilo Simples.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="pt-br" />
<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.
11. 10
Figura 3 – Exemplo de uma Folha de Estilo Avançada renderizada no Firefox.
12. 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.
<!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" />
<style type="text/css">
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; }
h2 a { font-size: 11px; }
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; }