Let's start from here

HTML とは

HTML(エイチティーエムエル)とはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、ハイパーテキストを記述するためのマークアップ言語の1つです。要は「皆さんが利用しているブラウザで見ているWebサイトがあると思いますがそれらは全てHTMLで記述されていますよ。それをブラウザが解析して表示をしているのでその記述ルールに従って書いてくださいね。」ということです。
皆さん利用しているブラウザが解析できるのがHTMLなのです。

WWW(World Wide Web)

HTMLの中に埋め込まれた文章中のURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在する文書同士を相互に参照可能にするシステムである。
閲覧者は表示している文書中でハイパーリンクが付された箇所をクリックやタップなどする事でハイパーリンク先の文書を表示させることができる。
世界中に張り巡らしたような、文書間のつながり方が蜘蛛の巣を連想させることから、世界に広がる蜘蛛の巣を意味する「World Wide Web」と名付けられた。

HTMLの特徴

HTMLは木構造(入子構造)のマークアップ言語であり、形式言語でです。
「タグ」と「タグ」で括られたものを要素とよびそれが入れ子状態になって構造化を表現しています。
全ての「タグ」役割があって要素を役割ごとに整理して記述します。
例えば、HTML文章の開始タグは、“<html>”終了タグは“</html>”のように始まりと終わりで文章を囲みます。終了タグには「/」半角スラッシュが付きます。
ブラウザ上で「ソースの表示」コマンドを実行すると(右クリック)現在見ているWebページのHTMLソースが表示されると思います(ページによっては複雑な表記になるばあいもあります)。
HTMLは大きく分けて2つの要素に分けられます。1つはヘッド要素で直接ブラウザに表示されない文章のメタ情報を記述します。、もう一つはボディー要素で直接ブラウザの画面に表示される内容を記述します。

CSS

CSS(カスケーディング・スタイル・シート)とは(Cascading Style Sheets)の略でウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。
HTMLは、CSSと組み合わせて使用します。最初は、文書構造はHTMLで見た目の装飾はCSSでというような理解でよいと思います。

HTML&CSSソースの編集エディタ

OSに標準で添付されているノートパットとかでも使用可能ですが効率はあまりよく使えないと思います。有名どころだとAdobe Dreamweaver とかがあります。高機能ですが高価なのでここでは無料で使用できるマイクロソフトの「Visual Studio Code」を紹介します。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
インストールの方法は、本サイトの別カテゴリで説明してます。