今回からは現在勉強している、プログラミングのアウトプットをしてみることにしました。
言語は「HTML」と「CSS」を選びました。
この言語はwebのホームページ作成などに使われていて、web業界は今後伸びるだろうということで勉強しています。その基本となる言語の「HTML」と「CSS」をこのブログでアウトプットしていきます。
あくまで、自分の為のアウトプットの場と考えているので、プログラミングをやりたいと考えている人などはプログラミング学習サイトなどを見たほうがよっぽどわかりやすいです。
筆者は今「Progate」にお世話になってます。
目次
webページの構成
webページは「HTML」と「CSS」の2つの言語から構成されています。
このブログのようなページも上記2つの言語を書けるようになれば、一から作ることも可能です。
どちらもテキストで作成できるので、面倒な環境構築は必要ありません。
HTMLについて
タグ
HTMLはテキストに「タグ」と呼ばれる印をつけます。
テキストをタグで囲むことにより、「見出し」や「リンク」といった意味を持つことになります。
この見出しを例にすると下記のようになる
<h3>タグ</h3>
タグには開始タグと終了タグがあり終了タグには「/」をつけます。
見出し
見出しにはh1～h6の要素で表せる。
<h1>が一番大きく、<h6>が一番小さい
タグ内の数字を変更すれば小さくなっていきます。
サンプルコード
<h1>見出し1</h1>
段落
段落はｐ要素で表せる。pはparagraph(段落)の意味です。
上記の説明を実際に記述する際は下のように書く。
サンプルコード
<p>段落はｐ要素で表せる。pはparagraph(段落)の意味です。</p>
コメント
コメントはソースコードにメモや説明を記載するときに使います。ブラウザ上には何も反映されません。<!– –>で囲みます。
サンプルコード
<!--これはコメント-->
リンク
リンクは<a>要素をつかって表します。このブログのトップページの場合は
サンプルコード
<a href="https://tacmaro.com/">その目だれの目</a>
リンク先に飛ぶように指定するには、hrefという属性を追加します。<a href=”url”>のようにurlの部分には飛ぶ先のurlを指定する必要があります。また、urlの部分を属性の値と言い指定する場合は「”」で囲みます。
画像の表示
画像を表示するには<img>要素を使います。
サンプルコード
<img src="https://tacmaro.com/wp-content/uploads/2020/03/computer_programming_man1-300x273.png">
src属性にリンクと同じように画像のurlを記載します。<img>要素はテキストを書くことがないので終了タグはありません。
リスト
リストは<li>要素で作ります。囲む要素によって黒点や数字などで表せます。<ul>要素は黒点<ol>要素は数字です。要素を要素で囲むことを入れ子と言います。
<ul>や<ol>を親要素。<li>を子要素と呼ぶ。そして、 子要素を書く際はわかりやすくするようにインデント「字下げ」をする。tabキーを押せば一発でできる。
- リスト1
- リスト2
- リスト3
サンプルコード
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
- リスト1
- リスト2
- リスト3
サンプルコード
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol>
次回予告
今回はHTMLの基本的な部分について書きました。
次回は「CSS」をメインにやっていきます。
コメント