O que é um arquivo HTML?
HTML quer dizer Hyper Text Markup Lenguage.
Um documento HTML é composto por tags.
As tags do HTML dizem para o web browser o que fazer.
Um documento HTML pode ser criado usando um editor de textos qualquer.

Vamos tentar?
Se você está usando Windows, abrá o Notepad [ou o editor de sua preferência]. Se você está usando Mac, abrá o SimplesText. No OSX abrá o TextEdit e mude as seguintes preferências: Abrá o menu "Format" e selecione "Plain Text" ao invéz do "Rich Text". Então abrá  a janela "Preferences" embaixo do menu "Text Edit"  e selecione "Ignore rich text commands in HTML files". É possível que seu código HTML não irá funcionar caso isso não sejá feito.

Ensira o seguinte código:


Título da página.


Está é minha primeira página. Este texto está em negrito!




Salve como "oficina1.htm"
Abrá seu Internet explorer [ou o de sua preferência]. Selecione "Open" (ou "Open Page") no menu File do seu navegador. Uma caixa de dialogo aparecerá. Selecione "Browse" (ou "Choose File") e procure o codumento HTML que criamos à pouco ("oficina1.htm") - selecione-o e clique em "Open". Procure por um endereço na caixa de dialogo, por exemplo "C:MyDocumentsoficina1.htm". Clique em OK e seu navegador deverá exibir a página.


