HTML 基礎 | 初心者

今までの学習を整理するための記事。

HTMLはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、ハイパーテキストを記述するためのマークアップ言語の1つ。

ハイパーテキストとは、複数のテキストを相互に関連付け、結び付ける仕組み。

マークアップランゲージとは、視覚表現や文章構造などを記述するための形式言語。

初心者なりに意訳すると、web用の文章に対してマークを付けて構造化するためのルール…みたいな感じ?
実際にHTMLを書く時は、タグをつかって文章を囲む形にする。

<タグの始まり>文章</タグの終わり>

タグにはたくさんの種類と意味があるので、これを使って文章に意味付けをし構造化していく。
たとえば自己紹介として次の文章を書いたとする。

プロフィール
名前
がっくん
仕事
専門学生

これをwebサイトで公開するためにHTMLのルールに従ってマークを付ける。
このことをマークアップという。多分。

<h1>プロフィール</h1>
<h2>名前</h2>
<p>がっくん</p>
<h2>仕事</h2>
<p>専門学生</p>

<h1></h1>で囲まれた部分は「大見出し」という意味になる。
<h2></2>で囲まれた部分は「小見出し」、
<p></p>で囲まれた部分は「段落」という意味になる。
これをwebサイトを見るソフトで表示すると次のようになる。

プロフィール
名前
がっくん
仕事
専門学生

文字の大きさや太さが違うのはwebサイトを見るためのソフトが、
「ここは<h1></h1>で囲まれているから大見出しだ、文字を大きく太く表示。」
みたいな感じで文章の構造を判断して見た目を変えてくれているから。

もう一つ例としてリンクを作ってみる。リンクを作りたい時はaタグを使う。
aタグの書き方

<a href=”リンク先へのパス”>リンクにするテキストや画像</a>

リンク先へのパスは相対パスか絶対パスで指定する。
実際にリンクを張る時は次のように書く。

<a href=”https://www.gackun.com”>がっくんのホームページ</a>

これをwebサイトを見るソフトで表示すると次のようになる。

これも大見出しなどと同じように、webサイトを見るためのソフトが文章構造を判断して、
「ここはリンクだから文字を青色にして下線を引く。クリックしたらリンク先へ移動。」
みたいな感じで表示を変えてくれている。

それとHTMLは木構造(入れ子構造)の言語。タグをタグで囲うことができる。
「本文中にリンクがある」みたいな文章もOK。
その場合は次のように書く。

<タグAの始まり><タグBの始まり></タグBの終わり></タグAの終わり>

実際に1つの段落の中にリンクを表示させたい時は次のように書く。

<p>わたしのホームページは<a href=”https://www.gackun.com”>gackun.com</a>です</p>

これをwebサイトを見るソフトで表示すると次のようになる。

わたしのホームページはgackun.comです
 
こうなるとここの見出しは文字の大きさを小さくしたいとか、色を変えたいとか、位置を変えたいとか、そう思うことが必ずある。そうなった時はCSSの出番。CSSを使うことでHTMLで構造化された文章に対して大きさとか色とか位置とかいろいろ指定することができる。
CSSについては次の記事で。

コメント

タイトルとURLをコピーしました
Close Bitnami banner
Bitnami