Tutorial HTML

Última edição por DeathMatch em Dom 28 Mar 2010, 11:43, editado 1 vez(es)

1- O que é HTML?

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.

1.1- Pra que serve?

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 facto, 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’.

1.2- Onde posso Editar HTML?

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.
Um exemplo de Editor que suporta HTML é o Aptana(Ja postei ele pra Download no forum aqui

2- Começando em HTML

Como disse no Capítulo I, o HTML consiste em texto formatado por ‘tags’. Embora existam várias dezenas destes ‘tags’, apenas uma pequena parte destes é utilizada normalmente. Há algumas regras básicas que é necessário compreender antes de se começar com a criação de páginas...

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>

2.1 Estrutura

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>

3 Alguns Tags

<X> e </X>
Um comando tem essa estrutura, a TAG <X>, que inicia e a TAG </X>, que termina, onde X é o mesmo nas duas TAGs. Não importa se é maiúscula ou minúscula.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
"http://www.w3.org/TR/html4/strict.dtd"
Deve ser colocado no início da página, antes da TAG <html> para a página passar em um teste de máquina, para que ela permita acesso à página.


Você pode colocar comentários no X. Ele não aparece na sua home page.

<html> e </html>
TAG que inicia o documento, dizendo que será um tipo de documento HTML e o finaliza.

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="X"> e </body>
Indica o corpo do documento ("body" significa "corpo"). O body contém todo o conteúdo que será exibido e finaliza o corpo do seu programa (script). Você pode colocar nesta TAG a cor do fundo da página e a cor do texto e dos links. ALINK é a cor dos links quando são acionados, VLINK é a cor dos links visitados e BACKGROUND é o nome ou diretório da imagem de fundo. Use aspas (") ou apóstrofo ('), não fará diferença.

<p> e </p>
Inicia e finaliza um parágrafo.

<head> e </head>
TAG que inicia o cabeçalho. Nele você coloca informações sobre o documento (formatações, funções, fundo musical etc). O conteúdo que estiver dentro do <HEAD> geralmente não aparecerá quando sua home page for exibida. Ele pode ser exibido de outras formas, em aplicações mais avançadas.

<hX> e </hX>
Inicia um cabeçalho, onde X é o nível de tamanho variando de 1 a 6, onde 1 é o maior e 6 o menor. Finaliza um cabeçalho, o X é igual ao do que inicia esse mesmo cabeçalho.

<title> e </title>
Indica o título do seu documento. Repare O LOCAL em que esse TÍTULO APARECE. Indica o final do título (repare que o título começa com <title> e termina com </title>).

<X align="Y" style="text-indent:A; margin-left:B; margin-right: C; margin-top:D; margin-bottom:E; word-spacing:F; line-height:G“> e </X>
X é a TAG. Ao iniciar uma Tag você pode escolher se é alinhado a direita, centro, esquerda ou justificado, para Y respectivamente right, center, left ou justify. Há outros itens que são adicionados nas TAGs. Não é necessário colocar todos os comandos. Em pixels, A é a distância do espaço do início do parágrafo, B, C, D e E são o espaçamento do texto respectivamente da esquerda, direita cima e baixo, e F é a distância entre as palavras, se colocar em porcentagem 100% é a página total. G é o a distância entre as linhas, em número de linhas, pode por em porcentagem e em números decimais, mas usando (.) ao invés de (,). Se o "margin-bottom" de um parágrafo e o "margin-top" do parágrafo seguinte forem zero, não aparecerá o espaço entre as linhas, que aparece com a mudança de parágrafo.

< e >
Usa-se respectivamente esses dois códigos para escrever < e > sem que seja uma TAG.

&
O caractere & serve para indicar alguns códigos, eles não aparecem na página. Então, este código é usado para fazer o caractere & aparecer na página.

&#X
Usando este código substituindo X por um número inteiro, fará aparecer o caractere representado por esse número em unicode. Também tem outros efeitos especiais, dependendo do código.

<div> e </div>
Coloca o conteúdo, entre as TAGS, em um quadro. Funciona como parágrafo, mas não forma espaço entre eles.

<O style="border-style:X; border-width:Y; padding-left:Z; padding-right:I; padding-top:U; padding-bottom:K; background-color:W" background="L">
Para trabalhar bordas e sombreamentos. Usado com a Tag <div>, mas também é possível usá-lo com a <p>. O é a Tag, X é a aparência da borda, Y (solid, dotted, dashed, double, groove, ridge, inset, outset) é a grossura em pixels da borda, Z, I, U e K são a distância distância do texto até as respectivas bordas esquerda, direita, de cima e de baixo, W é a cor de fundo e L é figura de fundo. Não só o comando div permite fazer a borda, o P também o faz. As outras formatações são as mesmas que em style, para formar a borda.

<font color="#000000" face="X"

size="Y"> e </font>
Você usa estas TAGs para formatações, não é necessário seguir a ordem ou usá-las todas. X é o nome da fonte, Y é o nível HTML de tamanho (de 1 a 7) e os 6 zeros determinam a cor da fonte (deve-se colocar, de dois em dois dígitos, a intensidade de vermelho, verde e azul, respectivamente, para formar a cor desejada, lembrando que os dígitos são hexadecimais). Também é possível utilizar os nome em inglês de algumas cores - como red, por exêmplo - no lugar dos códigos entre aspas.

<span

style="font-family:X;color:#Y;background:#Z;font-size:W"> e </span>
Outra forma de formatação, X é o nome da fonte, Y é a cor da fonte (em hexadecimal), Z é a cor de fundo (hexadecimal) do texto e W é o tamanho da fonte.

<img src="X" width="Y" height="Z">
Insere uma imagem, X é o nome ou diretório da imagem, Y é a largura e Z é a altura.

Insere o caractere "space". Não é possível colocar mais que um espaço consecutivo usando texto, entretanto, com esse código já é possível fazer.

Não gera o caractere "space", que é representado pelo 32, esse código faz um caractere nulo e invisível, não funciona consecutivamente.

<br />
Insere uma quebra de linha

<center> e </center>
Centraliza o conteúdo.

<pre> e </pre>
Incluí um espaçamento antes de um parágrafo; para escolher o alinhamento é só dar espaços na primeira linha e as outras ficarão alinhadas com ela.

<a href = "X" target="_blank">Y<a>
Cria um hyperlink com o conteúdo; X é o endereço e Y o nome do endereço. O target deve ser adicionado se quiser que abra em uma nova janela.

<a href="mailto:X">Y<a>
Insere um hyperlink de e-mail; X é o e-mail.

<img src = "X" height = "Y" width ="Z">

ou <T imagesrc=X>
Insere imagens; X é o link da imagem, se estiver na mesma pasta que o arquivo HTML, é só pôr o nome, e se estiver dentro de uma sub-pasta, coloque o caminho começando pelo nome da primeira sub-pasta. Y é a altura e Z é a largura. T é uma Tag de listas.

<a name="X"></a>
Insere um link para um lugar na mesma página. Coloque esta TAG no lugar onde você quer que apareça após clicar no link. X é um nome criado por você para identificar o lugar.

<a href="#X">Y</a>
É o link para outro lugar na mesma página; X é o nome que você criou na Tag da linha acima.Y é o que aparece como Link

<ul> e </ul>
Inicia e finaliza uma lista de tópicos não ordenada - com o símbolo ponto (bullet) no início de cada linha.

<ol> e </ol>
Inicia e finaliza uma lista de tópicos ordenada - com as linhas numeradas.

<li> e </li>
Inicia e finaliza cada linha de uma lista de tópicos ordenada e não ordenada.

<b> e </b>, e <strong> e </strong>
Texto em negrito.

<u> e </u>
Texto sublinhado.

<i> e </i>
Texto em itálico.

<sub> e </sub>
Texto subscrito.

<sup> e </sup>
Texto sobrescrito.

<strike> e </strike>
Texto tachado.

<dl> e </dl>
Usadas para listas de definições.

<dt> e </dt>
É um termo da lista de definições.

<dd> e </dd>
É a explicação do termo; aparece como nas listas ordenadas e não ordenadas, mas sem os números ou bullets.

<hr width=X size=Y>
Insere uma linha horizontal; X é o comprimento em pixels ou em porcentagem em relação à largura da página, se colocar o sinal %, e Y é a expessura (em pixels) da linha.

‮
Inverte os textos dentro da Tag.

<table border="X" width="Y" height="Z" background="W" bgcolor="V" bordercolor="U" darkbordercolor="T" lightbordercolor="S”> e </table>
Inicia e finaliza uma tabela. X é a expessura da borda - se for zero a tabela existirá, mas sem bordas - Y é a largura em pixels ou porcentagem, Z é a altura em pixels, W é a imagem de fundo, V é a cor de fundo, U é a cor da borda, T é a cor da borda clara e S a cor da borda escura.

<tr> e </tr>
Inicia e finaliza uma linha de tabela. Você pode adicionar nesta Tag o mesmo que foi adicionado acima (largura, cor etc.) mas a soma das medidas deve ser igual as da tabela.

<td colspan=”X” rowspan=”Y”> e </td>
Inicia e finaliza uma célula em uma linha de tabela. Você pode adicionar nesta Tag o mesmo que foi adicionado acima (largura, alura etc.). Em caso de células mescladas, X é a quantidade de colunas que a célula ocupa e Y é a quantidade de linhas. As formatações de letras ficam entre estas TAGs.

< marquee behavior=X width=Y% Direction=Z> e </marquee>
Inicia e finaliza um texto para ter animação. O texto se move com essa tag e fica em uma só linha, que atravessa a tela. X é o comportamento ("scroll" para passar repetidamente pela tela, "slide" para se mover até parar em um ponto da tela), Y é até onde o texto aparecerá horizontalmente, sendo Y a porcentagem da tela, e Z é a direção da movimentação ("right" para direita e "left" para esquerda).

tutorial show, tive aula no 1 periodo de html e java script.

eu entendo bem isto ai e a vc iuri seria interesante vc ir no menu "exibir do seu firefox e clicar na opção "Exibir codigo fonte" dai vai abrir uma janelinha em que vc vai ver toda a codificação de qualquer pagina inclusive de seu forum (eu ja treinei muito assim)

e deixo uma dica para o pessoal do forum-- há um otimo editor que é da adobe é chamado de Dreamweaver (recomendo a versão cs4 ) este é um otimo editor que não muito grande e pode ser encontrado gratuitamente por 30 dia no site oficial da adobe.

bem ai fica a dica pare quem se enteressar. Att

Cuidado com double post.
@Topic
O Dreamweaver é muito bom, mas eu nao uso porque 30 dias nao é o suficiente.Prefiro no velho bloco de notas

PS:Ja ja atualizo o tuto com mais coisas baisicas e algumas avançadas

Tópico Moderado.

Obrigado pela dica Kaio, vou verificar aqui.

Assunto: Re: Tutorial HTML Dom 28 Mar 2010, 00:53

Corrija o Titulo (hmtl ? wft? )

Assunto: Re: Tutorial HTML Dom 28 Mar 2010, 12:22

eu tabem fiz um cursinho de HTML, quase que desisti, por causa do bloco de notas... mas voltei e terminei, tambem com o curso do dreamweaver

aos que usam o firefox, recomendo que apertem CTRL+U

como podem ver o html daqui é bagunçado...

» HTML Ativado
» Protótipo da Pagina HTML
» Saiba mais sobre o HTML 5
» PS3 media center pc tutorial!!!
» Mega Tutorial By Hacker