Introdução ao Desenvolvimento Web - Capítulo 2 - Seção HEAD, a parte inteligente de uma página.

Continuando a nossa jornada pelo aprendizado do desenvolvimento web, adentramos mais a fundo na seção HEAD neste artigo, nos tópicos a seguir trataremos de METATAGS, da tag STYLE, da tag LINK e da tag TITLE. Espero que o texto a seguir agregue bastante e esclareça qualquer dúvida sobre este assunto em específico.

Iniciando a parte inteligente de uma página

Dizemos que a seção HEAD é a parte inteligente pelo fato da mesma possuir uma série de tags relacionadas a configuração da página, como estilização da página, configuração de palavras-chaves que podem ser usadas para melhorar o ranking de seu site em motores de busca como o Google, entre outras coisas mais que serão citadas no decorrer deste artigo. Vale lembrar que tais tags não serão visualizadas pelo internauta, afinal não faria sentido deixar visível tais configurações para o usuário que está interessado no conteúdo e não em como a página foi configurada.

Tendo conhecimento desses detalhes iniciaremos a explicação, das tags mais importantes desta seção, uma a uma.

HEAD

É a tag de abertura e fechamento da seção cabeçalho do documento, portanto funciona para as outras tags desta seção como um container. Antes possuía um atributo chamado profile que permitia adicionar um URL por onde a página poderia obter regras para sua configuração, mas o HTML5 deixou de suportar o mesmo e hoje está em desuso graças a grande aceitação do HTML5 no mercado de desenvolvimento web, tais regras agora são obtidas através das tags META. O mesmo HTML5 permite que o desenvolvedor omita a tag HEAD, usando somente as tags que ficam contidas pela mesma, mas não usar tal tag é uma vantagem para desenvolvedores muito organizados e uma desvantagem para pessoas que estão iniciando no desenvolvimento de páginas HTML ou que não possuem uma grande habilidade de criar códigos HTML organizados.

META

Segundo estudos da Universidade Federal do Paraná(UFPR), metadados são: "informações estruturadas que descrevem, explicam, localizam ou tornam mais fáceis de recuperar, usar ou gerenciar um recurso de informações", ou no mundo digital a situação também definida pela UFPR, seria: "No contexto de repositórios digitais um metadado descreve um item, também denominado de objeto digital.". Percebe-se que estamos a trabalhar com informações que descrevem algo, no caso, que descrevem a página criada.

Tal descrição é muito importante para posicionar melhor seu site nos rankings dos buscadores da Internet como Google, Bing e outros. Uma boa utilização das metatags irá ajudar seu site a ser mais encontrado pelo internautas através de palavras chaves, da descrição do conteúdo da página e etc.

Para que isso seja possível a tag meta conta com alguns atributos específicos, são eles:

• charset - Define o padrão de codificação que será utilizado na página. Exemplo: UTF-8.
• name - Define a característica da página que será descrita e armazenada no cabeçalho do documento.
• content - Descrição de uma informação importante para a página.

Pode-se definir com as META tags o padrão de codificação e as palavras-chaves, como dito anteriormente, mas também pode-se criar uma breve descrição da página, registrar quem foi o autor e o padrão de visualização da página nos devices existentes. Para definir o que a tag META irá descrever ou configurar é necessário utilizar valores específicos para o atributo name e a partir desta definição definir o valor do atributo content, abaixo segue a lista dos valores e a descrição do que é permitido colocar no content respectivamente:

