AULA 2: O que é o HTML

Separadores primários


AULA 2: O que é o HTML


Nesta aula vamos aprender o que é o html, o que é um browser e quais os que estão disponíveis, vamos aprender o que são tags html, ter o primeiro contacto com o html de uma página, e explorar alguns deles.


O QUE É O HTML


Da mesma forma que, para comunicar utilizamos uma língua (o português, o inglês etc), os programas de computador utilizam uma linguagem para tomarem forma, e os documentos utilizam um formato.
Os programas de computador podem ser escritos em várias linguagens como o Visual Basic, o Visual C++ entre outros.
Os documentos podem, por exemplo, estar em formato word, ou excel.
As páginas web utilizam o formato HTML. Que significa Hyper Text Markup Language.
Algumas pessoas consideram o HTML uma linguagem, como se fosse uma linguagem de programação. Quer se considere formato ou linguagem, o HTML é o que dá forma às páginas web.
Uma página web não é mais que um ficheiro de texto que contém comandos HTML.
O termo 'página internet' ou 'página web' refere-se normalmente a uma página html.
Um 'sítio web', 'sítio internet' ou 'web site' é, normalmente, um conjunto de páginas web. Por exemplo, o 'web site' da MINHARADIO é o conjunto de páginas web presentes no servidor da MINHARADIO. Quando introduz no browser o endereço de um 'web site' aparece a página web de entrada do site procurado.


OS BROWSERS


Um browser é um programa que permite ver páginas web. Quando utilizamos um browser e introduzimos um endereço de uma página, o programa lê o ficheiro, interpreta o html que ele contém, e apresenta a página web no ecrã.
Existem diversos browsers disponíveis, sendo os mais conhecidos o Internet Explorer, o Netscape Navigator, o Mozilla e o Opera.
O Internet Explorer é o browser mais utilizado, seguido do Mozilla e Opera.


O que é um 'tag'?


Um tag é um comando que diz ao browser que vai carregar a página o que deve aparecer ali.
Como deve imaginar existem tags para uma infinidade de coisas, desde tags que inserem texto, dizem qual o formato desse texto, imagens, sons, etc.

A maioria dos tags são usados aos pares, tendo um para abrir a instrução e outro para a fechar.
Por exemplo, o tag que escreve o texto em negrito (bold) envolve o texto que deverá aparecer destacado. Repare:

-------------------------------------------
Este é o <b>texto a ser destacado</b>.
-------------------------------------------

-O que está dentro dos tags aparece em negrito (quando o aplicar na página)
-Repare na diferença do início da instrução e do fim. O fim tem sempre uma barra inclinada para a direita, que indica que ali acaba o tag.

Esta explicação é fundamental para compreender todo o processo da feitura de páginas web, já que, para ela o ser de facto, deverá conter o código dentro de um tag característico: o tag <html>

Este tag indica que tudo que está dentro dele está em html. Este tag é também usado com o seu par correspondente no fim: </html>

---------------------------------------------
<html>
Tudo que fizer terá que estar aqui no meio
</html>
---------------------------------------------


Vamos então saber o que deveremos ter dentro do tag <html>. Antes de tudo temos que dar um nome à página. A nossa página irá chamar-se 'A minha primeira página'. Para darmos um nome utilizamos o tag <title>. Se prestou atenção à explicação dos tags acima, já deve ter percebido como este se irá comportar:

---------------------------------------------
<html>

<title>A minha primeira página</title>

</html>
---------------------------------------------

Vamos ver o resultado?
Escreva o que está entre as linhas num ficheiro de texto cru. [Não use o word ou qualquer processador de texto complexo. Use o notepad (bloco de notas)]
Crie uma pasta no seu disco, grave lá dentro esse ficheiro com a extenção .html e abra-o com o seu browser.
Não tem nada... mas repare na barra em cima do browser. Contém o nome da sua página!


UM APARTE:


