Arquivo do autor:Ricardo Artur

avatar

Sobre Ricardo Artur

Meu nome é duplo, Ricardo por escolha dos pais e Artur em homenagem ao meu avô. Nomes de reis ingleses, diziam meus pais, mas não sou da nobreza ou aristocracia. Tanto que Pereira e Carvalho são nomes de cristãos novos, provavelmente judeus ou muçulmanos convertidos para escapar da inquisição. Sou nascido no Rio de Janeiro - RJ e criado em São José dos Campos - SP em família carioca por parte de mãe e mineira por parte de pai, ambas de ascendência portuguesa. Nenhum de meus avós cursou uma universidade, eram todos humildes e trabalharam muito para conquistar algum patrimônio, incentivando os filhos para que cursassem o ensino superior. Em São José, além da escola, desenvolvi interesse por desenho e música. Sempre gostei de desenhar, mas só realizei um curso, de quadrinhos quando adolescente. A música, desenvolvi cursando o extinto Conservatório Musical Santa Cecília durante oito anos, com o curso de piano inconcluso (pré+ 7 de um total de 9 anos). Já o violão aprendi sozinho, a partir de dicas e conselhos de outras pessoas. Também cantei em coral durante muito tempo, primeiro no conservatório, depois no coral da universidade. Mudei para o Rio aos 18, para cursar a universidade, que fnanciei por meio da participação no coral e no trabalho dentro da instituição. Já na faculdade me relacionei com a pesquisa, pois trabalhava em um dos laboratórios, o NAE. Ao decorrer do curso, meu interesse pela pesquisa aumentou e me formei com um projeto de caráter teórico, enquanto o curso era bastante prático. Sou graduado e mestre em Design pela PUC-Rio e atualmente cursando o doutorado na mesma instituição, onde atualmente sou bolsista do CNPq.

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.

 

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.

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.