FC2ブログ

logs

HTML講座--参考サイト

とほほのWWW入門
 「HTMLならまずここ」的サイト。

The Web KANZAKI 
 「ごく簡単なHTMLの説明」内「取り上げた要素タイプの一覧


 自分でHTMLについて学ぶなら、「わかる言葉で説明しているサイト」を探すと言うのがポイントだ。わからない言葉で説明されているサイトは、上級者向けと考えて初期段階では近寄らないほうが良い。理解しようとすると難しすぎて泡を吹く。

 ただし、「HTMLのその意味するところ」をすっ飛ばしてタグの打ち方だけ説明しているサイトはダメ。小細工用のマーキーなどの記述用には向いているが、「思う通りの表示ができる」だけ学ぶのは意味がない。
 ある程度HTMLがわかってきたら、前述のWeb KANZAKIを読むのがよろしい。最初から読むと泡を吹く場合があるので、HTML表記やタグなどを知ったところで読むと理解が早いはずである。

 注:タイトルが「HTML関連その1」になっているが、その2があると期待してはいけない。

HTML講座--前置き

 世間で言われるところの「SEO対策」、これに最も大切なことは何であろうかと考えると、「SEO最適化」これをおいてSEO対策などは考えられないのである。では、SEO最適化とは何であろうか。

 正しいHTML文書

 まずこれだ。正しいHTMLを記述しないでキーワードだけ盛り込む方法を考えてもダメなのである。そして、正しいHTML文書を作成するには、勿論正しいHTMLを理解しなければならない。

 では私がどれほど正しくHTMLを理解しているかと言うと、甚だ怪しい。何故かというと、正しく解説できる自信がないからである。インターネット上にはHTML講座サイトが山ほどある。中には素晴らしくって泣けてきちゃうほどのサイトもある。私の知識のほとんどはその素晴らしいサイト群から学んだものであり、何も私が改めて解説することもないのである。

 だが、そのサイトを一からじっくり学んでいる時間がない、いきなり読み始めてもさっぱり意味がつかめない、と言うこともある。ある程度の知識がある人にとっては納得がいく内容も、最初から学ぶ人には塀が高かったりするのである。

 よって、ここでは乱暴大雑把に(そして間違っていない程度に)HTMLを解説し、途中何度も「参考サイト」へのリンクで逃げまくりながら、正しいHTMLをちょっぴり理解できるようするつもりである。

 
#カテゴリが「業務連絡」となっている通り、お仕事がらみです。
#根本は「乱暴に判り易くHTML解説」です。生真面目じゃありません。
#生真面目じゃないけど真面目です。「それ違ってるよ!」なんてツッコミ歓迎。
#おサポ内検索HTML講座

乱暴大雑把なHTML講座--骨から愛して

#根本は「乱暴に判り易くHTML解説」です。生真面目じゃありません。
#生真面目じゃないけど真面目です。「それ違ってるよ!」なんてツッコミ歓迎。
#おサポ内検索HTML講座


 HTML言語とは「ブラウザで表示する際の構造を記述する」言語。それによってHTML文書が作成される。詳しくは下記参考を読むように(逃げ)。
※参考:HTMLって何だThe Web KANZAKI
  HTML言語を知らない人へ1シンプル解説

 その為の言語なのでそれなりにお約束などもあったりする。お約束を破ると「宿題しないで遊んだ子はテレビ見ちゃいけません!」とばかりに、思ったように表示してくれない。なので、良い子はちゃんとお約束を守らなければならない。

 =お約束その1=
 HTMLの骨組みを理解しよう
(斜め文字がブラウザで表に出てくる部分)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML~~"> ←文書型宣言と言うもの*1
<html> ←これはHTMLだよん!と始まる

<head> ←このHTMLの情報始まり。ブラウザ本体には表示されぬ
 <title> ←このHTML文書のタイトル始まり
 ブラウザのタイトル
 </title> ←このHTML文書のタイトルここまで
</head> ←ここまではブラウザ本体に表示されぬ

<body> ←お待ちかね、本文始まり

 ブラウザに表示される中身=HTMLの本文

