Alexandre Mattos Blog » Site http://www.alexandremattos.com.br/blog Design Web Fri, 09 Apr 2010 14:12:34 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Guia de como iniciar com HTML http://www.alexandremattos.com.br/blog/2010/02/guia-de-como-iniciar-com-html/ http://www.alexandremattos.com.br/blog/2010/02/guia-de-como-iniciar-com-html/#comments Fri, 26 Feb 2010 15:52:05 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=179 Para você que ainda não sabe como iniciar com HTML vou explicar da maneira mais simples e prática para começar a criar sites.

Software necessário:
Bloco de notas do Windows

O que são TAGS?
De uma maneira bem simples tag é tudo aquilo que estiver entre o sinal de menor ( < ) e de maior ( > ). EX:

<html>


Toda Tag tem que ser aberta e fechada em ordem. Para fechar o conteúdo da tag, basta fechala com uma barra logo após o conteúdo. EX:

<div>conteudo</div>
<p>conteudo</p>
<h1>conteudo</h1>

Sempre mantenha a ordem das tags, se abrir uma, não esqueça de fechá-la.

Tags que você tem que decorar:

html -> Tag para inciar o documento html, obrigatório seu uso.
head -> Define o cabeçalho do documento a cabeça, como o título, o que será encorpado, adicionado ao documento html.
body -> todo conteúdo deverá ficar dentro da tag body, seu uso é obrigatório assim como as tags html e head.

Outras tags que você utilizará muito são as de parágrafo, imagens, títulos, links … vou descreve-los e exemplificar.

h1, h2, h3, h4, h5 -> Tags de títulos
p -> tag de parágrafos
img -> tag de imagens

OBS: As tags podem possuir atributos, como identificação, formatação, etc. EX:

<p id="meu-primeiro-paragrafo">Olá, esse é meu primeiro parágrafo</p>

note que todo atributo deverá ser inserido dentro da tag de abertura ( a que não possui a / na frente ), seguido de = e o valor sempre dentro de aspas duplas. OK??? Tem que seguir isso, vamos voltar. ao conteúdo.

O que será ministrado aqui é um ensinamento específico de html para uso com css que depoiiiiisss eu farei um tutorial, por enquanto é hora de aprender HTML.

O link
Para criarmos um site, precisamos de links, que são âncoras de acesso a outros arquivos, páginas, etc. A tag utilizada é a tag seguinte.

<a>Meu link</a>

Calmaaaaaaa, ainda não terminei. Para você conseguir criar o link para outra página, precisamos de um atributo para fazer a ligação, por isso expliquei anteriormente o que era um atributo, então vamos continuar. O exemplo abaixo terá um atributo dentro da tag “a” chamado href, que irá criar a referência.

<a href="pagina.html">Meu link</a>

Como você pode ver, o atributo href faz referência à página html.

Tendo os links e o básico para construir um site primário, vamos ao exemplo para você começar a entender na prática como fazer.
Abra o bloco de notas e digite a estrutura básica do HTML, que é:

<html>
<head>
<title>Meu primeiro site</title>
</head>
<body>

</body>
</html>

Essa é a estrutura básica para criação de um site, a tag html, head e body. Pense em uma pessoa formada de cabeça e corpo. Seria mais ou menos isso. Tudo que você escrever dentro de body será visualizado pelo cliente que acessar a página.

Vamos fazer um pequeno site com 4 links e conteúdo sobre os 4 grandes times de futebol do Rio de Janeiro.

São os links, Botafogo, Flamengo, Fluminense e Vasco.

O conteúdo vamos fazer um comentário com 2 linhas e cada página deverá ter o título com o nome do clube.

Com o bloco de notas aberto e a estrutura digitada, vamos melhorar o código e inserir os links e o primeiro time que é o botafogo.

<html>
<head>
<title>Site sobre times - Botafogo</title>
</head>
<body>

<a href="botafogo.html">Botafogo</a> / <a href="flamengo.html">Flamengo</a> / <a href="fluminense.html">Fluminense</a> / <a href="vasco.html">Vasco</a>

