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

今の状態で, gedit のウィンドウ上部の開くボタンの横にある + の文字があるアイコンをクリックします. そうすると, 入力画面のすぐ上に新しいタブができて「編集中のドキュメント」となります. ここで次のようにメニューをたどります. メニューは, 保存ボタンの横にある $\fbox{$\equiv$}$ の形のボタンです.

表示 → ハイライトモード → HTML として, 上部の選択ボタンをクリック.

今のままでは, 何も変化が無いように見えますが, 下の下線以下の内容を入力すると, ソースコードエディタの機能が見えます. キーボードに慣れていない人は, 手入力をして慣れる努力をして下さい.

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

入力中, 文字が色付けされて表示されますが, これは Gedit(テキストエディター)の機能です. 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>

SUGA Shuichi
2023-05-19