単純なウェブページをHTMLで作成する方法

HTMLを知らなくてもウェブページを作成することは可能です。しかし、どのようなウェブページエディターを使っていても何かしら問題が起きることは避けられず、問題を修正するためにHTMLを学ぶ必要が出てくるでしょう。HTMLを学べる良いウェブサイトは多くありますが、このガイドでは、HTMLを使って基本的なウェブサイトを作成する方法をご紹介します。この記事にある基本的な解説で、すぐにウェブページをゼロから作ることができるようになるはずです！

方法 1

方法 1 の 1:

HTMLを使用する

PDF形式でダウンロード

1
HTMLとは何か理解する　HTML（ハイパー・テキスト・マークアップ言語）は、ウェブページを作るプログラミング言語です。HTMLは、存在するあらゆるウェブページの骨組みです。どのようなものか見るには、Internet Explorerを開いて任意のウェブサイトを開き、ウェブページ上で右クリックをして、「ソースを見る」を選択します。コードのページが表示されます。これがHTMLです。ブラウザはこのコードを見て、人間が見やすいウェブページに翻訳しているのです。
- Google Chrome では、F12を押します。
- Mozilla Firefoxでは、Ctrl + Uを押してソースコードを閲覧します。
- Safariでは、「表示」→「ページのソースを表示」を選択します（もしくは、Option + Command + U）。
- Internet Explorerでは、「表示」メニューオプションから「ソース」を選択します。
2
最初のウェブページは、可能な限り単純なものにする　単純なページでなければ、HTMLの構文やスクリプト言語に圧倒されてしまうでしょう。
- 表示したい情報は開始タグと閉じタグの間に記述していく、と覚えておくことが重要です。開始タグは、「<___>」のようなものです。閉じタグは、「</___>」のようなものです。最終的には「___」の部分を実際のコードに置き換えます。
スタートメニューから「プログラム」、「アクセサリー」と進み、「メモ帳」をクリックする　Notepad++を使用すると、さらに簡単にコーディングできます。言語の種類でHTML言語を選んでおくと、入力した文字すべてが自動的に着色され、間違っている可能性があるコードを簡単に訂正できるようになります。
　最初の行に、<!DOCTYPE>と入力します。ソースコードの1行目は、必ずこのタグでなくてはいけません。2行目に<html>と入力します。これが2つ目に入力するタグで、ウェブページの記述が始まるということをコンピューターに伝えます。このタグは、最後に閉じられるタグでもあるため、HTML文書の最後に</html>と入力してHTMLを終了します。これでウェブページを終了します。
　タイトルは重要です。何についてのページなのか、ユーザーにヒントを与えることができます。また、ユーザーがウェブサイトをブックマークした時に、ページのタイトルがブックマークの一覧に表示されます。タイトルを示すHTMLコードは、<title>です。タイトルの最後に</title>と入力し、タイトルの記述を終了します。タイトルはブラウザのタブに表示されますが、実際のウェブサイトのタイトルとして表示されるわけではありません。
7
　<body>と入力して、ボディタグを開始します。閉じる時は、</body>と入力します。ウェブページの情報の大部分が<body>と</body>の間に記述されることになります。
- ウェブページに背景色を設定したい場合は、ボディにスタイルを追加できます。背景色を追加するには、<body style="background-color:silver">というタグを追加しましょう。異なる色や16進数カラーコードも試すことができます。クウォーテーションで囲まれた単語は、「属性」と呼ばれるものです。属性は、必ずクウォーテーションで囲まないといけません。
8
ボディタグの間に文章を書く
- （キーボードで「Enter」キーを押したときのように）改行する場合は、<br><br>と記述します。
- スクリーンを横切る文字、マーキーを追加したい場合は、単純に<marquee>ここにテキストが入ります</marquee>と入力します。
インターネット上からウェブページに写真などを追加したい場合、画像用のHTMLコードは<img src="URL">です。閉じタグはありません。

