最低限押さえておきたいHTML講座

こんにちは、トリでございます。

 

前回、ちょろっとタグのお話が出たので、
ちょうどいい機会なので今回はHTMLについてお話しようかと思います。
こっちを先に説明した方が良かったですね・・・すみませんf^^;

 

私が初めてHTMLを覚えたのは学生の時。
自分のサイトを作ってみたいな~と思ったんですね。
その頃はまだ無料ブログとかなくて、HTMLでチマチマ作成してたのですが・・・

 

割と序盤で挫折しましたね☆

 

ですが、久しぶりにこうやってブログを作成していて、

やっぱり少しはHTMLの知識があった方が便利なんでない?と思い、

「これくらいは覚えておくといいかも」っていうタグをご紹介します。

 

 

code-820275_1920-400x270-MM-100

 

HTMLって何なの?

HTMLとはWebページを作るための言語の一つで、

多くのタグと呼ばれる記号で構成されています。

 

ここでいう言語とは、コンピュータに指示をするためのものです。

海外の方と意思疎通を図る時に、英語や中国語やフランス語を使うように、

コンピュータと対話する時も、専用の言語が必要となるのです。

 

試しに、このページの上で右クリックしてみて下さい。

すると「ソースを表示」みたいなメニューがあると思います。

 

WS000000

 

で、それをクリックすると「何だこの暗号は!?」みたいなものが表示されます。

 

WS000002

 

そう、↑これがHTMLです。<>で囲われているものがタグと呼ばれるものです。

この言語を使って、「ここは画像を表示する」「ここはリンクを貼る」

などの指示を出すんですね。

で、ブラウザがそれを読んで、私達にわかりやすく表示してくれるという仕組みです。

 

無料ブログやWPのビジュアルモードなんかは、

私達がブラウザを通して見る状態で作成・編集が可能ですが、

裏ではこの言語がカタカタと自動で作られているわけです。

便利な世の中になりましたなぁ(´_`)

 

試しにWPをお使いの方はテキストモードにして頂くと、わかりやすいと思います。

左下に赤枠で囲っているのがHTMLのタグです。

 

WS000001

 

後、HTMLとセットで覚えておきたいのがCSS(スタイルシート)です。

HTMLが構造に関するものであるのに対して(段落を付ける、画像を挿入する等)、

CSSは装飾に関するものになります(文字の色を決める、フォントを決める等)。

 

CSSはHTMLの中に直接書き込む場合もあれば、

HTMLとは別に作成して、HTMLとリンクさせておくと、

HTMLでひとつひとつ装飾の修正をしなくても、一括で修正が可能になります。

 

 

はい、ややこしいー!

 

 

初心者のみなさんは、

 

  • WebページのほとんどはHTMLで作られているよ
  • それはタグとよばれる<>←こんなやつで構成されているよ
  • 装飾をしたい時はCSSを使うよ

 

 

くらいにザックリ覚えておいてもらえればいいです!

 

 

 覚えておくべきHTMLタグは?

前回の記事でチラと出てきましたが、タグの中にも要素・属性なんてのも存在します。

細かくいうと、こんな感じの分類になります。

 

 

要素

 

タグの開始から終わりまでを全部含めたものを「要素」といいます。

そしてそのタグの種類を「要素名」、更にそのタグに付加する情報を「属性」、

更に更にその属性の中で指定する" "で囲われたものを「属性値」といいます。

 

頭痛いですね・・・f^^;

他のサイトのタグの説明で、上記のような単語が出てくるかもしれないので、

その時に「ああ、あのことね」くらいに覚えておいて貰えればOKです。

 

 

では、本題の最低限押さえておくと便利なHTMLのタグをご紹介します。

 

  • <b>文字</b>:太字にする
  • <img src="画像URL">:画像を挿入
  • <a href="リンク先URL">サイト名など</a>:リンクを貼る時
  • <a href="リンク先URL" target="_blank">サイト名など</a>:リンク先を別窓で開く時

 

まずはこの4つを覚えておきましょう!

現に私もこの4つだけで割と重宝しております(笑)

 

画像にリンクを貼りたい時なんかは、この中の2つを組み合わせて、

 

<img src="画像URL"><a href="リンク先URL">サイト名など</a>

 

 

なんて使い方が出来ます。

 

覚えるととても便利ですし、何より奥が深くておもしろいですよ!

マスターはしなくていいですが、ある程度基本は覚えておいて損はないので、

お時間がある時にでも色んなタグを見てみて下さい^^

 

⇒ 参考サイト

 

 

この記事に関連する記事一覧

コメントは4件です

  1. もんふじ より:

    こんにちは、もんふじです。

    HTMLとCSSはホント悩まされます…(><)
    特にCSSは上手くいかない事が多くて、
    苦戦した挙句に何度か徹夜したことがあります。

    トリさんを見習って勉強します!

    応援完了です!

    • もんふじさま、こんばんは。

      私もCSSは全然触ったことないので、テンプレート頼みですよf^^;
      他のサイトで勉強してみるものの、どこも難しい言葉で書かれているので苦戦しますね。
      お互いがんばりましょう!

      応援ありがとうございました。

  2. タクヤ より:

    トリさん、こんにちは。
    タクヤです。

    ブログへのコメントありがとうございます。

    僕はHTMLの初心者同然なのですが、
    色分けして説明されているので、
    とてもわかり易かったです。

    ブログを運営していると、
    最低限のHTMLは知っておいたほうがいいな
    と思いました。

    また訪問させていただきます。

    ランキング応援していきますね♪

    • タクヤさま、こんにちは!

      私も色々覚えたはずのHTML知識は忘却の彼方なので、また一から覚え直しですorz
      ちょっとでもかじってると、うまくいかない時、自分でちょいちょいとメンテできますしね☆
      各名称の話はマニアックですが、よろしければ覚えてみて下さい。

      応援ありがとうございました。

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