ネットワークって。。。#38(アプリケーションプロトコル)

今回はHTMLの話。

HTML。。。Hyper Text Markup Languageの略で、エイチティーエムエルって読みます。

そのままですが。。。笑

 

f:id:thmat:20210822115232j:plain

 

前回までのおさらいです。

WWWは大きく3つの定義から構成されます。

1つ目は、情報へのアクセスする手段と位置情報の定義

2つ目は、情報の表現フォーマットの定義

3つ目は、情報の転送などの操作の定義

それぞれ、

URI(Uniform Resource Identifer)

HTML(HyperText Markup Language)

HTTP(HyperText Transfer Protocol)

と呼ばれるものです。 

 

現在はJavascriptとかCSSとか色んな技術でデザイン豊富なWebページの表示の実現が可能となっていますが、それは別で説明するとして、ここでは、HTMLの基本部分について説明します。

 

HTML(Hyper Text Markup Language)

HTMLはWebページを記述する為の言語(データ形式)です。

W3Cっていう標準化の組織というか機関というか、、、そういう非営利団体があってそこで標準化されています。

これにより、chromeとかSafariとかOperaとかEdgeとかIEとか。。。あらゆるブラウザがこのHTMLっていう言語を読み込んで理解して表示できるように作られています。

一般的に、皆さんがインターネットにつないで見ているWebページとかホームページとか言っているものは、全てHTMLで記述されています。

 

Language(言語)というだけあって、、、

日本人が日本語の文章を読んで理解し、アメリカ人が英語の文章を読んで理解するように、ブラウザはHTMLで書かれた文章を見て理解するのです。。。多分笑

 

HTMLの記述方法

HTMLは、タグと呼ばれる目印のようなものをつけて記述されます。

でこのタグは基本的に、<タグ>で始まって、</タグ>で終わります。

例えば、

<html>・・・</html> HTMLだよっていう目印

<head>・・・</head> ヘッダー部分の記載

<body>・・・</body> 本体、基本的にここの内容がブラウザに表示されます

 

で、これらは構造的に入れ子になるんです。

<html>

<head>

 <title>My Page</title> ここがヘッダー部分

</head>

<body>

 この部分がブラウザに表示されます

 例えば文字を太字で強調したい場合は、<b>強調文字</b>

 改行したい時は、<br>で改行したり

 画像を表示したいときなんかは、

 <img src="image.png" title="イメージ画像"> みたいに書いて。。。

 <a href="https://hatenablog.com/">ここをクリックするとはてなブログのページに遷移します</a>

 とか他にも色々いっぱいあります。

</body>

</html>

 

って感じです。。。

 

ハイパーテキスト

HTMLにはハイパーテキストという機能があり、画面に表示する文字や画像にリンクを張り、クリックされた時に別の情報を表示(別のページに遷移)する機能です。

で、リンク先はインターネット上であれば、全世界どこの情報でもリンクを張れるっていうのがすごいところで、インターネットがここまで普及したのも、この機能があったからだと思っています。。。多分笑

具体的には、前述のaタグがそれに当たります。

<a href="https://hatenablog.com/">ここをクリックするとはてなブログのページに遷移します</a>  

画像にリンクを張りたい場合は、

<a href="https://hatenablog.com/"><img src="link.png" title="リンク画像"></a>

って感じです。

 

まとめ

  1. HTMLはWebページを記述する為の言語(データ形式)。
  2. HTMLは、タグと呼ばれる目印のようなものをつけて記述。
  3. ハイパーテキストは画面に表示する文字や画像にリンクを張り、クリックされた時に別の情報を表示(別のページに遷移)する機能で、全世界どこの情報にもリンクが可能。

 

 

今回は、以上になります。 

 

最後まで読んで頂き、ありがとうございました。

 

 

【参考書籍】

 

 

 

     

 

 

すまっとネット - にほんブログ村

にほんブログ村 教育ブログ プログラミング教育へ にほんブログ村 IT技術ブログ IT技術メモへ
PVアクセスランキング にほんブログ村
にほんブログ村

 
人気ブログランキングへ