Aprender HTML – Tutorial básico do código HTML

Aprender HTML – Neste Tutorial do código HTML vai adquirir o conhecimento básico para construir um site em HTML.

Aprender HTML – Estrutura do Código

O código HTML tem uma estrutura predefinida que utiliza marcas como <html>, <head>, <title>, <body>. à parte algumas excepções, as marcas que abrem devem ser fechadas usando /. Assim, às marcas de abertura anteriores correspondem as marcas de fecho </html>, </head>, </title>, </body>.

Os conteúdos HTML são colocados entre as marcas <body> e </body>.
Pode utilizar um editor de texto simples como o Notepad (Bloco de Notas) para editar os ficheiros HTML e deve gravar sempre esses ficheiros com a extensão .html ou .htm.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Documento HTML Simples

A estrutura do código HTML inicia-se com <html> e termina com </html>.
O conteúdo do cabeçalho, entre <head> e </head>, não é visível.
O conteúdo inserido entre <title> e </title> aparece na barra de título do navegador.
O conteúdo apresentado ao visitante no navegador é o que está entre as marcas <body> e </body>, neste caso, o texto: “Este é o seu primeiro documento feito em HTML.”.

Aprender HTML – Formatar Texto

O texto pode ser formatado inserindo-o entre marcas adequadas. No exemplo seguinte mostra-se como formatar conteúdos recorrendo a diversas marcas HTML.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Formatar texto em código HTML

O texto inserido entre <b> e </b> aparece em negrito.
O texto inserido entre <i> e </i> aparece a itálico.
O texto inserido entre <sup> e </sup> aparece sobrescrito.
Todas as mascas devem ter o fecho correspondente, com excepção de algumas como a marca <br>.
É indiferente colocar as marcas de abertura e fecho na mesma linha ou não (ver na figura acima <b> </b> e <i> </i> ).
É possível dispensar as marcas <head>, <title> e correspondentes fechos.

Embora muitos tutoriais apresentem as marcas HTML escritas em maiúsculas, as últimas especificações do código HTML recomendam que as marcas se escrevem em minúsculas.

Aprender HTML – Código das cores

Em código HTML, as cores poder ser especificadas através de alguns nomes constantes predefinidos ou no formato RGB, no qual as cores são especificadas pela sua quantidade de vermelho (red), verde (green) e azul (blue).

O formato RGB utiliza a notação #RRGGBB, na qual o símbolo # é seguido de seis dígitos, organizados em pares, de 00 a FF (Em notação hexadecimal, o número FF representa o decimal 255).
– Os 2 primeiros indicam a quantidade de vermelho;
– Os 2 seguintes indicam a quantidade de verde;
– Os 2 últimos indicam a quantidade de azul.

Apresentam-se a seguir dois exemplos de utilização desta notação:

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Linha com Texto Vermelho em código HTML

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Página com cor de fundo em código HTML

Apresentam-se em seguida exemplos de cores em código HTML:

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Exemplos de cores em código HTML