<h1>Botafogo Futebol e Regatas</h1>
<h2>Time da estrela solitária</h2>

<p>Esta é a página do Botafogo.</p>

</body>
</html>

Antes de salvar o documento, crie uma pasta na área de trabalho com o nome times. Agora salve como botafogo.html, igual ao que está no link que você digitou dentro da pasta times que você criou.

DICA: Use sempre letras minúsculas, sem acentos e sem espaços para definir o nome do arquivo. Se tiver que utilizar espaços, use os sinais “-” e “_”. EX: joao-da-silva.html … botafogo_futebol_de_regatas.html.

Agora vamos criar um novo arquivo no bloco de notas com a estrutura básica novamente e vamos inserir o menu com links e o conteúdo do time Flamengo.

<html>
<head>
<title>Site sobre times - Flamengo</title>
</head>
<body>

<a href="botafogo.html">Botafogo</a> / <a href="flamengo.html">Flamengo</a> / <a href="fluminense.html">Fluminense</a> / <a href="vasco.html">Vasco</a>

<h1>Clube de Regatas Flamengo</h1>
<h2>Time da maior torcida do Brasil</h2>

<p>Esta é a página do Flamengo.</p>

</body>
</html>

Note que o menu é o mesmo da página do botafogo. Salve como flamengo.html, do mesmo jeito que escreveu no link da página para quando você clicar no link, ele consiga achar o arquivo.

Repita o processo com o time do fluminense e o time do vasco.

Note que sempre que a última tag a ser aberta será sempre a primeira a ser fechada. EX:

<div><p>Olá, meu outro site é <a href="http://www.alexandremattos.com.br">www.alexandremattos.com.br</a>, acesse!</p></div>

Explicação: Tenho um parágrafo que está dentro de uma divisória. Meu parágrafo contém um link externo ( que leva para outro site ).

times1.

Agora vamos inserir imagens dos times antes do título da página, para ficar bem legal. As imagens se encontram junto com o zip dos arquivos para você poder seguir o passo 2.

Onde está a linha

<h1>Clube de Regatas TIME</h1>

você irá inserir a tag de imagens que é img com o atributo src que fará a ligação com a imagem. EX de como ficará:

<img src="vasco.gif" alt="Escudo do Vasco" />
<h1>Clube de Regatas Vasco da GAMA</h1>

Note que eu fechei a tag img na abertura dela e não com 2 tags como estamos acostumados a fazer, isso é devido a excessões no código. As tags mais comuns de se fazer isso são: img e br.
a tag br é utilizada para quebrar linha ( do inglês break line ).

<br />
<img />

Essas são as 2 tags que fecharão em si mesmas. voltando ao código, o src fará a referencia da figura enquanto o atributo alt dará o nome alternativo. Nunca esqueça de inserir o atributo alt, para caso sua imagem não aparecer, o usuário poder identificar o que a imagem que não abriu queria passar.
Repita com as outras páginas. Abaixo vai uma SS de como ficou.

Vasco

Vasco

<a href='http://www.alexandremattos.com.br/blog/wp-content/uploads/2010/02/times2.zip'>times2</a>
[sourcecode]

Então já sabemos que o primeiro código a fazer é:
[sourcecode language="html"]
<html>
  <head>
    <title>Titulo da pagina</title>
  </head>

  <body>
    <!--conteudo da pagina -->
  </body>
</html>

Agora é só complementar o seu estudo e cair dentro do HTML. Segue um site muito bom para aprender. O site é baseado na lingua inglesa, mas se seguir o raciocínio, só com os exemplos você acaba entendendo.

Site Referência: http://www.w3schools.com/html/default.asp

]]> http://www.alexandremattos.com.br/blog/2010/02/guia-de-como-iniciar-com-html/feed/ 2 Kuler, o que é? Ventoinha? http://www.alexandremattos.com.br/blog/2009/12/kuler-o-que-e-ventoinha/ http://www.alexandremattos.com.br/blog/2009/12/kuler-o-que-e-ventoinha/#comments Fri, 11 Dec 2009 20:14:43 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=166 Kuler

