Firme na Rocha Cursos e Tutoriais Grátis: CURSO DE HTML GRÁTIS

H T M L - FAÇA VOCÊ MESMO O SEU SITE E GANHE DINHEIRO

Leia também a postagem sobre como ganhar dinheiro pela internet.

CURSO DE HTML

VIRE LOGO ESTA PÁGINA

FAÇA VOCÊ MESMO O SEU SITE

passo a passo

A.Reis

O estudo do HTML além de permitir fazer sites

é essencial ainda para aperfeiçoar

o uso em sites prontos e CMS.

Não tente decorar, apenas leia, copie

e cole os exercícios no bloco de notas

ou digite-os para uma memorização natural.

Aprende-se exercitando.

Acir Reis (AReis)

INTRODUÇÃO

HTML significa Hyper Text Markup Language - Linguagem de Formatação de

Hipertexto.

Na verdade pode-se criar páginas sem conhecer HTML. Para isto haveria

necessidade de contar sempre com um dos editores existentes (Front Page e Cute

HTML por exemplo). Mas há situações em que podemos estar sem o aplicativo e

ficaríamos impedidos de alterar ou criar páginas.

Certamente o conhecimento de HTML aperfeiçoa a criação e acelera as

alterações feitas nas páginas. Inclusive para sites prontos é essencial.

Pode-se fazer páginas em HTML usando o Word, o Bloco de Notas, ou o editor

fornecido pelo site de hospedagem. Procure um site gratuito para treinar HTML. Procure

no site de busca, existem muitos. Estes sites fornecem um editor de HTML, não utilize

outro recurso tipo faça fácil, você terá que treinar HTML.

Trabalhe no editor ou faça no bloco de notas, teste no navegador IE ou Chrome.

Pode também copiar, colar e testar no próprio editor do site.

Se você tem o front page ou similar, deve praticar nos dois modos – normal e

HTML. Alterando uma configuração no modo normal, conferindo a alteração no modo

HTML você verá cada mudança no código e poderá aprender mais facilmente,

visualizando no editor e visualizando no navegador (menu arquivo) – não podemos nos

estender pois este curso não é sobre o front page mas sobre HTML.

Você pode copiar do front page e colar no editor do site, e quando precisar alterar

no site poderá fazê-lo diretamente ou copiar do site, colar no front page ( ou

bloco de notas ) e fazer a modificação.

Existem editores de HTML em versões gratuitas, Cute HTML por exemplo,

procure nas buscas.

Há uma parte no editor de HTML que tem os termos: meta name, content – é para

organizar o documento, autor etc. No comando name vai o tipo de informação, no

comando content a especificação. Serve também para possibilitar a busca através de

palavras chaves (keywords) e descrição do site (description) .

Procure utilizar muito bem esta área para aumentar o número de visitas no seu

site.

ONDE TUDO COMEÇA

Não se preocupe em decorar, apenas leia, copie e cole os exercícios no bloco de

notas ou digite-os para uma memorização natural.

Código HTML Básico

------------------------------------------

<html>

<head>

<title> título do site </title>

</head>

<body> texto do site, figuras, banners etc </body>

</html>

-------------------------------------------

Só com o que está escrito acima, você já pode fazer e colocar uma página na

internet. Uma página bem simples logicamente. Isto mesmo, do jeito que está.

Copie, cole no bloco de notas e organize como está aqui, agora é só colocar o

título entre < title> e </title> e escrever o quiser entre < body> e </body>, salve

com o nome index.html. Agora abra a pasta onde salvou e você vai encontrar o

arquivo do navegador abra-o e veja sua página.

Estas expressões entre < > são chamadas tags (marcadores), observe que são

oito no total, estas oito são básicas, e que usam quatro palavras em inglês (uma sigla) ,

sendo que quatro acompanhadas pelo sinal /

html - head - title- body

Salvar no bloco de notas

Salvar como->Todos os arquivos-> index.html->Salvar

1. html - É o nome da linguagem, identifica o tipo do documento.

2. head - Cabeçalho aonde ficam informações sobre o documento e o título.

3. title - Onde fica o título do documento.

4. body - Corpo da página, aqui é que ficará sua página.

Estas tags exigem abertura e fechamento .Ex:

