Linux / PHP / Java / Designer

As melhores dicas estão aqui.

Resumo sobre HTML

| 1 Comentário

Resumo sobre HTML

Alinguagem HTML é uma ferramenta vital para internet e é muito fácil de aprender, isto é o que veremos a seguir.
Neste momento, você deve estar utilizando um browser como por exemplo o Internet Explorer para acessar esta página e ler este artigo.Você está vendo uma página da internet, um documento HTML, que significa Hiper Text Markup Language, alguma coisa como linguagem com marcações de hiper texto. Em outras palavras, um documento de texto especial, que permite o posicionamento de fotos, tabelas, links para outras páginas, tudo de uma forma muito simples de modo que qualquer criança aprende rapidinho a navegar por todo o site. E por falar nisso, "site" é uma palavra que vem do inglês e significa: lugar ou local.


Primeiros passos
Grande parte dos elementos vistos na tela do browser, como as fotos por exemplo, não estão realmente contidas no arquivo html, mas apenas referenciadas através do nome do arquivo da foto a ser exibida. O que você está vendo na tela, não é propriamente o arquivo html, mas o resultado da interpretação de um conjunto de instruções contidas neste arquivo. Por exemplo, uma instrução diz: "Pegue o arquivo da foto da aranha (bug.gif) e exiba-o na posição do topo da página à direita" outra instrução diz: "Exiba o texto a seguir na cor vermelha", e assim por diante.
Um arquivo html é na verdade apenas um "script",ou seja: um roteiro, que informa o modo como os vários elementos (texto, figuras, botões, etc) serão dispostos na tela do computador.

Este roteiro ou script é também chamado de "programa fonte". Um programa fonte é algo bem diferente da página gerada no browser. Dependendo de como (e por quem ) foi escrito ele pode parecer muito confuso e nada atraente.
Mas não se assuste, após ler detalhadamente este artigo você já conseguirá fazer sua primeira página html. Agora vamos ver como podemos ter acesso ao programa fonte de uma página da internet:

A grosso modo uma página web é um arquivo cujo nome tem uma extenção to tipo ".htm" ou ".html". Ao executar ou abrir este arquivo ele será automaticamente aberto pelo o browser, ou seja o programa de exibição de páginas web (por ex. o Internet Explorer). Mas se em vez do browser, nós deliberadamente forçarmos a abertura de um arquivo html usando um editor de textos comum como o Wordpad do Windows por exemplo, neste caso veremos o código do programa fonte e não mais aquela página que seria exibida pelo browser.
Basta usar um editor de textos e pronto! Você estará vendo um arquivo html como ele realmente é. A primeira vista pode parecer uma grande confusão onde o texto aparece misturado com uma grande quantidade de palavras desconhecidas, mas não vamos nos deixar intimidar pela aparente complexidade, na verdade é fácil aprender esta linguagem. Não desanime! coloque uma musiquinha para relaxar e vamos em frente!

Como estavamos dizendo, quando você estiver frente à frente com o programa fonte você terá o poder de alterar, apagar ou incluir novos elementos que serão mais tarde visualizados pelas pessoas em um browser qualquer. Embora seja verdade que qualquer editor de textos pode ser utilizado para criar um programa fonte html, é fortemente aconselhável que você esqueça essa idéia e trate de encontrar um editor específico, o que vai facilitar muito o seu trabalho. A boa notícia é que há inúmeros editores específicos gratuítos para HTML, os quais, oferecem vários recursos como por exemplo o de "sintax-highlight" (identificação de instruções apresentando-as em cores diferentes), browser embutido para testar o programa, ajuda on-line para consultas sobre a linguagem html, etc.
Não será dificil você encontrar um [*] que lhe agrade na internet ou então em CD's que acompanham as revistas afins.

Vamos agora dar uma olhada em alguns elementos básicos de um programa html:
A linguagem HTML é toda organizada através de atuação de instruções que ocorrem dentro de trechos delimitados com início e fim. Estas instruções delimitadoras são chamadas de TAGs. Por exemplo as TAGs <b> e </b> servem para delimitar o trecho de texto que se queira destacar em negrito, para isso no programa fonte o texto a ser destacada em negrito tem que ser escrita dentro da TAG assim:  <b>texto em negrito</b>

<!--OBS: < > e   são algumas sequencias especiais usadas para gerar os caracteres , e evitando confusões para o browser-->


A estrutura de um programa fonte: Veja a seguir como é o esqueleto básico de um programa fonte:

<HTML> Indicação do início do programa

<HEAD> Início do cabeçalho, onde estão as
informações de identificação ex.: título, autor, etc.

</HEAD> Fim do cabeçalho.

<BODY> Início do corpo principal do programa.
:
:
<!-- Este trecho é apenas um comentário do programador -->
:
:     Aqui fica o programa propriamente dito, onde são usadas
:     um grande número de TAGs para os mais variados fins, por ex.
:     para inserir imagens, criar tabelas, formulários, links, etc...
:
</BODY>
fim do corpo do programa.
</HTML> fim do programa.


As Tags
Tag é apenas uma outra forma de se referir a uma instrução html. Até este ponto da nossa abordagem, já utilizamos uma porção de Tags para construir esta página. Se você não as viu é porque ainda não abriu este arquivo em um editor de textos. Por isso, à partir desse ponto, se quiser compreender melhor o que estamos falando terá que examinar o programa fonte desta página.

Como fazer isso?!
É fácil: esta pagina web que você deve estar lendo agora em um browser está codificada em um arquivo de nome "didatico.htm". Para ver seu código fonte, primeiramente você deve salvá-la em uma pasta qualquer em seu disco rígido e em seguida use o seu o programa editor de textos para abrir este arquivo.
Como já foi dito, será muito mais fácil entender o programa fonte se você puder examiná-lo utilizando um editor específico para editar arquivos HTML. Você já arranjou um? Não?!  Bem se gosta de sofrer pode usar o Bloco de Notas mesmo, vai ser mais difícil entender o programa, pois ele não possui recursos apropriados para visualização e edição de arquivos HTML.
Há ainda a possibilidade de apenas visualizar o código fonte usando o visualizador integrado em seu programa de navegação: para isso procure no seu Browser pelo menu "Exibir" (View em inglês), e dentro dele há a opção "código fonte" (em inglês aparece como "page source" ou "document source") a qual possibilita exibir o código fonte, mas não será possível editá-lo.

Quando estiver vendo o código fonte não se assuste com a aparente confusão. Vamos com calma:
Primeiramente dê uma olhada em tudo, e veja que há alguns trechos delimitados pelas TAGs <!-- e  -->, estas são as TAGs de comentários do programador e não contém elementos válidos a serem exibidos no browser mas apenas anotações deixadas pela pessoa que escreveu o programa.
Usei estas anotações para explicar o funcionamento e documentar algumas regras de uso de várias TAGs, de modo que quem ler o código fonte terá mais explicações sobre a linguagem HTML.

Voltando a falar sobre as TAGs
Elas podem ser de dois tipos:
a)Isoladas:, como por exemplo <BR> que serve para indicar a mudança de linha no ponto do texto onde ela foi inserida.
b)Compostas: como por exemplo <B>texto em negrito</B>, formam um par indicando o início e o fim do trecho do programa sobre o qual estarão atuando (no exemplo dado servem para colocar o texto em negrito).
O que difere as TAGs isoladas das compostas é que as TAGs compostas possuem delimitadores de inicio "< >" e fim"</>" para indicar a região onde estão atuando. Já as TAGs isoladas são instruções mais simples que não requerem a delimitação do trecho onde estarão atuando. Note que as TAGs utilizadas no esqueleto do programa fonte mostrado acima são todas do tipo compostas.


Um exercício simples: mudar o tamanho dos caracteres
Devido ao fato de um mesmo documento em html ter que ser acessível em diferentes computadores com diferentes tamanhos de telas, estabeleceu-se um sistema proporcional de tamanho das fontes, o qual varia de 1 a 7.
A Tag isolada <BASEFONT SIZE=N> é posicionada logo no início do corpo principal do programa e determina o tamanho padrão da fonte utilizado em todo o documento. Para mudar o tamanho apenas de um determinado trecho, usamos a Tag composta: <FONT SIZE=+-N>..trecho..</FONT>. Nesse caso, somente o texto digitado em seu interior receberá o tamanho indicado por N que pode ser um valor absoluto de 1 a 7 ou então um acrescimo (+) ou decrescimo (-) de "N" pontos em relação ao BASEFONT SIZE que foi definido no início do programa.
Veja por exemplo esse S O B E E D E S C E, conseguido com a Tag <FONT SIZE=N> usando valores de N precedidos de sinal para determinar o tamanho de cada letra em relação ao BASEFONT SIZE. Altere apenas o BASEFONT SIZE no início do corpo do programa, e todo o texto será ampliado ou reduzido proporcionalmente, observando é claro o limite de 1 à 7.

Veja a seguir FONT SIZE=N sem o uso de sinais(+,-) para estabelecer valores fixos para o tamanho dos caracteres. (Nesse caso, o valor do BASEFONT SIZE, não interfere)

valor de N = 0
valor de N = 1
valor de N = 2
valor de N = 3
valor de N = 4
valor de N = 5
valor de N = 6
valor de N = 7


Outros recursos de texto

Bold ; Italic ; Underlined ; superscript e   subscript

<!--...antigamente tinha também o "PISCANDO" (mas a maioria dos browsers não aceitam mais esta TAG) -->
A seguir as TAGs para alinhamento de texto:

<P ALIGN="LEFT">à esquerda...

<P ALIGN="CENTER">ao centro...

<P ALIGN="Right">ou à direita.


One Comment

  1. esse site é muito bom me ajudou muito

Deixe uma resposta

Campos requeridos estão marcados *.