CRIANDO SITE EM HTML - INICIANTE

**WebDesing** · Janeiro 5, 2013

BEM, ESTOU CRIANDO ESTE TUTORIAL PARA AQUELES(A) QUE NÃO TEM CONHECIMENTO EM PROGRAMAÇÃO HTML, MAIS QUE DESEJA APRENDER,

ESTE É UM TUTORIAL DE NIVEL INICIANTE, PORÉM PRIMEIRAMENTE QUERO ENSINAR O BÁSICO ULTILIZANDO APENAS O HTML, DEPOIS PASSAREMOS A ESTILIZAR AS PÁGINAS COM CSS.

Bem vou estar ensinando a criar site pelo Bloco de Notas!

1º - Porque criar um site através do Bloco de Notas do Windows?

2º - Quais as Diferença de Criar um Site no Bloco de Notas e outras pelo Programas?

Respondendo a Essa Perguntas:

1º - Aprendendo a criar um website pelo bloco de notas, digitando manualmente os codigos você acabará memorizando os codigos que irão aprender, pois no futuro quando for usar algum programa, para criação de website, quando o programa não gerar o codigo automaticamente você saberá qual codigo usar sem ter dificuldade nenhum.

2º - Já você aprendendo a criar um site pelo programa, quando o programa não gerar o codigo você não saberá qual codigo usar em suas páginas, pois sentirar dificuldade, pois o programa não gerou o codigo que você precisa, mais não fiquem preocupado pois estarei ensinando a usar os programas para a criação de um Website.

1º - PASSO

Vá em meu comp***dor depois em Disco Local (C:).

Dentro do Disco Local C: Crie uma pasta você poderá dar qualquer nome a esta pasta!

Depois abra o Bloco de Notas do Windows.

Para ter acesso ao Bloco de Notas do Windows você irá no Menu Iniciar - Todos os Programas - Acessorios - Bloco de Notas.

2º - PASSO

Agora vamos dar Inicio a criação do documento Html

Digite os seguintes Codigos.

<HTML>

<HEAD>

<TITLE>Aqui vai ficar o titulo do seu site</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Apois ter criado o documento Html no Bloco de Notas, vá no menu Arquivo Salvar Como, dê um nome a sua página com a extensão Ponto Html

Exemplo: Pagina.html

Antes de salvar a sua página, salve dentro da pasta que você criou no Disco Local (c:)

abaixo explicações sobre essas tags.

1º - sempre que iniciar uma tag a tag sempre deve ser fechada preste bem atenção como estar criada o documento Html

sempre que você inicar uma tag exemplo: <TITLE> VOCÊ DEVERÁ ULTILIZAR A BARRA / PARA O FECHAMENTO DA TAG </TITLE>.

2º - toda tag para colocar imagens, musicas, videos, conteudo, links e muitos outros, você deverá colocar dentro das tags body.

VAMOS AGORA CONHECER ALGUMAS TAGS

1º - A Primeira Tag que vamos iniciar é a tag <H1>, A tag <H1> Significa Texto Grande.

veja o exemplo de como ela fica, lembrando que você deve colocar dentro da body.

Apois colocar como estar abaixo salve e visualize sua página.

As demais Tags são <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6>

cada tag dessa representa um significado o:

<H1>Texto Grande</H1>

<H2>Texto Médio</H2>

<H3>Texto Rasuavel</H3>

<H4>Texto Pequeno</H4>

<H5>Texto bem Pequeno</H5>

<H6>Texto Muito Pequeno</H6>

Salve e veja como ficou!

<HTML>

<HEAD>

<TITLE>Aqui vai ficar o titulo do seu site</TITLE>

</HEAD>

<BODY>

<H1>COLOQUE AQUI O NOME DE ENTRADA DO SEU SITE, PODE SER BEM VINDO AO MEU SITE</H1>

<H2>Texto Médio</H2>

<H3>Texto Rasuavel</H3>

<H4>Texto Pequeno</H4>

<H5>Texto bem Pequeno</H5>

<H6>Texto Muito Pequeno</H6>

</BODY>

</HTML>

Agora vamos aprender a Centralizar os Textos Digitados dentro das tags <H1></H1>

é simples e facil, vamos ultilizar a Tag <CENTER></CENTER>

Veja abaixo como você deverá centralizar o seu texto.

salve e visualize sua página.

Mais a outra forma de centralizar o texto usando a tag ALIGN dentro do <H1></H1>

veja abaixo nas demais tags.

Salve e veja o resultado.

<HTML>

<HEAD>

<TITLE>Aqui vai ficar o titulo do seu site</TITLE>

</HEAD>

<BODY>

<H1><CENTER>COLOQUE AQUI O NOME DE ENTRADA DO SEU SITE, PODE SER BEM VINDO AO MEU SITE</CENTER></H1>

<H2><CENTER>Texto Médio</CENTER></H2>

<H3><CENTER>Texto Rasuavel</CENTER></H3>

<H4 ALIGN="CENTER">Texto Pequeno</H4>

<H5 ALIGN="CENTER">Texto bem Pequeno</H5>

<H6 ALIGN="CENTER">Texto Muito Pequeno</H6>

</BODY>

</HTML>

