3.HTMLの基本的な書き方

 

HTMLの基本的な書き方

HTMLの書き方は、決まり事さえ覚えてしまえばそんなに難しくありません。
覚えるというよりも慣れるという表現のほうが正しいかもしれません。早く慣れるためにもここに書いているコードをコピペせずに自分でタイピングしてください。
最初は時間がかかると思いますしエラーも出てくると思いますが近道はありません。じっくり習得していきましょう。

 

学習を行うフォルダの作成

学習で作成するファイルを保存するフォルダを作成しましょう。
PC内のどこに作成しても大丈夫ですが、今回はデスクトップに作成することにします。
デスクトップで右クリックし、[新規作成]>[フォルダー]をクリックします。ファイル名を「practice」と記載して保存してください。

これで学習を行うためのフォルダの作成が完了しました。

 

HTMLファイルの作成

2.HTMLの学習準備」で説明した、HTMLを書くためのソフトであるテキストエディターの「Atom」をたちあげてください。
右下の「Plain Text」をクリックし、検索窓に「HTML」と入力し、一番上にでてくる[HTML]を選択しておきましょう。
次に、以下のコードを書いていってみてください。

 

書き終わったら先ほど作成した「practice」フォルダに「index.html」という名前で保存してください。

 

「index」というファイルができたと思います。PCの初期設定では「.html」などの拡張子が表示されません。

 

これだと、なんのファイルか一目で判断が付かないので、ファイルフォルダの[表示タブ]>[ファイル名拡張子を表示]にチェックを入れましょう。

 

これで、拡張子が常に表示される状態になりました。
先ほど保存したファイルが「index」から「index.html」になっていると思います。

 

HTMLを開くソフトを指定

 

次にこの「index.html」をどのソフトで開くか設定していきましょう。
「index.html」をクリックして選択された状態で右クリックし、[プログラムから開く]>[別のプログラムを選択]をクリックします。

 

[Google Chrome]を選択し、[常にこのアプリを使って.htmlファイルを開く]にチェックを入れてて[OK]をクリックしてください。

 

「index.html」ファイルをダブルクリックして開いてみてください。
HTMLを表示するためのソフトであるウェブブラウザの「Google Chrome」が開かれ、このような画面になればOKです。

これで「.html」の拡張子がついたファイルは常に「Google Chrome」が開かれるように設定できました。

HTMLコード解説

学習の準備が完全に整いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です