A abertura é simplesmente , < body> sinal de menor que, body, sinal de maior

que. O fechamento é </body> a única diferença é o sinal /.

Este negócio de abrir e fechar é importante, mas certas tags não precisam fechar

. Para melhor organização aconselho fechar todas, ou até adquirir prática pelo menos.

Quando são de fechamento obrigatório, causam problemas e até impedem o

funcionamento correto da página se não forem fechadas.

Não pretendemos neste curso encher o leitor com terminologias. O que

objetivamos é a aprendizagem funcional. Parta de imediato para a prática, vá fazendo

modificações, salvando e observando o efeito.

Tenha plena certeza que o entendimento você conseguirá exercitando.

Escrevemos as tags com letras maiúsculas e com minúsculas isto

não faz diferença em HTML. Dizemos que o HTML não é sensível à caixa. Aconselho,

entretanto, acostumar-se a escrever tudo em minúsculo. Isto vai facilitar em aplicações

mais elaboradas no futuro.

em HTML

<body> é igual a <BODY>

<title> é igual a <TITLE>

e assim por diante.

Isto se chama - não ser sensível à caixa.

Volte ao início e observe que HTML envolve tudo, o HEAD envolve o TITLE ( e as

meta tags ) no TITLE você coloca o título da página e no BODY vai a própria página.

Quando você fecha </ comando> está dizendo “acaba aqui”

Trabalhe um pouco com as tags básicas para exercitar-se.

Veja o exemplo abaixo, copie-o e cole no bloco de notas ou outro editor de

texto, salve com o nome - teste.html ( não esqueça o ponto antes do html), abra a

pasta onde salvou e você vai encontrar o arquivo do navegador, abra-o e

observe a página com cuidado de cima até a parte de baixo.

Obs: O bloco de notas é muito simples de usar, mas existem bons editores de

HTML que facilitam muito.

Ex de Editores de HTML: Front page, Cute HTML, Dreamweaver

COMEÇANDO A PRATICAR

Exemplo.

<html>

<head>

<title> aqui fica o título </title>

</head>

<body> esta é a parte aonde vai tudo o que você quer que

apareça: textos, cor da página, figuras, letreiros etc. </body>

</html>

Copie, cole no bloco de notas e salve [nome da página.html]

Notou que eu disse para salvar com { Nome.html }. Isto é, você pode dar o nome

que quiser, após o nome coloca ponto html ou (.htm ).

Nome.html ou Nome.htm

Não confunda o título com o nome do arquivo salvo.

A PRIMEIRA PÁGINA DO SITE

A primeira página do seu site deve ter sempre o nome index.html, é o mais usual

e exigido em certos casos. Copie o exemplo acima, salve-o da maneira ensinada, abra e

veja.

VAMOS MELHORAR NOSSA PÁGINA?

COR DE FUNDO

bgcolor=”cor”

COMECE A PRATICAR

Abra o bloco de notas e escreva ou copie e cole o seguinte: Antes o <body> de

abertura estava só e agora?

...............................................

<html>

<head>

<title> Página principal </title>

</head>

<body bgcolor ="blue"> agora coloquei um comando diferente

chamado bgcolor e o defini como” blue” ( azul em inglês). Este

comando determina a cor de fundo da página. Veja como

ficou. </body>

</html>

.................................................

Observe que há um comando (atributo) novo (bgcolor) junto de body, este

comando é para colocar uma cor de fundo na página. No caso a cor é azul “blue”em

inglês, pode-se colocar cor também através de códigos que constam de tabelas.

Por enquanto faça-o escrevendo o nome da cor em inglês.

Atributo = “Valor”

bgcolor = " blue"

bgcolor (é um atributo) = “blue” ( valor do atributo)

Cores

Black = preto

Maroon = castanho

Green = verde

Olive = oliva

Navy = azul marinho

White = branco

Blue = azul

Gray = cinza

Silver = prata

Red = vermelho

Lime = limão

Yellow = amarelo

Escreva corretamente os nomes das cores

Agora salve com o nome – index.html , abra a pasta onde salvou e verá um

arquivo do navegador, abra-o e veja seu trabalho.

Ainda precisa melhorar!

Estes comandos entre os sinais < > chamam-se tags, observe que: Começa

sempre com <html> e termina fechando</html>, sempre que for preciso fechar um

