【HTML初心者入門】メモ帳でホームページを作成する方法！
HTMLでホームページを作成するのに「開発環境を整えなきゃ、、でもめんどくさそう。。。」といった方がいらっしゃると思います。
今回はこんな方々に向けてHTMLを使ってメモ帳でホームページを作成する手順を教えます！
挫折せずにプログラミングの学習を続ける方法はこちらの記事で紹介しています。
メモ帳でもホームページは問題なく作れます
ホームページ作成ソフトやWEBオーサリングツール、または高機能テキストエディタを使うとワープロ感覚で簡単にホームページを作成できますが、自分でサイトを管理するようになるとHTMLの細かい編集など、知識は必ず必要になります。
まずは、メモ帳にHTMLタグを直接打ってみましょう。
HTMLの書き方について、まだ分からない方は下記の記事を参考にしてください。
【初心者向け】HTMLの正しい書き方まとめ｜各要素・タグの使い方を解説
「Webデザインを独学で学習しているあなたへ」
独学での学習挫折率は9割以上と言われています。
✔️仕事で活躍するためにスキルアップしたい
✔️仕事や学業と並行して学習したい
✔️副業を考えている
という方に向けて、【DMM WEBCAMP】のWeb学習がおすすめです！
・未経験から最短8週間でWebデザイン・サイト制作スキルがつく！
・現役デザイナー講師が一人ひとりの学びに合わせたマンツーマン体制で学習をサポート
「詳しく知りたい」という方は、ぜひ詳細をチェックしてください！
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の場合は、メニューバーの「表示」メニューから「ソース」をクリックするとソースが表示されます。
自分が作成したメモ帳と同じ内容が表示されます。
気になるサイトがある場合はこうやってソースを確認し、ご自身のサイトの参考にしてみてください。
知っていますか？IT業界は市場価格が高まっています！
市場価格の高い業界で働くことで、現在よりも収入UPが可能です。在宅で自由に働きたいという方にもIT業界はおすすめです！
自由に働きながら収入UPができるかもしれません！
仕事と充実したプライベートの両立のためには、まずIT業界についての情報収集が大切になります。
【DMM WEBCAMP】では、LINEにてこれらの情報を発信しています。
友達追加をして詳細をチェックしてみてください！
まとめ
慣れてきたら、自分なりのテンプレートを作るなどして、作業の効率化を図るのも良いです。HTMLやその他の知識について十分だと感じたら、無料の高機能ツールを探してみましょう。基礎知識を十分養った上での使用はとても有用です。
