Posicionamento

O posicionamento de elementos CSS pode ser bastante variado de acordo com o objetivo. Os quatro tipos de posicionamento mais comuns são: static, relative, absolute e fixed. position

  • static – posição padrão, não permite deslocamentos de topo, esquerda, direita ou base.
  • relative – o posicionamento se dá a partir de deslocamento (topo, esquerda, direita ou base) da posição original, podendo ser positivo ou negativo.
  • absolute – o posicionamento se dá a partir de coordenadas absolutas e torna-se independente dos demais elementos da página.
  • fixed – permite fixar o elemento na coordenada, mesmo que a página se desloque, o elemento permanece na posição.

Para ver os exemplos funcionando, acesse os arquivos no link.

Imagens

As imagens são tags de linha que contrariam a regra, pois não dependem de uma outra tag para fechar.

Sua estrutura segue a seguinte sintaxe:

Atributos:

  • src = “source” endereço do arquivo fonte
  • alt = “alternate text” texto alternativo
  • width = largura (valor em pixels)
  • height = altura (valor em pixels)

Continue lendo →

Links

As tags podem conter atributos que auxiliam a descrever, especificar e detalhar suas propriedades. estrutura

Links <a>

Os hiperlinks são inseridos através da tag <a> De acordo com o atributo e o valor utilizado o link pode ser feito com uma página externa (em outro site), uma página interna (no mesmo site) ou com a mesma página (âncora). Continue lendo →

Como centralizar uma página web

A imagem abaixo mostra as dicas para centralizar um documento na web.

centralizar_novo

 

O código respectivo do html e css estão abaixo.

A parte do HTML

<!DOCTYPE html>
<html>
   <head>
   <!-- insira aqui os elementos do head -->
   </head>
   <body>
      <section id="principal">
       <!-- insira aqui os conteúdos da páginas a serem centralizados -->
      </section>
   </body>
</html>

A parte do CSS

@charset "UTF-8"
/* CSS Document /*
#principal {
      width: 960px;
      margin: 0 auto;
    }

Clique também para baixar os arquivos de exemplo.

Introdução ao HTML

A base para a montagem de sites é o domínio do HTML. O HTML (Hypertext Markup Language) é uma linguagem de marcação que se baseia em etiquetas (tags) que definem o comportamento dos elementos do documento. Para começar um documento HTML é importante definir alguns pontos importantes do documento. Um deles é a declaração sobre o tipo de documento. Isso é feito a partir do  !DOCTYPE:

<!DOCTYPE html>

Com isso informamos o navegador que estamos trabalhando no padrão HTML5. A principal tag para definir um documento HTML é a própria tag html. Assim como a maioria das tags, deve ser aberta e depois fechada. Como é a tag principal, deve ficar no início e no final do documento.

<!DOCTYPE html>
<html>
</html>

Todo documento HTML possui duas partes que o estruturam: HEAD e BODY.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
   </body>
</html>

Em HEAD, se concentram as informações sobre o documento, como título, meta-dados e links para outros documentos necessários para o funcionamento da página.

<!DOCTYPE html>
<html>
   <head>
      <title> Esse é o título da página </title>
   </head>
   <body>
   </body>
</html>

O uso do title não fica visível no corpo da mágina, mas na barra do navegador. Vemos abaixo o resultado no Safari em um MacOS. Title

 

No exemplo há um problema com a codificação dos caracteres, pois esta não foi avisada sobre qual padrão adotar. Para resolvê-lo, basta declarar a meta tag “charset”.

<!DOCTYPE html>
<html>
   <head>
      <title> Esse é o título da página </title>
      <meta charset="utf-8">
   </head>
   <body>
   </body>
</html>

E o resultado será ajustado para a codificação para o padrão UTF-8, que admite acentos.

Title2

Em BODY fica o conteúdo do documento, propriamente dito. Aí entram títulos, parágrafos, tabelas, imagens etc.

Abaixo adicionamos um título (h1), um parágrafo (p) uma lista não ordeanda (ul) e três tópicos (li).

<!DOCTYPE html>
<html>
   <head>
      <title> Esse é o título da página </title>
      <meta charset="utf-8">
   </head>
   <body>
       <h1> Esse é um título (h1) </h1>
       <p> Esse é um parágrafo (p) </p> 
       <ul>
          <li> Esse é um tópico (li) dentro de uma lista (ul) </li>
          <li> Esse é outro tópico (li) dentro de uma lista (ul) </li>
          <li> Esse é mais um tópico (li) dentro de uma lista (ul) </li>
       </ul>
   </body>
</html>

E o resultado que vemos na página do site é o seguinte:

Body

Para fazer o download do arquivo mostrado aqui, basta acessar esse link.