Carregar apresentação
A apresentação está carregando. Por favor, espere
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/
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: Usando CSS:
<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/
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 js (25/05/09) <head> ... <script type=”text/javascript” src=”/caminho/jquery js”></script> <!– a linha acima linha chama a biblioteca jQuery --> </head> Download no site oficial:
43
Sintaxe Sintaxe JavaScript Sintaxe jQuery
document.getElementsByTagName("p") $("p") document.getElementById(”um”).setAttribute(”class”, “cor”) $("#um").attr("class", "cor")
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 CSS http://pt.wikipedia.org/wiki/Html
CSS
46
Referências JQuery http://pt.wikipedia.org/wiki/JQuery
Apresentações semelhantes
