1 / 24

コンピュータ演習Ⅰ

８月７日 ( 日 ) ２限目 文書修飾と HTML 表現. コンピュータ演習Ⅰ. ２限目の課題. 教科書に掲載されている「文字修飾」を一通り施した文書を、「 WEB 掲載」用に作成しよう。 文書は、通常の WORD 文書として保存し、また、 HTML 形式での保存を行う。 WEB 掲載用では使えない「文書修飾」があります。それを確認し、 WEB 用のファイルを仕上げてみよう。. HTML のタグ. <tag> 記述　 </tag> タグと呼ばれるキーワードが並べられる。 タグは、必ず対応している必要がある。

gloria-sweet
Download Presentation

コンピュータ演習Ⅰ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. コンテンツの表現を明記するための記述 • <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種別の記載

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

  7. フレームを左右に２分割する例 <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>

  8. 全体構成 <html> <!-- コメント --> <!-- 全体が、htmlのタグで囲まれる ｰｰ> <head> <!-- headタグで囲まれているのがヘッダ部 --> </head> <body> <!-- bodyタグで囲まれている部分に、本体が入る --> </body> </html>

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

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

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

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

  13. 文字サイズの変更 <font size=“+1”> 文字列 </font> • 文字の大きさを変える。 • 10ポイント • 12ポイント • 16ポイント • 22ポイント • 32ポイント • 40ポイント • 54ポイント • 72ポイント

  14. 表示位置の調整 • <div align=“right”> 右寄せ </div> • <div align=“center”> センタリング</div> • 右寄せ • 左寄せ • センタリング

  15. 文字表示色の変更 <font color=“red”> 文字色(赤) </font> <font color=“green”> 文字色(緑) </font> • 文字色（青） • 文字色（赤） • 文字色（緑） • 「背景色」と「前景色」

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

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

  18. 文字修飾 • <b> 太字 </b> bold • <i> 斜体字</i> italic • <u> 下線 </u> underline • <del> 取り消し線</del> delete • <font size=”+2” color=”RED”> • 文字を”2”大きくし、色は赤にする </font>

  19. リンク • <a name=”zzzzz” /> • <a href=”xxx.htm”>ファイルへのリンク</a> • <a href=”#zzzzz” />ファイル内へのリンク</a> • <a href=”http://www.どこかのサイト/” target=”_blank”>どこかのサイトへのリンクを新しいページで開く</a>

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

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

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

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

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

More Related