<b>, <big>, <em>, <i>, <small>, <strong>, <sub>, <sup>,... <table>, <tbody>, <thead>, <th>, <tr>, td
|
|
|
- Sérgio Pedroso Castilho
- 8 Há anos
- Visualizações:
Transcrição
1 HTML Hypertext Markup Language Draft 1991; ; ; ; ; ; 5.0 (2011?) Linguagem g de marcação básica utilizada na WEB, que consiste de elementos envolvidos pelos sinais de < e >. O conjunto <elementname> é conhecido como tag O navegador é capaz de ler páginas HMTL e exibir seu conteúdo. O conteúdo é aquele existente entre a tag inicial e a final As tags não são exibidas pelo navegador, mas são utilizadas para interpretar o conteúdo das mesmas Cada elemento possui atributos que o qualificam e cada tag aberta deve ser devidamente fechada. Exemplo <elementname atributename1="attributevalue1"... /> <elementname atributename1="attributevalue1"... > contentappearatbrowser </elementname> 25 HTML Tags A linguagem apresenta um conjunto de tags Uma tag não reconhecida pelo navegador é exibida como texto Categorias de Tags Tags básicas de uma página <html>,, <body> Headings (Cabeçalhos) <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Parágrafos <p>, <br> Links (Âncoras) <a> Imagens <img> Comentários <! This a comment --> 26
2 HTML Tags Categorias de Tags Formatação de Texto <b>, <big>, <em>, <i>, <small>, <strong>, <sub>, <sup>,... Listas (Numeradas) <ul>, <ol> Listas (Marcadores) <ul>, <ol>, <li> Tabelas <table>, <tbody>, <thead>, <th>, <tr>, td 27 HTML Tags Categorias de Tags <ul>, <ol>, <li> <table>, <tbody>, <thead>, <th>, <tr>, td <! This a comment --> 28
3 HTML Tags A linguagem apresenta um conjunto de tags Uma tag não reconhecida pelo navegador é exibida como texto Exemplos de tags <html>,, <body> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <p>, <br> <a> <b>, <big>, <em>, <i>, <small>, <strong>, <sub>, <sup>,... <img> <ul>, <ol>, <li> <table>, <tbody>, <thead>, <th>, <tr>, td <! This a comment --> 29 Documento HTML <html> <title>title of the document</title> </head> <body> Este é o conteudo visível da página </body> </html> 30
4 CSS (Cascade Style Sheets) Permite a definição de estilos que definem como os elementos HTML serão mostrados Desta forma é possível aplicar um determinado estilo a vários elementos, simplificando o processo de formatação dos mesmos Originalmente a linguagem HTML não continha atributos para diferentes fontes e cores. A introdução na versão 3.2 trouxe ônus a dificuldade para formatar os elementos. Os estilos foram adicionados na versão 4.0 Normalmente os estilos são definidos em um arquivo à parte (.css) e o mesmo é incluído em um conjunto de páginas Para uma referência na linguagem consulte o endereço abaixo 31 CSS (Cascade Style Sheets) Sintaxe Cada estilo é visto como uma regra de formatação A regra contém duas partes: Seletor Uma ou mais declarações A declaração consiste de um par (propriedade:valor) finalizado por ; O conjunto de declarações deve estar entre chaves É possível quebrar a declaração em várias linhas a fim de facilitar a leitura Exemplo Selector {propertyname1:value1;...; propertynamen:valuen; 32
5 CSS (Cascade Style Sheets) Sintaxe - Seletor O seletor pode ser utilizado de diferentes formas HtmlTag Neste caso o seletor é igual a alguma tag HTML e neste caso todos os elementos com aquela tag conterão a mesma formatação #selectorname Neste caso o nome do seletor inicia-se pelo caractere #. O objetivo é aplicar este estilo a um único elemento. Para selecionar o elemento é é utilizado o atributo id (id="selectorname") em uma tag <p id="selectorname">.classname Neste caso o nome do seletor inicia-se pelo caractere. A classe é aplicada a um grupo de elementos É possível indicar uma classe somente para determinados elementos. Desta forma somente aquelas tags serão afetas pelo estilo. Neste caso o seletor possuirá o seguinte formato: tagname.selectorname Para selecionar o elemento é utilizado o atributo class (class="selectorname") <p class="selectorname"> 33 CSS (Cascade Style Sheets) Aplicar Estilo Existem três formas de aplicar os estilos Arquivo externo com estilos <link rel="stylesheet" type="text/css" text/css href="mystyle.css" /> </head> Declaração interna dos estilos <style type="text/css"> hr {color:green; p {margin-left:20px; body {background-image:url("img/logo.gif"); </style> </head> Declaração no atributo style <p style="color:sienna;margin-left:20px">this is a paragraph.</p> A primeira forma é a mais eficiente e utilizada pois os estilos poderão ser compartilhados por um grande número de páginas, facilitando manutenções no web site 34
6 CSS (Cascade Style Sheets) Aplicar Estilo Existem três formas de aplicar os estilos Arquivo externo com estilos <link rel="stylesheet" type="text/css" text/css href="mystyle.css" /> </head> Declaração interna dos estilos <style type="text/css"> hr {color:green; p {margin-left:20px; body {background-image:url("img/logo.gif"); </style> </head> Declaração no atributo style <p style="color:sienna;margin-left:20px">this is a paragraph.</p> A primeira forma é a mais eficiente e utilizada pois os estilos poderão ser compartilhados por um grande número de páginas, facilitando manutenções no web site 35 CSS (Cascade Style Sheets) Uso dos Estilos Os estilos são aplicados em cascata do mais externo para o mais interno A ordem de aplicação dos estilos é a seguinte: 1. Padrão do Navegador 2. Estilo definido em um arquivo externo 3. Estilo definido na seção 4. Estilo definido dentro do elemento com o atributo "style Os valores mais internos possuem prioridade, logo o atributo style fará a sobreposição nos outros estilos 36
7 CSS Exemplo Básico <html> <style type="text/css"> p {color:red;text-align:center; h1 { color:blue; text-align:center; </style> </head> <body> <p>hello World! - Style p</p> <p>this paragraph is styled with CSS - Style p.</p> <h1>heading - htyle h1 </h1> </body> </html> 37 CSS Composição de Estilos O termo classe para o seletor pode provocar a visão de que conceitos de programação orientada a objetos estão disponíveis, o que não é fato A linguagem oferece algumas formas de composição de estilos Composição na hieraquia dos elementos Neste caso as propriedades aplicadas a elementos mais externos sejam propagadas para elementos mais internos Desta forma é possível que elementos mais internos (filhos) herdem as propriedades de elementos mais externos (pai) Composição no atributo class É possível compor o conteúdo de várias classes e aplicá-las simultaneamente a um elemento. Neste caso as declarações de ambas serão adicionadas Composição na definição da classe Mais de um seletor tipo do class é escolhido para um conjunto de declarações Neste caso todos compartilharão as mesmas propriedades 38
8 CSS Composição na Hierarquia No exemplo abaixo a composição utilizou a hierarquia entre os elementos <div> e <p> no documento O valor "inherit" para a propriedade color não é obrigatório. Sendo que para a maioria das propriedades este é o padrão utilizado, logo não é necessário repetir a propriedade na declaração da classe <html> <style type="text/css">.foo {background-color: white; color: blue;.bar {background-color: yellow; color: inherit; font-weight: bold; </style> </head> <body> <div class="foo"> <p> Paragraph only with.foo class</p> <p class="bar">paragraph only with.foo +.bar class</p> <p>paragraph again only with.foo class<!p> </div> </body> </html> 39 CSS Composição no atributo class No exemplo a composição no elemento <p> a composição de estilos utilizando mais de uma classe no valor do atributo class. <html> <style type="text/css">.foo {background-color:white; color:blue;.bar {background-color:yellow;font-weight:bold; </style> </head> <body> <div> <p > Paragraph wiht no css class</p> <p class="foo bar">paragraph only with.foo +.bar class</p> <p class="foo">paragraph again only with.foo class<!p> </div> </body> </html> 40
9 CSS Composição na definição da classe No exemplo a composição é feita na definição onde mais de uma classe compartilha as mesmas declarações. <html> <style type="text/css">.foo,.bar {color:blue;.bar {background-color:yellow;font-weight:bold; </style> </head> <body> <div> <p > Paragraph wiht no css class</p> <p class="bar">paragraph with.foo +.bar class</p> <p class="foo">paragraph again only with.foo class<!p> </div> </body> </html> 41 JavaScript JavaScript é uma linguagem de programação suportada pelos navegadores. A versão inicial surgiu em 1996 (Netscape) e a última versão é a (2009) A linguagem é interpretada e o código é embutido diretamente em páginas HTML sendo executado pelo navegador (cliente). O navegador possui uma aplicação (javascript engine) responsável pela interpretação e execução do código Permite melhorar a experiência do usuário e incorporar interatividade do lado cliente Utilizada por Webmasters e Web designers Linguagem suporta: Leitura e Escrita de texto em uma página HTML Criar respostas a eventos ocorridos em uma página HTML Validar dados informados em uma página HTML Suporte a cookies Javascript não possui nenhuma relação com a linguagem Java 42
10 JavaScript Uso Para inserir um código HTML é necessário utilizar a tag <script> Código interno à página <script type="text/javascript"> Código em arquivo externo à página, facilitando seu reuso <script type="text/javascript" src="xxx.js"></script> O código pode estar presente tanto no elemento <body> quanto no elemento No elemento <body> o código é executado assim que a página é carregada. O código pode estar em qualquer ponto da página, mas o ideal é que o mesmo fique no final da página No elemento o código é executado no momento em que um evento ocorre. Neste elemento normalmente são colocadas todas as funções 43 JavaScript Conceitos Gerais Um código Javascript consiste de uma sequencia de comandos executados pelo navegador A linguagem é case sensitive Comando Um comando pode ser finalizado por um caractere ; e por uma quebra de linha Blocos Uma sequencia de comandos pode ser agrupadas em blocos que neste caso iniciamse pelo caractere { e finalizado pelo caractere O bloco é utilizado em funções ou em estrutura de controle da linguagem Comentários // Comentário em uma linha simples /* Comentário Em várias linhas */ 44
11 JavaScript Variáveis Variáveis A linguagem é fracamente tipada e portando uma varíavel pode conter qualquer tipo de dado O nome de variável de começar com uma letra com um um caractere _ Caso a variável seja declarada mais de uma vez seu valor não é alterado. Inicialmente a variável não possui conteúdo Variáveis declaradas dentro de uma função são locais (escopo função) e fora são globais (escopo página) É possível atribuir valor a uma variável ainda não declarada Exemplo var x; //declaração var itemname="produto"; //declaração e atribuição globalvar; //variável global sem o uso da keyword "var 45 JavaScript Operadores Aritméticos Operador Descrição Exemplo Resultado Contexto + Adição x=y+2 x=7 y=5 - Subtração x=y-2 x=3 y=5 * Multiplicação x=y*2 x=10 y=5 / Divisão x=y/2 x=2.5 y=5 % Módulo (resto da divisão inteira) x=y%2 x=1 y=5 Atribuição ++ Incremento -- Decremento x=++y x=y++ x=--y x=y-- x=6 x=5 x=4 x=5 y=6 y=4 Operador Exemplo Equivalente Resultado = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 46
12 JavaScript Operadores Relacionais É possível concatenar strings Se um número for adicionado a uma string o resultado será uma string Operador Descrição Exemplo == igualdade x==8 is false x===5 is true === exatamente igual (valor e tipo) x==="5" is false!= Diferente x!=8 is true > Maior x>8 is false < Menor x<8 is true >= Menor ou igual x>=8 is false <= Maior ou igual x<=8 is true Lógicos Operador Descrição Exemplo && and lógico (x < 10 && y > 1) is true or lógico (x==5 y==5) is false! not lógico!(x==y) is true? Operador condicional varivalue=(condicao)?value1:value2 47 JavaScript Objetos A linguagem Javascript é orientada a objetos e a linguagem possui um conjunto de classes pré-definidas com seus métodos Os objetos possuem propriedades é métodos Acesso a uma propriedade p objectinstance.property Acesso a um método objectinstance.methodname(); Todos os elementos de uma página podem ser modelados como objetos Objeto document Representa uma página carregada no navegador Outras classes String Date Array Boolean Math RegExp 48
13 Javascript Funções Possui a seguinte sintaxe function nomefuncao(var1,var2,...,varx) { //codigo da funcao return returnvalue; Uma função pode ou não retornar valores As funções são utilizadas normalmente para responder a eventos 49 Javascript Eventos Os eventos permitem criar páginas ou comportamentos dinâmicos Os eventos são detectados pela linguagem e são disparados pelos elementos de uma página HTML Exemplos de eventos Produzidos pelo mouse (click, movimento, etc) e teclado (pressionar) Carregamento de uma página ou imagem Seleção de um campo em um formulario (<form>) Submissão de uma página (request) Eventos dos elementos onload e onunload onfocus, onblur e onchange onsubmit onmouseover 50
14 Javascript Funções - Exemplo <html> <script type="text/javascript"> function displaymessage(){ alert("hello World!"); //mostra mensagem alerta </script> </head> <body> <form> <input type="button" tt " value="click aqui!" onclick="displaymessage()" /> </form> <p>ao pressionar o botao a funcao sera invocada</p> </body> </html> 51 Javascript Funções - Exemplo <html> <script type="text/javascript"> function displaymessage(){ alert("hello World!"); //mostra mensagem alerta </script> </head> <body> <form> <input type="button" tt " value="click aqui!" onclick="displaymessage()" /> </form> <p>ao pressionar o botao a funcao sera invocada</p> </body> </html> 52
15 Javascript Classes e Objetos Javascript é uma linguagem orientada a objetos, porém a abordagem para definir é essencialmente diferente de linguagens como C++ e Java Um objeto em Javascript é visto como um dicionário ou seja, uma coleção de propriedades e métodos onde a chave para acesso é o nome do método ou propriedade A título de comparação um objeto seria semelhante a uma struct da linguagem C, porém é possível associar métodos nesta estrutura Desta forma não existe um sintaxe para definição de uma classe, mas sim a definição de funções e um relacionamento entre as mesmas Na linguagem não existe definição entre funções e objetos. Uma função é um objeto com o código associado ao mesmo Em Javascript a definição i de objetos envolve: Definição do Construtor Definição de Métodos Criação de objetos 53 Javascript Classes e Objetos - Construtor A definição do construtor consiste na definção de uma função, onde o nome da função equivale ao nome da classe que será definida A palavra reservada this é responsável por associar a propriedade ou método à classe É possível realizar a sobrecarga de construtores, porém isto não é realizado de forma direta como em C++ ou Java Exemplo de Construtor function person(name,lastname,age,ecolor) { this.firstname=firstname; this.lastname=lastname; this.eyecolor=ecolor; 54
16 Javascript Classes e Objetos - Métodos Um método é uma função que é associada a uma classe Para adicionar o método a uma classe a propriedade recebe o nome da função A função que define o método pode realizar o acesso às propriedades da classe utilizando a palavra reservada this É possível realizar a sobrecarga de métodos, porém isto não é realizado de forma direta como em C++ ou Java Exemplo de Método function shownamemethod(msg){ alert(msg + " + this.firstname); function person(name,lastname,age,eyecolor){ this.firstname=firstname; t t this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; this.showname=shownamemethod //associação do método 55 Javascript Classes e Objetos - Criação A linguagem oferece algumas forma para a criação de um objeto Criação de uma instancia de objeto Neste não foi definida uma classe de objetos, apenas um objeto personobj=new Object(); personobj.firstname="flavio"; personobj.lastname="silva"; document.write(personobj.firstname); //acesso a propriedade Criação literal de um objeto Neste não foi definida uma classe de objetos, apenas um objeto que no fundo é um dicionário pobj1={firstname:"flavio",lastname:"silva"; Ci Criação de um objeto a partir do construtor t var pobj2= new person("flavio","silva","green"); 56
17 Javascript Classes e Objetos - Exemplo <html> <body> <script type="text/javascript"> //defines a person constructor function shownamemethod(msg){ alert(msg+" "+this.firstname); function person(fname,lname,ecolor){ this.firstname=fname; this.lastname=lname; this.eyecolor=ecolor; this.showname=shownamemethod; var pobj= new person("flavio","silva","green"); " "Sil " " ") for (x in pobj){ document.write(pobj[x] + " "); pobj.showname("name:"); </script> </body> </html> 57 JavaScript Arrays Criação Um array pode ser criado de três formas Construtor new var mycars=new Array(); // criacao mycars[0]="saab"; // atribuicao mycars[1]="volvo"; mycars[2]="bmw"; Construtor new com parâmetros var mycars=new Array("Saab","Volvo","BMW"); Declaração Literal var mycars=["saab","volvo","bmw"] Acesso var element = arrayvarname[arrayindex]; Modificação arrayvarname[arrayindex] = newvalue; 58
![showname=shownamemethod; var pobj= new person("flavio","silva","green"); " "Sil " " ") for (x in pobj){ document.write(pobj[x] + " "); pobj.](/docs-images/45/1442958/images/page_17.jpg "showname(\"name:\"); </script> </body> </html> 57 JavaScript Arrays Criação Um array pode ser criado de três formas Construtor new var mycars=new Array(); // criacao mycars[0]=\"saab\"; // atribuicao")
18 JavaScript Estrutura de Seleção (if-else) O comando if-else possui a seguinte sintaxe if (condicao) { //codigo executado se condicao é true else { //codigo executado se condicao é false 59 JavaScript Estrutura de Seleção (if-else) <html> <body> <script type="text/javascript"> var d = new Date(); ti d th () var time = d.gethours(); if (time < 10) { document.write("<b>good morning</b>"); else { document.write("<b>good afternoon</b>"); </script> <p>demonstracao do comando if-else.</p> </body> </html> 60
19 JavaScript Estrutura de Seleção (switch) O comando switch possui a seguinte abaixo e permite a escolhe de um entre vários blocos de código O valor de n é comparado com o valor contido em cada case e caso sejam iguais o bloco é executado. switch(n){ case 1: //executa bloco 1 break; case 2: //executa bloco 2 break; default: //codigo executado independente do valor de n 61 JavaScript Estrutura de Controle(while) While while (condicao) { //código excutado Exemplo var i=0; while (i<=5) { document.write("valor: " + i); document.write("<br />"); i++; 62
20 JavaScript Estrutura de Controle(do-while) do-while do { //bloco executado while (condicao); Exemplo var i=0; do { document.write(" valor:" + i); document.write( write("<br />"); i++; while (i<=5); 63 JavaScript Estrutura de Controle(for) for for (countinit;countcomparacao;contincremento) { //bloco executado ; Exemplo var i=0; for (i=0;i<=5;i++){ document.write(" valor: " + i); document.write("<br />"); 64
21 JavaScript Estrutura de Controle(for..in) Este método interage sobre as propriedades de um objeto ou de um array for (variavel in object) { code to be executed Exemplo <html> <body> <script type="text/javascript"> var person={fname:"john",lname:"doe",age:25; for (x in person){ document.write(person[x] + " "); </script> </body> </html 65 JavaScript Estruturas de Controle (break e continue) Em todas as estruturas de controle é possível utilizar os comandos: break e continue break Finaliza a execução do laço independente da condição Continue Encerra a execução de um laço e continua no próximo passo for 66
22 Javascript Exemplos - Eventos <html> <script type="text/javascript"> function displaydate(){ document.getelementbyid("demo").innerhtml=date(); </script> </head> <body> <h1>my First Web Page</h1> <p id="demo">this ">Thi is a paragraph.</p> <button type="button" onclick="displaydate()">display Date</button> </body> </html> 67 Javascript Exemplos - Validação <html> <script type="text/javascript"> function validateform(){ d t f [" F "][" il"] l var x=document.forms["myform"][" "].value var atpos=x.indexof("@"); var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) { alert("not a valid address"); return false; </script> </head> <body> <form name="myform" action="x" onsubmit="return validateform();" method="post"> <input type="text" name=" "> <input type="submit" value="submit"> </form> </body> </html> 68
23 Javascript Exemplos Objetos <html> <body> <script type="text/javascript"> //defines a person constructor f ti (f l l ){ function person(fname,lname,ecolor){ this.firstname=fname; this.lastname=lname; this.eyecolor=ecolor; //constructs a new object pobj var pobj= new person("flavio","silva","green"); for (x in pobj){ document.write(pobj[x] + " "); </script> </body> </html> 69
Prof Evandro Manara Miletto. parte 2
Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite
Tecnologias para Web Design
Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo
Programação para Internet Flávio de Oliveira Silva, M.Sc.
INTERNET Grande conjunto de redes de computadores interligadas pelo mundo. Começou como uma rede interligando Universidades no E.U.A A partir de 1993 a Internet começou a ser explorada comercialmente.
O que é o JavaScript?
JavaScript Introdução O JavaScript é utilizado por milhões de páginas na web para melhorar o design, validar forms, e muito mais O JavaScript foi inicialmente desenvolvido pela Netscape e é a linguagem
Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.
Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças
Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!
Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder
7. Cascading Style Sheets (CSS)
7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma
JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com
JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir
Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete)
Desenvolvimento de Sistemas Web Prof. Leandro Roberto Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) JavaScript Eventos Alguns eventos de uma página HTML podem ser interceptados e programados
Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004
DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:
O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.
1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente
Primeiro contato com JavaScript
Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos
css Cascading Style Sheets CSS CASCADING STYLE SHEETS
css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação
Programação para Internet
flavio@facom.ufu.br 1 Objetivos Fornecer uma visão geral do funcionamento de sistemas na Web e os protocolos envolvidos Introduzir o paradigma da programação para a Internet Conceituar as arquiteturas
Tecnologias para apresentação de dados - Java Script. Aécio Costa
Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
HTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
Programação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua
O que é o Javascript?
O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades
JavaScript (Funções, Eventos e Manipulação de Formulários)
Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1 SUMÁRIO Criar sites dinâmicos em PHP --------------------------------------------------------
Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP
AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS 2012-2015 PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO MÓDULO 2 Mecanismos de Controlo de
TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD
TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.
HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS
APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras
Instituto Federal do Sertão-PE. Curso de PHP. Professor: Felipe Correia
Instituto Federal do Sertão-PE Curso de PHP Professor: Felipe Correia Conteúdo Parte I Parte II Introdução Funções de strings Instalação Constantes Sintaxe Operadores Variáveis if else elseif Echo/Print
PHP. Hypertext Pre-Processor
PHP Hypertext Pre-Processor O que é o PHP? Uma linguagem de scripting é uma linguagem cujo código não tem de ser compilado para ser executado! O código escrito é interpretado em tempo de execução para
Scriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata
Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.
Informática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1
Informática I Aula 6 http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
Introdução ao Javascript
Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação
Algoritmos em Javascript
Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays
Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br
Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor
2 echo "PHP e outros.";
PHP (Hypertext Preprocessor) Antes de qualquer coisa, precisamos entender o que é o PHP: O PHP(Hypertext Preprocessor) é uma linguagem interpretada gratuita, usada originalmente apenas para o desenvolvimento
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
Para testar seu primeiro código utilizando PHP, abra um editor de texto (bloco de notas no Windows) e digite o código abaixo:
Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade
Programando em PHP. Conceitos Básicos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web
Programação WEB I Estruturas de controle e repetição
Programação WEB I Estruturas de controle e repetição Operadores de Incremento Operadores de incremento servem como expressões de atalho para realizar incrementos em variáveis Operadores de Incremento Vamos
1-03/11/03 INTRODUÇÃO
1-03/11/03 INTRODUÇÃO JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto,
CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata
CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,
Introdução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Introdução às Folhas de Estilo
Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de
Programação para web JavaScript
Programação para web JavaScript Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 4 de maio 2016
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
Laboratório 4 Validação do Formulário
Laboratório 4 Validação do Formulário Introdução Agora que já definimos os nossos documentos usando xhtml e já os embelezámos através da utilização das CSS, está na hora de validar a informação que o utilizador
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Programação Web com PHP. Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web
Programação Web com PHP Prof. Wylliams Barbosa Santos wylliamss@gmail.com Optativa IV Projetos de Sistemas Web Agenda O que é PHP? O que da pra fazer com PHP? Como a web funciona? Onde, quando e por que
LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON
COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual
Roteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
JavaScript 2.0X 1.0 3.0X 1.1 4.0 4.05 1.2 4.06 4.61 1.3 5.0 1.4 6.0 1.5
JavaScript Diego R. Frank, Leonardo Seibt FIT Faculdades de Informática de Taquara Fundação Educacional Encosta Inferior do Nordeste Av. Oscar Martins Rangel, 4500 Taquara RS Brasil difrank@terra.com.br,
Criando um script simples
Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa
Programação WEB I DOM (Document Object Manager)
Programação WEB I DOM (Document Object Manager) DOM Significa Modelo de Objetos de Documentos e tem por finalidade descrever e padronizar os objetos e seus relacionamentos em uma aplicação. Tem a finalidade
Introdução ao Javascript. Parte 2 Prof. Victor Hugo Lopes
Introdução ao Javascript Parte 2 Prof. Victor Hugo Lopes agenda Estruturas de comandos Modularização A primeira estrutura de comando da linguagem é baseada na noção da estrutura sequencial, no estilo top-down:
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
CAPITULO 5 COMANDO DE FLUXO IF
CAPITULO 5 COMANDO DE FLUXO IF Sempre que for necessária a tomada de decisão dentro de um programa, você terá que utilizar um comando condicional, pois é por meio dele que o PHP decidirá que lógica deverá
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
Java Script Pág: 1. Índice
Java Script Pág: 1 Índice Índice... 1 Introdução ao JavaScript Básico... 2 Configurações... 2 Usando o Java Script.... 2 Comandos: script language - alert - /script... 3 Variáveis... 4 Regras para criar
DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral
Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto
JavaScript. Programação de Servidores. Marx Gomes Van der Linden
JavaScript Programação de Servidores Marx Gomes Van der Linden JavaScript É uma linguagem de programação interpretada pelo navegador Programação para web no cliente. Padronizada pela W3C e suportada por
Aplicativos para Internet Aula 01
Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx
Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15
APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos
WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
Introdução a Javascript
Introdução a Javascript André Tavares da Silva andre.silva@udesc.br Introdução Javascript Javascript é uma linguagem que permite injetar lógica em páginas escritas em HTML Podem estar "soltos" ou atrelados
APOSTILA PHP PARTE 1
APOSTILA PHP PARTE 1 1. Introdução O que é PHP? PHP significa: PHP Hypertext Preprocessor. Realmente, o produto foi originalmente chamado de Personal Home Page Tools ; mas como se expandiu em escopo, um
Tecnologias para apresentação de dados - HTML. Aécio Costa
Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir
Roteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
Web Design Aula 13: Introdução a CSS
Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas
Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1
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
3 Classes e instanciação de objectos (em Java)
3 Classes e instanciação de objectos (em Java) Suponhamos que queremos criar uma classe que especifique a estrutura e o comportamento de objectos do tipo Contador. As instâncias da classe Contador devem
Desenvolvimento de Aplicações para Internet Aula 11
Desenvolvimento de Aplicações para Internet Aula 11 Celso Olivete Júnior olivete@fct.unesp.br www.fct.unesp.br/docentes/dmec/olivete jquery Na aula passada: Selecionando atributos Manipulando CSS Inserindo
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores
Exercícios Práticos de HTML e JavaScript. <FORM ACTION="mailto:teste@gmail.com" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">
Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript
Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br)
Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup
OPERADORES E ESTRUTURAS DE CONTROLE
OPERADORES E ESTRUTURAS DE CONTROLE 3.1 Operadores Os operadores indicam o tipo de operação matemática que será executada gerando novos valores a partir de um ou mais operadores. São muito utilizados em
Linguagem de Programação. Introdução ao PHP. Prof Mauricio Lederer Ciência da Computação - UNIANDRADE 1
Linguagem de Programação Introdução ao PHP 1 O que é PHP? - significa: Hypertext Preprocessor - uma das linguagens mais utilizadas para web - transforma sites estáticos em dinâmicos - atualização de páginas
Introdução à Tecnologia Web
Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.
COMO FUNCIONA UM FORMULÁRIO
FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,
Aula 1. // exemplo1.cpp /* Incluímos a biblioteca C++ padrão de entrada e saída */ #include <iostream>
Aula 1 C é uma linguagem de programação estruturada desenvolvida por Dennis Ritchie nos laboratórios Bell entre 1969 e 1972; Algumas características: É case-sensitive, ou seja, o compilador difere letras
Programação para Internet I
Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
Conteúdo Programático de PHP
Conteúdo Programático de PHP 1 Por que PHP? No mercado atual existem diversas tecnologias especializadas na integração de banco de dados com a WEB, sendo o PHP a linguagem que mais se desenvolve, tendo
Altere a cor de fundo Altere a cor do texto Utilize meta tags e direcione a página para um site qualquer
Exercício A11 - Digite o código abaixo e salve-o como ex1.htm. Documento com fundo azul!! Página com fundo e texto coloridos!
Web Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
JAVASCRIPT. Prof. Fellipe Aleixo (fellipe.aleixo@ifrn.edu.br)
JAVASCRIPT Prof. Fellipe Aleixo (fellipe.aleixo@ifrn.edu.br) JAVASCRIPT É a linguagem de script da Web Adicionam funcionalidades às páginas HTML Validação de entrada Comunicação com servidores Web Entre
Programação WEB II. Introdução. Variáveis, Constantes, Operadores, Estruturas de Seleção e Repetição Arrays e Vetores. Thiago Miranda dos Santos Souza
Introdução Variáveis, Constantes, Operadores, Estruturas de Seleção e Repetição Arrays e Vetores Apresentação Thiago Miranda Email: mirandathiago@gmail.com Site: www.thiagomiranda.net Ementa da Disciplina
Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme
Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML
Introdução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
INTRODUÇÃO À LINGUAGEM C++
INTRODUÇÃO À LINGUAGEM C++ 1 - VARIÁVEIS Variáveis espaço de memória reservado para armazenar tipos de dados, com um nome para referenciar seu conteúdo. Observações importantes Todas as variáveis devem
Documentação Usando o Javadoc
Documentação Usando o Javadoc Prof. MSc. João Carlos Pinheiro jcpinheiro@cefet-ma.br Versão 2.1 Última Atualização: 04/2005 1 Comentários e Documentação Comentários em Java Existem três tipos de comentários
Programação WEB. Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br docente.ifrn.edu.br/andrealmeida. Aula III Introdução PHP
Programação WEB Prof. André Gustavo Duarte de Almeida andre.almeida@ifrn.edu.br docente.ifrn.edu.br/andrealmeida Aula III Introdução PHP Introdução PHP PHP=Hypertext Pre-Processor Linguagem de script open
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
HTML Básico Formulários. Matheus Meira
HTML Básico Formulários Matheus Meira 1 Objetivos Neste apresentação conheceremos os fundamentos básicos de HTML para a manipulação com servlets e jsp. Serão vistos Formulários Links Elementos de disparo