5.研修 HTML基礎

この章ではHTMLについて学びましょう。

概要

  • みんながブラウザで普段見ているwebサイト、はHTMLという言語で書かれている
  • HTML(Hyper Text Markup Lanuguage) = すごいテキストを記述するための言語
  • markupとは何か？これだ↓

（マークアップ前）

第１章 森のなかまたち
その森にはたくさんの動物たちがいた。リス、きつね、フクロウ、そして熊。

（マークアップ後）

<section>
  <h1>第１章 森のなかまたち</h1>
  <p>
  その森にはたくさんの動物たちがいた。リス、きつね、フクロウ、そして熊。
  </p>
</section>

お分かりいただけただろうか？ただのテキストに「構造」と「意味」を明示するのがマークアップだ。

マークアップすると何が嬉しいのか？

マークアップすると、文章構造が機械的に読み取れるようになる。

  • これはある文章の中の「章」らしい
  • 章の「タイトル」は森のなかまたちらしい（h = ヘッダ）
  • タイトル以降は段落のようだ（p = パラグラフ）

文章構造が機械的に読み取れると何が嬉しいのか？

コンピュータ、つまりプログラムが文章を処理できるようになる。プログラムは構造的なデータしか処理できない。

プログラムがHTMLを処理する例

  • ブラウザが見る人にわかりやすく整形して、HTMLをモニタ上に表示する
    • タイトル部を大文字に
    • 段落間に余白を空ける
  • Googleなどの検索エンジンがインターネット上のWEBサイトをしらみつぶしに検索する。HTMLのタイトル部をチェックして、検索キーワードを抽出する。

用語説明

  • <p></p>などの括りを「タグ」または「要素(element)」という
    • <p> が開始タグ、</p>を終了タグという
    • 文章を開始タグと終了タグでくくることを俗に「マークアップする」という
    • HTMLは文章の構造を可視化するための言語

ところでハイパーテキストのハイパーって何？

  • ハイパーその１「リンク」・・・あるサイトから別のサイトにジャンプできる
  • ハイパーその２「画像や動画・音声の埋め込み」

まとめるとHTMLとは、「ただのテキストををマークアップして構造や意味がわかりやすくハイパーなテキストにするための言語」です（まとまってない）。

HTMLのタグ全てをインターン中に覚えるのは無理なので、代表的なものだけを取り上げます。

HTML・CSS・JavaScript

HTMLについて学ぶと、もれなくCSSとJavaScriptがついてきます。ここではそれぞれの役割についてのみ覚えよう

  • HTML ・・・文章に構造と意味を付与する。結果「ブラウザでどのように見えるか」については関与しない
  • CSS ・・・マークアップされた文章が「どう見えるか」を定義する。例：h1タグは赤色
/* 例 */
h1 {
  color: red;
}
  • JavaScript・・・ブラウザ上で実行できるプログラム言語。WEBサイトに動きを与える。

課題

  • 次項より提示される問題（回答つき）を写経する。必ず自分の手で書くこと
  • HTML Validatorを利用してエラーがないことを確認する
  • 「課題の実行方法」に記載された手順で動作確認する

課題の提出方法

作成したhtmlファイルはソースコードのsrc/main/resources/static/tutorial フォルダに「課題番号.html」というファイル名で保存し、コミットしてください。

禁止事項

  • 回答をコピペして実行してはいけない。手で書くこと
  • 回答を見ずに、考えてHTMLを書こうとしてはいけない。回答を写経して、「こんなものなのか」と思ってもらうだけでOK。

課題の実行方法

（例：課題番号1001なら、http://localhost:8080/tutorial/1001.html）

results matching ""

    No results matching ""