Aula 01

Data de publicação: Nov 10, 2012 6:53:10 PM

Introdução

A World Wide Web (WWW) está em larga expansão. Na Internet é possível fazer "quase tudo". Ler jornais, aprender à distância, marcar viagens, ver televisão, ouvir rádio e mais uma infindável lista de opções à disposição de um clique. Cada vez mais se torna importante dominar as linguagens de programação Web para singrar neste mundo emergente. Neste módulo, vamos aprender a construir páginas Web através das linguagens HTML, CSS e Javascript.

1. Construção de páginas Web

A internet, quando acedida através de um browser, permite-nos interagir com conteúdos multimédia tais como vídeos, músicas, imagens, animações e muitos outros. A forma como são construídas as páginas Web é na sua essência muito simples. A Internet usa uma linguagem denominada de HTML (Hipertext Markup Language) que se limita a formatar o conteúdo de uma página Web, sendo responsável pelo posicionamento de texto, imagem, vídeo, animações e ainda por estabelecer hiperligações.

Os ficheiros HTML podem apresentar dois tipos de extensões: html ou htm

Hoje em dia, podemos usar a extensão html sem problemas, uma vez que são apenas os sistemas operativos MS-Dos e as versões do Windows a 16 bits as únicas que não suportam extensões com mais de três caracteres.

De seguida encontra-se a estrutura básica de uma página Web.

<html>

<head>

<title>

Título aqui

</title>

</head>

<body>

Conteúdo da página

</body>

</html>

AULA 1 - EXERCÍCIO 1

Copie para O GEDIT o código anterior e grave a página como AULA1_1.html.

Abra-a com o seu browser e verifique o resultado.

O nome atribuído às palavras entre os sinais de menor e maior < >, denominam-se de tags ou etiquetas <nome da tag>. A zona de aplicação de uma tag situa-se entre a tag de abertura <nome da tag> e a tag de fecho </nome da tag>. Como é visível, qualquer tag de fecho é sempre igual à de abertura precedida de /.

Pretende-se que, ao contrário do que aconteceu na disciplina de TIC, se deixe de usar um programa de interface gráfica, como o Microsoft Frontpage ou Adobe Dreamweaver. Neste módulo, toda a programação deverá ser realizada em bloco de notas (notepad) ou em programas como Notepad++ (Windows) ou Gedit (Linux). A independência do ambiente gráfico é fulcral na aprendizagem dos conteúdos deste módulo e será determinante na qualidade dos futuros programadores.

No capítulo seguinte, abordam-se com maior rigor as funções de cada uma das tags mais importantes em HTML.

1.1 Etiquetas mais comuns em HTML

Como vimos, a estrutura básica de uma página Web pode ser representada apenas por quatro etiquetas (tags). Vejamos para que servem:

<html> indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

<head> tag de cabeçalho. Habitualmente, onde se encontra o título da página que irá ser mostrado na barra de título do web browser. Existem outras tags para além do <title> que podem ser colocadas dentro do cabeçalho, como iremos ver mais à frente;

<title> título da página;

<body> zona onde deve ser colocada toda a informação a ser apresentada na página Web.

Esta são as etiquetas base de um documento html. No entanto, existem muitas mais, que serão apresentadas gradualmente ao longo do módulo.

Todas elas, não são case sensitive, isto é não são sensíveis a caracteres maiúsculos ou minúsculos: (ex: <body> igual a <BODY> igual a <Body>)

RECONHECIMENTO DE CARACTERES ESPECIAIS PORTUGUESES

Para que o HTML reconheça os caracteres especiais portugueses é necessário colocar na <HEAD> o seguinte código:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Comentários

Os comentários são largamente utilizados pelo programador. Servem como memorando, indicando o que cada parte do código é responsável por fazer, ou para comentar parte do código que não seja necessária a dado momento.

Um comentário é adicionado ao código através da tag

Exemplo:

(...)

<body>

A minha primeira página em bloco de notas!

</body>

(...)

AULA 1 - EXERCÍCIO 2

Copie para O GEDIT o código anterior e grave a página como AULA1_2.html.

Abra-a com o seu browser e verifique o resultado.

Ao longo deste módulo existirão muitos exemplos que pode copiar para o bloco de notas e verificar o seu resultado. Não se esqueça de no final gravar a sua página com a extensão html. Deve ter, também, em atenção que a maior parte dos exemplos não estão completos, daí existirem (...) antes e depois do código apresentado. Deve sempre completar os exemplos com as tags em falta.

