2013-02-01

１-２ HTMLの構成

DOCTYPE
header
body

1 DOCTYPE宣言

HTMLのタイプ（XHTML1.0やHTML5）や使用する言語を指定する

2 ヘッダーの役割

文字コードやタイトル、リンクタイプを指定する。
一部を除き画面には表示されない。

3 ボディの役割

画面に表示するコンテンツを組み立てる。

基本中の基本のタグを使いコードを記述しました。
この様にセマンティックコーディングで文書構造として
構成するのが現在推奨されている形になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="discription" content="内容">
<meta name="keywords" content="内容">
<title>WWW | HHH</title>
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div id="container">
<div id="head">
<h1>大見出し</h1>
</div><!-- /#head -->
<div id="content">
<h2>小見出し</h2>
<p>本文</p>
<a href="http://www.dummy.com">リンク</a>
<img src="images/001.jpg" alt="android画像">
</div><!-- /#content -->
<div id="sidebar">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div><!-- /#sidebar -->
<div id="footer">
<address>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

上記コードをブラウザーで表示したものがこちらです。

この他にも様々なタグがあり、実際にサイトを制作するには
それらを使いこなす必要があります。
また、この時点では文書構造のままになっているので
HTML以外にも画面を装飾する為のCSSを使い
デザインされた画面へと作り上げます。

次回はこのHTMLにそのCSSを施して
セマンティックコーディングの
デザイン部分を組み立てようと思います。

2013-01-07

HTMLの正しい書き方を覚える

HTML
CSS
SEO対策

1 HTML

Webサイトを作る際の大元になる部分。文書構造として仕上げるのが正しい作り方らしい。
これが正しく作れないと、どんなサイトでも上位表示など夢のまた夢になってしまうという。。。
必ず覚えよう!!

2 CSS

文書構造として仕上げたHTMLを視覚的表現として装飾する役目がある。
逆に言うと、CSSを使う事でHTMLを文書構造として位置づけられる。
HTMLを記述する際はCSSを意識した作り方をする必要がある。

3 SEO対策

HTML を記述していく際もう一つ忘れてはならないのは、検索エンジンへの対応だという。
これがSEO対策ということである。その中身については…中級編で書きましょう。

とにかくなんだかボンヤリ分かりました。
色々なルールが絡みあって複雑化している様に思いましたが
整理できれば凄くシンプルな内容なのかなぁと。。。
まだ解ったり迷ったりフラフラしてる状態ですけど、次に進んで見ようと思います。

では次回は実際に中身を見て理解を深めて行きます。

KEEP YOUR VYBES TO THE FUTURE!!