Agora Vamos colocar as Cores nos textos, isso é muito facil

vamos ultilizar a Tag <FONT></FONT> Nessa Tag você pode formatar Textos Cores até Tamanhos dos textos, para isso vamos digitar assim:

Veja abaixo:

Lembre-se que tem 2 formas de você colocar as cores nos seus texto, você pode adicionar as cores usando, cores em inglês como por exemplo: Blue, Red, Yellow, White, Purple, Orange, Green entre outros ou você pode usar as cores Hexadecimal exemplo: #ffffff - #990000 entre outros.

veja o resultado.

<HTML>

<HEAD>

<TITLE>Aqui vai ficar o titulo do seu site</TITLE>

</HEAD>

<BODY>

<H1><CENTER><FONT COLOR="BLUE">COLOQUE AQUI O NOME DE ENTRADA DO SEU SITE, PODE SER BEM VINDO AO MEU SITE</FONT></CENTER></H1>

<H2><CENTER><FONT COLOR="#990000">Texto Médio</FONT></CENTER></H2>

<H3><CENTER>Texto Rasuavel</CENTER></H3>

<H4 ALIGN="CENTER">Texto Pequeno</H4>

<H5 ALIGN="CENTER">Texto bem Pequeno</H5>

<H6 ALIGN="CENTER">Texto Muito Pequeno</H6>

</BODY>

</HTML>

Editado Janeiro 5, 2013 por WebDesing

**MarphY'** · Janeiro 5, 2013

Mano, até gostei da iniciativa. Porém está faltando bastante coisa aê. Por mais que seja um nível iniciante, deveria estar mais completo. Mas como você disse "na proxima ensinarei mais sobre as demais tags." vamos aguardar :D. Excelente continue ai, com certeza ajudará novatos na área de Web Design. Abraços!!

**Mr.Kadu** · Janeiro 5, 2013

belo tutorial so que vc esqueceu de adicionar a css entre outras coisas.

**Marco Santos** · Janeiro 5, 2013

Está muito simples, a iniciativa foi boa. :wink: Mais poderia ter falado sobre CSS, e algumas tags amais... :sleep:

**WebDesing** · Janeiro 5, 2013

Muito obrigado mesmo pelos elogios, mais as pessoas que são iniciante é obrigatorio aprender o básico do HTML, Porém eu não posso passar o CSS Agora, só quando eu realmente ver que dar pra iniciar o tutorial CSS. Mais mesmo assim muito obrigado.

**Garcia** · Janeiro 5, 2013

boa iniciativa.

**WebDesing** · Janeiro 5, 2013

pessoal em breve video aula

Editado Janeiro 5, 2013 por WebDesing

**Kaio Reia ?** · Janeiro 5, 2013

Parabéns,acredito que contém bastante pessoas que já sabem isto. Esta faltando o css, pois muita gente ainda não sabe.

**JheFF** · Janeiro 5, 2013

Legal dar inciativa em um projeto de aprendizado html.

infelizmente estas tags estão descontinuadas,

se mais pra frente quiser ajuda com o projeto me chama achoo que poderei ajudar :smile:

**WebDesing** · Janeiro 5, 2013

Vou dizer uma coisa, eu sei que tenho que ensinar a usar o CSS, mais pessoal vamos lembrar uma coisa, eu estou dando esse tutorial de html, para quem realmente não sabe criar site nenhum e quer aprender, como posso ensinar CSS aos iniciante se eles(a) não saber o básico do html, eu vou chegar no CSS, e em outras Linguagens.

mais muito obrigado mesmo pela força que vocês estão me dando. :biggrin:

**itallo261** · Dezembro 14, 2016

Então bom dia, boa noite, boa tarde, gostaria de saber que esse modo de script funciona para site de L2 e da pra usa com o wampserv ou appserv gostaria que me add skype para tira algumas duvidas...

Skype:vinicius.silvamkc

gostaria muito de ter um desenvolvedor para meu servidor que estou querendo abrir

**João. VitorB.** · Dezembro 14, 2016

Então bom dia, boa noite, boa tarde, gostaria de saber que esse modo de script funciona para site de L2 e da pra usa com o wampserv ou appserv gostaria que me add skype para tira algumas duvidas...

Skype:vinicius.silvamkc

gostaria muito de ter um desenvolvedor para meu servidor que estou querendo abrir

Eu não li o tópico, apenas "passei o olho". Pelo que vi é apenas HTML, e o mesmo funciona sem web server, ou seja, sem wampserv ou appserv, basta salvar em um bloco de notas com a extensão ".html". E caso queira usar o modelo como base para editar o site do seu servidor, pode sim ser usado, independente se você usa wamp ou appserv. Lembrando que você deve tomar cuidado com as tags, ex., <h1></h1> até a <h6></h6>, porque você pode acabar modificando a "semântica" do seu site. Aconselho você pegar as tags que gostou do tópico e pesquisar sobre elas, algumas não são mais utilizadas, e pesquisando você irá descobrir como estão sendo utilizadas atualmente.

Entrar

CRIANDO SITE EM HTML - INICIANTE

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

Registre-se

Anúncios

Patrocinadores

Quem Está Navegando

Posts

Important Information