Scribd Logo
Importer

Bienvenue sur Scribd !

  • PPW2 Ago2010

    Transféré par

    Hector Dufau
    15 vues27 pages

    Titre original

    PPW2_ago2010

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    15 vues27 pages

    PPW2 Ago2010

    Transféré par

    Hector Dufau

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 27

    Programação de Páginas

    Web (PPW)
    SENAI
    Agosto 2010
    Programação de Páginas Web (PPW)

    HTML, CSS, XML


    HTML
     HTML - HyperText Markup Language.
     Inventado em 1990 por um cientista
    chamado Tim Berners-Lee, com a
    finalidade inicial de tornar possível o
    acesso e troca de informações e de
    documentação de pesquisas.
    Estrutura básica de uma página
    HTML
     Extensão: .htm ou .html
     Tags (abertura e fechamento)
     Cabeçalho
     Corpo
    Tags HTML
     <html> ... </html>
     <head> ... </head>
     <body> ... </body>
    Tags HTML
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    </html>
    Tags HTML
     <title></title>
     <p></p>
    Tags HTML
    <html>
    <head>
    <title> Título da Página - Oi Mundo!</title>
    </head>
    <body>
    <p>Oi Mundo!</p>
    </body>
    </html>
    Exercício
     Vamos criar a página “Oi Mundo”
    ◦ 1º Abra o bloco de notas (Notepad)
    ◦ Escreva o código para a página “Oi
    Mundo” (slide 7)
    ◦ Salve o arquivo com o nome oimundo e
    com a extensão .html (oimundo.html)
    ◦ Dê um duplo clique no arquivo para vê-lo
    no Internet Explorer
    Tags HTML
     <h1></h1>
     <h2></h2>
     <h3></h3>
     <b></b>
     <i></i>
     <u></u>
     <br />
     <hr />
    Tags HTML
    <html>
    <head>
    <title> Nova página</title>
    </head>
    <body>
    <h1>Título 1</h1><h2>Título 2</h2>
    <h3>Título 3</h3>
    <p>Parágrafo</p>Texto<br /><hr />
    <b>Negrito</b><i>Itálico</i>
    <u>Sublinhado</u>
    </body>
    </html>
    Tags HTML
     <ul></ul>
     <ol></ol>
     <li></li>
    Tags HTML
    <html>
    <head>
    <title> Lista Ordenada</title>
    </head>
    <body>
    <ul>
    <li>Item 1</li><li>Item 2</li>
    </ul>
    <ol>
    <li>Item 1</li><li>Item 2</li>
    </ol>
    </body>
    </html>
    Tags HTML
     Atributos
    ◦ <body bgcolor=“#ff0000”></body>
    ◦ <p align=“center”></p>
    ◦ <font face=“arial” color=“red” size=“2”></font>
    ◦ <ul type=“square”>
     Combinação
    ◦ <b><u>Negrito e Sublinhado</u></b>
    ◦ <p align=“center”><b> <font face=“arial”
    color=“red” size=“2”></font></b></p>
    Tags HTML
     <img src=“arquivo.gif”>
     <a href=“http://www.google.com.br”>Google</a>
     <a href=“http://www.google.com.br”><img src=“google.gif”
    border=“0”></a>
     <a href=“mailto:meu@email.com.br”>Escreva pra mim!</a>
     <a href=“#link1”>Clique aqui></a><a name=“link1”></a>
    Tags HTML
     <table>
     <tr></tr>
     <th></th>
     <td></td>
    Tags HTML
    <TABLE BORDER=“1” CELLSPACING=2 CELLPADDING=2 COLS=3 WIDTH="100%"
    BGCOLOR="#FFFF99" >
    <TR>
    <TH>Apostila</TH><TH>Descrição</TH><TH>Preço</TH>
    </TR>
    <TR>
    <TD>ASP.NET</TD><TD>Criação de páginas dinâmicas</TD><TD>R$
    30,00</TD>
    </TR>
    <TR>
    <TD>Aprenda C#</TD><TD>Linguagem .NET</TD><TD>R$ 45,00</TD>
    </TR>
    <TR>
    <TD>UML</TD><TD>Modelagem de Sistemas</TD><TD>R$ 25,00</TD>
    </TR>
    </TABLE>
    Tags HTML
     <form></form>
     <input></input>
     <select></select>
     <option></option>
    Tags HTML
    <html>
    <head><title>Formulário Exemplo</title></head>
    <body>
    <form action=“login.html” method=“post”>
    Nome:
    <input type=“text” name=“Nome“ maxlength=“20”>
    <br />
    Password:
    <input type=“password” name=“Senha” maxlength=“20”>
    <br />
    <input type=“submit” Value=“Login”>
    </form>
    </body>
    </html>
    Tags HTML
    <script language="JavaScript">
    </script>
    Tags HTML
    <html>
    <head>
    <title>Senha</title>
    <script language=”JavaScript”>
    apostilas = window.prompt(“Digite sua senha de acesso e clique
    em OK”);
    switch (apostilas) {
    case “gratuito” :
    window.location=”Aceito.html”;
    break;
    default :
    window.location=”Negado.html”;
    }
    </script>
    </head>
    <body>
    </body>
    </html>
    CSS
     Trata-se de um padrão de formatação
    para páginas web que vai além das
    limitações impostas pelo html.
     O Cascading Style Sheet permite uma
    versatilidade maior na programação
    do layout de páginas web sem
    aumentar o seu tamanho em Kb, pois
    oferece várias possibilidades que
    antes só eram conseguidas com a
    utilização de imagens.
    CSS
    <HTML>
    <HEAD>
    <TITLE> Título da página</TITLE>
    <STYLE type="text/css">
    <!--
    h1 {font: 20pt "Trebuchet MS, Arial, Helvetica"; color: red}
    h2 {font: 15pt "Trebuchet MS, Arial, Helvetica"; color: blue}
    p {font: 12pt "Corrier, Times"; color: black}
    -- >
    </STYLE>
    </HEAD>
    <BODY>
    <h1>Título</h1>
    <h2>Subtítulo</h2>
    <p>Conteúdo da página</p>
    </BODY>
    </HTML>
    CSS
    <HTML>
    <HEAD>
    <TITLE> Título da página</TITLE>
    < link rel=“stylesheet” href=“exemplo.css”
    type=“text/css”>
    </HEAD>
    <BODY>
    <h1>Título</h1>
    <h2>Subtítulo</h2>
    <p>Conteúdo da página</p>
    </BODY>
    </HTML>
    CSS - Sintaxe
    elemento {
    atributo1: valor;
    atributo2: valor ...
    }

    Exemplo:

    p{
    font: 12pt "Corrier, Times";
    color: black
    }
    XML
     A XML (eXtensible Markup Language,
    ou Linguagem de Marcação
    Estendida) permite que uma
    marcação específica seja criada para
    especificar idéias e compartilhá-las na
    rede.
    XML
    <?xml version="1.0"?>
    <produtos>
    <produto>
    <nome>Calça</nome>
    <preco>15,00</preco>
    </produto>
    <produto>
    <nome>Camisa</nome>
    <preco>20,00</preco>
    </produto>
    </produtos>

    Vous aimerez peut-être aussi