Introdução a HTML
Para começar, ao invés de começarmos com PHP..começaremos com linguagens básicas e simples, que mesmo sendo simples, são super importantes...afinal..você já ouviu falar de algum site que não tenha HTML??
xD
Vamos fazer no Bloco de notas...talvez seja melhor usar o Zend ou o Dreamweaver...vocês quem sabe..a IDE não é importante desde que você saiba o que você ou o programa (no caso do DW) esteja fazendo..pois o DW suja tudo...
Para começar..veremos como é feito um site..sua estrutura básica...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Toda página HTML começa com o código acima....mas pra q????
Imagina que você está pintando um quadro e a sua pintura será analisada por um especialista. Você precisa informar em qual categoria seu quadro pertence para que assim seja devidamente analisado e pontuado. Se você não informar a qual categoria pertence então fica a critério do especialista analisar como quiser.
Isso segundo o chefe do site:
http://afmoraga.wordpress.com/2007/1...-recomendados/
Bom....ele está certo..pois esse código, pode ser (ou não) a maioria dos erros de conflito entre FfxIE...tenta depois..fazer um site em div e tirar esse código...tudo do IE vai dar erro!! HAHAHAHA
<html xmlns="http://www.w3.org/1999/xhtml">
A Próxima tag a estudar é a <html>...engraçado que eu procurei em tudo quanto é canto sobre essa tag para falar..mas não achei...o que posso falar (pra tentar nao falar besteira sobre o significado) é que a tag html vai engoblar todo o seu site (que será divido em header e body..ou seja..topo e corpo)....com isso...a tag HTML passará a “juntar” todo o site!
O Cabeçário:
Abriremos a tag <head> para colocar todo o conteúdo do site...e pra mim..um dos mais importantes e que alguns clientes estão cobrando ultimamente...as METAS!!
Caso você tenha algum javascript ou css chamaremos aqui também!
Exemplo:
<link href="css.css" rel="stylesheet" type="text/css" />
Vamos definir o título da nossa página:
<title>.::O Ket é Gay!::.</title>
Lembrando que ainda estamos dentro da tag head (não fechamos ainda)...vamos chamar as metas:
<!--Esse é o jeito de comentar em HTML!!!..estamos comentando aqui para falar como cada uma funciona..como essa...q seta o autor da página-->
<meta name="author" content="Heal">
<!--a página não é armazenada em cache-->
<meta http-equiv="cache-control" content="no-cache">
<!--a linguagem definida-->
<meta http-equiv="content-language" content="pt-br">
<!--Direito a quem??-->
<meta name="copyright" content="Heal">
<!--Descrição...creio q uma das mais importantes...por causa dos robots!!-->
<meta name="description" content="CCV Team">
<!--Outra importante...a codificação do seu site...podendo ser iso ou UTF!!!-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--Keywords eh o q os robots de busca pegam-->
<meta name="keywords" content="Heal">
<!--mesma coisa do cache..!!-->
<meta http-equiv="pragma" content="no-cache">
Mais nos sites: http://developer.mozilla.org/pt/docs...ando_meta_tags
Creio que não tenha mais no head...vamos fechá-lo..e abrir o body..para começar o corpo do nosso site!!
xD
Bom...temos dois jeitos de fazer o nosso site..um com div+ css...o outro em table...puro html!!!
Desde quando eu comecei..eu usei tables...mas agora com a “Web 2.0” as coisas mudaram.....o div eh simples..fácil e rápido..o que deixa a desejar são os conflitos entre o FFx IE..q realmente eh um chute no saco de td mundo...pq pra corrigir as cagadas do IE eh um saco!!
Haeueauae
Por isso tou na vontade de criar o grupo anti-IE!!
xD
vamos fazer os dois..vou passar as imagens de um site e iremos montar os dois jeitos para ver a diferença e facilidade de cada um..e a bagunça também!!
Eu fiz um layout bem basicão em PSD só pra poder demonstrar alguma coisa!!
As Imagens para fazer (juntamente com esse tuto) está aqui:
www.ericmaicon.com.br/images.rar
se quiser o .PSD também:
www.ericmaicon.com.br/ccv.psd
Vamos começar montando em Tabelas...algo antigo..que ninguem usa...mas que é mais certo de que não terá bugs!!!
Lembrando que meu intúito não é ensinar vocês HTML, CSS ou qualquer outra coisa..e sim dar uma introdução em HTML para que você possar usar o PHP..pq o PHP sozinho não vai montar o layout ou algo da página!!
Vamos lá...
Nosso código até o momento está assim:
Index.php
Código:
<!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>
<title>.::O Ket é Gay!::.</title>
<!--Esse é o jeito de comentar em HTML!!!..estamos comentando aqui para falar como cada uma funciona..como essa...q seta o autor da página-->
<meta name="author" content="Heal">
<!--a página não é armazenada em cache-->
<meta http-equiv="cache-control" content="no-cache">
<!--a linguagem definida-->
<meta http-equiv="content-language" content="pt-br">
<!--Direito a quem??-->
<meta name="copyright" content="Heal">
<!--Descrição...creio q uma das mais importantes...por causa dos robots!!-->
<meta name="description" content="CCV Team">
<!--Outra importante...a codificação do seu site...podendo ser iso ou UTF!!!-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--Keywords eh o q os robots de busca pegam-->
<meta name="keywords" content="Heal">
<!--mesma coisa do cache..!!-->
<meta http-equiv="pragma" content="no-cache">
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
css.css
Código:
/* NAda..muahahahaha*/
Bom..eu acho que esqueci de falar o que é css...
CSS em miúdos é uma forma de padronizar todo o estilo da sua página (desde fonte até posicionamento) em um arquivo único...de modo geralzão!!
Salvamos aquela página que estávamos fazendo desde o início do tuto de index.php. Por que index? Index é o nome da página que todos os servers mundiais redirecionam...ou seja...toda primeira página do domínio deverá chamar index...a extensão pode ser tanto .html, .htm ou .a linguagem que estamos usando..no caso .php ou .php5
Vamos começar a fuçar!!
A css.css vamos fazer as seguintes alterações:
Código:
*{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
}
body {
background-color: #FFFFFF;
margin: 0px;
}
Cada {} vai delimitar uma parte do código...o nome na frente vai definir a parte!
Ou seja...o *{ vai falar que o que nao tiver css definido vai pegá-lo.
Ou seja...vamos supor que tem um texto que você não setou fonte...ele vai pegar a do *...
O Body...como o próprio nome já diz...vai dar atributos ao body!!
Quais atributos??
O fundo branco e margem 0..ou seja..ele vai grudar tudo em todos os lados!!
Mais?
Index.php (dentro do body):
Código:
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center" valign="top"></td>
<td width="273" align="center" valign="top"></td>
</tr>
</table>
Vamos simbora explicar:
<table...cria uma table..onde tem umas definições: com tamanho 760, sem borda, alinhado no meio, e sem espaço entre borda ou coluna (cellpadding="0" cellspacing="0") e bgcolor vai dar cor ao fundo da tabela!
Vamos criar uma tabela com 2 colunas e uma linha...
<tr> vai definir a linha...<td> a coluna...logo terá duas colunas dentro de uma linha...
Como podem ver...o align vai alinhar no centro e o valing vai alinha ao topo....e na segunda coluna coloquei um tamanho de 273 (mesmo tamanho da imagem)
As imagens baixadas do site que disponibilizei...vai estar dentro da pasta imagens..supondo q ela esteja lá dentro...vamos colocar as imagens no site:
A imagem da segunda coluna:
Código:
<img src="images/ccv_05.png" />
Vamos montar a primeira coluna:
Vamos criar mais uma tabela...com 3 linhas e 1 coluna..ficará assim:
Código:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Onde vcs podem perceber que...o tamanho dela agora é em %..o q indica q vai ocupar toda a coluna que ela é contida...
Cada linha deve ter uma coluna no código..perceberam??
xD
bom..o nosso código está assim:
index.php
Código:
<!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>
<title>.::O Ket é Gay!::.</title>
<!--Esse é o jeito de comentar em HTML!!!..estamos comentando aqui para falar como cada uma funciona..como essa...q seta o autor da página-->
<meta name="author" content="Heal">
<!--a página não é armazenada em cache-->
<meta http-equiv="cache-control" content="no-cache">
<!--a linguagem definida-->
<meta http-equiv="content-language" content="pt-br">
<!--Direito a quem??-->
<meta name="copyright" content="Heal">
<!--Descrição...creio q uma das mais importantes...por causa dos robots!!-->
<meta name="description" content="CCV Team">
<!--Outra importante...a codificação do seu site...podendo ser iso ou UTF!!!-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--Keywords eh o q os robots de busca pegam-->
<meta name="keywords" content="Heal">
<!--mesma coisa do cache..!!-->
<meta http-equiv="pragma" content="no-cache">
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table></td>
<td width="273" align="center" valign="top"><img src="images/ccv_05.png" /></td>
</tr>
</table>
</body>
</html>
css.css
Código:
*{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
}
body {
background-color: #FFFFFF;
margin: 0px;
}
Bom...falta o menu, um texto e o topo!
Vamos lá..coloque uma imagem na primeira linha da última tabela criada..essa será o topo:
Código:
<td align="center" valign="middle"><img src="images/ccv_03.png" /></td>
Eu coloquei a coluna ai para vocês terem a idéia de que eu alinhei no meio e no centro!
Vamos criar o menu...para isso precisamos de outra tabela..
Isso na segunda linha:
Faça uma tabela com 7 colunas e 1 linha...
Código:
<table border="0" cellspacing="5" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Em cada uma a gente vai colocar uma imagem..q será a do menu..e vai linká-la!!
Veja que não setei nem tamanho..e aumentei o espaçamento ali para 5 (cellspacing="5")...
Código:
<tr>
<td height="17"><a href="#"><img src="images/ccv_09.png" border="0" /></a></td>
<td><a href="#"><img src="images/ccv_11.png" border="0" /></a></td>
<td><a href="#"><img src="images/ccv_13.png" border="0" /></a></td>
<td><a href="#"><img src="images/ccv_15.png" border="0" /></a></td>
<td><a href="#"><img src="images/ccv_17.png" border="0" /></a></td>
<td><a href="#"><img src="images/ccv_19.png" border="0" /></a></td>
<td><a href="#"><img src="images/ccv_21.png" border="0" /></a></td>
</tr>
Vendo que...a tag <a> usa para linkas as imagens..onde o # é um “link” fictício..ou seja..ele tá servidno de link ai..mas nao leva a nada!!
Curtidas: 
[/spoiler]
hahaha...
