あなたは大丈夫?HTMLとタグの基本構造

 

 

 

 

こんにちはフリーマンです。

 

本日は、HTMLとタグの

基本的な構造について、

お伝えして行きたいと思います。

 

今回なぜこちらを

お伝えして行くかと言いますと、

ブログアフィリエイトにおいて、

ある程度のHTMLとタグの知識は必須となって来るからです。

 

とは言え現在は、

各無料ブログサービスなどで

様々な便利機能がありますので、

このHTMLやタグの知識は

それほど重要じゃ無くなって来ています。

 

ですが、将来的に有料ブログや

ぺラサイト作成の際に、

必ず必要になって来る事ですので、

是非あなたの今後の為にも覚えておく事をおススメします。

 

そして今回は基本的な部分を掘り下げながら

お伝えして行きますので、

必要であればメモ等を取り

積極的に覚えるようにして行きましょう。

 

 

さてこのHTMLとタグですが、

そもそもどう言った事かあなたは言葉で説明出来ますか?

 

何となく頭の中で思い描けると思いますが、

言葉で説明しろと言われると、

結構難しいですよね(@_@;)

 

HTMLって言う物を・・・・

タグを貼りつけて・・・・・え~と・・・

と、そう言った感じだと思います。

 

と言う訳で、こう言った部分をあなたが

きちんと言葉で説明出来るようにして行きたいと思います。

 

今回お伝えする部分を、頭の中に入れておくだけで、

結構後々に役立って来ると思いますので、

しっかりと頭の中に入れて下さいね( ^^)

 

ではスタートしましょう!

 

 

 

 

1.HTMLとは何ぞや?

 

 

はい、と言う訳でこのHTMLですが、

ある言葉の大文字4つを取ってそう呼ばれています。

 

要するに略称と言う訳ですね。

 

で、何て言う言葉の略称かと言いますと、

Hyper Text Markup Languageと言う言葉の略です。

 

つまり平たく言えば、HTMLと言うのは

マークアップ言語”と言う事になります。

 

もっとかみ砕いて言うと、

リンクを付ける事が出来る

テキストに、目印を付ける方法を決めた言葉

と言う解釈をする事が出来ます。

 

噛み砕いてお伝えしても、まだちょっと

取っ付きにくく感じるかも知れませんが、

要するに

テキストの色や大きさ、リンク方法、

画像やテキストの配置に対して、タグと言う物を使い

定義付け出来る様にする為に使用する言葉

と言う事になります。

 

イギリスのSir Timothy John Berners-Leeと言う、

計算機科学者が作ったこのHTMLですが、

前述で説明した通り、ブログやホームページ、

ぺラサイトで何かを変更したりする際に、

あらゆる面で使用して行きます。

 

だからこのHTMLの意味や基礎を

しっかり覚える事が重要なんですね。

 

もう少し掘り下げた部分は後ほどお伝えして行きますね。

 

 

 

 

2.タグって一体何なんだ?

 

 

次にタグについてですが、

この言葉の意味は直訳すると

付箋とか荷札

と言う意味になりますが、

ことHTMLに関してはちょっと意味合いが変わって来ます

 

具体的には先ほど申し上げた、

テキストリンクや、色、サイズ等を変えたり

定義付けする為の、”指令や命令”と言う意味になります。

 

不等号(<や>)で文字や画像を囲む事によって、

それらに対して指令を出す事が出来る様になります。

 

そしてこのタグですが、

開始タグと終了タグと呼ばれる物が、

ワンセットになっています。

 

つまり”基本的には対になっている”と言う事です。

 

目的のテキストや画像に対して、

これらのタグをはさむ様に配置する事によって、

画面上でリンクを付けたり、

画像を表示させたりする事が出来る

と言う訳なんですね。

 

そしてこのタグには、

属性”と言う物を追加する事が出来ます。

 

つまり属性を指定する事により

好きな場所に配置すると言った事も出来ますし、

好きな色に変える事が出来ると言う事になります。

 

ここで言葉で説明してもイマイチ分かりづらいと思いますので、

実際にHTMLタグを使用して、説明して行きたいと思います。

 

<a href=”http://○○○○.com”>○○○○.com</a>

 

こちらは一般的なHTMLタグでリンクタグと呼ばれる物ですが、

開始タグが<a href=”http://○○○○.com”>と言う部分で、

終了タグが</a>の部分となります。

 

アンカーテキストに対して、

これらのタグを対に配置する事によって、

ページ内部にリンクする事も出来ますし、

外部のページに飛ばす事も出来る様にもなります。

 

そしてタグとテキストを

全てまとめた部分を”要素”と言います。

 

この例題で言えば、

リンクタグの最初から最後までの

全ての部分が要素にあたります。

 

言葉で説明する場合は、

A要素”となります。

 

次に属性の部分ですが、

この例題に当てはめると、

Href=”http://○○○○.com”

の部分が属性になります。

 

ちなみに”http://○○○○.com”

の部分が”“と呼ばれます。

 

つまりこのhref属性で、

目的のURLへとリンクさせる事が出来る

と言う訳ですね。

 

そしてテキストや画像等に

詳細な指令を出す場合には、

属性と値が必要になって来る

と言う事にもなります。

 

 

 

○ワンポイントアドバイス

 

テキストエディタなどで、

このhtmlタグを指定してブログ等を書いていると、

たまに上手く表示がされない場合があります。

 

そう言った場合は

 

半角英数字できちっと記述しているか?

