Programação-Web/Aprenda HTML passo a passo
Autor: Eduardo Estevão da Silva | Publicado: 2013-08-19T10:46:00-03:00



Fala Galera vou ensinar como criar um site basico com a linguagem HTML

muito fácil rápido e simples,então vamos lá!




Criando sua primeira página Html

1º Abra o Bloco de Notas. Clique em Editar e marque o item Mudança Automática de linha.2º Digite o seguinte texto:

&lt;html&gt;

Toda página Html deve iniciar com essa tag.



3º Digite :
&lt;head&gt;

O cabeçalho deve ser delimitado pelas tags &lt;head&gt; e &lt;/head&gt;



4º Digite:
&lt;title&gt;

Onde deve ficar o título da página.

Feche com &lt;/title&gt;.

Exemplo:

&lt;title&gt;teste html&lt;/title&gt;



5º Digite:

&lt;/head&gt; para fechar o cabeçalho da página


6º Digite:

&lt;body&gt;

Onde deve ficar o corpo da sua página.

Depois deve inserir o título para o texto. Para isso você usará as tags &lt;h1&gt; e &lt;/h1&gt;

Exemplo&lt;h1&gt;Minha primeira Home Page&lt;/h1&gt;

O tamanho vai de &lt;h1&gt; tamanho maior para &lt;h6&gt; tamanho menor.



7º Para colocar um texto digite :

&lt;p&gt;Texto aqui

Feche com &lt;/p&gt;

Exemplo:

&lt;p&gt;Páginas Html podem ser criadas em qualquer editor ou processador de texto &lt;/p&gt;



8º Colocando uma imagem :Exemplo:

&lt;img src="brasil.gif" alt=" imagem do Brasil" height=270 width=240&gt;

A imagem deve estar na mesma pasta que o arquivo Html. Ou aponte para a pasta certa. Img src é referente a imagem que precisar ser indicado sua extensão Gif ou Jpg. Alt é um texto alternativo enquanto a página é carregada ou quando se passa com o mouse sobre a figura.

Height e Width são as dimensões da figura em pixels, modifique a seu gosto. Se você não indicar as dimensões da figura excluindo height e width sua imagem terá o tamanho original.



9º Vamos fechar o corpo do texto e terminar com a tag de fechamento.Exemplo:

&lt;/body&gt;

&lt;/html&gt;

10º Salve com extensão .html ou .htm .Exemplo:

teste.html ou teste.htm

Abrindo e vendo o resultado. Abra seu navegador padrão( Internet Explorer ou Netscape). Clique em Arquivo /Abrir ou Abrir página/ Procurar . Abra a pasta onde você salvou sua página clique no arquivo html de sua página e de Ok. Lembrando que para atualizar sua página basta apenas abri- la no navegador padrão e clicar em Exibir/ Código de Fonte e fazer as modificações necessárias no código do documento Html não esquecendo de salva- lo.



Exemplo completo&nbsp;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;teste html&lt;/title&gt;

&lt;head&gt;

&lt;body&gt;

&lt;h1&gt;Minha primeira Home Page&lt;/h1&gt;

&lt;p&gt;Páginas Html podem ser criadas em qualquer editor ou processador de texto &lt;/p&gt;

&lt;img src="brasil.gif" alt="Brasil" height=150 width=120&gt;

&lt;/body&gt;

&lt;/html&gt;




Veja o resultado na pasta exemplosTanto as figura como o texto ou mesmo os hyperlinks podem ser alinhados no canto esquerdo, direito ou centralizados.Como fazer.

&lt;p align="center"&gt;texto alinhado ao centro&lt;/p&gt;

&lt;p align="right"&gt;texto alinhado a direita&lt;/p&gt;

Caso você não escolha nenhuma dessas duas tags o alinhamento será automático.

Passo 2


Agora que você fez sua primeira Home Page vamos tornar- lá mais atraente com as seguintes tags:

Para Internet Explorer

&lt;h1&gt; e &lt;marquee&gt;. Dessa forma seu título vai ser um letreiro que vai passar de um lado para outro. Não esqueça de fechar com a tag &lt;/marquee&gt; e &lt;/h1&gt;

E &lt;font color="red"&gt; junto a tag &lt;/font&gt;. Assim seu texto vai ter a cor vermelha. Vamos também centralizar a imagem. E Salvaremos como teste2.htm.

Com a tag&lt;center&gt;e fechar com a tag &lt;/center&gt;

Exemplo:

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;teste html&lt;/title&gt;

&lt;head&gt;

&lt;body&gt;

