元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

のんびりいこうやない。今日も明日も、明後日も。

f:id:chihiro_dayori:20170523173117p:plain

1ニチ1ポブログ

- 企業戦士がWEB経験0からはじめるSTEPUPブログ -

【HTML】 今さら聞けない!?ブログを始めてよく耳にする「html」の意味を調べてみた。

f:id:chihiro_dayori:20170511225407j:plain

昨日、記事に書いたエムグラム診断が1日で450PVと思ったより伸びました(笑)大体、普段の私から見たら約2.5倍のPVです。

www.1nichi1ppo.com

ここから見ても、皆さんがいかに新しい物好きかはわかりますね♬
(※実際にこの記事を見て、実践してくれている人もいて嬉しい限りです。)

さて、本題ですが、いや~…

「世界は広いですねっ!!」

この言葉につきます。もう既に30歳近いですが、知らないコトばかりです!
このブログを始めなかったら、なんとな~く言葉を知っているが、そもそも語源だったり、意味を明確には知らないという事もありました。

それは「html」

かっこつけてカスタマイズしているにも関わらず、友達や家族に「そもそも『html』って何?」と言われても答えられる気が1㎜もしないので、今日は自身の備忘録も兼ねて説明したいと思います。

 

よく言葉を見るが、意外と理解していない言葉「html」

「ブログをカスタマイズする人にはまず耳にしない人はいない」といっても過言ではない言葉。実際に実践している人は多いと思いますが、そもそも『html』って「何の略なの?」とか「何?」って気になった方いませんか?

① そもそもhtmlの語源は

『HyperText Markup Language』の各頭文字をとった略称です。

② この言葉をそのまま日本語にしたら

「超文書・目印を付ける・言語」。これでは流石に分からないですよね(笑)。

③ 更に補足していきましょう。

「超文書≒文書を超える文書」。→イメージでいうなら、サイヤ人を超えたスーパーサイヤ人みたいなモノです。現状の文書を更に極めた文書にしてしまうぜってコトだと捉えましょう。

「目印を付ける?何に?」→これは文書に目印を付けるということ。

「言語」→プログラミング言語または文法でしょうね。文書に目印を付ける為の言語ってことですね。

④ つまり…⁉

□ 通常の文書を:(テキスト)
□ ある一定の条件を組み込むことで:(プログラミング)
□ 文書に特徴づけさせて:(目印を付ける)
□ より見やすくした文書:(ハイパーテキスト)

ってとこでしょうか。(黒板風(笑))

⑤ 簡単にいうなれば

「通常の文書をより見やすくする為に、機能を付加することができるプログラミング言語ですね。

⑥ 意味は分かったけど何が出来るの?

より見やすくする為には何をしていますか。

もう皆さんは実践しているはず。それを想像すれば、理解力は100倍になります。ブログを読んでもらう為にしてきたことって何でしょうか。

段落を明確にする為の見出しの作成やタイトルの表示など、サイドバーの追加などひとつのWebページをつくる上で行ってきた構成を作ることが出来ます。

⑦ どうやって行うの?

具体的には作成文書の中で特徴付けたい内容を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲む事で、記述することができます。

■ タグについて ■
簡単に言えば、ファイルに含まれる追加情報のこと。詳しく言えば、文章の構造や見栄えに関する情報を付与するために埋め込まれる特定の文字列のことです。

⑧ 実際皆さんが行っている例は(※一部)

1. タイトルの作成や大きさの変更
2. 見出しの挿入
3. 画像や動画などのコンテンツの挿入

4. 他の文書などへのハイパーリンクの設定 等

例えば下の画像(現在は左端ですが)

f:id:chihiro_dayori:20170504124721j:plain

これに、<div style="text-align: center;"><img src="画像のURL></div>でくくると真ん中に表示されるみたいなものです

f:id:chihiro_dayori:20170504124721j:plain

⑨ いつから使われるようになった?

ここはWikipedia先生を活用して

1989年CERNティム・バーナーズ=リーは、オリジナルのHTML(および多くの関連したプロトコルHTTPなど)のメモを提案し、1990年5月にコード化した[7]NEXTSTEPの動作するNeXTcubeワークステーション上で開発された。当時のHTMLは仕様ではなく、直面していた問題を解決するためのツール群であった。

引用元:HyperText Markup Language - Wikipedia

結構前に構築されていますが、はじまりは今のような水準ではなさそうですね。その後も、HTML 1.0(1993年)→HTML 2.0(1995年)…と利便性や新要素などアップロードが為されているようです。

⑩ htmlと同様に使われるCSSとの違いは?

特にどっちかでしかできないコトがあるという印象を受けなかったのですが、現在の一般的な解釈では『html』は内容や、文章構造に用いられることが多く、『css』では、見た目のデザインを指定する際に用いられることが多いそうです

※因みに、『CSS』は「Cascading Style Sheets」の略です。以下のサイトにとてつもなくわかりやすく書いていたので、わからない方は要チェック!

カスケードの概念-CSSの基本

□■□■□■□■□■□■□■

理解できそうでしょうか。

まとめ

結構調べてかけたので、個人的にはとても理解できました。まだまだ構築が説明できるレベルではございませんが、言語説明ぐらいならと思い、出来るだけ丁寧に書きました。

是非、周りの人に聞かれたら自信持って「html」の説明して頂ければと思います。

おしまい。 【文字数:2237文字。作成時間:2時間30分(※調べ込)】