Início
Portal
Inicie sessão para responder
-Ghost!Membro Especial
Mensagens : 2378
Like : 58
Idade : 26
Primeiros passos CSS
Qui Set 22 2011, 22:21
Olá pessoal, hoje eu estarei ensinando para vocês como criar um estilo de página simples em CSS + HTML.
O nível de dificuldade deste tutorial será considerado como II.
-
DICAS.
Bom, acho que no resultado final, todos podem chegar. Mais acho que se você está interessado em aprender, tome primeiro um conhecimento sobre HTML. O html irá te ajudar no auxilio das tags.
- No fórum há algumas tags e seus atributos, depois aconselho que leiam.
- Em breve serão postadas mais algumas tags aqui no fórum habbosal.
As tags são extremamente precisas no sistema CSS.
-
COMEÇANDO.
Primeiramente abra seu bloco de notas (notepad), ou qualquer outro tipo de arquivo de texto simples.
Não se pode usar o Office (Entre os derivados - World - Excel e etc..). Caso tente reproduzir os comandos por lá, a linguagem HTML ou CSS não irá conseguir interpretar.
1 - Nosso primeiro passo é copiar todas as tags e comandos apresentados abaixo:
(Lembrando: A página feita aqui será somente de exemplo, recomendo a todos que primeiro tentem fazer uma igual, para depois editarem!)
- Copie tudo que foi postado acima, abre o notepad (bloco de notas) e cole lá. Depois salve com qualquer nome e no final .html
Feito isso terá o seguinte resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2 - Nosso próximo passo é adicionar uma cor de fundo para nossa página. Voltando ao arquivo que você salvou como .html, abra-o denovo com o bloco de notas.
Para fazer isso utilizaremos a tag
O que está em vermelho adicione em sua folha CSS - HTML.
- Defini as cores em #878787 e purple. Você também pode defini-las em #FFFFF (Nos FFFFF) Adicione números que formará uma cor.
- O comando body, serve para definir em que local seria aplicado o comando, por isso foi usado no final
Depois feche e salve-o novamente.
Seu resultado será o seguinte:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
3- Nosso próximo passo é mudar as fontes do texto, recomendo escolher uma que lhe agrade. Mais vale lembrar que é reconhecido todas as fontes usadas em seu pc. Mais a questão é: Será que as outras pessoas também tem esta fonte?
- Insira os valores grifados de vermelho em sua folha.
* Repare que há mais de um tipo de fonte, por ex: Trebuchet MS, Geneva, Arial,
SunSans-Regular, sans-serif
Utilizei isso no caso da pessoa não ter a fonte Trebuchet MS, caso não tenha ela muda pra Geneva, caso não tenha Arial...... E assim sucessivamente
A tag h1 é usada para títulos ou para destacar textos. No caso de h1 {, foi definida para dizer que o texto h1, precisa mudar de fonte.
- Salve a página do notepad. E abra ela com algum navegador
Seu resultado será +/- este:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
4 - Nosso próximo passo agora é destacar um menu de navegação.
Botarei as opções para a esquerda e o conteúdo para a direita
- Copie tudo que está grifado de vermelho e adicione no lugar certo, para não desorganizar.
- Repare que essas tags são somente de centralização. Sugiro que tenha um conhecimento sobre essas tags..
Ao terminar sua página ficará assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
5 - Agora iremos destacar uma barra para cada menu de navegação
- Adicione o que está grifado de vermelho, ao fazer isso salve o documento novamente. Isso servirá para sublinhar os navegadores, e para demarcar a cor quando for clicada o arquivo.
Seu resultado será este:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
7- E ultimo passo, este tem como objetivo. Adicionar um traço os créditos finais ou a alguma informação do site.
Adicione o que está grifado de vermelho a sua folha, e seu resultado final será este:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Espero ter ajudado.
Em breve, farei um tutorial de como separar em outro documento o CSS do HTML.
O nível de dificuldade deste tutorial será considerado como II.
-
DICAS.
Bom, acho que no resultado final, todos podem chegar. Mais acho que se você está interessado em aprender, tome primeiro um conhecimento sobre HTML. O html irá te ajudar no auxilio das tags.
- No fórum há algumas tags e seus atributos, depois aconselho que leiam.
- Em breve serão postadas mais algumas tags aqui no fórum habbosal.
As tags são extremamente precisas no sistema CSS.
-
COMEÇANDO.
Primeiramente abra seu bloco de notas (notepad), ou qualquer outro tipo de arquivo de texto simples.
Não se pode usar o Office (Entre os derivados - World - Excel e etc..). Caso tente reproduzir os comandos por lá, a linguagem HTML ou CSS não irá conseguir interpretar.
1 - Nosso primeiro passo é copiar todas as tags e comandos apresentados abaixo:
(Lembrando: A página feita aqui será somente de exemplo, recomendo a todos que primeiro tentem fazer uma igual, para depois editarem!)
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Fórum Habbosal CSS</title>
</head>
<body>
<!-- Menu de navegacao do site -->
<ul class="navbar">
<li><a href="index.html">Página Inicial</a>
<li><a href="indice.html">Portal</a>
<li><a href="desenvolvimento.html">FAQ</a>
<li><a href="search.html">Buscar</a>
<li><a href="membros.html">Membros</a>
</ul>
<!-- Conteúdo -->
<h1>Fórum Habbosal</h1>
<p>Bem vindos ao fã site do fórum Habbosal
<p>Aqui você encontra os conteúdos sobre o fórum e o maravilhoso Habbosal Hotel.
<p>Este site ainda está em reforma
<!-- Na linha abaixo deixará alguma informação sobre o site! -->
<address>Todos os direitos reservados ao Ghost</address>
</body>
</html>
- Copie tudo que foi postado acima, abre o notepad (bloco de notas) e cole lá. Depois salve com qualquer nome e no final .html
Feito isso terá o seguinte resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2 - Nosso próximo passo é adicionar uma cor de fundo para nossa página. Voltando ao arquivo que você salvou como .html, abra-o denovo com o bloco de notas.
Para fazer isso utilizaremos a tag
- Código:
<style>
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Fórum Habbosal CSS</title>
[color=red]<style type="text/css">
body {
color: purple;
background-color: #878787 }
</style>[/color]
</head>
<body>
O que está em vermelho adicione em sua folha CSS - HTML.
- Defini as cores em #878787 e purple. Você também pode defini-las em #FFFFF (Nos FFFFF) Adicione números que formará uma cor.
- O comando body, serve para definir em que local seria aplicado o comando, por isso foi usado no final
Depois feche e salve-o novamente.
Seu resultado será o seguinte:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
3- Nosso próximo passo é mudar as fontes do texto, recomendo escolher uma que lhe agrade. Mais vale lembrar que é reconhecido todas as fontes usadas em seu pc. Mais a questão é: Será que as outras pessoas também tem esta fonte?
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Fórum Habbosal CSS</title>
<style type="text/css">
body {
[color=red]font-family: Tahoma, "Times New Roman",
Times, serif;[/color]
color: purple;
background-color: gray }
[color=red]h1 {
font-family: Trebuchet MS, Geneva, Arial,
SunSans-Regular, sans-serif }[/color]
</style>
</head>
<body>
- Insira os valores grifados de vermelho em sua folha.
* Repare que há mais de um tipo de fonte, por ex: Trebuchet MS, Geneva, Arial,
SunSans-Regular, sans-serif
Utilizei isso no caso da pessoa não ter a fonte Trebuchet MS, caso não tenha ela muda pra Geneva, caso não tenha Arial...... E assim sucessivamente
A tag h1 é usada para títulos ou para destacar textos. No caso de h1 {, foi definida para dizer que o texto h1, precisa mudar de fonte.
- Salve a página do notepad. E abra ela com algum navegador
Seu resultado será +/- este:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
4 - Nosso próximo passo agora é destacar um menu de navegação.
Botarei as opções para a esquerda e o conteúdo para a direita
- Código:
<title>Fórum Habbosal CSS</title>
<style type="text/css">
body {
[color=red]padding-left: 11em;[/color]
font-family: Tahoma, "Times New Roman",
Times, serif;
color: purple;
background-color: gray }
[color=red]ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }[/color]
h1 {
font-family: Trebuchet MS, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
- Copie tudo que está grifado de vermelho e adicione no lugar certo, para não desorganizar.
- Repare que essas tags são somente de centralização. Sugiro que tenha um conhecimento sobre essas tags..
Ao terminar sua página ficará assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
5 - Agora iremos destacar uma barra para cada menu de navegação
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Fórum Habbosal CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Tahoma, "Times New Roman",
Times, serif;
color: purple;
background-color: gray }
ul.navbar {
[color=red]list-style-type: none;
padding: 0;
margin: 0;[/color]
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Trebuchet MS, Geneva, Arial,
SunSans-Regular, sans-serif }
[color=red]ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid purple }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }[/color]
</style>
</head>
<body>
- Adicione o que está grifado de vermelho, ao fazer isso salve o documento novamente. Isso servirá para sublinhar os navegadores, e para demarcar a cor quando for clicada o arquivo.
Seu resultado será este:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
7- E ultimo passo, este tem como objetivo. Adicionar um traço os créditos finais ou a alguma informação do site.
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Fórum Habbosal CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Tahoma, "Times New Roman",
Times, serif;
color: purple;
background-color: #878787 }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Trebuchet MS, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid gray }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
[color=red]address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }[/color]
</style>
</head>
<body>
Adicione o que está grifado de vermelho a sua folha, e seu resultado final será este:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Espero ter ajudado.
Em breve, farei um tutorial de como separar em outro documento o CSS do HTML.
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|
