Formulário de Contatos

Pra quem estiver procurando um bom tutorial de formulário, eu indico o blog do Bruno Dulcetti. Bem mastigadinho…

Passos Prévios – Criando um site

Passo I

Antes de iniciar a criação das páginas é aconselhável pensar no tema que será tratado e que este seja atraente.

Para publicar uma página na Internet devemos seguir alguns passos, primeiro um planejamento, logo a construção das páginas e mais tarde, a divulgação e a constante atualização das páginas. Neste capítulo vamos ver quais são estes passos prévios que devemos realizar para que nosso esforço e resultados sejam os melhores possíveis, ou seja, vamos ver qual é o planejamento que há que fazer antes de colocar mãos à obra.

Pensar em um tema

Pode ser o mais importante dos passos para a criação de uma web. Há que elaborar a idéia e juntar os dados sobre o tema escolhido para sua página na Internet.
Quando fazemos inclusive uma página pessoal, podemos falar de algum tema interessante como nosso time de futebol ou nosso cantor favorito, ou de um tema que nos comova profundamente, como a ecologia ou a história de nossa comarca.
Também podemos construir uma página que trate de nossa família ou de nossos cães, ou de ambos juntos, mas temos que levar em conta que o valor desse tipo de página é bem menor e que certamente os demais usuários nao irão se interessar. Se desejarmos construir uma página que algum dia seja popular, devemos abordar temas que sejam de interesse para um grupo de gente.
Uma vez pensado o tema é muito importante juntar o máximo de dados possíveis sobre ele, embora muitas das idéias possam estar em nossa cabeça, é importante ter anotações, fotografias ou opiniões de outras pessoas que também conheçam o assunto que temos na cabeça. Insisto que é importante que o material que vamos publicar tenha o maior valor possível, pois assim conseguiremos os melhores resultados.

Passo II

Há que pensar também na estrutura do site e como definí-lo.

Também é importante pensarmos na estrutura dos conteúdos de todo o site antes de desenhá-lo. Neste ponto temos que pensar sobre várias coisas, como as distintas seções que vai conter o site, a ramificação das páginas que vamos tratar, etc.
A maneira para que este ponto seja realmente útil, é preparar todas as idéias no papel. Com toda a tranquilidade do mundo e com toda a determinação possível vamos preparar uma série de diagramas e listagens que nos permitam dirigir nossos esforços da mellhor forma.

Seções do site: Poderemos pensar em quais seções vamos colocar no site. Uma com informação geral, outra com informação de contato, outra com uma visita gráfica a nossas instalações, etc.

Diagrama do site: Podemos desenhar em um papel quais são as distintas seções do site, colocando-as dentro de quadrados e representar também os links existentes entre cada seção mediante linhas que unam esses quadrados. É algo muito simples e divertido de fazer, além do mais podemos ter novas idéias para o website na medida que vamos desenhando.

Esquema de uma página: Também podemos desenhar no papel uma página do site que vamos construir para vermos aonde colocar a barra de navegação, o logotipo do site ou da empresa, um possível banner publicitário, etc. Este esquema também pode ser útil na hora de construir as páginas e além do mais, sempre é mais fácil desenhar sobre o papel do que desenhar diretamente com o computador.
Estes passos são opcionais, qualquer um pode se dispor a construir uma página logo depois de decidir que deseja ter uma página web, entretanto, nem todo mundo é capaz de expor bem quais são seus objetivos e fazer um projeto com todos os pontos desenvolvidos de antemão. O mais importante são os resultados finais, por isso, começar a casa pelo telhado não será positivo para nossa página. Portanto, os resultados finais melhorarão se fizermos primeiro um bom planejamento.

 

Por Miguel Angel Alvarez – Tradução de JML

http://www.criarweb.com/artigos/5.php

Folhas de Estilo – CSS

Uma Folha de Estilo ou “Style Sheet”, funciona basicamente como um “template”, ou seja, um modelo que controla a formatação dos elementos HTML de uma página.

Alterando a formatação atribuida a uma tag HTML, através da definição de folhas de estilo, que se sobrepõe à formatação por default (padrão) utilizada pelo browser (navegador) para essa tag, é possível modificar toda a aparência de um conjunto de páginas HTML, ou seja, é possivel modificar todo um “web site” recorrendo ás Folhas de Estilo.

Do ponto de vista dos autores de páginas HTML, esta potencialidade oferece, desde logo, algumas vantagens:

• A possibilidade de aplicar formatações extra.
• Um controle superior da aparência das páginas.
• A personalização rápida de um “Web site” como um todo, pois é possivel modificar a aparência de todo um site sem a necessidade de editar as páginas HTML. 

Paralelamente, a utilização de Folhas de Estilo permite, entre outras coisas:

