Web04

Size: px

Start display at page:

Download "Web04"

ひできありの
4 years ago
Views:

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

2 ページの設定ナビゲーションパートサイト ID とグローバルメニューコンテンツパート適当なページに分割し,ASCII 字 ( 半英数 ) でそれぞれのページにタイトルをつけるただし, 最上位階層のページは常に index D.Mitsuhashi 2

3 ナビゲーションとコンテンツ LOGO ナビゲーションパートサイトID グローバルメニュー about LUNCH DINNER DRINK access サイト内で常に表 Lorem ipsum dicat saepe virtute te sea, ex eius debet eripuit has. Partiendo scriptorem mei at. Sea maiorum aliquyam signiferumque ne. Id sit aeque repudiare, no his enim porro augue, cu prompta epicurei definiebas sit. Est cibo assum temporibus cu, cum feugait singulis eu. At sea odio nusquam recusabo, pri ne epicuri consetetur, veniam minimum recusabo per an. Eam justo consulatu ad, postulant sadipscing at sed, persius torquatos sed id. Vix et partiendo reformidans accommodare, usu error erant signiferumque te, delenit hendrerit sadipscing in his. Ad pro nostro detracto, hinc exerci duo ei. Quod oratio feugait vis et, mei rationibus inciderint cu, probo takimata sit no. Id mei aliquam accumsan, vim libris scripserit ne. コンテンツパート D.Mitsuhashi 3

4 構造化書構造化書 ( ツリー ) 構造をす表記法をいたテキスト書論学術書新聞など出し中出し出し出し中出し出し出し中出し出し中出し D.Mitsuhashi 4

5 マークアップ語構造化書を表現する技術テキストに印 ( タグ ) をつけて意味付けをう SGML(Standard Generalized Markup Language) HTML (Hyper Text Markup Language) XML (extensible Markup Language) XHTML(eXtensible Hyper Text Markup Language) D.Mitsuhashi 5

Application Technology Working Group] Apple, Mozilla, Opera によって設 W3C

6 Web 標準技術ブラウザ戦争各ブラウザの表の相違独の HTML Web 標準化 Jeffrey Zeldman ら W3C [World Wide Web Consortium] Web 標準規格の勧告 WHATWG [Web Hypertext Application Technology Working Group] Apple, Mozilla, Opera によって設 W3C のオルタナティブとしての HTML HTML5 Web の進化 D.Mitsuhashi 6

7 Web 標準 (Web Standards) ユニバーサルアクセス環境, 能によらず, 等しく同じ情報が得られる ( バリアフリー ) アクセシビリティユーザビリティへの配慮具体的な技術 HTML 4.01 XHTML 1.0/1.1 CSS 2.0(CSS2.1) HTML5, HTML5.1 CSS3 D.Mitsuhashi 7

Access 20 THINGS I LEARNED ABOUT BROWSERS AND THE

8 広義の HTML5 広義の HTML5 は多くの Web テクノロジを実現する技術群のこと HTML5 Semantics Offline Storage Multimedia CSS3 3D Device Access 20 THINGS I LEARNED ABOUT BROWSERS AND THE WEB D.Mitsuhashi 8

9 HTML5 基礎 D.Mitsuhashi 9

10 HTML の仕組みテキスト書類拡張は.html ファイル名は常に ASCII 字 ( 半英数 ) ダブルクリックで開くと別のプログラムが開くことがあるので注意 D.Mitsuhashi 10

11 拡張の表学内の Windows は拡張を表しない設定になっているマイ PC などを開いて表されるエクスプローラーウインドウから表タブを開きファイル名拡張にチェックをれると拡張が表されるようになる D.Mitsuhashi 11

12 エディタテキスト書類を編集するために特化したソフトウェア学内では Brackets を利する Brackets D.Mitsuhashi 12

13 エディタエディタの機能であるシンタックスカラリングをいると, HTML のタグと地の章が分けされる改やタブによる字下げなどが, 可視化される字数のカウントや調整が楽 D.Mitsuhashi 13

14 ブラウザで表を確認するには? ウインドウ右端のライブプレビューボタンを押す HTML 書類をドラッグ & ドロップする D.Mitsuhashi 14

15 作業中ファイルの表 Brackets で開いたファイルは左側の作業中ファイルに表されるクリックして書類の切り替えをおこなうことができるは編集後未保存状態は書類を閉じる D.Mitsuhashi 15

16 分割ウインドウの使い分割ウインドウボタンを押して 2 つのファイルを同時に表することができるファイル名のドラッグで表を切り替えられる D.Mitsuhashi 16

17 タグとは < 要素名 > 字列 </ 要素名 > 開始タグ終了タグ上記の書式をいて任意の字列を挟み込み書に構造を与えるれ構造の書式をいる <p><a> 東京学 </a> のページへ </p> 包含関係をつくるように記述する D.Mitsuhashi 17

18 Emmet Brackets に Emmet 機能拡張を追加すると HTML や CSS の記述を速化することができる参考 :HTML/CSS を爆速コーディング Emmet (Adobe Creative Station) D.Mitsuhashi 18

19 Emmet を利した HTML テンプレートの記述 Bracket に Emmet をインストールしている場合 ( 学内 PC はインストール済み ) 簡単なショートカットでテンプレートを記述することができるファイルを新規作成しファイル名 ( 拡張を.html とする ) をつけて保存する! として TAB キーを押すとHTMLの基本構造が記述される使語設定が英語 en となっているので本語 ja に変更する必要がある <!DOCTYPE html> <html lang= en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> </body> </html> D.Mitsuhashi 19

