Criando uma página em html5 e css3 para um site otimizado por alexandre goya

Olá, sou Alexandre Goya, Consultor e Programador Webmaster, Especialista em SEO (Otimização de Sites) e SEM (Gerenciamento de Campanhas em mídias digitais como o Google),
Certificado Google Adwords Partners, Desenvolvo Sites Responsivos em HTML5 e CSS3, e implanto Blogs em WordPress, e Loja Virtual para E-commerce (Woocommerce e Interspire).

Se precisar vender seu produto ou serviço, e quiser ter ou reformular e otimizar seu site, me procure !

Saiba mais em: http://www.alexandregoya.com.br/

Nesta postagem, irei criar o esboço de uma página utilizando HTML5 e CSS3 para um SITE OTIMIZADO.

Primeiramente, vamos abrir o NOTEPAD (BLOCO de NOTAS) e salvar o arquivo como index.html utilizando codificação UTF-8.

Não esqueça de salvar este arquivo em uma nova pasta, com o nome do projeto o qual quer desenvolver, no meu caso, salvei a pasta como “SITE”.

Abra o arquivo “index.html” com o bloco de notas, e escreva o seguinte código:

<!doctype html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8″>

<title>título do seu site com no máximo 70 carácteres</title>

<meta name=”description” content=”descrição do que se fala em seu site, produtos, serviços, etc… com no máximo 160 caracteres” />

<meta name=”keywords” content=”palavra chave 1, palavra chave 2, palavra chave 3, até 10 palavras chave com no máximo 150 caracteres” />

</head>

<body>

<div>
<header>
<h1>Título do topo do site</h1>
<img src=”imagem-do-topo-do-site.jpg”
alt=”imagem do topo do site” />
<h2>Título secundário do topo do site</h2>
<nav>
<a href=”#”>Menu Principal do Site</a>
</nav>
</header>
</div>

<hr>

<div>
<section>
<div>
Conteúdo Principal do Site
</div>
</section>
</div>

<hr>

<div>
<aside>

<div>
Conteúdo Secundário do Site
</div>

<div>
<article>
Páginas, Postagens ou Artigos no Site
</article>
</div>

</aside>
</div>

<hr>

<div>
<footer>
<div>
Rodapé do Site
</div>
</footer>
</div>

</body>

</html>

Explicando o código acima:

O que definirá que sua página está sendo escrita em HTML5 é o <!doctype html>que posteriormente declara <html lang=”pt-br”> que significa que é um arquivo html com linguagem local para Português Brasileiro.

Dentro da <head> </head> é onde inserimos a parte inteligente e mais importante da programação do site, pois é nela que será inseridas as informações as quais os robôs de busca iram procurar para analisar posteriormente o conteúdo e a relatividade e relevância da pagina para resultar ao usuário de pesquisa.

A parte inteligente que será inserida mencionada acima são as TAGS
de título, descrição, e palavras chave para busca, e note que existe uma quantidade máxima de caracteres a serem inseridos em cada uma.

Logo abaixo, temos o corpo do site, dentro de <body> </body> será onde iremos inserir todo conteúdo do site,…

Temos algumas tags que nos ajudam a separar e dividir o site, são elas:
<header></header> que é sempre a cabeça do site;
<nav></nav> utilizado para informar que nele será montado o menu principal do site;
<section></section> que é onde inserimos o conteúdo principal do site dividindo-o por seções;
<aside><aside> muito utilizado para inserir conteúdos secundários relevantes ao conteúdo principal do site;
<article><article> utilizado para inserir conteúdos do tipo artigos, paginas ou postagens de blog interno ou externo;
<footer></footer> usado para informar que estamos fechando o rodapé da página;

Existem outras tags, como:
<p></p> para parágrafos;
<br> para quebrar linhas;
<ol></ol> listas ordenadas;
<ul></ul> listas não ordenadas;
<li></li> linha da lista;
<strong><strong> para evidenciar como um negrito <b></b>;
<em></em> enfatização como o itálico <i></i>;

Entre outros,…

Deixe uma resposta