【プログラミングの勉強】HTMLにふれてみる

時間もあるので、プログラミングを勉強してみようと思います。

知識はほぼ0、SQLの入門書を一冊読んだくらい。

利用しているのは「Progate」という無料サービスです。

HTMLでは、テキストに「タグ」と呼ばれる印を付けていきます。図のようにテキストをタグで囲むことにより、テキストが「見出し」や「リンク」といった意味をもつことになります。

テキストをタグで囲む時は、以下の図のように、開始タグと終了タグではさみます。終了タグには「/」が必要な点に注意してください。

----------

----------

見出しの要素は<h1>要素以外にも、<h2>, <h3>, ..., <h6>要素があります。
hはheading（見出し）の略です。<h1>が一番大きな見出しで、<h6>が一番小さな見出しになります。

段落を表すのは<p>要素です。 pはparagraph（段落）の略です。

<h2>要素や<p>要素で囲んだテキストは改行されます。

----------

<h1>プログラミングの世界へようこそ</h1>

<h2>Progateとは</h2>

<p>オンラインのプログラミング学習サービスです</p>

----------

リンクを作成するためには<a>要素を用います。

テキストを<a>タグで囲むことで、簡単にリンクを作ることができます。

実際に表示されるテキストは、<a>タグに囲まれた部分です。

<a>要素にリンクの飛び先を指定するには、href属性を追加する必要があります。

<a href="url">というように書き、url部分にリンク先のURLを指定することで、そのページへのリンクを作ることができます。

----------

<a href="https://prog-8.com">Progateへ</a>

----------

画像の表示には<img>要素を用います。
<img src="url">のように、src属性のurlの部分に画像のリンクを指定することで、画像が表示されます。
<img>要素はテキストを囲むことがないため、終了タグが要りません。

----------

<li>要素は、囲む要素によって種類が変わるという特徴を持っています。
<ul>要素で囲むと、黒点が先頭につきます。
<ol>要素で囲むと、数字が連番でつきます。
このように要素を要素で囲むことを入れ子と言います。
囲む方の要素を親要素、囲まれる要素を子要素と呼びます。

入れ子構造の要素がある場合は、インデント（字下げ）をします。
インデントは必須ではありませんが、インデントをすることで、入れ子構造が複雑になっても親子関係がわかりやすくなります。行の先頭で「tab」キーを押すと簡単にインデントをすることができます。

----------

----------

社会人3年目に、30日間人生の夏休みをもらった話