山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[ドットインストール] はじめてのHTML (全15回)

HTML

随分前にHTMLの勉強を始めようと思い、progate で講座を受講していました。二回くらいしかやらなかったんですが、今回は頑張ろうと思います。

https://dotinstall.com/

はじめてのHTML (全15回)

全部やりました。一回が5分もないので一気にやれると思います。

HTMLの基本的な機能が学べました。

コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>太郎のポートフォリオサイト</title>
    <link rel="icon" href="favicon.ico">
    <meta name = "discription" content="太郎のポートフォリオサイトです。">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>
            <a href="index.html">
              HOME
            </a>
          </li>
          <li>
            <a href="about.html">
              ABOUT
            </a>
          </li>
        </ul>
      </nav>

      <img src="img/header.png" width="400" height="130" alt="ヘッダー画像">
    </header>

    <section>
      <img src="img/taro.png" width="140" height="140" alt = "太郎のアイコン">
      <h1>山田太郎</h1>
      <p>UI/UXデザイナー見習いです</p>

      <section>
        <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム">
        <h1>勇者ゲーム</h1>
        <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
      </section>

      <section>
        <img src="img/work2.png" width="400" height="260" alt="勇者ゲーム">
        <h1>宝さがしゲーム</h1>
        <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
      </section>

      <section>
        <img src="img/work3.png" width="400" height="260" alt="勇者ゲーム">
        <h1>神経衰弱</h1>
        <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
      </section>

    </section>

    <footer>
      <ul>
        <li>
          <a href="mailto:example@gmail.com" target="_blank">
            <img src="img/mail.png" width="20" height="20" alt="メール送信">
          </a>
        </li>
        <li>
          <a href="http://dotinstall.com">
            <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
          </a>
        </li>
        <li>
          <a href="http://dotinstall.com" target="_blank">
            <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
          </a>
        </li>
        <p>(c) Tarou Yamada</p>
      </ul>
    </footer>
  </body>
</html>

感想

マークアップ言語であるTEXを使ったことがあるので、やっていることはなんとなく分かります。アルゴリズムを記述することはありませんが、自分の思うようにサイトを作るとなると経験や知識が必要だと思いました。