Como o ficheiro agora tem extenção .html, em vez de ser o bloco de notas o programa associado, já será o browser. Se preferir, mude-lhe a extenção para .txt, se usa o Internet Explorer da Microsoft, vá a view-source no menu do browser, ele abrir-lhe-á o bloco de notas com o código da sua página. Pode passar a trabalhar sempre aqui. (O view source é útil para ver o código das páginas e assim perceber como se fazem algumas coisas em html, podendo assim modificar e trabalhar à vontade.

Voltemos ao bloco de notas.

Já indicámos que aquele ficheiro está em formato html e demos um nome, vamos então tratar do seu conteúdo. O tag que indica onde está o conteúdo visível é o <body> este deverá estar dentro do <html> e depois do <title>. Assim:

---------------------------------------------
<html>
<title> A minha primeira página </title>
<body>

A minha primeira página

</body>
</html>
---------------------------------------------


Sim, tudo que estiver dentro do <body> é visível.
Se for espreitar o resultado (se usou o view source, grave e clique no botão de refrescar/recarregar a página) verá não só o título como também a frase que está entre <body>. A sua página já tem texto. Este é pequeno e sem graça, um título deveria ser algo que chamasse mais a atenção. Pois cá vamos. Para isto usamos o tag <h> (de header-cabeçalho). Com o <h> podemos definir o tamanho do texto lá dentro. O <h> pode ter valores entre 1 e 6 em que o valor 1 é o prioritário, logo maior, e o 6 é o menos destacado (menor). O texto entre <h> será sempre mais carregado, mesmo que seja pequeno e tem a particularidade de 'viver' num parágrafo sempre separado de qualquer outra coisa que inserir na página.

Experimente:


---------------------------------------------
<html>
<title> A minha primeira página </title>
<body>

<h1>A minha primeira página</h1>
<h2>A minha primeira página</h2>
<h3>A minha primeira página</h3>
<h4>A minha primeira página</h4>
<h5>A minha primeira página</h5>
<h6>A minha primeira página</h6>


</body>
</html>
---------------------------------------------


Escolha o <h> que mais lhe agrada e apague os outros. Nós vamos optar pelo tamanho 1.


Um outro tag muito utilizado é o <center> não vamos aprofundar muito as propriedades deste, já que pensamos ser óbvio o seu funcionamento. Portanto, para ter o seu título centrado na página envolva-o no tag <center> desta maneira:

<center><h1>A minha primeira página</h1></center>

Nesta fase podemos acrescentar algo importante a tudo o que já aprendemos, já que é a primeira vez que nos deparamos com uma sobreposição de tags e damos mais do que uma característica a um componente.
Os tags influenciam o que lá estiver dentro. Ponto final. Ou seja:


<center><h1>A minha primeira página</h1></center>

é precisamente o mesmo que:

<h1><center>A minha primeira página</center></h1>


Trocámos a ordem dos tags, mas isto não influência o resultado. Mas atenção, o primeiro tag a contar da esquerda deverá ser também o primeiro a contar da direita. Evite portanto uma situação do género:

<center><h1>A minha primeira página</center></h1>

Embora os browsers recentes ignorem este erro e respeitem a ideia inicial, isto é considerado um erro, já que não podemos esquecer os browsers mais precários que podem ter problemas com este género de situações.


O Texto própriamente dito.

Depois da casca, o miolo. Já temos um nome e um título, vamos escrever um texto de boas vindas, por exemplo. Escreva-o apenas, mais tarde iremos ensiná-lo a tornar o seu texto mais apelativo.
Como exemplo vamos escrever:


---------------------------------------------
<html>
<title> A minha primeira página </title>
<body>

<center><h1>A minha primeira página</h1></center>

Olá, esta é a minha primeira página na Internet. Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a inserir texto. Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma coisa. Por exemplo, já sei que se quizer este pedaço de texto centrado, só preciso de pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste texto. Assim fica tudo centrado, já que está tudo dentro do tag.


</body>
</html>
---------------------------------------------

Leu o que escreveu? Não mude a posição do tag center, vamos manter o texto alinhado à esquerda.

O texto não ficou mal, mas está demasiado corrido, sem parágrafos. Pois há uma solução, o tag <p> ou o tag <br>. Estes tags não precisam de ser fechados, apenas indicam que ali occorreu uma quebra. Estes tags quebram o texto no sítio onde os inserir, mas com uma diferença: o <p> não só quebra como insere uma linha em branco depois da quebra; o <br> apenas quebra a linha. Vamos experimentar? Escreva:

---------------------------------------------
<html>
<title> A minha primeira página </title>
<body>

<center><h1>A minha primeira página</h1></center>

Olá, esta é a minha primeira página na Internet. Ainda estou a aprender como estas coisas se fazem e agora estou a aprender a inserir texto.
Cá vai um parágrafo:<p>
Isto não é nada complicado, as regras básicas repetem-se e é sempre a mesma coisa.
Cá vai um line Break:<br>
Por exemplo, já sei que se quizer este pedaço de texto centrado, só preciso de pegar no fim do tag 'center' que está lá em cima e colocá-lo no fim deste texto. Assim fica tudo centrado, já que está tudo dentro do tag.


</body>
</html>
---------------------------------------------


Até aqui já deve saber:

-Criar uma página html
-Dar um nome à sua página
-Inserir um título
-Inserir texto
-Centrar texto
-Criar parágrafos e quebrar linhas de texto


Comentários

Uma vez criado um texto com o codigo em html no wordPad, como posso exibir isso no browser?

obrigado

Muito simples, salva o ficheiro com a extensão htm ou html.
Para abrir basta clicar. O browser pré definido abrirá o ficheiro.

Por exemplo: teste.htm ou teste.html

Note que se estiver a construir uma página pessoal, o ficheiro de entrada tem de ser obrigatoriamente index.htm ou index.html

Obrigado pela resposta!
mas decidamente nao tou a conseguir...
estou a dar os meus primeiros passos em criaçao de sites. Introduzi o codigo de html no bloco de notas, depois fecho e gravo o ficheiro, seguidamente mudo o nome do ficheiro com uma extençao .html (index.html) ao abrir novamente o ficheiro aparece o texto normal... poderia me explicar passo a passo como posso criar e abrir no browser um ficheiro wordpad...

Obrigado

Gostaria de saber se meu código está correto, pois tenho dúvida se o frameset deve esta dentro do body, veja meu código. Obrigado.

My page

if (window != top) top.location.href = location.href;
if (( ( navigator.appVersion.indexOf( "MSIE" ) > 0 ) &&
( navigator.appVersion.indexOf( "Windows CE" ) > 0 ) ) ||
( navigator.appVersion.indexOf( "240x320" ) > 0 ))
{
var encontra = navigator.userAgent.toLowerCase();
if (encontra.indexOf("smartphone") + 1)
{window.top.location = "http://www.mysitepocket.com/";}
else
{window.top.location = "http://www.mysitepocket.com/";}
}
else if (window.innerWidth + "x" + window.innerHeight == "688x553")
{window.top.location = "http://www.mysitepocket.com/";}
//Fim
var detect = navigator.userAgent.toLowerCase();
if ((detect.indexOf('iphone') > 0) && (parent.document.URL.indexOf('iphone') == -1)){
top.location.href='http://www.mysitepocket.com/index.html';
}

Seu navegador não suporta JavaScript!

Seu navegador não suporte frames!

Sim, está correcto, não deve inserir na tag body
No entanto o cabeçalho parece algo confuso...
Reveja-o.

Muito boa a explicação sobre o que é HTML, simples e fácil.

Parabéns pelo artigo

Abraços,

Marcelo Pereira Cavalini


Faça um donativo!

Faça um donativo!

Agora é mais fácil com Paypal!

Com o paypal.me pode contribuir para o site em qualquer moeda e em qualquer valor com a segurança desta plataforma.

Clique aqui para ajudar com o que quiser, com o que poder.