Tutorial de HTML+CSS - Introdução - Básico & Avançado

por **Admin** Qui Mar 12, 2015 8:30 pm

Obs: Esse tutorial é feito totalmente por mim, e por isso quero que respeite os créditos, se for postar algum tutorial em outro fórum, quero que coloque os meu créditos!

Hoje estarei ensinando a você como criar sites Utilizando HTML & CSS de uma forma muito mais prático de se usar, você vai perceber que trabalhar com HTML & CSS são as melhores coisas que aconteceu no mundo de hoje, sem falar que existem outras linguagens que facilita o desenvolvimento de um website.

Obs: Em breve estarei postando tutorial com Vídeo Aula, mas atualmente não estar sendo possível, mas lembre-se aquele que tiver muita força de vontade e paciência de aprender a criar site, deve ler tudo o que estar escrito.
[vamos começar]

1° - PASSO
Vá em meu computador depois em disco Local C: - dentro do Disco Local C: crie uma pasta chamada [Site].
Caso esteja usando o Wampserver, você deverá salvar as suas página dentro da pasta [www].
[Continuando....]

2° - PASSO
Abra seu Dreamweave ou Qualquer outro tipo de editor de texto como por exemplo Bloco de Notas ou NotePad++, caso você não tenha nenhum tipo de editor de texto instalado em seu computador, você pode desenvolver seus site utilizando o Bloco de Notas do Windows sem ter nenhum problema!
[Continuando....]

3° - Construindo o Alicerce
Com o seu editor de Texto aberto vamos iniciar o nosso tutorial.
Estarei explicando com detalhes para vocês cada Tag, para a construção do alicerce.

Tag<html> -> A siga HTML, significa em Português: Linguagem de Marcação de Hipertexto.
Em inglês: HyperText Markup Language, é com essa tag que deve iniciar a construção do seu alicerce, toda tag que você inicia tem que ter um fechamento, como por exemplo: <html> é uma tag iniciada e a tag </html> usada por uma barra é uma tag de fechamento isso significa que o código acaba ali.

Tag<head> -> A Tradução da Tag Head significa em português: Cabeça, abaixo dessa tag Head você deverá colocar links que possa chamar um arquivo de CSS ou Javascript entre outros.

Tag<title>-> A Tradução da Tag Title significa em português: Titulo, entre as tags <title> você deverá dar o nome do seu site.

Tag<body>-> A Tradução da Tag Body significa em português: Corpo dentro das tag <body> você poderá colocar: Vídeos, Musicas, Imagens, Textos, Links, entre outros.

Agora que já entendeu um pouco sobre essas Tag, vamos começar a Criar o nosso Código por completo.

Com o seu Editor de texto aberto, vamos iniciar!

<html>
< head>
< title>Meu Primeira Página</title>
< /head>

< body>

< /body>
< /html>

essa é a regra que você deve seguir para construir seu alicerce, onde você vai desenvolver e dar vida ao seu website.
depois de ter acabado de digitar esses códigos, salve dentro da pasta [Sites] dê um nome chamado:[index.html] quem estiver usando o wampserver salve dentro da pasta [www], você já pode visualizar seu website criado.

4° - Passo
Agora irei explicar a vocês uma coisa, que muitas pessoas acabam errando.
quando for salvar suas páginas, você podem dar qualquer tipo de nome sendo que nomes que contém acentos não irão funcionar exemplo: informação.html dessa forma estar errada, o correto é: informacao.html, quando for criar a página inicial do seu site, salve sempre com nome [index.html] os navegadores reconhecem que o nome index é uma inicialização de um documento. então na hora da criar a sua página principal sempre dê o nome de [index.html] lembrando mais uma coisa, a extensão deve ser colocada dessa forma: o nome da página.e a extensão que é o html, ao colocar a extensão html, ele transforma o arquivo de texto em uma página da web!

5° - PASSO
Abra um novo arquivo no bloco de notas e salve com nome de estilo.css, caso esteja usando o dreamweave abra um novo arquivo em css e salve com o nome estilo.css!

Quem gostou desse tutorial comentem abaixo,

CÉDITOS
Criador do tutorial: WiCkeD.uK e iTeach