WEB開発をやり始めてみる(HTML:基礎)

目的

以前、Rubyのスクールに通っていたので
今回もRubyをメインにして、WEB開発を行なっていきます。
インフラは、業務でやっているので開発側がどんなことを注意しないといけないのかが目的となっています。

やってきたことメモ

HTMLの基礎

入力コード

<!DOCTYPE html>
<html lang="ja">
  <!-- コメントしたい時 -->

  <head>
    <meta charset="UTF-8">
    <title>はじめてのHTML</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>

  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
    <p>
      1000 - 00014<br>
      あああああ<br>
      い良いいい<br>
      ううううう
    </p>

    <p>区切りの要素について</p>
    <hr>
    <p>区切り要素について</p>

    <p>リストについて</p>
    <ul>
      <li> りんご</li>
      <li> りんご</li>
      <li> りんご
        <ul>
          <li>みかんみかん</li>
          <li>みかんみかん</li>
        </ul>
      </li>
    </ul>
    <ol>
      <li> りんご</li>
      <li> りんご</li>
      <li> りんご</li>
    </ol>
    <dl>
      <dt>用語</dt>
      <dd>説明</dd>
      <dt>用語</dt>
      <dd>説明</dd>
      <dt>用語</dt>
      <dd>説明</dd>
    </dl>
    <img src="xxxxxxxx_logo.png" width="300" height="200" alt="広った画像">
    <a href="https://xxxxxxxx.com/">プログラミング入門</a>
  </body>

</html>

vscodeの設定変更

• 拡張機能「zenkaku」導入
• 拡張機能「HTMLHint」導入
• 設定 >> html.format.enable の有効化
• 設定 >> html.format.indentinnerHtml の有効化(shfit+option+F)
• 設定 >> tabsize「2」に変更
• 設定 >> Render Whitespace 「all」
• 設定 >> Render Control Characters 有効化

HTMLの構文チェックについて

構文チェックが行えるサイトを使用して構文チェックができる
https://validator.w3.org/

HTMLのグルーピング

入力コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>グループ化の練習</title>
</head>
<body>
  <header>
    <h1>グループ化の練習</h1>
    <nav>
      <ul>
        <li><a href="#">エンジニアへの道</a></li>
        <li><a href="#">プログラミング入門</a></li>
        <li><a href="#">ニュース</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>グループ化を学ぶのにおすすめのサイト10選！</h2>
      <p>グループ化を学べるサイトを10個紹介いたします。</p>
    </article>

    <section>
      <h2>関連記事</h2>
      <ul>
        <li><a href="#">関連記事1</a></li>
        <li><a href="#">関連記事2</a></li>
        <li><a href="#">関連記事3</a></li>
      </ul>
    </section>
  </main>

  <aside>
    <h2>広告</h2>
    <p>全ショップ対象エントリーでポイント５倍！</p>
  </aside>
  
  <footer>
    <p><small>&copy; 2020 Yuta Nakamura.</small></p>
  </footer>
  
</body>
</html>

section : セクションをグルーピング
header　：　セクションのヘッダー
footer　：　セクションのフッター
main　：　　文章のメインコンテンツ領域を示す
article ：　記事コンテンツ要素
asibe : 余談要素
nav : ナビゲーション要素