Curso basico e avançado de HTML

**RevoltadO** · Junho 27, 2009

COMANDOS BÁSICOS DE HTML

O QUE É HTML

HyperText Markup Language é uma linguagem utilizada na construção de páginas WEB. Ela é composta por vários comandos que o browser interpreta e monta graficamente um resultado.

Qualquer erro que ocorra em uma página WEB, ao contrário de outras linguagens, é ignorada pelo browser.

O QUE SÃO OS TAGS

Tags são os comandos da liguagem HTML. Eles devem sempre aparecer entre os sinais de menor e maior (< >). Além disso eles têm uma sintaxe de "liga" e "desliga", por exemplo:

<center>Texto a ser centralizado</center>

Não existe nenhuma diferenciação entre maiúsculas e minúsculas.

FORMATO DE UM ARQUIVO HTML

Um arquivo HTML deve conter alguns comandos básicos, apesar de que o browser pode até interpretar o arquivo sem eles.

São eles:

<html>...</html> indica que comandos HTML se encontrarão entre os tags. Eles indicam o início e o fim do arquivo.

<head>...</head> indica o cabeçalho da página, com diversas informações como por exemplo o título.

<title>...</title> especifica o título da página que é mostrado na barra de títulos do navegador.

<body>...</body> contém o corpo do arquivo HTML, ou seja o conteúdo em si da página, com todos os demais comandos que a compõe.

VAMOS EXERCITAR

Para isso você vai precisar do Bloco de notas e do seu navegador de Internet abertos ao mesmo tempo, após digitar os comandos no Bloco de notas você deverá salvar o documentos com extensão .html, por exemplo index.html. Sua página inicial deverá ser salva com o nome de index.html, as demais você poderá salvar como o nome que quizer, mas sempre nomeescolhido.html .

No navegador você irá abrir seu arquivo salvo em html e visualizar, quando fizer alguma alteração no Bloco de notas salve e após atualize o navegador e veja as alterações.

Vejamos um exemplo de arquivo html:

<html>

<head>

<title>Alo mundo!</title>

</head>

<body>

Alo mundo! Este e o meu primeiro arquivo HTML!

</body>

</html>

Vejamos o resultado deste código:

Vejamos a seguir os principais comandos para a criação de páginas simples HTML.

Cabeçalho

Como o próprio nome diz são formatos de texto próprios para cabeçalho.

<h1>...</h1> Este forma um cabeçalho com letras grandes

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6> Este forma um cabeçalho com letras pequenas

Entre eles as letras vão diminuindo de tamanho. Por exemplo

<html>

<head>

<title>Exemplo de Cabecalho</title>

</head>

<body>

<h1>Exemplo de cabecalho h1</h1>

<h2>Exemplo de cabecalho h2</h2>

<h3>Exemplo de cabecalho h3</h3>

<h4>Exemplo de cabecalho h4</h4>

<h5>Exemplo de cabecalho h5</h5>

<h6>Exemplo de cabecalho h6</h6>

</body>

</html>

Aqui está o resultado:

Paragrafos

Existe duas maneiras de se criar quebra de linha:

<p> Para criar um parágrafo novo, ou seja pulando uma linha.

<br> Para ir para a linha de baixo

Por exemplo:

<html>

<head>

<title>Exemplo de Parágrafos</title>

</head>

<body>

Este e o primeiro paragrafo.<p>Este e

o segundo paragrafo<p> Este e o terceiro paragrafo com<br>quebra de linha

</body>

</html>

Como resultado temos:

Barra de Divisão

A barra de divisão serve para colocar uma separação entre um texto e outro. Deve ser usado o seguinte TAG:

<hr>

Vejamos um exemplo:

<html>

<head>

<title>Exemplo de Barra de Divisão</title>

</head>

<body>

Este e o primeiro conjunto de texto.<p>

<hr>

Este e o segundo conjunto de texto.

</body>

</html>

Veja o resultado:

Alinhamento

Para alinhar um parágrafo, usaremos um parâmetro do tag <p>:

<p align=>

Podemos usar as opções:

<p align=left> ... </p> É o padrão e alinha o texto à esquerda.

<p align=right> ... </p> Alinha o texto à direita.

<p align=center> ... </p> Centraliza o texto.

Vejamos um exemplo:

<html> <head> <title>Exemplo de Barra de Alinhamento</title> </head> <body> <p align=left>Alinha o texto a esquerda.</p> <p align=right>Alinha o texto a direita.</p> <p align=center>Centraliza o texto.</p> </body> </html>

Veja o resultado:

Cores

Para trabalharmos com cor, usaremos um parâmetro do TAG <body>, mas antes disso temos que saber como funciona o processo de criação de uma cor em HTML.

HTML usa o padrão de codificação RGB em hexadecimal. RGB (Red Green Blue) usa a quantidade de cada uma das cores básicas (vermelho, verde e azul) para se criar uma cor.

Para se formar uma cor usa-se a seguinte codificação:

#RRGGBB

onde:

RR indica um número com a quantidade de vermelho (de 00 à FF)

GG indica um número com a quantidade de vermelho (de 00 à FF)

BB indica um número com a quantidade de vermelho (de 00 à FF)

Por exemplo:

Branco -> #FFFFFF

Preto -> #000000

Vermelho -> #FF0000