• Definir margens e especificar tamanhos de letra e cores de fundo para o texto.
• Deixar de utilizar truques para conseguir realizar tarefas relativamente simples como definir as margens de um parágrafo.
• Modificar a aparência de uma só página ou de todo um site sem, para isso, ter de alterar vários elementos HTML em cada página.
• Utilizar classes para definir variações de cada um dos estilos de formatação definidos.

No entanto as Folhas de Estilo sofrem do problema da compatibilidade entre browsers, tal como sempre existiu para o HTML “normal”, ou seja, é necessário testes em diversos navegadores para termos certeza de que tudo está de acordo com o planejado.

HTML – A linguagem básica da web

 

HTML significa ‘HyperText Markup Language’ e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples: Certos itens de um documento contêm uma ligação a outra zona do mesmo documento ou, como é mais comum, a outros documentos.

HTML é uma espécie de linguagem de formatação através de uma série de comandos chamados de  ‘tags’. Todos os ‘tags’ são inseridos entre o sinal de menor ( < ) e maior ( > ) e todos eles são abertos e fechados em uma seqüência lógica (o primeiro tag aberto será o último tag a ser fechado.. Ex.: <HTML> </HTML>

É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’, que, a partir de agora, passaremos a chamar de comandos. Porém, para facilitar a leitura, utilizaremos os comandos em letras maiúsculas.

Todas as páginas em HTML são identificadas pelo ‘tag’ <HTML>, que terá obrigatóriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>. Todas as páginas em HTML contêm duas partes: Aquela definida por <HEAD>, e que contém todas as informações do cabeçalho da página e outra parte definida por <BODY>, contém quase tudo aquilo que iremos ver realmente na nossa página. O texto que aparece como título da janela do navegador (browser) é definido pelo comando <TITLE>, que surge sempre na área correspondente ao cabeçalho da página (<HEAD>).  Um outro comando que é muito utilizado é o <BR>. <BR> (Break) dá instruções ao browser para fazer uma mudança de linha, assim como o comando <P> informa o browser que estaremos iniciando um novo parágrafo. Veja a estrutura básica:

<HTML>

<HEAD>

<TITLE> Título (nome) da minha página </TITLE>

</HEAD>

<BODY> O conteúdo de minha página. <BR>

Mais conteúdo e blá, blá, blá… <BR>

E blá, blá, blá… <P>

Sem mais blá, blá, blá.

</BODY>

</HTML>

Note que para fecharmos um comando é necessário que se coloque uma barra (/) antes do nome do comando a ser fechado.

Uma das bases do HTML é o facto de ser uma linguagem de hiper-texto, ou seja, uma ligação (link) com um texto qualquer, onde quer que ele esteja na esrutura de nosso documento para web, ou na própria web pelo mundo. Para estabelecermos um link utilizamos o comando <A HREF=”texto a ser linkado>NOME ATRIBUÍDO AO LINK </A>, sendo que o nome atribuído ao link aparecerá sublinhado e de outra cor, enfatizando o fato de ser um link clicável.

Este comando é um pouco diferente dos que já vimos. Pode parecer confuso, mas não é. O ‘tag’ <A> é aquele destinado à introdução de uma link, mas no entanto necessita de um parâmetro (o HREF) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar ‘linkado’, até o ‘tag’ ser fechado com </A>.

O parâmetro HREF pode conter também o endereço de outro site, como em <A HREF=”http://www.site.com”> (neste caso é indispensável o prefixo http://) ou qualquer outro arquivo sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para download usar-se-ia <A HREF=”arquivo”>.

Vejamos então:

<HTML>

<HEAD>

<TITLE> Título (nome) da minha página </TITLE>

</HEAD>

<BODY> O conteúdo de minha página. <BR>

Mais conteúdo e blá, blá, blá… <BR>

E blá, blá, blá… <P>

Sem mais blá, blá, blá.

Clique <A HREF=”Info.html”> aqui </A> para saber mais.

</BODY>

</HTML>

OBS: Quando essa página for exibida em um navegador essa última frase aparecerá assim: “Clique aqui para saber mais.” e o cursor do mouse se transformar em uma mãozinha com dedo apontado para o link (Padrão / Default ).

Para destacar um texto e colocá-lo em Negrito utilizamos o comando <B> </B>, da mesma forma utilizamos o <I> </I> para colocá-lo em Itálico.

Dentro do comando <BODY> podemos colocar a cor do fundo da nossa página, por exemplo, utilizando BGCOLOR (Background Color), assim:

<BODY BGCOLOR=”00FFFF”>

Para saber mais sobre cor hexadecimal clique aqui.

Bem… Por hoje é só pessoal… Vou dormir senão chego atrasado de novo… Rssss

Paz e bem, sempre!

FC