domingo, 26 de junho de 2011

Estutura Básica de Uma Página Com CSS

Exemplo:
- Página "index.html"
<html> 
      <head>
            <title> Minha Página </title>
            <!-- Requisição do Arquivo CSS que controlará a apresentação da página -->
            <link rel="StyleSheet" type="Text/CSS" href="estilo.css">
      </head>
      <body>
            <!--Aqui está o corpo da minha página-->
            <div id="tudo">
                  <div id="topo">
                        <h1> Titulo </h1>
                  </div>
                  <div id="meio">
                        <div id="menu">
                              <a href="index.html">Home</a>
                              <a href="produtos.html">Produtos</a>
                              <a href="servicos.html">Serviços</a>
                              <a href="localizacao.html">Localização</a>
                              <a href="contato.html">Contato</a>
                        </div> 
                        <div id="conteudo">
                       
                              Conteúdo da página                       
                       
                        </div>
                  </div>
                  <div id="rodape">
                        Rodape
                  </div>
            </div>
            <!--O corpo da minha página termina aqui-->
      </body>
</html>
Postado por às Nenhum comentário:
Marcadores:

segunda-feira, 20 de junho de 2011

Linkando O Arquivo .CSS Em Sua Página HTML

Ultilizaremos o elemento "Link" com os seguintes atributos:
      REL - Valor > "StyleSheet"
      TYPE - Valor > "Text/CSS"
      HREF - Valor > Caminho e o nome do arquivo CSS.
Exemplo:
<html> 
      <head>
            <title> Minha Página </title>
            <link rel="StyleSheet" type="Text/CSS" href="estilo.css">
      </head>
      <body>
            <!--Aqui está o corpo da minha página-->

            Estou no blog do Charles WD criando minha primeira página em HTML e CSS.
            <br>
            Criar páginas em HTML e CSS é mais fácil do que eu imaginava.

            <!--O corpo da minha página termina aqui-->
      </body>
</html>
Postado por às Nenhum comentário:
Marcadores:

Introdução ao CSS

Problemas do HTML
Grande dificuldade no momento de atualizar o site. Imagine-se tendo que alterar a cor dos títulos de um site da cor vermelha para a cor azul:
Neste exemplo você teria para cada título um bloco de código assim:
    <hn>
        <font color="red">
            Titulo
        </font>
    </hn>Então deveria alterar o atributo color de cada um dos títulos.
Suponha então que você tenha 3 títulos para cada página de seu site, e que em seu site você tenha 50 páginas, sendo assim teria 150 tags diferentes para alterar os valores. E se para melhor se adequar aos títulos tivesse que alterar a cor dos textos das páginas?

Solução Proposta
Separar a estrutura da apresentação.

Para Que Serve o CSS?
- Controle Absoluto da Aparência do site:
   Você gera um arquivo onde ele controlará toda a apresentação de seu site.

- Permitir Uma Rápida Atualização de Um Grande Site:
   Para realizar uma atualização na aparência do site basta fazer as modificações necessárias no arquivo CSS que todo o site será atualizado.

- Como funciona:
   Você ultilizará o HTML apenas para criar a estrutura de seu site, e todas as suas páginas farão a requisição de um mesmo arquivo CSS, onde este arquivo definirá toda a apresentação de suas páginas.
Postado por às Nenhum comentário:
Marcadores:

quinta-feira, 2 de junho de 2011

Criando link em suas páginas

Elemento e Atributos ultilizado

A - O elemento responsável por criar o link.
  • HREF - Atributo ultilizado para dizer qual é o caminho do link(pode informar aqui um arquivo para download ou outra pagina em html para ser exibida).
  • TITLE - Mensagem que aparecerá ao colocar o mouse em cima do link
Exemplo:
-Página Inicial
<html> 
      <head>
            <title> Minha Página </title>
      </head>
      <body>
            <!--Aqui está o corpo da minha página-->
            <h1>Página 1</h1>
            <hr>
            <a href="pagina2.html">Proxima página</a>
            <hr>
                    Criei esta página para praticar o uso de link
            <hr color="white">
            <!--O corpo da minha página termina aqui-->
      </body>
</html>
Salve este arquivo com o nome de "index.html" 
-Página Secundária
<html> 
      <head>
            <title> Minha Página </title>
      </head>
      <body>
            <!--Aqui está o corpo da minha página-->
            <h1>Página 2</h1>
            <hr>
            <a href="index.html" title="Voltar para a página inicial">Home</a>
            <hr>
                    Criei esta página com a mesma finalidade da página anterior
            <hr color="white">
            <!--O corpo da minha página termina aqui-->
      </body>
</html>
Salve este arquivo com o nome de "pagina2.html" 

Postado por às 2 comentários:
Marcadores:

Criando Tabelas

Elementos e Atributos para criação de tabela