Kuler

Kuler não tem nada a ver com os pequenos vetiladores dos processadores ou dos gabinetes. O Kuler é uma ferramenta que permite visualizar a teoria de combinações harmônicas das cores. No site você encontra paletas prontas, as mais populares e até baseadas em imagens. Vamos supor que você gostou das cores de uma foto e deseja a paleta de cores dela. Você envia a foto através de um formulário e ele automaticamente cria a paleta de cores para você.

Teoria Tríade

Tríade

O mais interessante é que tudo é a partir da teoria. Você percebe como as combinações harmônicas são montadas. Há a possibilidade de compartilhar paletas de cores com outras pessoas, assim como usar as que elas criaram também!

Vemos no site vários tipos de cores tríades, monocromáticas, análogas, complementares, etc. Basta você acessar e conferir. Além de através do flash você definir as cores, ainda tem o resultado das 5 cores em HSV, RGB, CMYK, LAB e HEX.

HSV, RGB, CMYK, LAB e HEX.

HSV, RGB, CMYK, LAB e HEX.

O registro é gratuito, e você pode compartilhar suas paletas, basta se cadastrar!

kuler.adobe.com.

Eu fiz o cadastro e achei muito bom o site. Esta ai uma ótima dica para quem quer desenvolver sites com uma aparência super agradável!

Os créditos foi de um amigo do trabalho! Muito boa dica Vagner!

Abraços!

]]> http://www.alexandremattos.com.br/blog/2009/12/kuler-o-que-e-ventoinha/feed/ 1 Você conhece o “Mestre” do CSS? http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/ http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/#comments Tue, 08 Dec 2009 20:37:38 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=119 Não? Como assim não conhece?

Site do Majour

Site do Majour

O nome dele é Maurício Samy, autor do site do maujor. Posso dizer que muitas coisas que aprendi sobre CSS foi buscando informações no site dele. Tutoriais, guias, explicações, traduções, exemplos, e muitos outros recursos. Começar a trabalhar com CSS não foi fácil. Não tinha ninguém para me explicar e tive que correr para o site mais poderoso de todos, o Google.

Pesquisando encontrei o site do Maujor, que tem um guia muito, mas muito bom de como iniciar com CSS, abaixo segue o link.

http://maujor.com/tutorial/joe/cssjoe1.php

Comecei a estudar através deste link e logo a seguir parti para os outros tutoriais contidos no site do Majour. Como ainda não terminei meu tutorial de CSS+HTML para iniciantes. Deixo esta excelente referência para aprendizado.

O Maurício escreveu alguns livros que são na minha opinião, muito bons. Quer um livro para aprender realmente, abaixo segue os livros com os links.