&lt;h1&gt;&lt;marquee&gt;Minha primeira Home Page&lt;/marquee&gt;&lt;/h1&gt;

&lt;center&gt;&lt;font color="red"&gt; Páginas Html podem ser criadas em qualquer editor ou processador de texto &lt;/font&gt;&lt;/center&gt;

&lt;center&gt;

&lt;img src="brasil.gif" alt="Brasil" height=150 width=120&gt;

&lt;/center&gt;

&lt;/body&gt;

&lt;/html&gt;

Você pode modificar também o fundo, colocando uma imagem ou uma cor.Exemplo:&nbsp;&lt;body bgcolor="teal"&gt; para ou

&lt;body background="fundo2.gif"&gt;para imagem.

A figura " fundo2.gif" é um exemplo . No seu caso será necessário colocar o nome da figura e a extensão( gif ou jpg). Não é aconselhável usar imagens .bmp ( Bitmap ) por ser bem maior( em KB) que as imagens Gif e Jpg.



Hyperlinks

Para inserir um hyperlink que aponte para uma outra Home Page, digite:

&lt;a href="http://www.tecmundo.com.br"&gt;Tecmundo&lt;/a&gt;. Este exemplo abre a página Tecmundo Para inserir um hyperlink que aponte para sua própria página como exemplo usamos &lt;a href="tabela.htm"&gt;Tabela&lt;/a&gt;.

Para inserir uma figura que quando clicada abre uma outra página ou um link para enviar e- mail .

Digite :

&lt;center&gt; caso queira alinha no centro

&lt;a href="edu.art@hotmail.com"&gt;

&lt;img src="email.gif" border="0" alt="enviar e- mail" heigth=30 width=30&gt;&lt;/a&gt;&lt;/center&gt;

Agora você precisa mencionar se a figura terá ou não um contorno digitando border="0" para que o Hyperlink não tenha borda colorida

Lembrando que email.gif é a imagem para exemplos. Ela precisa estar na mesma pasta que o arquivo Html. E&nbsp;edu.art@hotmail.com&nbsp;é um endereço eletrônico. Com este exemplo fica fácil você criar outros hyperlinks usando outra figuras em suas páginas. Altere height e width que são largura e altura da figura email.gif.


Texto dentro de uma caixaDigite:

&lt;center&gt;&lt;textarea name="S1" rows"5" cols="35"&gt;

Muitos querem saber quem é o dono da Internet ou quem administra os milhares de computadores e linhas que a fazem funcionar. Vamos voltar um pouco no tempo. Nos anos 60, quando a Guerra Fria pairava no ar, grandes computadores espalhados pelos Estados Unidos armazenavam

informações militares estratégicas em função do perigo de um ataque nuclear soviético. Surgiu assim a idéia de interconectar os vários centros de computação de modo que o sistema continuasse funcionando, mesmo que um desses centros fosse destruído. O Departamento de Defesa, através da ARPA( Advanced Research Projects Agency), mandou pesquisar qual seria a forma mais segura de interconectar esses computadores. Chegou- se a um esquema chamado chaveamento de pacotes. Com base nisso, em 1970 foi criada a semente do que viria a ser a Internet. A Guerra Fria acabou mas a herança daqueles dias rendeu bastante. &lt;/textarea&gt;&lt;/center&gt;



Modificando o hyperlink deixando de forma que pareça um botão.Digite:

&lt;form method=get action="http://www.microsoft.com/brasil"&gt;

&lt;input type=submit value="Microsoft"&gt;

&lt;/form&gt;





É comum usar botões para entrar e sair de uma página. Estes botões nada mais são que figuras Gif ou Jpg.

Vamos usar um botão para voltar para a primeira página teste.

Digite:&lt;a href=”teste.htm”&gt; Isso aponta para a página teste.

Insira a tag da figura agora, neste caso um botão para voltar.

Digite:&lt;img src=”voltar.gif” alt=”voltar” height=30 width=60&gt;

Agora feche o hyperlink com&lt;/a&gt;

Exemplo completo:

&lt;a href=”teste.htm”&gt;

&lt;img src=”voltar.gif” alt=”voltar” height=30 width=60&gt;

&lt;/a&gt;



Formatar o texto

Vamos ver agora alguns complementos que funcionem em ambos browser.

Negrito e itálico.

Basta digitar&nbsp;

&lt;p&gt;&lt;i&gt;texto aqui&lt;/i&gt;&lt;/p&gt;.

Negrito digite

&lt;p&gt;&lt;b&gt;texto aqui&lt;/b&gt;&lt;/p&gt;.

Sublinhar texto digite

&lt;u&gt;texto aqui&lt;/u&gt;

Linha divisória:

&lt;hr&gt;

Pular uma linha

&lt;br&gt;

Marcadores :

&lt;li&gt;texto aqui&lt;/li&gt;

Isso faz com que o texto que você tenha digitado tenha uma pequena bolinha em sua frente.

O resultado vai ser este

· texto aqui.

Teste de tamanhos .

&lt;h1&gt;tamanho maior e &lt;h6&gt; tamanho menor.

&lt;h1&gt;Texto aqui&lt;/h1&gt;

&lt;h2&gt;Texto aqui&lt;/h2&gt;

&lt;h3&gt;Texto aqui&lt;/h3&gt;

&lt;h4&gt;Texto aqui&lt;/h4&gt;

&lt;h5&gt;Texto aqui&lt;/h5&gt;

&lt;h6&gt;Texto aqui&lt;/h6&gt;



Tag visíveis



São tag que quando você quer que visitantes olhem em sua páginaPor exemplo para explicar sobre HtmlVocê digita
&lt;code&gt;

&amp;lt; a href="www.microsoft.com"&gt;Microsoft

&amp;lt;a&gt;

&lt;/code&gt;

Isso que dizer ao invés de colocar "&lt;" você coloca "&amp;lt;" com isso não se vê imagem e sim a tag, não se vê o hyperlink e sim a tag.



Tag para Netscape:

Um testo que pisca .

&lt;blink&gt; texto aqui&lt;/blink&gt;


Texto em duas colunas:
&lt;multicol &gt;
Exemplo:

&lt; multicol cols=2&gt;

texto aqui

&lt;/multicol&gt;




Tag para coresDigite:

&lt;font color="red"&gt;Texto aqui&lt;/font&gt;

Branco
White

Preto
Black

Azul
Blue

Amarelo
Yellow

Verde
Green

Laranja
Orange

Vermelho
Red

Rosa
Pink

Cinza
Gray

Ouro
Gold

Verde azulado
Teal

Azul marinho
Navy

Prata
Silver


Um exemplo completo:

&lt;font color=”red”&gt;texto aqui&lt;/font&gt;



Para usar a font do windows Courier new com cor azul e tamanho pequenoDigite:

&lt;font color="blue" size="1" face="courier new"&gt;Texto aqui&lt;/font&gt;

Face faz referência a Font do windows que poderia ser outra arial, impact, times new roman, etc...



Tabela&nbsp;

Vamos criar uma tabela para apostilas com preços e informações sobre cada apostila.Como criar uma tabela com a linguagem Html.Digite:

&lt;center&gt;Compre uma apostila&lt;/center&gt;

&lt;table border="2" cellpadding="2" cellspacing="1" width="80%"&gt;

&lt;tr&gt;

&lt;td width="33%"&gt;Apostila&lt;/td&gt;

&lt;td width="33%"&gt;Atributos&lt;/td&gt;

&lt;td width="33%"&gt;Valor em reais&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td width="33%"&gt;Delphi 3&lt;/td&gt;

&lt;td width="33%"&gt;Aprenda a programar em Delphi&lt;/td&gt;

&lt;td width="33%"&gt;R$ 20, 00 &lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td width="33%"&gt;Visual Basic&lt;/td&gt;

&lt;td width="33%"&gt;Aprenda a programar em Visual Basic&lt;/td&gt;

&lt;td width="33%"&gt;R$ 40, 00 &lt;/td&gt;

&lt;/tr&gt;



&lt;/table&gt;

Resultado da tabela acima.

Compre uma apostila
Apostila
Atributos
Valor em reais

Delphi 3
Aprenda a programar em Delphi
R$ 20, 00

Visual Basic
Aprenda a programar em Visual Basic
R$ 40,00



O que você precisa saber é que, quanto mais você inserir &lt;td&gt; entre &lt;tr&gt; e &lt;/tr&gt; mais partes sua tabela terá. A Tabela começa com &lt;table&gt; e termina com a tag de fechamento&lt;/table&gt;. Width faz referência a largura. Border a borda, se você não colocar border sua tabela não vai ter bordas. TR significa ( Table row), que marca uma linha de tabela. TD( Table Data) que são as células para os dados. Os valores em %, indica o tamanho ocupado em cada espaço na tabela podendo ser um maior e outro menor.Caso queira inserir uma imagem ou uma cor de fundo para tabela basta colocar na linha &lt;table border="2" cellpadding="2" cellspacing="1" width="80%"&gt; a bgcolor="red" ou background="imagem.gif"Exemplo:&nbsp;
&lt;table bgcolor="red" border="2" cellpadding="2" cellspacing="1" width="80%"&gt; tabela com fundo vermelho