要素に対して属性を追加する場合、半角スペースをきちっと開けているか?

値を入力する際に””(ダブルクォーテーション)を挟む様に入力しているか?

 

をきちっと確認する様にして下さい。

 

ちなみにHTMLタグは、半角であれば

大文字と小文字は問われませんが、

要素全体を見た時に、どちらかに統一しないと

キチンと反映されない場合があります。

 

ですのでタグを記述する際は、

必ずどちらかに統一して下さい

 

ここでWEBページを表示させる為の、

基本的なタグの記述の仕方と、意味をお伝えします。

 

こちらの大まかな部分を理解しているだけでも、

後々のページ作成に大きく影響してきますので、

是非こちらも覚えるようにして下さい。

 

以下分かりやすいようにタグを色分けしています。

 

<html>

<head>

<title>アフィリエイト</title>

</head>

<body>

アフィリエイト

100万円を稼いだ軌跡

</body>

</html>

 

まず<html></html>の部分ですが、

こちらのタグを画面の

一番上と下に設置する事によって、

このファイルはHTMLです”と

ブラウザに対して宣言する事が出来ます。

 

多くのブログサービスの場合は、

これらのタグを配置せずとも

目的のタグを記述するだけで、

色々な変更を加える事が出来ますが、

まっさらなページを一から作り上げて行く際には、

上記の様な基本的な知識が必要になります。

 

次に<head><title><title></head>の部分ですが、

こちらは<head>タグの中に

<title>タグを記述する事によって、

ブラウザのタイトルバーに、

そのページのタイトルを反映する事が出来ます。

 

ここでは”アフィリエイト

の部分が、タイトルにあたりますね。

 

つまり<head>タグによって、

タイトルを定義付けする事が出来る

と言う訳です。

 

そして<body>の部分ですが、

こちらは要するにページの本文です。

 

<body></body>の中に文章や画像を配置する事によって、

ブラウザで開いた時にそれらが本文として掲載されます。

 

ここでは”アフィリエイト100万円を稼いだ軌跡

の部分が本文として表示される事になります。

 

先ほども言いましたが、

多くのブログサービスは、この

本文や画像の配置だけすれば良い

と言う風になってるんですね。

 

と言った感じで、

これらが、WEBページを作る上での、

基本的なタグの構成となります。

 

あとは上記の様なページを

複数作った物をまとめて、

それらをサーバーにアップロードするだけで、

インターネット上で公開されると言う訳です。

 

 

○ワンポイントアドバイス

 

テキストファイルをメモ帳で保存する際は、

拡張子を.htmlにして下さい。

 

するとメモ帳のマークが

ブラウザのアイコンに変わりますので、

試しにクリックして見て下さい。

 

サーバーにアップロードせずとも

実際の表示を確認する事が出来ます。

 

ちなみにメインページは、

index.htmlとなります。

 

編集する際は、右クリックで

プログラムから開く”を選択した後に、

メモ帳を選択して編集します。

 

保存する際は前述と同様に

拡張子を.htmlに変更します。

 

この他にも、良く使用される

タグを記載して行きますので、

あなたが覚えていなかった部分は

これを機に覚えるようにして下さい。

 

 

○リンク項目

 

・記事に画像を配置する

<img src=”画像URL”>

・リンクにマウスポインタを当てると説明文が出る様にする

<a href=”http○○○” title=”リンク説明”></a>

・リンクを別窓で開く

<a href=”http○○○” target=”_blank”></a>

・画像自体をリンクにする

<a href=”http○○○”><img src=”画像URL”></a>

 

 

○文字項目

 

・太字にする

<b></b>

・強い強調を加える

<strong></strong>

・フォントサイズを変える

<font size=”数字”>

・フォントカラーを変える

<font color=”色”>

・同じ開始タグ内に一緒に記載する

<font size=”数字” color=”色”>

 

 

○改行と段落項目

 

・改行する

<br>

・段落を加える

<p>

 

 

○回り込み項目

 

・画像に文字を回りこませる

<img src=”画像URL” align=”画像位置を指定”>

・回りこみの間隔を指定する

<img src=”画像URL” hspace=”数字” vspace=”数字”>

 

と、基本的なタグは以上となります。

 

 

さて今回は、HTMLとタグの

基本についてお伝えしてきましたが、

意外にこう言った部分をしっかり理解しておくだけでも、

アフィリエイトにおける作業スピードは全然変わって来ます。

 

何か変更を加えるたびに、

検索して調べてそこから手直ししてとなると、

長い目で見ると大分時間を消費してしまう

事にも繋がって来ますからね(@_@;)

 

ですから、今回HTMLの

基本中の基本をお伝えしましたので、

これを機に是非とも色々なタグを暗記する事をおススメします。

 

今回お伝えした構造さえ

頭の中に入れておけば、新しくタグを覚えた際に、

様々な組み合わせも出来るようになって来ますからね。

 

そんな訳でまたまた

少し長くなってしまいましたが、

HTMLとタグの基本構造編の解説を終了したいと思います。

 

ではまた会いましょう!

 

 

 

 

この記事をシェアする

LINEで送る
The following two tabs change content below.
 元歌舞伎町某店NO1ホストという異色の経歴を持つアフィリエイター。座右の名は、『明日やろう今度野郎は馬鹿野郎』。人生のテーマは、『楽しく仕事をやりながらも、思い立った時に好きな事が出来る生活を送る』。このライフワークを体現すべく、目下精力的に活動中。
Exit mobile version