2時限目

コンピュータ演習Ⅰ
８月７日(日) ２限目
文書修飾とHTML表現
２限目の課題



教科書に掲載されている「文字修飾」を一通
り施した文書を、「WEB掲載」用に作成しよう。
文書は、通常のWORD文書として保存し、ま
た、HTML形式での保存を行う。
WEB掲載用では使えない「文書修飾」があり
ます。それを確認し、WEB用のファイルを仕上
げてみよう。
HTMLのタグ
•
•
•
•
<tag> 記述 </tag>
タグと呼ばれるキーワードが並べられる。
タグは、必ず対応している必要がある。
単独で動作するタグの場合、<tag />と記述すると
開いてすぐに閉じる記述となる。
• <tag1> <tag2> 記述 </tag2> </tag1>
• 入れ子構造になった場合、内側から閉じていく。
ヘッダ部
<head></head>で囲まれた部分がヘッダ部
ヘッダ部には、titleタグなどがくる。
<title></title>
titleで指定された文字列が、ブラウザの「見出し」に
なる。
<meta ・・・・（次ページ）
<style id=”・・・”></style>
書式を「名前」で指定する記述
コンテンツの表現を
明記するための記述
• <meta http-equiv="content-type"
content="text/html;charset=UTF-8" />
• <META http-equiv="content-style-type"
content="text/css; charset=shift_jis">
• 漢字コードや、html/css種別の記載
マルチフレーム
• <frame> </frame>で囲まれた部分が、それぞ
れ独立したhtmlの形態になる。
• <frameset> </frameset>の中に、複数の
<frame></frame>ブロックを記述する。
• <frameset border="0" cols=200,*>
• cols=200,*は、画面左から200ピクセルの部分
で縦に(column方向に）分割することを示す。
フレームを左右に２分割する例
<html>
<head>
<title>わたしのブログ</title>
<META NAME="description" CONTENT="ブログ,○×日記">
<META http-equiv="content-type" content="text/html">
</head>
<a name="_top"></a>
<frameset border="0" cols=200,*>
<frame src="menu.htm" marginwidth=10 scrolling=yes name="menu">
<frame src="bodyTop.htm" marginheight=20 marginwidth=20
scrolling="auto" name="main">
</frameset>
</html>
全体構成
<html>


</head>
<body>

</body>
</html>
bodyブロック
• <body> </body>タグで囲まれた部分が
– 画面本体の記述になる。
– http://www.tagindex.com/
– などを参照のこと
• ブロック内で使われるタグ（一部抜粋）
– table / th / tr / td 「表」の記述、行、列
– h1 / h2 / h3 ・・・
見出し行
– br / hr
改行、横線
– b / i / u / del
太字など文字修飾
–a
リンク
– img
画像表示
table記載
• tableは「表」だが、画面全体を升目状に区切って
使う際のテクニックとしても利用される。
• 「表現方法」は、文法とは別に自習して下さい。
<table>
「表」の開始
<tr>
横方向「行」の始め
<td>
各列の「データ」の始め
</td>
</tr>
</table>
tableによるレイアウト編集
• <table> ・・・
</table>でテーブル全体
– <tr> 行記述 </tr>で、行を区切る
– <td>１枡</td>で、一つの枠を区切る
– このtd に colspanやrowspanを組み合わせて、全体の枠を作る
テクニックはよく使われる。
– align = “center” / “left”などで、「中央揃え」、「左揃え」などを指
定する。
– width=”200” height=”60” などで、幅、高さを指定
<td rowspan=”4”>
縦に４つ連結
<td colspan=”3”> 横に3つ連結
見出し行 / 改行 / 横線
• <h1>このページのタイトル</h1>
• 数字が大きくなるほど見出しレベルが下がってくる。
• （どんどんと小さくなる。）
• htmlでは、通常の制御文字（改行、タブなど）は意
味を持たない。
• 改行する時は、<br />タグを必ず入れる。
• 横線を引く時は、 <hr />
文字サイズの変更
<font size=“+1”> 文字列 </font>

文字の大きさを変える。

10ポイント

12ポイント

16ポイント

22ポイント

32ポイント

40ポイント

54ポイント

72ポイント
表示位置の調整
•
•
<div align=“right”> 右寄せ </div>
<div align=“center”> センタリング </div>


左寄せ

センタリング
右寄せ
文字表示色の変更
<font color=“red”> 文字色(赤) </font>
<font color=“green”> 文字色(緑) </font>




文字色（青）
文字色（赤）
文字色（緑）
「背景色」と「前景色」
フォントを変えるのは注意！






一般的に使えそうな気がするフォント・・・
HG-明朝L
AR P丸ゴシック体
AR P勘亭流H
AR P行書体H
AR P隷書体M
フォントを変える時の注意

フォントを変える場合の注意点



その文書を開く側のパソコンに、フォントがイン
ストールされていない場合には、一番近いフォ
ントに置き換えられてしまう。
フォントをインストールされていないPCでも、確
実にフォントを「フォント」として表示したい場合
には、PDFに変換する。
PDFへの変換は、フリーウェアが利用可能
文字修飾
•
•
•
•
•
•
<b> 太字 </b> bold
<i> 斜体字 </i> italic
<u> 下線 </u> underline
<del> 取り消し線 </del> delete
<font size=”+2” color=”RED”>
文字を”2”大きくし、色は赤にする </font>
リンク
• <a name=”zzzzz” />
• <a href=”xxx.htm”>ファイルへのリンク</a>
• <a href=”#zzzzz” />ファイル内へのリンク</a>
• <a href=”http://www.どこかのサイト/”
target=”_blank”>どこかのサイトへのリンクを
新しいページで開く</a>
画像表示
• <img src=”ファイル名” />
• 画像タグ
– src=”ファイル名”で表示する画像ファイルを指定
– height=”高さ” ピクセルで高さを表示
– width = “幅”
ピクセルで幅を表示
段落ブロック
• <div> </div>
– 囲まれた内部が一つの「段落」として表示される。
– 通常、align= “left”, “center”などのそろえる位置
を記したり、さらに「様式」を定義したスタイルシー
トを引用し、id=スタイルIDなどを記して記載する。
• 他に、段落を区切る機能があるタグ
– <p> </p>,
– <blockquote></blockquote>
様々な修飾は、どう表現されるか




表の挿入
クリップアート
ワードアート
吹き出し・バルーン
HTML形式での保存

様々な文書修飾を入力し、それぞれWORD
で保存した後に、HTML形式で保存して、
HTML形式のファイルを、Explorerで開いて
みよう
２限目の課題

各自の作成したWORD文書を題材に使います。

HTMLの基本構造を整理して下さい。
•
•
WORDに慣れている人は「吹き出し」で、
慣れていない人は、手書きで、「基本構造」の部分に赤を入れて
下さい。
さらに、HTMLの本体ファイルから表示を呼び出している部分、リ
ンクを呼び出している部分を抜き出して、マークして下さい。（吹
き出し、または、手書）
– 手書きの人は印刷して下さい。
– また、電子提出の人は、「学籍番号-CL3-2.docx」で保存し、講師あ
てにメールで送信してください。
– 提出したら、各自休憩に入って下さい。

Download Report