Exemplo básico de html com css

Olá pessoal,

Vou resumir aqui o conceito de HTML e CSS  para que possamos iniciar nossa implementação.

HTML – Sigla HyperText Markup Language, traduzindo Linguagem de Marcação de Hipertexto é um tipo de marcação para que possamos produzir páginas na Web e acessando através de um navegador

CSS – Sigla Cascading Style Sheets é utilizada para definir uma aparência ao nosso HTML gerado no navegador, ou seja, para que o site fique com uma apresentação melhor para o usuário.

Logo abaixo temos um código HTML bem simples onde vamos aplicar o CSS para que possamos ter uma apresentação melhor deste conteúdo.

Um editor que acho bem interessante para que possamos começar a praticar é o Notepad++, ele é bem rápido, grátis e de fácil instalação.

Quem quiser baixar, link.

Abra seu editor, e digite o código abaixo:


<html>
<head>
<title>Exemplo 01</title>
</head>
 <body>
 <h1>O meu nome é?</h1>
 <p>Rafael Fagundes</p>
 <h1>Qual módulo estou estudando?</h1>
 <p>HTML e CSS</p>
 </body>
</html>

Salve este arquivo como index.html. Este HTML acima está sem folha de estilo (CSS). Clique aqui e veja o exemplo.

Para as perguntas que estão nesse exemplo, usamos a tag <h1> que é usada para títulos. E para nossas respostas usamos a tag <p>, para definir como parágrafo.

Vamos para o nosso CSS:

Continuando em nosso editor, vamos fazer um arquivo novo, ele deverá ter o nome estilo.css. É interessante fazer o arquivo CSS separado do HTML para que a manutenção dele seja bem mais fácil.

Digite:

/*Definir as configurações padrões*/

*{

font-family: arial; /*Definir a fonte padrão*/

font-size:12px; /*Definir o tamanha da fonte padrão*/

}

/*Perguntas*/

h1{

font-size:16px;

background:#ccc;  /*Definir um fundo para o texto da pergunta*/

border:1px solid #999;  /*Borda da caixa onde se encontra a pergunta*/

height:22px;            /*Altura da caixa onde se encontra a pergunta*/

padding:5px;            /*Margem interna para que o texto não fique grudado com a borda*/

}

/*Respostas*/

p{

color:#333;       /*Cor da fonte*/

}

Salve o arquivo CSS.

Voltando ao index.html, dentro da tag <head> vamos fazer o link para o nosso CSS para que o site possa ter a aparência que definimos no CSS, exemplo:

<head></pre>
<title>Exemplo 01</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

</head>

Salve o arquivo index.html. Agora nosso HTML terá uma aparência diferente.

Abra em seu navegador o arquivo index.html, ele deverá ter esta aparência. Clique aqui para ver o exemplo.

Este formulário foi baseado em um exemplo que se encontra no blog do Nivaldo, onde ele está ensinando a parte básica do PHP, para quem tem interesse em programação, é bem interessante poder integrar este CSS ao exemplo que ele está passando, estarei ensinando em alguns posts como formatar layout de acordo com os formulários de programação que o Nivaldo esta fazendo. Clique aqui e confira o artigo.

Qualquer dúvida só falar pessoal.

Abraço

Colocado em CSS a 18 dezembro 2009 Trackback: trackback

3 Comentários em “Exemplo básico de html com css”

  1. 31 dezembro 2009 as 19:22 #Curso de PHP – Módulo Básico – Iniciando em PHP – Parte 3 | BLOG::Nivaldo

    [...] A partir de agora, iremos supor que você já possui o PHP e o apache corretamente instalados e configurados em sua máquina. Por padrão iremos utilizar nomes de arquivos com extensão .php e recomendamos que você crie uma pasta para cada parte desse curso, assim se manterá organizado e terá seus exemplos armazenados de forma cronológica. Caso você precise de alguma dica em HTML/CSS recomendo o blog do Rafael Fagundes em especial o início do tutorial dele. [...]

  2. 31 dezembro 2009 as 19:23 #Nivaldo Arruda

    Massa, esse inicio ficou muito bom!

    Fiz um link desse tutorial no meu post =)

    http://www.nivaldoarruda.com.br/2009/12/12/curso-de-php-modulo-basico-iniciando-em-php-parte-3/

    Abraços!

  3. 20 fevereiro 2010 as 12:57 #Tallys Silva

    Ótimas dicas, valeu…

Deixe um Comentário!