HTML, CSS e JQuery
Wendell Silva Soares
Sumário
•
•
•
•
HTML
CSS
JQuery
Referências
HTML
•
•
•
•
•
•
•
Apresentação
Requisitos
Sintaxe do HTML
Exemplos de Tags
Estrutura Básica
Elementos Básicos
Tutoriais
Apresentação
• HTML é a abreviação de HyperText Markup
Language, que pode ser traduzido como
Linguagem de Marcação de Hipertexto. Não é
uma linguagem de programação. É uma
linguagem de descrição de página.
• Hipertexto é um método de organização que
permite que textos, imagens, sons e ações
fiquem interligados.
Apresentação
• A função do HTML é criar páginas para a Internet.
Você pode criar textos nas páginas, fazer formatação,
criar listas, criar tabelas, criar formulários, trabalhar
com imagens, etc.
• Com HTML criamos páginas estáticas, sem animação.
• De maneira geral o HTML é um poderoso recurso,
sendo uma linguagem de marcação muito simples e
acessível voltada para a produção e
compartilhamento de documentos e imagens.
Requisitos
• Um editor de textos qualquer.
• E um browser (navegador) qualquer.
Sintaxe do HTML
• Nos comandos são utilizadas duas marcas ou tags
que são:
< > - Marca de abertura
</> - Marca de fechamento
<comando atributo1=”valor1” ... atributoN=”valorN”>
etc, etc,
</comando>
• As etiquetas HTML não são case sensitive, portanto tanto faz
escrever <HTML>, <Html>, <html> ou <HtMl>.
Sintaxe do HTML
• Como o HTML não é uma linguagem de
programação, você nunca será avisado de
erros que tenha cometido na digitação ou na
edição do seu documento. O simples
esquecimento de uma barra pode gerar
efeitos colaterais inesperados na visualização
de uma página, e estes efeitos serão o único
sinal de que algo está errado.
Sintaxe do HTML
• Uma tag é formada por comandos, atributos e
valores. Os atributos modificam os resultados
padrões dos comandos e os valores caracterizam
essa mudança.
• Exemplo: <HR color="red">
No qual:
• HR = comando que desenha uma barra horizontal
• color = atributo que especifica a cor da barra
• red = valor do atributo color, que é a cor da barra
que será desenhada
Sintaxe do HTML
• Cada comando tem seus atributos possíveis e
seus valores. Um exemplo, é o atributo size
que pode ser usado com o comando FONT,
com o HR mas que não pode ser usado com o
comando BODY. Isso quer dizer que devemos
saber exatamente quais os atributos e valores
possíveis para cada comando.
Exemplos de tags:
• <b> ... </b> - Coloca negrito no texto.
• <center> ... </center> - Centraliza o texto na
página.
• <font> ... </font> - Permite definir o tipo,
tamanho, cor, estilo da fonte.
• Ex:
<font face=“Arial” size=“8”>
Texto em <i>Arial</i> 8 </font>
Saída:
Texto em Arial 8
Estrutura Básica
<html>
<head>
<title> Título da Página </title>
</head>
<body>
...
...
...
</body>
</html>
Elementos Básicos
• <HTML> ... </HTML> - Indicam respectivamente o
início e o fim de um documento HTML. Todos os
outros elementos devem estar entre estas marcas.
• <HEAD> ... </HEAD> - Delimitam a seção de
cabeçalho do documento. Trata-se da primeira seção
do documento.
• <TITLE> ... </TITLE> - Indicam o título do documento,
que será exibido na barra de título do navegador.
Estas marcas devem constar da seção de cabeçalho.
Elementos Básicos
• <BODY> ... </BODY> - Representam o corpo do documento. Entre estas
marcas estará contida a maior parte do conteúdo a ser exibido com textos
e imagens. Este elemento pode conter seis atributos opcionais, que são:
Atributo BACKGROUND: Especifica uma imagem como fundo da
página.
• Exemplo: <body background=’’fundo.gif’’>
Atributo BGCOLOR: Configura a cor de fundo da página.
• Exemplo: <body bgcolor=’’white’’>
Atributo TEXT: Configura a cor do texto da página.
• Exemplo: <body text=’’black’’>
Atributos LINK, ALINK, VLINK: Configuram as cores dos links da página.
alink configura a cor do link ativo, isto é, quando é clicado. VLINK
configura a cor do link já visitado.
• Exemplo: <body link=”blue” vlink=”purple” alink=”red”> Este
exemplo configura uma página com links azuis, links ativos em
vermelho e links visitados em roxo.
Tutoriais HTML
• http://pt-br.html.net/tutorials/html/
• http://www.icmc.usp.br/ensino/material/html/
• http://www.truquesedicas.com/tutoriais/html/0000
1a.htm
CSS
•
•
•
•
•
•
•
Apresentação
Porque utilizar CSS
Web Standards
Sintaxe do CSS
Como usar o CSS
Exemplos de uso
Tutoriais
Apresentação
• CSS é a sigla em inglês para Cascading Style
Sheet que em português foi traduzido para
Folha de Estilo em Cascata e é definida como:
Folha de estilo em cascata é um mecanismo
simples para adicionar estilos (p.ex., fontes, cores,
espaçamentos) aos documentos Web.
Apresentação
• CSS é uma linguagem para estilos que define o
layout de documentos HTML. Por exemplo,
CSS controla fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, etc.
Porque utilizar CSS
• A grande vantagem do uso de CSS é a de separar a
marcação HTML, da apresentação do site. Em outras
palavras, vale dizer que o HTML destina-se
unicamente a estruturar e marcar o conteúdo,
ficando por conta das CSS toda a responsabilidade
pelo visual do documento.
• HTML marca e estrutura textos, cabeçalhos,
parágrafos, links, botões, formulários, imagens e
demais elementos da página e CSS define cores,
posicionamento na tela, estilos de linhas, bordas e
tudo o mais relacionado à apresentação.
Porque utilizar CSS
• Controle do layout de vários documentos a
partir de uma simples folha de estilos;
• Maior precisão no controle do layout;
• Aplicação de diferentes layouts para servir
diferentes mídias (tela, impressora, etc.);
Porque utilizar CSS
• Exemplo: Mudar a cor de todos os títulos do site de
verde para vermelho.
• Mas, são 180 páginas no site! E os títulos são tags de
cabeçalho deste tipo:
<h1>
<font color="#00FF00">Título</font>
</h1>
• Utilizando CSS você muda a cor de todos os
cabeçalhos h1 em todo o site em questão de
segundos. Mesmo que o site tenha 180 ou 1800
páginas.
Porque utilizar CSS
• Projetar um site navegável tanto em monitor
de 1280x1024 quanto em uma telinha de
320x240 de um PDA, com utilização da mesma
marcação é fantástico e possível. Basta
projetar de acordo com as Web Standards
entregando às CSS a missão de acomodar o
conteúdo na tela!
Web Standards
• Web Standards pode ser traduzido como Padrões
Web e tem por objetivo a criação de uma Web
universal.
• Web Standards é um conjunto de normas, diretrizes,
recomendações, notas, artigos, tutoriais e afins de
caráter técnico, produzidos pelo W3C e destinados a
orientar fabricantes, desenvolvedores e projetistas
para o uso de práticas que possibilitem a criação de
uma Web acessível a todos, independentemente dos
dispositivos usados ou de suas necessidades
especiais.
Sintaxe do CSS
• Muitas das propriedades usadas nas
Cascading Style Sheets (CSS) são semelhantes
ao HTML.
• Assim, se está familiarizado com o uso de
HTML para layout irá reconhecer muitos dos
códigos que se usam no CSS.
Sintaxe do CSS
• Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
• Usando CSS:
body {background-color: #FF0000;}
Sintaxe do CSS
Como usar o CSS
O CSS pode-se aplicar a um documento de três
formas distintas.:
• In-line (o atributo style):
<html>
<head>
<title>Exemplo<title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Como usar o CSS
• Interno (a tag style):
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Como usar o CSS
• Externo (link para uma folha de estilos)
O método recomendado é o de colocar um link
para uma folha de estilos externa.
Uma folha de estilos externa é um simples arquivo
de texto com a extensão .css.
Como usar o CSS
• Externo(link para uma folha de estilos)
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
...
Exemplo de uso
• teste.html
<html>
<head>
<title>documento de teste de CSS</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<h1>Folha de estilos</h1>
</body>
</html>
Exemplo de uso
• estilo.css
body {
background-color: #FF0000;
}
Exemplo de uso
Tutoriais
•
•
•
•
http://pt-br.html.net/tutorials/css/
http://maujor.com/index.php
http://www.codigofonte.com/css/
http://www.criarweb.com/manual/css/
JQuery
•
•
•
•
•
•
Apresentação
Para que serve jQuery?
Porque utilizar jQuery
Características
Como instalar
Como usar
Apresentação
• jQuery é uma biblioteca JavaScript criada por
John Resig e disponibilizada como software
livre e aberto
• O foco principal da biblioteca jQuery é a
simplicidade. Por que submeter os
desenvolvedores ao martírio de escrever
longos e complexos códigos para criar simples
efeitos?
Para que serve jQuery?
• Adicionar efeitos visuais e animações;
• Buscar informações no servidor sem necessidade de
recarregar a página;
• Prover interatividade;
• Alterar conteúdos;
• Modificar apresentação e estilização;
• Simplificar tarefas específicas de JavaScript;
• Realizar outras tarefas relacionadas às descritas.
Porque utilizar jQuery
• Você, não precisa ser um profundo conhecedor de
JavaScript para aprender jQuery, por mais estranho
que isso possa parecer, pois se trata de uma
biblioteca criada com base nesta programação.
• Simplicidade é a palavra-chave que resume e norteia
o desenvolvimento com jQuery. Linhas e mais linhas
de programação JavaScript escritas para obter um
determinado efeito em uma página são substituídas
por apenas uma dezena de linhas escritas com
sintaxe jQuery
Características
• jQuery foi criada com a preocupação de ser
uma biblioteca em conformidade com os
Padrões Web, ou seja, compatível com
qualquer sistema operacional, navegador e
com suporte total para as CSS 3.
Características
• Uso de seletores CSS para localizar elementos componentes
da estrutura de marcação HTML da página;
• Arquitetura compatível com instalação de plug-ins e
extensões em geral;
• Indiferença às inconsistências de renderização entre
navegadores;
• Capaz de interação implícita isto é, não há necessidade de
construção de loops para localização de elementos no
documento;
• Admite programação encadeada, ou seja, cada método
retorna um objeto.
• É extensível, pois admite criação e inserção de novas
funcionalidades na biblioteca existente.
Como instalar
• A biblioteca jQuery nada mais é do que um
arquivo JavaScript (arquivo tipo texto puro
gravado com a extensão .js, como por
exemplo: meu_arquivo.js) que deverá ser
referenciado na página web onde serão
aplicados efeitos
• E é somente isso. Você não precisa instalar
nada. Basta fazer o download gratuito do
arquivo e chamá-lo na(s) página(s).
Como usar
• A versão mais recente da biblioteca está no
arquivo jquery-1.3.2.js (25/05/09)
<head>
...
<script type=”text/javascript” src=”/caminho/jquery1.3.2.js”></script>
<!– a linha acima linha chama a biblioteca jQuery -->
</head>
...
• Download no site oficial: http://jquery.com
Sintaxe
Sintaxe JavaScript
Sintaxe jQuery
document.getElementsByTagName("p")
$("p")
document.getElementById(”um”).setAttribute(”class”, “cor”)
$("#um").attr("class",
"cor")
Sintaxe
• Suponha que você queira selecionar todas as
tag's div, seu código seria o seguinte:
( "div" );
• Quanto no método tradicional, você teria de
usar :
document.getElementsByTagName("div");
Referências
• HTML
http://pt.wikipedia.org/wiki/Html
http://www.telecentros.sp.gov.br/capacitacao/apostilas/ht
ml.pdf
• CSS
http://www.bitpt.com/index.php/content/view/46/60/
http://maujor.com/index.php
http://maujor.com/tutorial/intrtut.php
http://pt-br.html.net/tutorials/css/lesson1.asp
http://pt-br.html.net/tutorials/css/lesson2.asp
Referências
• JQuery
http://pt.wikipedia.org/wiki/JQuery
http://livrojquery.com.br/
http://www.maujor.com/blog/2008/10/22/introd
ucao-a-biblioteca-jquery/
http://jquery.com/
Download
