【初心者向け】メモ帳でHMTLを作成する手順は?更新・確認方法も紹介!

2024.05.09
メモ帳でホームページを作成する方法

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

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

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

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

プログラミング

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

まずは、メモ帳にHTMLタグを直接打ってみましょう。

HTMLの書き方について、まだ分からない方は下記の記事を参考にしてください。

HTMLの正しい書き方まとめ【初心者向け】HTMLの正しい書き方まとめ|各要素・タグの使い方を解説

「なんか今の仕事合わないな・・・」

「IT業界に転職してみたいなぁ・・・」

という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか?

WEBCAMP エンジニア転職

「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です!

WEBCAMPの卒業生は転職後に年収もUP!(例:年収250万円→500万円)

しかも今なら受講料の最大70%が給付金として支給されます

DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です

DMM WEBCAMPについてもっと詳しく

メモ帳でHTMLを作成する手順

手順①:メモ帳を開いて基本タグを打つ

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

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

手順②:タイトル、本文を入れる

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

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

手順③:ファイルを保存する

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

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

ファイルの保存方法

手順④:ブラウザで確認する

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

ブラウザで確認する

メモ帳でHTMLを更新する方法

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

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

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

更新して再表示する

メモ帳で書いたHTMLソースをブラウザで確認する方法

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

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

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

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

プログラミングやパソコンを使って働きたい!

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください!

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

HTMLファイルとメモ帳に関するよくあるご質問

この章ではHTMLファイルとメモ帳に関する、よくある質問をご紹介します。

HTMLファイルをメモ帳で開く方法は?

編集のためにファイル管理ツールにてHTMLファイルをクリックしても、拡張子が「.html」だとWebページ飛んでしまいます。

HTMLファイルをメモ帳で開くには、以下の手順を試してください。

  1. メモ帳を開く
  2. メモ帳上部メニューバー「ファイル」から「開く」をクリック
  3. 編集したいHTMLファイルをダブルクリック

メモ帳をHTML形式で保存する方法は?

メモをHTML形式にするには、基本的に拡張子の「.txt」を「.html」に変更するだけでOKです。

対象のメモを開いている状態であれば、手順は以下のとおりです。

  1. メモ帳上部メニューバー「ファイル」から「名前をつけて保存」をクリック
  2. ウィンドウが表示されるので、青く選択されている「.」以前のファイル名を任意の名称に変更
  3. 「.」以降の拡張子「.txt」の部分を「.html」に変更し、「保存」をクリック
  4. 「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか?」に対し「はい」をクリック

まとめ

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

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5