Chapter3-一般的なレイアウト(2カラムレイアウト)その1-HTMLの説明

Chapter3-一般的なレイアウト(2カラムレイアウト)その1-HTMLの説明

HTMLソースを説明します。HTMLソースsample3.htmlの注意事項を赤い字で記しています。付属のhtmlを使用して下さい。


<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>

上記の部分は如何なる場合も変更しないでください

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS” />
必須

<meta http-equiv=”Content-Style-Type” content=”text/css” />必須

<meta name=”description” content=”初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座” />ここにホームページの紹介文を最大で124文字、出来れば64文字以内で

<title>HTMLCSS.biz-ホームページ制作講座</title> SEO的に最重要、最重要キーワードを記述

<link rel=”start” href=”sample3.html” /> 省略可

<link href=”style3.css” rel=”stylesheet” type=”text/css” /> スタイルシート名を指定

Google Analyticsを入れる場合はここに

</head>

<body>

<div id=”container”> コンテナーブロックの開始

<div id=”banner”> バナーブロックの開始

<h1>HTMLCSS.biz-ホームページ制作講座</h1> <h1>タグの使用は1ページで1回だけで

<h2>初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座</h2>

</div> バナーブロックの終了

<div id=”contents”> コンテンツブロックの開始

<h3>はじめに</h3>

<p>「HTMLCSS.biz-ホームページ制作講座」はHTMLとスタイルシート(CSS)が始めての人が、本格的な商用ホームページやアフィリエイトサイトを作成出来るようになる事を目的としています。
本格的なホームページとは、見た目が格好良く、HTML文法がパーフェクトで、SEO対策もパーフェクトであることにより、実践により、集客、稼げるホームページということです。<br />

「HTMLCSS.biz-ホームページ制作講座」の特徴は単なるタグや属性のリファレンスではなく、実際にホームページを作成するためのチュートリアルです。従いまして、学術的にHTML、CSSを学ぶ方向けではありません。<br />

準備するものはWindows付属のメモ帳ですが、<span class=”cont”><a href=”http://hide.maruo.co.jp/”>秀丸エディタ</a></span>等があるほうが尚良いです。他にダウンロードするソフトがありますが、次章でダウンロード先を後章で利用方法について説明します。<br /> <span class=”cont”>を使用しリンク部分をメニュー部分と異なる色設定に

「HTMLCSS.biz-ホームページ制作講座」ではXHTML1.0準拠にて説明を心がけています。HTMLでは大文字、小文字共に使えますが、XHTMLでは小文字のみのため、当マニュアル内では全て小文字表記となります。</p>

<h3>当教材の構成について</h3>

<p class=”c2″>このマニュアル<br />

HTMLファイル、sample1.html~sample8.html<br />

スタイルシート、style1.css~style8.css</p>

<h3>HTMLについて</h3>

<p class=”c2″>HTMLとは<span class=”cont”>

<a href=”http://ja.wikipedia.org/wiki/HyperText_Markup_Language”>

HyperText Markup Language</a></span>の略です。文書の論理的な構造を示す言語です。<br />

HTMLは<span class=”cont”><a href=”http://www.w3.org/”>W3C(World Wide Web Consortium)</a></span>という非営利団体により規格が定められています。<br />XHTMLとは<span class=”cont”>

<a href=”http://ja.wikipedia.org/wiki/Extensible_HyperText_Markup_Language”>Extensible HyperText Markup Language</a></span>の略で、XMLの文法で再定義されたコンピュータ言語です。W3Cにより規格が定められています。</p>

<h3>スタイルシート(CSS)について</h3>

<p class=”c2″>CSSは<span class=”cont”>

<a href=”http://ja.wikipedia.org/wiki/Cascading_Style_Sheets”>Cascading Style Sheets</a></span>の略です。HTMLやXHTMLで見栄えを定義する仕様です。<br />

CSSはW3Cにより規格が定められています。</p>

<br />

</div> コンテンツブロックの終了

<div id=”leftsidebar”> 左ナビゲーションブロックの開始

<ul>

<li><a href=”../1/sample1.html”>サンプル1-1カラムレイアウトその1</a></li>  samplex.htmlは適切なhtml名に置きかえてください

<li><a href=”../2/sample2.html”>サンプル2-1カラムレイアウトその2</a></li>

<li><a href=”sample3.html”>サンプル3-2カラムレイアウトその1</a></li>

<li><a href=”../4/sample4.html”>サンプル4-2カラムレイアウトその2</a></li>

<li><a href=”../5/sample5.html”>サンプル5-右ナビゲーションその1</a></li>

<li><a href=”../6/sample6.html”>サンプル6-右ナビゲーションその2</a></li>

<li><a href=”../7/sample7.html”>サンプル7-3カラムレイアウトその1</a></li>

<li><a href=”../8/sample8.html”>サンプル8-3カラムレイアウトその2</a></li>

</ul>

</div> 左ナビゲーションブロックの終了

</div> コンテナーブロックの終了

<address>
Copyright ©2015- あなたのホームページ名or会社名 All Rights Reserved.<br />

Powered by<span class=”cont”><a href=”http://www.htmlcss.biz”>HTMLCSS.biz-ホームページ制作講座</a></span>

</address>著作権リンクの削除禁止

</body>

</html>

 

スタイルシートの説明」に進んで下さい。