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

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

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

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

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

メモ帳(Windows)やテキストエディット.app を使っている人は, ファイルメニューから「新規」を選んで, 下の内容を入力して下さい. 保存ファイル名は, 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>

2021-02-09