読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

正しい文書構造とページ遷移

セマンティックなマークアップ

  • セマンティック=意味をきちんと考えた(例: そのテキストは「見出し」なのか「通常のパラグラフ」なのか、見出しならばh1~h6要素のどれでマークアップすべきか)
  • セマンティックなマークアップによって、そのページは自然とマシンフレンドリーな状態になる。
  • セマンティックなマークアップで制作したページは、アクセシビリティSEOの両面で最適な状態になる。
  • その上で、ヒューマンフレンドリーとクローラーフレンドリーという視点で考える。



3日間のまとめ
  • 以下のように表示させなさい
  • 管理フォルダーの中に「season」という名前のフォルダーを作成する
  • その中に「index.html」を作成する
  • その他「spring」「summer」「fall」「winter」というフォルダー内にHTMLドキュメント「index.html」を作成する
  • それぞれのページに必要な構造を作成しリンクする


四季の風景
日本では春・夏・秋・冬、それぞれの季節に風景の様々な変化を感じることができます。

春の風景

夏の風景

秋の風景

冬の風景

ホームへ戻る
  • 画像は適宜

f:id:web-0818:20161017022235j:plainf:id:web-0818:20161017022241j:plainf:id:web-0818:20161017022247j:plainf:id:web-0818:20161017022253j:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>四季の風景</title>
</head>
<body>
<h1>四季の風景</h1>
<p>日本では春・夏・秋・冬、それぞれの季節に風景の様々な変化を感じることができます。
</p>
<table border="0" cellpadding="5">
<tr>
<td><a href="spring/index.html"><img src="img/spring.jpg" alt="春" width="200"></a></td>
<td><a href="summer/index.html"><img src="img/summer.jpg" alt="夏" width="200"></a></td>
<td><a href="fall/index.html"><img src="img/falljpg" alt="秋" width="200"></a></td>
<td><a href="winter/index.html"><img src="img/winter.jpg" alt="冬" width="200"></a></td>
</tr>
<tr>
<td><a href="spring/index.html"></a></td>
<td><a href="summer/index.html"></a></td>
<td><a href="fall/index.html"></a></td>
<td><a href="winter/index.html"></a></td>
</tr>
</table>
</body>
</html>

※table要素の属性はエラーですが、この段階の見栄えとして記述しています。
※今後、CSSで記述することになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>春の風景</title>
</head>
<body>
<h1>春の風景</h1>
<p><img src="../img/spring.jpg" alt="春"></p>
<p><a href="../index.html">ホームへ戻る</a></p>
</body>
</html>