Criando seu primeiro website<\/p>\n
Vamos come\u00e7ar com algo simples. Que tal uma p\u00e1gina que diga: “Hurrah! Esta \u00e9 a minha primeira p\u00e1gina web.” Continue e voc\u00ea ver\u00e1 como isto \u00e9 simples de fazer.<\/p>\n
HTML \u00e9 simples e l\u00f3gico. O navegador l\u00ea HTML de modo id\u00eantico ao que voc\u00ea l\u00ea um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na p\u00e1gina e termina com a \u00faltima coisa a aparecer.<\/p>\n
A primeira coisa a fazer \u00e9 dizer ao navegador que voc\u00ea vai “falar” com ele na linguagem HTML. Isto \u00e9 feito com a tag (nenhuma novidade nisto). Ent\u00e3o, antes de mais nada digite “” na primeira linha do documento, no Notepad.<\/p>\n
Como sabemos das li\u00e7\u00f5es anteriores, \u00e9 uma tag de abertura e deve ser fechada com a tag de fechamento quando voc\u00ea acabar de digitar seu documento HTML. Para termos certeza que n\u00e3o iremos esquecer de fechar a tag HTML, fa\u00e7a isso agora mesmo, digitando “” localizada a algumas linhas abaixo, assim voc\u00ea ir\u00e1 escrever seu documento entre as tags digitadas e .<\/p>\n
A pr\u00f3xima coisa que o documento precisa \u00e9 um “head” (cabe\u00e7a), que fornece informa\u00e7\u00f5es sobre o documento e um “body” (corpo), que abriga o conte\u00fado do documento. Como HTML n\u00e3o seria nada se n\u00e3o fosse l\u00f3gico, a “cabe\u00e7a” ( e ) fica em cima do “corpo” ( e ).<\/p>\n
Seu documento agora est\u00e1 como mostrado abaixo:<\/p>\n
Notar como estruturamos o c\u00f3digo em linhas diferentes (usar a tecla Enter para pular para pr\u00f3xima linha) e tamb\u00e9m a indenta\u00e7\u00e3o (recuos) do c\u00f3digo (usar a tecla Tab para indentar). A pr\u00edncipio n\u00e3o faz qualquer diferen\u00e7a a maneira como voc\u00ea estrutura (linhas e recuos na digita\u00e7\u00e3o) seu documento HTML. Mas um c\u00f3digo bem estruturado \u00e9 mais f\u00e1cil de ler e entender, \u00e9 altamente recomendado que voc\u00ea adote uma estrutura clara e n\u00edtida para seu HTML, usando linhas e indenta\u00e7\u00e3o (recuos), como mostrado no exemplo acima.<\/p>\n Se o seu documento est\u00e1 como o mostrado acima, voc\u00ea construiu sua primeira p\u00e1gina web – uma p\u00e1gina particularmente chata e provalvelmente nada parecido com o que voc\u00ea sonhou fazer quando come\u00e7ou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que voc\u00ea fez ser\u00e1 um template base para seus futuros documentos HTML.<\/p>\n At\u00e9 aqui tudo bem, mas como colocar conte\u00fado no meu website?<\/p>\n Como voc\u00ea j\u00e1 aprendeu, seu documento HTML \u00e9 composto de duas partes: um head e um body. Na se\u00e7\u00e3o head voc\u00ea escreve informa\u00e7\u00f5es sobre a p\u00e1gina e na se\u00e7\u00e3o body voc\u00ea coloca as informa\u00e7\u00f5es que constituem a p\u00e1gina.<\/p>\n Por exemplo, para dar um t\u00edtulo ao documento, t\u00edtulo este que apare\u00e7a no topo da barra do navegador voc\u00ea dever\u00e1 usar a se\u00e7\u00e3o “head”. A tag para acresentar um t\u00edtulo \u00e9 <title>:<\/p>\n <title>TURBOSITE<\/title><\/p>\n Notar que o t\u00edtulo n\u00e3o aparece na p\u00e1gina propriamente dita. Tudo que voc\u00ea quer que apare\u00e7a na p\u00e1gina \u00e9 conte\u00fado e dever\u00e1 ser colocado entre as tags “body”.<\/p>\n Conforme combinamos, queremos uma p\u00e1gina dizendo, “Hurrah! Esta \u00e9 a minha primeira p\u00e1gina web.” Este \u00e9 o texto que queremos comunicar e ele dever\u00e1 ser colocado na se\u00e7\u00e3o body. Ent\u00e3o digite na se\u00e7\u00e3o body o seguinte:<\/p>\n <p>Hurrah! Esta \u00e9 a minha primeira p\u00e1gina web.<\/p><\/p>\n A letra p na tag<\/p>\n \u00e9 a abreviatura para “paragraph” (par\u00e1grafo) que \u00e9 exatamente o que o texto \u00e9 – um texto par\u00e1grafo.<\/p>\n Seu documento HTML agora est\u00e1 como mostrado a seguir:<\/p>\n <html> Pronto! Voc\u00ea acaba de construir seu primeiro website!<\/p>\n Agora basta que voc\u00ea salve seu trabalho no HD e depois visualize no navegador:<\/p>\n No Notepad v\u00e1 ao menu “Arquivo” no topo da janela e escolha a op\u00e7\u00e3o “Salvar como…”. Ap\u00f3s salvar o documento, abra a pasta e clique 2x sobre o documento para abri-lo e ver como ficou no navegador!<\/p>\n","protected":false},"excerpt":{"rendered":" HTML – PARTE 4<html>
\n <\/span><head>
\n <\/span><\/head>
\n <\/span><body>
\n <\/span><\/body>
\n<\/html><\/code><\/p>\n
\n<head>
\n<title>Minha primeira p\u00e1gina web<\/title>
\n<\/head>
\n<body>
\n<p>Hurrah! Esta \u00e9 a minha primeira p\u00e1gina web.<\/p>
\n<\/body>
\n<\/html><\/p>\n
\nEscolha “Todos os arquivos” no box “Salvar como tipo”. Isto \u00e9 muito importante – caso voc\u00ea n\u00e3o fa\u00e7a isto, o arquivo ser\u00e1 salvo como texto e n\u00e3o como documento HTML.
\nSalve seu documento com o nome “page1.htm” (a extens\u00e3o “.htm” indica que se trata de um documento HTML. A extens\u00e3o “.html” d\u00e1 o mesmo resultado. Eu sempre uso “.htm”, mas voc\u00ea pode escolher a que voc\u00ea preferir .htm ou .html). Voc\u00ea pode salvar o documento onde voc\u00ea quiser no seu HD – esteja certo de salvar em um lugar que depois voc\u00ea possa achar com facilidade.<\/p>\n
\nCriando seu primeiro website<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[119,140,331,583,622,660],"class_list":["post-1937","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-como-fazer-sites","tag-construcao-de-sites","tag-html","tag-site","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1937"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1937\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}