Livro Criando sites com HTML ( http://www.livrohtml.com.br/ )

Livro Construindo Sites com CSS e (X)HTML ( http://www.livrocss.com.br/ )

Livro AJAX com jQuery ( http://www.livroajaxjquery.com.br/ )

Livro jQuery A Biblioteca do Programador JavaScript ( http://www.livrojquery.com.br/ )

Espero que tenham aprendido a lição! ^^)

Abraços

]]> http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/feed/ 1 Separando o código com PHP http://www.alexandremattos.com.br/blog/2009/12/separando-o-codigo-com-php/ http://www.alexandremattos.com.br/blog/2009/12/separando-o-codigo-com-php/#comments Tue, 08 Dec 2009 18:34:51 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=100 Trabalhar com HTML puro é estressante? Fica pior quando o site é muito grande? Eis a solução para seus problemas.

O seu Dreamweaver também fica assim?

O seu Dreamweaver também fica assim?

No post anterior eu ensinei como iniciar o trabalho com PHP, a partir daí, vamos dar continuidade ao nosso processo de aprendizado. Quando comecei a trabalhar com PHP, esse foi o meu maior motivo para continuar. Por causa de um link, ter que mudar página por página, para trocar somente “um maldito link” que estava errado é um saco. Agora imagina alterar 500 páginas? Melhor então, seu chefe manda você trocar o banner do site que consta em umas 300 páginas do site? Super Hiper Mega estressante não?

Veja o exemplo em funcionamento!

Com o PHP você pode separar o conteúdo do site em partes e quando você tiver que alterar o banner do site ou o menu, ou qualquer outra coisa que quiser, terá apenas que editar somente 1 arquivo. Isso mesmo, é bem simples. Segue o tutorial.

Primeiro criaremos a página header, que é o topo do site. Ele terá menu, banner, todo cabeçalho do documento, e salvaremos como header.php

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - PHP Require</title>
<!-- CSS da página -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
<!-- JavaScript jQuery-->
</head>
<body>
<div id="menu">
	<a href="index.php">Home</a> | <a href="arquivos.php">Arquivos</a> | <a href="downloads.php">Downloads</a> | <a href="contato.php">Contato</a>
</div>
<div id="conteudo"> <!-- inicio da div do conteudo -->

Agora criaremos a página footer.php, que terá o final do html e o rodadé da página.

</div> <!-- fim da div do conteudo -->
<div id="rodape">
	<div class="esquerda">Meu Blog <a href="http://www.alexandremattos.com.br/blog" title="Alexandre Mattos Blog">amBlog</a></div>
    <div class="direita">Editado por: <a href="http://www.alexandremattos.com.br">Alexandre Mattos</a></div>
</div>
</body>
</html>

Antes de criar as páginas de conteúdo, faremos o css. Use o css que tenho como base deste html e grave como estilo.css

@charset "utf-8";
/* Desenvolvido por Alexandre Mattos
Site: alexandremattos.com.br
email: xandynnn@gmail.com
 */

*{
	padding: 0;
	margin: 0;
}

#menu {
	padding:  5px;
	border-bottom: 1px solid #CCCCCC;
	color: #999999;
}

	#menu a:link, #menu a:visited {
		color: #3399ff;
		text-decoration: none;
		padding: 0 5px 0 5px;
	}

	#menu a:hover {
		color:#999999;
		text-decoration: underline;
	}

#conteudo {
	color: #999999;
	padding: 20px;
}

	#conteudo h1{
		color:#00CC99;
		margin-bottom: 10px;
	}

	#conteudo img{
		margin: 100px 0 0 0;
	}

	#conteudo a:link, #conteudo a:visited {
		color: #3399ff;
		text-decoration: none;
	}

	#conteudo a:hover {
		color:#999999;
		text-decoration: underline;
	}

#rodape {
	color:#999999;
}

	#rodape .esquerda{
		float: left;
		margin: 0 0 0 20px;
	}

	#rodape .direita{
		float: right;
		margin: 0 20px 0 0;
	}

	#rodape a:link, #rodape a:visited {
		color: #3399ff;
		text-decoration: none;
	}

	#rodape a:hover {
		color:#999999;
		text-decoration: underline;
	}

Próximo passo é criar todas as páginas que farão parte do site.
Criarei somente 2 páginas para não alongar o post, mas é exatamente o mesmo processo para as demais.

index.php

<?php
require_once('header.php');
?>

    <h1>P&aacute;gina Principal</h1>

    <p>par&aacute;grafo da p&aacute;gina principal.</p>

<?php
require_once('footer.php');
?>

Agora a página de contato.

contato.php

<?php
require_once('header.php');
?>

    <h1>Contato</h1>

    <p>par&aacute;grafo da p&aacute;gina de contato.</p>

<?php
require_once('footer.php');
?>

Tudo pronto! Opa, ainda não! Falta 2 coisas, uma é eu explicar os códigos acima. O PHP disponibiliza em sua biblioteca de funções, uma função chamada require_once(), que permite você carregar um arquivo externo para página. Existe outras maneiras de inserir arquivos em uma página, mas no momento utilizaremos esse, que é o mais seguro neste caso.

