HTMLを使用して簡単なWebページを作成する方法

このwikiHowでは、HTML（ハイパーテキストマークアップ言語）を使用して簡単なWebページを作成する方法を説明します。 HTML は World Wide Web のコアコンポーネントの 1 つであり、Web ページの構造を作成するために使用されます。 Web ページを作成したら、それを HTML ドキュメントとして保存し、Web ブラウザーで表示できます。 Windows および Mac コンピュータに付属する基本的なテキストエディタだけを使用して HTML ページを作成できます。

パート1 (全6 部中 1 部):

ヘッダー要素の追加

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/36\/4082-1-1.jpg\/v4-460px-4082-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/36\/4082-1-1.jpg\/v4-728px-4082-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1テキストエディターを開きます。 Windows ユーザーは通常、Notepad または Notepad++ を使用できますが、macOS ユーザーは TextEdit を使用できます。
- Windows —スタートメニューを開きウィンドウの上部にある「Notepad」または「Notepad ++ またはsublime 」をクリックします。
- macOS — {"smallUrl":" https クリックしてフォーカスし、 「textedit」と入力して、検索結果の上部にあるTextEditをクリックします。
- ChromeOS — ランチャーを開いて「テキスト」をクリックします。 (「ソースコードビューアー」と書かれたアイコン)。
2 <! DOCTYPE html> と入力し、 ↵ Enter を押します。これはブラウザにこれが HTML ドキュメントであることを伝えます。
3 <html>と入力し、 ↵ Enter を押します。これは HTML コードの開始タグです。
4 <head>と入力し、 ↵ Enter を押します。これは HTML の head 要素の開始タグです。 HTML のヘッド要素には、タイトル、メタデータ、CSS スタイルシート、その他のスクリプト言語が含まれますが、これらは通常、Web ページには表示されません。 ^{[1] X研究ソース}
5 <title>を入力します。このタグは Web ページのタイトルを定義します。
6Web ページのタイトルを入力します。タイトルは何でも構いません。
7 </title>と入力し、↵ Enterを押します。これはタイトルの終了タグです。
8 </head>と入力し、↵ Enterを押します。これは head 要素の終了タグです。 HTML コードは次のようになります。
```
 <!DOCTYPE html>
<html>
<ヘッド>
< title >私のウェブページ</ title >
</ヘッド>
```
広告する

パート2 パート2/6:

本文要素の追加

1 「Head」終了タグの下に<body>と入力します。これは HTML ドキュメント本体の開始タグであり、その中のすべてのコンテンツが Web ページに表示されます。
2 <h1>タグを入力して、HTML ドキュメントにタイトルを追加します。見出しは、通常 HTML ドキュメントの上部に配置される大きな太字のテキストです。
3Web ページのタイトルを入力します。ページタイトルまたは挨拶文にすることができます。
4 </h1>と入力し、↵ Enterを押します。これはタイトルの終了タグです。
- ページの内容に基づいて見出しを追加します。 <h1></h1>から<h6></h6>タグを使用して、合計 6 つの異なる見出しを追加できます。タイトルごとにサイズが異なります。たとえば、異なるサイズのタイトルを 3 つ連続して追加するには、次のように記述します。
```
 < h1 >私のウェブサイトへようこそ！ </ h1 >
< h2 >私はシャオリです。 </ h2 >
< h3 >楽しんでいただければ幸いです。 </ h3 >
```
- タイトルはテキストの優先度または重要性を示します。ただし、最上位の見出しから始める必要はなく、常に下位の見出しを使用できます。テキストに H1 がない場合でも、H3 を直接使用できます。
5段落を開始するには、 <p>タグを入力します。段落内のテキストは通常のフォントサイズで表示されます。
6テキストを入力します。ページの説明や共有したいその他の情報などを入力します。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/43\/4082-15-1.jpg\/v4-460px-4082-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/43\/4082-15-1.jpg\/v4-728px-4082-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7段落を終了するには、テキストの末尾に</p>と入力し、 ↵ Enter を押します。以下は HTML の段落の例です。
```
 < p >これは段落です。 </p>
```
- 複数の段落を連続して追加して、1 つの見出しの下に複数の段落を作成できます。
- テキストの前後に<font color="color">タグと</font>タグを追加することで、テキストの色を変更できます。「色」セクションで、引用符を残したまま、使用する色を入力します。このタグセットを使用すると、タイトルを含む任意のテキストの色を変更できます。たとえば、テキストの一部を青色に変更したい場合、コードは次のように記述する必要があります: <p><font color="blue">クジラは雄大な生き物です。 </font></p>
- HTML を使用して太字、斜体、その他のテキスト書式を追加することもできます。以下に例を挙げる: ^{[2] X研究ソース}
```
< b >太字</ b >
< i >斜体</ i >
< u >下線</ u >
< sub >下付き文字</ sub >
< sup >上付き文字</ sup >
```
- 太字と斜体をテキストのスタイル設定ではなく特定のコンテンツを強調するために使用している場合は、 <b>と<i>の代わりに<strong>要素と<em>要素を使用できます。このスクリーンリーダー^{[3] X研究ソース}また、一部のブラウザの読み取りモードを使用すると、Web ページのコンテンツが読みやすくなります。 ^{[4] X研究ソース}。
広告する

パート3 ( 6 部構成のパート 3):

要素の追加

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/4082-16-1.jpg\/v4-460px-4082-16-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/4082-16-1.jpg\/v4-728px-4082-16-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 Web ページに画像を追加します。次の手順に従って、HTML ドキュメントに画像を追加できます。
- <img src= と入力して画像タグを開きます。
- 画像の URL をコピーし、「=」の後に貼り付けて引用符で囲みます。
- 画像タグを閉じるには、画像 URL の後に> と入力します。たとえば、画像の URL が「http://www.mypicture.com/lake」の場合、次のように記述します。
```
 <画像ソース= "http://www.mypicture.com/lake.jpg" >
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/4082-17-1.jpg\/v4-460px-4082-17-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/4082-17-1.jpg\/v4-728px-4082-17-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2他の Web ページへのリンク。次の手順に従って、HTML ドキュメントにリンクを追加できます。
- リンクタグを開くには、 <a href=と入力します。
- URL をコピーし、「=」記号の後に引用符で囲んで貼り付けます。
- リンクを閉じるには、URL の後に>と入力します。
- 閉じ括弧の後にリンクの名前を入力します。
- リンク名の後に</a>と入力してリンクタグを閉じます。 ^{[5] X研究ソース}Facebook リンクを追加する例を次に示します。
```
 < a href = "https://www.facebook.com" > Facebook </ a > 。
```
3改行を追加します。 HTML ドキュメントに<br>と入力すると、改行を挿入し、水平の分割線を追加して、ページのさまざまな部分を区切ることができます。広告する

パート4 パート4/6:

カスタムカラー

1 HTML の色名とコードの公式リストを表示します。 World Wide Web Consortium (W3C) には公式の色リストがあり、https://www.w3.org/wiki/CSS/Properties/color/keywords で確認できます。各色には正式名称、6 桁の 16 進コード、および 10 進数値があります。これらの値のいずれかを使用して、Web ページの要素に色を追加できます。この例では、正式な色名を使用します。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/4082-20-3.jpg\/v4-460px-4082-20-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/4082-20-3.jpg\/v4-728px-4082-20-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 <body>タグで背景色を設定します。タグにスタイル属性を追加することでこれを実行できます。たとえば、ページ全体の背景色をラベンダーに変更したい場合は、次のようにします。
- <body style="background-color:ラベンダー;">
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/4082-21-3.jpg\/v4-460px-4082-21-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/4082-21-3.jpg\/v4-728px-4082-21-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3タグのテキストの色を設定します。スタイル属性を使用して、特定のタグ内のすべてのテキストの色を指定することもできます。たとえば、 <p>タグ内のテキストをmidnightblueに設定したいとします。
- <p style="color:midnightblue;">
- 色の変更は<p>タグ内のテキストにのみ影響します。後で<p>タグを開始し、それをmidnightblueに設定する場合は、対応する位置でもスタイル属性を設定する必要があります。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/4082-22-3.jpg\/v4-460px-4082-22-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/4082-22-3.jpg\/v4-728px-4082-22-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4ヘッダーまたは段落の背景色を設定します。本文ラベルの背景色を設定するのと同様に、他のラベルの背景色も設定できます。たとえば、 <p>の背景色をlightgreyに設定し、 H1 スタイルヘッダーの背景色をlightskyblueに設定するには、次のようにします。
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
広告する

パート 5パート5/6:

HTMLドキュメントの終了

1 </body>と入力して、body 要素を閉じます。すべてのテキスト、画像、その他の要素を追加した後、このタグを HTML ドキュメントの下部に挿入して、HTML ドキュメントの body 要素を閉じます。

2 </html>と入力して HTML ドキュメントを閉じます。このタグを body 要素の終了タグの下に挿入して、Web ブラウザに HTML コードがここで終了することを通知します。 HTML ドキュメント全体は次のようになります。

 <!DOCTYPE html>
<html>

<ヘッド>
< title > wikiHow ファンページ</ title >
</ヘッド>

<本文>

< h1 >私のウェブサイトへようこそ！ </ h1 >
< p >これは wikiHow のファン ページです。自由に閲覧して、自分のホームとしてお使いください。 </p>

< h2 >重要な日付</ h2 >
< p >< i > 2019年1月15日</ i > — wikiHowの誕生日</ p >

< h2 >リンク</ h2 >
< p > wikiHow ウェブサイト リンク: < a href = "http://www.wikihow.com" > wikiHow </ a ></ p >

</本文>
</html>

広告する

パート 6パート6/6:

ウェブページの保存と開く

1ドキュメントをプレーンテキストに変換します (Mac ユーザーのみ)。画面上部の「フォーマット」メニュー項目をクリックし、表示されるドロップダウンメニューから「プレーンテキストに変換」をクリックします。
この手順は Windows コンピュータでは必要ありません。
。画面上部のメニューバーにあります。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/52\/4082-23-1.jpg\/v4-460px-4082-23-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/4082-23-1.jpg\/v4-728px-4082-23-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":539,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 [名前を付けて保存] をクリックします。 「ファイル」の下のドロップダウンメニューにあります。
- Ctrl + S (Windows) または⌘ Command + S (Mac) を押してこれを行うこともできます。
4 HTML ドキュメントに名前を付けます。 「ファイル名」（Windows）または「名前」（Mac）テキストボックスに、ドキュメントに付ける名前を入力します。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/4082-25-1.jpg\/v4-460px-4082-25-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/4082-25-1.jpg\/v4-728px-4082-25-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5ドキュメントのファイルタイプを変更します。ドキュメントをテキストファイルから HTML ファイルに変更する必要があります。ファイルの種類を変更するには、以下の手順に従ってください。
- Windows - 「ファイルの種類」ドロップダウンボックスをクリックし、 「すべてのファイル」をクリックして、ファイル名の後に「.html」と入力します。
- Mac - ファイル名の後の.txt を.htmlに変更します。
6 ウィンドウの下部にある「保存」をクリックします。これにより、HTML ファイルが正常に作成されます。
- HTML ファイルは通常、デフォルトの Web ブラウザで開きます。
。この時点で、ブラウザを使用して HTML ファイルを開き、独自の Web ページを表示できます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/81\/4082-28-1.jpg\/v4-460px-4082-28-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/81\/4082-28-1.jpg\/v4-728px-4082-28-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8ブラウザで HTML ドキュメントを開きます。ほとんどの場合、HTML ドキュメントをダブルクリックすると自動的に開きます。ドキュメントをダブルクリックした後にエラーメッセージが表示される場合は、以下の手順に従ってください。
- Windows - ドキュメントを右クリックし、[プログラムから開く]をクリックして、使用する Web ブラウザーをクリックします。
- Mac — 「ドキュメント」をクリックし、 「ファイル」をクリックして、「プログラムから開く」を選択し、お好みの Web ブラウザをクリックします。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/4082-29-1.jpg\/v4-460px-4082-29-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/4082-29-1.jpg\/v4-728px-4082-29-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 9必要に応じて HTML ドキュメントを編集します。 HTML ページにエラーが見つかる場合があります。エラーを修正するには、次のようにドキュメントを編集します。
- Windows では、ドキュメントを右クリックし、表示されるドロップダウンメニューから[編集]をクリックします。 Notepad++ がインストールされている場合は、 「Notepad++ で編集」をクリックします。
- Mac では、ドキュメントをクリックして選択し、 「ファイル」をクリックし、「プログラムから開く」を選択して、 「テキストエディット」をクリックします。ドキュメントを TextEdit に直接ドラッグアンドドロップすることもできます。
広告する

ヒント

各開始タグは、終了タグと鏡像順に一致する必要があります。たとえば、 <tag1><tag2>タグを使用した後は、 </tag2></tag1>で終了する必要があります。
<marquee></marquee>タグを使用して、横方向にスクロールするテキストを Web サイトに追加できます。ただし、一部の Web ブラウザはこのタグを認識しません。
多くの人が Notepad++ を使用してコードを記述およびコンパイルします。
画像を Web ページの中央に配置する場合は、 imgタグ内の画像名の後に<class="center">を入力します (例: <img src="URL" class="center"> )。

広告する