Formatação de informações e Webdesign em HTML

Como já havíamos dito em nossa seção introdutória de HTML, quando apresentamos essa bela e imensamente usada em todo o mundo, explicamos que criar sites é se preocupar como conteúdo vai ser exibido.

Isso passa pela formatação de textos, objeto de estudo desta seção de nosso curso.

Formatar um texto é aquilo que você fazia ou faz, pois temos muitos leitores estudantes, quando vai/ia entregar um trabalho no colégio. Aumentava fonte, diminuía, realçava um texto, mudava a cor de outro, espaçava etc.

• Fazer download da Apostila de HTML + CSS

A importância do Webdesign para o HTML

Esta seção de nosso curso de HTML é bem simples, e pode até ser considerada um pouco chata, mas é muito, mas muito importante mesmo.

Ser Webmaster não é somente criar códigos HTML, é preciso ter diversos outros conhecimentos, como escrever bem, saber quando usar parágrafo, sublinhar, negritar ou deixar um trecho em itálico.

Como bem frisamos, quem quiser ser WebMaster e criar bons sites, deverá ter conhecimentos em diversas áreas, inclusive em design, como saber que cores usar, quais combinam, separar blocos de texto, informação, ter cuidado para não deixar as informações confusas e poluir seu site.

Isso faz diferença, pois deixa uma boa impressão para os internautas que irão navegar em seu site. Olhe um site de notícias, como da Globo.com, do Terra ou da UOL.

É tudo bem dividido, espaçado, cada notícia no seu espaço, as seções diferentes com cores diferentes, imagens em cima com uma descrição embaixo e por aí vai.

Vejamos alguns exemplos profissionais, de como organizar e categorizar dezenas de informações:

Trecho do site globo.com, capturado no dia 4 de agosto de 2013, com autorização da emissora. Notem a organização dos blocos de informação

Os segredos de como fazer um site: bom senso e simplicidade

Quando começamos estudar HTML com o intuito de criar um site, queremos criar o melhor, mais bonito e mais informativo website de toda a internet. É muito gratificante ter seu trabalho na internet, à disposição de todos, sem lido, acessado e sendo útil para pessoas de qualquer lugar do mundo.

Mas devemos ter bastante cautela, principalmente se formos iniciante na arte de criar sites.
No início, queremos sempre adicionar muita coisa, muitas figuras, vídeos, contador de visitas, relógio, banners, links de outros sites e uma porção de outra coisa. Aí nosso site fica parecendo um show do Restart, de tão colorido e confuso.

Como exemplo disso, vamos mostrar um printscreen de um blog, a imagem da direita.
Obviamente não vou mostrar que site é, nem passar sua URL, pois o autor pode se ofender.
Mas todas essas figuras estavam na sua Home (página inicial).



O conteúdo do site começa com uma foto gigante do 'webmaster' e de sua esposa, fazendo uma declaração.
O que é bonito, mas isso não interessa aos usuários do blog. Ah, e tem um som bizarro de fundo.
Logo abaixo da foto, um contador, um formulário de contato e um serviço de chat.
Em seguida ele coloca um código HTML do banner dele pedindo divulgação, dois feeds de notícias de blogs religiosos, outro feed de notícias da UOL (3 blocos de notícias da UOL).

Continuando, tem dois vídeos do youtube, um bloco de perguntas e respostas de um site de empregos (?) e opções para procurar anúncios de veículos.

Abaixo disso ele colocou um banner fazendo propaganda de seus sites, outro vídeo, um calendário e propaganda da fanpage do autor do blog. Abaixo disso encontramos uma sequência de vários jogos online (mais de 20).

Em seguida, encontramos um post com texto, mas fonte do texto é a mesma do fundo do site e simplesmente não é possível ler (isso se repete em outros posts do site). Depois, tem mais vídeos e agora fotos de algumas paisagens aleatórias e mais uma sequência de vídeos.

Agora vemos uma série de textos sem formatação, e do mesmo site, e na mesma página, a inicial ( a imagem da esquerda).
Porém cada um com uma fonte diferente, fundo de site diferente, e alguns as cores do texto e fundo são iguais, não sendo possível de ser ler nem se selecionarmos o texto. Depois eu saí do site, pois era muito pesado e não havia carregado tudo ainda (um dos fatores que o Google usa para ranekar os sites, é o tempo de carregamento).

Como dissemos, nosso propósito não é caçoar ou 'zoar' o site, e sim mostrar que para ser um bom WebMaster você deve ter bom senso, não deve exagerar e deve organizar bem seus sites, apresentar bem as informações, não deixar informações sem formatação (cada texto de uma cor).

É necessário termos um padrão, uma ordem.
Embora a maioria dos cursos e apostilas de HTML por aí só joguem códigos na cara de seus estudantes, nós do Curso HTML Progressivo vamos fazer diferente, vamos mostrar como fazer um site bonito e organizado, pois isso também vai fazer parte de seus conhecimentos como WebMaster.




Um bom exemplo de site simples e organizado, é o site mais famoso do mundo, o site do Google.
Veja como tem pouca coisa, é possível visualizar tudo e não sentimos uma dor na vista:

Esperamos que com os exemplos mostrado nesse artigo você tenha uma noção da importância de formatar seu site, por isso vamos focar, a partir desta seção, nas maneiras que temos de organizar as informações.
Para iniciar, vamos começar a estudar sobre os textos, que são, sem dúvidas, a maior parte do conteúdo da Internet.

Parabéns por iniciar esta nova seção do curso e bons estudos.