[HTML] Primeira Lição

Postado Maio 2, 2011 14 anos

Capítulo: 2/xx
Autor: Guilherme.
Nível de dificuldade: :staropt: :staropt: :staropt: :staropt:
Próxima Aula: -
Aula Anterior: Introdução

Antes de começar a fazer o primeiro exercício tenha em mente que você aprendeu o básico e reforçou isso com as Convenções da Linguagem HTML citadas abaixo.

:reload: Convenções da Linguagem HTML

Toda linguagem de programação possui uma padronização. Antes de começarmos a entender cada comando, é necessário conhecer alguns desses padrões.

Você pode utilizar editores de texto que salve no modo texto para escrever um documento HTML, ou seja, não é necessário possuir nenhum software específico para desenvolvimento de sites. Mas não se esqueça de alterar a extensão do arquivo para .HTML ou .HTM ao gravar.

Como o HTML é uma linguagem interpretada pelo browser, não é necessário nenhum compilador ou ambiente de desenvolvimento.

No ambiente Windows você pode utilizar o Bloco de notas para escrever os documentos HTML.

Os comandos executados na linguagem HTML são feitos através dos chamados Tags. Eles sempre são escritos entre os sinais de menor (<) e maior (>) e podem ser escritos em letras maiúsculas e minúsculas. Para esse curso, os comandos serão mostrados em maiúsculo, para melhor vizualização. Exemplos:

Alguns comandos da linguagem HTML precisam de um ou mais complementos. Estes complementos são chamados de parâmetros. No exemplo abaixo, o tag indica que será mostrada uma figura como parâmetro, é passado o nome da figura:
<IMG SRC="foto_tibiaking.jpg">
Outros comandos HTML precisam de um tag de abertura e outro de fechamento. No exemplo abaixo, utilizamos uma tag para indicar o inicio do negrito, e outro tag para indicar o termino, a palavra TibiaKing aparecerá em negrito.
[B]TibiaKing[/b]
Também é possível misturar configurações, no exemplo abaixo, a palavra TibiaKing vai aparecer em negrito e ao mesmo tempo em itálico:
[B][I]TibiaKing[/I][/B]

Primeiro Exercício Todo documento que você fizer em HTML deve iniciar com o tag: :excl:

Cabeçalho O cabeçalho de um documento HTML aparece logo após o tag de início do documento, normalmente ele contém informações da página que você está desenvolvendo. Também é necessário uma tag para indicar o início e o término do cabeçalho: :excl:

Título Você já deve ter percebido que todas as janelas do Windows possuem um título. Este título está localizado na parte superior de cada janela. É possível utilizar um tag para inserir o título na janela. No exemplo abaixo, aparecerá a frase TibiaKing - Tudo Sobre Tibia, OTServ e BOTs no título da janela do browser: :excl:

Corpo da Página Após o cabeçalho da página, deve aparecer o Corpo. Normalmente este corpo é muito maior que o cabeçalho, pois diz respeito ao conteúdo da página, ou seja, o que realmente irá aparecer em sua home-page. Os tags para abertura e fechamendo do corpo da página são:

Quando terminar de digitar o texto, deve-se salvar este documento com extensão HTML. para isto, selecione o menu Arquivo e depois escolha a opção Salvar.

Para o nome do arquivo informe o nome desejado, em nosso exemplo foi escolhido o nome ex1.html. Depois clique sobre o botão salvar.

Para vizualizar seu trabalho, usa-se qualquer Navegador, sendo os mais comúns: Internet Explorer, Mozilla Firefox, Google Chrome, Safari e Opera.

Bom galera, por enquanto é só. Espero que gostem e outro dia faremos nossa próxima aula.

Atenciosamente, Guilherme.

<HTML>

E deve terminar com o tag:

</HTML>

<HEAD>

</HEAD>

<TITLE>TibiaKing - Tudo Sobre Tibia, OTServ e BOTs</TITLE>

Os tags <TITLE> e </TITLE> devem aparecer entre os tags de abertura e fechamendo de um cabeçalho (<HEAD> e </HEAD>).

<BODY>

</BODY>

Foi falado anteriormente que o Bloco de Notas do Windows, que por ser um editor de textos, pode ser utilizado para digitar um documento HTML. Dentro do Bloco de Notas, digite o texto como mostra o exemplo a seguir, pressionando a tecla <Enter> no final de cada linha.

<HTML>

<HEAD>

<TITLE> Exercício 01 - TibiaKing</TITLE>

</HEAD>

<BODY>

Aprendi a fazer minha primeira Home Page no TibiaKing.com

</BODY>

</HTML>