{"id":100,"date":"2015-10-10T16:40:33","date_gmt":"2015-10-10T19:40:33","guid":{"rendered":"http:\/\/alexandregoya.com.br\/blog\/?p=100"},"modified":"2016-10-05T18:34:40","modified_gmt":"2016-10-05T21:34:40","slug":"criando-uma-pagina-em-html5-e-css3-para-um-site-otimizado-por-alexandre-goya","status":"publish","type":"post","link":"https:\/\/alexandregoya.com.br\/blog\/criando-uma-pagina-em-html5-e-css3-para-um-site-otimizado-por-alexandre-goya\/","title":{"rendered":"Criando uma p\u00e1gina em html5 e css3 para um site otimizado por alexandre goya"},"content":{"rendered":"

<\/a><\/p>\n

Ol\u00e1, sou Alexandre Goya, Consultor e Programador Webmaster, Especialista em SEO (Otimiza\u00e7\u00e3o de Sites) e SEM (Gerenciamento de Campanhas em m\u00eddias digitais como o Google),
\nCertificado Google Adwords Partners, Desenvolvo Sites Responsivos em HTML5 e CSS3, e implanto Blogs em WordPress, e Loja Virtual para E-commerce (Woocommerce e Interspire).<\/p>\n

Se precisar vender seu produto ou servi\u00e7o, e quiser ter ou reformular e otimizar seu site, me procure !<\/p>\n

Saiba mais em: http:\/\/www.alexandregoya.com.br\/<\/a><\/p>\n

Nesta postagem, irei criar o esbo\u00e7o de uma p\u00e1gina utilizando HTML5 e CSS3 para um SITE OTIMIZADO.<\/p>\n

Primeiramente, vamos abrir o NOTEPAD (BLOCO de NOTAS) e salvar o arquivo como index.html utilizando codifica\u00e7\u00e3o UTF-8.<\/p>\n

N\u00e3o esque\u00e7a 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”.<\/p>\n

Abra o arquivo “index.html” com o bloco de notas, e escreva o seguinte c\u00f3digo:<\/p>\n

<!doctype html><\/strong>
\n<html lang=”pt-br”><\/strong>
\n<head><\/strong>
\n<meta charset=”utf-8″><\/strong><\/p>\n

<title>t\u00edtulo do seu site com no m\u00e1ximo 70 car\u00e1cteres<\/title><\/strong><\/p>\n

<meta name=”description” content=”descri\u00e7\u00e3o do que se fala em seu site, produtos, servi\u00e7os, etc… com no m\u00e1ximo 160 caracteres” \/><\/strong><\/p>\n

<meta name=”keywords” content=”palavra chave 1, palavra chave 2, palavra chave 3, at\u00e9 10 palavras chave com no m\u00e1ximo 150 caracteres” \/><\/strong><\/p>\n

<\/head><\/strong><\/p>\n

<body><\/strong><\/p>\n

<div>
\n<header>
\n<h1>T\u00edtulo do topo do site<\/h1>
\n<img src=”imagem-do-topo-do-site.jpg”
\nalt=”imagem do topo do site” \/>
\n<h2>T\u00edtulo secund\u00e1rio do topo do site<\/h2>
\n<nav>
\n<a href=”#”>Menu Principal do Site<\/a>
\n<\/nav>
\n<\/header>
\n<\/div><\/p>\n

<hr><\/p>\n

<div>
\n<section>
\n<div>
\nConte\u00fado Principal do Site
\n<\/div>
\n<\/section>
\n<\/div><\/p>\n

<hr><\/p>\n

<div>
\n<aside><\/p>\n

<div>
\nConte\u00fado Secund\u00e1rio do Site
\n<\/div><\/p>\n

<div>
\n<article>
\nP\u00e1ginas, Postagens ou Artigos no Site
\n<\/article>
\n<\/div><\/p>\n

<\/aside>
\n<\/div><\/p>\n

<hr><\/p>\n

<div>
\n<footer>
\n<div>
\nRodap\u00e9 do Site
\n<\/div>
\n<\/footer>
\n<\/div><\/p>\n

<\/body><\/strong><\/p>\n

<\/html><\/strong><\/p>\n

Explicando o c\u00f3digo acima:<\/p>\n

O que definir\u00e1 que sua p\u00e1gina est\u00e1 sendo escrita em HTML5 \u00e9 o <!doctype html><\/strong>que posteriormente declara <html lang=”pt-br”><\/strong> que significa que \u00e9 um arquivo html com linguagem local para Portugu\u00eas Brasileiro.<\/p>\n

Dentro da <head> <\/head><\/strong> \u00e9 onde inserimos a parte inteligente e mais importante da programa\u00e7\u00e3o do site, pois \u00e9 nela que ser\u00e1 inseridas as informa\u00e7\u00f5es as quais os rob\u00f4s de busca iram procurar para analisar posteriormente o conte\u00fado e a relatividade e relev\u00e2ncia da pagina para resultar ao usu\u00e1rio de pesquisa.<\/p>\n

A parte inteligente que ser\u00e1 inserida mencionada acima s\u00e3o as TAGS
\nde t\u00edtulo, descri\u00e7\u00e3o, <\/strong>e palavras chave<\/strong> para busca, e note que existe uma quantidade m\u00e1xima de caracteres a serem inseridos em cada uma.<\/p>\n

Logo abaixo, temos o corpo do site, dentro de <body> <\/body><\/strong> ser\u00e1 onde iremos inserir todo conte\u00fado do site,…<\/p>\n

Temos algumas tags que nos ajudam a separar e dividir o site, s\u00e3o elas:
\n<header><\/header> que \u00e9 sempre a cabe\u00e7a do site;
\n<nav><\/nav> utilizado para informar que nele ser\u00e1 montado o menu principal do site;
\n<section><\/section> que \u00e9 onde inserimos o conte\u00fado principal do site dividindo-o por se\u00e7\u00f5es;
\n<aside><aside> muito utilizado para inserir conte\u00fados secund\u00e1rios relevantes ao conte\u00fado principal do site;
\n<article><article> utilizado para inserir conte\u00fados do tipo artigos, paginas ou postagens de blog interno ou externo;
\n<footer><\/footer> usado para informar que estamos fechando o rodap\u00e9 da p\u00e1gina;<\/p>\n

Existem outras tags, como:
\n<p><\/p> para par\u00e1grafos;
\n<br> para quebrar linhas;
\n<ol><\/ol> listas ordenadas;
\n<ul><\/ul> listas n\u00e3o ordenadas;
\n<li><\/li> linha da lista;
\n<strong><strong> para evidenciar como um negrito <b><\/b>;
\n<em><\/em> enfatiza\u00e7\u00e3o como o it\u00e1lico <i><\/i>;<\/p>\n

Entre outros,…<\/p>\n","protected":false},"excerpt":{"rendered":"

Ol\u00e1, sou Alexandre Goya, Consultor e Programador Webmaster, Especialista em SEO (Otimiza\u00e7\u00e3o de Sites) e SEM (Gerenciamento de Campanhas em m\u00eddias 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 … <\/p>\n

Continue lendo “Criando uma p\u00e1gina em html5 e css3 para um site otimizado por alexandre goya”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-internet"],"_links":{"self":[{"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":4,"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/posts\/100\/revisions\/279"}],"wp:attachment":[{"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandregoya.com.br\/blog\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}