O que é HTML?

HTML é a "língua mãe" do seu navegador.

Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.

HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz do HTML. Para visualizar o código HTML de uma página use o menu "View" (Ver) no topo do seu navegador e escolha a opção "Source" (Código fonte).

Ver o codigo fonte

Para quem não conhece, o código HTML pode parecer complicado, mas este tutorial irá tornar as coisas claras para você.
Para que devo usar o HTML?

Se você quer construir websites terá que conhecer HTML. Mesmo que você use um programa para criar seu website, tal como o Dreamweaver, um conhecimento básico de HTML será necessário para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notícia é que HTML é fácil de aprender e de usar. A partir das duas próximas lições você já terá aprendido como construir seu primeiro website.

HTML é usado para construir websites. É simples!
OK, mas o que significa H-T-M-L?

HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que você precisa saber por enquanto. Contudo, vamos detalhar isto.

* Hyper é o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caçado por gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net.
* Text é texto e não há mais nada a acresentar.
* Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc
* Language significa linguagem e é exatamente o que HTML é; uma linguagem. A linguagem HTML usa muitas palavras do inglês.

Neste tutorial você aprenderá XHTML (Extensible HyperText Mark-up Language) que nada mais é do que uma maneira mais bem estruturada de escrever HTML.

Agora que você já sabe o que é HTML (e XHTML) vamos começar aplicando eles para: construir websites.

Inserindo Imagens no HTML

Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela.

Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.

A tag para inserir uma imagem em sua página é a seguinte:



Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas já seria o suficiente, mas com o tempo você vai precisar usar os outros atributos.

- Atributos de Imagem

- Width e Height
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais rápido.

Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho de uma figura como você desejar, porém não recomendamos que você redimensione as imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para carregar. Se você tem uma página com galeria de imagens e uma "pré-vizualização" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.

- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.

- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero.

- Dicas e Formato de Arquivos de imagem
- TAMANHO EM Kb:
Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens.