HTML初心者が覚えるべき意味と5つの基本ルール

さて、あなたはHTMLという言葉をご存知でしょうか??もしかしたら、名前は知っているけど…使用してないので意味は知らないかもしれません。

確かに今では簡易ボタンが各記事投稿ページに設けられているため、HTML記述を使う場面がないでしょう。しかし、HTMLとは…ちょっとした言語を補佐する命令文!なので覚えておけば自分の手で少しだけ改良することは可能です。

そこで、このページではHTMLの基本的な意味を解説しています。

【本記事で学ぶ内容】

  • HTMLの意味と役割がわかる
  • HTMLの基本記述と構成がわかる
  • サイトブログ構成に欠かせないとわかる

HTMLというと毛嫌いする方もいますが…今、私たちがブログやサイトを当たり前に使えるのは、このHTMLがあってこそ!是非、HTML入門編として、このページでHTMLの意味から触れてみてはいかがでしょうか??

 

ルールその1:HTMLとは?

HTMLというのは「Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)」の事です。これは簡単に言えば…WEB上において「○○しなさい」という命令文がHTMLの役割です。

  1. その文字を赤文字にしなさい!
  2. 背景色をつけなさい!
  3. 動画を埋め込みなさい!
  4. 画像を差し込みなさい!
  5. リンクを挿入しなさい!
  6. ここに空白をあけなさい!

普段、私たちが使うブログやサイトでは文字装飾・画像挿入・リンク掲載・動画埋め込みなどを使う際にそのつど上記のようにHTMLの言語で命令しています。では、もう少し理解を深めるために少しHTMLを崩して考えてみましょう。

  • H:ハイパー⇒超越した
  • T:テキスト⇒文章
  • M:マークアップ⇒目印
  • L:ランゲージ⇒言葉

これを組み合わせて…「ある言葉を超越した文章として目立たせる」という事からHTMLとなっています。ですので、文字サイズや文を強調して他の文字よりも目立たせる事ができます。

参考例)

投稿サンプル投稿サンプル投稿サンプル

投稿サンプル投稿サンプル投稿サンプル

このような機能がHTMLの凄さです。

 

ルールその2:HTMLの基本構成

HTMLの構成は実はシンプル。もちろん特殊なものもありますが基本は下記の形状です。

■HTML基本型:<>○○</>

(※記入は必ず半角英数字!)

以上がHTMLのシンプルな形でサンドウィッチ形式にするのがHTML基本型。

・始まりの合図:<>

・終わりの合図:</>

これがHTML基本形です。

 

ルールその3:HTMLの各種類で出来る事って?

実にHTMLの種類はかなり豊富!ただし、よく使うのが下記のHTMLの形状です。

  1. 文字装飾(フォント色)
  2. 文字強調(太字)
  3. 文字下線
  4. 文字背景色(マーカー)
  5. リンク掲載
  6. 画像挿入
  7. 画像回り込み
  8. 動画掲載
  9. 等間隔(改行)
  10. テーブル(囲み)

これらがHTMで頻繁に使用されています。しかし今はHTML種類のみでOK!正直、サイト運営者やWordPress運営者で「自分好みにカスタマイズしたい!」という事がなければ、急いでHTMLの記述方法は覚えなくて大丈夫です。

その理由はコレですよね!!

html

このように最近ではWord機能同様にボタン一つで各種のHTMLを施す事が出来るため、必死に覚える必要がありません。あなたが覚えるべき事は、どのボタンが「HTML上でどんな命令を下しているのか?」ということだけです。

 

ルールその4:HTML記述はテキストモードに切り替える

ただ、自身でHTMLを記入したいとか簡素ボタンを使用したが一部だけHTMLをいじって改善したいという事もあるかと思います。そんな場合は必ずビジュアルモードからテキスト(HTML)モードに切り替えなくてはいけない。

【ビジュアルモード】

ビジュアルモード

 

