30 março 2009

6

Tutorial - Html comandos básicos


Bom, pra quem ainda não muito craque em html, aqui vai um tutorial com algumas dicas importantes:

HTML significa ‘HyperText Markup Language’, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples: Certos itens de um documento contêm uma ligação a outra zona do mesmo documento ou, como é mais vulgar, a outros documentos.

A principal aplicação do HTML é a criação de páginas na Web, e convém esclarecer que não se trata de uma linguagem de programação. De fato, o HTML é antes uma espécie de linguagem de formatação, um ficheiro de texto que é formatado através de uma série de comandos – ‘tags’.

Leia Mais...




Antes de mais, importa esclarecer que para a criação de uma página em HTML não é necessário nenhum software especial. Se bem que existam programas especializados, o Notepad do Windows ou mesmo o Edit do MS-DOS são mais que suficientes para a criação de uma página.

Todos os ‘tags’ são inseridos entre o sinal de menor e maior:

<tag>


Tirando aqueles que representam a posição de um objecto (a inserção de uma imagem, por exemplo), todos os ‘tags’ de formatação devem ser abertos e fechados (utilizando o caracter ‘/’):

<tag> </tag>


Todos os ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo:


<a> <b> <c> </c> </b> </a>

O primeiro a abrir é o último a fechar, e vice-versa.

<a> <b> <c> </a> </b> </c> É ERRADO.


É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’. Nestes tutoriais irei utilizar maiúsculas apenas por uma questão de leitura.

<tag> é igual a <TAG> e a <Tag>


Todas as páginas em HTML são identificadas pelo ‘tag’ <HTML>, que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>.


<HTML>

...

</HTML>


Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página; Outra parte definida por <BODY>, contém quase tudo aquilo que iremos ver realmente na nossa página.

<HTML>

<HEAD>

...

</HEAD>

<BODY>

...

</BODY>

</HTML>


Cabeçalhos


O HTML tem 6 níveis de cabeçalhos, numerados de 1 a 6, com 1 sendo o mais proeminente. Os cabeçalhos são mostrados em fontes maiores e/ou mais escuras que o texto normal. O primeiro cabeçalho em cada documento deve ser marcado como <H1>. A sintaxe da tag de cabeçalho é: 

<Hy>Texto do cabeçalho </Hy> 


onde y é um número entre 1 e 6 especificando o nível do cabeçalho. 


Por exemplo, o código para a seção "Cabeçalhos" acima é 


    <H3>Cabeçalhos</H3>

Título versus primeiro cabeçalho

Em muitos documentos, o primeiro cabeçalho é igual ao título. Para os documentos com várias partes, o texto do primeiro cabeçalho deve ser adequado para um leitor que já esteja navegando pela referida informação (por exemplo, um título de um capítulo), enquanto que a tag do título deve identificar o documento em um contexto maior (por exemplo, incluir o título do livro e do capítulo, embora isto pode tornar-se excessivamente longo). 

Parágrafos


Diferente dos documentos da maioria dos processadores de textos, os caracteres de carriage return e espaço em branco não são significativos. A quebra do texto pode ocorrer em qualquer ponto do seu arquivo, e espaços múltiplos são colapsados em um único espaço (Existem exceções; o espaço entre a tag <P> ou <Hy >, por exemplo, é ignorado). Note que no primeiro exemplo, o primeiro parágrafo está codificado como 
    Bem-vindo ao mundo do HTML.        Este é o primeiro parágrafo.<P>

No arquivo fonte, existe uma quebra de linha entre as sentenças. O navegador Web ignora esta linha e só inicia um novo parágrafo somente quando achar uma tag <P>. 

Importante: Você deve separar cada parágrafo com <P>. O navegador ignora quaisquer indentações ou linhas em branco no texto original. O HTML se baseia quase que exclusivamente nas tags para fazer a formatação das instruções, e sem as tags <P>, o documento torna-se um grande único parágrafo (a exceção é o texto marcado como "pré-formatado", explicado abaixo). Por exemplo, as sentenças a seguir produzem uma saída idêntica ao primeiro exemplo HTML: 


    <TITLE>O exemplo mais simples de HTML</TITLE><H1>Este é um         cabeçalho de nível 1</H1>Bem-vindo ao mundo do HTML. Este é o primeiro         parágrafo.<P>E este é o segundo parágrafo.<P>

