HTML, CSS e JQuery Wendell Silva Soares
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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/
00001a.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/jquery-
1.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/
html.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/
introducao-a-biblioteca-jquery/ http://jquery.com/
Related Documents
