Apesar de existir muitos sites eles não são tão fáceis de se fazer pois você precisa aprender alguma linguagem de programação, e a mais importante de todas sem duvida é o HTML (
Hyper Text Markup Language), mas para que você faça um site profissional é bom você aprender mais linguagens para desenvolvimento para WEB, algumas dessas linguagens são CSS, JavaScript, PHP e etc.
Outra coisa importante é sobre onde você vai hospedar seu site, escolha bem seu servidor de hospedagem, pesquise sobre ele e verifique se outras pessoas tiveram problemas.
As ferramentas que eu utilizo e que nunca tive problemas são o Adobe Dreamweaver e o Microsoft Visual Studio.
Veja o exemplo abaixo de uma pagina HTML com CSS:
------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VBFácil</title>
<style type="text/css">
#Menu {
width:200px;
background-color:#CCC;
float:left;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<p><img src="file:///C|/Users/Felipe Durar/Desktop/VBFácil/Logo.png" width="267" height="59" />
</p>
<hr />
<div id="Menu">
<p align="center">Menu</p>
<a href="page2.html" style="color:#000">Conteúdo 1</a>
</div>
<div id="Conteudo">
pupupo
</div>
<p><br />
</p>
<hr />
<footer>
<p align="center"> VBFácil 2012</p>
</footer>
</body>
</html>
------------------------------------------------------------------------------------------------------
As Tags ficam entre < e > no caso acima a pagina HTML fica entre a tag HTML e dentro dela tem a tag HEAD e BODY, a tag HEAD delimita a seção de cabeçalho do documento.Trata-se da primeira seção do documento, e a tag BODY é o Corpo da pagina onde tem tudo.
Geralmente a teg HEAD é utilizada para colocar o titulo da pagina, JavaScripts, CSS e etc.
Note que quando vamos utilizarmos CSS dentro da pagina utilizamos a tag Style e definimos o tipo com o type="text/css".
A tag Div é muito importante, através dela você pode criar uma caixa com outras tags dentro na pagina e pode posiciona-la onde você quiser, note que na frente tem o id que é como uma Identidade para a caixa e através dessa identidade você pode adicionar CSS separado, veja que dentro da tag style tem um sustenido e na frente o nome da id do div e entre as chaves tem os códigos CSS para a div Menu.
A tag hr faz uma linha na pagina e é muito simples de se utilizar, é só adicionar <hr /> na pagina, se você quiser pode mudar a cor, a espessura e outros.
A tag footer também é para organização da pagina, só que neste caso ela já é dividida, veja a imagem abaixo para você entender melhor sobre layout em HTML:
Agora note que no código la em cima onde esta a tag Footer esta o texto mais baixo e note que na imagem acima o Footer também esta abaixo.
Trabalhando com Texto
Existem varias tags para trabalhar com texto, algumas delas você já deve ter visto nas redes sociais como o Orkut que utiliza tags como <i>, <big> e etc. Estas tags também funcionam aqui, veja o que elas fazem:
<b> = Deixa o texto Negrito
<i> = Deixa o texto itálico
<big> = Aumenta o tamanho do texto e aplica o negrito
<u> = Deixa o texto sublinhado
<s> = Deixa o texto tachado
<small> = Reduz e altera a fonte
<sup> = Deixa o texto Sobrescrito
<sub> = Deixa o texto Subscrito
<blink> = Faz o texto piscar mas alguns navegadores não aceitam esta tag
<h1> até o <h6> = Muda o tamanho da fonte <h1> = Grande, <h6> = Pequeno
<br /> Faz uma quebra de linha
<p> = Paragrafo
Comentários em HTML
Os comentários ajudam a deixar seu site mais legível a mais fácil a edição, veja um exemplo abaixo:
<!— Isto é um comentário em HTML —>
Lembre se ele não faz nenhuma ação, somente te ajuda na hora de fazer uma edição, geralmente os editores de HTML muda a cor dos comentários para que você encontre eles mais rápido.
Links em HTML
Os links são textos que quando clicados redireciona sua pagina para outra pagina HTML ou para uma parte do mesmo documento, veja um exemplo:
<a href="page2.html">Texto para o link</a>
Como você viu acima é utilizado a tag a para o link, note que o endereço fica dentro do href, os links geralmente ficam nos navegadores com cor azul você pode muda-los por CSS ou pela tag body mesmo.
Link para uma parte da pagina
Estes tipos de links são mais utilizados para documentos HTMLs Grandes como sites de textos, ou de informações muito grandes, ele também utiliza a tag a só que você tem que separar sua pagina em nomes nos locais, veja um exemplo abaixo:
<a name=’’topo’’> ... </a>
...
<a href=’’#topo’’> Voltar para o Início </a>
Note que no caso acima o conteúdo do href esta com sustenido no inicio para indicas que é uma parte da sua propria pagina.Você coloca em cada parte da pagina a tag a com o name e dentro dele o nome da parte.
Imagens
Para as imagens utilizamos a tag img e colocamos o diretório dentro do src, veja um exemplo abaixo:
<img src="Diretório" width="Tamanho horizontal" height="Tamanho Vertical" />
Caso a imagem esteja no mesmo diretório da sua pagina é só colocar o nome, caso seja em outro site você deve colocar o diretório todo
Adicionando outros tipos de scripts
Não vamos falar sobre CSS nem java script mas vou falar a tag utilizada para quando vocês verem em algum site vocês saibam.
No JavaScript utilizamos a tag <Script>
No CSS utilizamos a tag <Style>
No PHP utilizamos a tag <?php ...... ?>
Existem outros tipos de scripts para se adicionar a pagina mas estes citados acima são os mais conhecidos e provavelmente você vai encontrar algum em uma pagina.
Adicionando uma pagina dentro da outra
Para adicionarmos uma pagina dentro da outra utilizamos o IFRAME, veja um exemplo abaixo:
<iframe width='LARGURA' height='ALTURA' frameborder='0'src='http://URL_DA_PAGINA/pagina.html'></iframe>
Ele é muito utilizado quando você tem diversas paginas com o mesmo conteúdo e quando você precisa altera-lo você não precisa alterar todas as paginas e sim somente uma.
Espero que eu tenha ajudado a todos.
.webp)
