© 2007-2024, Kyu-hachi TABATA Last updated  2016/03/09
Composer の使い方 (3) ソース編集

画像や音声など、文章以外のものを文章中に盛り込ま せる時には、その挿入したい場所の指示と入れるものの所在やファイルを指示する必要が あります。これを実現するのが、タグなのです。

Composer を使っているとほとんとタグのことを考えずに Web ページを作ることができるのですが、それでも時々、直接、タグを編集しないとダメな場合があります。これを実行す るのがソース編集です。

■１．HTML 文書の基本構造

基本のルールは下記のとおり
１．文書全体 は、<html> で始まり、</html> で終わる。
２．大きくヘッダ部とボディ部に分かれる。
３．ヘッダ部 は、<head>〜</head>で あり、タイトルやキーワード、説明など、ページ情報の記入部。
４．ボディ部 は、<body>〜</body>で あり、本文をいれる。
５．タグは原則２つでひと組み。目的の言葉を挟むように 使う。ただし、１つで機能する例外タグも結構ある（改行や水平線、画像の貼り付けなど）。
具体例を示します。
ソー ス ブ ラウザでの表示
<html>
<head>
  <title>東京グルメマップ</title>
</head>
<body>
  <img alt=“寿司" src="image/26c.jpg" align="right">
  東京グルメマップ<br><br>
  −目次−<br><br>
  <i>寿司</i><br>
  <b>麺類</b><br>
  <hr>
  <font color=purple>画像を入れて見ました。</font>
</body>
</html>
 
 テキスト

■２．基本タグ
<br>
 改行
<hr>
 水平線
<img src="AAAA.jpg"> 画像の貼り付け
<p>〜</p>
段落
<big>〜</big>
 文字の拡大
<small>〜</small>
 文字の縮小
<sub>〜</sub> 下付文字にする
<sup>〜</sup> 上付文字にする
<a href="BB.htm"> 〜 </a> 他の文書をリンクする
<table>
　<tr>
     <td>〜<td>
  </tr>
</table>		 テーブル始まり。
　1行目始まり
　　1列目の内容
　1行目終わり
テーブル終わり。
<b>〜</b>
 文字を強調表示。
<i>〜</i> 文字を斜体表示。
<u>〜</u> 文字に下線を引く。

*1 タグを知りたければ、こ ちら などを利用してください。HTML quick reference


■３．ソース編集画面の呼び出し

エディタ画面（Composer 画面）は標準、HTMLタグ、<HTML>ソース、プレビューの４つの画面を切り替えられるので（下記）、<HTML>ソースを 選ぶ。これらはいつでも切り替えられるので、必要に応じて切り替えながら編集作業をする。

インターネットオプション
■４．ヘッダー部の編集

ヘッダー部はソースを見ないとわからないことが普通です。実際の ソースを見てみましょう（下記）。SEO 対策などで重要です（→少し高度な技 (2) SEO 対策）。
 
ヘッダー部

とびら へ 前へ　次へ
 ↑　トップへ