Download:



Como fazer com que o visitante possa baixar um arquivo ou mesmo um programa.Download é simplesmente baixar para sua máquina algum arquivo.Então para que alguém baixe um arquivo de sua página faça assim.Digite :

&lt;a href="nome.extensão"&gt;Baixar&lt;/a&gt;

Nome significa o nome do arquivo e extensão nada mais é do que o formato do arquivo, geralmente .zip. No seu caso poderia ser

&lt;a href="programa.zip"&gt;Baixar&lt;/a&gt;.

As extensões mais usadas para download são .exe e .zip

Quando você baixou esta apostila. Estava na verdade clicando em

&lt;a href="html7.zip"&gt;Baixar&lt;/a&gt;.

Como exemplo você pode abrir o arquivo "donwload.htm" que se encontra em exemplos e clicar em baixar, você vai está baixando ou neste caso transferindo logotipos para alguma pasta:
&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Download&lt;/title&gt;

&lt;head&gt;

&lt;body&gt;

&lt;h1&gt;Download&lt;/h1&gt;

&lt;h3&gt;Apostila Html&lt;/h3&gt;

&lt;a href="down/logo.zip"&gt;Baixar&lt;/a&gt;

&lt;/body&gt;

&lt;/html&gt;

Como você pode observar a tag para fazer download é a mesma que a tag usada para hyperlinks só mudando a extensão.

Veja o resultado na pasta exemplos





Frame


O frame permite que você veja o índice e o conteúdo em uma única página. Ou ver duas páginas de uma só vez, bonito e prático.

Digite:

&lt;html&gt;

&lt;title&gt;frame&lt;/title&gt;

&lt;frameset cols="50%,50%"&gt;

&lt;frame src="tabela.htm "&gt;

&lt;frame src="teste2.htm"&gt;

&lt;/frameset&gt;

&lt;/html&gt;

Salve agora de um nome sugestivo as duas página não esquecendo a extensão .htm ou .html

Lembre que tabela.htm e teste2.htm são páginas de demonstração. Sua página de frame ou outra qualquer deverá ter nomes diferentes.



O mesmo exemplo mas com um visual diferente, ao invés do frame ser em colunas cols vamos deixar com a divisória na horizontal. Modificando o nome cols por rows.

&lt;html&gt;

&lt;title&gt;frame&lt;/title&gt;

&lt;frameset rows="50%,50%"&gt;

&lt;frame src="tabela.htm"&gt;

&lt;frame src="teste2.htm"&gt;

&lt;/frameset&gt;

&lt;/html&gt;

Caso o browser( navegador) do usuário não suportar frame digite:&lt;noframe&gt;Seu Browser não suporta frame . Clique no botão voltar&lt;/noframe&gt;.Podemos ter também mais de dois frame( quadros em um página).Exemplo:

&lt;html&gt;

&lt;title&gt;frame&lt;/title&gt;

&lt;frameset rows="50%,25%,25%"&gt;

&lt;frame src="teste.htm"&gt;

&lt;frame src="teste2.htm"&gt;

&lt;frame src="java.htm"&gt;

&lt;/frameset&gt;

&lt;/html&gt;

Então fica assim 1º frame&lt; frame src="teste.htm"&gt; o 2º frame&lt; frame src="teste2.htm"&gt; e o 3º frame&lt;frame src="java.htm"&gt;.



Agora se você quer que um link de um Frame abra em outro Frame você precisa indicar os nomes dos quadros colocando após frame src"arquivo.htm name="frame1"Exemplo:

&lt;html&gt;

&lt;title&gt;frame2&lt;/title&gt;

&lt;frameset cols="20%,80%"&gt;

&lt;frame src="link.htm" name="frame1"&gt;

&lt;frame src="teste2.htm" name="frame2"&gt;

&lt;/frameset&gt;

&lt;/html&gt;

O hyperlink da página link.htm precisa ser escrito assim

&lt;a href="download" target="frame2"&gt;Download&lt;/a&gt; isso indica que a página Download abre no quadro maior de nome frame2




ExercícioFaça agora uma Home Page com frame, tabela, imagens, hyperlinks. Utilize as figuras exemplos, tais como voltar.gif, brasil.gif, fundo2.gif, fag.gif. Caso tenha alguma imagem nos formatos Gif e Jpg utilize para dar seu próprio toque a sua página.



Agora vocês já podem criar páginas simples em HTML com esse tutorial básico,duvidas ou sugestões é só comentar abaixo,abraço.&nbsp;