Informática I Aula 3 http://www.ic.uff.br/~bianca/informatica1/ Aula 3-03/09/2007 1
Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e páginas dinâmicas Números e expressões em Javascript Histórico dos Computadores Abstração e Funções Algoritmos e linguagens de programação Programação orientada a eventos Ciência da computação como disciplina Execução condicional Representação de dados Computação e sociedade Aula 3-03/09/2007 2
Introdução A World Wide Web é provavelmente o aspecto mais visível da computação hoje em dia. Inicialmente foi desenvolvida para pesquisadores trocarem informação mais facilmente. Hoje é um meio dinâmico para comunicação e comércio. Usando um navegador, usuários podem com alguns clicks ter acesso a todo tipo de informação e produtos para compra. Nessa aula, aprenderemos o básico sobre a criação de páginas Web e a linguagem HTML. Aula 3-03/09/2007 3
Noções básicas de HTML Página web simples = documento de texto + informações de formatação numa linguagem chamada HTML (HyperText Markup Language). As informações de formatação são interpretadas pelo navegador que mostra a página formatada. Aula 3-03/09/2007 4
Tags de HTML O HTML usa tags para especificar a formatação da página. As tags não são mostradas no navegador, apenas servem para indicar a formatação. Uma tag é uma palavra ou símbolo dentro de colchetes ( <> ). Por exemplo, toda página HTML começa com uma tag <html> e termina com a tag </html>, indicando o início e o fim do conteúdo da página. Aula 3-03/09/2007 5
Tags de HTML Duas seções são obrigatórias numa página: A seção HEAD, dentro das tags <head> e </head>. A seção BODY, dentro das tags <body> e </body>. A seção HEAD contém o título e outras informações que determinam a aparência geral. O título deve vir entre as tags <title> e </title>. O título é mostrado no alto da janela do navegador ou no caso de abas múltiplas na própria aba. A seção BODY contém o texto da página em si. Aula 3-03/09/2007 6
Elementos de HTML A maioria das tags vem em pares, indicando o início e o fim de um elemento da página. Elemento = tag inicial + texto + tag final Ex.: <title>meu título</title> Em alguns poucos casos as tags não vem pares. O elemento de comentário é composto de uma única tag que começa com <!-- e termina com -->. O comentário é uma anotação que não aparece na página. Ex.: <! Autor da pagina: Joao Oliveira --> Aula 3-03/09/2007 7
Exemplo Aula 3-03/09/2007 8
Desenvolvendo uma página HTML Para criar páginas HTML simples podemos usar um editor de texto comum. Ex.: Bloco de Notas, Wordpad Editores mais avançados ajudam o usuário colorindo e inserindo tags automaticamente. E ainda existe editores WYSIWYG ou visuais que não exigem necessariamente conhecimento de HTML. Ex.: Frontpage, Dreamweaver, Nvu. Durante o desenvolvimento da página, usamos o navegador para visualização. Aula 3-03/09/2007 9
Formatação do texto O texto não aparece no navegador exatamente como ele foi digitado. O navegador ignora as linhas em branco, espaços e tabs. Todos os espaços consecutivos são mostrados como um único espaço. Uma linha de texto é automaticamente quebrada em duas se a janela for muito pequena. Aula 3-03/09/2007 10
Formatação do texto O espaçamento do texto pode ser controlado utilizando tags de HTML. O elemento parágrafo (<p>...</p>) especifica que o texto deve ser mostrado em uma nova linha que é precedida por uma linha em branco. O elemento de quebra de linha (<br>) insere uma quebra em qualquer ponto do texto. O símbolo pode ser usado para inserir espaços em branco. Aula 3-03/09/2007 11
Exemplo Aula 3-03/09/2007 12
Erros comuns Esquecer um dos colchetes de um tag. O navegador não reconhecerá o tag e o mostrará como texto na página. Ex.: <br Digitar o nome do tag incorretamente. O navegador ignorará o tag. Ex.: <bl> Aula 3-03/09/2007 13
Subtítulos É comum que um documento grande seja dividido em seções, cada uma com um subtítulo descrevendo seu conteúdo. A linguagem HTML inclui tags para a especificação de subtítulos em vários tamanhos (de 1 a 6). <h1>...</h1> <h2>...</h2> <h3>...</h3> menor As seções podem ser separadas por uma linha horizontal usando o tag <hr>. Aula 3-03/09/2007 14
Alinhamento Por default, o texto de uma página fica alinhado a esquerda. É possível alinhar o texto ao centro ou a direita incluindo o atributo STYLE na tag de abertura do elemento que se deseja alinhar. Em geral, um atributo é uma propriedade adicional que pode ser atribuída a um elemento. Ex1.: <h2 style= text-align:center > Ex2.: <p style= text-align:right > Para alinhar vários elementos simultaneamente podemos usar a tag DIV que agrupa elementos em uma única divisão. Aula 3-03/09/2007 15
Exemplo Aula 3-03/09/2007 16
Formatação de fonte O texto dentro de tags <b>...</b> aparece em negrito. O texto dentro de tags <i>...</i> aparece em itálico. O texto dentro de tags <u>...</u> aparece sublinhado. A tag FONT serve para modificar o tipo, tamanho e cor da fonte. Ex.: <font face=courier size=5 color=blue>texto</font> Aula 3-03/09/2007 17
Exemplo Aula 3-03/09/2007 18
Erros comuns Esquecer o / nas tags finais. A formatação se extenderá por todo o texto. Trocar a ordem das tags aninhadas. Ex.: <b><i>texto</b></i> É considerado um erro de sintaxe e o navegador pode não mostrar o texto corretamente. Aula 3-03/09/2007 19
Hipertexto A característica principal da web é a interligação das páginas através de links. Um link é um elemento de uma página (normalmente mostrado como texto sublinhado) que conecta a página a outra página ou recurso. Quando o usuário clica no link, o navegador carrega a página conectada, não importando sua localização física. Seguindo links, o usuário pode visitar páginas relacionadas rapidamente, mesmo que essas páginas estejam em computadores a quilômetros de distância um do outro. Texto com links é chamado de hipertexto. Aula 3-03/09/2007 20
Inserindo links As tags <a>...</a> são colocadas ao redor do texto que servirá de link. O endereço da página conectada é especificado pelo atributo HREF. O endereço pode ser absoluto ou relativo. Absoluto: URL da página Ex.: <a href= http://www.ic.uff.br >UFF</a> Relativo: arquivo no mesmo servidor e diretório da página atual. Ex.: <a href= teste.html >Teste</a> Por default, os navegadores exibem links não-visitados na cor azul e links visitados na cor roxa. Aula 3-03/09/2007 21
Exemplo Aula 3-03/09/2007 22
Imagens Imagens podem ser inseridas em uma página utilizandose a tag <img>. Navegadores comuns são capazes de mostrar imagens nos formatos GIF e JPEG. Para mostrar outros formatos, o navegador pode precisar de um plug-in. Um tag IMG normalmente tem dois atributos: SRC: especifica o endereço da imagem. O endereço pode ser absoluto ou relativo. ALT: especifica um texto a ser mostrado caso a imagem não possa ser mostrada. Alguns navegadores mostram esse texto quando o mouse é passado por cima da imagem. Aula 3-03/09/2007 23
Exemplo Aula 3-03/09/2007 24
Listas Quando organizamos texto nas páginas, é conveniente colocar itens similares em listas. A linguagem HTML permite a especificação de dois tipos de lista: Lista ordenada: os itens são numerados em sequência. Especificada pelos tags <ol>...</ol>. Lista não-ordenada: os itens não são numerados, mas são precedidos por círculos. Especificada pelos tags <ul>...</ul>. Nos dois tipos de lista, cada item fica dentro de tags <li>...</li>. Aula 3-03/09/2007 25
Exemplo Aula 3-03/09/2007 26
Formatação de listas Por default, as listas ordenadas são precedidas por números e as listas não-ordenadas são precedidas por círculos. Isso pode ser modificado usando o atributo list-styletype. Interessante para listas aninhadas. Aula 3-03/09/2007 27
Exemplo Aula 3-03/09/2007 28
Tabelas Tabelas são usadas para organizar texto e outros elementos em linhas e colunas. Um elemento de tabela é especificado pelas tags <table>...</table>. Cada linha da tabela é identificada pelos tags <tr>...</tr>. Cada item de uma linha é identificado pelos tags <td>...</td>. O número de colunas é igual ao número de itens da linha que tem mais itens. A largura de cada coluna é dada pela largura do maior item. Por default, os itens ficam alinhados a esquerda. Aula 3-03/09/2007 29
Exemplo Aula 3-03/09/2007 30
Bordas de Tabela Para inserir bordas na tabela, utiliza-se o atributo BORDER na tag TABLE. Ex.:<table border=1>...</table>. O número especifica a largura em pixels da borda. Aula 3-03/09/2007 31
Exemplo Aula 3-03/09/2007 32
Alinhando Texto e Imagens Além de servirem para organizar texto em linhas e colunas, tabelas podem ser úteis para alinhar outros elementos de HTML, por exemplo texto e imagens. O atributo ALIGN serve para mudar o alinhamento de um item da tabela. Ex.:<td align=center>...</td>. Aula 3-03/09/2007 33
Exemplo Aula 3-03/09/2007 34
Outras dicas A cor de fundo da página pode ser modificada através do atributo BGCOLOR do tag BODY. Ex.: <body bgcolor=lightgrey> As cores em HTML são especificadas pelos nome em inglês ou por uma sequência de 6 digitos hexadecimais precedida do símbolo #. Ex.: <body bgcolor=#00000f> Aula 3-03/09/2007 35
Acessando a página Para que a página possa ser vista na web, é necessário fazer o upload da página para um servidor de web. Há empresas que vendem espaço em seus servidores. Os arquivos adicionais (por exemplo, imagens com endereço relativo) também devem ser colocados no servidor. Aula 3-03/09/2007 36