How.com.vn 日本語: Step 10 全てのタグが閉じられていることをチェックする

ウェブページは、次のようになっている必要があります。

<title>私のウェブページ</title>
<body bgcolor="yellow">
How.com.vnを好きな理由
<marquee>最高のウェブサイトだからです！</marquee>
<img src="http://www.wikihow.com/skins/common/images/How.com.vn_logo_5.gif"></body>

「名前をつけて保存」に進み、拡張子が「.html」となっているファイル名を付け、ファイルの種類は「全てのファイル」または「テキスト」を選択します。ファイル名の拡張子やファイルの種類が違っていた場合、HTMLは機能しません。保存したファイルをダブルクリックすると、デフォルトのウェブブラウザで作成したウェブページが開きます。
広告

ポイント

Adobe Dreamweaverを試すのも良いでしょう。起きている問題や問題を修正する方法を示してくれるため、何か問題が起きた場合に、役に立つはずです。
インターネット上には、HTMLのコーディングに役立つチュートリアルがたくさんあります。「HTMLコードチュートリアル」とGoogleで検索してみましょう。
このガイドでは、ウェブページを作成する方法をご紹介しています。ウェブページをインターネット上に掲載する方法については、関連するHow.com.vnを参考にしましょう。
次に挙げるのは、間違ったタグの配置の例です。<tag1><tag2> 文章 </tag1></tag2>
すべてのエラーを修正しておき、簡単に検索できるようにしておきましょう。
たくさんの人がウェブページのデザインを職業としています。スキルを磨けば、デザイナーになるチャンスがあるかもしれません。
実際に変更を加える前に、Myspaceの個人ページなど、加えた変更をテストできるテンプレートを使用しましょう。
HTMLを書くのに適したアプリケーションは、Espressoです。ショートカットを使用することでコードの記述を簡略化できます。また、拡張子の変更（.htmlと.txt）を繰り返すことなく、「プレビュー」機能でウェブページの見た目を確認することができます。
さらに高度なウェブサイトを作成するためには、Microsoft Expression Webといったエディターを使用しましょう。
閉じタグは、どこにでも記述できるわけではありません。「最後」のタグの閉じタグは、「最初」のタグの中に入っている必要があります。<tag1><tag2> 文章 </tag2></tag1>のようにならなくてはいけません。
コードの微調整がしたい場合は、対象のファイルの拡張子を「.htm」から「.txt」に変更しましょう。または、ソースコードのコピーファイルを2つ保存して、1つを「.htm」、もう1つを「.txt」とします。これでファイルを後で編集することができるようになります。
シンプルなウェブページを数分で仕上げられる技術を使って、お友達を感心させてみましょう。お友達にウェブサイトを作ってあげることもできるかもしれません。お友達は感心して褒めてくれるでしょう。
ウェブページが機能しない場合は、上記のサンプルHTMLコードをコピー＆ペーストして、指示通り保存し、ページを確認してみましょう。学習しながら既存のコードで遊んでみましょう。
開始したタグは、閉じる必要がない特別なタグでは無い限り、必ず閉じる必要があります。特別なタグには、<img>や<hr>などがあります。しかし、閉じタグが必要かどうか自信が無い場合は、タグを閉じるようにしましょう。

注意事項

ファイル名の最後に、「.html」または「.htm」と手動で入力して、ファイルの種類は「全てのファイル」または「テキスト」を選択するようにしましょう。
<marquee>タグは、W3C（ワールド・ワイド・ウェブ・コンソーシアム）によって定義されている公式なHTMLタグではなく、タグが機能しないブラウザがあるかもしれません。このタグは、はじめはInternet Explorerでサポートされていたタグで、現在ではその他のブラウザもサポートしています。
現在のホストの帯域幅の制限にかからないように、ウェブページで使用する画像は、Photobucket、Flickr、ImageShackなどの写真共有サイトを利用してホストするようにしましょう。
「bgcolor」は、古い属性です。背景色を変更する際はCSSを使用するのが正しい方法です。