HTMLを書いてみよう！

Webページの「骨組み」を作ってみよう

CodePen を開く ↗
無料ですが、会員登録しないと保存はされません。登録したくない人は、うっかりブラウザバックやリロードをしてしまわないように注意しましょう。可能なら登録した方が後の部分で共有できて便利です。

HTMLとは

Webページの構造を作るための言語です。
「タグ」という <> で囲んだ命令を使って書きます。
開始タグ <h1> と終了タグ </h1> でテキストを挟みます。

色々なタグ

適当にCodePenにコピペして、どういう変化をするのか弄ってみましょう

コメントアウト : 

 で囲んだ部分はブラウザに表示されません。「ここ何のコードだっけ？」ってメモを残したいときに便利です。
使い方
```

<p>これは表示されます</p>
```
<h1> ～ <h6> : 見出しタグ

h1 が一番大きく、数字が増えるほど小さくなります。記事のタイトルや章タイトルみたいなイメージで使いましょう。
使い方
```
<h1>一番大きい見出し</h1>
<h2>二番目に大きい見出し</h2>
<h3>三番目に大きい見出し</h3>
```
<div> : グループ分けタグ

「ここからここまでひとまとめ！」って箱を作るタグです。見た目は何も変わりませんが、あとでCSSでスタイルをつけるときにとても役立ちます。
使い方
```
<div>
  <p>この段落はdivの中にある</p>
  <p>こっちも同じグループ</p>
</div>
```
<ul> と <li> : リスト（箇条書き）

箇条書きリストを作るタグです。<ul> がリスト全体の箱で、<li> が各項目。<ul> を <ol> に変えると番号付きリストになります。
使い方
```

<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>


<ol> 好きな果物ランキング
  <li>りんご</li>
  <li>みかん</li>
</ol>
```
<p> : 段落タグ

文章のかたまりを書くときに使うタグです。段落ごとに <p> で囲む習慣をつけておくと、あとでCSSで整えるのが楽になります。
使い方
```
<p>ここに文章を書きます。</p>
<p>別の段落はまた別のpタグで囲みます。</p>
```
<br> : 改行タグ

文章を改行するタグです。</br> みたいな終了タグは不要で、<br> だけでOKです。
使い方
```
<p>一行目の文章<br>
ここから二行目になります</p>
```

<a> : リンクタグ

リンクを貼るタグです。href="URL" でリンク先を指定します。target="_blank" をつけると別タブで開けます。

使い方

<!-- 普通のリンク -->
<a href="https://example.com">ここをクリック</a>

<!-- 別タブで開くリンク -->
<a href="https://example.com" target="_blank">別タブで開く</a>

実際のコード

コピペして自分の好きなように書き換えてみましょう！色々できる人はガンガン書き換えて自分のサイトを作ってください！
出来上がったサイトは以下のチャンネルにスクショとHTML（ダウンロードは下のやり方で）等を投稿して、自己紹介してください！

https://q.trap.jp/channels/event/welcome/teamtrial/progress

登録した人は右下のexportからzipファイルをダウンロードして、その中のsrc/に入っているhtml形式のファイルが今回書いたコードです。上の自己紹介と一緒に投稿しよう。もしくはshareからリンクを貼ってください

<!--
  CodePenでは <!DOCTYPE html> や <head> は不要です。
  <body>の中身だけ書けばOK！
-->

<h1>えびせんの自己紹介</h1>

<div> <!-- このdivは基本情報をくくっている -->
  <h2>基本情報</h2> <!-- <h2> : 2番目に大きい見出し -->
  <ul>
    <li>名前: えびせん</li>
    <li>すきなもの: プログラミング、ラーメン</li>
    <li>好きなゲーム
      <ol>
        <li>Slay the Spire</li>
        <li>splatoon</li>
      </ol>
    </li>
  </ul>
</div>

<div>
  <h2>プログラミングについて</h2>
  <h3>勉強中の内容</h3> <!-- <h3> : 3番目に大きい見出し -->
  <ol>
    <li>Go言語</li>
    <li>画像分析コンペ</li>
  </ol>
</div>

<p>
  はじめまして！えびせんです。<br>
  今日からWebページ作りに挑戦します！<br>
  よろしくお願いします！ 🎉
</p>

<p>
  サイト:
  <a href="https://q.trap.jp/channels/times/25/shr1444" target="_blank">
  <!-- ここに自分のチャンネルを貼ろう！-->
  自分のチャンネル
  </a>
</p>

最後に

もっと凝ったものを作りたい、学びたいやインターネット技術に興味がある人はSysAd班にぜひきて下さい!
あなたが自己紹介を投稿したtraQというSNSみたいなサービスもtraPが開発しているものです。こういった開発に携わりたいという人もぜひきて下さい！
どんなことしているのかなと思う人は気軽に色々な新歓イベントに出たり、近くの部員に聞いたりして下さい！

初心者経験者大歓迎です！！！