HTMLでは、文字や画像にタグをつけることで、 この文章は○○です、と意味づけをしていきます。
タグには＜タグの名前＞～～～＜/タグの名前＞といったように、 /を使った「終了タグ」を使って書くものと、 この終了タグが必要ないものがあります。

HTMLファイルの拡張子.html、CSSの拡張子.CSSです。
つまり、ページを増やしたい場合は.htmlを増やせばよいのです。

HTMLは主に、＜html＞タグ・＜head＞タグ・＜body＞タグでできています。
＜html＞：囲った中身がHTMLで書かれているという意味です。

＜!DOCTYPE html＞：HTMLのバージョンを指定しています。

＜html lang="jp"＞：webページの基本の言語を指定しています。jpは日本語指定になっていて、この部分を読み取ってブラウザは翻訳機能などをおすすめしてくれます。

＜head＞：実際には目に見えない部分を記述します。例えば、webサイトのタイトル、外部のCSSなどのファイルの読み込み行います。

＜meta charset="UTF-8"＞：文字コードの指定をしています。

＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞：webページの縦横を開いているデバイスのサイズに指定してくださいという意味になります。

＜title＞：閉じタグで挟んでいる中身の文章がそのままタイトルとして使われます。

＜body＞：目に見える本体の部分を記述します。

ここで説明するタグは、webデザインによく使われるものになります。
＜h1＞～＜h6＞：heding（見出し）のhで、基本的には1が文字が大きく、6になるほど小さくなっていて、大見出し小見出しのような使い方ができます。

＜p＞：paragraph（段落）のpで、使い方は意味の通り、段落ごとに使います。

＜br＞（閉じタグ不要）：break(折る、分ける)のbrで、改行をするときに使います。HTMLは改行する場所を指定しない限り横に伸びていくので、＜br＞を覚えておきましょう。
ただし、＜p＞タグや＜h＞タグなど、テキストと認識されている部分にしか使用できないので注意です。

＜ul＞＜ol＞：unordered（順序のない）list（リスト）とorderd（順序のある）list(リスト)になります。＜ul＞は箇条書き、＜ol＞は順番だと考えてくれればよいと思います。このタグはリストと言って、中には＜li＞タグを入れます。

＜li＞：list item（リストアイテム）で、＜ul＞＜ol＞の中に入れることによって、＜li＞が箇条書きだったり順番を付けられたりします。＜ul＞＜ol＞＜li＞のリストのタグはセットで覚えましょう。

＜a＞：anchor(アンカー)のaで、タグの中にhref(ハイパーテキストの参照)を使ってリンクを指定することで、囲んだ要素にリンクを付けることができます。

＜img＞（終了タグ不要）：image（イメージ）のimgで、タグの中にsrc(ソース、情報源)を使って張り付けたい画像のパスを指定することで、張り付けることができます。対応していない形式の画像ファイルもあるとので、気を付けて下さい。また、タグの中にalt（代替テキスト）を指定することで、画像が何らかの理由で適用されていない場合に、テキストが表示されるようになります。

＜div＞：division（区分・分割）のdivで、囲ったものをひとまとまりのグループとして扱うときに使います。divタグはできることが多く難しいですが、とにかく使うことになるので覚えておきましょう。

＜span＞：文字通りspan（つなぐ・結ぶ）で、テキスト版のdivタグです、テキストでspanで囲んだ部分だけテキストの色を変えたりしたいときに使います。

＜article＞：そのままarticle（記事、論説）で、サイトの中の記事をまとめるときに使います。できることはdivとほとんど同じですが、パソコン（クローラーなど）がサイトの構造を理解するときにわかりやすくなるそうです。

＜section＞：そのままsection（節・章）で、意味以外はほとんどarticleの説明と同じで、サイト内の節・章をまとめたいときに使います。

＜header＞：そのままheader(文章の一番上の部分)で、サイトの上部に何かを付けたいときに使います。できることはdivと同じです。

＜main＞：そのままmain（主要）で、意味もメインの内容を書きます。headerやfooterなどと区別するために使います。できることはdivと同じです。

＜footer＞：footer（文章の一番下の部分）で、よくあるページだと、コピーライトや連絡先などが書かれている部分です。できることはdivと同じです。

＜nav＞：navigation(道順案内・案内)のnavで、サイトのメニュー部分をまとめるときに使います。サイトでよく見る目次のような部分やheaderとセットでよく使われています。できることはdivと同じです。

