Web05

Size: px

Start display at page:

Download "Web05"

ひでたつひろき
5 years ago
Views:

1 情報処理技法 ( マルチメディアと表現 )I 第 4 回構造化書 HTML(2) D.Mitsuhashi 1

2 字化けのしくみ D.Mitsuhashi 2

3 字コード字コードコンピュータ上では, 字は数値として扱われる数値と字との対応規則を字コードというアルファベットと数字をあらわすには, 2 進数で 8 桁 (8bit = 1byte) あればりる ASCII コード 1byte で 1 字を表現する字コード 1byte 字, 半,ASCII 字ともいう D.Mitsuhashi 3

4 字コード本語を表するには 2byte 以上必要歴史的経緯により複数の字コードが存在字コードの指定を誤る ( もしくは指定をしない ) と別の字コードで数値と字の対応を試みるので結果として字化けがじる D.Mitsuhashi 4

5 字コードの種類 Web で使われる本語の代表的な字コード Shift_JIS 旧 Windows 旧 MacOS JIS(ISO-2022-JP) 電メール EUC UNIX 系 OS 多語字コード Unicode( いくつか形式があるが Web でいられるのは UTF-8) 多くの Web サービス macos Windows 講義では UTF-8 をいるエディタによっては UTF-8N を選択できるその場合は UTF-8N を選択すること D.Mitsuhashi 5

6 機種依存字字コードでは数値と字の対応がとられているが数値のが余っている余った数値部分に絵字や特殊な記号を各ベンダーが独に拡張機種依存字参考 URL 機種依存字の歴史 : 字コードの部屋 D.Mitsuhashi 6

7 予約字例題以下のテキストを HTML で記述してみよう HTML は <h1> 以降は <h2> をいる HTML タグの書き出しのタグ <h1> <h6> 段落のタグ <p> 字コードについて <h1>html 入門 </h1> <h2> タグの書き方 </h2> <h2> 見出しのタグ <h1> <h6></h2> <h2> 段落のタグ <p></h2> <h2> 文字コードについて </h2> D.Mitsuhashi 7

8 予約字タグなどで既に利されている字はそのままでは地の章で記述する事ができないこのような字を予約字という予約字を記述するには名前字参照という記述法で代替する D.Mitsuhashi 8

9 名前字参照代表的な名前文字参照 < < > > & & " " ' ' 参考 Named character references:w3c 字実体参照数値字参照 :W3G D.Mitsuhashi 9

10 HTML5 基礎 D.Mitsuhashi 10

11 セクショニング HTML5 ではページの構造上意味のある区画 ( セクション ) を区切るためのタグが意されているセクショニングにいるタグ section 途意味内容上ひとかたまりのセクション article 本から独し内容が完結しているセクション ( コラムなど ) nav aside ナビゲーションにいるセクションサイドメニューなどコンテンツ以外のセクション header ヘッダー ( ページ上部 )( サイト ID など ) footer フッター ( ページ下部 )( 著作権表記など ) D.Mitsuhashi 11

12 セクショニングの例 header サイト ID やロゴイメージ画像などグローバルリンク nav 内容に直接関係ないバナーやページ内リンクなど aside section 主に章で表現されるコンテンツ部 article この部分だけで完結する記事著作権表記やメールアドレスなど欄外の情報 footer D.Mitsuhashi 12

13 セクションのコーディング例 <header>html5 で書こう </header> <nav>top ABOUT ACCESS</nav> <aside>link</aside> <section> <h1>html5 とは </h1> <h2>web とブラウザの歴史 </h2> <h1> コーディングをしてみよう </h1> <article> コラム </article> </section> <footer> 2019 Inazo NITOBE</footer> D.Mitsuhashi 13

14 参考資料 main について main 要素はページ中で最も重要なコンテンツをグループ化するためにいるセクショニングタグではないナビゲーションパート ( サイト ID やグローバルリンク ) 著作権表記ページ内サブリンクバナーなどは含まない D.Mitsuhashi 14

15 強勢と強調 em 字の強勢重要度のさを表す地のとトーンを変えるときにいるブラウザによっては斜体表記 strong 字を強調する em よりも重要度がい項 <em> 文字の強勢 </em> <strong> 文字の強調 </strong> D.Mitsuhashi 15

16 参考資料上付き字下付き字 sup 上付き字 3<sup>2</sup> sub 下付き字 CO<sub>2</sub> D.Mitsuhashi 16

17 参考資料引 cite 引箇所にいる <p> 芥川龍之介侏儒の言葉は以下のような書き出しから始まる </p> <cite> 侏儒の言葉は必ずしもわたしの思想を伝えるものではない唯わたしの思想の変化を時々窺わせるのに過ぎぬものである </cite> D.Mitsuhashi 17

18 箇条書き箇条書きは ul (unordered list) と li (list item) という 2 つのタグをいる書式はれ構造 ul 箇条書きの始まりと終りをす li 箇条書きの項 D.Mitsuhashi 18

19 箇条書き <ul> <li>web Browser</li> <li>microsoft Office</li> <li>text Editor</li> </ul> Web Browser Microsoft Office Text Editor D.Mitsuhashi 19

20 多段箇条書き <ul> <li>web Browser <ul> <li>google Chrome</li> <li>safari</li> <li>firefox</li> </ul> </li> <li>microsoft Office <ul> <li>microsoft Word</li> <li>microsoft Excel</li> </ul> </li> </ul> Web Browser Google Chrome Safari Firefox Microsoft Office Microsoft Word Microsoft Excel 1 段の項 li 要素の中で ul を展開する D.Mitsuhashi 20

21 番号つき箇条書き ol (ordered list) 番号つき箇条書きの始まりと終りをす li (list item) 箇条書きの項通常の箇条書きと組み合わせて多段箇条書きも可能 <ol> <li>web Browser</li> <li>microsoft Office</li> <li>text Editor</li> </ol> 1. Web Browser 2. Microsoft Office 3. Text Editor D.Mitsuhashi 21

22 参考資料出しつき箇条書き dl (definition list) 出しつき箇条書きの始まりと終りをす dt (definition title) 出し項 dd (definition description) 説明の項 <dl> <dt>google Chrome</dt> <dd>google 製ブラウザ </dd> <dt>firefox</dt> <dd>mozilla 製ブラウザ </dd> <dt>safari</dt> <dd>apple 製ブラウザ </dd> </dl> D.Mitsuhashi 22

23 強制改 br の構成に関係なく強制的に改したい場合にいる 2 度以上の強制改を使ってレイアウトをなう事は間違い終了タグは不要 XHTML ではすべてのタグにおいて終了タグを意する必要があったそのため特に開始タグと終了タグの間に何も記しない場合に限り省略書式で表現した省略書式はタグ名の後に 1byte スペースをあけてスラッシュを書くこの講義では XHTML 式の表記を推奨する <br /> D.Mitsuhashi 23

24 平罫線 hr 中に平罫線を差し挟む罫線のデザインは CSS で調整可能 br 同様, 省略書式をいるスラッシュの前に半スペース <hr /> D.Mitsuhashi 24

25 HTML5 でのタグ表記法 HTML5 では HTML 4.01 と XHTML のいずれのタグ表記法をいても構わない字字いずれでもよいタグの省略表記はしてもしなくてもよいただし講義では XHTML 式の表記に統する <BR> <br> <br /> HTML 3.2 HTML 4.01 XHTML 1.0/1.1 D.Mitsuhashi 25

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられるコンテンツモデルから要素の中に何を含んでよいかが決定される参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models