大変申し訳ありませんが、不定期に更新させていただくことになります。
これからもどうぞよろしくお願いいたします。
]]>第5回html講座をはじめたいと思います。
いやぁ、この時間にアップしていたのでは月曜日発行としてもいいくらいですね・・・Orz
でも、一応日曜日発行なので、そこは突っ込まないでくださいなｗ
さて、本題に入りたいと思います。
]]> 今回はアンカータグについて少々説明したいと思います。アンカータグってなにと思われるかもしれませんが、アンカータグってのはリンク（ハイパーリンク）機能をつけるためのタグです。
例として
<a href="http://hpfactory.com/">HP Factory</a>
と記述します。
実際に表示させると
となります。
クリックするとわかるのですが、そのままページが切り替わりますのでクリックはしないでくださいね。
タグの説明をすると、href="・・・"となっている、この・・・の部分にリンクさせたいurlを絶対指定もしくは相対指定で指定します。
絶対指定というのは上記の例で書かれているようにhttp://から始まるURLのことです。
相対指定というのはサーバ上のファイル位置から導き出される表示でソースを見たときに../index.htmlとかなっていれば、相対指定です。ちなみにこの表示だと現在のフォルダの上層フォルダのindex.htmlへのリンクとなります。
リンク機能はHTMLで最も重要な機能です。この機能をマスターしてさらにホームページの制作に磨きを掛けてください。
]]>
こんにちは。本日のHTML講座をはじめたいと思います。
本日は前回のHTML文に見出しと小見出しを加えて生きたいと思います。
この見出し、小見出しがSEO的にも重要ですのでしっかり覚えてください。
1.基本文
まず、前回の保存ファイルを開いてください。そして、例2の青文字の部分を追加していきたいと思います。
<例 1>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTMLについて学ぼう</title>
</head>
<body>
<h1>HTMLについて学ぼう</h1>
<h2>HTMLって？</h2>
<p> HTML(Hyper Text Markup Language)はWorld Wide Webで使用される言語です。まぁ、ホームページを作成するために使う言語です。ブラウザというプログラムを通すことでどんなパソコンからでも情報を確認できることを目的に開発されました。</p>
<p> 本来、HTMLで できることは文章を構造化(Markup)することだけです。構造化といっても、題名、文章の強調や、打消しなどの役割を指定することで、装飾をすること ではありません。装飾の機能を持たせてしまったので、本来の目的(どんなパソコンからでも情報を確認できること)を達成することができなくなったので、現 在、装飾はHTML文から分けて、スタイルシートで記述することを求められています。</p>
</body>
</html>
【説明】
今回追加した部分で重要なところはまず、<title></title>で入力されたところと<h1><h2>タグとなります。
まず、titleタグで囲まれた文はそのHTML文のタイトルとなります。通常の表示やお気に入りに登録した際に表示される文となり、SEOにもとても重要です。どのような簡単なHTML文でも必ず入力するようにしてください。
次に見出しのタグとなるHタグとなります。Hタグと書きましたのであれっと思った方もいるかもしれません。
実は、数字の部分は重要度を表す表示で１がもっとも重要な見出し、2,3となるごとに重要度が下がっていき、6まであらわします。
作文でもはじめに題名を書き、各章ごとに見出しをつけますね。それと同じです。
各サーチエンジンはこの見出しを重要視しており、この見出しのあるなしがSEOには重要です。
SEO的にも１を一番、重要視するのですが、作文と同じで大見出しがいくつもあるものはないと思います。
そのため、1を何回も使ってしまうとスパム行為(迷惑行為)となり、検索エンジンで検索してもらえなくなりますので注意してください。
さて、補足ですが、ｐタグは文章の段落を意味するタグです。
本日はここまで
次回はリンクのつけ方について講義を行いたいと思います。
]]>では、基本的なコーディングからはじめたいと思います。私はXHTMLでの記述をメインにしていますのでXHTMLで解説していきます。では、テキストを開き、下記を記述し保存します。
<例 1>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">・・・I
<html xmlns="http://www.w3.org/1999/xhtml">・・・II
<head>・・・III
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />・・・IV
<title>無題ドキュメント</title>・・・V
</head>
<body>・・・VI
こんにちは
</body>
</html>
<説明>
この黒色の文を記述をして、.htmlを拡張子として保存すれば、「こんにちは」と表示されるHTMLが完成します。
Iの説明
宣言文
xhtmlのドキュメントとしての宣言文です。
今回はXHTMLとHTMLの過渡期としての指定を意味する「Transitional」を指定しています。
この文はこのまま記述してください。
IIの説明
htmlタグ
中の内容をｈｔｍｌとして意味させるタグです。この中にヘッダーと本文を記述します。
IIIの説明
headタグ
このファイルの情報（作者や外部スクリプト、外部CSS、タイトル、概要）を記述するタグです。
IVの説明
metaタグ
作者や外部スクリプト、外部CSS、タイトル、概要を規定するタグです。
Vの説明
titleタグ
ファイルの内容に即したタイトルを指定するタグです。SEO対策を行うには必須のタグです。
VIの説明
bodyタグ
ここに本文を記述します。
さて、本日はこれで終わりとさせていただきますが、これでHTML文を作成する第一歩を踏んだわけです。
次回はこの内容をさらに詳しく作成し、ひとつのコンテンツを作成させてみたいと思います。
]]>まず、HTMLを記述するのに必要なものはテキストで記述できるプログラム。たとえば、windowsであれば、メモ帳などです。office系のソフトはHTMLを記述するのには適しません。Adobe社のドリームウェーバーやIBM社のホームページビルダーなどコーディングをするための専門のプログラムもあります。ミスを軽減するためや、テンプレート化して一気に作成することができますが、簡単なものやタグ（後ほど説明）を覚えてしまえば、これらのソフトはなくても問題ないです。
]]> HTMLの全体構造HTMLの文章の全体構造は
上記3つの部分から構成されています。
1. HTMLのバージョン情報
HTMLのバージョン情報とはこのHTML文章はこのバージョンを基準に制作されていますとブラウザや、変更を行う人に教えるものです。
例）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. ヘッダ部分
制作者、制作日、タイトル、概要など文章に関する情報が記述されているところです。
例）
<title>奈良/大阪/全国のHP(ホームページ)制作・運営・管理ならHP Factoryへ</title>など
3. ボディ部分
文章のコンテンツ、本文が記述されたところです。
例)
<h2>HP作成について</h2>
<div>
<p><strong> HP FACTORY</strong>は奈良・大阪を拠点に <strong>ホームページのデザイン・制作・管理・運営 ・WEBシステムの制作・ビジネスブログ構築・CMS構築</strong> などを行っています。</p>
<p> <strong>ホームページ</strong>を<strong>XHTML ＋ CSS</strong> のW3Cに準拠した制作を行うことによって、SEO対策を考慮した<strong> WEBデザイン</strong>をご提案いたします。</p>
<p> また、私どもではテンプレートを使っての安売りは一切いたしません。</p>
<p> お客様個々の事情に合わせた<strong>デザイン設計・制作</strong> を行っております。</p>
</div>
タグについて
タグとはHTMLをマークアップするためのプログラムみたいな記述のことです。
HTML文章はまず、XMLというデータを扱うために作られた言語を基にしています。そのため、タグというものを使います。
タグは開始タグと終了タグがあり、開始タグと終了タグではさまれた内容をマークアップします。<>ではさまれた半角英数字が開始タグとなり、</ >ではさまれた半角英数字が終了タグとなります。
例1） <p>初めてのHTML</p>
例1を使いますと、<p></p>が文の段落を意味するタグで「初めてのHTML」をマークアップしていることになります。
さらにこの<p>の中に属性や属性値が追加されることもあります。それは次回以降で説明したいと思います。
ただし、例で上げた形が基本になるのですが、イメージやプログラムを配置するタグなど、はさむべき内容が伴わない場合があり、その際は例2のように記述します。
例2） <img src="img.jpg" alt=”代替テキスト” />
このようにHTMLは記述していくことになります。
]]>]]> HTMLについて
HTML(Hyper Text Markup Language)はWorld Wide Webで使用される言語です。まぁ、ホームページを作成するために使う言語です。ブラウザというプログラムを通すことでどんなパソコンからでも情報を確認できることを目的に開発されました。
本来、HTMLでできることは文章を構造化(Markup)することだけです。構造化といっても、題名、文章の強調や、打消しなどの役割を指定することで、装飾をすることではありません。装飾の機能を持たせてしまったので、本来の目的(どんなパソコンからでも情報を確認できること)を達成することができなくなったので、現在、装飾はHTML文から分けて、スタイルシートで記述することを求められています。
HTML特有の機能でほかのWEBページにクリックひとつで移動することができるハイパーリンクという機能があります。また、イメージやムービーを文章内に埋め込むこともできます。
HTMLの標準化
HTML文書はブラウザを使い表示されます。表示の方法は最終的にはブラウザに依存するため、一時、ブラウザごとの独自タグが増えたりし、WEB上の情報が共有できない状況が発生しました。
そのため、パソコン、ブラウザの違いを超えて表示させれるように、HTMLの標準化がブラウザの開発元の企業や大学が参加するW3C(World Wide Web Consortium)という期間によって、HTMLの仕様が決められました。
現在は(X)HTML＋CSSで作成することが主流となっています。
また、WEB標準で記述し、装飾はスタイルシートを使い表示させることでSEO対策にもなります。 そのため、私もこのサイトはW3Cに則って作成しています。
今回はここで講座を終了させていただきます。拙い講座を最後までお付き合いいただきありがとうございました。
来週も購読いただければ幸いであります。
]]>基礎から乗せていこうと思っていますのでよかったら、毎週読んでいただけたら幸いです。
]]>当、HPとHP FACTORYをよろしくお願いします。
]]>