HTML5 e CSS3

(7 minutos de leitura)


Em 1991, Tim Berners-Lee projetou o HTML para possibilitar o compartilhamento de documentos de forma mais prática e rápida. Com a criação da World Wide Web, o HTML se transformou em uma ferramenta utilizada para tudo e por todos.

Em consequência do crescimento do HTML surgiu o CSS, pois quanto mais se usava o HTML, mais os desenvolvedores usavam da criatividade para deixar as páginas bonitas e estilosas. Porém, toda essa parte estética era escrita no mesmo arquivo da parte estrutural, deixando-os gigantes e cada vez mais difíceis de entender. Sendo assim, em 1995, foi criado o CSS para dar conta da parte estética da página, de forma separada da estrutura, ou seja, do papel do HTML.


HTML

Seu nome tem origem do inglês Hyper Text Markup Language, que significa “linguagem de marcação de hipertexto”, ou seja, HTML não é considerado uma linguagem de programação.

Imagine uma página web, como essa do nosso blog que você está lendo agora. É possível notar que existem diversos elementos separados, tais como cabeçalho, título, parágrafos, imagens e muitos outros. Toda a organização desses elementos é feita pelo HTML. Ele é usado para criar toda a estrutura da página e, para isso, utiliza as famosas tags para sinalizar onde cada tipo de elemento será implementado.

Por exemplo, se você deseja inserir um parágrafo na tela, poderá utilizar a tag 
 para isso, colocando o texto desejado dentro do elemento, como mostrado abaixo:


Este é um parágrafo


Resumindo, podemos dizer que existem diversas tags de diversas estruturas para montar o esqueleto da página. 

O HTML5 é uma versão aprimorada do padrão HTML original (se quer saber mais sobre HTML5 leia esse outro artigo em nosso blog).

O HTML5 foi desenvolvido para atender as crescentes demandas apresentadas pelas necessidades atuais da mídia, cross-device e internet móvel. É uma excelente ferramenta para desenvolvimento de aplicativos móveis multiplataforma porque muitos dos seus recursos foram adaptados com a consideração de acesso em dispositivos de baixa potência, incluindo Tablets e Smartphones.

O HTML5 oferece uma interface comum para tornar os componentes de carregamento mais simples. Por exemplo, o HTML5 não requer o plugin Flash porque o elemento será executado sozinho.


HTML5

Como dito anteriormente, HTML5 é a versão mais recente da linguagem de marcação usada para criar sites. Embora seja muito parecido com as versões anteriores, ela tem alguns recursos novos que são uma super mão na roda. 

Abaixo seguem os principais benefícios do HTML5:

- O HTML5 tem reprodução de vídeo e áudio, nas versões anteriores, os desenvolvedores eram obrigados a usar programas de terceiros para reproduzir vídeos e áudios. Isso acabava gerando muitos erros. O HTML5 resolveu este problema com todo o suporte para vídeo e áudio.

- O HTML5 oferece armazenamento em cache offline, assim os visitantes podem carregar determinados elementos em uma página da Web sem uma conexão ativa da internet (mas para isso é preciso que ele tenha acessado o site antes). Se a conexão de internet de um visitante for baixa, ele ainda pode carregar os elementos principais do site.

Agora, como como é possível deixar esse parágrafo colorido? Ou mudar a fonte da letra? Aí entra a nossa próxima tecnologia: CSS.


CSS

Cascading Style Sheet, mais conhecido como CSS, é uma linguagem de estilos que, assim como o HTML, não é considerada uma linguagem de programação. Ela é responsável por separar a parte estrutural da aplicação (que ficará nas mãos do HTML) da parte estética. Para utilizar o CSS, usamos da seguinte sintaxe:


strong {
	color: blue;
}

h1 {
	font-style: italic;
}


O seletor será o elemento que iremos estilizar (pode ser uma tag, uma classe, um identificador, etc.), a propriedade é o que queremos alterar (color, font-size, width, etc) e o valor é a alteração a ser feita.

Ao usar uma tag HTML, como a do exemplo acima, pode-se estilizá-la assim para que os parágrafos fiquem azuis.


p {
    color: blue;
}


Uma coisa bem interessante do CSS é que ele pode ser escrito dentro de um arquivo HTML, utilizando o style como elemento