4.4.1
>python -m http.server
結果
4.4.3 HTMLスケルトン
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<div id='viz'>Hello</div>
<link rel="stylesheet" href="style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="script.js" async></script>
Webブラウザーのアドレス欄にhttp://localhost:8000とアクセスする
結果
4.4.4 コンテンツのマークアップ
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="my-chart-wrapper" class="chart-holder dev">
<div id="my-chart class="bar chart">
this is a placeholder,with paremt #my-chart-wrapper
</div>
</div>
</body>
結果
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="inline-examples">
<img src="toudai.jpg" id="prettypic">
<p>This is a <a href="link-url">link</a> to
<span class="url">link-url</span></p>
</div>
</body>
結果
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<ol>
<li>First item</li>
<li>second item</li>
</ol>
</body>
結果
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<table id="chart-data">
<tr>
<th>Name</th>
<th>Category</th>
<th>Country</th>
</tr>
<tr>
<td>Albert Einstein</td>
<td>Physics</td>
<td>Switzerland</td>
</tr>
</table>
</body>
結果
4.4.5CSS
<!-- index.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#my-viz {font-family:'Helvetica Neue'
Helvetica,Arial,sans-serif;}
#lead {font-size:150%;}
.alert {color:red;background: yellow}
</style>
<body>
<div id="my-viz">
<div id="lead">
<h2>A Leader header</h2>
<p>Some enlarged text for
<span class="alert">
emphasis
</span>
</p>
</div>
<p>
and some normal sized text with our chosen font
</p>
<div id="chart-horder">
<svg></svg>
</div>
</div>
</body>
結果
