1 / 25

Ferramentas para Sistema Web

Ferramentas para Sistema Web. Sistemas de Informação Aula 3 - 13/03/2013. Revisão. Revisão. Normalmente você coloca as tags em volta de algum conteúdo. As tags consistem de nome da tag envolvidos pelos sinais de menor e maior, ou seja, os caracteres < e >.

ella-kirkland
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 3 - 13/03/2013

  2. Revisão

  3. Revisão • Normalmente você coloca as tags em volta de algum conteúdo. • As tags consistem de nome da tag envolvidos pelos sinais de menor e maior, ou seja, os caracteres < e >. • Chamamos as tags de abertura e as tags de fechamento de tags correspondentes. • Tag de abertura + conteúdo + tag de fechamento = Elemento • A / na tag de fechamento existe para ajudar você e o browser a saber onde o conteúdo termina. • Muitos elementos HTML possuem outros elementos HTML entre suas tags.

  4. Estrutura Básica <!DOCTYPE html> • O Doctypedeve ser a primeira linha de código do documento HTML. • O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. • O DoctypeNÃO é uma tagdo HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita, portanto, NÃO tem tag correspondente. • Adicione <!DOCTYPE html> ao seu documento na primeira linha.

  5. Tags com Atributos • As tags podem ser um pouco mais interessantes do que você já viu até agora, ou seja, as tags podem possuir atributos e valores. Veja abaixo uma taghtml com o atributo adicional href e o valor pt-br. <htmllang=”pt-br”>

  6. O elemento HTML <htmllang=”pt-br”> • O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML. • O atributo LANG é importante para que os user-agents saibam qual a linguagem principal do documento. • Lembre-se que o atributo LANG não é restrito ao elemento HTML, como um atributo global, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

  7. Metadados no HTML • Dados (informações) sobre dados. • Metadados nos dão informações sobre o documento HTML. • São usados por browsers, motores de busca e outros servicos WEB. • Geralmente são utilizados para especificar: • Descrição, • Palavras Chave, • Autor do Documento, • Tabela de Caracteres, etc.

  8. meta charset • A Tag HEAD é onde fica toda a parte inteligente da página. É no HEAD que ficam os metadados. • Metadados são informações sobre a página e o conteúdo ali publicado. MetatagCharset • Existe uma metatag responsável por chavear qual tabela de caractéres a página está utilizando. <meta charset=“utf-8”> • Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>

  9. A Tabela de Caracteres Unicode UTF-8 • A Tabela Unicode suporta algo em torno de um milhão de caracteres. • Garante que seu sistema será bem visualizado em qualquer lugar do mundo. • É uma tabela padrão.

  10. Links • A possibilidade de linkar documentos é o que torna a Web o que ela é. • Existem duas maneiras principais de linkar documentos, os elementos a e link (Veremos o elemento link posteriormente). • O elemento a cria um link no conteúdo da página. • O elemento a possui um atributo href que especifica o destino do link. Esta é a legenda do link. <a href=“https://www.google.com.br/”>Google</a> <a>Google</a> Este é o destino do link.

  11. Links • Um link pode fazer a ligação de uma página para outra do mesmo site (link interno) ou para uma página de outro site (link externo). • Para que um link seja criado, devemos, no mínimo, utilizar o atributo href com o caminho relativo ou absoluto de uma outra página.

  12. Caminho Absoluto x Relativo Suponha a existência das páginas HTML nos seguintes endereços: http://www.anhanguera.br/cursos/cursos.html http://www.anhanguera.br/cursos/inscricao.html Um link na página "cursos.html" para a página "inscricao.html" poderia ser construída com endereço absoluto ou com endereço relativo: absoluto: <a href="http://www.anhanguera.br/cursos/inscricao.htm"> Inscrição</a> relativo: <A href="inscricao.htm">Inscrição</A>

  13. Importante • Os endereços absolutos são utilizados apenas nas ligações para páginas de terceiros, aquelas que já encontram-se publicadas num domínio específico. Já os endereços relativos são geralmente utilizados para as páginas de seu próprio hipertexto.

  14. Exemplos <body> <p><a href ="pagina2.html">Exemplo de link relativo</a></p> <p><a href ="outros/pagina3.html">+ exemplo de link relativo</a></p> <p><a href ="http://www.uol.com.br">Exemplo de link absoluto</a></p> </body>

  15. O Atributo Target Além do atributo href, podemos utilizar o atributo target para informar onde o documento deve ser aberto. Os possíveis valores para o atributo target são: _blank - em uma nova janela ou aba. _self - na mesma janela ou frame do documento que contémolink. _parent - em um frame que seja o “pai” do frame no qual o link se encontra. _top - na mesma janela do documento que contém o link. Frame caiu em desuso e no HTML5 foi totalmente retirada da especificação.

  16. Exemplos <body> <p> <a href=“outrapagina.html“ target="_blank"> Exemplo de link relativo </a> </p> </body>

  17. Mais Informações • http://www.w3.org/International/questions/qa-choosing-language-tags • http://pt.wikipedia.org/wiki/UTF-8 • http://www.iana.org/assignments/character-sets

  18. Exercícios 1 • Nos dois exercícios realizados na semana passada (Aula 2), insira a instrução DOCTYPE, o atributo LANG e a meta tag META com seu atributo CHARSET.

  19. Resolução 1 <!DOCTYPE HTML> <htmllang="pt-br"> <head> <meta charset="utf-8"> <title>Exercício 1</title> </head> <body> <p>Olá Mundo!</p> </body> </html>

  20. Resolução 1 – Cont... <!DOCTYPE HTML> <htmllang="pt-br"> <head> <meta charset="utf-8"> <title>Exercício 2</title> </head> <body> <p>Ferramenta para Sistemas Web</p> <p>Ferramenta para Sistemas Web</p> </body> </html>

  21. Exercício 2 • Imagine que você possua um site de culinária no qual você disponibiliza algumas receitas. Crie uma página com uma receita fictícia utilizando cabeçalhos para organizar conteúdo. Utilize quantos níveis de título achar necessário.

  22. Exercício 3 • 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.

  23. Resolução 3 – pagina1.html <!DOCTYPE HTML> <htmllang="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>

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

  25. Fim

More Related