初心者向けプログラミング講座

MacでHTMLファイルを作成

テキストエディットを開く

画面上部にあるファイルから「新規Finderウインドウ」をクリックします。

Finderウインドウが開いたらアプリケーションタブから「テキストエディット」を見つけてダブルクリックします。

デフォルトだとリッチテキスト形式と言われる形にフォーマットされてしまうので、設定を変更します。
画面上部のテキストエディットから設定を選択します

フォーマットを「標準テキスト」にしてください。

開くとウインドウが出てくるので「デスクトップ」を選択して「新規書類」をクリックします。

このようなウインドウが出てこれば成功してます。

HTMLファイルに必要なタグを記述する

HTMLを書くときは「半角キー (英数キー)」で入力します。
「<」は「Shift(⬆️) + < キー」で入力できます。
「>」は「Shift(⬆️) + > キー」で入力できます。
「/」は「/ キー」で入力できます。

わかりやすいように色をつけていますが気にしないでください

全体的にみるとこのような感じです

HTMLファイルとして保存する

テキストエディットをクリック(選択)した状態で画面上部にあるファイルから「保存」をクリック です。
※「command + s」でも可能

【名前】名前は「半角英字 + .(ドット)html」でつけてください。
【場所】デスクトップにしてください。
【標準テキストのエンコーディング】Unicode(UTF-8)とチェックマークを外してください


すべて設定できたら保存をクリックします。

作ったHTMLファイルを見てみよう

保存されたらデスクトップ(画面)に〇〇.htmlファイルができたと思います。
※僕の場合はmy_first.html

このファイルをダブルクリックするとブラウザが起動してが見ることができます。

HTMLの<>(タグ)について

HTMLファイルを記述するときに「<h1> </h1>」が登場しました。
これはタグというものです。

タグは基本「<h1>( 始まりのタグ)」と「</h1> (終わるのタグ)」がペアになっています。
※「/」がついていなければ始まりタグ ついていれば終わりタグ
このペアに挟まれた文字はWebページの見出しになったり、段落になったりと文字に効果を得ることができます。

「<body></body>」で文字を挟み込むことで画面に文字が表示されるようになります。
最初はこのbodyタグに記述すれば画面に表示されることさえわかれば大丈夫です。

まずは慣れるために3つほど好きなHTMLファイルを作成してみよう!