173
Linguagem Técnica de Programação III Introdução à Web Thiago Leite [email protected] 1 segunda-feira, 8 de abril de 13

1 - Introdução a Web

Embed Size (px)

DESCRIPTION

Texto

Citation preview

  • Linguagem Tcnica de Programao III

    Introduo WebThiago Leite

    [email protected]

    1segunda-feira, 8 de abril de 13

  • Bibliografia

    DAVIS, Michele E.; PHILLIPS, Jon A. 1973-. Aprendendo PHP & MySQL. Rio de Janeiro: Alta Books, 2008.

    2segunda-feira, 8 de abril de 13

  • Bibliografia

    DALLOGLIO, Pablo. PHP: programando com orientao a objetos. So Paulo: Novatec Editora, 2007.

    3segunda-feira, 8 de abril de 13

  • Bibliografia

    NIXON, Robin. Learning PHP, MySQL, JavaScript, and CSS: A Step-by-Step Guide to Creating Dynamic Websites. California: O'Reilly Media Inc, 2012.

    4segunda-feira, 8 de abril de 13

  • Ementa

    1. Introduo a Web

    2. Introduo a PHP

    3. Orientao a objetos

    4. Manipulao de Dados

    5segunda-feira, 8 de abril de 13

  • Avaliao

    Primeiro bimestre Trabalhos em grupo (5 pontos) Grupo de 3 alunos Online no Blackboard

    Avaliao bimestral (5 pontos)

    6segunda-feira, 8 de abril de 13

  • Avaliao

    Segundo bimestre Projeto (5 pontos) Grupo de 3 alunos Online no Blackboard

    Avaliao bimestral (5 pontos)

    7segunda-feira, 8 de abril de 13

  • Avaliao

    No h arredondamento de notas

    8segunda-feira, 8 de abril de 13

  • Presena em Sala de Aula

    Limite de 20 faltas 2 faltas por dia de aula Presena do aluno ser cobrada

    9segunda-feira, 8 de abril de 13

  • Estilo das Provas Bimestrais

    (FUMARC) Assinale a opo que corresponde sintaxe correta de um programa desenvolvido na linguagem PHP.

    a)

    b)

    c)

    d)

    10segunda-feira, 8 de abril de 13

  • Estilo das Provas Bimestrais

    (FUMARC) Assinale a opo que corresponde sintaxe correta de um programa desenvolvido na linguagem PHP.

    a)

    b)

    c)

    d)

    10segunda-feira, 8 de abril de 13

  • Instituto de Tecnologia de Massachusetts

    Acesso a todo o material da universidade MitOpenCourseWare http://ocw.mit.edu

    Acesso a parte do contedo em portugus Parceria entre MIT e Universia http://mit.universia.com.br

    11segunda-feira, 8 de abril de 13

  • Cursos Stanford University

    Cursos online gratuitos Livre para qualquer pessoa se inscrever Entrega de certificado da Universidade de

    Stanford

    12segunda-feira, 8 de abril de 13

  • Cursos Piazza

    Cursos online gratuitos pela plataforma Piazza

    https://piazza.com/itunesu disponvel em plataforma Web e Mobile

    13segunda-feira, 8 de abril de 13

  • Cursos de Extenso

    Curso Preparatrio para Certificao Linux LPIC-1

    Fundamentos, Configurao e Instalao de Ativos de Rede Cisco

    http://migre.me/dmGQh

    14segunda-feira, 8 de abril de 13

  • Introduo Web Tim Berners-Lee

    inventor do WWW (World Wide Web)

    props sistema de gerncia de informaes em 1989

    diretor da W3C (World Wide Web Consortium)

    15segunda-feira, 8 de abril de 13

  • O que WWW?16segunda-feira, 8 de abril de 13

  • 16segunda-feira, 8 de abril de 13

  • Introduo Web

    HTTP (Hyper Text Transfer Protocol) Framework para navegar entre contedo Linguagem de marcao HTML Primeiro navegador e servidor Web

    17segunda-feira, 8 de abril de 13

  • Introduo Web

    HTML (Hyper Text Markup Language) utilizado para criar as pginas Web, incluindo texto e comandos de marcao

    18segunda-feira, 8 de abril de 13

  • Introduo Web

    HTTP um protocolo baseado no modelo cliente/servidor

    um servidor pode gerir mltiplas diferentes conexes

    todas as respostas so enviadas com garantia de entrega

    19segunda-feira, 8 de abril de 13

  • Modelo Cliente/Servidor20segunda-feira, 8 de abril de 13

  • Modelo Cliente/Servidor21segunda-feira, 8 de abril de 13

  • Introduo Web

    Componentes para pginas Web estticas Navegador Web (ex: Firefox, Internet

    Explorer, Chrome, Safari)

    Servios de traduo de nomes (ex: DNS - Domain Name Service)

    Servidor Web (ex: Microsoft IIS, Apache)

    22segunda-feira, 8 de abril de 13

  • Acesso Web Esttico23segunda-feira, 8 de abril de 13

  • Introduo Web

    Componentes para pginas dinmicas Web Linguagem de script servidor (ex: PHP,

    ASP, Perl, Python)

    Banco de Dados (ex: MySQL, Microsoft SQL Server, Oracle)

    Linguagem de script cliente (ex: JavaScript, VBScript)

    24segunda-feira, 8 de abril de 13

  • Acesso Web Dinmico25segunda-feira, 8 de abril de 13

  • Introduo Web

    Apache muito alm de simplesmente de troca de

    arquivos solicitados

    serve arquivos HTML, imagens, Flash, udio, RSS (Really Simple Sindication)...

    servir arquivos dinmicos criados por linguagens como PHP

    suporte modularizado a outras atividades

    26segunda-feira, 8 de abril de 13

  • Introduo Web

    PHP (PHP: Hypertext Preprocessor) linguagem para gerar arquivos dinmicos acesso irrestrito ao servidor web interpretar contedo em arquivos .php analisa contedo entre os smbolos

    27segunda-feira, 8 de abril de 13

  • Introduo Web MySQL

    banco para armazenamento de dados meio de armazenamento mais eficiente que

    arquivos

    banco de dados relacional bases de dados tabelas campos

    28segunda-feira, 8 de abril de 13

  • Introduo Web

    JavaScript linguagem de script para manipular

    HTML

    dinamicamente realizar operaes no cliente

    muito utilizado para validao de campos em formulrios

    29segunda-feira, 8 de abril de 13

  • O que Software Livre?30segunda-feira, 8 de abril de 13

  • 30segunda-feira, 8 de abril de 13

  • Introduo Web

    WAMP, MAMP e LAMP

    Windows, Apache, MySQL e PHP

    Mac, Apache, MySQL e PHP

    Linux, Apache, MySQL e PHP

    31segunda-feira, 8 de abril de 13

  • Introduo Web

    HTML uma linguagem de descrio de pginas web

    baseada em tags tags descrevem um documento documentos HTML contm tags em

    texto puro

    32segunda-feira, 8 de abril de 13

  • Introduo Web

    Tags HTML so formadas com os smbolos < e > ( ex:

    normalmente vem em pares ex:

    o primeiro par abre a tag e o segundo fecha

    33segunda-feira, 8 de abril de 13

  • Introduo Web

    Elementos HTML tudo entre duas tags ex: Isso um pargrafo.

    incio da tag elemento fim da tag

    Isso um pargrafo

    Isso um link

    34segunda-feira, 8 de abril de 13

  • Introduo Web

    Atributos HTML alguns elementos HTML possuem

    atributos

    Paragrafo com classe

    35segunda-feira, 8 de abril de 13

  • Estrutura bsica de uma pgina HTML

    36segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de cdigo HTML

    Meu primeiro ttulo

    Meu primeiro pargrafo.

    37segunda-feira, 8 de abril de 13

  • Cdigo HTML Interpretado

    38segunda-feira, 8 de abril de 13

  • Tabela de Codificao HTML utilizando entities

    " "

    < >

    & &

    39segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de cdigo HTML utilizando entities

    Meu primeiro ttulo

    Meu primeiro pargrafo.

    40segunda-feira, 8 de abril de 13

  • HTML interpretado com entities

    41segunda-feira, 8 de abril de 13

  • Verses do HTML

    verso anoHTML 1991

    HTML+ 1993

    HTML 2.0 1995

    HTML 3.2 1997

    HTML 4.01 1999

    XHTML 1.0 2000

    HTML5 2012

    XHTML5 2013

    42segunda-feira, 8 de abril de 13

  • Introduo Web

    A declarao auxilia o navegador a exibir corretamente

    uma pgina web

    indica a verso e tipo de HTML utilizado

    43segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de declarao para HTML5

    Exemplo de declarao para HTML 4.01

    Lista completa de declaraes em http://www.w3schools.com/tags/tag_doctype.asp

    44segunda-feira, 8 de abril de 13

  • Introduo Web

    Ttulos em HTML so definidos de a

    Isto eh um ttulo

    Isto eh um ttulo

    Isto eh um ttulo

    45segunda-feira, 8 de abril de 13

  • Introduo Web

    Links HTML so definidos com a tag podem possuir o atributo target

    Isto um link

    46segunda-feira, 8 de abril de 13

  • Introduo Web

    Imagens HTML so definidos com a tag

    47segunda-feira, 8 de abril de 13

  • Introduo Web

    Comentrios em HTML so definidos com a tag

    48segunda-feira, 8 de abril de 13

  • Introduo Web

    Linhas horizontais em HTML so definidos com a tag

    49segunda-feira, 8 de abril de 13

  • Introduo Web

    Quebras de linhas em HTML so definidos com a tag

    50segunda-feira, 8 de abril de 13

  • Introduo Web

    Texto em negrito com HTML so definidos com a tag Texto em negrito

    51segunda-feira, 8 de abril de 13

  • Introduo Web

    Texto em itlico com HTML so definidos com a tag Texto em italico

    52segunda-feira, 8 de abril de 13

  • Exerccio

    Faa uma pgina web contendo seu currculo

    53segunda-feira, 8 de abril de 13

  • Introduo Web

    Tabelas em HTML as linhas so definidas pelas tags

    (table row)

    cada linha so dividas em clulas com as tags (table data)

    o cabealho definido pelas tags (table header)

    54segunda-feira, 8 de abril de 13

  • Exemplo Tabela HTML

    Cabealho 1

    Cabealho 2

    linha 1, clula 1linha 1, clula 2

    linha 2, clula 1

    linha 2, clula 2

    55segunda-feira, 8 de abril de 13

  • Introduo Web

    Listas em HTML listas numeradas definidas pelas tags

    (ordered list)

    listas no numeradas definidas pelas tags (unordered list)

    listas de definies utilizam tags (definition list)

    56segunda-feira, 8 de abril de 13

  • Introduo Web

    Lista numerada em HTML

    Caf

    Leite

    57segunda-feira, 8 de abril de 13

  • Introduo Web

    Lista no numerada em HTML

    Caf

    Leite

    58segunda-feira, 8 de abril de 13

  • Introduo Web

    Lista de definies em HTML

    Caf

    Bebida quente e preta

    Leite

    Bebida fria e branca

    59segunda-feira, 8 de abril de 13

  • Introduo Web

    Formulrios so definidos pelas tags e so utilizados para passar dados dos clientes para o servidor

    tags so elementos de entrada de dados

    ex: campo, checkbox, password, boto radio button, boto de submisso e mais

    60segunda-feira, 8 de abril de 13

  • Tipos de Campos para Formulrios

    61segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de formulrio com campos text

    Primeiro nome:

    Sobrenome:

    62segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de formulrio com campos password

    Password:

    63segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de formulrio com campos radio atributo name define o grupo

    Masculino

    Feminino

    64segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de formulrio com campos checkbox atributo name define o grupo

    Eu tenho bicicleta

    Eu tenho carro

    65segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de formulrio com boto de submisso

    atributo action define destino para os dados do formulrio

    atributo method define o mtodo de envio dos dados

    Usurio:

    66segunda-feira, 8 de abril de 13

  • Tags para Formulrios

    Tag Descrio

    Define um formulrio

    Define um campo de entrada

    Define um campo com vrias linhas

    Define um rtulo para um campo

    Define um grupo de campos relacionados

    Define uma legenda para o grupo de campos

    Define uma lista drop-down

    Define um grupo de opes na lista drop-down

    Define uma opo na lista drop-down

    Define um boto

    Define uma lista de dados para um campo

    67segunda-feira, 8 de abril de 13

  • Introduo Web

    Informaes adicionais sobre uma pgina so definidos pela tag

    tag define ttulo da pgina tag define endereo da pgina tag define relao com objetos externos tag define estilos (ex: CSS, JSSS -

    JavaScript Style Sheets)

    tag define um script cliente

    68segunda-feira, 8 de abril de 13

  • Introduo Web Tag define termos para auxiliar a procura da pgina

    Define palavras-chave para o documento

    Define uma descrio ao contedo do documento

    Define autor

    Define tempo de atualizao da pgina

    69segunda-feira, 8 de abril de 13

  • Introduo Web Tag

    define estilos CSS (Cascading Style Sheets) para um documento HTML a partir da verso 4

    linguagem semntica para manipulao HTML define regras visuais para os elementos exibidos

    nos clientes

    pode ocorrer no escopo da tag (interno) ou em qualquer outro ponto do documento (inline)

    70segunda-feira, 8 de abril de 13

  • Introduo Web Tag

    define um script de cliente, como JavaScript comum para validao de formulrios e mudana

    dinmica de contedo

    quando o script for JavaScript, no necessrio especificar o tipo atravs do atributo type

    pode definir scripts externos por meio do atributo src

    71segunda-feira, 8 de abril de 13

  • Introduo Web JavaScript

    Expresses JavaScript so comandos dados aos navegadores fazerem algo

    O uso de ponto e vrgula ao final das linhas facultativo Cdigos JavaScript podem ser agrupados em blocos de cdigos,

    como funes

    JavaScript case sensitive JavaScript ignora espaos extras em algumas expresses As linhas podem ser quebradas utilizando o caractere \ quando

    em um contexto de aspas

    As variveis so fracamente tipadas

    72segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de script em JavaScript

    document.write("Ol Mundo!")

    73segunda-feira, 8 de abril de 13

  • Introduo Web Tag

    alguns navegadores podem no suportar scripts no lado do cliente

    retorna feedback ao cliente

    document.write("Ol Mundo!")

    Desculpe, seu navegador no suporta JavaScript!

    74segunda-feira, 8 de abril de 13

  • Introduo Web

    Comentrios em JavaScript// Escreva o titulodocument.getElementById("meuTitulo").innerHTML="Bem-vindo!";

    /* Escreva um

    pargrafo */

    document.getElementById("meuParagrafo").innerHTML="Isto um pargrafo.";

    75segunda-feira, 8 de abril de 13

  • Introduo Web

    JavaScript pode reagir a eventos pode escrever diretamente no

    documento HTML

    pode manipular estilo do documento

    76segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de reao a eventos em JavaScript

    Meu primeiro JavaScript

    Clique aqui!

    77segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de escrita diretamente no documento HTML

    Meu segundo JavaScript

    JavaScript pode modificar o HTML.

    function minhaFuncao() {

    x=document.getElementById("demo") // Procura pelo Elemento

    x.innerHTML = "Oi! Modifiquei!"; // Modifica o HTML

    }

    Clique-me!

    78segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de manipulao de estilos por JavaScript

    Meu terceiro JavaScript

    JavaScript pode modificar os estilos.

    function minhaFuncao() {

    x=document.getElementById("demo") // Procura pelo Elemento

    x.style.color="#ff0000"; // Modifica o estilo

    }

    Clique-me!

    79segunda-feira, 8 de abril de 13

  • Exerccio

    Desenvolva um formulrio para contato onde os dados sejam enviados por e-mail atravs do cliente de e-mail local

    80segunda-feira, 8 de abril de 13

  • Exerccio Exemplo de resoluo do exerccio

    Nome:

    Sobrenome:

    E-mail:

    Comentrio:

    81segunda-feira, 8 de abril de 13

  • Introduo Web

    Funo alert() em JavaScriptClique!

    82segunda-feira, 8 de abril de 13

  • Introduo Web

    Quando um documento web carregado o navegador cria um Document Object Model (DOM)

    JavaScript procura os elementos baseados no DOM

    83segunda-feira, 8 de abril de 13

  • rvore DOM84segunda-feira, 8 de abril de 13

  • Introduo Web

    Navegando na estrutura DOMdocument.head.innerHTML = "Titulo"

    document.body.innerHTML = "Paragrafo"

    85segunda-feira, 8 de abril de 13

  • Introduo Web

    Navegando na estrutura DOM

    Ol Mundo!

    x=document.getElementById("intro");

    document.write(x.firstChild.nodeValue);

    86segunda-feira, 8 de abril de 13

  • Introduo Web

    Os elementos HTML podem ser manipulados atravs de

    ID Tag Nome da classe

    87segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de JavaScript manipulando por Tagvar x=document.getElementsByTagName("td")

    alert(x.length);

    88segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de JavaScript manipulando por nome

    var x=document.getElementsByName("x");

    alert(x.length);

    89segunda-feira, 8 de abril de 13

  • Introduo Web

    Variveis em JavaScript texto nmero no definidas booleanas arrays objetos

    90segunda-feira, 8 de abril de 13

  • Introduo Web

    Variveis em JavaScriptvar carro = new String;

    var num = new Number;

    var undef;

    var bool = new Boolean;

    var array = new Array;

    var obj = new Object;

    91segunda-feira, 8 de abril de 13

  • Introduo Web Variveis em JavaScript

    var x=5, y=6;

    var z=x+y;

    document.write(x + "");

    document.write(y + "");

    document.write(z + "");

    92segunda-feira, 8 de abril de 13

  • Introduo Web

    Variveis globais em JavaScript variveis que podem ser acessadas de

    qualquer trecho do cdigo a partir do momento que essas so declaradas

    variavel=Texto;

    93segunda-feira, 8 de abril de 13

  • Introduo Web Arrays numricos em JavaScript

    var carros = new Array();

    carros[0] = "Saab";

    carros[1] = "Volvo";

    carros[2] = "BMW";

    document.write(carros[0] + )

    document.write(carros[1] + )

    document.write(carros[2] + )

    94segunda-feira, 8 de abril de 13

  • Introduo Web Arrays associativos em JavaScript

    var itens = new Array();

    itens['foo'] = 123456;

    itens['bar'] = 789012;

    itens['baz'] = 345678;

    document.write(itens['foo'] + '')

    document.write(itens['bar'] + '')

    document.write(itens['baz'] + '')

    95segunda-feira, 8 de abril de 13

  • Introduo Web

    Arrays multidimensionais em JavaScript

    var floricultura = new Array();

    floricultura['rosas'] = new Array( "5.00", "7 itens", "vermelha" );

    floricultura['orquideas'] = new Array( "2.00", "1 item", "branca" );

    96segunda-feira, 8 de abril de 13

  • Introduo Web Formas de criao de arrays em JavaScript

    normalvar myCars=new Array();

    myCars[0]="Saab";

    myCars[1]="Volvo";

    condensadavar myCars=new Array("Saab","Volvo");

    literalvar myCars=["Saab","Volvo"];

    97segunda-feira, 8 de abril de 13

  • Operadores Relacionais em JavaScript

    Operador Descrio Comparao Retorno

    == igual ax==8 false

    == igual ax==5 true

    === exatamente igual (valor e tipo)

    x==="5" false===

    exatamente igual (valor e tipo) x===5 true

    != no igual x!=8 true

    !==no exatamente igual (valor e tipo)

    x!=="5" true!==

    no exatamente igual (valor e tipo) x!==5 false

    > maior que x>8 false

    < menor que x= maior ou igual que x>=8 false

  • Operadores Lgicos em JavaScript

    Operador Descrio Exemplo

    && and (x < 10 && y > 1) is true

    || or (x==5 || y==5) is false

    ! not !(x==y) is true

    99segunda-feira, 8 de abril de 13

  • Introduo a PHP

    Estruturas de controle em JavaScript

    if switch while for

    for/in break continue

    100segunda-feira, 8 de abril de 13

  • if101segunda-feira, 8 de abril de 13

  • Introduo Web

    Estrutura if em JavaScriptif (time

  • Introduo Web

    Estrutura if..else em JavaScriptif (time

  • Introduo Web Estrutura if..else if..else em JavaScript

    if (time

  • switch105segunda-feira, 8 de abril de 13

  • Introduo Web Estrutura switch em JavaScript

    var day=new Date().getDay();

    switch (day) {

    case 0: x="Hoje domingo"; break;

    case 1: x="Hoje segunda-feira"; break;

    case 2: x="Hoje tera-feira"; break;

    case 3: x="Hoje quarta-feira"; break;

    case 4: x="Hoje quinta-feira"; break;

    case 5: x="Hoje sexta-feira"; break;

    case 6: x="Hoje sbado"; break;

    default: x="Dia desconhecido";

    }

    106segunda-feira, 8 de abril de 13

  • Introduo Web

    Uso do break com iffor (i=0;i

  • Introduo Web

    Uso do continue com iffor (i=0;i

  • Introduo Web

    Estrutura do forfor (expr1; expr2; expr3) {

    // cdigo a ser executado

    }

    109segunda-feira, 8 de abril de 13

  • for

    Parmetros Descrio

    expr1 Valor inicial da varivel contadora (opcional)

    expr2 Condio de execuo

    expr3 Valor a ser incrementado a cada execuo (opcional)

    110segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de forcarros=["BMW","Volvo","Saab","Ford"];

    for (var i=0, len=carros.length; i

  • Introduo Web

    Exemplo de for/invar txt

    var pessoa={nome:"John",sobrenome:"Doe",idade:25};

    for (x in pessoa) {

    txt=txt + pessoa[x];

    }

    112segunda-feira, 8 de abril de 13

  • while113segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de whilewhile (i

  • Introduo Web

    Exemplo de do/whiledo {

    x=x+"O nmero "+i+"";

    i++;

    } while (i

  • Introduo Web

    Criando objetos em JavaScriptpessoa=new Object();

    pessoa.nome="John";

    pessoa.sobrenome="Doe";

    pessoa.idade=50;

    pessoa.olhos="azul";

    116segunda-feira, 8 de abril de 13

  • Introduo Web

    Acessando propriedades dos objetosnomeDoObjeto.nomeDaPropriedade

    117segunda-feira, 8 de abril de 13

  • Introduo Web

    Exemplo de acesso a propriedade de um objeto

    var mensagem = Ol mundo!;

    var x=mensagem.length;

    118segunda-feira, 8 de abril de 13

  • Exerccio

    Criar uma tabela dinamicamente com JavaScript atravs de um valor fornecido em formulrio

    119segunda-feira, 8 de abril de 13

  • Exerccio

    Nmero de Linhas:

    Gerar

    function criarTabela(){

    var tabela = ""

    for (var i=0;i

  • Introduo Web

    Validao de formulrios com JavaScript

    Nome:

    (continua)

    121segunda-feira, 8 de abril de 13

  • Introduo Web Validao de formulrios com JavaScript

    (continuao)

    function validateForm() {

    var x=document.forms["meuFormulario"]["nome"].value;

    if (x==null || x=="") {

    alert("Nome deve ser fornecido");

    return false;

    }

    }

    122segunda-feira, 8 de abril de 13

  • Exerccio

    Faa a verificao dos campos do formulrio do exerccio anterior com JavaScript

    123segunda-feira, 8 de abril de 13

  • Introduo Web Folhas de Estilo CSS

    Cascading Style Sheets definem como mostrar elementos HTML adicionados a partir do HTML 4.0 Estilos podem ser aplicados

    inline internamente externamente

    124segunda-feira, 8 de abril de 13

  • Introduo Web

    Estilos inline aplicado a um nico elemento HTML

    Isto um pargrafo.

    125segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de uso inline da tag com cor de fundo

    aplicvel a quase todas as tags, com exceo de , , , , , , e

    Isto um ttulo

    Isto um pargrafo.

    126segunda-feira, 8 de abril de 13

  • Introduo Web Aplicar estilos internos com a tag realizando alinhamento de texto

    body {background-color:yellow;}

    p {color:blue;}

    Isto um ttulo

    Isto um pargrafo.

    127segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de uso externo de folhas de estilos com a tag

    arquivo meuestilo.css precisar conter os estilos

    Isto um ttulo

    Isto um pargrafo.

    128segunda-feira, 8 de abril de 13

  • Sintaxe CSS129segunda-feira, 8 de abril de 13

  • Introduo Web

    CSS pode aplicar estilos a seletores especficos como

    Tags IDs Classes Estado dos elementos

    130segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de estilos aplicados a tags

    body {background-color:yellow;}

    h1 {font-size:36pt;}

    /* Comentrio em CSS */

    h2 {color:blue;}

    p {margin-left:50px;}

    Ttulo tamanho 36

    Ttulo azul

    Pargrafo com margem afastada 50 pixels a esquerda

    131segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de estilo aplicado a um seletor ID

    #para1 {

    text-align:center;

    color:red;

    }

    Ol Mundo!

    Este pargrafo no ser afetado.

    132segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de estilo aplicado a um seletor classe

    .center {

    text-align:center;

    }

    Ttulo centralizado

    Pargrafo centralizado

    133segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de estilo aplicado a um seletor HTML e classe

    p.center {

    text-align:center;

    }

    Ttulo no centralizado

    Pargrafo centralizado

    134segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de estilo aplicado a um seletor HTML e seu estado

    hr {color:navy;}

    a:link {color:green;}

    a:visited {color:yellow;}

    a:hover {color:black;}

    a:active {color:blue;}

    Isto um link

    135segunda-feira, 8 de abril de 13

  • Introduo Web Exemplo de estilo aplicado a um seletor HTML e seu estado

    a.ex1:hover,a.ex1:active {color:red;}

    a.ex2:hover,a.ex2:active {font-size:150%;}

    a.ex3:hover,a.ex3:active {background:red;}

    a.ex4:hover,a.ex4:active {font-family:monospace;}

    a.ex5:visited,a.ex5:link {text-decoration:none;}

    a.ex5:hover,a.ex5:active {text-decoration:underline;}

    Muda cor

    Muda tamanho

    Muda cor de fundo

    Muda fonte

    Adiciona sublinhado

    136segunda-feira, 8 de abril de 13

  • Reviso WWW ou Web HTTP Modelo cliente/servidor Acesso web esttico Acesso web dinmico Software livre Tags Elementos Atributos Estrutura documento HTML Entities Ttulos e pargrafos

    Tabelas Formulrios JavaScript rvore DOM Manipular com JavaScript Tipos de variveis em JavaScript Operadores relacionais em JavaScript Operadores lgicos em JavaScript Estruturas de controle em JavaScript Objetos em JavaScript Validao de formulrios em

    JavaScript

    Aplicao de CSS

    137segunda-feira, 8 de abril de 13

  • TRE-BA

    (CESPE) Para a construo de pginas web, pode-se combinar a linguagem HTML com diferentes tecnologias, entre elas a CSS, que permite melhorar a apresentao do stio.

    a) Certo

    b) Errado

    138segunda-feira, 8 de abril de 13

  • TRE-BA

    (CESPE) Para a construo de pginas web, pode-se combinar a linguagem HTML com diferentes tecnologias, entre elas a CSS, que permite melhorar a apresentao do stio.

    a) Certo

    b) Errado

    138segunda-feira, 8 de abril de 13

  • Fiocruz(FGV) No que tange ao Cascading Style Sheets CSS, pode-se colocar os estilos em trs lugares: folhas de estilo, e style. Nesse sentido, analise as afirmativas abaixo.

    I. I. Uma folha de estilo um arquivo independente que pode ser anexado a um documento HTML, usando-se o elemento ou o enunciado @import de CSS.

    II. um elemento de HTML que pode ser embutido dentro do documento HTML por si s.

    III. Style um atributo que pode ser embutido dentro de qualquer elemento HTML.

    139segunda-feira, 8 de abril de 13

  • (continuao)

    a) se somente a afirmativa I estiver correta.

    b) se somente a afirmativa II estiver correta.

    c) se somente a afirmativa III estiver correta.

    d) se somente as afirmativas II e III estiverem corretas.

    e) se todas as afirmativas estiverem corretas.

    140segunda-feira, 8 de abril de 13

  • (continuao)

    a) se somente a afirmativa I estiver correta.

    b) se somente a afirmativa II estiver correta.

    c) se somente a afirmativa III estiver correta.

    d) se somente as afirmativas II e III estiverem corretas.

    e) se todas as afirmativas estiverem corretas.

    140segunda-feira, 8 de abril de 13

  • CNJ

    (CESPE) Uma maneira de criar um cdigo HTML dinmico a partir da definio de objetos JavaScript dentro da tag

    a) Certo

    b) Errado

    141segunda-feira, 8 de abril de 13

  • CNJ

    (CESPE) Uma maneira de criar um cdigo HTML dinmico a partir da definio de objetos JavaScript dentro da tag

    a) Certo

    b) Errado

    141segunda-feira, 8 de abril de 13

  • TRE-RJ

    (CESPE) HTML (hypertext markup language) uma linguagem de programao, atualmente na verso 5, muito utilizada para ambientes desktop.

    a) Certo

    b) Errado

    142segunda-feira, 8 de abril de 13

  • TRE-RJ

    (CESPE) HTML (hypertext markup language) uma linguagem de programao, atualmente na verso 5, muito utilizada para ambientes desktop.

    a) Certo

    b) Errado

    142segunda-feira, 8 de abril de 13

  • PC-ES

    (CESPE) O HTML (Hypertext Markup Language) uma linguagem usada para acessar dados na Web.

    a) Certo

    b) Errado

    143segunda-feira, 8 de abril de 13

  • PC-ES

    (CESPE) O HTML (Hypertext Markup Language) uma linguagem usada para acessar dados na Web.

    a) Certo

    b) Errado

    143segunda-feira, 8 de abril de 13

  • TRE-BA

    (CESPE) O cdigo Javascript existente em um documento HTML executado no navegador que est acessando esse documento.

    a) Certo

    b) Errado

    144segunda-feira, 8 de abril de 13

  • TRE-BA

    (CESPE) O cdigo Javascript existente em um documento HTML executado no navegador que est acessando esse documento.

    a) Certo

    b) Errado

    144segunda-feira, 8 de abril de 13

  • TRE-RJ(FGV) Assinale a alternativa que contm, na linguagem HTML, a tag que delimita a rea onde sero inseridas as informaes que sero exibidas no browser:

    a)

    b)

    c)

    d)

    e)

    145segunda-feira, 8 de abril de 13

  • TRE-RJ(FGV) Assinale a alternativa que contm, na linguagem HTML, a tag que delimita a rea onde sero inseridas as informaes que sero exibidas no browser:

    a)

    b)

    c)

    d)

    e)

    145segunda-feira, 8 de abril de 13

  • PROCON-RJ(CEPERJ) Ao construir um site para a internet, para gerar uma pgina cujo fundo corresponda figura procom.jpg, deve ser inserido um parmetro na tag . Um exemplo correto para essa sintaxe :

    a) ...

    b) ...

    c) ...

    d) ...

    e) ...

    146segunda-feira, 8 de abril de 13

  • PROCON-RJ(CEPERJ) Ao construir um site para a internet, para gerar uma pgina cujo fundo corresponda figura procom.jpg, deve ser inserido um parmetro na tag . Um exemplo correto para essa sintaxe :

    a) ...

    b) ...

    c) ...

    d) ...

    e) ...

    146segunda-feira, 8 de abril de 13

  • TRT(FCC - adaptado) Considere a pgina HTML: Cadastro // inserir algo aqui Msicas A instruo que deve ser utilizada no interior do elemento para retirar o sublinhado do link ao posicionar o ponteiro do mouse sobre ele :

    a) a:hover{text-decoration:underline}

    b) a:hover{text-decoration:none}

    c) a:hover{text-decoration:normal}

    d) a:visited{text-decoration:none}

    e) a:{text-decoration:none}

    147segunda-feira, 8 de abril de 13

  • TRT(FCC - adaptado) Considere a pgina HTML: Cadastro // inserir algo aqui Msicas A instruo que deve ser utilizada no interior do elemento para retirar o sublinhado do link ao posicionar o ponteiro do mouse sobre ele :

    a) a:hover{text-decoration:underline}

    b) a:hover{text-decoration:none}

    c) a:hover{text-decoration:normal}

    d) a:visited{text-decoration:none}

    e) a:{text-decoration:none}

    147segunda-feira, 8 de abril de 13

  • TRT(FCC) A especificao HTML 4 indica que uma tag deve ser posicionada dentro de uma tag ou e que pode aparecer em um nmero qualquer de vezes em cada uma delas. Entretanto, a posio da tag no cdigo pode influenciar no desempenho da pgina.

    Com relao ao tema, analise as asseres a seguir.

    Para garantir que a pgina esteja praticamente renderizada antes que a execuo do script tenha incio, aconselhvel colocar todas as tags ao final da pgina, imediatamente antes do fechamento da tag PORQUE toda vez que uma tag for encontrada, a pgina ter que parar e aguardar o download do cdigo (caso seja externo) e sua execuo antes que seu restante possa ser processado.

    148segunda-feira, 8 de abril de 13

  • (continuao)

    correto afirmar:

    a) As duas asseres so proposies verdadeiras, mas a segunda no a justificativa correta da primeira.

    b) A primeira assero uma proposio verdadeira, e a segunda, uma proposio falsa.

    c) A primeira assero uma proposio falsa, e a segunda, uma proposio verdadeira.

    d) As duas asseres so proposies verdadeiras, e a segunda a justificativa correta da primeira.

    e) Tanto a primeira quanto a segunda assero so proposies falsas.

    149segunda-feira, 8 de abril de 13

  • (continuao)

    correto afirmar:

    a) As duas asseres so proposies verdadeiras, mas a segunda no a justificativa correta da primeira.

    b) A primeira assero uma proposio verdadeira, e a segunda, uma proposio falsa.

    c) A primeira assero uma proposio falsa, e a segunda, uma proposio verdadeira.

    d) As duas asseres so proposies verdadeiras, e a segunda a justificativa correta da primeira.

    e) Tanto a primeira quanto a segunda assero so proposies falsas.

    149segunda-feira, 8 de abril de 13

  • Secretaria de Estado do Desenvolvimento Econmico

    Sustentvel - SC(CONSULPLAN) Qual TAG usamos no HTML para definir uma opo em uma drop-down list?

    a)

    b)

    c)

    d)

    e)

    150segunda-feira, 8 de abril de 13

  • Secretaria de Estado do Desenvolvimento Econmico

    Sustentvel - SC(CONSULPLAN) Qual TAG usamos no HTML para definir uma opo em uma drop-down list?

    a)

    b)

    c)

    d)

    e)

    150segunda-feira, 8 de abril de 13

  • Secretaria de Estado do Desenvolvimento Econmico

    Sustentvel - SC(CONSULPLAN) Qual TAG usamos no HTML para definir uma lista ordenada?

    a)

    b)

    c)

    d)

    e)

    151segunda-feira, 8 de abril de 13

  • Secretaria de Estado do Desenvolvimento Econmico

    Sustentvel - SC(CONSULPLAN) Qual TAG usamos no HTML para definir uma lista ordenada?

    a)

    b)

    c)

    d)

    e)

    151segunda-feira, 8 de abril de 13

  • TCE-ES

    (CESPE) necessrio que as variveis tenham a definio de um tipo antes de serem utilizadas em um programa JavaScript.

    a) Certo

    b) Errado

    152segunda-feira, 8 de abril de 13

  • TCE-ES

    (CESPE) necessrio que as variveis tenham a definio de um tipo antes de serem utilizadas em um programa JavaScript.

    a) Certo

    b) Errado

    152segunda-feira, 8 de abril de 13

  • TSE

    (CONSULPLAN) No que diz respeito aos operadores em JavaScript, sejam as variveis do mesmo tipo a=3 e b=5. As operaes

    a!=b e a!=3 && b==5

    retornaro, respectivamente, os seguintes valores

    a) verdadeiro e falso.

    b) falso e verdadeiro.

    153segunda-feira, 8 de abril de 13

  • TSE

    (CONSULPLAN) No que diz respeito aos operadores em JavaScript, sejam as variveis do mesmo tipo a=3 e b=5. As operaes

    a!=b e a!=3 && b==5

    retornaro, respectivamente, os seguintes valores

    a) verdadeiro e falso.

    b) falso e verdadeiro.

    153segunda-feira, 8 de abril de 13

  • TSE(CONSULPLAN) Observe o cdigo em JavaScript.

    154segunda-feira, 8 de abril de 13

  • (continuao)

    Na execuo no browser Internet Explorer 8 BR, este cdigo ir gerar a seguinte sada

    a) 1 2 3 5 8 13

    b) 0 1 1 2 3 5

    155segunda-feira, 8 de abril de 13

  • (continuao)

    Na execuo no browser Internet Explorer 8 BR, este cdigo ir gerar a seguinte sada

    a) 1 2 3 5 8 13

    b) 0 1 1 2 3 5

    155segunda-feira, 8 de abril de 13