1 / 46

HTML, CSS e JQuery

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.

farren
Download Presentation

HTML, CSS e JQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML, CSS e JQuery Wendell Silva Soares

  2. Sumário • HTML • CSS • JQuery • Referências

  3. HTML • Apresentação • Requisitos • Sintaxe do HTML • Exemplos de Tags • Estrutura Básica • Elementos Básicos • Tutoriais

  4. 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.

  5. 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.

  6. Requisitos • Um editor de textos qualquer. • E um browser (navegador) qualquer.

  7. 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>.

  8. 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.

  9. 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

  10. 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.

  11. 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

  12. Estrutura Básica <html> <head> <title> Título da Página </title> </head> <body> ... ... ... </body> </html>

  13. 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.

  14. 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.

  15. 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

  16. CSS • Apresentação • Porque utilizar CSS • Web Standards • Sintaxe do CSS • Como usar o CSS • Exemplos de uso • Tutoriais

  17. 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.

  18. 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.

  19. 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.

  20. 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.);

  21. 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.

  22. 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!

  23. 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.

  24. 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.

  25. Sintaxe do CSS • Usando HTML podemos fazer assim: • <body bgcolor="#FF0000"> • Usando CSS: • body {background-color: #FF0000;}

  26. Sintaxe do CSS

  27. 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>

  28. 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>

  29. 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.

  30. 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> ...

  31. 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>

  32. Exemplo de uso • estilo.css body { background-color: #FF0000; }

  33. Exemplo de uso

  34. Tutoriais • http://pt-br.html.net/tutorials/css/ • http://maujor.com/index.php • http://www.codigofonte.com/css/ • http://www.criarweb.com/manual/css/

  35. JQuery • Apresentação • Para que serve jQuery? • Porque utilizar jQuery • Características • Como instalar • Como usar

  36. 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?

  37. 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.

  38. 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

  39. 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.

  40. 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.

  41. 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).

  42. 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

  43. Sintaxe

  44. 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");

  45. 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

  46. 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/

More Related