「ノマド生活」はコチラ

HTMLを把握する!Webページは「HTML」で構成されている!

HTMLを知る アイキャッチ画像
HTMLを知る アイキャッチ画像

突然ですが、HTMLという言葉は耳にしたことはありますでしょうか。

別にHTMLなんて知らなくてもブログ書けるし必要ないでしょ?!なんて思っていたのが、つい1ヶ月前の私でした。

まぁこの考えのままでも、さまざまなツールでブログ作成やホームページ作成はできるので、別にイイっちゃイイんです。

しかし、HTMLを知っておくことにより、Webページの構成をより知ることができるし、少し知っておくだけでもWebページの編集ができたりとWebページ作成に役立ちます

そこで、今回はHTMLを把握する!ということで、HTMLって何やねん?!ということから「はじめまして」の気持ちでお話をしていきます。

さいごまでご覧いただくと、HTMLの全体像を把握していただけます。

それでは、まいりましょう。

HTMLとは?!

エイチティーエムエル

さきほども述べたように、HTMLって何やねん?!という状態が、約1ヶ月前の筆者Millaでした。 

ということで、HTMLとは?!ということからお話を始めます。

HTMLHyper Text Markup Language(ハイパー テキスト マークアップ ランゲージ)です。

ふだん私たちが見ているWebページですが、そのWebページの骨格=HTMLです。

つまり、HTMLがあってこそ=Webページが表示されているわけです。

そして、そのHTMLに装飾をしていくこと=「CSS」の役目です。

ここで、CSSって何やねん?!というころですが、ひとまず今回はCSSのことは横に置いておいてください(笑)

では、お話をHTMLにもどします。

HTML、早い話がこういうことです(⇩)

HTML=「<」と「>」で挟まれたタグと呼ばれる文字列で囲む⇒タイトルから画像から表から何から何までWebページの骨格ができあがります

なので、HTML=タグ」ですね。

で、具体的に見たほうがわかりやすいと思いますので、次項で実際のHTML(タグ)を見ていきましょう。

補足
「HTMLが記述された文書=ソース」と呼びます。

ソースを確認すること=Webページがどのように記述されているかを知ることです。

スポンサーリンク

HTML:タグの表示

タグ(テキストエディタ)

上記に示したこの画像(⇧)コレがHTML(タグ)です。

うわーーーーーーーー!!!( ;∀;)

ややこしそう…

まぁややこしいかどうかと言われたら、どうでしょうね…ややこしいかな?!くらいです(笑)

とにかく、まずは例としてコレ(⇩)作成しました。

HTMLの説明

HTMLについては、コレ(⇧)でイメージがつきましたでしょうか。

上記について、少し解説します。

<p>pタグと呼ばれています。

Pタグ、本当にこのタグはHTMLで最もよく使うタグと言っても過言ではありません。

タグ書いた状態(HTML)のタグは、Webページ上(Webを見る側)に表示はされません

なんかカラクリみたいな感じですが、表と裏みたいな感じでイメージしていただければわかりやすいかも?!です。

つまり、こういうこと(⇩)です。

  • Webページ():Webページを見る側に表示されている状態(タグは表示されていない状態)
  • Webページ():Webページを作成する側に表示されている状態(タグは表示されている状態)

これで、HTMLの全体像(基本)は理解していただけましたでしょうか。

今回は、pタグを例にあげましたが、もちろんpタグだけでWebページ全体は完成しません。

pタグ以外に必ず知っておくべきタグはたくさんあります。

しかし、タグの種類はたくさんあるので、今回の記事はココまでとしておきます。

スポンサーリンク

まとめ

HTML

それでは、今回のまとめです。

今回はHTMLとは?!というところのお話をさせていただきました。

Webページの骨格=HTML=タグ

コレ(⇧)です。

以上、さいごまでご清視ありがとうございました。

CSSを知る アイキャッチ画像

「CSS」の基礎はコレで理解できる!HTMLとセットで覚えておくべき!

Wordpress全体像 アイキャッチ画像

WordPressとは?!これを読めばWordPressの全体像を理解できる!【WordPress(ワードプレス)】

スポンサーリンク




この記事が役に立ったらシェアしてね!

 

#ネットビジネス #コミュニケーション
#ライティング #恋愛・結婚 #男性と女性

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください