TOC

HtmlチュートリアルHello World

HtmlチュートリアルHello World

このチュートリアルでは、HTMLを使用して簡単なHello Worldページを作成する方法を学習します。 まず、HTMLの基本について説明します。

  1. HTMLはHyperTextMarkupLanguageの略です

  2. HTMLは、（ ）のようなマークアップタグのセットで構成されるテキストファイルです。

  3. ほとんどすべてのマークアップタグには、開始タグと終了タグがあります。 終了タグは「/」で始まります。

  4. マークアップタグは、Webブラウザー（FirefoxまたはInternet Explorer）に何をすべきかを伝えるコマンドのようなものです。

  5. HTMLファイルには、ファイル拡張子としてhtmまたはhtmlが必要です。

  6. HTMLファイルでは大文字と小文字は区別されません。 、、またははすべて同じタグです。

  7. HTMLファイルは、windowsのメモ帳やワードパッド、vi、unixやlinuxのemacsなどのテキストエディターで編集できます。

HTMLページを作成する手順

古典的な「Hello world」HTMLファイルの作成を始めましょう。

1. テキストエディタ

お気に入りのテキストエディター（メモ帳など）を開きます。 空のテキストファイルを作成します。

2. HTMLコード

次のHTMLコードをコピーして、新しく開いたテキストファイルに貼り付けます。 



This is title


Hello world

html-tutorial-hello-world-notepad

3. それを保存

[ファイル]をクリックし、HTMLファイル拡張子で保存します（例：「anynameyoulike.html」）

html-tutorial-hello-world-save-as

4. Demo

ダブルクリックして表示します。 （または、お好みのインターネットブラウザで新しく保存したHTMLファイルを開きます）。

html-tutorial-hello-world-view-it

コードの説明

  1. tag is tell internet browser this file is a start and end of the HTML file document.

  2. タグの間のテキストはHTMLヘッダー情報用であり、インターネットブラウザーには表示されません。

  3. </ title>の間のテキストは、インターネットブラウザの左上隅に表示されます。これはWebページのタイトルです。 </p> </li> <li> <p><body> </ body>間のテキストは、インターネットブラウザーにコンテンツとして表示されます。 </p> </li> </ol> </div> </div> </div> </div></body></html></div> <div class="row pl-3 mb-3"> <!-- AddToAny BEGIN --> <div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_facebook"></a> <a class="a2a_button_tumblr"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_button_pocket"></a> <a class="a2a_button_evernote"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_line"></a> <a class="a2a_button_email"></a> <a class="a2a_button_reddit"></a> <a class="a2a_button_digg"></a> <a class="a2a_button_vk"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script> var a2a_config = a2a_config || {}; a2a_config.onclick = 1; </script> <script async src="https://static.addtoany.com/menu/page.js"></script> <!-- AddToAny END --> </div> </article> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-7450216517803275" data-ad-slot="2842159643"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="col-12 col-lg-3"> <div class="card my-4 ad-sidebar"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7450216517803275" data-ad-slot="8195814284" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card my-4 ad-sidebar"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7450216517803275" data-ad-slot="8195814284" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card my-4 sticky-top"> <h5 class="card-header">Related</h5> <div class="card-body p-2"> <ul class="list-group list-group-flush"> <li class="list-group-item p-2"> <a href=/ja/article/spring-security__spring-security-hello-world-example> 春のセキュリティhello worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/spring-security__spring-security-hello-world-annotation-example> Spring SecurityのHello World Annotationの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/struts2__struts-2-hello-world-example> Struts 2 Hello Worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/google-app-engine__gae-python-hello-world-on-mac-os-x> Mac OS X上のGAE Python hello world </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/webservices__jax-rs__jersey-hello-world-example> ジャージの世界の例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/google-maps__google-maps-api-hello-world-example> Google Maps APIのhello worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/google-app-engine__google-app-engine-hello-world-example-using-eclipse> GoogleのアプリエンジンEclipseを使用したJavaのhello worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/jsf2__jsf-2-0-hello-world-example> JSF 2.0 hello worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/spring3__spring-3-mvc-hello-world-example> Spring 3 MVC hello worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/mongodb__spring-data-mongodb-hello-world-example> SpringデータMongoDB hello worldの例 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/html__html-font-tutorial> Htmlフォントチュートリアル </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/javascript__how-to-get-element-by-name-in-html-getelementsbyname> HTMLで名前を取得する方法 - getElementsByName </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/java__how-to-convert-java-source-code-to-html-page> JavaソースコードをHTMLページに変換する方法 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/html__html-color-tutorial> Htmlカラーチュートリアル </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/java__how-to-convert-html-to-javascript-js-in-java> JavaからJavaをJavascript（.js）に変換する方法 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/regular-expressions__how-to-extract-html-links-with-regular-expression> 正規表現でHTMLリンクを抽出する方法 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/web-development__remember-declared-the-doctype-in-your-web-page> あなたのウェブページにDOCTYPEを宣言したことを覚えておいてください </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/regular-expressions__how-to-validate-html-tag-with-regular-expression> 正規表現でHTMLタグを検証する方法 </a> </li> <li class="list-group-item p-2"> <a href=/ja/article/html__html-elements> HTML要素 </a> </li> </ul> </div> </div> </div> </div> </div> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/androidstudio.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"> </script> <script>hljs.initHighlightingOnLoad();</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> <link rel="stylesheet" type="text/css" href="/static/toc.css"> <script> tocbot.init({ // Where to render the table of contents. tocSelector: '.content-toc', // Where to grab the headings to build the table of contents. contentSelector: '.content', // Which headings to grab inside of the contentSelector element. // For headings inside relative or absolute positioned containers within content. hasInnerContainers: true, }); </script> <footer class="py-5 bg-dark"> <div class="container text-white"> <p > DMCA: dmca#codeflow.stie </p> Copyright ©<span> 2025</span> </div> </footer> </body> </html>