{"id":1289620,"date":"2022-02-07T23:00:16","date_gmt":"2022-02-07T23:00:16","guid":{"rendered":"https:\/\/www.wacoca.com\/anime\/1289620\/"},"modified":"2022-02-07T23:00:16","modified_gmt":"2022-02-07T23:00:16","slug":"html-5-meu-primeiro-hello-world-em-html-aula-01","status":"publish","type":"post","link":"https:\/\/www.wacoca.com\/anime\/1289620\/","title":{"rendered":"HTML 5 &#8211; Meu primeiro Hello World em HTML (Aula 01)"},"content":{"rendered":"<p><iframe loading=\"lazy\"  width=\"580\" height=\"385\" src=\"https:\/\/www.youtube.com\/embed\/l-oWTFAv-i4\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>\n# HTML 5 &#8211; Aula 1 &#8211; Hello World em HTML<\/p>\n<p>Eu n\u00e3o vou explicar o que \u00e9 o HTML aqui pois eu j\u00e1 expliquei no meu v\u00eddeo sobre HTML em 5 minutos, o link est\u00e1 aqui no card, se voc\u00ea n\u00e3o viu vai la ver ele primeiro, esse video seria a aula 0.<\/p>\n<p>## Escolhendo o Editor<\/p>\n<p>Agora assumindo que voc\u00ea viu a aula zero vamos come\u00e7ar escolhendo o editor.<\/p>\n<p>Para voc\u00ea programar HTML o m\u00ednimo que voc\u00ea precisa \u00e9 um bloco de notas, nele voc\u00ea j\u00e1 pode criar seu html e abrir no navegador, porem existem diversos outros editores no mercado que facilitam muito a vida, entres temos:<\/p>\n<p>&#8211; Atom;<br \/>\n&#8211; Sublime;<br \/>\n&#8211; Notepad++;<br \/>\n&#8211; E meu preferido o VS Code, ou Visual Studio Code;<\/p>\n<p>Para esse curso iremos usar ele, pois como falei \u00e9 meu preferido, \u00e9 da Microsoft, \u00e9 leve, tem muitas extens\u00f5es e um excelente suporte da comunidade. mas fique \u00e0 vontade para usar qualquer outro de sua prefer\u00eancia.<\/p>\n<p>N\u00e3o vou ensinar instalar cada um deles pois \u00e9 algo super simples, s\u00f3 baixar do site e ir clicando no bot\u00e3o de avan\u00e7ar que est\u00e1 instalado. o link para download do VS code est\u00e1 aqui na descri\u00e7\u00e3o.<\/p>\n<p>===Instale o VS CODE===<br \/>\nhttps:\/\/code.visualstudio.com\/<\/p>\n<p>## Instalando extens\u00f5es<\/p>\n<p>Ainda falando do VSCode eu quero recomendar uma extens\u00e3o que facilita muito a vida na hora do desenvolvimento que \u00e9 a extens\u00e3o Live Server, pra instalar ela basta ir na aba de extens\u00f5es, pesquisar por live server e instalar. ela mostra um preview do seu c\u00f3digo na lateral e vc consegue ver como ta ficando conforme vai desenvolvendo, vc vai ver quando criarmos nosso primeiro arquivo.<\/p>\n<p>## Criando o primeiro arquivo HTML<\/p>\n<p>Agora vamos criar nosso primeiro arquivo HTML, para fazer isso voc\u00ea vai aqui na lateral, bot\u00e3o direito e new file ou novo arquivo, e voc\u00ea vai criar o arquivo index.html<\/p>\n<p>esse arquivo vai estar em branco e \u00e9 nele que vamos come\u00e7ar a inserir nosso c\u00f3digo e como citado na aula zero nosso c\u00f3digo HTML \u00e9 na verdade um conjunto de tags e a estrutura b\u00e1sica de uma p\u00e1gina HTML \u00e9 a seguinte.<\/p>\n<p>&#8211; `!DOCTYPE html` &#8211; Todo documento HTML deve come\u00e7ar com a declara\u00e7\u00e3o doctype, ela serve para informar o navegador sobre o tipo de documento que ele deve esperar e renderizar.<br \/>\n&#8211; `html lang=&#8221;pt-br&#8221;` &#8211; A tag HTML \u00e9 a raiz do documento, todas as tag deve estar dentro dessa tag raiz, exceto o doctype que n\u00e3o \u00e9 uma tag e sim uma declara\u00e7\u00e3o, e lembrando, a tag HTML tem abertura e fechamento, ou seja, ela tem que ser fechada no final do documento. al\u00e9m disso temos o atributo ou propriedade **lang** que indica para o navegador o idioma que o documento ta escrito, ent\u00e3o vamos trocar para pt-br.<br \/>\n&#8211; `head` a tag HEAD representa o cabe\u00e7alho, basicamente nesse cabe\u00e7alho ficam instru\u00e7\u00f5es que n\u00e3o s\u00e3o visiveis diretamente na sua p\u00e1gina HTML mas s\u00e3o importantes para os navegadores e motores de busca como o google e tamb\u00e9m \u00e9 aqui que iremos carregar nossos arquivos de css e Javascript, mas tamb\u00e9m teremos uma aula exclusiva sobre isso mais pra frente.<br \/>\n  &#8211; `title` &#8211; por enquanto vamos adicionar apenas a tag title dentro do head, essa tag \u00e9 respons\u00e1vel pelo t\u00edtulo do nosso website, porem n\u00e3o \u00e9 nenhum titulo vis\u00edvel na pagina em si, mas sim o titulo que vai ficar na aba do navegador.<br \/>\n&#8211; `body` &#8211; O body como o nome ja diz \u00e9 o corpo da p\u00e1gina, \u00e9 aqui que vamos inserir todas as nossas tags que ser\u00e3o visiveis no documentos, textos, imagens, links, tudo fica dentro da tag body.<br \/>\n  &#8211; Mas como o objetivo dessa aula \u00e9 apenas fazer o hello world, vamos simplesmente escrever o texto **Hello World** e como voc\u00ea pode ver no live serve ja apareceu, voc\u00ea tambem pode abrir esse arquivo no seu navegador e ver o mesmo resultado.<br \/>\n&#8211;  Al\u00e9m disso nos podemos inserir coment\u00e1rios no nosso documento, esse coment\u00e1rios s\u00e3o apenas visiveis para voc\u00ea ou outros desenvolvedores que forem mexer nessa p\u00e1gina e n\u00e3o s\u00e3o interpretados pelo navegados, para coment\u00e1r um c\u00f3digo voc\u00ea `maior + ! + &#8211;` e para fechar o coment\u00e1rio voc\u00ea usa `&#8211; + menor`, ou se voc\u00ea quiser usar o atalho do VS code para fazer isso, basta selecionar o conte\u00fado que quer comentar ou as linhas e apertar `ctrl + k + c` e para descomentar `ctrl + k + u`<\/p>\n<p>Al\u00e9m disso, para que voc\u00ea possa criar essa estrutura b\u00e1sica f\u00e1cil no VS code basta voc\u00ea botar um `!` e apertar enter que ele vai auto completar para voc\u00ea com essa estrutura b\u00e1sica, na verdade ele traz mais algumas coisas aqui como o `meta`, mas eu removi por enquanto pois teremos uma exclusiva falando sobre metadados.<\/p>\n<p>## Identa\u00e7\u00e3o<\/p>\n<p>Voc\u00ea deve ter reparado que a tag title e o hello world estao com espacos comparados as outras tags, isso nos chamamos de identa\u00e7\u00e3o, se seu documento HTML n\u00e3o estiver identado, o navegador ainda vai interpretar e gerar o c\u00f3digo corretamente, porem \u00e9 fortemente encorajado que voc\u00ea utilize a identa\u00e7\u00e3o para que seu codigo seja mais legivel e voc\u00ea saiba quem s\u00e3o as tags pai e filhos, por exemplo a tag title \u00e9 filha da tag head, agora parece simples e facild e deduzir isso, mas mais pra frente voc\u00eas vao ver como faz diferen\u00e7a ter o documento bem identado em um documento mais complexo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p># HTML 5 &#8211; Aula 1 &#8211; Hello World em HTML Eu n\u00e3o vou explicar o que \u00e9 o HTML aqui pois eu j\u00e1 expliqu<\/p>\n","protected":false},"author":4,"featured_media":1289621,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[752595,752600,752599,752601,752598,752596,752597,174860,676848,752590,752602,752589,676851,32459,174859,752591,205783,752594,752592,752588,752587,752593],"class_list":{"0":"post-1289620","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-japanese-anime","8":"tag-aprender-html","9":"tag-aula-de-html-css-e-javascript","10":"tag-aula-html-e-css","11":"tag-aula-html5","12":"tag-como-aprender-html","13":"tag-como-aprender-html-e-css","14":"tag-como-aprender-html-e-css-rapido","15":"tag-css","16":"tag-curso-html","17":"tag-curso-html5","18":"tag-desenvolvedor-front-end","19":"tag-desenvolvimento-web","20":"tag-frontend","21":"tag-hello-world","22":"tag-html","23":"tag-html-para-iniciantes","24":"tag-javascript","25":"tag-programacao-para-iniciante","26":"tag-programacao-web","27":"tag-refatorando","28":"tag-roger-santos","29":"tag-video-aula"},"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/1289620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/comments?post=1289620"}],"version-history":[{"count":0,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/1289620\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media\/1289621"}],"wp:attachment":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media?parent=1289620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/categories?post=1289620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/tags?post=1289620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}