プログラミングをやる上での基礎知識3選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. HTMLのテンプレートの出し方。

2. HTMLの仕組み。

3. HTLMのタグ。

HTMLのテンプレートの出し方。

VS Code の画面の中に半角で 「！」と入力し、 Tab を押しましょう。「！」は、キーボードの Shift を押しながら 1 を押すと入力できます。
HTML を含め全角での文字入力はほとんど何も反応しません。
もし全角文字がコードに含まれていると正常な動作をしなかったり、エラーを起こしたりするので、全角と半角入力は特に注意を払いましょう。キーボードの左上の方にある Tab を押すと、HTML のテンプレートが自動で入力されます。自動入力できれば完成です。

HTMLの仕組み

HTML とは、「Hyper Text Markup Language 」を略したものです。
文字や画像などを組み合わせ、文書を表示するための言語「マークアップランゲー」の一種です。マークアップ 「Markup」とは、機械が読めるように内容に目印をつけることです、そしてその目印は書式が決まっています。

HTMLの仕組み

HTMLの基本となるタグは7つあります。

1. h タグ

2. p タグ

3. br タグ

4. aタグ

5. img タグ

6. ul・li タグ

7. table タグ

hタグ

h は heading「ヘッディング」の略で、見出しのことです。
h タグは、 h の後ろに 1 から 6 までの半角の数字を入力することで、 6 段階の見出しを表現できます。

Pタグ

p は paragraph「パラグラフ」の略で、段落のことです。 このタグで囲んだ前後に適当な余白が作られます。

brタグ

br は break「ブレーク」の略です。英語で「改行」は line break「ライン・ブレーク」といいます。
「br」タグを利用することで、 p タグ内でも任意の場所で改行を入れることができます。

aタグ

a は anchor（アンカー）の略です。
a タグは表示したいテキストの他に、リンク先の情報を記述する必要があります。　<a href="リンク先のURL">表示したいテキスト</a>のように記述します。

imgタグ

img は image（イメージ）の略で、画像のことです。
このタグは、 HTML に画像を読み込むことができます、また、画像が読み込めなかった時に表示される代わりのテキストも指定できます。 <img src="画像のURL" alt="代替のテキスト"> という形で書きます。

ul・li タグ

ul「ユー・エル」はunordered list「アンオーダード・リスト」の略で、順序のないリストのことで、並んでいる項目を表現できます。
li「エル・アイ」は list item「リスト・アイテム」の略で、リストの項目を表現します。 ul タグの子要素とする必要があります。

table タグ

table は、「表」を意味する英単語 table「テーブル」そのままです。HTML 上に表を作ることができます。表の中には、見出しを表す th タグと、データを表す td タグがあります。
しかし、このtableタグは近年ではあまり使われていないそうなので、頭の片隅に置いておく程度で良いかもしれません。

まとめ

今日はHTMLのプログラミングを作る段階に少し入ることができました。まだ、タグやテンプレートの使い方が曖昧な部分があるので、これから使っていく中でしっかりと良い使い方を学習していきたいと考えました。