ヘテムル（HTML）とは何か？
インターネットでのビジネスで避けて通れないのがヘテムル（HTML）と言われるテキストファイル。
文章の前後をカギカッコ＜＞で挟んで、そのカギカッコの中にアルファベットを書き込むスタイルです。
面倒くさい操作ですが、これを少しだけ学習したら応用が利くようになって、パソコンの画面で体裁の取れたコンテンツを披露できるようになります。
文字に色を付けたり、大きくしたり小さくり、他のページにクリックで移動できたり、画像を添付できたり・・・・。
他にも様々な作業にテキストファイルは、知っておきたい知識です。
HTML = Hyper Texit Markup Language（ハイパーテキスト マークアップ ランゲージ）の簡単な説明です。
最終的にはHTMLがある事をおさえておいて、最近のテンプレートはビジュアルででもテキストを創作できるようになっているので、HTMLの事を少しだけ学習しておけば、ビジネスが出来るようになります。
無料ブログではココの辺りをあまり知らなくても、文章は書ける様にテンプレートが工夫されています。
ちなみにテンプレートとは例えば、原稿用紙とかコピー用紙とか大学ノートという雰囲気です。
ペンで記入する紙の容姿・スタイル程度に考えていても、差し支えないでしょう。
HTMLで知っておきたい基礎知識
HTMLでできる事は・・・、
以上の作業をこなしてくれるPCの中の文章作成のための道具です。
これをキーボードとマウスでパソコンの画面上に書き込めば、体裁の取れたホームページやブログが出来るようになります。
テキスト
テキストとは、文字の見出し、段落、範囲、ルビ、問い合わせ先、強調、引用文、特別な文字の表示など関わる内容になります。
＜＞はタグと呼ばれていて、このかっこの中は半角英数で記述するという事になっています。
＜◯＞ 文章。（下図では”リンク”の事） ＜◯/＞というタグで始めと終わりをくくるワケです。
◯は半角英数で記述します。
テキストでユーザーが読みやすい文章の体裁が、整えられます。
例えば、上図ではリンクの部分に文章（画像であればURL）を挟んで、開始タグと終了タグで囲ってリンク（文章や画像）を作成して、そこをクリックしたら、X.htmlのページに移動することをHTMLで表示している事になります。
SEO対策にもなります。
テキストで知っておきたいタグの使い方
見出しと説明文は文字の大きさや装飾に差を付けてサイトを分かりやすしてくれます。
＜ｈ1＞〇〇〇＜ｈ1＞が最も大きな見出しで＜ｈ2＞〇〇〇＜ｈ2＞はその次、といった具合です。
見出しの中の更に細目に分けたい見出しがある場合にｈ1、ｈ2、ｈ3とより細目の表示になって行きます。
なので、その辺りを留意して順番を無視したり、バラバラに配置しないようにしないとイケマセン。
大見出しの次に中見出し、その次に小見出しといったイメージで数字が1、2、3といったイメージです。
見出しの次に、一般的な文章をツラツラと書きます。
その文章を分節で区切って読みやすくするのが、段落です。
＜ｐ＞〇〇〇＜/ｐ＞で表現されます。
これによく似たタグに＜br＞〇〇〇＜/br＞がありますが、これは改行になります。
段落以外での改行のみの場合に使用されます。
フォント
フォントとは、文字・数字・記号の事です。
フォントの色や大きさ、種類、スタイル（斜体・太字・下線・取り消し線）などを選択します。
フォントはOSによって表示が異なります。
Windows と MacOSとでは異なる事になります。
検索で調べてみると色々なフォントがあります。
ここでは、主なWindowsでのフォントを少々紹介しておきます。
コントロールパネルの［デスクトップのカスタマイズ］、［フォント］に収納されています。
レイアウト
簡単に言ってしまえば、原稿用紙、コピー用紙の色を決めたり、罫線を引いたり、行を揃えたり、文字や画像を真ん中にセットしたりする事が出来ます。
全体の背景の色や画像を設定します。
＜body bgcolor=”背景色”＞～＜/body＞
＜body background=”画像のURL”＞～＜/body＞
＜center＞～＜/center＞
リンク
文字や画像をクリックしたら、他のページや段落に移動できる機能です。
＜a href=”URL”＞～＜/a＞
これ以外にも、同ページ内に飛ばすタグや別のページに飛ばすタグがあります。
画像
画像の配置、文章の回り込み、画像の説明のポップアップなどの機能の事。
＜img src=”画像のURL” width=”幅” height=”高さ” alt=”代替テキスト”＞
src=の中の画像の形式は「gif」「png」「jpg」が主に使用されます。
alt=の代替テキストは画像のSEO効果を期待します。
リスト
早い話が、箇条書きの事を指します。
＜ul＞～＜/ul＞ マーク付きのリスト全体を囲うタグ
＜li＞～＜/li＞ 一つ一つの項目
＜ul＞
＜li＞シニア＜/li＞
＜li＞パソコン＜/li＞
＜li＞ビジネス＜/li＞
＜/ul＞
と指定すれば・・・
- シニア
- パソコン
- ビジネス
・・・・といった具合です。
フォーム
インターネットの双方向性の窓口にあたる部分です。
電話のダイアルの様なイメージです。
メールの送受信の窓口が作成できます。
あるいはリセットボタンもこのカテに入ります。
何かを書いて記録に残したり、メールで送信したりそれらの文章を始めから書き直したい時のリセットボタンの事です。
テーブル
表の一例
行列、いわゆる表を作成します。
WPで表を作成する際には、プラグインで作成出来るツールを導入します。
TinyMCE Advanced というプラグインは以下の要領で、検索してWPに導入します。
左側の赤四角で検索するか、右側の検索窓に ” TinyMCE Advanced ” と打ち込んでツールを探します。
そうすれば投稿欄上部に、表作成欄が追加されます。
フレーム
今見ている画面は分割されています。
ヘッダーがあってメインカラムがあってサイドバーがあって、スクロールバーがあります。
それらを設定する機能の事です。
以上がHTMLに関するあらましです。
HTMLとcssは同時に理解しておくのが便利です。
という事で、手元に1冊あれば便利なHTML解説書の件。
シニアな私たちにはPCの画面からよりも、書籍からの方がインプットしやすいのでは・・・？
PC画面を触りたくない時、座右にあれば重宝するHTML参考書のイメージです。
HTML5＆CSS3ポケットリファレンス （Pocket reference） [ 森史憲 ]
HTMLにはバージョンがあります。
普段はあまり気に留めないところですが、
<!DOCTYPE HTML PUBLIC “バージョン” “URL”>
などという一文がトップに書かれています。
昔は通用したタグも新たにバージョンアップして今では、機能しないタグもあったりします。
その様な局面に今はそんなに遭遇する事はありませんが、念のため(＾◇＾)
ちなみに2020年現在では、”HTML5″が推奨されています。
コメント