</body> ←お名残惜しいが、本文終了
</html> ←後ろ髪を引かれつつ、HTMLの終わりを告げている



 これをそのまま(矢印から右は除く)メモ帳にでも写して「ehehe.html」なんて名前をつけて保存すると、それだけでも(一応)HTML文書なわけで、ダブルクリックしちゃうとブラウザで表示される。
 (追記:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML~~">は下記を参照してきちんと記述しなければならない)

 ここから更にいろんなお約束を守りながら構造を整えていくのである。

 *1 スパッとあっさり理解するのはちょっと難しい。でも、HTMLには必須。「HTML文書の最初に記述する宣言」と覚えたほうが良い。下記参照のこと(逃げ再び)
参考:文書型宣言の読み方bakera.jp

乱暴大雑把なHTML講座--メタメタ愛して

#根本は「乱暴に判り易くHTML解説」です。生真面目じゃありません。
#生真面目じゃないけど真面目です。「それ違ってるよ!」なんてツッコミ歓迎。
#おサポ内検索HTML講座


 骨から愛してもらったら、次はもっと自分を良く知ってもらうのである。知ってもらうために、色々な情報を記さなければならない。ここで問題になるのは「情報を記す順序」である。「お友達からはじめましょう」レベルからはじめなければならず、決して、出会ったその場でいきなりベッドにもつれ込むほどの勢いで情報を出しまくってはいけないのである。身体だけが目当てだったのねと嫌われてしまうからである。(ぇ

 =お約束その2=
 正しい順序で情報を記述
(head要素に情報を記す)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML~~">
<html lang="ja"> ←日本語なのよ私、と最初に報せる

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">*1
       Shift_JIS(日本語)ってコードで書いてるの
<meta name="author" content="cyaimi">
       名前はね、そう、cyaimiって呼んで
<meta name="Keywords" content="おサポ, cyaimi, アットドリーム">
       キーワードは「お・さ・ぽ」
<meta name="Description" content="おサポcyaimiのブログ">
       おサポ上手ってつまりこういうこと。(内容説明)

 <title>
 おサポ上手 になりたい
 </title>

<link rel="stylesheet" type="text/css" href="style.css">
       CSSは「style.css」を見てね♪*3
<link rel="index" href="./">
       トップページはindexを見てね♪
</head>



 この内、上4行の順序は必ず守らなければならない。例えば、「俺は埼玉生まれだ」といきなりパラグアイのエンリケ・ホセ・ゴンザレスさんに言っても、彼は日本という国は知っているかもしれないがさすがに埼玉までは知らず、まして火星に住むlkjが;ぁgsjさんに「私は日本人よ」と言っても伝わらないのである。正しく「地球にある日本という国の埼玉に住んでいる」と説明しなければならない。<例え悪い

 そこでまずHTMLの場合は「文書型宣言」を行い、次に日本語だと知らせる。更にhead要素の中で最初に「Shift_JIS」と言うコードで記述していると報せなければならない。*2
 この順序だけは必ず守らなければならないお約束である。例えば、コードの記述を後に回すと何が起こるかと言うと、記述しているコードをブラウザが正しく判断できない結果、世にも恐ろしい文字化け現象が起こりやがるのである。

 head要素の中には他に「誰が運営しているか」やこのHTML文書の説明などを施し、ついでに文書に含まれるキーワードなどの情報も記述する。
参考:HTMLのメタ情報The Web KANZAKI

*1 <meta name ~~> は孤独に生きる単独タグである。

*2 他には「euc_jp」などがある。

*3 CSS=カスケーディングスタイルシート 構造を記すHTMLに対して、見栄えを記す(文字の大きさ、色など)。CSSを外部ファイルで参照する際に、このように記す。
参考:スタイルシート入門とほほのWWW入門

※このブログで投稿しているのはHTMLの基礎知識です。ブログカスタマイズに関しては、【私家版・はじめてのFC2ブログカスタマイズ】 sugar pot)などを参照するのがいいです。

乱暴大雑把なHTML講座--タグるタグればタグる時

#根本は「乱暴に判り易くHTML解説」です。生真面目じゃありません。
#生真面目じゃないけど真面目です。「それ違ってるよ!」なんてツッコミ歓迎。
#おサポ内検索HTML講座


 例えば新聞などには「大見出し」があり「小見出し」があって記事本文には「段落」がある。本にも「章」があり「見出し」があってやっぱり「段落」がある。これはその文書の内容を判り易くする要素であり、HTMLはこの要素を「タグ」で示す方法である。*1
※参照:文書の骨格となる基本要素The Web KANZAKI

 <html>とか<body>とかもタグである。タグにも勿論守らなければならないお約束がある。

 =お約束その2=
 タグは閉じなければならない。

<h1>おサポ上手</h1>
<p>今日もおサポに励む一日。</p>


 上記にように <○○>で始まったら必ず</○○>で閉じなければならない。ここで終了~と終わってあげねばならないのである。

 骨まで愛してのHTMLの骨組みを見ても判るように、始まったタグは必ず閉じられている。始まったのに終わらないととても困るのである。何故困るかと言うと、しっかり終わっとかないとずるずると先に未練を引きずってしまうのである。ずるずると未練を引きずっていると未来に影響を及ぼすのはいうまでもなく、過去とはきっぱり決別する必要があるのだ。

 例えば<h1>と言うのは「見出し1」と言う意味なのであるが、これが閉じられていないと、次に続く段落「今日もおサポに励む一日」も全て見出しとして表示されてしまうのである。見出しっぱなしである。もちろん見出しっぱなしも困り者であるが、タグを閉じ忘れると表示自体ががたがたに崩れたり、本文が表示されなくなることもあるのだ。*2



 =お約束その3=
 タグの入れ子は清く順序正しく。

<a href="~~"><strong>リンクしちゃうよ</strong></a>  ○
<a href="~~"><strong>リンクしちゃうよ</a></strong>  ×

 タグは「始まったら閉じなければならない」のであるから、始まりと終了でワンセットと考えた方が良い。ワンセットなのでセット内容が他と入り組んではならないのである。入り組んで組んず解れずになると、もうややこしくてどうにもこうにもなのである。

 *1 「タグ」と言う目印(マークアップ)を読み込み、ブラウザはHTMLを表示させている。そう、HTMLとは「HyperText Markup Language」の略なのである。「目印のある超テキストな言語」はあまりにも直訳しすぎだが、まぁそんな感じだ。<どんな感じよ

 *2 その要素によっては閉じられていなくても、ブラウザが「ここで終わりね?」と勝手に解釈してくれるものもある。<p>なんかそう。でも、「タグは閉じるべきもの」をきちんと覚えておかなくてはならない。tableタグなんて閉じ忘れちゃうとIEでは勝手に終わらせてくれるが(昔の)Netscapeなんてtableの中身を全く表示してくれない。(体験あり)
 また、タグによっては初めから終了タグの存在しないものもある。孤独に生きているのである。
例) <br> (改行)、<hr> (水平線)、 <img ~~> (画像表示) など。

※このブログで投稿しているのはHTMLの基礎知識です。ブログカスタマイズに関しては、【私家版・はじめてのFC2ブログカスタマイズ】 sugar pot)などを参照するのがいいです。

Paging Navigation

Navigations, etc.

FC2 Management