TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年11月29日

タグの仕組みと基本形

■ 5-2 タグの基本形

HTMLは、いろいろなタグを使って、
「ここは見出し」「ここには本文」のように、WEBページを構成する要素を指定します。

見出しや本文の表示、文字の形や大きさ、色の指定などをHTMLの各要素を使って、
マークアップしていくのが基本になります。

プラウザはHTMLで書かれたソースを読み込み
その内容を解釈して、利用者が見やすいように表示します。

ページのフレームの形作り、デザインレイアウト、文字の大きさや文字に乗せる色、画像やアイコンの大きさや位置の指定をしたりと、HTML構文だけでページを作成するには結構苦労する部分があります。

従来は、デザインや画像処理などを全てHTMLで記入して、ホームページやブログを構築していましたが

HTMLとは別にWEBデザインを指定するための仕組み(CSS)が考案され、組み込まれています。
(※HTML4.01以降)

   ※CSSとHTMLの関係・使い方については後述します。

CSSでデザインや文字などの修飾を行い、HTMLはCSSを呼び出し使用する形になっています。
そのため、HTMLの構文は軽くなり、使いやすくなっています。

それらのHTMLやCSSの機能を発揮して、一般の人にも利用しやすい形にしたのがブログです。

ブログにはHTMLやCSSが理解できなくても、
WEB上に簡単に記事を表示する仕組みが作り上げられています。

スタート時のブログは、個人的な日記類が主流でしたが、
今ではブログの機能を使ってアフィリエイト専門のページや
ドロップシッピングなどを展開しているページが数多く見られます。

それらに記事は、
商品紹介のためにtable機能を使ったり、frameで表示ページを分割したりといろいろなテクニックを使用しています。


前回の記事でも述べましたが、
構文のhtml、headやtitleの構造は省略しますが、
body要素の
とくに記事入力で使用するHTMLタグの構造や使い方をみていきます。



タグの基本形。

タグの基本形

<タグ名 属性 = "属性値" >テキスト</タグ名>

<font size="12">利爺とゆったりアフィリエイト</font>

<●>       
font
size     
12      
利爺とゆったりアフィリエイト
</●>       

=開始タグ
=タグ名
=属性
=属性値("") 
=テキスト(文章)
=終了タグ


■タグの基本的な規則。

タグは半角で表記します。
半角の大文字、小文字のどれを使用してもいいことになっていますが、できるだけ統一しておきましょう。
空きは半角スペースです。

開始タグ <●> から終了タグ </●> までを要素と言います。
終了タグは</font>のように要素名の前に「/」スラッシュを付けます。

基本的には、開始タグと終了タグのペアで成り立っていますが、
<br>=改行タグ
<hr>=水平線タグ
<img>=イメージタグ
などのように終了タグがないのも有ります。

■タグ名

タグ名 属性 = "属性値" >テキスト</タグ名>

<font>や<table>のように、その要素の機能を表すタグ。開始タグ・終了タグと対になる組み合わせがあります。

ホームページ、ブログはこの開始タグ名と終了タグ名で括られた「要素」を記入し、デザイン・レイアウトを施し、タイトル、メニュー、画像や表などHTML構文を組み立てwebで表示しています。


■属性

<タグ名 属性 = "属性値" >テキスト</タグ名>

要素内で詳しい情報を定義するものを「属性」と言います。
<font size="12">の「size」が「属性」に当たります。

「要素」は
「属性と属性値」のセット「属性のみ」「ひとつの属性値」または「複数の属性値」を持ちます。


■属性値(値)

<タグ名 属性 = "属性値" >テキスト</タグ名>

属性値は「属性に順ずるアタイ(値)」を意味するものです。

属性値には、文字や数値などを使用することができ、
これらの指定する文字や数値を「 " " 」(ダブルコーテーション)で括る形です。

<font size="12">
の 12 (文字の大きさを指定)の数値
よく使用するカラー指定などの< "#000000" >も属性値で
ほかに数多くあります。

■テキスト

<タグ名 属性 = "属性値" >テキスト</タグ名>

テキストの部分には文章・画像・表・・・目的とするのが入ります。

■終了タグ

<タグ名 属性 = "属性値" >テキスト</タグ名>

要素の終了には</font>のように終了タグを記入します。

終了タグがないと、要素は終わってないので、次の要素へと続きます。
結果、web上ではデザイン・レイアウトが入り乱れた、崩れた表示になります。

……

要素はタグの基本形のように
<タグ名 属性 = "属性値" >テキスト</タグ名>
という形で表されますね。

この要素を、いくつも組み合わせて構造的にマークアップしていくのがHTMLの基本です。

HTMLには複数の要素が含まれていますので
「どこから始まって、どこで終了」
するのかを明確に的確に記述する必要があります。

さらに、構造的に複数のタグを使用する場合は、開始タグと終了タグを
「入れ子」の形で記入する方法が多くとられます。

   「入れ子の括り方の例」
   <tag1><tag2>テキスト</tag2></tag1>

タグの括りが交差しないように、記入する順番は重要ですので
間違えてエラーにならないように注意する必要があります。

次回から実際にタグを使って、
実例をもとに、記事ページを修飾する方法を確認します。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html
    【別窓での表示です】

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……

この記事へのコメント
利さん、倭人です。

このhtml講座、ますます
今後も楽しみです。
と言うのも、なかなかタグを
勉強する時間が取れず、
買った本も半分も読めず放置です。

ここで勉強できるので助かります。
抜けていた記事も読ませていただきました。

< >(山括弧:アングルブラッケット)や
「 " " 」(ダブルコーテーション)、
こういう名称も覚えていけますね。

何かの時に、サッと言えると、
案外、カッコいいし(笑

(明日には忘れているでしょうけど     w・・・)

タグも今、必要に迫られて、
覚えなくてはいけない案件が出てきまして、
ホント、利さんの記事は助かります。

では、また来ますね。

応援です!



Posted by 倭人 中高年ブログで稼ぐアフィリ大百科 at 2009年11月30日 14:24
はじめまして、こんにちは。
ありすと申します。

倭人さんのところから、
利爺さんのブログへお邪魔させていただきました。

最近ブログを始めたのですが、
CSS編集がいまいち上手くいかずに悩んでいました。

こちらを参考にさせていただきたいと思っています。
有益な情報をありがとうございます!
応援ぽちっ☆

Posted by ありすの狼的アフィリエイト入門 at 2009年12月01日 23:49
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。