HTML & CSS para iniciantes

HTML & CSS para iniciantes (Parte 01): Um primeiro olhar sobre HTML, CSS e afins.

Todos os vídeos do tutorial HTML & CSS para iniciantes

A Linguagem de Marcação de Hipertexto é a linguagem principal da WWW. A primeira versão desta linguagem foi publicada em 1992. Desde então, o HTML passou por várias modificações e evoluções e agora chegou à versão 5. (Embora a versão 5 ainda não tenha sido oficialmente adotada como padrão, já é bastante bem suportada nos navegadores atuais).

O HTML é uma linguagem de marcação que permite estruturar conteúdo. A formatação do conteúdo é de responsabilidade das folhas de estilo. Mais sobre elas a seguir.

Responsável pelo desenvolvimento contínuo do HTML está o World Wide Web Consortium (W3C).

HTML & CSS para iniciantes (Parte 01): Um primeiro olhar sobre HTML, CSS e afins.

É recomendável ficar de olho regularmente no site do W3C para se manter atualizado sobre os desenvolvimentos atuais na área da web.

Ao lidar com o HTML, uma pergunta crucial é: Qual versão devo usar? É claro que uma linguagem como o HTML é continuamente atualizada. Novos elementos são adicionados e os antigos são removidos.

Aqui estão as versões mais importantes da linguagem HTML ou marcos:

• HTML (novembro de 1992): Essa foi a primeira versão. O foco estava exclusivamente em documentos de texto.

• HTML 2.0 (novembro de 1995): Agora existem elementos para imagens e formulários.

• HTML 4.0 (dezembro de 1997): Folhas de estilo, frames e scripts foram introduzidos.

• XHTML 1.0 (janeiro de 2000): Esta é uma reformulação do HTML 4.0 usando XML.

• HTML5 (abril de 2009): Ainda é um projeto em andamento, não um padrão aprovado.

O foco nestes próximos tutoriais será o HTML5. Pois com o HTML5, finalmente haverá uma revolução no mundo do HTML. De fato, a nova especificação oferece várias inovações interessantes, como formulários significativamente mais fáceis de usar, barras de progresso, elementos de desenho e uma estrutura de documento aprimorada. Além disso, com o novo padrão, vídeos podem ser incorporados em páginas da web sem a necessidade de plug-ins e há uma interface de arrastar e soltar.

A primeira proposta de HTML5 foi publicada em 2004 pelo Web Hypertext Application Technology Working Group (WHATWG) sob o nome Web Applications 1.0.

HTML & CSS para iniciantes (Parte 01): Um primeiro olhar sobre HTML, CSS e outros.



Até o momento, o HTML5 ainda não foi oficialmente publicado como padrão, no entanto, os fabricantes de navegadores já incorporaram várias funcionalidades do HTML5 em seus produtos. Isso não é surpreendente, uma vez que a WHATWG é uma aliança formada pelos fabricantes de navegadores Apple, Mozilla e Opera. A formação da WHATWG ocorreu como uma reação direta à lenta evolução dos padrões da web por parte do World Wide Web Consortium (W3C).

Neste ponto, pode-se questionar o que motivou os fabricantes de navegadores a desenvolver um padrão HTML próprio. Afinal, até então, o desenvolvimento do HTML estava firmemente nas mãos do W3C. Do ponto de vista dos fabricantes de navegadores, os problemas começaram quando o W3C converteu o HTML 4.01 em XHTML 1 sem correções substanciais de conteúdo. Originalmente, o W3C pretendia estabelecer o XHTML 1 como um primeiro passo em direção a uma web baseada em XML. No final do desenvolvimento, o XHTML 2 deveria ser concluído. Foi precisamente esse foco do W3C no XML que incomodou os fabricantes de navegadores. A abordagem XML, do ponto de vista deles, é impraticável e não reflete os desejos reais dos usuários. (O que o W3C vê de forma diferente).

Desde 2007, o W3C e o WHATWG vêm colaborando em uma especificação HTML5 ou trabalhando nela. As atualizações mais recentes sobre o HTML5 podem ser encontradas em http://www.w3.org/TR/html5/.

HTML & CSS para iniciantes (Parte 01): Uma primeira olhada em HTML, CSS & Co.



O foco nos próximos tutoriais permanecerá no HTML5.

CSS para Formatação

Você provavelmente já trabalhou com modelos de documentos no Word ou em outros programas de processamento de texto. Assim, por exemplo, ao selecionar uma linha, você pode escolher um estilo de formatação.

HTML & CSS para iniciantes (Parte 01): Um primeiro olhar sobre HTML, CSS & cia.



Dependendo do tipo de formatação definida no modelo de documento para esse estilo de formatação, o título será exibido. Ao trocar o modelo de documento, o aspecto do título também muda.

O que o Word tem a ver com o HTML? Também existem estilos de formatação para documentos HTML. Esses estilos podem ser definidos usando CSS (Cascading Stylesheets). Com o CSS, é possível, por exemplo, estabelecer que títulos principais (h1) devem ser exibidos com 22 pixels de altura em uma fonte Arial verde.

As folhas de estilo permitem a separação estrita entre estrutura e layout. A estrutura dos documentos é definida pelo HTML, enquanto o visual é determinado pelo CSS.

O Que Você Precisa

Nos próximos tutoriais, você aprenderá HTML e CSS passo a passo. Para criar seus próprios sites com base em HTML e CSS, você não precisa de um software complexo. No caso mais simples, você pode usar - se estiver trabalhando no Windows - o editor padrão.

Embora não seja particularmente confortável, é suficiente para o início. Se prefere algo mais confortável, é melhor procurar por um editor HTML "real". Um dos clássicos aqui é, naturalmente, o Dreamweaver.

No entanto, este editor não é gratuito.

HTML & CSS para iniciantes (Parte 01): Um primeiro olhar sobre HTML, CSS & Co.

Para uso pessoal, no entanto, o phase5 é gratuito (http://www.phase5.info/). Portanto, se desejarem utilizar o editor para fins pessoais, terão em mãos uma ferramenta boa e gratuita.

HTML & CSS para iniciantes (Parte 01): Um primeiro olhar sobre HTML, CSS & outros.



Além de um editor, também é importante ter instalados os navegadores mais importantes para testar o site. Na verdade, os navegadores interpretam o HTML e o CSS de maneira um tanto peculiar de vez em quando. Nesse sentido, é obrigatório testar minuciosamente as páginas em diferentes navegadores. Deveriam ter instalados pelo menos o Internet Explorer, Google Chrome e Mozilla Firefox. Idealmente, também devem testar a página no navegador Opera e em um tablet/smartphone.