Verde -> #00FF00

Azul -> #0000FF

Usaremos os seguintes parâmetros do TAG <body>:

Bgcolor Cor do fundo.

Text Cor do texto.

Link Cor do link.

Alink Cor do link no momento que é acessado.

Vlink Cor do link anteriormente visitado.

Vejamos um exemplo:

<html>

<head>

<title>Exemplo de Cores</title>

</head>

<body bgcolor=#000000 text=#FFFFFF link=#FF0000 alink=#00FF00 vlink=#0000FF>

Exemplo do uso de cores </body>

</html>

Veja o resultado:

Imagens

Existem dois tipos de imagens que podemos utilizar: papel de parede e imagens própriamente ditas.

Vejamos primeiro um papel de parede. Para isso vamos colocar outro parâmetro do TAG <body>:

Vejamos um exemplo:

<html>

<head>

<title>Exemplo de Papel de Parede</title>

</head>

<body background="c:\imagens\figura1.jpg">

Este texto vem por cima da figura.

</body>

</html>

Veja o resultado:

Agora usaremos o TAG </IMG> para adicionarmos uma imagem na página acima:

<html>

<head>

<title>Exemplo de Imagens</title>

</head>

<body background="c:\imagens\figura1.jpg">

Este texto vem por cima da figura1.

<img src="

O conteúdo está oculto, favor efetuar login ou se cadastrar!

E este vem ao lado.

</body>

</html>

Veja o resultado:

Hyperlinks

Hyperlinks são comandos HTML para conectarmos páginas independentes umas com as outras, ou até mesmo uma conexão para algum arquivo.

Para isso usaremos o TAG </a> e seu parâmetro href.

Veja o exemplo:

<html>

<head>

<title>Exemplo de Hyperlinks</title>

</head>

<body>

Esta frase vem antes desta

<a href="

O conteúdo está oculto, favor efetuar login ou se cadastrar!

serie de palavras</a>que ligam o texto a outra pagina.

</body>

</html>

E este é o resultado:

Editado Junho 27, 2009 por RevOltadO

**bombrill** · Junho 28, 2009

Ajuda mais curso microlins ajuda muito mais :)

Obrigado pelo Post quem dera todos fossem util assim ...

**KhayrusS** · Junho 28, 2009

Muito Bom

**4R13L** · Junho 28, 2009

ficou muito bom mesmo pros iniciantes ja da uma ajuda^^

**ViNy** · Junho 28, 2009

Ajuda mais curso microlins ajuda muito mais :)

/b]

Microlins é uma bosta.

**Fulaninho1** · Junho 28, 2009

RR indica um número com a quantidade de vermelho (de 00 à FF)
GG indica um número com a quantidade de vermelho (de 00 à FF)

BB indica um número com a quantidade de vermelho (de 00 à FF)

Já sabe o que tá errado né?

De tudo muito bom o guia. Basicão mesmo. Não é aquele guia que o cara lê e já sai fazendo site, mas sem saber isso não faz nada.

Uma pergunta: no L2 tem as tags <br> e <br1>, acho que a <br1> é um espaçamento menor que a <br>

Existe alguma relação?

Abraços o/

**RevoltadO** · Junho 30, 2009

Microcamp é bom :lol:

faço lá Inglês,Espanhol,Web designer e Ti(Tecnologia da imformação)

**--BloodDog--** · Dezembro 23, 2009

affs, poucos dessas sao utilizados nas html do L2 ¬¬...

Eu consigo fazer tudo que preciso porem nao aprendi a alinhar itens do HTML (Botoes, icones, etc...)

Mais parabens, otimo tuto de introduçao!!

**dionisio** · Janeiro 11, 2010

NO MOMENTO NAO FAÇO O CURSO DE WEB..... + JA FIZ MUITA COISAS APRENDENDO DE VCS!!

VLW

**cassianorocha** · Janeiro 11, 2010

vlw mto bom mano teria de php tbm java heheh ^^

**kkrico** · Janeiro 11, 2010

Hahaha Bem legal.Vai ajudar muita gente inclusive eu ^^

Agora se tivesse um de PHP e/ou um de Java eu ia agradecer d+ ;D

**Raul Henrique** · Maio 29, 2011

Microcamp é bom :lol:

faço lá Inglês,Espanhol,Web designer e Ti(Tecnologia da imformação)

Teria que fazer de Português tb.( IMFORMAÇÂO ? )

**HangLooseE** · Maio 29, 2011

Nossa veio , voce ressucita o topico pra corrigir 1 erro de portugues ?

tenso voce nao acha ?

**vert** · Junho 2, 2011

muito bom

**Sr.Dos.Aneis** · Outubro 31, 2013

Microcamp é bom :lol:

faço lá Inglês,Espanhol,Web designer e Ti(Tecnologia da imformação)

parabéns pelo tutorial lá vai um pedido

tem como mudar o tipo de letra tipo arial, verdana, etc..

ah.. nas html de npc dntro do jogo ^^

Editado Outubro 31, 2013 por Sr.Dos.Aneis

**ShadooW** · Setembro 30, 2016

poderia da um up nos ss?

Entrar

Curso basico e avançado de HTML

Posts recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Join the conversation

Registre-se

Anúncios

Patrocinadores

Quem Está Navegando

Posts

Important Information