INTRODUÇÃO À INFORMÁTICA - SP5
UBI
Departamento de Informática
P. Fazendeiro e J.Muranho

Objectivos: Utilizar um editor de texto para criar páginas simples para a World Wide Web. Proporcionar uma introdução à linguagem HTML para escrita de páginas Web.

Um editor de texto é um processador de texto muito simples. Manipula texto plano sem formatação. Os documentos produzidos pelos processadores de texto mais elaborados contêm sequências de caracteres especiais que só fazem sentido para o próprio programa de processamento de texto. Um editor de texto consegue assim produzir ficheiros mais pequenos mas ainda assim apropriados para várias tarefas, como por exemplo edição de código de programas informáticos.

Neste exercício utilizará o editor de texto Notepad (Start -> Programs -> Accessories -> Notepad ou Start -> Run... Notepad). Não irá programar mas sim construir a sua primeira página Web (a mais simples!).

Uma página Web é um ficheiro com texto com instruções para incluir títulos, tabelas, imagens e ligações. A esta extensão ao texto normal chamamos hipertexto. As instruções são escritas numa linguagem chamada HTML (HyperText Markup Language) que é conhecida e interpretada pelos programas navegadores (browsers ) como por exemplo o Netscape ou o Explorer. O nome da página (ficheiro) deve acabar em .html (ou .htm) para que o browser saiba que se trata de hipertexto e não texto normal ou outro tipo de informação.

A linguagem HTML requer precisão e atenção à estrutura e nisso é semelhante a uma linguagem de programação. Antes de prosseguir com a resolução da folha prática estude este documento com uma introdução ao HTML disponibilizado na Universidade de Aveiro.

  1. Utilize o editor de texto Notepad para criar o ficheiro primeiro.htm. Escreva algum texto e veja o resultado no browser (e.g. Internet Explorer).

  2. Crie uma página minimalista em linguagem HTML contendo apenas um título e veja o resultado no browser.

    Aqui tem um modelo simples que pode usar: 

    <HTML>
<HEAD>
<TITLE> Este é o texto que aparece na barra de título do browser,
              nos favoritos, etc...
</TITLE>
</HEAD>
<BODY>
<H1> Este título já vai aparecer na página... </H1>
</BODY>
</HTML>

    As estruturas utilizadas iniciam-se com os delimitadores <...> e terminam geralmente com </...>. Caso utilize uma estrutura dentro doutra deve ter o cuidado de as aninhar correctamente (no exemplo acima seria incorrecto terminar primeiro a secção HTML e só depois a secção BODY). O aspecto da página é determinado unicamente pelas estruturas utilizadas e não pelo aspecto do texto no ficheiro.

  3. Analise o texto fonte em HTML de outras páginas Web. Para isso consulte a página desejada e utilize o comando View...(Page)Source do seu browser.

  4. Faça o download do logotipo da UBI para a sua área. Acrescente duas ligações na sua página: uma para a localização original da imagem, outra para o ficheiro que guardou.

  5. Melhore a sua página  utilizando o maior número de características da linguagem HTML que conseguir (guie-se pelo breve manual já referido).

  6. Construa uma segunda página e inclua ligações entre elas.

  7. Mostre o resultado final (as duas páginas) ao docente e seja creditado pelo exercício.

LINKS ÚTEIS
Introdução à linguagem HTML.