Valores do atributo NAME e descrição do valores respectivos de seus atributos contents
Valor do NAME	Descrição do CONTENT
DESCRIPTION	Este valor permite uma descrição da página como valor do atributo content
KEYWORDS	Este valor permite inserir palavras-chaves como valor do atributo content
AUTHOR	Este valor permite inserir o nome do desenvolvedor daquela página específica como valor do atributo content
VIEWPORT	Este valor permite inserir outros valores para definir a visualização da página nos dispositivos existentes(TVs,PCs,Notebooks,Tablets e celulares

TITLE

Esta tag é um elemento requerido em qualquer documento HTML, ele define o título da página na barra de título do navegador, provê o título da página quando esta é adicionada aos favoritos e informa ao mecanismos de busca qual o título daquela página específica.

Esta tag não possui atributos específicos, mas pode utilizar todos atributos globais do HTML.

STYLE

Esta tag é utilizada para permitir ao desenvolvedor utilzar os código CSS(Cascading Style Sheet - Folha de Estilo em Cascata) de forma incorporada, ou seja, abre-se um container dentro da seção HEAD para inserir os códigos que estilizarão a página, assim evita-se de utilizar os códigos CSS inline ou os atributos HTML que eram utilizados para estilizar as páginas antigamente, porém atualmente não são mais utilizados e alguns foram até depreciados.

LINK

Esta tag é utilizada para ligar uma página HTML com uma folha de estilo externa ou outros recursos externos, exceto scripts, pois estes são tratados de forma diferente. A utilização desta tag é comum no desenvolvimento web, pois entende-se que dessa forma o código fica mais limpo e organizado, onde cada parte de uma página é tratada separadamente e armazenada igualmente.

Em um futuro artigo tratarei de explicar melhor essa separação, no entanto, é interessante entender que o HTML é responsável pela estrutura da página e o CSS fica responsável pelo estilo da página.

Esta tag possui alguns atributos, mas os mais importantes e mais utilizados, são eles:

• rel - Que define que tipo de relacionamento existe entre o documento HTML e o arquivo externo. O valor mais utilizado neste atributo é o STYLESHEET, pelo motivo já mencioando acima.
• type - Que define com que tipo de arquivo externo que a tag está ligando ao HTML. O valor mais utilizado neste atributo é o TEXT/CSS, este valor dividido em duas partes, descreve que o arquivo externo é um texto que contém códigos CSS.
• href - Que define aonde encontrar o arquivo através do endereço do folder(pasta/diretório) que contém o arquivo externo. 

Exemplo de seção HEAD na prática!

Exemplo de código HTML para estruturar uma seção HEAD de uma página.

Conclusão

A seção HEAD é definitivamente uma parte essencial do documento HTML, pode-se entender que sem ela as páginas seriam apenas informações de texto em um fundo branco com algumas imagens como no início da Internet. Deve-se dar uma especial atenção a esta seção para atingir melhores resultados em buscadores e criar páginas mais bonitas.

Alguém pode citar a falta da tag SCRIPT, que também pode ser utilizada nesta seção, mas existe um problema da utilização desta tag na seção HEAD que posteriormente tratarei em um artigo futuro.

No próximo artigo trataremos da próxima seção e das tags utilizadas como containers para uma melhor organização do código HTML.

Introdução ao Desenvolvimento Web - Capítulo 1 - A Incrível história do HTML e Estrutura Básica

A incrível história do HTML

O que é HTML? Como sua criação impactou todo o desenvolvimento da Internet? Quem o criou? Tudo isso será descrito neste artigo para introduzir você, nosso leitor, ao fantástico mundo do desenvolvimento web.

Esperamos também com essa introdução, de uma série de artigos sobre o desenvolvimento web que serão criados para este blog, iniciar os estudos de nosso leitor e agora também aluno, guiando passo-a-passo a sua evolução nesta área de fundamental importância nas comunicações pessoais, comerciais e na tecnologia da informação como um todo.

HTML - A linguagem de marcação de hipertexto que fundou a Internet como a conhecemos.

Antes dos computadores possuírem softwares com interfaces gráficas a Internet já existia como um projeto secreto de comunicação e troca de dados entre bases do exército americano, esse embrião da Internet se chamava DARPANET, pois foi criado dentro do DARPA(Defense Advanced Research Projects Agency - Agência de Projetos e Desenvolvimento Avançado de Defesa). Nessa época todos os softwares existentes funcionavam através de uma interface de texto aonde o usuário deveria conhecer comandos para executar qualquer tarefa que desejasse.

Após a introdução dos centros universitários americanos no projeto o mesmo evoluiu bastante em termos de compartilhamento de dados e melhorias nas conexões, mas ainda era uma ferramenta para poucos devido as suas exigências técnicas para o uso.

Na foto, Tim Berners-Lee, o criador do protocolo HTTP, do HTML e do primeiro navegador.

Foi então, que em 1990, o físico Tim Berners-Lee criou a linguagem de hipertexto que mudaria para sempre a Internet. Tim Berner-Lee era um contratado do CERN(the European Organization for Nuclear Research - Organização Europeia para Pesquisa Nuclear), lá ele sentia a dificuldade dos pesquisadores compartilharem artigos com a comunidade científica, para sanar esse problema Tim criou um projeto inovador e quando percebeu uma grande oportunidade de executar seu projeto, no momento que o CERN se tornou o maior nó de Internet na Europa, logo apresentou seu projeto ao seu executivo que tão prontamente o aprovou.

Tela do primeiro navegador, o famoso Mosaic criado por Tim Berners-Lee

Assim, nasceu o protocolo HTTP(HyperText Transfer Protocol - Protocolo de Transferência de Hipertexto), o HTML(HyperText Markup Language - Linguagem de Marcação de Hipertexto) e o primeiro navegador, o Mosaic, que facilitou o uso da Internet por leigos que não dominavam comandos para uso nas interfaces de modo texto. Isto também foi possível nesta época porque os sistemas operacionais passavam pela grande revolução da interface gráfica que permitia a popularização em massa do uso do computador.

Construindo a Internet com tijolinhos digitais

Com o advento do HTML e da interface gráfica agora era possível um mundo de possibilidades, os primeiros desenvolvedores web construíram páginas com o foco no compartilhamento de artigos científicos, mas conforme a tecnologia foi evoluindo começaram a surgir sites comerciais, institucionais, educacionais, portais, redes sociais e etc, permitindo chegarmos ao ponto que nos encontramos hoje.

Cada tag de um arquivo HTML funciona como o tijolo de uma construção, cada um colaborando com o projeto.

Para que isso fosse possível, foram criadas as tags, pequenos comandos para marcar e organizar os artigos científicos no primórdio do uso do HTML, assim esta linguagem é composta por diversos pequenos comandos que funcionam como tijolinhos para a construção e organização de um ambiente específico na web.

Como a mágica acontece?

Um documento HTML não é executado, o que o torna diferente dos códigos-fonte das linguagens de programação. Lembrando que HTML NÃO É LINGUAGEM DE PROGRAMAÇÃO, não executa nada, a mesma é apenas uma linguagem de marcação de hipertexto, que será lida e interpretada por um navegador, este já possui na sua programação um guia de como todas as tags devem formatar e e definir as partes do documento. 

A estrutura básica de um arquivo HTML

Estrutura básica de um arquivo HTML

Sabendo que as tags são os elementos primordiais do documento HTML, deve-se entender pelo menos a utilização das tags básicas necessárias para definir a estrutura do documento a ser publicado na web. Um documento HTML é iniciado com uma tag chamada DOCTYPE e que diz ao navegador que o documento que está sendo interpretado possui tags HTML e qual versão está utilizando, após insere-se a tag HTML, definindo o início do documento. Tal arquivo também é estruturado por duas partes principais, cabeça(HEAD) e corpo(BODY), onde a tag cabeça agrupa as tags referentes dados e funções que não aparecerão para o usuário final, já o na tag corpo estarão agregados todas as tags que estruturarão o documento na forma que será apresentada ao usuário final.

Conclusão

No entanto, apenas essas duas não são suficientes e uma série de tags são usadas para a criação de um documento bem estruturado e trabalhado para fornecer informação ao usuário da melhor forma possível e proporcionar possibilidades a todos que escolherem a Internet como canal de comunicação com o mundo.

Nos próximos artigo abordaremos as tags com mais profundidade objetivando assim o total conhecimento da função de cada uma para a criação de um documento bem estruturado e organizado.

Por quê aprender HTML para manter um blog?

Um blog é uma ferramenta já um tanto antiga, mas ainda é muito útil na hora de armazenar artigos ao mesmo tempo que nos comunicamos com o mundo através destes. Através dos blogs um professor pode criar artigos referentes a uma aula específica e aprofundar em seus alunos o conhecimento esperado fora da sala de aula, permitindo assim uma educação contínua e sem barreiras.

Uma empresa também poderá se beneficiar da utilização de blogs na tarefa de se comunicar com seu público consumidor através de notas, artigos e textos menos formais na tentativa de criar um relacionamento mais íntimo com seus seguidores.

A verdade é que os blogs nunca saíram de moda e ainda irá demorar para esta ferramenta tão útil na comunicação digital ficar ultrapassada e inútil.

No entanto, a manutenção dos blogs ainda pode ser uma tarefa um tanto desafiadora se o usuário desejar ter maior controle de temas, imagens e até mesmos de seu próprio texto. Afinal, por mais que as ferramentas tenham evoluído muito e por mais que desenvolvedores tenham disponibilizado diversos temas para dar maior gama de personalização aos blogueiros, mesmo assim, um blogueiro um pouco mais exigente ainda sentirá falta de maior controle e nesse momento saber a famosa Hyper Text Markup Language, a HTML fará toda a diferença.

Usando HTML em blogs

Muitas plataformas de blogs permitem que o usuário personalize o código de marcação de hipertexto, o código HTML, caso esse deseje maior controle do seus posts, utilizando as tags HTML o autor poderá criar posts com código mais enxutos e estruturar o mesmo conforme a sua criatividade e conhecimento. Muitos usuários dizem que é desnecessário, pois as plataformas possuem ferramentas de formatação de texto e inserção de imagens muito eficientes. No entanto, quando o usuário deseja realmente ter controle não só do post, mas de todo o layout do do blog, a situação muda e saber não só HTML, mas CSS também, faz muita diferença.

O usuário que souber personalizar a estrutura HTML do seu blog e formatar o mesmo usando CSS (Cascading Style Sheet), basicamente será independente da plataforma e com certeza terá um blog diferenciado dos demais que utilizam os temas e layouts padrões da plataforma. Isso em alguns momentos é uma grande vantagem, já que as ferramentas padrões podem deixar a desejar em alguma formatação ou do post ou do tema.

Conclusão

Caso o usuário deseje apenas escrever e não vá se importar muito com o tema ou layout do blog, as configurações básicas serão realmente muito eficazes e não será necessário maiores conhecimentos de HTML. Já se o usuário desejar ter maior controle do tema, do layout e dos posts, deixando seu blog com uma aparência única, se diferenciando assim dos demais blogs da Internet, então é aconselhável a obtenção de conhecimentos sobre HTML e posteriormente em CSS.