20 注意ブラウザでソースを表させるとエディタメモ帳でソースが表されるがそのまま編集作業をおこなわないことメモ帳で編集を継続すると? HTML が独の Microsoft 仕様の HTML に書き換えられる字コードが Shift_JIS に変換される誤って上書き保存すると修復は困難なので絶対にメモ帳で編集をわないように D.Mitsuhashi 20

21 HTML5 の基本構造 DOCTYPE 宣書型の宣 HTML のバージョン html HTML で記述される範囲 head 書全体の設定字コードやタイトル外部ファイルとの連結など body 表される本部 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> タイトル </title> </head> </html> <body> </body> 本文 D.Mitsuhashi 21

22 字コード字コード ( 次回説明します ) Shift_JIS JIS EUC Unicode(UTF-8) D.Mitsuhashi 22

23 タイトル title ページのタイトルを設定するブックマークや検索結果にはこのタイトルが表される <title> 情報処理技法 ( マルチメディアと表現 )I</title> D.Mitsuhashi 23

24 ナビゲーションメインナビゲーションパートは nav そのページの主要コンテンツとなるコンテンツパートは main をいる main は 1 ページにつき 1 回しかつかってはならない <nav> <main> LOGO about LUNCH DINNER DRINK access Lorem ipsum dicat saepe virtute te sea, ex eius debet eripuit has. Partiendo scriptorem mei at. Sea maiorum aliquyam signiferumque ne. Id sit aeque repudiare, no his enim porro augue, cu prompta epicurei definiebas sit. Est cibo assum temporibus cu, cum feugait singulis eu. At sea odio nusquam recusabo, pri ne epicuri consetetur, veniam minimum recusabo per an. Eam justo consulatu ad, postulant sadipscing at sed, persius torquatos sed id. Vix et partiendo reformidans accommodare, usu error erant signiferumque te, delenit hendrerit sadipscing in his. Ad pro nostro detracto, hinc exerci duo ei. Quod oratio feugait vis et, mei rationibus inciderint cu, probo takimata sit no. Id mei aliquam accumsan, vim libris scripserit ne. D.Mitsuhashi 24

25 セクション section 本中意味の上でひとまとまりの章はセクションとして扱う <main> <section> Lorem ipsum dicat saepe virtute te sea, ex eius debet eripuit has. </section> </main> LOGO about LUNCH DINNER DRINK access <main> Lorem ipsum dicat saepe virtute te sea, ex eius debet eripuit has. Partiendo scriptorem mei at. Sea maiorum aliquyam signiferumque ne. Id sit aeque repudiare, no his enim porro augue, cu prompta epicurei definiebas sit. Est cibo assum temporibus cu, cum feugait singulis eu. <section> At sea odio nusquam recusabo, pri ne epicuri consetetur, veniam minimum recusabo per an. Eam justo consulatu ad, postulant sadipscing at sed, persius torquatos sed id. Vix et partiendo reformidans accommodare, usu error erant signiferumque te, delenit hendrerit sadipscing in his. Ad pro nostro detracto, hinc exerci duo ei. Quod oratio feugait vis et, mei rationibus inciderint cu, probo takimata sit no. Id mei aliquam accumsan, vim libris scripserit ne. D.Mitsuhashi 25

26 出し h1, h2, h3 h6 きいレベルの出しから順に h1, h2 <h1>web デザイン実践 </h1> <h2>html の基礎 </h2> Web デザイン実践 HTML の基礎 h1 要素は他にべて字がきく表される傾向にあるが字のきさを指定するために出しタグを使うのではないあくまでも出しのレベルをつけるためにタグ付けをう D.Mitsuhashi 26

27 段落 p (paragraph) 章は段落単位で記述する <h1> 伽藍方式とバザール方式 </h1> <p>linux は破壊的存在なりインターネットのかぼそい糸だけで結ばれた地球全体に散らばった数千人の開発者たちが片手間にハッキングするだけで超一流の OS が魔法みたいに編み出されてしまうなんてほんの 5 年前でさえだれも想像すらできなかったんだから </p> <p> ぼくもできなかった Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれどその頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた 1980 年代半ばぼくは最初期の GNU 協力者の一人だったしネット上にかなりのフリーソフトもリリースしていまでも広く使われているようなプログラムをいくつか (nethack Emacs VC モードと GUD モード xlife など ) 単独または共同で開発してきただからもうやり方はわかってるもんだと思いこんでいた </p> D.Mitsuhashi 27

28 HTML 記述時のコツ HTML ソース (HTML タグで記述されたテキスト書のこと ) に 2 回以上の半スペースタブによるインデント改を含んでも Web ページ上には反映されないコーディング時に適宜改とインデントをうと後で判読しやすい D.Mitsuhashi 28

29 Beautify Brackets の拡張機能である Beautify を利すると HTML を可読性がい表記に動修正してくれる読みにくい場合は Beautify をなうとよい D.Mitsuhashi 29

30 コーディングの練習ページの名称をつけた HTML 書類を作成ツリー構造のコンテンツパートをセクションとし本の項を出しタグ群で記述最下階層の項については p で説明を挿 D.Mitsuhashi 30

Web 設計入門

Web 設計入門 Web デザイン実践 #2-1 構造化文書 HTML5 (1) D.Mitsuhashi 1 ページの設定ナビゲーションパートサイト ID とグローバルメニューコンテンツパート適当なページに分割し,ASCII 文字 ( 半角英数 ) でそれぞれのページにタイトルをつけるただし, 最上位階層のページは常に index D.Mitsuhashi 2 ナビゲーションとコンテンツ LOGO ナビゲーションパート