【テキストモード】

テキストモード

テキストモードになると同じ記事内容でも表記のされ方が変わりますね!

 

html説明

<p>○○</p>:等間隔改行タグでPの間に文章

<ul>~</ul>:リスト化タグで<li>がリストする部分

このように、1つ1つバラしして考え、ビジュアルモードと照らし合わせていくと…「改行は、どんなHTMLで…文字強調はどのHTML記述に変換されたのか」が非常にわかりやすく覚えやすくなります。このようにしていけば、例えブログ運営者でも簡単に覚える事が出来ます。

 

ルールその5:HTMLとCSSでメディア媒体は構成されている!

普段私たちが当たり前のように使うサイトやブログは、実はHTMLだけではなくCSSといモノも複雑に混じり合って1つの形として構成している。それがサイトやブログといったネット上のツールでありメディア媒体を形作っています。

■HTML表記

テキストモード

 

■CSS表記

css

 

※補足

CSSとはCascading Style Sheets、カスケーディング・スタイル・シートの略

ウェブのページをスタイルを指定するWEB言語です。

このようにHTMLとCSSは表記や記述がまるで違いますが…
この2つのプログラミング言語が1つのメディア媒体を構成しています。

これを全く読めない素人が0からブログを構成する事は不可能です。ただテンプレートを使用する事で、ある程度サイトやブログを出来上がった状態からスタートできるのです!無料ブログでも有料ブログでも「HTMLは欠かせないものだ」という事を認識しておきましょう。

 

ハル式まとめ:HTMLは普段よく使う機能から覚えると効率が良い!

もちろん、今ではがっつりとしたHTMLノウハウというのは必要ありませんが…ブログ運営だけでなく、のちにサイト運営を考えると基本的なHTML記述は出来ておくとよい。

もちろん、小難しいHTMLやCSSはテンプレートに頼れば何も問題ありませんね^^ただサイト運営の場合は各ページを作る際、必ずHTMLの記述が重要になる。

ですので深く勉強する必要はありませんが…基本的なHTML記述が出来るように今のうちからブログでコツコツと仕組みや構成など知っておくとよいかもしれません。

最後までお読み頂きありがとうございました。

 

1日たった3時間!PC1つで月5万円以上を稼ぐ全手法をあなたは知りたくありませんか?

私も「アフィリエイトをブログで始めて稼いでみたい!でも実際、何から始めたらいいのか…」と、あなたは困っていませんか?


確かにアフィリエイトは今や様々な稼ぎ方が存在します。なのでネットで流れている情報に困惑するかもしれませんね。


しかし、私がやってきた「この方法」なら、ブログをビジネス用で使った事がない30代の方でも1日3時間の作業で十分にお小遣い稼ぎは可能です。さぁ今すぐあなたも始めてみましょう!


また私のメルマガ購読者限定で…私から“豪華特典を累計23本を配布”させて頂きます。


Coming soon!

SNSでもご購読できます。

・本格的に稼ぎたい30代のあなたにオススメ教材です!

ua1
私は、この情報教材でアフィリエイト収益0円⇒80,000円以上稼ぐ事に成功しました。今度は、あなたが試してみる番です!

rank3

コメント

  1. アニー より:

    ハルさん、こんにちは。
    アニーです。

    HTMLって素人にはよくわからなくて毛嫌いしていましたが、しくみを知るとちょっと楽しそうだなと思えてきました。
    今日もお勉強させていただきありがとうございました。

    1. アニーさん、こんにちは!

      HTMLというと少し躓くと本当に難しですよね(笑)
      何度も、挫折した経験が私にもあります。

      ですが、やはり使えると戦力になるのでこの記事をキッカケに
      HTMLが苦手な人が真剣にHTMLと向き合ってもらえたらと思う
      今日この頃です。

      アニーさんのお役に立てたのであれば幸いです^^
      応援ありがとうございました。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)