O que essa função faz é abrir o arquivo indicado por você entre aspas simples, como no exemplo acima.

Sobre os títulos de cada página, tag title.

Eles serão os mesmos para todas as páginas Alexandre? Eu te respondo que não, pois vamos alterar agorinha mesmo.

O que temos que fazer é inserir um pequeno código em cada página de conteúdo e outro código da página header.php.

Abra o arquivo header.php e altere a seguinte linha:

<title>Alexandre Mattos Blog - PHP Require</title>

para:

<title>Alexandre Mattos Blog - <?php echo $titulo; ?></title>

Salve o arquivo header.php e abra agora todos as páginas de conteúdo criadas, que são index.php, contato.php, downloads.php e arquivos.php e insira o código a seguir na primeira linha do script php, antes do require_once do header.php.

$titulo = 'Nome da página';

Ex: O arquivo index.php que era assim:

<?php
require_once('header.php');
?>
    <h1>P&aacute;gina Principal</h1>
    <p>Par&aacute;grafo da p&aacute;gina principal</p>
<?php
require_once('footer.php');
?>

ficará assim:

<?php
$titulo = 'Nome da página';
require_once('header.php');
?>
    <h1>P&aacute;gina Principal</h1>
    <p>Par&aacute;grafo da p&aacute;gina principal</p>
<?php
require_once('footer.php');
?>

Agora faça isso em todas outras páginas e altere o valor que está entre aspas simples da variável $titulo para o nome da página referente. Você também pode fazer isso para incluir arquivos css para páginas específicas, javascripts, entre outras coisas. É muito mais simples na hora de fazer manutenção no site ou sistema, pois só terá o trabalho de alterar 1 arquivo. Quando a aplicação rodar todas as páginas incluirão a página header como cabeçalho, então se mudar o arquivo header.php, todas as páginas mudarão também.

Com sou um menino bonzinho, disponibilizo o download do exemplo. Se você não leu o tutorial, leia, pois está tudo explicado neste post.

Abraços e qualquer dúvida só perguntar.

]]> http://www.alexandremattos.com.br/blog/2009/12/separando-o-codigo-com-php/feed/ 3 Como centralizar o site com CSS? http://www.alexandremattos.com.br/blog/2009/12/como-centralizar-o-site-com-css/ http://www.alexandremattos.com.br/blog/2009/12/como-centralizar-o-site-com-css/#comments Fri, 04 Dec 2009 20:22:47 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=5 Você deve estar se perguntando como centralizar uma página com CSS. Por muito tempo as pessoas costumavam pegar códigos prontos para tirar essas dúvidas de alinhamento e acabam reaproveitando o código sem realmente saber o motivo e as propriedades que fazem o alinhamento.

O código abaixo, mostra como é simples você centralizar o conteúdo de uma página através do CSS.

arquivo.css

#alinhamento {
margin: auto;
width: 500px;
}

O próximo passo é inserir entre as tags body e /body a div com a id “alinhamento”. Veja como ficará.

<body>
<div id="alinhamento">
<!-- aqui fica todo conteúdo do site -->
</div>
</body>

Coloquei a margem como 500 pixels para ser visualizado em qualquer resolução de tela. Como você pode ver, é muito simples, com apenas 3 linhas de código css e 1 div, você alinha o site todo. Abaixo segue outro exemplo.

Página alinhada

Página alinhada

O código da imagem acima:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - Alinhamento</title>
<style>
#alinhamento {
margin: auto;
width: 500px;
background: #0099ff;
color: #ffffff;
}
</style>
</head>
<body>
<div id="alinhamento">
	<h1>Meu primeiro post</h1>
</div>
</body>
</html>

Está pronto, agora a criatividade para terminar o site é com você!

]]> http://www.alexandremattos.com.br/blog/2009/12/como-centralizar-o-site-com-css/feed/ 1