Introdução ao HTML

Saudações, caros membros da Lacking Faces.

Venho por meio deste para oferecer-lhes uma breve introdução à programação, proporcionando-os, assim, documentos para adquirir noções rudimentares acerca desta pauta que fora iniciada ao grupo.
Antes de iniciarmos, devo explanar que projetei meticulosamente este documento para que os membros mais leigos possam compreendê-lo.

Tableless - O que é client-side e server-side?

Existem dois tipos de linguagens para desenvolvermos: as linguagens client-side e as linguagens server-side. Você pode ver estes nomes meio diferentes em outros lugares como por exemplo, front-end, se referindo às linguagens client-side e back-end se referindo às linguagens server-side. Não se preocupe, são a mesma coisa. Mas nesse texto, para que você possa entender melhor, vamos usar client-side e server-side. As linguagens server-side são linguagens que o servidor entende. Isso quer dizer que vai escrever um código onde o servidor vai processá-lo e então vai mandar para o seu navegador a resposta.
As linguagens client-side são linguagens onde apenas o seu navegador vai entender. Quem vai processar essa linguagem não é o servidor, mas o seu browser. Por exemplo: se criarmos um script em linguagem back-end (PHP, Asp, Java, Ruby, etc) que apenas calcula a soma de 2 + 2, será o servidor (ou back, o server) que calculará este resultado. Se fizermos esse cálculo em alguma linguagem front-end, como o JavaScript, quem calculará essa conta é o browser do usuário. Por isso o termo client ou front. Assim, os profissionais que trabalham na interface do usuário, são chamados de Desenvolvedores front-end, e aqueles que trabalham no core da aplicação, fazendo uma programação que somente o servidor irá entender são chamados de Desenvolvedores back-end.

Linguagens

Linguagens client-side: 

 º XHTML
 º HTML5
 º CSS
 º CSS3
 º JavaScript
 º AJAX
 º Jquery
 º CFML
 º AngularJS

Linguagens server-side:

º PHP
º Perl
º .NET
º C#
º VB
º JSP
º Python
º ASP
º JAVA

W3C - Hypertexto

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hipertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web. O HTML é baseado no conceito de Hipertexto.
Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.
Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem. Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.

W3C - O HTML5 e suas mudanças

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores. Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4 também não facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com a possibilidade de Drag’n Drop de elementos, era necessário criar um grande script, com bugs e que muitas vezes não funcionavam de acordo em todos os browsers.
Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.
Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível.
O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional. O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites.
O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas.

HTML5 - Structure Basic

Nesta publicação, onde contém informativos da W3C e Tableless, encontrará, também, os elementos fundamentais para um arquivo .html e suas respectivas funções. Antes de cogitarmos, precisamos reconhecer o que é uma tag e qual é sua importância dentro do sistema.
A tag é um tipo de META-INFORMAÇÃO que descreve ou define algum aspecto de um recurso de informação (como um documento, a imagem digital, tabela relacional, ou página da web). Tags de conhecimento são mais do que não-hierárquicas tradicionais palavras-chave ou termos. Eles são um tipo de metadados que capturam o conhecimento na forma de descrições, categorizações, classificações, semântica , comentários, notas, anotações, hyperdata, hiperlinks ou referências que são coletadas em perfis de tag.

Tipos de tags ou declarações:

O <!DOCTYPE> declaração não é uma tag HTML; é uma instrução para o navegador da web sobre qual versão do HTML da página é escrito dentro do documento.
A tag <html> informa ao navegador que este é um documento HTML. O atributo lang define o idioma do documento html.
A tag <head> serve para armazenar informações de uma página de seu site. Essas informações são invisíveis, ou seja, os usuários que estiverem navegando pelo seu website não verão o que existe na tag head.
A tag <meta> inclui os metadados que não podem ser definidos usando outro elemento HTML. Metadados incorporados ao código XHTML são, na verdade, estruturas de dados sobre os próprios dados, uma breve descrição do conteúdo da página, seu autor, data de criação, linguagem e outras informações relevantes. O atributo charset especifica o conjunto de caracteres de um documento HTML.
A tag <link> especifica as relações entre o documento atual e um recurso externo.
A <title> tag é necessária em todos os documentos HTML e define o título do documento. O elemento rel descreve a relação entre a corrente e o documento destino URI. valores múltiplos podem ser fornecidos, separados por um espaço. O atributo stylesheet Importa um estilo externo. O atributo href especifica o URL (endereço web) para um link.
A tag <body> define o corpo do documento. Lá é que estarão as informações visíveis para o usuário.