aula3-inf1 › ~bianca › informatica1 › index_arquivos › aula3-inf1.pdf · aula 3 -...
TRANSCRIPT
Aula 3 - 03/09/2007 1
Informática I
Aula 3
http://www.ic.uff.br/~bianca/informatica1/
Aula 3 - 03/09/2007 2
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 3
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 4
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 5
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 6
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 7
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 8
Exemplo
Aula 3 - 03/09/2007 9
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 10
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 11
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 12
Exemplo
Aula 3 - 03/09/2007 13
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 14
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>
• As seções podem ser separadas por uma linha horizontal usando o tag <hr>.
menor
Aula 3 - 03/09/2007 15
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 16
Exemplo
Aula 3 - 03/09/2007 17
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 18
Exemplo
Aula 3 - 03/09/2007 19
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 20
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 21
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 22
Exemplo
Aula 3 - 03/09/2007 23
Imagens
• Imagens podem ser inseridas em uma página utilizando-se 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 24
Exemplo
Aula 3 - 03/09/2007 25
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 26
Exemplo
Aula 3 - 03/09/2007 27
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-style-type.– Interessante para listas aninhadas.
Aula 3 - 03/09/2007 28
Exemplo
Aula 3 - 03/09/2007 29
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 30
Exemplo
Aula 3 - 03/09/2007 31
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 32
Exemplo
Aula 3 - 03/09/2007 33
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 34
Exemplo
Aula 3 - 03/09/2007 35
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 36
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.