Cor de fundo

Mudar a cor de fundo de uma página Web é uma das primeiras mudanças que qualquer um gosta de realizar. Para o fazermos usamos o atributobgcolor da tag <body>, embora este possa ser utilizado em outras tags que não esta, como veremos mais à frente. Os atributos são formas de personalizarmos o conteúdo das nossas tags. Neste caso permite-nos mudar a cor de fundo da nossa página.

O atributo bgcolor aceita valores como, palavras entre aspas (blue, red, yellow, green, chocolate, etc) ou valores hexadecimais #461B7E (neste caso seria cor púrpura). Estes valores correspondem ao RGB, isto é, cada grupo de dois dígitos indica o valor para Red, Green e Blue. Assim, no exemplo anterior, R=46, G=1B e B=7E.

Podem aceder ao URL http://www.computerhope.com/htmcolor.htm para obterem mais cores.

Exemplo:

(...)

</body>

(...)

1.2 Propriedades e formatação de páginas Web

A parte mais importante de um site é o seu conteúdo, isto é, a informação textual. Esta informação, à semelhança do que acontece quando escrevemos um texto, necessita de ser formatada. Neste ponto introduzem-se as tags responsáveis pela formatação de texto.

Formatação básica de texto

Seguem-se as tags responsáveis pela formatação básica de texto:

<b> negrito </b>

<i> itálico </i>

<u> sublinhado </u>

<s> ~~rasurado~~ </s>

<sub> índice ex: H₂O (o número 2 é o índice) </sub>

<sup> expoente ex: 2ⁿ (n é o expoente) </sup>

<big> aumenta um valor ao tipo de letra standard </big>

<small> diminui um valor ao tipo de letra standard </small>

<br> passagem de linha (simula a tecla Enter)

Todas as tags anteriores, com excepção da tag <br> necessitam ser fechadas ou serão aplicadas desde que são abertas até aos final do código HTML.

Exemplo:

(...)

<body>

<b> A minha <s>primeira</s></b> página em <i><u>bloco de notas </u></i><br><b>com uma quebra de linha!</b>

Um monitor de 22" é muito <big><big>grande</big></big> enquanto um monitor de 14" é muito <small><small> pequeno </small>

</small>.

Posso representar a fórmula química da água H<sub>2</sub>O ou uma potência de 2<sup>n</sup>.

</body>

(...)

Resultado:

AULA 1 - EXERCÍCIO 3

Copie para o GEDIT o código exemplo de cima, com o fundo em azul e grave com o nome AULA1_3.html.

De seguida abra-o no seu browser para verificar o resultado.

Títulos

Os títulos são as referências do nosso texto. Quando escrevemos um texto os títulos dividem os assuntos tratados ao longo da redacção. Uma página Web funciona da mesma forma. As tags responsáveis pela inserção de títulos são as <h1> até <h6>. Quanto menor a ordem do número, maior o tamanho do título, como se pode verificar no exemplo seguinte:

Exemplo:

(...)

<body>

<h1> Títulos H1 </h1>

<h2> Títulos H2 </h2>

<h3> Títulos H3 </h3>

<h4> Títulos H4 </h4>

<h5> Títulos H5 </h5>

<h6> Títulos H6 </h6>

</body>

(...)

Resultado:

AULA 1 - EXERCÍCIO 4

Copie para o GEDIT o código anterior e grave a página como AULA1_4.html.

Abra-a com o seu browser e verifique o resultado.

Parágrafos

Os parágrafos são representados pela tag <p>. Não necessitam obrigatoriamente da tag de fecho. Contudo, quando esta tag contém atributos deve ser fechada </p>. A tag apresenta como atributo mais importante o align.

Exemplo:

(...)

<body>

<p align="left"> Parágrafo alinhado à esquerda!

<p align="center"> Parágrafo alinhado ao centro!

<p align="right"> Parágrafo alinhado à direita!

<p align="justify"> Parágrafo justificado!

Frase após 3 parágrafos em branco

</body>

(...)

Resultado:

AULA 1 - EXERCÍCIO 5

Copie para o GEDIT o código anterior e grave a página como AULA1_5.html.

Abra-a com o seu browser e verifique o resultado.