comando tem que usar < / comando> - e sempre que for abrir usar < comando>.

A segunda tag é a do cabeçalho e ela contém o title, aonde você insere o título

de sua página ex. <title> página de fulano </title> este nome virá no alto do seu

navegador. Coloque nomes significativos nas páginas.

A parte <body> (corpo) é justamente o corpo da página, tudo o que vai ser visto

, naturalmente </body> marca o fim da sua página. Depois fecha com </html>.

Não esqueça

Corpo da página como dissemos é entre <body>...............corpo..................</body>

Quando não se especificam atributos o valor apresentado é o valor padrão.

Default = padrão

A cor de fundo padrão é branca = white e a cor da fonte padrão é preta = black

PARÁGRAFO

comando

Cria um espaço entre as linhas.

Continuemos a exercitar( você pode copiar e colar estes comandos e fazer as

mudanças ou reescrevê-los para facilitar a memorização se quiser)

Torne a abrir o bloco de notas e escreva

................................................................................

<html>

<head>

<title> Página do Fulano </title>

</head>

<body bgcolor ="white"> A minha página tem a cor branca no fundo

por causa do comando bgcolor = white, mas coloquei um nova

tag abaixo e ela faz surgir um parágrafo .

Há um parágrafo aqui, isto é novidade para mim

</body>

</html>

..............................................................................

Salve e veja como ficou .

Obs: parágrafo notou o que fez o . Se não entendeu retire somente o e

, salve com outro nome e veja. O comando não exige fechamento.

cria um parágrafo

que pode ser alinhado usando

ALINHAMENTO DO PARÁGRAFO

Alinhamento ao centro

Alinhamento à esquerda

Alinhamento à direita

Coloque um destes no lugar de . Substitua e veja o efeito.

<html>

<head>

<title> Página do Fulano </title>

</head>

<body bgcolor ="blue"> A minha página tem a cor azul de fundo

por causa do comando bgcolor = blue, mas coloquei um nova

tag abaixo e ela faz surgir um parágrafo centralizado .

Há um parágrafo, centralizado, aqui, isto é novidade para mim

</body>

</html>

O padrão (default) é left, observe que nada muda quando se coloca o mesmo.

CRIAR UMA LINHA

comando <hr>

Abra o bloco de notas. Copie o exercício salve e veja como ficou.

.......................................................................

<html>

<head>

<title> Seu título </title>

</head>

<body bgcolor = "blue"> A minha página tem a cor de fundo azul por

causa do comando bgcolor = blue coloquei abaixo um nova

tag - hr- e apareceu uma linha horizontal.

<hr> Ficou muita boa.

</body>

</html>

.......................................................................

A tag <hr> insere linha horizontal

Pode definir largura (width), cor (color) e espessura (size), da linha, se quiser

ex:

.............................................................................

<html>

<head>

<title> Seu título </title>

</head>

<body bgcolor = "blue"> A minha página tem a cor de fundo azul por

causa do comando bgcolor = blue coloquei abaixo um nova

tag - hr- e apareceu uma linha horizontal.

<hr width =100% size= 10 color= "red"> Ficou muita boa.

</body>

</html>

................................................................................................

Você já pode melhorar um pouco a aparência da sua página. Coloque parágrafos

alinhados, linhas e cor de fundo.

QUEBRA DE LINHA

comando escreve na próxima linha

Quebra a linha mas não dá espaço de parágrafo.

................................................................................................

<html>

<head>

<title> Título da página </title>

</head>

<body bgcolor ="blue"> A minha página tem a cor de fundo

azul por causa d o comando bgcolor = “blue”

coloquei o comando de quebra de linha três

vezes e as linhas foram quebradas três vezes.

</body>

</html>

..................................................................................................

E se colocar vários um ao lado do outro? Tente ! Escreva alguns lado a lado

salve e veja.

ALTERANDO A COR DA FONTE

text=cor (na tag< body>)

....................................................................................

<html>

<head>

<title> Título </title>

</head>

A minha página tem a cor de fundo azul e todo o texto

vermelho.

</body>

</html>

..................................................................................

A cor da fonte pode ser definida fora da tag< body> com

Texto delimitado .

Isto limita ao texto contido entre a abertura e o fechamento.

