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
Francisco
Seg, 2007-10-01 17:01
Ligação permanente
Re: AULA 2: O que é o HTML
Uma vez criado um texto com o codigo em html no wordPad, como posso exibir isso no browser?
obrigado
aminharadio
Seg, 2007-10-01 18:05
Ligação permanente
Re: AULA 2: O que é o HTML
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
António Silva - aminharadio.com
Anónimo (não verificado)
Ter, 2007-10-02 15:24
Ligação permanente
Re: AULA 2: O que é o 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
Anderson (não verificado)
Qua, 2009-10-21 19:53
Ligação permanente
Re: AULA 2: O que é o HTML
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!
aminharadio
Qua, 2009-10-21 22:29
Ligação permanente
Re: AULA 2: O que é o HTML
Sim, está correcto, não deve inserir na tag body
No entanto o cabeçalho parece algo confuso...
Reveja-o.
António Silva - aminharadio.com
Marcelo Pereira... (não verificado)
Qui, 2011-05-05 02:42
Ligação permanente
O que é o HTML
Muito boa a explicação sobre o que é HTML, simples e fácil.
Parabéns pelo artigo
Abraços,
Marcelo Pereira Cavalini