Entretanto, para preservar a legibilidade dos arquivos HTML, os cabeçalhos devem ficar em linhas separadas, e os parágrafos devem vir separados por linhas em branco (além das tags <P>). uando o navegador encontra a tag <P>, finaliza o parágrafo atual e insere uma linha em branco. 

No HTML+, um sucessor do HTML ainda em desenvolvimento, a tag <P> se torna um container de texto, assim como acontece com o texto de um cabeçalho nível 1 contido entre <H1> ... </H1>: 
    <P>        Isto é um parágrafo no HTML+.        </P>

A diferença é que a tag de término </P> pode sempre ser omitida. Se um navegador encontra uma tag <P>, ele sabe que deve haver um </P> implícito no fim do parágrafo. Em outras palavras, no HTML+, a tag <P> é um marcador de início de parágrafo. A vantagem dessa mudança é que você pode especificar opções de formatação para um determinado parágrafo. Por exemplo, no HTML+, você pode centralizar um parágrafo escrevendo 
    <P ALIGN=CENTER>        Isto é um parágrafo centralizado.

Esta mudança não afetará nenhum os documentos que você tenha escrito, eles continuarão com a mesma aparência nos navegadores HTML+. 

Ligação com Outros Documentos


Esta grande característica do HTML vem de sua habilidade em ligar regiões de texto (e imagens também) a outros documentos. O navegador destaca estas regiões (com outras cores e/ou sublinhados) para indicar que são links de hipertextos (geralmente abreviados como hyperlinks ou simplesmente links). A tag para referências de hipertexto é o <A>, que insere uma âncora. Para incluir uma âncora em seu documento: 

  1. Inicie a âncora com <A (ponha um espaço após o A). 

  2. Especifique o documento que será apontado escrevendo o parâmetro HREF="NomeDoArquivo" seguidos de um símbolo de "maior que": > 

  3. Escreva o texto que servirá como link do hipertexto no documento corrente. 

  4. Ponha a tag para terminar a âncora: </A>. 


Veja um exemplo: 
    <A HREF="MaineStats.html">Maine</A>

Esta entrada transforma a palavra "Maine" no hiperlink para o documento MaineStats.html, que está no mesmo diretório que primeiro documento. Você pode ligar documentos em outros diretórios especificando o path relativo do documento corrente para o documento a ser ligado. Por exemplo, um link para um arquivo NJStats.html localizado no subdiretório AtlanticStates seria: 
    <A HREF="AtlanticStates/NJStats.html">New Jersey</A>

Estes são chamados de links relativos. Você também pode usar o pathname absoluto do arquivo se desejar. Note, os pathnames devem ser escritos na sintaxe padrão do UNIX. 

Bom é isso... espero ter ajudado. Qualquer dúvida comentem que eu responderei assim que puder.

6 Comentários:

Flá Romani... disse...

Interessante!!! Eu sou meio por fora de HTML

Tolerância Zero disse...

porra..muito bom..eu em amarro em HTML, muitas vezes eu corrijo/faço os códigos fonte das paginas na mão

Jean Bitencourt disse...

hehe somos 2... todos os detalhes do blog como Favicon, menus, o template e a maioria dos Gadgets foram feitas digitando html...

Tainã disse...

ah véi seria bom tbm se tu escrevesse sobre o javascript no futuro XD
só uma dica,né

Jean Bitencourt disse...

Então a pedido do Tainã o próximo post será um tutorial sobre javascipt... asssim q tiver pronto eu postarei... Abraços.

Anônimo disse...

isso eu sei quero saber sobre o java escript posta ai vlw

Postar um comentário

Por favor deixe seu comentário:

Traduzir / Translate