More than 5 years have passed since last update.

ドットインストール html講座 2日目

HTML

Posted at 2019-02-07

#2日目感想
今日は「はじめてのHTML 全15回」を修了出来ました．動画を何度も止めて確認しながらなので収録時間の倍は掛けながらやりました．
まだまだ，物作りが出来るレベルではないので明日も明後日も少しずつ積み重ねていきます．
明後日と明々後日は少し忙しいので時間が確保できるかわかりません．
ついにCSSまでたどり着けたので，Webサイトの作成も見えてきました．頑張ります．

#進捗状況
今日は，「はじめてのHTML 全15回」の「#10コメントを付けてみよう」～「#15HTMLの使用を確認してみよう」
までを修了しました．

コメントタグの付け方はctrl+/ → ソースから見えるので機密情報は書かないこと
headタグは文章全体に対する情報を入れるタグ→ ページ全体に影響すること？
headerタグは文書内に対する情報を入れるタグ→ 内容の一番上に来てる情報に影響すること？
footer→ 一番下の情報を入れるところ
h１タグなどは区切りsection内での相対的なもの↓ 階層が別れればh1タグで続けても良い

index.html

<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>

リスト表示
ol:(o)rdered (l)ist →連番付きリスト
ul:(u)nordered (l)ist→箇条書きリスト
li:(l)ist (i)tem→ ol,ulの下に入るタグ？
リンク
メーラーが開いて自動的にmailto:dotinstall@XX.comが宛先に追加される．target="_blank"で別タブで開く．

index.html

<a href="mailto:dotinstall@XX.com" target="_blank">

別のページに飛べるようにする
MyPortfolioファイルの中にabout.htmlファイルを新規作成する．
Atomのタブにもabou.htmlが表示される．
HTMLの書き方で迷ったとき
https://developer.mozilla.org/ja/docs/Web/HTML に行くとHTMLの仕様書が見れる．

#今日のコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>太郎のポートフォリオサイト</title>
  <link rel="icon" href="favicon.ico">
  <meta name="description" content="太郎のポートフォリオサイトです．">
</head>
<body>
  <!-- header -->
  <header>
    <!--
      ol:(o)rdered (l)ist
      ul:(u)nordered (l)ist
      li (l)ist (i)tem
    -->
      <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:blockchain.niigata@gmail.com" target="_blank">
          <img src="img/mail.png" width="20" height="20" alt="メール送信">
        </a></li>
      <li>
        <a href="https://dotinstall.com" target="_blank">
          <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
        </a></li>
      <li>
        <a href="https://dotinstall.com">
          <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
        </a></li>
    </ul>
    <p>(c) Taro Yamada</p>
  </footer>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up