DICAS HTML INICIAIS

Como salvar o seu primeiro documento HTML
Neste artigo espero sanar uma dúvida muito comum, que é a maneira de salvar um documento como html em programas com o bloco de notas do windows (Notepad).
por Ricardo Arrigoni

 2 0 0 0

 

Olá pessoal, nesse artigo irei explicar uma dúvida que eu tenho visto bastante gente que está iniciando me perguntar, que é: Como eu salvo um documento HTML?
Bom, a resposta para essa pergunta é bem simples e existem diversas maneiras de serem feitas. Primeiramente vou mostrar como fazer isso pelo bloco de notas do Windows mesmo (notepad.exe).
Primeiro abra o bloco de notas, com ele aberto iremos começar a digitar a estrutura do HTML, com suas tag’s principais que são:

 

Agora vamos salvar o arquivo, que é o objetivo desse nosso artigo.
No bloco de notas você vai em Arquivo -> Salvar Como, como mostra a figura a seguir:

Figura 1: Salvando o HTML
Após clicar em “Salvar como...” vamos ter que fazer algumas alterações. Primeiro temos que modificar o tipo de arquivo, troque de Documento de texto(*.txt) para Todos os arquivos (*.*), como mostra a figura a seguir:

Figura 2 : Alterando o Tipo
Feito isso, podemos dar um nome ao nosso arquivo, mas não podemos esquecer de no final do nome escrever o ".html", ele será o responsável por fazer nosso arquivo virar uma página de internet.

Figura 3: Nomeando o arquivo
Feito isso o nosso arquivo HTML estará pronto. Como caráter de exercício, vamos criar o famoso "Alô Mundo" em HTML.
Para isso iremos usar o mesmo arquivo HTML e a tag

, ficando da seguinte forma:

Listagem 2 : Criando um Alô Mundo

1 2 3 4 5 6 7 8 9

 

Alô Mundo

O resultado do nosso exemplo você pode ver a seguir:

Exemplo alo mundo
Bom pessoal, fico por aqui, espero que tenham entendido como fazemos para salvar um documento HTML e de quebra ainda tenham aprendido a fazer o famoso Alô Mundo.
A propósito a Devmedia tem um curso sobre HTML para iniciantes.
Um abraço e até o próximo artigo.
Ricardo Arrigoni - Desenvolvedor Front-end e Analista SEO

Ricardo Arrigoni - Desenvolvedor Front-End, Analista SEO, Atuo na área de Webdesign há mais de 4 anos. Para trabalhos freelancers visite meu portfólio: www.ricardoarrigoni.com.br ou se preferir me mande um e-mail.

Read more: http://www.linhadecodigo.com.br/artigo/3427/como-salvar-o-seu-primeiro-documento-html.aspx#ixzz2M2Ewy8mo

Tutorial de HTML

Como Fazer Um Site >> Criar um Site >> Dicas de HTML

Índice do Tutorial HTML
Estrutura Básica Font e Texto Fundos	Imagens Hiperligações Cores (HEX)	Tabelas Listas Caracteres Especiais

Por esta altura você já deve ter reservado o seu domínio e já deve ter encontrado um serviço de alojamento para o seu site.
Se você não está muito interessado em aprender HTML para criar as suas páginas, não se preocupe, muitos serviços de alojamento disponibilizam software de criação de sites de uso fácil, tornando o processo muito simples, bastando alguns cliques para construir rápidamente um site sem que seja preciso saber HTML. Neste caso, verifique se o seu serviço de alojamento lhe proporciona estas ferramentas ou então, se ainda não tem alojamento, certifique-se que escolhe um serviço que inclua uma ferramenta de criação de páginas web.
Mas, se você está com vontade de aprender HTML, ainda bem para si! É sempre vantajoso saber HTML, ou pelo menos ter umas bases.

Noções Básicas

O código HTML é composto por TAGS (ou comandos), que são usadas no inicio e no final do texto que vai ser afectado pelo código.
Uma tag de inicio é por exemplo a tag que é usada para colocar uma porção de texto em negrito. A tag de fecho correspondente será

que será usada no final desse texto que queremos formatar. Assim, se quisermos colocar em negrito a palavra "Olá!" da frase abaixo, então o código HTML fica:

Olá! O meu nome é Cátia.

e o resultado será:

Olá! O meu nome é Cátia.

Pode experimentar introduzir você mesmo os códigos HTML indicados neste tutorial, e ver automaticamente o seu resultado, na página "Editor de HTML em tempo real".

Estrutura Básica do Código HTML de um Documento

Comece por definir o layout básico do documento. Pode copiar e colar este código no Bloco de Notas ou outro editor de texto:

Nesta área fica tudo aquilo que se visualiza no navegador da internet, texto e imagens, juntamente com todos as tags HTML de formatação.

As tags e
dizem ao navegador de internet aonde começa e aonde acaba o código HTML. As tags dizem ao browser qual é o título da página. O título pode ser visto no canto superior esquerdo do seu navegador de internet. O texto que for definido entre estas tags é também o texto que é usado como título pelos motores de busca quando apresentam as páginas nos resultados de uma pesquisa.
A tag é informação que pode ser útil para os motores de busca. Eles podem usar o que você escreveu na descrição para descrever a página quando ela é apresentada nos resultados de uma pesquisa. Ou então, por vezes, os motores de busca usam também uma porção aleatória do que estiver no da sua página.
A tag também pode ser usada pelos motores de busca na indexação da página. Coloque as palavras chave separadas por virgulas no interior desta tag.
Entre as tags e
é colocado o conteúdo da página, que é o que é visualizado no browser. Após inserir os códigos HTML e o conteúdo pretendido, deve-se guardar o ficheiro com a extensão ".html". Ou seja, damos-lhe um nome e acrescentamos a extensão ".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para visualizar a página no browser basta clicar sobre o ficheiro.
Voltar ao Índice

Tags Básicas para Fonte e Texto

Itálico: texto
Sublinhado: texto
Negrito: texto
Texto Riscado: texto
Novo Parágrafo: texto
Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo e o anterior.
Quebra de linha:

Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir esta tag duas vezes seguidas faz o mesmo efeito que a tag de parágrafo.
Centrar: texto
Alinhar texto à esquerda:

texto

Alinhar texto à direita:

texto

Mudar cor do texto: texto
Pode também utilizar os códigos HEX para definir as mais variadas cores.
Mudar a fonte: texto
Mudar o tamanho: texto
(escolher entre 1 e 7)

Atenção:
Pode-se formatar um texto usando várias tags em simultâneo. Assim, por exemplo eu posso formatar um texto em negrito, itálico e sublinhado, colocando todas as tags ao mesmo tempo, acumulando os efeitos:

texto

e o resultado é:

texto

Voltar ao Índice

Imagens de Fundo e Cores de Fundo

Cor de Fundo

Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores claras funcionam bem com uma cor escura para o texto.
Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag :
Pode também utilizar os códigos HEX para definir as cores que combinem melhor.

Inserir uma Imagem de Fundo

Se você quiser definir uma imagem de fundo use o seguinte código:
Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é:
Voltar ao Índice

Inserir Imagens

A tag para se inserir imagens é .
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:
.

Atributo "alt"

O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está activa. A tag fica:

Definir Altura e Largura

Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:

Definir Contorno da Imagem

Para o contorno usa-se o atributo "border". O valor 0 faz com que a imagem fique sem contorno. Quanto maior for o valor definido maior é a espessura do contorno. O código pode ser por exemplo:

Múltiplos Atributos

Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:

Inserir Imagens em Hiperligações

Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):



Voltar ao Índice

Inserir Hiperligações

A tag para se inserir hiperligações é Nome do Link.
O resultado deste código é:

Nome do Link

Abrir links em Novas Janelas

Se você não quer que as pessoas abandonem completamente o seu site quando clicarem nos links, você pode definir seus links para abrirem numa nova janela com o atributo "target='_blank'":
Nome do Link

Endereços Absolutos e Relativos

URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites que todos estamos habituados a colocar na barra de endereços do navegador de internet.
Pode-se linkar para outras páginas usando URLs absolutos ou relativos.
URLs absolutos
Um URL absoluto contém o caminho completo para a localização do ficheiro do site que se pretende.
Se por exemplo você quisesse abrir uma página chamada camoes.html, que se encontrava no interior de uma pasta chamada "poetas", e esta pasta se encontrava na raiz do seu site, então o URL absoluto seria:
Camões É preferível o uso de URLs absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links vão continuar a funcionar.
URLs relativos
Um URL relativo indica apenas o caminho a percorrer desde a posição em que estamos.
Se por exemplo estivessemos na página camoes.html (que se encontra dentro da pasta "poetas") e quisessemos linkar para trás para a página principal (para a página index.html da raiz do site), então o URL relativo seria:
Página Principal os dois pontos, seguidos de uma barra, dizem ao browser para subir um nivel na hierarquia na estrutura de pastas do site.
O URL relativo permite que o site possa ser testado offline, quando tivermos as pastas e os ficheiros html no disco duro. Desta forma os links vão funcionar se abrirmos as páginas do site a partir do disco.

Hiperligações Âncora ou Marcadores

Uma hiperligação (link) âncora ou marcador é um link interior para dentro da própria página. É um link que leva o visitante para outra secção da mesma página (em vez de o levar para outra página ou site).
1- Para fazer um marcador primeiro você deve ir ao local do seu código HTML para onde você quer que o link aponte. Este é o local para onde o seu visitante será encaminhado quando clicar no link âncora.
Este é o Texto Onde a âncora vai parar "nome1" é o nome da âncora que você escolhe.
2 - Agora para linkar para aquele local da página, use a tag para hiperligações, e no endereço é só colocar cardinal seguido do nome escolhido para a âncora:
clique aqui

Links para E-mails

Para criar um link que permite que os seus visitantes lhe enviem e-mails basta colocar a função "mailto" na tag de hiperligação:
Envie-me um Email

Mudar as Cores dos Links

Por defeito as hiperligações têm a cor azul. Mas você pode alterar as cores usando o código "link" no interior da tag . Exemplo:

• link - cor dos links, vermelho neste caso
• vlink - links visitados, verde neste caso
• alink - links activos, amarelo neste caso

Voltar ao Índice

Você pode também usar os códigos HEX para definir estas cores:

Códigos HEX das Cores

Clique para seleccionar uma cor e depois poderá copiar e colar o respectivo código HEX:


ou então copie directamente do seguinte quadro o código da cor desejada:

#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Voltar ao Índice

Criar Tabelas

Perceber como funcionam as tabelas em HTML é muito importante. Com elas podemos fazer muita coisa no design do nosso site. Podemos ordenar o nosso conteúdo de uma determinada forma, podemos ordenar imagens lado a lado, ou em fila, podemos criar colunas para o layout do site, criar uma barra lateral, etc.

Tags de tabela básicas

São 3 as tags básicas para inserir tabelas:

• é a tag que inicia e finaliza uma tabela
• significa "table row"( linha de tabela), é a tag que representa uma linha na tabela
• significa "table data" (dados da tabela), é a tag que representa uma célula da tabela dentro da linha

Vamos então criar uma tabela simples:

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

e o resultado desta tabela é:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Reparem que a tabela tem 3 linhas e 2 colunas. Reparem no código HTML acima como cada é uma linha. Como abrimos 3 tags vamos ter 3 linhas. E reparem como no interior de cada linha temos 2 tags o que vai resultar em 2 células por cada linha, ou 2 colunas na tabela final.

Definindo um Contorno para a Tabela

Para definir um contorno para uma tabela basta colocarmos no atributo "border" a espessura do contorno que queremos:

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

e o resultado é:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Alterando a Cor do Contorno da Tabela

Para alterar o contorno da tabela colocamos no atributo "bordercolor" a cor que pretendemos:

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

neste caso vamos ter uma tabela com um contorno vermelho:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir Espaço que Envolve as Células - CELLSPACING

Podemos aumentar ou diminuir o espaço no interior da tabela que envolve as células. Para isso usamos o atributo "cellspacing".

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

temos assim:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir Espaço no Interior das Células - CELLPADDING

Para aumentar ou diminuir o espaço no interior das células usamos o atributo "cellspadding".

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

