O Edit foi um dos primeiros e mais simples editores de texto. Caracteres ASCII puro sem extravagâncias. Depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovações, que infelizmente não eram compatíveis entre si. A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios. Com o passar do tempo foram-se criando formas de transformar de um padrão para outro - Ex.: Word => Carta Certa. Para evitar que ocorram incompatibilidades como esta na Internet foi desenvolvido o padrão HTML.
O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na Internet. Seus arquivos são de texto puro com códigos de marcação incorporados chamados Tags. Isso significa que os arquivos em HTML não contêm nada além de letras, números, sinais de pontuação e caracteres em geral que podem ser impressos. Um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com a extensão .htm ou .html, exemplo: index.htm.
A grande vantagem da linguagem HTML é que, por ela ser muito simples, não necessita de conhecimentos prévios de programação. Outro fator é o de não precisar de um editor específico, qualquer um serve (esta homepage, por exemplo, foi criada com o WordPad), mas o editores exclusivamente HTML existem e são denominados WYSIWYG, ou seja What You See Is What You Get - O que você vê é o que você tem.
Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster, porém, como tudo na Rede está em fase de transição, estes editores ainda deixam muito a desejar tanto na apresentação de novos recursos do HTML, que levam tempo para serem incorporados aos editores, como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem. Quando isso acontece o webmaster, que conhece o HTML, simplesmente entra no código fonte e pronto. Não tem como o browser não cumprir uma ordem direta. Entrar no código fonte para suprimir as redundância é um grande artifício, principalmente para diminuir o tamanho do arquivo. Taí outra boa razão para estudar HTML, promover a independência de sua criatividade.
Os códigos de marcação de uma página HTML também são conhecidos como código fonte e para acessá-los basta posicionar o ponteiro do mouse sobre a página, clicar no botão direito e selecionar a opção [Exibir código fonte], então você verá algo parecido com isto:
No código fonte está inserida toda inspiração do criador da página, suas idéias de formatação, truques e macetes, seus scripts que levou algumas noites em claro para cria-los, ou os scripts de um amigo, ou mesmo copiado da Web de algum site de algum autor desconhecido do leste europeu (que por sua vez reclama seus direitos de copyright), mas que para descobri-lo o webmaster levou as mesmas noites em claro pesquisando infinidades de site...
Por isso muitos webmasters não gostam que os internautas ficam xeretando o código fonte de sua home page, então é comum encontrarmos sites com bloqueio ao código fonte. Eu, pessoalmente, acho essa questão tudo besteira, visto que, atualmente, é praticamente impossível controlar qualquer informação que se coloca na Rede. Penso que estarei trazendo maior benefício à comunidade Web e à sociedade repassando os conhecimento que adquiri sem restrições. Assim este tutorial ensina como bloquear ou romper o bloqueio de acesso ao código fonte.
Uma coisa importante a ser observada sobre o código de marcação HTML é que ele não faz distinção entre letras maiúsculas (CAIXA ALTA) e letras minúsculas (caixa baixa). Tanto faz escrever <FONT> como <font>. Porém... se o browser não considera letras maiúsculas ou minúsculas o mesmo não acontece com os servidores, onde sua página está hospedada. Se você criar um link para um arquivo chamado tutorial.htm e ele estiver com o nome Tutorial.htm, o servidor simplesmente não irá encontrá-lo. Notou a diferença: tutorial.htm e Tutorial.htm? É por isso que muitas vezes o servidor retorna com uma mensagem de "Arquivo não encontrado" quando o arquivo está lá.
Mas isso não é tudo, existem outras regras que devem ser obedecidas ao nomear seus arquivos: Os nomes não devem conter mais que 32 caracteres. Os nomes não devem conter espaços em branco, use o símbolo Underline ( _ ) para substituir o espaço em branco, assim, ao invés de nomear o arquivo como laje branca.htm, nomeie-o como laje_branca.htm.
O ponto final deve ser usado UMA ÚNICA VEZ para separar a extensão (de três letras) que classifica o arquivo. Parece ser um absurdo eu estar enfatizando isso, mas não é. Tem muita gente inventando moda por aí.
| ' ^ ~ ç | Acentos, til, cedilha |
| ; : , | Ponto e vírgula, dois pontos, vírgula |
| < > | Sinal de maior ou menor |
| # & * | Trelha, E comercial, asterístico |
| ( ) [ ] { } | Parênteses, chaves, colchetes |
| ! ? $ + | Exclamação, interrogação, cifrão, mais |
| ` " | Apóstrofe, aspas |
| / | \ | Barra, pipe, barra invertida |
Portanto, preste muita atenção ao nomear seus arquivos ou ao referencia-los através dos links.
O HTML é na verdade uma Linguagem de Marcação. Com ela você insere marcações (tags), na forma de elementos HTML, no conteúdo da informação que será publicada. As marcações informam ao browser como formatar o conteúdo em Cabeçalhos, Parágrafos, Listas e Tabelas. Informam ainda onde inserir Links em hypertexto e onde inserir Imagens e outros Objetos.
As tags são delimitadas entre os sinais de menor "<" e maior ">". A maioria das tags funcionam em dois tempos, ou seja, você tem que especificar onde começa e onde termina, por exemplo: <tag>texto</tag>, onde o sinal "/" significa o fim da atuação do tag.
Nunca deve-se 'embaralhar' as tags, elas podem vir uma dentro da outra, porém a que começou primeiro tem que necessariamente terminar por último, assim:
Nunca misture a seqüência, como por exemplo:
Isso segue a lógica LIFO (Last In, First Out), ou seja, "O último aberto deve ser o primeiro a ser fechado".
Nem todas as tags necessitam ser terminadas. A tag que significa linha em branco não necessita de fim como também a tag de barra horizontal. Como não são todas as tags que são relacionadas com textos, a tag que significa imagem não necessita de terminação e nem se relaciona necessariamente com texto.
O documento HTML normalmente possui extensão .htm ou .html. Essa diferença de uma letra a mais na extensão do arquivo (o "L") refere-se aos novos sistemas, como UNIX ou Windows 95/NT que permite mais letras, ao passo que os sistemas antigos permitem apenas três. Isso quer dizer que se você colocar 4 letras na extensão de seu arquivo ele não será lido por algum computossáuro que deve existir por aí. Existe uma tag que identifica o documento como sendo HTML, é a <HTML>, que necessariamente é a primeira que aparece no texto, e sua terminação </HTML> é obviamente a última. Em seguida define-se o Cabeçalho com <HEAD> e </HEAD>
Dentro do cabeçalho podem existir diversas outras tags específicas e scripts em diversas linguagem, porém o que sempre existe é a definição do título, com <TITLE> e </TITLE>. Este título é o que irá aparecer na barra superior da janela do browser, junto com o nome do mesmo. Fora do cabeçalho porém dentro das tags <html>, existe o "corpo" definido por <BODY> e </BODY>. Assim, numa visão geral temos:
|
|
Estas são as tags básicas de todo arquivo html.
Normalmente, o arquivo index.htm é o arquivo
default dentro de um diretório. Quando indicamos um endereço (link) e não
especificamos um arquivo dentro de um diretório, o browser procura pelo arquivo index.html. Se esse arquivo
não existir, o browser apresentará uma listagem dos arquivos contidos naquele diretório, o que pode não
ser nosso desejo. Por exemplo, o endereço deste tutorial é
http://orbita.starmedia.com/~edaurelio/index.htm
Note que a última referência é o arquivo index.htm. Agora experimente digitar somente
http://orbita.starmedia.com/~edaurelio/
na barra de endereços para ver o que acontece. O browser irá encontrar o arquivo index.htm automaticamente e abri-lo. Esta é uma rotina padrão dos browsers, sempre abrir o index do diretório solicitado. Porém se nesse diretório não existir tal arquivo, o browser assume a segunda condição que é abrir o diretório da homepage.