rarySci/index.html
を例にHTMLを
理解する
IPアドレス→ドメイン名
http://www2.mmc.atomi.ac.jp
httpとはHyper Text Transfer Protocol（何でもリンクできるテ キストの通信手順：説明 JPNIC)
www2.mmc.atomi.ac.jp
日本→アカデミック→跡見 →www2というドメイン /~artnavi1 /librarySci /index.html 第1ドメイン 第3ドメイン 第2ドメイン 第4ドメイン の中の というフォルダ の中の というファイル の中の というフォルダ<!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>
<meta name=“author” content=“著者を書く" />
<meta name=“description” content=“説明文を書く" /> <meta name=“keywords” content=“キーワード1,2,3," />
言語、文字コード、タイトル、
著者、説明文、キーワード、
作成日等がデータのデータ
＝メタデータ
<!--
スタイルのタイトルを
書く例
： --> <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" /> <!--ボタンでスタイルを変える仕掛け--> type="text/javascript"><!-- function changeCSS(sURL) { var obj = document.getElementsByTagName( "link"); obj[0].href = sURL; } //--></script> <!—ヘッド部終了--> </head>ルをschema.orgに従う --> <body itemscope itemtype="http://schema.org/WebPage"> <!-- bodyはheaderとnavとsectionとfooterに 分かれている。まずheaderである--> <header id="header"> <!-- span つまりある部分のスタイルを変え る --> <!-- <span class="chu"> <!– form でボタンを押すと仕掛けが動く --> <form>
<input type="button" value="通常"
<input type="button" value="印刷用" onClick="changeCSS('css/print.css')">
<input type="button" value="縦書き" onClick="changeCSS('css/tate.css')"> </form> </span> --> <!– h1:大見出し, h2:次の見出しを書く--> <h1 itemprop="name">情報図書館学</h1> <h2 itemprop="description">図書館情報学に関 する教材等</h2> <!– headerの終わり--> </header>
<!– セクションの始まり -->
<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>
<!– articleはセクション内の
記事-->
<article> <ul> <li itemprop="description">授業シラバス : 図書館情報学やマルチメディア演習授業教材</li> <li itemprop="description">公開講座等： ホームページの作り方等教材</li> <li itemprop=“description”>図書館情報学関 連論文等</li> </ul> </article><!– フッター(脚注)部--> <footer> <p><span itemprop="title"><a href="../index.html" target="_top">ArtNavi</a></span> | <!– オープンアクセスの著作権表示--> <a href="http://creativecommons.org/licenses/by-sa/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-<!– 次ページへのナビゲーション--> <a href=“next01.html">次ページへ</a></span> </p> </footer> </body> </html> 以上は一例で、次にスタイルをスタ イルシートファイルを呼び出す
（例：dunWhite120.css)
大きい */ width:90%; margin:1% auto; background-color:#320; color:white; } /*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%; } 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;
text-align:left; padding:10px; /*背景色と文字色の指定*/ background-color:#210; color:white; } header h2 { text-align:left; } header ul, header li {
/*inlineは改行しない*/ display:inline; } div.hidari{ float:left; line-height:1.5; background-color:#320; color:white; } div.migi{ float:right; /*line-heightは行間*/ line-height:1.5; margin:1px auto; background-color:#320; color:white; }
/*ナビゲーション部の設定*/
nav {
float:right;
font-size:90%;
line-height:1.4;
margin:2px auto;
display:inline;
background-color:#320;
color:white; }
#nav ul li{
display: inline; }
nav.hirari {
background-color:#320;
color:white;
float:right;
font-size:90%;
line-height:1.4;
margin:2px auto; }
section { float:left; width:98%; line-height:1.5; background-color:#320; color:white; } p { margin: 0; } /*aside部の設定*/ aside{ float:right; width:20%; font-size:90%; background-color:#320; color:white; } /*footer部の設定*/ footer { clear:both !important; text-align: right; font-size:85%; background-color:#320; color:white; } form.migi{float:right;} form.hidari{float:left;}