TABLE - Elemento responsável pela criação da tabela
  • BGCOLOR - Cor do fundo da tabela
  • BACKGROUND - Plano de fundo da tabela
  • BORDER - Borda da tabela, onde "0" é sem borda
  • WIDTH - Largura da tabela, podendo o valor ser em porcentagem(% da página)
  • HEIGHT - ALTURA da tabela, podendo o valor ser em porcentagem(% da página)
TR - Elemento responsável pela criação da linha da tabela
  • BGCOLOR - Cor do fundo da linha
  • BACKGROUND - Plano de fundo da linha
  • HEIGHT - ALTURA da linha, podendo o valor ser em porcentagem(% da tabela)
TD - Elemento responsável pela criação da coluna da tabela(dentro da linha)
  • BGCOLOR - Cor do fundo da celula
  • BACKGROUND - Plano de fundo da celula
  • WIDTH - Largura da celula, podendo o valor ser em porcentagem(% da tabela)
  • HEIGHT - ALTURA da celula, podendo o valor ser em porcentagem(% da tabela)
  • ALIGN - Alinhamento horizontal na célula
  • VALIGN- Alinhamento vertical na célula
Exemplo:

<table border="1">
       <tr>
              <td>  Celula 1 </td>
              <td> Celula  2 </td>
       </tr>
       <tr>
              <td>  Celula 3 </td>
              <td> Celula 4  </td>
       </tr>
</table>

Entendendo...
Postado por às Nenhum comentário:
Marcadores:

quarta-feira, 1 de junho de 2011

Alguns Elementos e Seus Atributos - Exemplos

<html> 
      <head>
            <title> Minha Página </title>
      </head>
      <body bgcolor="#CCCCCC">
            <!--Aqui está o corpo da minha página-->
            <hr>
            <h1 align="right"> Charles WD </h1>
            <hr>
            <p align="center">
                   <font color="white" size="2" face="Times New Roman">
                          Estou no blog do Charles WD criando minha terceira página em HTML.
                   </font>
                   <br>
                   <img src="pastaondeestaaimagem/nome.jpg" width="400" height="250">
                   <br>

                   Esta página que criei possui:
                   <ul>
                         <li> Linhas Horizontais </li>
                         <li> Cabeçalho no corpo </li>
                         <li> Imagem </li>
                         <li> Marcador de texto não numerado </li>
                         <li> Cor no fundo da página </li>
                         <li> Fonte Alterada </li>
                         <li> E texto Alinhado</li>
                   </ul>
            </p>
            <hr color="white">
            <!--O corpo da minha página termina aqui-->
      </body>
</html>


Postado por às Nenhum comentário:
Marcadores:

Alguns Elementos e Seus Atributos

FONT
  • FACE - Tipo de Fonte. O valor que esse atributo receberá é o nome da fonte desejada(com espaço, se tiver).
  • COLOR - Cor da Fonte. Valor: O nome(em inglés) ou o Código em Hexadecimal correspondente a cor desejada.
  • SIZE - Tamanho da fonte. Valor: Números de 1 a 7, onde 7 corresponde ao maior tamanho.
HR - cria uma linha horizontal
  • COLOR - Cor da Linha
  • SIZE - Tamanho da linha
BODY
  • BGCOLOR - Cor do fundo da página
  • BACKGROUND - Adiciona uma imagem como plano de fundo. Valor: O caminho da imagem(se a mesma não estiver no mesmo diretório que seu arquivo em HTML), nome da imagem e sua extenção.
IMG - adiciona uma imagem em sua página
  • SRC - Atributo esponsável por indicar qual será a imagem exibida. Valor: O caminho da imagem(se a mesma não estiver no mesmo diretório que seu arquivo em HTML), nome da imagem e sua extenção.
  • WIDTH - Define o tamanho horizontal da imagem. Valor: número em pixels correspondente ao temanho desejado
  • HEIGHT - Define o tamanho vertical da imagem. Valor: número em pixels correspondente ao temanho desejado 
  • BORDER - Define a borda da imagem. Valor: Número correspondente a borda desejada(0 é sem borda).
H1, H2, H3, H4, H5 e H6 - Define o cabeçalho no corpo da sua página onde H1 é o maior
  • ALIGN - Alinha o texto dento do cabeçalho. Valores: nome da posição desejada(em ingles: Left,  Center ou Right).
P - Define um ou mais parágrafos dentro de sua página
  • ALIGN - Alinha o texto dento do cabeçalho. Valores: nome da posição desejada(em ingles: Left,  Center ou Right).
UL - Marcadores de texto
  • TYPE - Tipo do marcador. Valores: "disc", "circle" ou "square".
OL - Marcadores de texto numerados
  • TYPE - Tipo do marcador. Valores: "A", "a", ou "i".
LI - Item de Marcadores de texto ou Marcadores de texto numerados (Deve estar entre as TAGs <ul> e </ul> ou <ol> e </ol>)
Postado por às Nenhum comentário:
Marcadores:
Assinar: Comentários (Atom)