O型のHTML記載方法まとめ


##    はじめに

  __<font color="blue">　【HTML（HyperText Markup Language）】</font>
    　（ハイパーテキスト・マークアップ・ランゲージ）を__
　記載する上で、最低限必要そうなことを、まとめました。

--------------------------------------------------------------


## <font color="green">①HTMLの基本構成</font>
#### 以下の4つが基本的な構成となります。
      1･･･ DOCTYPE宣言（ドックタイプ　宣言）
           HTML文書の仕様、バージョンタイプを記載

      2･･･ htmlタグ  （エッチティーエムエル　タグ）
           HTML文書であることを示すタグを記載

      3･･･ headタグ（ヘッダ　タグ） 
           HTML文書全体に関する指定などを記載
           
      4･･･ bodyタグ（ボディー　タグ）
           HTML文書の内容（見える部分）を記載


　なお、HTMLのタグには、「<>」開始タグと「&lt;/>」終了があり、基本は内容を間に記載   

　ページ全体の記載例　↓

````
<html> 　　　　　　・・・ 開始タグで始まりを記載

　<!DOCTYPE html>

　<head>
　    <title>サイトのタイトル </title>　　　・・・開始タグと終了タグで挟んで記載     
　</head>


　<body>
　　　～サイトの内容を記載～ 
　</body>

</html>  　　　　　　・・・ 終了タグで終了を記載
````


--------------------------------------------------------------

 「[DOCTYPE宣言](https://www.tohoho-web.com/html/doctype.htm "(https://www.tohoho-web.com/html/doctype.htm)とほほのWWW入門")」
 
 Document Type Definitionの略
 （読：ドキュメント・タイプ・デフィニション）⇒　[スキーマ言語のひとつ](https://wa3.i-3-i.info/word17380.html "(https://wa3.i-3-i.info/word17380.html)Document Type Definitionとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典")

 HTMLのバージョンより記載方法が異なる
 
 ・HTML4.01（詳細は異なる場合がある）

````
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
````

  ・HTML5以降のバージョン
````  
 <!DOCTYPE html>
 ````

--------------------------------------------------------------

 「[htmlタグ](https://www.tohoho-web.com/html/html.htm "(https://www.tohoho-web.com/html/html.htm)とほほのWWW入門")」
文書がHTMLであることを示すために、最初と最後に記載する。

--------------------------------------------------------------

「[headタグ](https://www.tohoho-web.com/html/head.htm "(https://www.tohoho-web.com/html/head.htm)とほほのWWW入門")」
ブラウザに向けた情報等を記載する。

例
<font color="blue">metaタグ</font> 「[ページに関する情報を表す](https://creatorquest.jp/reference/html/element/meta/#google_vignette "(https://creatorquest.jp/reference/html/element/meta/#google_vignette)CreatorQuest")」

````
<meta charset=UTF8">
    ・・・文字のエンコードと呼ばれる、数値を文字に変換するタイプを指定
````


<font color="blue">titleタグ</font> 「[ページのタイトルを表す](https://creatorquest.jp/reference/html/element/title/ "(https://creatorquest.jp/reference/html/element/title/)CreatorQuest")」

````
<title>パソコンで出来ることLINK!!</title>
````
<font color="blue">linkタグ</font> 「[linkタグとは「そのページ」と「別のファイルやページ」を関連づける](https://saruwakakun.com/html-css/basic/link-rel "(https://saruwakakun.com/html-css/basic/link-rel)サルワカ | サルでも分かる図解説明マガジン")」

````
 <link rel="stylesheet" type="text/css" href="body.css"> 
     ・・・外部スタイルシート外部スタイルシート(CSS)を読み込む、body.css ファイルを指定

    <link rel="shortcut icon" href="favicon.ico">
    ・・・ファビコンと呼ばれる、ブラウザのアドレスバーなどに表示されるアイコンを指定 
````

--------------------------------------------------------------

「[bodyタグ](https://www.tohoho-web.com/html/body.htm "(https://www.tohoho-web.com/html/body.htm)とほほのWWW入門")」
以下のような内容部分を記載する。



・<font color="blueviolet">__hタグ（見出しの作成）__</font>
　hタグは、小見出しを作るタグです。
 hタグの種類は、h1からh6まで６種類あり、数字が小さいほど大きな見出しを示します。


・<font color="blueviolet">__brタグ（改行）__</font>
　HTMLでは、改行する際はbrタグを使います。

 ・<font color="blueviolet">__tableタグ（表の作成）__</font>
　tableタグは、「[表を作る](https://www.tagindex.com/html_tag/table/table.html "(https://www.tagindex.com/html_tag/table/table.html)TAG index - HTML & CSS Web制作リファレンス")」タグです。tableタグは、trタグやtdタグ、thタグとともに使います。

 
--------------------------------------------------------------


## 参考文献

HTML関連情報サイト様
　　　https://www.tohoho-web.com/www.htm
　　　https://wa3.i-3-i.info/index.html
　　　https://www.tagindex.com/
　　　https://creatorquest.jp/reference/html/element/
   
　　　https://www.htmq.com/html/
　　　https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web