Explicando o exemplo
A primeira tag do seu documento é . Essa tag diz ao seu navegador que está sendo inicilizado um documento HTML. A última tag do seu documento é . Ela fala para o seu navegador que é o fim do documento HTML. O texto entre a tag e é a informação do cabeçalho. As informações do cabeçalho não são mostradas na janela do navegador. O texto entre as tags </strong> são o título da sua página.  O título escrito é mostrado no título do seu navegador. O texto entre as tags <strong><body></strong> são os textos/outros que são mostrados pelo seu navegador. O texto entre a tag <strong><b></strong> e <strong></b></strong> são textos negritos.<br /> <br /> <br /> <strong>Extenção HTM ou HTML?</strong><br /> Quando você salva um documento HTML, você pode usar a extenção .htm ou a .html. Nós temos usado a extenção .html nos nossos exemplos. Este é um hábito ruim herdado pelo passado quando geralmente eram usados programas que só permitiam três letras na extenção.<br /> Com os novos programas nós achamos melhor umsar a extenção .html.<br /> <br /> <br /> <strong>Usando editores de HTML.</strong><br /> Você pode editar facilmente arquivos HTML usando um editor WYSIWYG (O que você vê é o que você tem)  como FrontPage ou Dreamwaver, em vez de escrever seus codigos em um editor de texto<br /> Porém, se você quer ser um grande Web Devoloper, nós recomendamos que use um editor comum [Bloco de notas, Notepad] para aprender HTML.<br /> ----<br /> <br /> Todos os créditos do conteúdo são do www.w3schools.com.<br /> Tradução: Luciano Infanti.<br /> Agradecimentos: Guido.</p></p><script src="https://www.oficinadanet.com.br/template/m3/plugins/prism/prism.js"></script> <link rel="stylesheet" type="text/css" href="https://www.oficinadanet.com.br/template/m3/plugins/prism/prism.css"> </div> </div> <div class="share-bottom"> <div class="share-vertical fixed"> <span>SHARE</span> <ul> <li> <span onclick="clearSocial(280,'facebook=1');window.open('https://www.facebook.com/sharer/sharer.php?app_id=209309632417494&u=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2F382%2Fcurso_html_-_introducao%3Futm_source%3Dfacebook%26utm_medium%3DShareButton%26utm_campaign%3DRedesSociais','','width=600,height=400')" title="Compartilhe no Facebook" class="facebook facebook-sm share-btn icone icone-sm"> </span></li> <li> <span onclick="clearSocial(280,'twitter=1');window.open('https://twitter.com/intent/tweet?text=Curso+HTML+-+Introdu%C3%A7%C3%A3o&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2F382%2Fcurso_html_-_introducao%3Futm_source%3Dtwitter%26utm_medium%3DShareButton%26utm_campaign%3DRedesSociais&via=oficinadanet','','width=600,height=400')" title="Compartilhe no Twitter" class="twitter twitter-sm share-btn icone icone-sm"> </span></li> <li> <span onclick="clearSocial(280,'linkedin=1');window.open('https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2F382%2Fcurso_html_-_introducao%3Futm_source%3Dlinkedin%26utm_medium%3DShareButton%26utm_campaign%3DRedesSociais&summary=Aprenda+aqui+com+o+melhor+conte%C3%BAdo+da+internet+traduzido+da+W3SCHOOLS.COM.&title=Curso+HTML+-+Introdu%C3%A7%C3%A3o&source=oficinadanet','','width=600,height=400')" title="Compartilhe no Linkedin" class="linkedin linkedin-sm share-btn icone icone-sm"> </span></li> <li> <span onclick="clearSocial(280,'whatsapp=1');window.open('https://api.whatsapp.com/send?text=Curso HTML - Introdução - https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2F382%2Fcurso_html_-_introducao%3Futm_source%3Dwhatsapp%26utm_medium%3DShareButton%26utm_campaign%3DRedesSociais')" title="Compartilhe no Whatsapp" class="whatsapp whatsapp-sm share-btn icone icone-sm"> </span></li> <li> <span onclick="clearSocial(280,'telegram=1');window.open('https://telegram.me/share/url?url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2F382%2Fcurso_html_-_introducao%3Futm_source%3Dtelegram%26utm_medium%3DShareButton%26utm_campaign%3DRedesSociais&text=Curso+HTML+-+Introdu%C3%A7%C3%A3o');" title="Compartilhe no Telegram" class="telegram telegram-sm share-btn icone icone-sm"> </span></li> </ul> </div> <ul class="nav-tag my-3"><li><a class="tg-nav-bar simple" href="https://www.oficinadanet.com.br/html" >HTML</a></li> </ul> </div> <div class="row text-center btn-social bg-social" > <div class="col-md-12 mb-3" ><a target="_blank" rel="nofollow noreferrer noopener" class="d-block button button-primary telegram" href="https://t.me/oficinadanetofertas" >Receba ofertas de tecnologia no Telegram</a></div> </div> </div><script>try { _402_Show(); } catch(e) {}</script> <div class="col-12 mt-3 rel-relacionado"> <h4 class="section-title mt-4 mb-4" >Conteúdo relacionado </h4> <div class="row relacionado lst-main com_img" > <div class="list-item col-12 col-md-4 mb-3 mb-md-4" ><a class="image round-5 tg-rel-bottom" href="https://www.oficinadanet.com.br/roda-liso/39107-samsung-galaxy-z-flip3" ><img srcset="https://www.oficinadanet.com.br/imagens/post/39107/143x80x262-galaxy-zflip3-roda-liso_x_1400x788.jpg.pagespeed.ic.ff42816ef8.jpg 143w, https://www.oficinadanet.com.br/imagens/post/39107/286x160x262-galaxy-zflip3-roda-liso_x_1400x788.jpg.pagespeed.ic.ff42816ef8.jpg 2x, https://www.oficinadanet.com.br/imagens/post/39107/221x124x262-galaxy-zflip3-roda-liso_x_1400x788.jpg.pagespeed.ic.ff42816ef8.jpg 221w"sizes="(min-width: 768px) 221px, (min-width: 576px) 143px, 143px" width="143" height="80" class="img round-5 tg-rel-bottom" src="https://www.oficinadanet.com.br/imagens/post/39107/143x80x262-galaxy-zflip3-roda-liso_x_1400x788.jpg.pagespeed.ic.ff42816ef8.jpg" alt="O Galaxy Z Flip3 é bonito, mas ele desempenha bem nos games? - Roda Liso" title="O Galaxy Z Flip3 é bonito, mas ele desempenha bem nos games? - Roda Liso" /></a><div class="info info" ><span class="categoria cartola" ><a href="https://www.oficinadanet.com.br/roda-liso">Roda Liso</a></span><h4 ><a class="title tg-rel-bottom" href="https://www.oficinadanet.com.br/roda-liso/39107-samsung-galaxy-z-flip3" >O Galaxy Z Flip3 é bonito, mas ele desempenha bem nos games? - Roda Liso</a></h4><p class="description " >Hoje testamos o tão falado Galaxy Z Flip3, xodó da Samsung. Será que esse smartphone mantém o desempenho em jogos pesados?</p></div> </div> <div class="list-item col-12 col-md-4 mb-3 mb-md-4" ><a class="image round-5 tg-rel-bottom" href="https://www.oficinadanet.com.br/artigo/81/como_criar_fontes_ttf_utilizando_o_coreldraw_-_parte_01" ><img srcset="https://www.oficinadanet.com.br/template/imagem/143x80xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg 143w, https://www.oficinadanet.com.br/template/imagem/286x160xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg 2x, https://www.oficinadanet.com.br/template/imagem/221x124xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg 221w"sizes="(min-width: 768px) 221px, (min-width: 576px) 143px, 143px" width="143" height="80" class="img round-5 tg-rel-bottom" src="https://www.oficinadanet.com.br/template/imagem/143x80xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg" alt="Como criar fontes TTF utilizando o CorelDraw - Parte 01" title="Como criar fontes TTF utilizando o CorelDraw - Parte 01" /></a><div class="info info" ><span class="categoria cartola" ><a href="https://www.oficinadanet.com.br/softwares">Softwares</a></span><h4 ><a class="title tg-rel-bottom" href="https://www.oficinadanet.com.br/artigo/81/como_criar_fontes_ttf_utilizando_o_coreldraw_-_parte_01" >Como criar fontes TTF utilizando o CorelDraw - Parte 01</a></h4><p class="description " >Aprenderemos a criar nossas próprias fontes True Type Font (TTF), conhecidas como “fontes verdadeiras”, faremos isso no CorelDraw, pois nos permite utilizar imagens variadas, como gravuras de livros e desenhos que podem ser scaneados ou vetores do próprio Corel.</p></div> </div> <div class="list-item col-12 col-md-4 mb-3 mb-md-4" ><a class="image round-5 tg-rel-bottom" href="https://www.oficinadanet.com.br/artigo/243/intranet_-_conceito_e_objetivos" ><img srcset="https://www.oficinadanet.com.br/template/imagem/143x80xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg 143w, https://www.oficinadanet.com.br/template/imagem/286x160xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg 2x, https://www.oficinadanet.com.br/template/imagem/221x124xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg 221w"sizes="(min-width: 768px) 221px, (min-width: 576px) 143px, 143px" width="143" height="80" class="img round-5 tg-rel-bottom" src="https://www.oficinadanet.com.br/template/imagem/143x80xpadrao.jpg.pagespeed.ic.6a9ca288af.jpg" alt="Intranet - Conceito e Objetivos" title="Intranet - Conceito e Objetivos" /></a><div class="info info" ><span class="categoria cartola" ><a href="https://www.oficinadanet.com.br/negocios">Negócios</a></span><h4 ><a class="title tg-rel-bottom" href="https://www.oficinadanet.com.br/artigo/243/intranet_-_conceito_e_objetivos" >Intranet - Conceito e Objetivos</a></h4><p class="description " >Este artigo irá fazer uma breve descrição do que é uma intranet e seus principais objetivos.</p></div> </div> </div> </div> </div> </div> <aside class="post-sidebar"> <div class="col-12 mt-5 mt-xl-0"> <h4 class="section-title mb-3" >Mais lidas no Oficina da Net </h4> <div class="row sidebar_lista lst-main com_pos"> <div class="list-item col-12"> <div class="out"> <span class="posicao">1</span> <div class="info pos"> <span class="categoria cartola"><a href="https://www.oficinadanet.com.br/netflix2021">Lançamentos Netflix 2021</a></span> <a class="title tg-mais-lida" href="https://www.oficinadanet.com.br/netflix2021/39050-35-lancamentos-semana-netflix-28-11-a-04-12">Lançamentos Netflix da semana (28/11 a 04/12)</a> </div> </div> </div> <div class="list-item col-12"> <div class="out"> <span class="posicao">2</span> <div class="info pos"> <span class="categoria cartola"><a href="https://www.oficinadanet.com.br/bancos-digitais">Bancos Digitais</a></span> <a class="title tg-mais-lida" href="https://www.oficinadanet.com.br/bancos-digitais/39118-pix-banido-sao-paulo">PIX suspenso em São Paulo? É o que o Projeto de Lei 583/2021 propõe, entenda</a> </div> </div> </div> <div class="list-item col-12"> <div class="out"> <span class="posicao">3</span> <div class="info pos"> <span class="categoria cartola"><a href="https://www.oficinadanet.com.br/netflix2021">Lançamentos Netflix 2021</a></span> <a class="title tg-mais-lida" href="https://www.oficinadanet.com.br/netflix2021/39065-lancamentos-netflix-confirmados-dezembro-2021">Os lançamentos da Netflix em dezembro de 2021</a> </div> </div> </div> <div class="list-item col-12"> <div class="out"> <span class="posicao">4</span> <div class="info pos"> <span class="categoria cartola"><a href="https://www.oficinadanet.com.br/bancos-digitais">Bancos Digitais</a></span> <a class="title tg-mais-lida" href="https://www.oficinadanet.com.br/bancos-digitais/39092-bradesco-fora-do-ar-terca-feira-app-caixa-24h">Bradesco fica fora do ar nesta terça-feira (30) no app e caixa 24h</a> </div> </div> </div> <div class="list-item col-12"> <div class="out"> <span class="posicao">5</span> <div class="info pos"> <span class="categoria cartola"><a href="https://www.oficinadanet.com.br/hbo-max">HBO Max</a></span> <a class="title tg-mais-lida" href="https://www.oficinadanet.com.br/hbo-max/39090-lancamentos-hbo-max-dezembro-2021">Lançamentos da HBO Max em dezembro de 2021</a> </div> </div> </div> </div> </div><div class="banner-300x600 sticky"><div id="div-gpt-ad-1581959153599-0"><script>googletag.cmd.push(function() { googletag.display("div-gpt-ad-1581959153599-0"); });</script></div></div> </aside> </div> </div> </article> <footer class="footer mt-5 bg-dark-light" id="footer"> <div class="container-fluid"> <div class="row"> <div class="col-12 py-4"><ul class="footer-nav amp main-nav" ><li><a class="nav-item " href="/sobre" >Sobre</a></li><li><a class="nav-item " href="/contato" >Contato</a></li><li><a class="nav-item " href="/privacidade" >Política de privacidade</a></li><li><a class="nav-item " href="/forum" >Pergunte</a></li><li><a class="nav-item " href="/colabore" >Trabalhe conosco</a></li><li><a class="nav-item " href="https://www.oficinadanet.com.br/cupons" >Cupons de desconto</a></li></ul> <div class="social-out mx-auto my-4"> <a class="icone icone-sm facebook-white-sm" href="https://www.facebook.com/oficinadanet" target="_blank" rel="nofollow noreferrer noopener" >Siga no Facebook</a> <a class="icone icone-sm twitter-white-sm" href="https://twitter.com/OficinadaNet" target="_blank" rel="nofollow noreferrer noopener" >Siga no Twitter</a> <a class="icone icone-sm instagram-white-sm" href="https://www.instagram.com/oficinadanetoficial" target="_blank" rel="nofollow noreferrer noopener" >Siga no Instagram</a> <a class="icone icone-sm youtube-white-sm" href="https://www.youtube.com/oficinadanet?sub_confirmation=1" target="_blank" rel="nofollow noreferrer noopener" >Siga no YouTube</a> <a class="icone icone-sm google-white-sm" href="https://news.google.com/publications/CAAqBwgKMKj3-AowzZngAg" target="_blank" rel="nofollow noreferrer noopener" >Siga no Google News</a> <a class="icone icone-sm telegram-white-sm" href="https://t.me/oficinadanet" target="_blank" rel="nofollow noreferrer noopener" >Grupo no Telegram</a> <a class="icone icone-sm rss-white-sm" href="https://www.oficinadanet.com.br/rss/geral" target="_blank">Assine o RSS</a> </div> </div> <div class="col-12 py-4 px-1 bg-dark"> <div class="grupo-out mx-auto"> <div class="logo logo_footer" > <a href="https://www.oficinadanet.com.br" ><img srcset="https://www.oficinadanet.com.br/template/imagem/logo/logo-mini.png 1x, https://www.oficinadanet.com.br/template/imagem/logo/logo-mini-2x.png 2x" width="20" height="20" class="img " src="https://www.oficinadanet.com.br/template/imagem/logo/logo-mini.png" alt="Oficina da Net" title="Oficina da Net" /> </a> </div> <div class="box-m3"> <a target="_blank" rel="nofollow noreferrer noopener" href="https://www.m3midia.com.br" class="grupo" ><img srcset="https://www.oficinadanet.com.br/template/m3/logo/m3midia.png 1x, https://www.oficinadanet.com.br/template/m3/logo/m3midia-2x.png 2x" width="134" height="76" class="img " src="https://www.oficinadanet.com.br/template/m3/logo/m3midia.png" alt="M3 Mídia" title="M3 Mídia" /> </a> <p>Oficina da Net © 2005 - 2021 - Um site do grupo</p> </div> </div> </div> </div> </div> </footer> </main><!-- /6524261/ON-2020-1x1 --><div id='div-gpt-ad-1590682534931-0' style='width: 1px; height: 1px;'><script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1590682534931-0'); });</script></div> </body> </html>