コンピュータ演習Ⅰ ８月７日 ( 日 ) ２限目 文書修飾と HTML 表現. ２限目の課題 教科書に掲載されている「文字修飾」を 一通り施した文書を、「 WEB 掲載」用に作 成しよう。 文書は、通常の WORD 文書として保存し、 また、 HTML 形式での保存を行う。 WEB 掲載用では使えない「文書修飾」があ.

Presentación del tema: "コンピュータ演習Ⅰ ８月７日 ( 日 ) ２限目 文書修飾と HTML 表現. ２限目の課題 教科書に掲載されている「文字修飾」を 一通り施した文書を、「 WEB 掲載」用に作 成しよう。 文書は、通常の WORD 文書として保存し、 また、 HTML 形式での保存を行う。 WEB 掲載用では使えない「文書修飾」があ."— Transcripción de la presentación:

1 コンピュータ演習Ⅰ ８月７日 ( 日 ) ２限目 文書修飾と HTML 表現

2 ２限目の課題 教科書に掲載されている「文字修飾」を 一通り施した文書を、「 WEB 掲載」用に作 成しよう。 文書は、通常の WORD 文書として保存し、 また、 HTML 形式での保存を行う。 WEB 掲載用では使えない「文書修飾」があ ります。それを確認し、 WEB 用のファイル を仕上げてみよう。

3 HTML のタグ 記述 タグと呼ばれるキーワードが並べられる。 タグは、必ず対応している必要がある。 単独で動作するタグの場合、 と記述する と開いてすぐに閉じる記述となる。 記述 入れ子構造になった場合、内側から閉じてい く。

4 ヘッダ部 で囲まれた部分がヘッダ部 ヘッダ部には、 title タグなどがくる。 title で指定された文字列が、ブラウザの「見出 し」になる。 <meta ・・・・（次ページ） 書式を「名前」で指定する記述

5 コンテンツの表現を 明記するための記述 漢字コードや、 html/css 種別の記載

6 マルチフレーム で囲まれた部分が、それ ぞれ独立した html の形態になる。 の中に、複数の ブロックを記述する。 cols=200,* は、画面左から 200 ピクセルの部 分で縦に (column 方向に）分割することを 示す。

7 フレームを左右に２分割する例 わたしのブログ <frame src="bodyTop.htm" marginheight=20 marginwidth=20 scrolling="auto" name="main">

8 全体構成

9 body ブロック タグで囲まれた部分が – 画面本体の記述になる。 – http://www.tagindex.com/ – などを参照のこと ブロック内で使われるタグ（一部抜粋） – table / th / tr / td 「表」の記述、行、列 – h1 / h2 / h3 ・・・見出し行 – br / hr 改行、横線 – b / i / u / del 太字など文字修飾 – a リンク – img 画像表示

10 table 記載 table は「表」だが、画面全体を升目状に区切 って使う際のテクニックとしても利用される。 「表現方法」は、文法とは別に自習して下さ い。 「表」の開始 横方向「行」の始め 各列の「データ」の始め

11 table によるレイアウト編集 ・・・ でテーブル全体 – 行記述 で、行を区切る – １枡 で、一つの枠を区切る – この td に colspan や rowspan を組み合わせて、全体の枠を 作るテクニックはよく使われる。 – align = “center” / “left” などで、「中央揃え」、「左揃え」な どを指定する。 – width=”200” height=”60” などで、幅、高さを指定 縦に４つ連結 横に 3 つ連結

12 見出し行 / 改行 / 横線 このページのタイトル 数字が大きくなるほど見出しレベルが下がっ てくる。 （どんどんと小さくなる。） html では、通常の制御文字（改行、タブなど） は意味を持たない。 改行する時は、 タグを必ず入れる。 横線を引く時は、

13 文字サイズの変更 文字列 文字の大きさを変える。 10 ポイント 12 ポイント 16 ポイント 22 ポイント 32 ポイント 40 ポイント 54 ポイント 72 ポイント

14 表示位置の調整 右寄せ センタリング 右寄せ 左寄せ センタリング

15 文字表示色の変更 文字色 ( 赤 ) 文字色 ( 緑 ) 文字色（青） 文字色（赤） 文字色（緑） 「背景色」と「前景色」

16 フォントを変えるのは注意！ 一般的に使えそうな気がするフォン ト・・・ HG- 明朝 L AR P 丸ゴシック体 AR P 勘亭流 H AR P 行書体 H AR P 隷書体 M

17 フォントを変える時の注意 フォントを変える場合の注意点  その文書を開く側のパソコンに、フォント がインストールされていない場合には、一 番近いフォントに置き換えられてしまう。 フォントをインストールされていない PC で も、確実にフォントを「フォント」として 表示したい場合には、 PDF に変換する。 PDF への変換は、フリーウェアが利用可能

18 文字修飾 太字 bold 斜体字 italic 下線 underline 取り消し線 delete 文字を ”2” 大きくし、色は赤にする

19 リンク ファイルへのリンク ファイル内へのリンク どこかのサイトへのリンク を新しいページで開く

20 画像表示 画像タグ – src=” ファイル名 ” で表示する画像ファイルを指 定 – height=” 高さ ” ピクセルで高さを表示 – width = “ 幅 ” ピクセルで幅を表示

21 段落ブロック – 囲まれた内部が一つの「段落」として表示さ れる。 – 通常、 align= “left”, “center” などのそろえる位 置を記したり、さらに「様式」を定義したス タイルシートを引用し、 id= スタイル ID などを 記して記載する。 他に、段落を区切る機能があるタグ –, –

22 様々な修飾は、どう表現されるか 表の挿入 クリップアート ワードアート 吹き出し・バルーン

23 HTML 形式での保存 様々な文書修飾を入力し、それぞれ WORD で保存した後に、 HTML 形式で保 存して、 HTML 形式のファイルを、 Explorer で開いてみよう

24 ２限目の課題 各自の作成した WORD 文書を題材に使います。 HTML の基本構造を整理して下さい。 WORD に慣れている人は「吹き出し」で、 慣れていない人は、手書きで、「基本構造」の部分に赤を 入れて下さい。 さらに、 HTML の本体ファイルから表示を呼び出している部 分、リンクを呼び出している部分を抜き出して、マークし て下さい。（吹き出し、または、手書） – 手書きの人は印刷して下さい。 – また、電子提出の人は、「学籍番号 -CL3-2.docx 」で保存し、 講師あてにメールで送信してください。 – 提出したら、各自休憩に入って下さい。