{"id":175,"date":"2024-09-18T09:49:40","date_gmt":"2024-09-18T12:49:40","guid":{"rendered":"https:\/\/dicasepromocoes.com.br\/web\/?page_id=175"},"modified":"2024-09-18T10:29:51","modified_gmt":"2024-09-18T13:29:51","slug":"curso-de-html-e-css-gratis-exemplos-basicos","status":"publish","type":"page","link":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/","title":{"rendered":"Curso de html e css gr\u00e1tis – Exemplos b\u00e1sicos"},"content":{"rendered":"\n
\n
\n

In\u00edcio<\/a>
Introdu\u00e7\u00e3o<\/a>
Editores<\/a>
B\u00e1sico<\/a>
Elementos<\/a>
Atributos<\/a>
Formata\u00e7\u00e3o<\/a>
T\u00edtulos<\/a>
Par\u00e1grafos<\/a>
Cita\u00e7\u00f5es<\/a>
Estilos<\/a><\/p>\n<\/div>\n\n\n\n

\n

Agora chegou o momento de por a m\u00e3o na massa!
\u00c9 importante para o seu sucesso mais r\u00e1pido que voc\u00ea fa\u00e7a e refa\u00e7a este exerc\u00edcio at\u00e9 que voc\u00ea o decore.
Chamamos esta configura\u00e7\u00e3o de esqueleto HTML, pois \u00e9 a base utilizada em qualquer p\u00e1gina a fazer.<\/p>\n\n\n\n

Abra o seu editor de texto, em nosso caso estamos usando o Notepad++ e digite a declara\u00e7\u00e3o de HTML:<\/p>\n\n\n\n

<!DOCTYPE html><\/p>\n\n\n\n

\"Declara\u00e7\u00e3o<\/figure>\n\n\n\n

Um documento HTML come\u00e7a com a tag <html> e termina com a tag <\/html>, ent\u00e3o digite logo abaixo da declara\u00e7\u00e3o.<\/p>\n\n\n\n

\"Come\u00e7ando<\/figure>\n\n\n\n

Vamos “Salvar como” novamente como index.html na pasta HTML que est\u00e1 em nossa \u00e1rea de trabalho.<\/p>\n\n\n\n

Se voc\u00ea estiver utilizando o Notepad++ v\u00e1 em Arquivo no canto superior esquerdo e selecione salvar como. Vai abrir uma nova tela onde voc\u00ea vai localizar do lado esquerdo a \u00c1rea de trabalho, clique para abrir a pasta HTML.<\/p>\n\n\n\n

\"localizando<\/figure>\n\n\n\n

Agora, na parte inferior, clique em Tipo. Vai abrir uma nova tela onde voc\u00ea deve escolher Hyper Text Markup Language (HTML)<\/p>\n\n\n\n

\"Selecionando<\/figure>\n\n\n\n

Agora, na parte inferior, clique em Tipo.<\/p>\n\n\n\n

\"Dando<\/figure>\n\n\n\n

Se voc\u00ea estiver nos acompanhando desde o in\u00edcio, voc\u00ea j\u00e1 ter\u00e1 nesta pasta um arquivo chamado index.html, basta clicar nele e aceitar para substituir.
Se voc\u00ea ainda n\u00e3o tiver este arquivo, basta ir em Nome e preencher como index.html e salvar.
Observe que na parte inferior, \u00e0 esquerda do bot\u00e3o salvar, temos “Acrescentar extens\u00e3o” que deve estar selecionado.<\/p>\n\n\n\n

Ap\u00f3s este processo, o seu arquivo aberto no Notepad++ ou no Geany do Linux estar\u00e1 colorido, desta forma fica mais f\u00e1cil visualizar o que estamos editando. Vamos em frente!<\/p>\n\n\n\n

Dentro do campo da p\u00e1gina <html> e <\/html> vamos inserir dois elementos:<\/p>\n\n\n\n

1 – <head><\/head> que como o pr\u00f3prio nome diz \u00e9 a cabe\u00e7a da p\u00e1gina, no entanto, os elementos contidos no head n\u00e3o s\u00e3o mostrados no navegador.
2 – <body><\/body> que quer dizer corpo, onde todos os elementos contidos s\u00e3o mostrados, exceto os coment\u00e1rios.<\/p>\n\n\n\n

Nosso editor vai ficar assim:<\/p>\n\n\n\n

\"Inserindo<\/figure>\n\n\n\n

\u00c9 muito importante que voc\u00ea v\u00e1 digitando item por item conforme for acompanhando a aula para fixar em sua mente, pois sempre iremos usar este esqueleto para qualquer p\u00e1gina a ser criada. Vamos em frente!!<\/p>\n\n\n\n

Agora, no campo head vamos inserir o campo TITLE, ou seja T\u00cdTULO em portugu\u00eas. Este T\u00edtulo \u00e9 o nome da p\u00e1gina que aparece na aba do navegador.<\/p>\n\n\n\n

\"Dando<\/figure>\n\n\n\n

No campo body vamos inserir os elementos Cabe\u00e7alho e Par\u00e1grafo, ou seja <h1> e <p>, veja abaixo:<\/p>\n\n\n\n

\"Inserindo<\/figure>\n\n\n\n

Agora vamos inserir as configura\u00e7\u00f5es de idioma para evitar que os textos apare\u00e7am de forma incorreta:<\/p>\n\n\n\n

\"Inserindo<\/figure>\n\n\n\n

Note como fica mais f\u00e1cil visualizar as a\u00e7\u00f5es que fizemos. Por favor, salve o arquivo como index.html e v\u00e1 na pasta HTML e clique nele para visualizar no seu navegador.
Observe na imagem abaixo como o “Nome da p\u00e1gina” aparece na aba do navegador e o T\u00edtulo e o Par\u00e1grafo s\u00e3o mostrados no corpo da p\u00e1gina.<\/p>\n\n\n\n

\"Amostragem<\/figure>\n\n\n\n

Agora vamos fazer mais um simples exerc\u00edcio de edi\u00e7\u00e3o de HTML.
Volte ao editor de texto e no <body> da p\u00e1gina escreva a hierarquia dos T\u00edtulos ou Cabe\u00e7alhos, que s\u00e3o 6: h1, h2, h3, h4, h5 e h6.
Digite conforme modelo abaixo, salve o index.html e abra em seu navegador para ver como fica.<\/p>\n\n\n\n

<h1>T\u00edtulo principal<\/h1>
<h2>T\u00edtulo secund\u00e1rio<\/h2>
<h3>T\u00edtulo secund\u00e1rio<\/h3>
<h4>T\u00edtulo secund\u00e1rio<\/h4>
<h5>T\u00edtulo secund\u00e1rio<\/h5>
<h6>T\u00edtulo secund\u00e1rio<\/h6><\/p>\n\n\n\n

\"Editando<\/figure>\n\n\n\n

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

Facinho n\u00e9?
Sugiro que volte ao editor de texto e apague tudo e depois refa\u00e7a todo o esqueleto da p\u00e1gina come\u00e7ando pela declara\u00e7\u00e3o HTML depois inserindo as tags <html>, <head>, <title> e <body>, sem esquecer de configurar o idioma e o UTF-8. Vamos precisar disto para a pr\u00f3xima aula.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

In\u00edcioIntrodu\u00e7\u00e3oEditoresB\u00e1sicoElementosAtributosFormata\u00e7\u00e3oT\u00edtulosPar\u00e1grafosCita\u00e7\u00f5esEstilos Agora chegou o momento de por a m\u00e3o na massa!\u00c9 importante para o seu sucesso mais r\u00e1pido que voc\u00ea fa\u00e7a e refa\u00e7a este exerc\u00edcio at\u00e9 que voc\u00ea o decore.Chamamos esta configura\u00e7\u00e3o de esqueleto HTML, pois \u00e9 a base utilizada em qualquer p\u00e1gina a fazer. Abra o seu editor de texto, em nosso caso estamos…
Leia mais<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-175","page","type-page","status-publish","hentry"],"yoast_head":"\nCurso de html e css gr\u00e1tis - Exemplos b\u00e1sicos - Dicas e Promo\u00e7\u00f5es<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Curso de html e css gr\u00e1tis - Exemplos b\u00e1sicos - Dicas e Promo\u00e7\u00f5es\" \/>\n<meta property=\"og:description\" content=\"In\u00edcioIntrodu\u00e7\u00e3oEditoresB\u00e1sicoElementosAtributosFormata\u00e7\u00e3oT\u00edtulosPar\u00e1grafosCita\u00e7\u00f5esEstilos Agora chegou o momento de por a m\u00e3o na massa!\u00c9 importante para o seu sucesso mais r\u00e1pido que voc\u00ea fa\u00e7a e refa\u00e7a este exerc\u00edcio at\u00e9 que voc\u00ea o decore.Chamamos esta configura\u00e7\u00e3o de esqueleto HTML, pois \u00e9 a base utilizada em qualquer p\u00e1gina a fazer. Abra o seu editor de texto, em nosso caso estamos… Leia mais\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/\" \/>\n<meta property=\"og:site_name\" content=\"Dicas e Promo\u00e7\u00f5es\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T13:29:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/\",\"name\":\"Curso de html e css gr\u00e1tis - Exemplos b\u00e1sicos - Dicas e Promo\u00e7\u00f5es\",\"isPartOf\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg\",\"datePublished\":\"2024-09-18T12:49:40+00:00\",\"dateModified\":\"2024-09-18T13:29:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#primaryimage\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg\",\"contentUrl\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg\",\"width\":702,\"height\":275,\"caption\":\"Declara\u00e7\u00e3o de documento HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/dicasepromocoes.com.br\/web\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Curso de html e css gr\u00e1tis – Exemplos b\u00e1sicos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#website\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/\",\"name\":\"Dicas e Promo\u00e7\u00f5es\",\"description\":\"Dicas e Promo\u00e7\u00f5es\",\"publisher\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dicasepromocoes.com.br\/web\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd\",\"name\":\"EMO\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\",\"url\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\",\"contentUrl\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\",\"width\":800,\"height\":800,\"caption\":\"EMO\"},\"logo\":{\"@id\":\"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg\"},\"sameAs\":[\"https:\/\/dicasepromocoes.com.br\/web\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Curso de html e css gr\u00e1tis - Exemplos b\u00e1sicos - Dicas e Promo\u00e7\u00f5es","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/","og_locale":"pt_BR","og_type":"article","og_title":"Curso de html e css gr\u00e1tis - Exemplos b\u00e1sicos - Dicas e Promo\u00e7\u00f5es","og_description":"In\u00edcioIntrodu\u00e7\u00e3oEditoresB\u00e1sicoElementosAtributosFormata\u00e7\u00e3oT\u00edtulosPar\u00e1grafosCita\u00e7\u00f5esEstilos Agora chegou o momento de por a m\u00e3o na massa!\u00c9 importante para o seu sucesso mais r\u00e1pido que voc\u00ea fa\u00e7a e refa\u00e7a este exerc\u00edcio at\u00e9 que voc\u00ea o decore.Chamamos esta configura\u00e7\u00e3o de esqueleto HTML, pois \u00e9 a base utilizada em qualquer p\u00e1gina a fazer. Abra o seu editor de texto, em nosso caso estamos… Leia mais","og_url":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/","og_site_name":"Dicas e Promo\u00e7\u00f5es","article_modified_time":"2024-09-18T13:29:51+00:00","og_image":[{"url":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/","url":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/","name":"Curso de html e css gr\u00e1tis - Exemplos b\u00e1sicos - Dicas e Promo\u00e7\u00f5es","isPartOf":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#primaryimage"},"image":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#primaryimage"},"thumbnailUrl":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg","datePublished":"2024-09-18T12:49:40+00:00","dateModified":"2024-09-18T13:29:51+00:00","breadcrumb":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#primaryimage","url":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg","contentUrl":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/curso-html\/editando-pagina1.jpg","width":702,"height":275,"caption":"Declara\u00e7\u00e3o de documento HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/dicasepromocoes.com.br\/web\/curso-de-html-e-css-gratis-exemplos-basicos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/dicasepromocoes.com.br\/web\/"},{"@type":"ListItem","position":2,"name":"Curso de html e css gr\u00e1tis – Exemplos b\u00e1sicos"}]},{"@type":"WebSite","@id":"https:\/\/dicasepromocoes.com.br\/web\/#website","url":"https:\/\/dicasepromocoes.com.br\/web\/","name":"Dicas e Promo\u00e7\u00f5es","description":"Dicas e Promo\u00e7\u00f5es","publisher":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dicasepromocoes.com.br\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":["Person","Organization"],"@id":"https:\/\/dicasepromocoes.com.br\/web\/#\/schema\/person\/12374dada2e436caa0c456a0a91e27cd","name":"EMO","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg","url":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg","contentUrl":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg","width":800,"height":800,"caption":"EMO"},"logo":{"@id":"https:\/\/dicasepromocoes.com.br\/web\/wp-content\/uploads\/2024\/06\/marketing\/logo-dicas-promo.jpg"},"sameAs":["https:\/\/dicasepromocoes.com.br\/web"]}]}},"_links":{"self":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":23,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/pages\/175\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/dicasepromocoes.com.br\/web\/wp-json\/wp\/v2\/media?parent=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}