web入門(1) ~HTML入門~

#必要なもの
####・Chrome
####・VScode
それぞれChrome、VScodeで検索するとサイトが出てくるのでそこでダウンロードをしてください






#はじめに
HTMLとはWebページを作成するための言語です。普段、皆さんが閲覧するWebページのほとんどはHTMLで作られています。HTMLはテキストをタグ付けしていき、ブラウザ（Chrome)などに読み込ませて動作させます。以下、例を挙げましょう。

```html:sample.html

    <h1>HTML第一回</h1>
    <h2>プログラミング、始めました</h2>
    <h3>よろしくお願いします</h3>
```


h1などのhとは見出し（heading）を表し、後ろの数字で重要度(大きさ)を表します。こちらを動作させると、下のように表示されます。

<img width="405" alt="img2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/d16ea652-6d69-3c8d-39f6-a80e3e9bdf9c.png">

＜どんなふうに表示させるか＞ 表示させたい文 ＜/どんなふうに表示させるか＞

といった形です。


では実際に皆さんで実践してみましょう。
#HTMLの基本的な書き方

まずVisual Studio Codeを起動してください。左上の「ファイル」から「新規ファイル」を選択しましょう。このままHTMLを書き込んでもいいのですが、先に左上の「ファイル」から「名前を付けて保存」を選択し、ファイル名を「sample.html」として適当な場所（デスクトップがおすすめ）にHTMLファイルとして保存しましょう。(エディタ側では（ここではVisual Studio Code)まだ何についてのファイルか分からないため)
<img width="566" alt="img6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/996cefc1-737d-6acb-1254-6ea90217360d.png">
<img width="422" alt="img7.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/6f43cb72-069b-642a-4393-01596e779f6c.png">
<img width="554" alt="img5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/063911f2-368a-ad58-a91c-063635b98219.png">

Visual Studio Codeに戻って以下のような文章を打ちましょう。エディタ側はHTMLファイルだと認識してくれたので、自動で色を振り分けてくれると思います。終了タグには 「/」 (スラッシュ)のつけ忘れに気を付けましょう。

```html:sample.html
<h1>HTML第一回</h1>
<h2>プログラミング、始めました</h2>
<h3>よろしくお願いします</h3>
```
では動作させてみましょう。ファイルを保存して（Ctrl + S）、Chromeで開きましょう。皆さんが作成したsample.htmlをダブルクリックしてください。

<img width="117" alt="img8.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/d0891f9e-9de2-d614-8eff-38666c09d562.png">
※もしdemo.htmlが上のようなアイコンになっていない場合は、Chromeが既定のブラウザになっていません。詳しくは以下のリンクを参照してください。
[https://support.google.com/chrome/answer/95417?co=GENIE.Platform%3DDesktop&hl=ja]

上手く表示されましたか？このようにHTMLを使えば簡単にWebページを作ることができます。

ではHTMLの構造について解説します。少しレベルアップしますが、頑張りましょう。HTMLとは基本的に以下のような入れ子構造で記述します。

```html:sample.html
<!DOCTYPE html>
<html>
<head>
  <title>ここがタイトル</title>
</head>
<body>
　<h1>HTML第一回</h1>
　<h2>プログラミング、始めました</h2>
　<h3>よろしくお願いします</h3>
</body>
</html>
```
<img width="428" alt="img9.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/29e1c8af-ea05-17d5-658c-f38047b8acb7.png">

上の画像を大雑把に説明すると＜html＞という大きなタグの中に＜head＞(設定、ページ上には表示されない)＜body＞(ページ上に表示される内容)が入っているという構造です。
先ほど記述した＜h1＞~~~＜/h1＞などはbody要素に書くものだったのですね。このようにHTMLは各タグを入れ子にして記述していくので、コードが見やすくなるよう、インデント（字下げ）をしましょう。


これでHTMLの基本的な書き方や知識を学べました。次に様々なタグを具体的に紹介していきたいと思います。

#タグについて
今度は様々なタグを使ってHTMLを記述してみます。先ほど書いたコードの内容と下の図を思い出しながら、覚えていきましょう。

<img width="428" alt="img9.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/985a3115-5a96-4094-0704-f9b8623869f2.png">

###＜head＞~＜/head＞の中に記述するもの
・`<meta>`
＜meta＞タグは文書に関するデータを指定します。終了タグは必要ないので注意しましょう。
以下文字コードを指定した例
`<meta charset="UTF-8">`
・`<title>`
タイトルタグで文字を挟むとその文字がタイトルになります。
例
`<title>ここがタイトル</title>`
<img width="389" alt="img10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/c54f2b54-02f2-9808-707b-c994a532e0ed.png">
・`<link>`
<link>タグは外部ファイルを指定して読み込ませます。終了タグは必要ないので注意しましょう。
以下CSSファイル（style.css 後々やります）を読み込ませた例
`<link rel="stylesheet"href="style.css">`

###＜body＞~＜/body＞の中に記述するもの
・`<h〇></h〇>`
例

```html:
<h1>見出しを表す、一番重要</h1>
<h2>二番目に重要な見出し</h2>
<h3>三番目に重要な見出し</h3>
```
<img width="388" alt="img12.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/fae6e799-26ca-9730-63ff-2018ae966c6e.png">



h1~h6まであります。見出しを表すタグなので、単純に大きい文字を表示するために使うのはやめましょう。

・`<p></p>`
例

```html
<p>pタグには主に本文や説明文を入れる</p>
```
<img width="342" alt="img13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/ef4b3ba6-4a8a-0acc-f95e-de71ce98e63d.png">

pはパラグラフの略です

・`<div></div>`
div要素そのものに特別な意味はなく、単純に要素をまとめるために使う。
例

```html
<div>
  <p>こうやって</p>
  <p>pタグをまとめた</p>
</div>
```
<img width="381" alt="img14.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/733dc7bc-9404-d0f7-3289-99f3eb2bf751.png">

・`<a></a>`
aはアンカーを表し、Webサイトのリンクを貼る。
例

```html
<a href="https://www.google.com">グーグルのリンク先</a>
```
<img width="392" alt="img15.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/1105bad4-86ad-f420-7fab-9c614aa13f08.png">

・`<img>`
＜img＞は画像を表示する際に使用します。終了タグは必要ありません。
例

```html
<p>サンプル画像です</p>
<img src="img/sample.PNG">
```
<img width="660" alt="img16.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520677/3178a159-1a5d-e696-1b24-9a0657487d45.png">

きちんと画像が表示されましたね。

ところで、このimgタグの中のsrc="img/sample.PNG" や先ほどのaタグのなかのhref=”https://www.google.com”　とは何なのでしょうか？

結論から言うとこれはimgタグの中のscr属性、aタグのなかのhref属性を指定しいる文です。
何を言っているのかわからないと思いますので、まずは”属性”について説明をします。
属性とは感覚的に言うと要素に　”詳細設定をつけるようなもの”　と思ってください。
例えば先ほどの　


＜a href="https://www.google.com"＞は
　a の　href(参照するurl) は　https://www.google.com　です。

ということを意味し、
また、

＜img 　src="img/sample.PNG"＞　とは
　img　の　scr(画像の場所)　は　img/sample.PNGです。

といった感じです。


基本的に＜○○の　□□は="△△です"＞という感じで大丈夫です。


ここまで基本なタグを一通り紹介してきました。では、ここで一度演習をしてみましょう。以下の基本構造を使って各々自由にサイトを作ってみてください。
※画像を使う場合はHTMLファイルと同じ場所に画像を保存してください。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    ページの内容(ここを自分で書いてみましょう)
  </body>
</html>
```