ソースコードエディタの機能を使う

ソースコードエディタの機能を使うには, ファイル名の拡張子が重要です. サクラエディタ, ミミカキエディット, CotEditor では, ファイル拡張子に応じた機能が自動的に動作します. メモ帳や, テキストエディット.app では残念ながらそのような機能は実装されていません.

サクラエディタ(Windows)の場合:
1. ファイルメニューから「新規作成」を選ぶ.
2. 何も入力していませんが, ファイルメニューから「名前をつけて保存」を選ぶ.
3. ファイル名は, index.html, 保存場所はデスクトップにする.
4. 保存ボタンを押す.
mi(ミミカキエディット, Mac)の場合.
1. ファイルメニューから「新規 → HTML5」を選ぶ.
2. 次ページの内容を入力後に, index.html でデスクトップに保存
CotEditor
1. フォーマットメニュー → シンタックススタイル → HTML
2. 次ページの内容を入力後に, index.html でデスクトップに保存
Koderの場合. 先にファイル名を決めるので, index.html というファイルを作成する.

上のどのエディタでも, ファイル拡張子が html なら, 自動的に HTML モードになりますので, 空のファイルをファイル名指定して保存すれば大丈夫です.

今のままでは, 何も変化が無いように見えますが, 次のページの内容を入力すると, ソースコードエディタの機能が見えます. ここで入力するのは, HTML ソースです. タグと呼ばれる HTML のキーワードが, 着色されて表示されることに注意して下さい.

エディタによっては, 自動的に字下げ(インデント, indent)が起こりますが, そのまま, 字下げをしても, 字下げ部分を消去しても大丈夫です.

入力の際には「XXX」の部分は自分の名前やニックネームにし, プロフィールの部分には自分の事を書いて下さい. また, 1行が長くなりすぎないように, 改行を適宜入力して下さい.

メモ帳(Windows)やテキストエディット.app を使っている人は, ファイルメニューから「新規」を選んで, 次のページの内容を入力して下さい. 保存ファイル名は, index.html, 保存場所がデスクトップなのは, 上と同じです.

メモ帳では, 保存のときに, ファイル名入力の下の「ファイルの種類」を全てのファイル(*.*)とし, さらに下にある「文字コード」で UTF–8 を選ぶようにして下さい.

下の内容を全て入力して, index.htmlというファイル名でデスクトップに保存して下さい.

<!DOCTYPE html>
<html lang="ja">

<!-- Header -->
<head>
<!-- 文字コード指定 -->
<meta charset="UTF-8" />
<!-- スタイルシートの指定 -->
<link rel="stylesheet" type="text/css" href="index.css" />
<!-- ブラウザのタイトルバーに表示させる文字 -->
<title> XXX のページ </title>
</head>

<!-- body 以下が本文 -->
<body>
<!--見出し-->
<h1> ようこそ XXX のページへ </h1>

<hr>
<!--あいさつ文-->
<p>
講義「情報科学演習」で作成した Web ページです。
</p>

<p>
ここには、簡単な自己紹介、基礎ゼミの同級生の紹介、
時間割、HTMLの書き方、その他を置きます。
</p>

<hr>

<h2>
プロフィール
</h2>
<ul>
<li> 星座：猫座 </li>
<li> 血液型：X 型 </li>
<li> 出身地：沖縄県 </li>
<li> 趣味：読書 </li>
<li> 特技 : 新聞紙を10回折る </li>
</ul>

</body>
</html>

2022-05-18