Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1
Linguagem HTML 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 IHC AULA 6 5-09-2011 2
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>. IHC AULA 6 5-09-2011 3
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. IHC AULA 6 5-09-2011 4
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 IHC AULA 6 5-09-2011 5
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. IHC AULA 6 5-09-2011 6
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. Exemplo: <font face= Arial size= 8 > Texto em <i>arial</i> 8 </font> Saída: IHC AULA 6 Texto em 5-09-2011 Arial 8 7
Saída do HTML IHC AULA 6 5-09-2011 8
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>... </tile> - 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. IHC AULA 6 5-09-2011 9
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. IHC AULA 6 5-09-2011 10
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. IHC AULA 6 5-09-2011 11
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. IHC AULA 6 5-09-2011 12
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. IHC AULA 6 5-09-2011 13
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.); IHC AULA 6 5-09-2011 14
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> </h1> <font color="#00ff00">título</font> 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. IHC AULA 6 5-09-2011 15
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. IHC AULA 6 5-09-2011 16
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. IHC AULA 6 5-09-2011 17
Sintaxe do CSS Usando HTML podemos fazer assim: <body bgcolor="#ff0000"> Usando CSS: body {background-color: #FF0000;} IHC AULA 6 5-09-2011 18
Sintaxe do CSS IHC AULA 6 5-09-2011 19
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> IHC AULA 6 5-09-2011 20
Interno (a tag style): Como usar o CSS <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> IHC AULA 6 5-09-2011 21
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. IHC AULA 6 5-09-2011 22
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>... IHC AULA 6 5-09-2011 23
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> IHC AULA 6 5-09-2011 24
Exemplo de uso IHC AULA 6 5-09-2011 25
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? IHC AULA 6 5-09-2011 26
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. IHC AULA 6 5-09-2011 27
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 IHC AULA 6 5-09-2011 28
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. IHC AULA 6 5-09-2011 29
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. IHC AULA 6 5-09-2011 30
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). IHC AULA 6 5-09-2011 31
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 IHC AULA 6 5-09-2011 32
O CSS pode ser externo; Dentro do cabeçalho; Dentro do html; Aplicado pelo usuário; Três versões do CSS IHC AULA 6 5-09-2011 33
Como Funciona a Folha de Estilos As regras de casamento para o CSS são chamadas de seletores, uma definição de estilo pode ser casada com um seletor ou um grupo de seletores separados por vírgula, um seletor pode casar um elemento por: Seletor Propriedade Valor r IHC AULA 6 5-09-2011 34
CSS Cor do Fundo No exemplo anterior temos: IHC AULA 6 5-09-2011 35
CSS IHC AULA 6 5-09-2011 36