.....................................................................................

<html>

<head>

<title> Título </title>

</head>

<body bgcolor ="blue" text="white" > A cor do texto geral foi definida como white =

branca

A página tem a cor de fundo azul e o texto

vermelho entre estas tags, como fechamos volta à cor definida em body text.

</body>

</html>

......................................................................................

O comando altera a cor de parte do texto até o fechamento.

Se não fechar todo o texto que está após este comando fica alterado.

TAMANHO DA FONTE

comando size = “valor”

Iremos a seguir alterar o tamanho da fonte

.....................................................................................

<html>

<head>

</head>

a minha página tem a cor de fundo a zul e o texto

vermelho, eu aumentei o tamanho da fonte. Mas esta parte não foi aumentada.

</body>

</html>

......................................................................................

O comando altera o tamanho da fonte, o valores vão de 1 a 7.

Alteramos o tamanho fonte de parte do texto, fazendo o fechamento .

Há casos em que as aspas não são exigidas blue é aceito = “blue”. Há diferenças

entre os navegadores.

Observações:

Para alterar só um trecho coloque o comando, o texto a ser

alterado e feche. Se não fechar vai alterar todo o texto que vem após o comando.

A extensão pode ser html ou htm ex: cursoreis.htm ou cursoreis.html

Os editores de HTML já salvam com a extensão htm ou html. No bloco de nota e

outros editores de texto você terá que especificar a extensão ao salvar.

Salvar como -Todos os arquivos- Digite nome.htm - Salvar

Nas tags meta name há especificação description = descrição

e keywords = palavras chaves no atributo content (conteúdo), de cada um, você

descreve o site e escreve palavras chaves respectivamente. Ficam antes do </head>

Vamos em frente!

ALTERANDO O TIPO DE FONTE

comando < face>

....................................................................................

<html>

<head>

<title> Título </title>

</head>

A minha página tem a cor de fundo branca e o texto

vermelho, defini o tamanho da fonte igual a 5<font color

= "green"> e estou escrevendo este trecho em na cor verde

mas aqui volta à cor geral.<font size =

"7" face="courier" color="blue"> Agora quero alterar o tamanho, a cor e o tipo de fonte

deste trecho

. Como eu fechei o restante continua

com o tamanho e a fonte anterior.

</body>

</html>

.....................................................................................

As fontes mais comuns são arial, courier e times new roman. Quando

determinados navegadores não reconhecem uma fonte utilizam o padrão.

CABEÇALHOS

Podem ser usados seis níveis de cabeçalhos, esses níveis definem o tamanho da

fonte dos cabeçalhos.

.......................................................................................

<html>

<head>

</head>

Cabeçalhos

<font size = "5" face= "arial"

color ="black">

<h1>cabeçalho 1</h1>

<h2>cabeçalho 2</h2>

<h3>cabeçalho 3</h3>

<h6> estou aprendendo HTML </h6>

A página tem a cor de fundo azul e o texto

vermelho, defini como 5 o tamanho da fonte

estou escrevendo este trecho em outra

cor mas o que vem após continua

igual.agora quero alterar o

tamanho deste trecho somentecomo eu

fechei o restante continua com o tamanho anterior

igual a 5

</body>

</html>

.......................................................................................

Faça várias alterações, a título de pesquisa, salve no bloco de notas e atualize no

navegador.

OUTRAS FORMATAÇÕES DE TEXTO

Texto negrito </b

Subscrito

Itálico

Sublinhado

Copie e cole para ver o efeito.

..................................................................

<html>

<head>

</head>

Aqui está em negrito <hr>

Aqui está

subscrito<hr>

E aqui sublinhado<hr>

Negrito sublinhado

</body>

</html>

.................................................................

CENTRALIZAÇÃO DE TEXTO

o comando<center >

.....................................................................................

<html>

<head>

</head>

<center> Este trecho eu quero centralizar</center>

</body>

</html>

.......................................................................................

Você se lembra que poderíamos centralizar com , mas

criaria espaço de parágrafo.

LISTAS

<ol> </ol> cria uma lista ordenada

Comandos para inserir listas. Para se ordenar uma lista usa-se a tag <li>

<html>

<head>

</head>

<body bgcolor =blue text=red><font size = 5 face= arial

black>

