レイアウト用のタグ

ページのデザイン、つまりレイアウトをどのようにするか?は、製作者のセンスの問題になります。
しかし、どのような配置にするか?・・・を決めるため?には、それぞれの記事の塊<div>に、名前を付けておく必要があります。
しかしこのタグは、現在のHTMLには、存在しません!
そのため、クラス属性を使って名前を付けておく必要があります。
デザイナーは、wrapperという任意の名を、好んで使います、
そこに、row(列)という、クラスを用いることにします。

そのため、各記事(Article)の塊を、記事の塊(wrapper row class=””)で、
表示します。
HTML全体は、下記のような表示となります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>Top</title>
<meta charset=”UTF-8″>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”apple-mobile-web-app-title” content=”http://www.8341web.com/favicon/favicon.ico”>
<meta name=”application-name” content=”http://www.8341web.com/favicon/favicon.ico”>
<meta name=”theme-color” content=”#ffffff”>
<!– CSS –>
<link href=”layout/styles/main.css” rel=”stylesheet” type=”text/css” media=”all”>
<link href=”layout/styles/mediaqueries.css” rel=”stylesheet” type=”text/css” media=”all”>
<!– Slider –>
<link href=”layout/scripts/responsiveslides.js-v1.53/responsiveslides.css” rel=”stylesheet” type=”text/css” media=”all”>
<!– webfont fontawesome –>
<script src=”https://use.fontawesome.com/e7651820af.js”></script>
<!– favicon –>
<link rel=”shortcut icon” href=”favicons/favicon.ico” title=”faviconの表示” type=”image/x-icon”>
<link rel=”apple-touch-icon” href=”favicons/apple-touch-icon.png” title=”apple用favicon” />
<link rel=”apple-touch-icon” sizes=”57×57″ href=”favicons/apple-touch-icon-57×57.png” title=”apple用favicon_57x57″>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”favicons/apple-touch-icon-72×72.png” title=”apple用favicon_72x72″>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”favicons/apple-touch-icon-76×76.png” title=”apple用favicon_76x76″>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”favicons/apple-touch-icon-114×114.png” title=”apple用favicon_114x114″>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”favicons/apple-touch-icon-120×120.png” title=”apple用favicon_120x120″>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”favicons/apple-touch-icon-144×144.png” title=”apple用favicon_144x144″>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”favicons/apple-touch-icon-152×152.png” title=”apple用favicon_152x152″>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”favicons/apple-touch-icon-180×180.png” title=”apple用favicon_180x180″>
<!–[if lt IE 9]>
<link href=”layout/styles/ie/ie8.css” rel=”stylesheet” type=”text/css” media=”all”>
<script src=”layout/scripts/ie/css3-mediaqueries.min.js”></script>
<script src=”layout/scripts/ie/html5shiv.min.js”></script>
<![endif]–>
</head>

<body>
<h1>大見出し</h1>
<div class=”wrapper row1″><!- ヘッダー領域 ->
<header>ヘッダー名</header>
</div>
<div class=”wrapper row2″><!- ナビゲーション領域 ->
<nav><!- ナビゲーション ->
<ul>
<li>menu_1</li>
<li>menu_2</li>
<li>menu_3</li>
</ul>
</nav>
</div>
<div class=”wrapper row3″><!- 本文コンテンツ ->
<article>
<h2>見出し</h2>
<p>段落</p>
<h3>見出し</h3>
<p>段落</p>
</article>
</div>

<h2>大見出し2</h2>
<h2>大見出し3</h2>
<h2>大見出し4</h2>
<h2>大見出し5</h2>
<h2>大見出し6</h2>
<aside>補足</aside><!- 補足領域 ->

<div class=”wrapper row4″></div><!- フッターnav領域 ->
<div class=”wrapper row5″></div><!- フッター領域 ->
<div class=”wrapper row6″></div><!- 著作権表示領域 ->

<!– Scripts –>
<script src=”http://code.jquery.com/jquery-latest.min.js”></script>
<script src=”http://code.jquery.com/ui/1.10.1/jquery-ui.min.js”></script>
<script src=”layout/scripts/jquery.backtotop.js”></script>
<script>
window.jQuery || document.write(‘<script src=”layout/scripts/jquery-latest.min.js”><\/script>\<script src=”layout/scripts/jquery-ui.min.js”><\/script>’)
</script>
<script>jQuery(document).ready(function($){ $(‘img’).removeAttr(‘width height’); });</script>
<script src=”layout/scripts/responsiveslides.js-v1.53/responsiveslides.min.js”></script>
<script src=”layout/scripts/jquery-mobilemenu.min.js”></script>
<script src=”layout/scripts/custom.js”></script>
<script src=”https://use.fontawesome.com/e7651820af.js”></script>

</body>
</html>

上記でもわかるように、タグは、すべて入れ子になっている!
HTMLに、記述するのは、これだけです
このほかの部分的デザイン要素はすべて、CSSに記述します
当然ですが、表示は、ベタです。
文章と画像が、順に表示されているだけの状態

基本的なHTMLの講義を始めます。

現在WEB上で見られるページが、あまりにもひどいので、HTML5.1の基礎から少しずつタグを覚え、正しくHTMLが書けるよう講義を始めていきたいと思います。
まずはじめに、4.01のDOCTYPE宣言からです。
Strict DTD
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
非推奨要素や属性、またフレームを使用することができません。 要素の配置についても厳しい制限があります。 HTML4.01の本来の仕様に従った最も厳密で正確なDTDです。

Transitional DTD
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
非推奨要素や属性は使用できますが、フレームを使用することができません。 要素の配置については比較的制限が緩やかになっています。

Frameset DTD
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
上記のTransitional DTDとほぼ同じですが、フレームが使用できます

以上の3種類がありました。
HTML5.0からは、一つに統一されました。
<!DOCUTYPE html>
このことにより記述が楽になりました。
現在の最新バージョンは、HTML5.1です。

<!DOCUTYPE>宣言は、どのバージョンのHTMLで、書かれているかを、
ブラウザの、レンダリングに、知らせるものです。

作成したHTMLは必ず正しく書かれているかチェックしましょう

正しい文法によって記述されているかどうかをチェックするのは大変な作業です。
そのため、ツールを使うことをお勧めします。
間違って記述されている行番号とタグについての指摘されます。
これにより正しく記述されていることを、チェック後、サーバーに転送しましょう。