HTMLを知識ゼロから最短でマスター(基礎)*

こんにちは!メリークリスマスですね*

今日は『HTML』の説明をします。これくらいなら知ってるよ!という人も復習を兼ねて見てみるとすっきり整理できるかも。



目次

1 HTMLってなに?
2 なんかすごい文章って?
3 HTMLの基本まとめ


あ、今回は実際にHTMLを書いたことがあって慣れている人は飛ばしても大丈夫な内容です!


HTMLってなに?

エイチティーエムエルとは、

はいぱー・てきすと・まーくあっぷ・らんげーじ

という英語の頭文字をとったWEB用語で、

なんかすごい・文章データ・つくるための・言語

って意味です。

Hyper Text Markup Language

はい。これが日本語でイメージできたところで次に進みましょう*



なんかすごい文章(Hyper Text)って?

具体的に見るために、以下に実際にテキストをパソコンでタイピングしてみたときの例を2つ出します。



その1 ノーマルテキスト(コーディング段階)

あかりんは激怒した。

これは『ふつう』の文章です。


その2 ハイパーテキスト(コーディング段階)

<h1>あかりんは激怒した。</h1>

これは『はいぱー』な文章です。



その1とその2には違うところがありますよね。そうです、『はいぱー』な方はとんがりかっこで囲まれたタグと呼ばれる『目印(マーク)』に挟まれています。ここが普通じゃなくてすごいんです。

上の2つの例をキーボードで打ち込んた時はどちらもただの1行のコードです。

でもブラウザで開くと以下のように『見え方』が変わります。



その1 ノーマルテキスト(ブラウザ表示段階)

あかりんは激怒した。


その2 ハイパーテキスト(ブラウザ表示段階)

あかりんは激怒した。



あくまでも例ですけど、見え方が違っていますね。その2の方が大きいです!

今回の例で使っているh1タグで挟んでできたコードは、大きく見出しとして表示されると決まっています。


私たちが今見ているページで文字の見た目が普通のシンプルなテキストではなくなっている理由のひとつがこのタグによる装飾です。HTMLを書くと、文字が大きくなったり表になったり線になったりするんですね。

見た目が変わる他の理由はCSSですがまた別の機会にやります*


タグにはh1以外にもいくつか種類がありますが、基本編では『HTMLはタグで挟むだけだよ〜。タグは色々あるよ〜。』にとどめて、実用編の方ではじめに覚えておくと良いおすすめタグを実例付きで紹介しますね*


HTMLの基本まとめ

図の上側が現実世界で、以下の3つの流れで開発中にコーディングしたテキストがユーザーの目に届きます*

①エンジニアが作ったファイルをサーバーにアップロード
②サーバーはブラウザが欲しいと言ったらどのブラウザにもそのファイルを送信
③ブラウザはHTMLという言語でマークアップされているハイパーテキストを、タグの種類に応じて決まっている見た目で表示


図の下側が画面表示で、実際のエンジニアのパソコン画面(コーディング)と、ユーザーのパソコン画面(ブラウザ見た目)のイメージになっています。

ちなみに図の赤線のように開始タグと『/』が付いている終了タグで挟むことをマークアップすると表現しますが、普段は単にコーディングすると言います




おつかれさまでした♪

今回でHTMLのコーディングがどういうものなのかイメージできるようになったと思うので、次はいろんなタグで挟んで実際にブラウザで表示してみるというのをやる予定です*


P.S.

ごくごく基本的なHTMLやCSS、JavaScriptの内容を網羅できたら、みなさんが実際にALISの記事なんかで普段使いできるページを一緒につくれたらいいな〜と思っています。記事を見ながら自分のパソコンで進めてくださった方がネットに公開し終わるところまでが目標です!

公開日:2018/12/25
獲得ALIS:32.10
akari's icon'
  • akari
  • @akari
家にいる時間が好きです。デザイン系の制作会社でフロントエンドエンジニアをしています。
コメントする
コメントする