<ol>

<li>casas

<li>apartamentos

<li>sítios

</ol>

</body>

</html>

LISTA NÃO ORDENADA

Se quisermos lista não ordenada, no lugar de <ol> usamos <ul>

Veja

<html>

<head>

</head>

<ul>

<li>casas

<li>apartamentos

<li>sítios

</ul>

</body>

</html>

DESTACAR BLOCO DE TEXTO

comando<blockquote>

<html>

<head>

</head>

<body bgcolor =blue text=red><font size = 5 face= arial

black>

<blockquote> Bloco destacado é um recurso visual muito útil.

</blockquote>

</body>

</html>

Obs Coloque os comandos para o corpo da página entre <body> e </body>

Outro exemplo

<html>

<head>

</head>

<body bgcolor =blue text=red><font size = 5 face= arial

black>

<center> Este trecho eu quero só

centralizar</center><hr>

<blockquote> Bloco destacado Bloco destacado é um recurso visual muito útil para

que a minha página seja mais eficiente</blockquote><hr>

Parágrafo centralizado

Parágrafo à esquerda

Parágrafo à direita

</body>

</html>

Observações:

Algumas formatações e comandos só podem ser vistos nos provedores de

hospedagem e outros só funcionam em alguns navegadores. Por outro lado verificamos

que algumas diferenças podem ocorrer de um provedor para outro.

Os tamanhos size não são iguais aos tamanhos de fontes dos editores.

O COMANDO <PRE>

O comando <pre> conserva a formatação original de um texto inserido numa

página. Utilizando este comando você poderá separar palavras com os toques do

espaçador e isto será respeitado, a fonte todavia poderá mudar, conforme o seu

navegador.

<pre> pode separar que é respeitado </pre>.

Há casos em que as especificações tamanho da fonte , cores etc são aceitas

somente entre aspas.

Alguns editores trazem tamanho da fonte com sinal (+) para aumentar.

Cor dos Links

Na tag body ficam ainda os comandos link, vlink e alink que correspondem a cor

do link não visitado, do link visitado e do link que estiver clicando respectivamente.

IMAGENS

Inserir imagens

Para inserir imagem na página usa-se o comando <img src = “ nome.gif “> .Se a

imagem estiver na mesma pasta do arquivo da página, entre aspas estará o nome da

imagem e o tipo de arquivo(gif) (jpg) etc.

Alinhar imagens

align = alinhar imagem em relação ao texto

pode ser

align = top ( topo)

align = left(esquerda)

align = right(direita)

Não é obrigatório usar o align. Sem align ficará alinhada no padrão.

Quando a imagem está na mesma pasta <Iimg src = “nome da imagem. gif “> <Iimg src

= “ nome da imagem. jpeg “>

Quando a imagem não está na mesma pasta. <Iimg src = “ endereço/nome da

imagem.gif “>

O endereço é a pasta, o site etc

IMAGEM DE FUNDO NA PÁGINA

background

Trocamos bgcolor por background

< body background = “C://meus documentos/minhas imagens/ imagem.gif”>

< body background = “http://www.seusite.com.br/ imagem.gif”>

Veja que foi trocado o comando bgcolor por background.

Cuidado com o endereço da imagem. Quando as páginas forem exibidas na

internet o endereço deve estar correto. Para evitar erros procure colocar na mesma

pasta e bastará o nome da imagem.

HIPERLINKS

São elementos que ligam páginas ou sites. Clicando-se um link abre-se outra

página. Você sempre clica em links quando está na internet. Veja as diferenças.

1. Inserir hiperlink para outro site

<a href="http://www.diretoriodesites.anuncieeache.com">clicar</a>

2.Inserir hiperlink para outra página

<a href="http://www.diretoriodesites.anuncieeache.com/indicar.html">links</a>

3. Inserir hiperlink para a mesma página

<a href="#casas ">Casas</a>

<a name="casas">aqui se descreve</a>

Copie e cole no editor ou bloco de notas e veja. Observe que os foram usados para

separar e obter o efeito real

LETREIROS

<marquee height ="30" width = "300" direction = "left" scrollamount = "5"> escreva

aqui </marquee>

height = altura ( aqui 30pixels , teste outros valores), width =largura

direction = sentido do deslocamento (left = esquerdo)

scrollamount = velocidade (aumente este valor e veja).

Pode usar ainda behavior = ação, comportamento

<marquee behavior = scrool > entra por um lado sai pelo outro

<marquee behavior =slide> entra por um lado e para no outro

<marquee behavior = alternate>alterna

Exemplo

<marquee behavior = "scrool" height ="30" width = "300" direction = "left" scrollamount =

"5"> escreva

aqui </marquee>

ARQUIVO DE SOM

< bgsound src = “hino15.wav loop= "infinite"”> loop ( número de vezes que vai tocar -

hino 15 é o nome da música e wav é a extensão)

DISPLAY DE SOM

automaticamente e true quer dizer verdade, ou usar false -

hino 121 é o nome da música e mid a extensão. Outra extensão mp3)

As hospedagens gratuitas geralmente não aceitam arquivos de som.

ALGUNS CÓDIGOS DE CORES

Pode usar no lugar dos nomes em inglês.

# ffffff = white (branco) pode usar o nome em inglês ou o código

# 000000 = black(preto)

# ffff00 = yellow (amarelo)

# ff0000 = red (vermelho)

# 0000ff = blue (azul)

# 00ff00 = green(verde)

Existem tabelas de cores e códigos na internet .

Pode-se obter outras tonalidades variando-se letras e números. Ex 0000CC é

outro tom de azul.

TABELAS

Copie e cole embaixo de <body> nas tags básicas.

......................................................................................

<table align="center" bgcolor="blue" width="50%" border =“3"

cellpadding="10" cellspacing="3">

<tr>

<th bgcolor="white"colspan=2>Alunos</th>

</tr>

<tr>

<th >Curso</th>

</tr>

<tr>

</tr>

</table>

......................................................

Significados.

<table> = tabela

border=borda

bgcolor = cor de fundo

width =largura

cellspadding = dimensão da célula

cellspacing= separação entre células

colspan = expandir células (nº de colunas)

<tr>linha horizontal

<td>uma célula

<th>célula com títulos

O leitor deverá variar os valores e observar o efeito para aprender. Note bem a

que a diferença entre td e th é que td é mais usada para células em geral enquanto th

para títulos.

Você poderá colocar tabelas dentro de tabelas

Agora copie o último trecho todo de <tr> à </tr> e cole abaixo do mesmo , antes

de </table> , observe que surgiu mais uma linha, faça isto outra vez e confirme que este

trecho <tr>à </tr> cria uma linha horizontal , que naturalmente deve estar

preenchida com <td></td> ou <th></th> que corresponde as células. Para melhor

entendimento, crie mais algumas células copiando e colando <th></th> ao lado das

demais e vá observando. Veja bem que as células definidas por <th> ou <td> ficam

entre <tr></tr>.

Feche sempre as células no final da linha com </td> ou </th>

No lugar de bgcolor pode ser usar: background = “C://meus

documentos/minhas imagens/imagem.gif” para colocar uma imagem de fundo na

tabela.

Dentro das tabelas pode ter figuras, letreiros , links, outras tabelas e etc.

Vá modificando e aprendendo. Caso erre volte e verifique o que poderá estar

errado, tente outra vez, assim também se aprende.

Este curso é apenas o começo da caminhada, mas você já pode fazer uma boa

página. Vá em frente estude e pratique . Pratique muito, procure por em prática

de preferência em um site gratuito com editor de HTML.

Quando for colocar imagens em sua página não esqueça de carregar a imagem

no site de hospedagem, idem para arquivos de som.

Lembre-se também que, o arquivo da primeira página chama-se sempre

index.html, mas o título não é o nome do arquivo.

Para colocar links para páginas, faça-o pelo nome que você der às páginas

colocadas no site, escreva exatamente igual.

TOTALMENTE PROIBIDA A REPRODUÇÃO POR QUALQUER MEIO.

OUTROS LIVROS DO AUTOR

.Fabricação De Vassouras Passo A Passo

.Fibra de Vidro Laminação e Consertos Na Prática

. Cuidados com o PC

. Como ganhar dinheiro na Internet.

2004

Autor : A.Reis

Toda a Glória ao Senhor Jesus Cristo

terça-feira, 16 de maio de 2023

CURSO DE HTML GRÁTIS