HTMLでホームページを作成するのに「開発環境を整えなきゃ、、でもめんどくさそう。。。」といった方がいらっしゃると思います。
今回はこんな方々に向けてHTMLを使ってメモ帳でホームページを作成する手順を教えます！
挫折せずにプログラミングの学習を続ける方法はこちらの記事で紹介しています。
＼参加者満足度99％！／
無料カウンセリングに申し込む
※最短1分で申し込み可能
メモ帳でもホームページは問題なく作れます
ホームページ作成ソフトやWEBオーサリングツール、または高機能テキストエディタを使うとワープロ感覚で簡単にホームページを作成できますが、自分でサイトを管理するようになるとHTMLの細かい編集など、知識は必ず必要になります。
HTMLを知っておくことは必須であるなら、まずはすべて自分の手で作り上げることは必要ではないでしょうか。そのためには、メモ帳にHTMLタグを直接打ってみましょう。
「HTML・CSS」をマスターして、ホームページやWEBアプリを作成できるよう になりたい方へ！ ＼経済産業省認定の圧倒的カリキュラム！／
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験者！
✔スキマ時間で効率よくスキルアップしたい方におすすめ！
✔基礎から確実に身に付く充実のカリキュラム！
受講内容の詳細はこちら
HTMLの作成手順
メモ帳を開いて基本タグを打つ
Windowsの「アクセサリ」にある「メモ帳」を起動します。<HTML>を先頭に、基本的な枠組みとなるタグを打っていきます。すべてが手打ちなので、開始タグ(<***>)、終了タグ(</***>)を間違えないように確認しながらうっていきましょう。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>タイトル、本文を入れる
<head>タグ内の<title>タグを作成します。そのページタイトルを記載してください。<body></body>の間には実際に記載したい本文を入力します。
<html>
<head>
<title>メモ帳でHTML</title>
</head>
<body>
メモ帳で１からつくったHTML文書です。
</body>
</html>ファイルを保存する
タイトルと本文の入力ができましたらメモ帳を名前をつけて保存します。（ここでは「memotest」というファイル名にします）
保存するフォルダに移動し、ファイルの種類を「すべてのファイル」にして、ファイル名は半角英数字で「memotest」、拡張子は「.htm」または「.html」にします。ファイル名の大文字小文字は区別されますので注意します。
ブラウザで確認する
作成したファイルをInternetExplorerやGoogle Chromeなどのブラウザで開き、表示させます。ブラウザを起動し、「ファイル」メニューの「開く」で保存したHTMLファイルを開きます。ページタイトルはブラウザのタイトルバーの部分に、本文や画像はウィンドウ内に表示されます。
更新して再表示する
メモ帳で先ほどのHTMLファイルを開き、本文を変更します。
<html>
<head>
<title>メモ帳でHTML（更新版）</title>
</head>
<body>
メモ帳で作った文書を更新しました。
</body>
</html>ブラウザに戻り、画面を更新します。更新ボタンを押すか、F5キーを押してください。変更した内容が確認できればOKです。
ブラウザからソースを確認する
Microsoft Edgeの場合は、メニューの「F12開発者ツール」、InternetExplorerの場合は、メニューバーの「表示」メニューから「ソース」をクリックするとソースが表示されます。
自分が作成したメモ帳と同じ内容が表示されます。
気になるサイトがある場合はこうやってソースを確認し、ご自身のサイトの参考にしてみてください。
「HTML・CSS」をもっと詳しく学習したい方へ！ ＼経済産業省認定の圧倒的カリキュラム！／
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート！
✔手厚いサポート付きで質問し放題！
✔未経験者のために開発された独自のカリキュラムを用意！
受講内容の詳細はこちら
まとめ
慣れてきたら、自分なりのテンプレートを作るなどして、作業の効率化を図るのも良いです。HTMLやその他の知識について十分だと感じたら、無料の高機能ツールを探してみましょう。基礎知識を十分養った上での使用はとても有用です。
