Html também!Já sabe­mos o que é o HTML ? Então esta­mos pron­tos, certo ? Vamos abrir um edi­tor de texto sim­ples, pode ser o Notepad, e quer­e­mos fazer uma página WEB com o recurso à pro­gra­mação HTML.

Muito bem. Vamos começar!

Para ini­cia­r­mos esta linha de exer­cí­cios de maneira sim­ples, vou dizer exac­ta­mente o que pre­cisa fazer e depois explicar o que foi feito e o que está con­tido nes­tas lin­has de programação.

notepad

Passo 1 — Abrir o Notepad

Passo 2 — Inserir o seguinte texto (podem fazer copy-paste):

<html>
<head>
<title>A minha primeira página html</title>
</head>
<body>
Aqui está a minha primeira página html.
</body>
</html>

Passo 3 — Gravar o nome do ficheiro como mypage.html

Passo 4 — Fazer duplo-clique no ficheiro ou arras­tar para o nave­g­ador web.

O resul­tado que dev­erá sur­gir será:

My page!

Bem, agora que isto foi um sucesso, é necessário reti­rar daqui os pon­tos importantes.

Anal­isando o que foi feito reti­ramos que:

  1. Uma página web é com­posta por um ficheiro de texto nor­malis­simo (ou mais do que um mas vemos isto mais tarde);
  2. Uma página web é cri­ada com uma lin­guagem estru­tu­rada, com­posta por mar­cadores (tags) de for­matação (<html>,<head>,  <body>, <title>, etc) e con­teúdo (“A minha primeira página html”);
  3. Por ser estru­tu­rada, tem uma ordem e uma hier­ar­quia — primeiro vem a tag <html>, depois a <title> e depois a <body>
  4. Os mar­cadores — tags — encapsulam-se na sua hier­ar­quia — o <html> é supe­rior a todos e encap­sula tudo, o <head> e o <body> pos­suiem hier­ar­quias semel­hantes mas definem dados difer­entes, ambos per­tencem ao <html>, e o <title> — que define o título da página — está con­tido no <head>

Bonecas russas!A nível da estru­tura, temos de pen­sar nas bonequin­has rus­sas, ou seja, os mar­cadores englobam out­ros como as bonecas peque­nas estão inseri­das nas grandes. Se pen­sarem nas tags, temos tags de aber­tura (ex:<html>) que fun­ciona como a tampa de cima da boneca russa, e a tag de fecho (ex:</html>) que fun­ciona como a tampa de baixo. Entre uma e outra fica o con­teúdo ou out­ras mar­cações com as suas tags de aber­tura e fecho.

No caso da tag <html>, pode ser dito que esta rep­re­senta a boneca maior, dado que, se repararem, a sua tag de aber­tura é a primeira mar­cação efec­tu­ada no código que escreve­mos e a sua tag de fecho é a última mar­cação efec­tu­ada, o que quer dizer que esta tag engloba TODO o restante código.

Agora para a expli­cação dos marcadores:

<html> — É a tag ini­cial do html e que define que o html vai começar;
<head> — Define a posição e as mar­cações do cabeçalho da página, onde se encon­tra o título, entre out­ras coisas;
<title> — Mar­cador que define exclu­si­va­mente o título — é a sua única função;
<body> — Define o corpo do doc­u­mento. Tudo o que aqui estiver vai apare­cer no corpo do nave­g­ador web;

Este íni­cio foi, para quem já sabe, de facto muito sim­ples, mas é impor­tante ini­cia­r­mos com pas­sos pequenos e para quem não con­hecia e con­seguiu hoje criar uma página web, os meus parabéns e con­tin­uem a ler arti­gos deste género aqui no blog.

Bons pro­jec­tos!

Um abraço e tudo de bom,

0 comments