【HTML初心者入門】メモ帳でホームページを作成する方法！

HTMLでホームページを作成するのに「開発環境を整えなきゃ、、でもめんどくさそう。。。」といった方がいらっしゃると思います。

今回はこんな方々に向けてHTMLを使ってメモ帳でホームページを作成する手順を教えます！

挫折せずにプログラミングの学習を続ける方法はこちらの記事で紹介しています。

1 メモ帳でもホームページは問題なく作れます
2 HTMLの作成手順
3 まとめ

メモ帳でもホームページは問題なく作れます

ホームページ作成ソフトやWEBオーサリングツール、または高機能テキストエディタを使うとワープロ感覚で簡単にホームページを作成できますが、自分でサイトを管理するようになるとHTMLの細かい編集など、知識は必ず必要になります。

HTMLを知っておくことは必須であるなら、まずはすべて自分の手で作り上げることは必要ではないでしょうか。そのためには、メモ帳にHTMLタグを直接打ってみましょう。

----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP COMMIT】で需要の高まるITエンジニアに転職しよう！
フルタイムのコミット型学習と手厚いキャリアサポート！
万が一転職できない場合は、全額返金の転職保証付き！
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

＼参加者満足度99％！／
エンジニア転職のプロに無料で相談する！
※最短1分で申し込み可能

HTMLの作成手順

メモ帳を開いて基本タグを打つ

Windowsの「アクセサリ」にある「メモ帳」を起動します。<HTML>を先頭に、基本的な枠組みとなるタグを打っていきます。すべてが手打ちなので、開始タグ(<***>)、終了タグ(</***>)を間違えないように確認しながらうっていきましょう。

HTML

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

タイトル、本文を入れる

<head>タグ内の<title>タグを作成します。そのページタイトルを記載してください。<body></body>の間には実際に記載したい本文を入力します。

HTML

<html>
<head>
<title>メモ帳でHTML</title>
</head>
<body>
メモ帳で１からつくったHTML文書です。
</body>
</html>

ファイルを保存する

タイトルと本文の入力ができましたらメモ帳を名前をつけて保存します。（ここでは「memotest」というファイル名にします）

保存するフォルダに移動し、ファイルの種類を「すべてのファイル」にして、ファイル名は半角英数字で「memotest」、拡張子は「.htm」または「.html」にします。ファイル名の大文字小文字は区別されますので注意します。

ブラウザで確認する

作成したファイルをInternetExplorerやGoogle Chromeなどのブラウザで開き、表示させます。ブラウザを起動し、「ファイル」メニューの「開く」で保存したHTMLファイルを開きます。ページタイトルはブラウザのタイトルバーの部分に、本文や画像はウィンドウ内に表示されます。

更新して再表示する

メモ帳で先ほどのHTMLファイルを開き、本文を変更します。

HTML

<html>
<head>
<title>メモ帳でHTML（更新版）</title>
</head>
<body>
メモ帳で作った文書を更新しました。
</body>
</html>

ブラウザに戻り、画面を更新します。更新ボタンを押すか、F5キーを押してください。変更した内容が確認できればOKです。

ブラウザからソースを確認する

Microsoft Edgeの場合は、メニューの「F12開発者ツール」、InternetExplorerの場合は、メニューバーの「表示」メニューから「ソース」をクリックするとソースが表示されます。
自分が作成したメモ帳と同じ内容が表示されます。

気になるサイトがある場合はこうやってソースを確認し、ご自身のサイトの参考にしてみてください。

・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選！」の記事を参考にしてください。

----------------------------------------------------------------------------------------------------------------------------------

現在の仕事や育児を続けながらも、自身の新しい可能性を発掘してみませんか？
完全オンラインで最大1年間の転職サポートの付いた高品質カリキュラムで、仕事合間や土日時間を有効活用し、未経験から需要の高まるエンジニアを目指しましょう！
まずはお気軽に、無料カウンセリングへ！

＼キャリア発掘の第一歩／
プロのキャリアアドバイザーに相談する！
※最短1分で申し込み可能

まとめ

慣れてきたら、自分なりのテンプレートを作るなどして、作業の効率化を図るのも良いです。HTMLやその他の知識について十分だと感じたら、無料の高機能ツールを探してみましょう。基礎知識を十分養った上での使用はとても有用です。

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談！

DMM WEBCAMPは転職成功率は98％※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか？

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう！この機会を活用し、ぜひDMM WEBCAMPの無料カウンセリングをご利用ください。

＼オンラインで実施中／
【無料】キャリア相談の日程を見る

※ 1 2020年４月時点