CSSの基本的な書き方は、
セレクタ（どの要素に）｛ プロパティ（どういう効果を）: 値（どのように・どのくらい変更するか）; ｝

といった形になっていて、セレクタにはidやclassを指定することもできます。プロパティは、CSSのスタイルの種類のことです。
文字サイズの変更をしたいなら「font-size」・文字の色を変更したいなら「color」といった感じです。
値は、プロパティのスタイルをどのように、どのくらい変更するのかを指定します。

文字のサイズを変更する「font-size」でいうなら、文字のサイズの具体的な大きさ（セレクタ名{font-size:24px;}と指定すると文字のサイズが24pxになります。）を指定します。

文字の色を変更する「color」なら、（セレクタ名{color:#333;}と指定すると文字の色が#333＝黒色になります。）変更したい色を指定します。
値にはいろいろな指定の方法があります。色なら、カラーコード指定・RGB指定・RGBA指定を3つがあります。

また、CSSにもいろいろな書き方があり、HTML要素の中に「style="プロパティ: 値;"」を記入することでもCSSを適用することもできますし、HTMLの＜head＞タグの中に＜style＞タグを使用することでCSSを記入することができます。

color: 色指定;　文字の色を変更できます。

font-size: 数値（px,em,rem,%など）;文字の大きさを変更できます。

font-weight: 数値（単位はない,標準は400で100～900の間が指定できます）,用語（normal,bold,bolderなど）;文字の太さを指定できます。

text-decoration: 用語（none,underline,overlineなど）;文字に装飾ができるプロパティです。

line-height: 数値（px,em,rem,%,単位なしなど）;文字の行の高さ（行の幅）を指定できます。おすすめは1.5（単位なし）フォントサイズの1.5倍。

backgrond-color: 色指定; 要素の背景の色を変えます。

background-image: url（"パス" ※'か"で囲んでください）;要素の背景をパスで指定した画像に変えます。

background-repeat: 用語（no-repeat,repeat-yなど）;背景の繰り返しを方を指定します。

background-imageと一緒に使われることが多いです。

ブロック要素のサイズ指定（div,h1,ul,pなど ※imgなどの例外あり。）

width:数値（px,em,rem,%,vwなど）,用語(auto,max-contentなど);width（幅）の通り、要素の横幅を変えられます。（※ブロック要素の）
height:数値（px,em,rem,%,vhなど）,用語(auto,max-contentなど);height（高さ）の通り、要素の縦幅を変えられます。（※ブロック要素の）

margin:数値（px,em,rem,%など）,用語（autoなど）;marginは外側の余白を指定できます。

padding:数値（px,em,rem,%など）;paddingは内側の余白を指定できます。marginとは違いautoは指定できません。
※marginとpaddingは数値を複数指定するか、指定のプロパティを使うことで、上下左右それぞれに余白をつけることができます。
例として、
セレクタ{margin: 10px}と指定すると、4辺すべてのmarginが10pxされます。
セレクタ{margin: 10px 20px;}と指定すると、marginが上下10px　左右20pxされます。
セレクタ{margin: 10px 20px 30px;}と指定すると、marginが上10px　左右20px　下30pxされます。
セレクタ{margin: 10px 20px 30px 40px;}と指定すると、marginが上10px　右20px　下30px　左40pxされます。
また、
margin-top（上）,margin-bottom（下）,margin-left（左）,margin-right（右）: 数値または用語など;でそれぞれ指定することができます。
paddingも同じようにpadding-top,padding-bottom,padding-left,padding-rightでそれぞれ指定することができます。

border:数値（px） 用語（solid,dotted,dashedなど） 色指定;要素の境界線に実線や点線などの線を書きます。
複数のプロパティが混じっているので例として、
border: 1px solid #333;だと、1pxの#333＝黒色のsolid（実線）を書きます。
boederも色だけ変えるプロパティや下だけにつけるプロパティがありますが、ここでは省きます。

displayプロパティ（要素の特性を変更する） display: 用語（block,inline,flexなど）;要素をインラインやブロック要素に変えたりすることができます。
2種類の特性があり、外側に作用する値と、その要素の内側（子の要素）に作用するものがあります。

text-align: 用語（start,end,centerなど）;テキストや画像などのインライン要素を値の場所に配置します。（centerなら中央など）

justify-content: 用語（start,end,centerなど）;display:flexの適用されている子要素の位置を値の場所に配置します。
また、ブロックレベル要素はmarginを使うことで場所の変更ができます。
中央揃えはmargin:0 auto;で可能です。