Newest Viewed Downloaded

コンピュータ演習Ⅰ8月7日(日) 2限目 文書修飾とHTML表現

コンピュータ演習Ⅰ

8月7日(日) 2限目 文書修飾とHTML表現

2限目の課題

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

HTMLのタグ

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

ヘッダ部

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

コンテンツの表現を 明記するための記述

漢字コードや、html/css種別の記載

マルチフレーム

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

フレームを左右に2分割する例

わたしのブログ

全体構成

     

bodyブロック

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

table記載

tableは「表」だが、画面全体を升目状に区切って使う際のテクニックとしても利用される。 「表現方法」は、文法とは別に自習して下さい。 「表」の開始 横方向「行」の始め
各列の「データ」の始め
行記述 で、行を区切る で、一つの枠を区切る このtd に colspanやrowspanを組み合わせて、全体の枠を作るテクニックはよく使われる。 align = “center” / “left”などで、「中央揃え」、「左揃え」などを指定する。 width=”200” height=”60” などで、幅、高さを指定

tableによるレイアウト編集

・・・  
でテーブル全体
1枡 縦に4つ連結 横に3つ連結

見出し行 / 改行 / 横線

このページのタイトル

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

文字サイズの変更

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

表示位置の調整

右寄せ
センタリング
右寄せ 左寄せ センタリング

文字表示色の変更

文字色(赤) 文字色(緑) 文字色(青) 文字色(赤) 文字色(緑) 「背景色」と「前景色」

フォントを変えるのは注意!

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

フォントを変える時の注意

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

文字修飾

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

画像表示

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

Showing 1 - 20 of 24 items Details

Name: 
872
Author: 
Ikuo Kobayashi
Company: 
N/A
Description: 
コンピュータ演習Ⅰ8月7日(日) 2限目 文書修飾とHTML表現
Tags: 
font | html | content | frame | head | div | frameset | 文字色
Created: 
8/4/2010 9:55:28 AM
Slides: 
24
Views: 
0
Downloads: 
0
Rating: 
0


> Comment



Share this presentation
|

Comments

Share this presentation:

|
Sitemap