はい、どうもこんにちは、双極くんです。今回はプログラミング学習第二回を行っていきたいと思います。
今回は「HTML」についてもう少し掘り下げて考えていきましょう。
「HTML」はマークアップ言語と言われます。
マークアップとは、どういうことでしょうか？
マークアップとは
マークアップとは、コンピューターで識別用のマークをつけること、と言う意味があります。
もっと詳しく言えば、テキストや装飾などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行って行くことを意味します。
例えば、人間ならば、チラシやパンフレットを見た時、自然に「この部分はタイトルだな。ここは見出しだな。これは注釈だな。」という事を、デザインやレイアウトから判断することが出来ます。
そこから、読む順番を決め、文書や作成者の意図を正しく理解できるでしょう。
しかし、コンピューターは文書の内容や意味を理解することが出来ません。
テキストデータを一定の規則に従って処理していくだけです。
このため、「この文書は○○について書かれたもの。この部分はタイトル。ここからここまでが本文です。」ということを文書内で一つ一つコンピューターに理解させる必要があるわけです。
つまり、文書を理解させるために、ルールに従ったタグを記述していくこと、これを「マークアップする」と呼びます。
このような「マークアップ」言語の1つが「HTML」です。
マークアップ言語「HTML」とは
Hyper Text Markup Languageを訳して「HTML」と呼ばれています。これは文字の情報をマークアップする言語ですよ、という意味合いがあります。
つまり「HTML」は、どこからどこまでに何があるのかを伝える言語ですので、
- 「ここから」と「ここまで」という情報を書き記していく、という事になります。
場合によっては、
- 「ここには何がある」という情報を書き足していく、という形で印をつける、マークを付ける。
というイメージで覚えていくと良いかも知れません。
HTMLの書き方
では、実際にHTMLをどのように書いていくのでしょうか？
実際に使われるのは…。
- タグ を＜（小なり記号）と、＞（大なり記号）を使って表現します。
※半角英字で書くのを忘れないようにしましょう！全角ではHTMLとして認識されません。
具体的には
- 見出し（一番大きいもの）<h1>～</h1>
- 段落<p>～</p>
というものがあります。
実例として、ローレンイプサムというダミー文章を使って、タグ付けをしてみました。
<h1>Lorem ipsum.</h1>←見出しです。
<p>（最初の段落）
Lorem ipusum dolor sit amet. consectetur adipiscling elit. Pellentesqre id ultrices massa. Proin dignissim augue tempor, pretium doler vitae, pulvinar tellus. Nullam scelerisque leo ac pellentesque porttitor. Praesent lacus nunc, consequat et vehicula in, eleifend eget velit. Maecenas ornare odio et odio porttitor pulvinar. Ut non uruna odio. Praesent adipiscing mollis mauris, a tincidunt felis feugiat id. Mauris vitae auque ante. Vestibulumante ipsum primis in faucibus orci luctus posuere cubilia Curae; Morbri tempor, nistl et fringilla auctor,ante tortor ornare leo, sit amet aliquet nunc nulla id mi.Maecenas mollis,odio eget fermentum porta, nisl sem congue nisi, nec tincidunt lorem justo in purus.
</p>
<p>（次の段落）
Lorem ipsum dolor sit amet, cosecteter adipiscing elit. Mauris sit amet interdum massa,sed scelerique odio. Mauris arcu sem, vestibulum quis ferment sit amet, varius a sapien. Proin volutpat, ipsum sed mattis iaculis, quam urna egestas metus, sed lobortis tortor diam vitae risus.
Curabitur et enim ac mauris bibendum vesibulum. Vivamus quis posuere mauis, non faucibus quis posuere mauria, non faucibus nivh.Vestibulum sed euismod nisl. Integer eget congue urna, quis elementum nisi. Etiam et metus sed sapien varius molestis non vitae sapien. Praesent sugittis nisi nec metus viberra semper. Mauris euismod, sem id tempor pellentesque, ante pulvinar. Quisque porta enim id elimentum feugiat.
</p>
次回から、もっと実践的なHTML言語を学習していきたいと思います。
まとめ
実のところ、このブログにも「HTML」が使われていて、見出しに<h3></h3>、<h4></h4>、<h5></h5>が、段落に<p></p>とマークアップされています。
このような、私たちがいつも見ているウェブサイトのほとんどが、HTMLでのマークアップで構成されているのです。
是非これからも、このHTMLを学習を続け、立派なウェブデザインが出来るようになっていきたいと思います。
学び
時間を有効に使ってください。‐エフェソス5:16
時間は無限ではないので、出来るだけ有意義なことに使いたいのですが、私にとっては、「休む」ということも有意義なことです。