Existem 256 cores consideradas seguras. Os códigos das cores seguras são obtidos da seguinte forma:
– Em cada um dos 3 pares os dois dígitos são iguais (Por exemplo um cinzento #C0C0C0 não é uma cor segura. O cinzento #999999 já é uma cor segura);
– Os únicos dígitos permitidos são 0, 3, 6, 9, C, F.

Algumas cores podem ser especificadas pelo seu nome. É no entanto preferível usar o código HTML da cor, umas vez que é essa a recomendação do W3 Consortium.

Aprender HTML – Tipo de letra, tamanho e cor

O texto é formatado utilizando o parâmetro style na marca <p>.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Tipo de letra, tamanho e cor em código HTML

Ao parâmetro font-family atribui-se o valor verdana.
Ao parâmetro font-size atribui-se o valor 100%.
Ao parâmetro color atribui-se o valor blue.
Esta é uma utilização simples de folhas de estilo. As folhas de estilo têm muitas outras potencialidades.
Usualmente estão disponíveis as fontes arial, times e verdana.

Aprender HTML – Separar linhas no texto

Para criar mudanças de linha há que utilizar marcas separadoras, como <br>, ou um par de separador <p> </p>.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Separação de linhas em código HTML

O par <p> </p> introduz uma mudança de linha (linhas 5 e 6) com um espaçamento maior do que o introduzido pela marca <br> (linha 7).

As marcas <pre> e </pre> fazem com que os parágrafos e espaços sejam apresentados tal como estão (linhas 10 a 12).

Os números de linha neste e nos outros exemplos não são para introduzir. Servem apenas para ajudar a leitura do código HTML nos exemplos.

A linha <html><head><title></title></head> (linha 1) mostra que é indeferente colocar marcas seguidas ou em linhas separadas.

Aprender HTML – Inserir Imagens

As imagens são inseridas através da marca img e correspondente parâmetro src que indica a localização da imagem.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Inserir Imagens em código HTML

Em <img src=”…”> indica-se a origem da imagem a apresentar. Usualmente o ficheiro de imagem é um ficheiro com extensão .gif ou jpg.

Os parâmetros width e height indicam, respectivamente, a largura e a altura com que se pretende apresentar a imagem. O atributo border=”0″ (linhas 3 e 5), opcional, evita que se realce a fronteira da imagem.

A sintaxe a utilizar para inserir imagens fixas (linha 3) é exactamente igual à usada para imagens em movimento (linha 5), embora neste último caso se deva recorrer a um gif animado.

O ficheiro de imagem pode ser um ficheiro local na mesma pasta (linha 3).

Pode também ser um ficheiro local noutra pasta (linha 7) ou um ficheiro existente na WWW (linha 9). A localização de imagens pode recorrer a endereços absolutos ou relativos.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Formatar e alinhar imagens com texto em código HTML

Aprender HTML – Inserir Imagens com Hiperligações

As imagens são inseridas através da marca img e correspondente parâmetro src.

Aprender HTML - Tutorial básico do código HTML

Aprender HTLM – Inserir Imagens com Hiperligação

Em <a href=”…”> indica-se o destino da hiperligação. O destino da hiperligação pode ser: um ficheiro local na mesma pasta (linha 3); um ficheiro local noutra pasta (linha 8); uma página qualquer na WWW (linha 11).

As linhas 8 e 9 podem ser criadas para criar miniaturas (bufalo.gif) que apontam para a imagem maior (bufaloBig.gif).

Aprender HTML – Hiperligações

As hiperligações podem apontar para um ficheiro do mesmo sítio ou para um local qualquer da Internet. Numa hiperligação há que definir o destino e o texto apresentado ao visitante.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Formato das Hiperligações em código HTML

A marca <a…> (âncora) tem o parâmetro href=…, com a referência da hiperligação, e fecha com a marca </a> (linhas 3,5 ou 7).

Entre as marcas <a…> e </a> coloca-se o texto que deve aparecer no local da hiperligação (linhas 3,5 ou 7).

Na linha 7, o parâmetro target=”_blank” abre o conteúdo numa nova janela.

Nas linhas 3 e 7 parte-se do pressuposto do que ficheiro1 se encontra na mesma directoria que o documento actual.

Aprender HTML – Hiperligações para Locais Específicos de um Documento

Quando se pretende que a hiperligação aponte para um local específico do documento, há que proceder da seguinte forma:

– No documento que é destino da hiperligação, definir o local do texto para onde a ligação aponta, atribuindo-lhe um nome: <a name=”local1″>.
– Definir a hiperligação para esse local: <a href=”ficheiroDestino.html#local1″>.

Crie um ficheiro HTML e dê-lhe o nome fich2.html. Introduza nesse ficheiro, num local à sua escolha dentro do corpo do documento, a seguinte linha de código:

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Colocar marca num local específico do documento

Crie um ficheiro HTML e dê-lhe o nome fich1.html. Nesse ficheiro, introduza o seguinte código:

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Inserir hiperligações para um local específico de um documento

Em <a name=”…”> cria-se o nome de um local de destino. Podem-se criar vários locais de destino num mesmo ficheiro.

Em <a href=”…”> aponta-se para um local de destino, escrevendo o nome do ficheiro, seguido do separador # e do nome do local de destino dentro desse ficheiro.

Os locais de destino podem estar no próprio ficheiro ou noutro, como no exemplo acima.

Esta técnica é útil para criar sistemas de navegação e índices que apontam para o respectivo conteúdo.

Aprender HTML – Endereços Absolutos e Relativos

Existe frequentemente a necessidade de, a partir de um ficheiro, indicar a localização de outro ficheiro. Esta necessidade ocorre quer na criação de hiperligações quer na inserção de imagens ou outros objectos.

A localização de um ficheiro pode ser dada pelo seu URL, ou seja, pelo seu endereço WWW. O exemplo seguinte ilustra a criação de uma hiperligação em que a localização do ficheiro destino é dada pelo seu URL:

<a href=”http://webmail.sapo.pt/login.ph3″>este texto</a> liga a um sítio na WWW </p>

Este é um exemplo de localização absoluta pois é indicado o caminho completo para o ficheiro de destino. As referências a ficheiros que se encontrem noutros sítios da Internet são sempre absolutas.

As referências ao próprio sítio podem ter um formato absoluto ou relativo. No caso da utilização de endereços absolutos, descreve-se o caminho desde a raiz (/) até ao ficheiro em causa.

No caso da utilização de endereços relativos descreve-se o caminho a percorrer, desde a directoria actual até ao ficheiro que se pretende referenciar, ou seja:

– ao ficheiro que constitui o destino de uma hiperligação;
– à imagem que se pretende inserir;
– ou a outro objecto.

Para descrever esse caminho utilizam-se regras comuns à generalidade dos sistemas operativos:

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Descrição de caminhos absolutos e relativos

O exemplo seguinte ilustra a diferença entre a utilização de endereços absolutos e endereços relativos. Considere-se que se têm dois ficheiros – fich1.htm e fich2.htm – numa pasta designada ficheirosque por sua vez, se encontra na raiz do sítio. Pretende-se uma hiperligação de fich1.htm para fich2.htm.

No caso de se querer utilizar um endereçamento absoluto deve escrever-se:

<p> <a href=”/ficheiros/fich2.htm”>este texto</a> liga ao fich2.htm </p>

Para um endereço relativo escreve-se apenas:

<p> <a href=”fich2.htm>este texto</a> liga ao fich2.htm </p>

Aprender HTML – Referências a imagens ou outros objectos

As imagens, assim como outros elementos, podem ser indicados pelo seu caminho absoluto ou relativo.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Endereços Absolutos e Relativos em Referências a Imagens em código HTML

Na linha 3, insere-se uma imagem que está na mesma pasta.

Na linha 5, insere-se uma imagem que está noutra pasta, através de uma referência relativa. A partir da directoria actual, para chegar à imagem de destino, é necessário: subir uma directoria (../), descer para a directoria imagens (imagens/) e dentro dessa directoria, escolher o ficheiro cafe.gif.

Na linha 7, insere-se uma imagem utilizando uma referência absoluta: partindo da raiz do sítio (/), desce-se à directoria imagens onde se encontra o ficheiro.

Quando se copiam todos os ficheiros de um sítio para o outro, tem que se ter o cuidado de manter a estrutura do sítio original, ou seja, a posição relativa entre os diversos ficheiros, nomeadamente as imagens, tem que ser a mesma no original e na cópia. No caso de haver endereços absolutos no sítio original, os cuidados devem ser redobrados, devendo inspeccionar-se se não há ligações quebradas.

Aprender HTML – Referências a documentos HTML

Tal como para as imagens, as hiperligações podem ter um caminho relativo ou absoluto.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Endereços Absolutos e Relativos em Hiperligações

Na linha 3 indica-se o caminho absoluto até ao ficheiro destino da hiperligação.

Na linha 5 indica-se o caminho para a partir da directoria actual, alcançar o ficheiro destino: subir uma directoria, descer para a directoria ficheiros, seleccionar o ficheiro ficheiro2.htm.

Aprender HTML – Organizar os Ficheiros

Um sítio na WWW pode conter um número muito elevado de ficheiros, o que obriga a adoptar um método estruturado de organização.

A pasta inicial deve conter um ficheiro de índice: index.html, index.htm ou default.htm. Este ficheiro é tratado de forma especial: enquanto os outros ficheiros têm que ser referenciados através do caminho completo incluindo o seu nome, para chegar ao ficheiro de índice basta indicar o nome da pasta.

Por exemplo, http://www.google.pt/index.html pode ser visitado apenas http://www.google.pt/.

O ficheiro index.html assume usualmente um papel importante: normalmente é a página de entrada do sítio. A partir deste ficheiro o responsável pelo sítio cria hiperligações para os outros documentos HTML.

As hiperligações têm que indicar o caminho para os respectivos ficheiros no computador. Similarmente, a forma de referir as imagens tem que ser concordante com a localizaçãodos referidos ficheiros no computador.

A forma de organizar os ficheiros é opcional, mas é importante que haja sentido de ordem, caso contrário, a gestão do sítio fica bastante dificultada.

Apresenta-se de seguida, um exemplo de organização puramente académico, mas que contém os princípios básicos da manipulação de referências e caminhos:

– Criar uma pasta para o sítio. Esta pasta deve ter apenas um ficheiro, index.html, e duas pastas com os nomes ficheiros e imagens.

– Todos os outros documentos HTML devem ser colocados dentro da pasta ficheiros.

– Todas as imagens devem ser colocadas dentro da pasta imagens.

Neste caso, observam-se as seguintes formas de referência:

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Exemplo de Organização de Ficheiros em código HTML

Finalmente, os ficheiros devem ter nomes educativos do seu conteúdo. Os ficheiros das imagens podem ter nomes que indiquem os documentos HTML em que estão inseridos. Exemplo: jornalPag1Fig2Assembleia.jpg.

Aprender HTML – Criar tabelas

As tabelas em HTML iniciam-se com a marca <table>; cada linha inicia-se com uma marca <tr>; cada coluna inicia-se com uma marca <td>.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Como criar tabelas em código HTML

O exemplo apresenta uma tabela com duas linhas e três colunas.

Em alguns navegadores os limites de uma célula não são visíveis se a célula não tiver conteúdo (caso da terceira célula da segunda linha acima). Para ver os limites de uma célula é necessário dar-lhe um conteúdo, inserindo um caracter em branco, representado pelo símbolo &nbsp;.

Para esconder as linhas da tabela: substituir <table border=”1″> por <table border=”0″>.

Aprender HTML – Criar tabelas dentro de tabelas

É possível colocar uma tabela dentro de outra tabela. Para isso, colocar dentro de uma célula da tabela as marcas <table> e </table> e entre estas colocar as linhas e células da segunda tabela.

Aprender HTML - Tutorial básico do código HTML

Aprender HTML – Como criar tabelas dentro de outra tabela em código HTML

O exemplo apresenta uma tabela (linhas 3 e 7) com duas linhas e duas colunas. Dentro da primeira célula (linha 4) dessa tabela existe uma segunda tabela. Esta segunda tabela tem duas linhas e uma coluna.

Existem serviços gratuitos de validação do código HTML. Estes serviços efectuam a verificação do código HTML produzido de modo a garantir que não contém erros, obedecendo rigorosamente às normas estabelecidas pelo W3C.

O W3C, a entidade que cria as normas para o código HTML, oferece um serviço desta natureza. Este serviço está disponível em:

http://validator.w3.org/

Neste local pode efectuar a validação do código HTML por si construído ou a validação de qualquer outra página existente na Internet.

Facebook
Google+
http://faqinformatica.com/aprender-html-tutorial-basico-codigo-html/
LinkedIn
Follow by Email
RSS

Deixe um Comentário