Ferramentas para Sistema Web

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

2. Revisão • Hipertexto é um texto que não é organizado de forma linear. • É um texto que contém links para outros textos. • Podemos dizer que hipertexto é um texto dentro de outro texto. • Textos ligados entre si. • O sistema de hipertexto mais conhecido atualmente é o utilizado na World Wide Web. • É o HT da HTML.

3. Linguagens de Marcação • Linguagem de marcação é um sistema para anotação de um texto de modo que ele seja sintaticamente distinguível. • É um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos. • É caracterizada por etiquetas que fornecem informação sobre o papel do conteúdo (texto, imagens, etc) no documento, tornando-o um documento estruturado. • São usadas, por exemplo, na indústria editorial para marcar a formatação (exibição gráfica) de páginas. • É o ML da HTML.

4. Como Criar um Arquivo HTML (Windows) • Primeiro Passo • Abra o menu Iniciar e navegue até o Bloco de Notas ou digite na caixa de pesquisa “Bloco de Notas”. • Segundo Passo • Uma vez localizado o Bloco de Notas, vá em frente e clique nele. Você verá uma janela em branco pronta para que você comece a digitar HTML. • Terceiro Passo • Por padrão o Windows oculta extensões de tipos de arquivo conhecidos. • Em qualquer janela do Windows Explorer selecione “Opções de Pasta” no menu “Ferramentas”. • Na guia “Modo de Exibição”, em “Configurações Avançadas”, role a tela para baixo até encontrar “Ocultar extensões de tipos de arquivo conhecidos” e desmarque essa opção.

5. Informações Importantes • A utilização de um editor simples como o bloco de notas é porque estamos, neste momento, aprendendo e entendendo conceitos usados nas páginas Web. • Evidentemente, quando estivermos mais familiarizado com a HTML, vamos utilizar editores mais poderosos e que certamente facilitarão nosso trabalho.

6. Dez Coisas que Levei Anos Para Aprender - Luis Fernando Veríssimo • Uma pessoa que é boa com você, mas grosseira com o garçom, não pode ser uma boa pessoa. • As pessoas que querem compartilhar as visões religiosas delas com você, quase nunca querem que você compartilhe as suas com elas. • Ninguém liga se você não sabe dançar. Levante e dance. • A força mais destrutiva do universo é a fofoca. • Não confunda nunca sua carreira com sua vida.

7. Cont. • Jamais, sob quaisquer circunstâncias, tome um remédio para dormir e um laxante na mesma noite. • Se você tivesse que identificar, em uma palavra, a razão pela qual a raça humana ainda não atingiu (e nunca atingirá) todo o seu potencial, essa palavra seria "reuniões". • Há uma linha muito tênue entre "hobby" e "doença mental". • Seus amigos de verdade amam você de qualquer jeito. • Nunca tenha medo de tentar algo novo. Lembre-se de que um amador solitário construiu a Arca. Um grande grupo de profissionais construiu o Titanic.

8. Salve o Seu Trabalho • Concluído o texto você salvará o seu trabalho em um arquivo. Antes de fazer isso, crie uma pasta para organizar seu trabalho e armazenar os arquivos do site. • Para fazer isso, escolha “Salvar” no menu “Arquivo”. Você verá uma caixa de diálogo “Salvar como”. • Primeiro, crie uma pasta para todos os arquivos relacionados. Você faz isso com o botão “Nova Pasta”. • Em seguida, clique na pasta recém-criada e digite o nome do arquivo. Clique no botão “Salvar”.

9. Browser • O termo inglês browser é usado no jargão da internet para designar um programa capaz de ler e apresentar ao usuário os conteúdos de um documento web escrito em linguagem de marcação. • Browser vem do verbo to browser, que significa folhear páginas de um livro. • Foi traduzido para o português como navegador, que gerou a conhecida expressão “navegar na internet” • Firefox, Opera, ChromeInternet Explorer eSafari

10. Abra seu Documento em um Browser • No Internet Explorer você abrirá a caixa de diálogo Abrir. • Então, você clicará em Procurar para obter uma caixa de diálogo onde irá navegar até o local onde salvou o arquivo. • Você pode também clicar duas vezes no arquivo HTML ou arrastá-lo e soltá-lo no ícone do seu browser.

11. Cabeçalhos • Assim como em umlivro, uma página HTML pode conter uma hierarquia de títulos para estabelecer uma divisão de seu conteúdo. Para conseguirmos realizar essa tarefa devemos utilizar as marcações (tags) de cabeçalho h1, h2, h3, h4, h5 e h6. • Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento.

12. Adicionando Estrutura ao Documento – <h1> <h1>Dez Coisas que Levei Anos Para Aprender</h1> Use esta marcação (tag) para finalizar um título Use esta marcação (tag) para iniciar um título

13. Adicionando Estrutura ao Documento – <h2> <h2>LuisFernando Veríssimo</h2> Use esta marcação (tag) para finalizar um subtítulo Use esta marcação (tag) para iniciar um subtítulo

14. Parágrafos • Os parágrafos dentro de um documento HTML, em geral, são definidos através do elemento p. Uma das principais características desse elemento é que ele ocupa horizontalmente todo o espaço definido pelo elemento pai. Esse é o comportamento dos elementos de bloco que discutiremos com mais detalhes posteriormente. • Por enquanto, o importante é sabermos que, devido ao comportamento de bloco do elemento p, o navegador ajustará o texto do parágrafo à largura do elemento pai realizando todas as quebras de linha necessárias.

15. Adicionando Estrutura ao Documento – <p> <p>Uma pessoa que é boa com você, mas grosseira com o garçom, não pode ser uma boa pessoa.</p> Use esta marcação (tag) para iniciar parágrafo Use esta marcação (tag) para finalizar um parágrafo As tagscorrespondentes não precisam estar em uma mesma linha

16. Identificando o Corpo do seu Documento - <body> • Envolva todo o conteúdo do seu documento com a tag <body> e </body>. • O corpo do seu documento consiste das tags <body> e </body> e de tudo que está lá dentro. • O corpo contém todo o conteúdo e a estrutura de sua página Web; as partes da página Web que você vê em seu browser.

17. A Tag HTML • Neste momento, envolva todo o seu HTML com as tags <html> e </html>.

18. Cabeçalho – <head> e <titulo> • Adicione as tags <head> e <title> conforme exemplo abaixo. • No cabeçalho contém informações sobre a sua página Web, como o seu título. Por hora pense nele desta maneira: o cabeçalho permite que você diga ao browser coisas sobre a página Web. <html> <head> <title>Minha primeira página</title> </head> <body> ...

19. Indentação • Existem centenas de estilos de indentação, mas, basicamente, consiste na adição de tabulações no início de cada linha na quantidade equivalente ao número de blocos em que cada linha está contida. • Indentação(recuo) é um termo aplicado ao código fonte de um programa para indicar que os elementos hierarquicamente dispostos têm o mesmo avanço relativamente à posição

20. Exemplo Código indentado

21. Exercício 1 Na área de trabalho do seu usuário, crie uma nova pasta com o seu primeiro nome. Dentro dessa pasta, crie um diretório chamado html. Para facilitar, utilize apenas letras minúsculas em todas as pastas e arquivos que criarmos durante o curso. Agora, utilizando o bloco de notas, crie um novo arquivo chamado ola-mundo.html e salve-o dentro da pasta html. A página deve exibir a seguinte mensagem: Olá mundo! Abra o arquivo ola-mundo.html no navegador e veja o resultado.

22. Resolução 1 <html> <head> <title>Exercício 1</title> </head> <body> <p>Olá Mundo!</p> </body> </html>

23. Exercício 2 Crie uma página HTML que exiba o nome deste curso duas vezes.

24. Resolução 2 <html> <head> <title>Exercício 2</title> </head> <body> <p>Ferramenta para Sistemas Web</p> <p>Ferramenta para Sistemas Web</p> </body> </html>

25. Fim