vejam como fica:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir a Largura de uma Tabela

Para definirmos a largura de uma tabela usamos o atributo "width". O valor pode ser em pixels ou em percentagem.
Se usarmos uma percentagem, por exemplo um valor de 100%, a tabela vai ocupar todo o espaço disponivel dentro da secção aonde se encontra.

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

resultado:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Se usarmos um valor em pixels, por exemplo 400px, a tabela vai ter uma largura fixa de 400px.

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

o resultado final desta tabela:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir a Largura das Colunas

Se não quisermos que todas as colunas tenham a mesma largura temos que definir um atributo de largura dentro da tag . Se usarmos percentagens temos por exemplo o seguinte código:

      
     

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

e o resultado da tabela:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Reparem que nas duas linhas tivemos que definir uma largura de 50% para a primeira coluna. Se para as restantes colunas não definirmos nenhum valor, o espaço que sobra vai ser dividido de forma automática igualmente por todas elas.

Se usarmos um valor em pixels, por exemplo 250px, a tabela vai ter uma largura fixa de 400px:

      
     

C 1	C 2	C 3
C 4	C 5	C 6

o resultado da tabela:

C 1	C 2	C 3
C 4	C 5	C 6

Em cada linha a soma dos valor de largura definido para as colunas totaliza o valor da largura da tabela 250+75+75=400.

Definir a Altura de uma Tabela

Podemos também definir uma altura para a tabela adicionando o atributo "height":

      
     

C 1	C 2	C 3
C 4	C 5	C 6

resultado:

C 1	C 2	C 3
C 4	C 5	C 6

Alinhamento Horizontal do Conteúdo das Células

Por defeito o conteúdo das células está alinhado à esquerda, mas é possivel também centrar o conteúdo e alinhar à direita. Para isso usamos o atributo "align" no interior da tag :

      
     

C 1	C 2	C 3
C 4	C 5	C 6

resultado:

C 1	C 2	C 3
C 4	C 5	C 6

Se quisermos alinhar à direita temos que usar align="right".

Alinhamento Vertical do Conteúdo das Células

Por defeito os dados ficam alinhados verticalmente no meio (middle) da célula, mas é possivel também alinhar o conteúdo e alinhar para o fundo (bottom) e para o topo (top) da célula. Para isso usamos o atributo "valign" no interior da tag :

      
     

C 1	C 2	C 3
C 4	C 5	C 6

resultado:

C 1	C 2	C 3
C 4	C 5	C 6

Reparem como o C1 ficou alinhado pelo fundo e o C4 pelo topo da célula.
Voltar ao Índice

Definir Listas

Lista numerada
Para apresentar uma lista de itens numerada usamos a tag

, iniciais de "ordered list", para a lista, e a tag
1. , iniciais de "list item", para cada item:

1. Item 1


2. Item 2


3. Item 3

e o código resulta em:

1. Item 1
2. Item 2
3. Item 3

Lista não numerada
Para apresentar uma lista de itens não numerada usamos a tag

, iniciais de "unordered list", para a lista, e a tag
• , iniciais de "list item", para cada item:

• Item 1


• Item 2


• Item 3

e o código resulta em:

• Item 1
• Item 2
• Item 3

Voltar ao Índice

Caracteres Especiais

Código	Carácter	Descrição
<	<	Menor que
>	>	Maior que
™	™	Trademark
&	&	Ampersand
®	®	Marca Registada
©	©	Copyright
†	†	Cruz
"	"	Aspas
»	»	Seta de citação
«	«	Seta de citação
—	———	Tracejado
°	20°	Grau
¼	¼	Um quarto
½	½	Um meio
¾	¾	Três quartos
·	·	Ponto no meio
¡	¡	Ponto exclamação invertido

Para se conseguir que apareça um dos simbolos da coluna amarela basta colocar o respectivo código no HTML da página.
Voltar ao Índice

• Corretor ortográfico no Firefox http://t.co/NmylNvyMPn 1 day ago
• Mudaram os links dos anúncios do Adsense http://t.co/RuKQ6rYb 12 days ago
• Link para vídeo do Youtube em HD http://t.co/qQXdBzDw 13 days ago

Siga o Twitter