iwtraining

Primeiros Passos no HTML5 Front-end

Primeiros Passos no HTML5

Introdução

Ao criar projetos para a web devemos utilizar uma metodologia específica de forma a deixar o projeto de acordo com o que temos de mais correto. Por mais incrível que pareça, ainda há quem produza o layout de uma página sem utilizar apenas CSS (é, utilizando as tão conhecidas tabelas) e principalmente usando de uma maneira não correta, e isso é muito prejudicial em diversos pontos como padronização, manutenção, economia de banda, dentre outras coisas.

O termo tableless pegou muito no Brasil para designar o desenvolvimento de projetos para a web que ficassem dentro dos padrões estabelecidos pela W3C, sem essas tabelas como ponto forte da diagramação, por exemplo, dentre outras coisas.

HTML5 e o CSS é algo muito amplo. Muito desta metodologia você aprenderá na prática, fazendo sites. Tem que colocar a mão na massa, não tem como ser diferente. Em muitos casos, você encontrará livros explicando de outra forma ou até mesmo negando o que estamos ensinando. Procure sempre fontes confiáveis, e ligue-se no que a W3C fornece.

Sobre a internet

Como funciona um servidor web

Servidores web são computadores conectados à internet o tempo todo que tem por função guardar as páginas do seu site e deixá-las sempre acessíveis a qualquer usuário que esteja navegando.

Como funciona um browser (navegador)

Os navegadores são programas que seguem (ou pelo menos deveriam seguir) padrões, de forma a exibir corretamente as páginas que estão localizadas em um servidor. Quanto você digita um endereço num browser, como por exemplo http://www.iwtraining.com.br, o browser envia uma requisição ao servidor onde esta página está hospedada e o servidor responde, enviando ela de volta. O navegador, por sua vez, exibe a página, interpretando o código HTML que nela está.

Exemplos de navegadores (browsers):

– Internet Explerer – http://windows.microsoft.com/pt-br/internet-explorer/download-ie
– Mozilla Firefox – http://www.mozilla.org/pt-BR/firefox/new/
– Opera – http://www.opera.com/pt-br
– Google Chrome – https://www.google.com/intl/pt-BR/chrome/browser/

Algumas sugestões de IDEs

– JetBRAINS Webstorm – http://www.jetbrains.com/webstorm/
– Adobe Dreamweaver – http://www.adobe.com/br/products/dreamweaver.html
– Brackets – http://brackets.io/

Padrões Web

O objetivo dos padrões web é dar a direção a desenvolvedores e fabricantes, de forma que o produto final seja apresentado conforme foi planejado. O termo “padrões” são, na realidade, as recomendações feitas pela W3C.

Semântica

O termo semântica, de uma maneira bem simples, define que seu código está marcado da melhor maneira possível. Existem diversas formas de conseguir um resultado no HTML, porém, melhores formas trarão maior benefícios ao seu projeto.

Existem elementos que foram criados para determinados fins. Para que nosso código esteja semanticamente correto, devemos utilizá-los da forma para a qual eles foram concebidos.

Guarde sempre com você que:

– O HTML define a estrutura do seu projeto. O que ele vai ter.
– O CSS define a aparência de cada elemento. Como ele vai se apresentar.
– O JavaScript adiciona interatividade, comportamento, ao seu projeto.

Estrutura básica do HTML5

O HTML é a chave para mostrar no navegador suas páginas. Mas como ele é estruturado? Vamos ver:

<!doctype html>
<html>
<head>
<title>iwtraining – treinamento HTML5 & CSS Layout</title>
</head>

<body>

<h1>Bem vindo ao site do curso de Tableless da iwtraining</h1>

<img src=”logo.jpg” alt=”logo da iwtraining”>

<p>Daqui a pouco tempo, este exercício estará
sendo utilizado por outros cursos de tableless
por ai. Claro! Pois, como sempre, somos os
primeiros a criar e todos já sabem
que somos os melhores.</p>

<h2>Fale conosco</h2>
<p>Ligue já para 85 3081.0550 e junte-se a nós.</p>

</body>
</html>

Visualize no navegador o arquivo “bem-vindo.html” e compare o design com o código acima.

html5-0001

Começando a entender as Tags

Tags básicas para criação de uma página:

<!doctype html>

Informa que o documento que estamos criando é do tipo HTML

<html> e </html>

Informam ao navegador que o conteúdo desta página é HTML

<head> e </head>

Informam ao navegador informações sobre sua página.

<title> e </title>

Uma das informações que ficam no <head>. Neste caso, informa o título de sua página.

<body> e </body>

Todo o conteúdo que será visualizado pelo navegador deve estar dentro desta tag.

Tags básicas de formatação:

<h1>

Usada para iniciar um título.

</h1>

Usada para finalizar um título.

<h2>

Usada para iniciar um sub-título.

</h2>

Usada para finalizar um sub- título.

<p>

Usada para iniciar um parágrafo.

</p>

Usada para finalizar um parágrafo.

Declaração do Idioma

A W3C diz que  “especificar o idioma do conteúdo é útil para diversos aplicativos, desde busca com diferenciação linguística até aplicar propriedades de exibição específicas para uma língua.”

De fato, muito ainda precisa ser feito até que este recurso esteja amplamente usado e difundido, mas devemos desde já utilizá-lo para que, de maneira mais rápida, ele se desenvolva e traga benefícios a todos os usuários.

A maneira mais fácil de se declarar o idioma de um documento HTML é utilizando o atributo lang, ligando-o ao elemento base <html>.

<html lang=”en”>

Esta atributo pode também ser utilizado em outros elementos, de maneira inline.

<p lang=”pt”>Outra maneira</p>

Codificação de Caracteres

Embora não seja obrigatório, recomendamos que seja definido o conjunto de caracteres da linguagem humanada que iremos utilizar em nosso site, utilizamos conforme mostrado abaixo.

<meta charset=”UTF-8”>

Adicionando imagem

Para adicionar imagens em sua página, você utiliza a tag <img>. Esta tag possui uma pequena diferença em relação as já estudadas. Você pode adicionar atributos nela. Atributos são informações adicionais a um elemento.

Vejamos que atributo utilizar na tag <img>:

<img src=”imagem.jpg”>

Para tornar este link mais acessível, adicione o atributo alt. O conteúdo dele aparecerá caso a imagem não seja carregada e facilitará a leitura pelos leitores de tela (programas que auxiliam cegos na leitura de páginas na internet).

<img src=”imagem.jpg” alt=”texto alternativo”>

Veja como ficou nosso código atualizado utilizando tudo o que foi estudado até agora:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>iwtraining – treinamento HTML5 & CSS Layout</title>
</head>

<body>

<h1>Bem vindo ao site do curso de Tableless da iwtraining</h1>

<img src=”logo.jpg” alt=”logo da iwtraining”>

<p>Daqui a pouco tempo, este exercício estará
sendo utilizado por outros cursos de tableless
por ai. Claro! Pois, como sempre, somos os
primeiros a criar e todos já sabem
que somos os melhores.</p>

<h2>Fale conosco</h2>
<p>Ligue já para 85 3081.0550 e junte-se a nós.</p>

</body>
</html>

Validando seu código

Vamos validar o exercício que fizemos anteriormente com os smurfs? Para isso, utilizaremos o validador da W3C no link http://validator.w3.org

html5-0002

Copie o código deste exercício e cole na terceira opção de validação e, em seguida, clique em “Check”.

  • This document was successfully checked as HTML5!

html5-0003

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário