1 / 23

Ferramentas para Sistema Web

Ferramentas para Sistema Web. Sistemas de Informação Aula 4 - 20/03/2013. Revisão. Instrução DOCTYPE Atributo lang Metadados Charset Tabela de Caracteres UTF-8 Links com a tag <a> Atributo href Caminhos Absolutos Caminhos Relativos Atributo target. Exercício da Aula Anterior.

malcolm-tyson
Download Presentation

Ferramentas para Sistema Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ferramentas para Sistema Web Sistemas de Informação Aula 4 - 20/03/2013

  2. Revisão • Instrução DOCTYPE • Atributo lang • Metadados • Charset • Tabela de Caracteres UTF-8 • Links com a tag <a> • Atributo href • Caminhos Absolutos • Caminhos Relativos • Atributo target

  3. Exercício da Aula Anterior • Crie dois documentos HTML em arquivos chamados pagina1.html e pagina2.html, dentro da sua pasta e no corpo da pagina 1 crie dois links: um que aponte para uma página externa qualquer e outro que aponte para a página interna 2.

  4. Resolução – pagina1.html <!DOCTYPE HTML> <html lang="pt-br"> <head> <title>Exemplo de uso da tag a</title> <meta charset="utf-8"> </head> <body> <p><a href="http://www.uol.com.br" target="_blank">Link externo</a></p> <p><a href="pagina2.html">Link interno</a></p> </body> </html>

  5. Resolução – pagina2.html <!DOCTYPE HTML> <html lang="pt-br"> <head> <title>Exemplo de uso da tag a</title> <meta charset="utf-8"> </head> <body> <h1>Pagina 2</h1> </body> </html>

  6. Listas Em um documento HTML podemos ter três tipos de listas e cada uma delas deve ser utilizada de acordo com a sua semântica, ou seja, você deve escolher um tipo de lista para cada situação. Os três tipos possíveis de listas são: • Lista de definição • Lista ordenada • Lista sem ordem

  7. Lista de Definição • Para criarmos uma lista de definição devemos utilizar a tag dl. O elemento dl deve possuir pelo menos um elemento filho dt seguido de um elemento dd. Um item em uma lista de definição é composto por um par de elementos dt e dd. • <dl> define uma lista de definição. Sempre trabalha em conjunto com: • <dt> define um termo da lista de definição • <dd> descreve um termo da lista de definição

  8. <h1>Cursos - Ferramentas para Sistemas Web</h1> <dl> <dt>Lógica de Programação</dt> <dd>Conhecimentos em Lógica de Programação é o pré - requisito fundamental para que uma pessoa consiga aprender qualquer Linguagem de Programação... </dd> <dt>Desenvolvimento Web com HTML , CSS e JavaScript</dt> <dd>Atualmente, praticamente todos os sistemas corporativos possuem interfaces web. Para quem deseja atuar no mercado de desenvolvimento... </dd> </dl>

  9. Lista Ordenada • Para criarmos uma lista ordenada, devemos utilizar a tag ol. O elemento ol deve possuir pelo menos um elemento filho li. • <ol> define a lista ordenada. • Uma lista ordenada pode ser númerica ou alfabetica. • <li> define os itens da lista ordenada.

  10. Exemplo 1 <ol> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol>

  11. Exemplo com Start <olstart="10"> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol>

  12. Atributo type • Define o tipo de marcador utilizado na lista ordenada. O atributo type pode receber os seguintes valores: • 1 • A • a • I • i

  13. Exemplo com o Atributo type <oltype="a"> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol>

  14. Lista sem Ordem Para criarmos uma lista sem ordem, devemos utilizar a tagul. O elemento ul deve possuir pelo menos um elemento filho li. • <ul> define a listasemordem. • <li> define ositens da listaordenada. Obs.: O atributo type não é maissuportado no HTML 5 para as listassemordem.

  15. Exemplo 1 <ul> <li>Café</li> <li>Chá</li> <li>Leite</li> </ul>

  16. Exercício 1 • Crie um documento HTML em um arquivo chamado restaurante.html na pasta html que contenha o cardápio de um restaurante com os nomes dos seus pratos e uma breve descrição sobre os mesmos. Utilize as listas de definição.

  17. Resolução 1 ... <body> <h1>Menu - K19 Pizzaria</h1> <dl> <dt>À moda da casa</dt> <dd>Presunto coberto com mussarela , ovos e palmito.</dd> <dt>À moda do pizzaiolo </dt> <dd>Mussarela , presunto , ovos e bacon.</dd> <dt>Aliche</dt> <dd>Aliche , parmesão e rodelas de tomate.</dd> </body> ...

  18. Exercício 2 Crie um arquivo HTML chamado manual.html que contenha um manual que explica passo-a-passo o uso de um caixa eletrônico para a operação de saque. Utilize a lista ordenada <ol>. Ex: • Insira o cartão • Digite a senha • Escolha a opção de saque • Informe o valor que deseja sacar • Insira o cartão novamente • Aguarde até a liberação do dinheiro

  19. Resolução 2 <ol> <li>Insira o cartão </li> <li>Digite a senha </li> <li>Escolha a opção de saque </li> <li>Informe o valor que deseja sacar </li> <li>Insira o cartão novamente </li> <li>Aguarde até a liberação do dinheiro </li> </ol>

  20. Exercício 3 • Crie um documento HTML em um arquivo chamado lista-disciplina.html que contenha a lista das disciplinas do seu curso. Utilize as listas sem ordem.

  21. Resolução 3 <ul> <li>Lógica de Programação</li> <li>Ferramentas para Sistemas Web</li> <li>Banco de Dados</li> <li> ... </li> </ul>

  22. Exercício 4 • Crie vários links em uma página e para cada link escolha um target diferente. Crie também quantas páginas de destino forem necessárias.

  23. Fim

More Related