TOP

コーディング

【6日目】詳細HTML基礎文法編#15-#19文章の構造をマークアップしてみよう

ご依頼内容

今朝は、「詳細HTML基礎文法編」を#1から復習。

やはり、表の作り方がスラスラ行かなかったので、自分で表を作ってみた。

#15-#19は、リンク(外部、内部)と文章の構造マークアップ

とくに悩むところはなかった。

 

ショートカットキーは使い慣れるしかないのだけど、Visual Studio Codeで行をいっぺんに右左に動かすショートカットキーに悩む。Shift+tabで左に動くんだね。

 

この講座は#22までなので、もう少しだ。

 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="discription" content="プログラミング学習サービスのドットインストールです">
    <title>ドットインストール</title>
    <link rel="icon" html="favicon">

  </head>
  <body>
    <header>
      <img src="img/logo.png" width="350" height="50" alt="ドットインストールのロゴです">
    </header>
    <main>

      <h1>ドットインストール</h1>
      <p>プログラミングサービスの<a href="http://shukatsu-blog.online" target="_blak">ドットインストール</a>です。『<a href="members.html">メンバー紹介</a>』と『<a href="lessons/index.html">レッスン一覧</a>』もご覧ください。</p>
      
      <nav>
        <ul>
          <li><a href="#about">このサービスについて</a></li>
          <li><a href="#tokucho">主な特徴</a></li>
          <li><a href="#use">使い方</a></li>
          <li><a href="#question">よく聞かれる質問</a></li>
        </ul>
      </nav>
      <section>
        <h1 id="abount">このサービスについて</h1>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </section>
      <section>
        <h1 id="tokucho">主な特徴</h1>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        <ul>
          <li>すごい</li>
          <li>つよい</li>
          <li>やばい</li>
        </ul>
        <ol>
          <li>動画を見る</li>
          <li>コードを書く</li>
          <li>コードを改造する</li>
        </ol>
        <dl>
          <dt>質問A</dt>
          <dd>回答A</dd>
        </dl>
        <table>
          <thead>
            <tr>
              <th></th>
              <th>出来事</th>
            </tr>        
          </thead>
          <tbody>
            <tr>
              <td>1964</td>
              <td>生まれる</td>
            </tr>
            <tr>
              <td>1999</td>
              <td>鹿児島</td>
            </tr>        <tr>
              <td>2018</td>
              <td>成田</td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h1 id="use">使い方</h1>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </section>
    
      <section>
        <h1 id="question">よく聞かれる質問</h1>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </section>
      </main>
    
    <aside>
      <h2>広告です</h2>
      <p>広告です広告です広告です広告です広告です広告です広告です広告です広告です</p>
    </aside>
    <footer>
      <p><a href="#">先頭に戻る</a></p>
    </footer>
    
  </body>
  </html>