HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC) www2.mmc.atomi.ac.jp 第 3ドメイン 第 1ドメイン 第 4ドメイン 第 2ドメイン 日 本 アカデミック 跡 見 www2というドメイン /~artnavi1 の 中 の というフォルダ の 中 の というフォルダ /librarysci /index.html というファイル の 中 の
HTML5: index.htmlの 中 身 <! ドキュメントのタイプはhtml --> <!DOCTYPE html> <! 言 語 は 日 本 語 --> <html lang="ja"> <! ヘッド 部 のはじまり--> <head> <! 文 字 コードはUTF8--> <meta charset="utf-8" /> <title>タイトルを 書 く</title> <!--[if IE]> <script src="http://html5shiv.googlecode. com/svn/trunk/html5.js"> </script> <![endif]--> <meta name= author content= 著 者 を 書 く" /> <meta name= description content= 説 明 文 を 書 く" /> <meta name= keywords content= キーワード1,2,3," /> 言 語 文 字 コード タイトル 著 者 説 明 文 キーワード 作 成 日 等 がデータのデータ =メタデータ
HTML5: index.htmlの 中 身 <!--スタイルのタイトルを 書 く 例 : --> <meta http-equiv="default-style" content="dun" /> <!--リンクされるスタイル 名 を 書 く 例 : --> <link rel="stylesheet" title="dun" href= css/dunwhite120.css" /> <link rel="stylesheet" title="hanten" href="css/print.css" /> <link rel="stylesheet" title="tate" href="css/tate.css" /> <!--ボタンでスタイルを 変 える 仕 掛 け--> <script type="text/javascript"><!-- function changecss(surl) { var obj = document.getelementsbytagname( "link"); obj[0].href = surl; } //--></script> <! ヘッド 部 終 了 --> </head>
HTML5: index.htmlの 中 身 <!-- bodyつまり 本 体 の 始 まり 固 有 のスタイ ルをschema.orgに 従 う --> <body itemscope itemtype="http://schema.org/webpage"> <!-- bodyはheaderとnavとsectionとfooterに 分 かれている まずheaderである--> <header id="header"> <!-- span つまりある 部 分 のスタイルを 変 え る --> <!-- <span class="chu"> <! form でボタンを 押 すと 仕 掛 けが 動 く --> onclick="changecss('css/dunwhite120.css')"> <input type="button" value=" 印 刷 用 " onclick="changecss('css/print.css')"> <input type="button" value=" 縦 書 き" onclick="changecss('css/tate.css')"> </span> --> </form> <! h1: 大 見 出 し, h2: 次 の 見 出 しを 書 く--> <h1 itemprop="name"> 情 報 図 書 館 学 </h1> <h2 itemprop="description"> 図 書 館 情 報 学 に 関 する 教 材 等 </h2> <! headerの 終 わり--> </header> <form> <input type="button" value=" 通 常 "
HTML5: index.htmlの 中 身 <! セクションの 始 まり --> <section> -> <! セクション 内 のナビゲーション - <nav> <! pは 段 落 --> <p>ナビゲーション</p> <! ul とli は 箇 条 書 き --> <ul> <! <a href= ファイル 名 > 呼 び 出 し 語 </a> --> <li> <a href="sillabus.html" target="_top"> 授 業 シラバス</a></li> <li> <a href="koukaikouza/index.html"> 公 開 講 座 等 </a> </li> <li> <a href="repository/index.html" target="_top"> 関 連 論 文 等 </a></li> </ul> </nav> <! articleはセクション 内 の 記 事 --> <article> <ul> <li itemprop="description"> 授 業 シラバス : 図 書 館 情 報 学 やマルチメディア 演 習 授 業 教 材 </li> <li itemprop="description"> 公 開 講 座 等 : ホームページの 作 り 方 等 教 材 </li> <li itemprop= description > 図 書 館 情 報 学 関 連 論 文 等 </li> </ul> </article> </section>
HTML5: index.htmlの 中 身 <! フッター( 脚 注 ) 部 --> <footer> <p><span itemprop="title"><a href="../index.html" target="_top">artnavi</a></span> <! オープンアクセスの 著 作 権 表 示 --> <a href="http://creativecommons.org/licenses/bysa/3.0/">cc-by-sa</a> <span itemprop= name > 作 者 : 誰 それ</span> <! webページ 作 成 日 --> <time itemprop="startdate" datetime="1996-10- 15">1996 年 10 月 5 日 </time> - <time itemprop="lastdate" datetime="1996-10- 15">2014 年 </time> <span itemprop="url"> <! 次 ページへのナビゲーション--> <a href= next01.html"> 次 ページへ</a></span> </p> </footer> </body> </html> 以 上 は 一 例 で 次 にスタイルをスタ イルシートファイルを 呼 び 出 す ( 例 :dunwhite120.css)
スタイルシートの 例 body { /* 背 景 焦 げ 茶 文 字 白 120% 大 きい */ width:90%; margin:1% auto; /*aはリンクの 色 等 */ a{ color:yellow; } a:visited{ color:#ff6; } /*hは 見 出 しの 大 きさ*/ h1{ font-size:135%; } h2{ font-size:130%; } h3{ font-size:125%; } h4{ font-size:120%; } h5{ font-size:115%; } h6{ font-size:110%; } /*p.rightは 右 寄 せ 段 落 */ p.right {text-align: right;} p.center {text-align: center;} p.left {text-align: left;} /*header 以 下 のスタイル 設 定 */ header, nav, section, footer { /*display:blockは 前 後 に 改 行 */ display:block; /*マージンとパディングは 余 白 */ margin:1px auto; padding:5px; }
スタイルシートの 例 header { text-align:left; padding:10px; /* 背 景 色 と 文 字 色 の 指 定 */ background-color:#210; header h2 { text-align:left; } header ul, header li { /*inlineは 改 行 しない*/ display:inline; } div.hidari{ float:left; line-height:1.5; margin:1px auto; div.migi{ float:right; /*line-heightは 行 間 */ line-height:1.5; margin:1px auto; color:white; }
スタイルシートの 例 /*ナビゲーション 部 の 設 定 */ nav { float:right; font-size:90%; line-height:1.4; margin:2px auto; display:inline; #nav ul li{ display: inline; } nav.hirari { color:white; float:right; font-size:90%; line-height:1.4; margin:2px auto; }
スタイルシートの 例 /*セクション 部 の 設 定 */ section { float:left; width:98%; line-height:1.5; p { margin: 0; } /*aside 部 の 設 定 */ aside{ float:right; width:20%; line-height:1.3; font-size:90%; /*footer 部 の 設 定 */ footer { clear:both!important; text-align: right; font-size:85%; form.migi{float:right;} form.hidari{float:left;}