Aprendendo css desde o inicio!

**Admin** Sex Jan 13, 2012 6:31 pm

Introdução

Você não tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e é isto que eu vou fazer nesta série de tutoriais. Uma etapa de cada vez.

Quer você seja usuário de um editor WYSIWYG e conhecedor do código por ele gerado ou mesmo não tenha sequer criado uma página Web, este tutorial vai orientá-lo na direção certa.

O tutorial pressupõe um pequeno ou nenhum conhecimento de produção de uma página Web. Ele trata o assunto realmente ' do seu início'

O que vai ser preciso?

Nada especial. Se você tem acesso a um editor de página Web, ótimo. Se não, você pode usar qualquer editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se você é usuário do DreamWeaver ou GoLive, iremos usar o modo de 'código'.
Não se apavore!

Um editor de imagens não será essencial, pois a princípio não irei me preocupar muito com criação de imagens.

Oh, você irá precisar de um navegador, mas isto eu não precisava dizer. De fato, eu recomendo que você tenha alguns diferentes navegadores. Se você só possui o Explorer, deveria instalar o Mozilla e alguns outros que você poderá obter consultando qualquer listagem Browsers Atuais.

Se você desejar fazer upload de suas páginas para um servidor Web, vai precisar de um programa FTP, mas não se preocupe com isto agora, pois poderá fazer tudo ensinado no tutorial, no seu próprio computador.

Etapa número 1 - Uma página básica

Antes de fazer qualquer coisa iremos precisar de uma página Web. E a seguir você tem uma página, a mais básica possível.
view source
print?
1.<html>
2.<head>
3.</head>
4.<body>
5.Esta é a minha página <abbr title="World Wide Web" xml:lang="en">Web</abbr>
6.</body>
7.</html>

Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html.

Dentro da tag <html> existem mais dois pares de tags.

<head>...</head> contém informações que não foram ainda colocadas no nosso exemplo, a mais importante destas informações é o título da página que aparece na barra de títulos do navegador. Você dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir...
view source
print?
1.<html>
2.<head>
3.<title>Minha Página</title>
4.</head>
5.<body>
6.Este é o conteúdo da minha página <abbr title="World Wide Web" xml:lang="en">Web</abbr>!
7.</body>
8.</html>

O par de tags <body>...</body> engloba todo o conteúdo da sua página Web, texto, imagens, filmes Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor WYSIWYG - ou mesmo copiar colar o código da página básica mostrado acima.

**Buscaweb** Dom Jan 22, 2012 1:28 pm

Olá,

Neste momento apesar de inserir estas tags não seria fundamental criar uma linha mais ou menos assim: <link rel='stylesheet' type='text/css' href='http://buscaweb.comunidades.net/style.css'> ?
Depois criar um arquivo css como este: http://buscaweb.comunidades.net/style.css
Desta forma o início da página poderia ficar assim:
_____________________________________________________________________
<html>
<head>
<link rel="shortcut icon" href="URL DO SEU FAVICON" type="image/x-icon" />
<title>TÍTULO DO SITE</title>
<meta name="description" content="DESCRIÇÃO DO SITE">
<meta name="keywords" content="META TAGS DO SEU SITE AQUI. ELAS AJUDAM A MELHORAR SUA POSIÇÃO NOS RANKINGS DE BUSCA.">
<meta name="distribution" content="global">
<meta name="robots" content="index, follow">
<meta name="rating" content="general">
<meta name="Author" content="SEU NOME OU NOME DO SEU SITE.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel='stylesheet' type='text/css' href='http://buscaweb.comunidades.net/style.css'>

_____________________________________________________________________
Desta forma funcionaria assim:
A linha html: <link rel='stylesheet' type='text/css' href=http://buscaweb.comunidades.net/style.css'> indicaria o css da sua página na internet.
O CSS nada mais é do que a sua folha de estilos ou seja o design da sua webpage (Página do seu site).
No CSS que usei defini o fundo do site com uma imagem, ou seja todas as páginas que possuírem a linha: <link rel='stylesheet' type='text/css' href=http://buscaweb.comunidades.net/style.css'> estariam com aquele fundo.

Ficaria mais ou menos assim: http://buscaweb.comunidades.net/exemplo.html

Nesta forma o fundo "Wallpaper Oficial Buscaweb", seria definido através do CSS.

Neste início ficou realmente complicado. Em breve postarei um tutorial em vídeo de como criar uma página personalizada através de CSS.

att.: Buscaweb Moderador de Fórum.

**Admin** Dom Jan 22, 2012 3:23 pm

Olá, desculpe-nos pelo erro, Realmente voce tem razão!

Conteúdo patrocinado

Dom	Seg	Ter	Qua	Qui	Sex	Sáb
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Aprendendo css desde o inicio!

Aprendendo css desde o inicio!

Fiquei na dúvida

Desculpe-nos pelo erro!

Re: Aprendendo css desde o inicio!