ゼロから始めるエンジニアへの道 #6 ~html編⑥~ - 初心者がエンジニアに転職するための、壁打ちブログ('ω')

やったこと

1.文章全体のtag付け
2.VSショートカット操作
3.基礎tagの種類のサジェストと、lang / doctyoe / の意味の違いなどなど

簡単な復習　

~

<!DOCTYPE html>

  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <!--
         meta文字コードの設定は、最近はutf-8に統一されているケースが多いので、utf-8を指定すする
       -->
      <title>TKのportfolioサイト</title>
      <!--
        タイトルtag（<tile>）の中身は、ブラウザタブに表記される
      -->
      <link rel="icon" href="favicon.ico">
      <!--
        「favicon」とは、タブの小さなicon画像の事を指している。
        　同じ階層に存在するので、データファイル名の指定だけしています　階層が変わった場合の指方法がわからない:(サジェストする)
        　.ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト
      -->
      <meta name="discription" content="TKのportfolioサイトです">
      <!--
        これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載　されるようです。
        恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。
      -->
      <body>
        <header>
          <img src="https://cdn.image.st-hatena.com/image/square/da161997713f23479ca06fcaff8c7893ce57a75d/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F155897278%2F1583412966696427
          " width="120" height="120" alt="太郎にアイコンです">
            <h1>TK</h1>
            <p>システムエンジニアを目指しています</p>  
        </header>
        <!--
          　head と、hederの違いについて
          　　headタグは、この文書全体に対して情報を入れるもの
          　　 headerタグは、bodyの中に使うヘッダー要素を入れるためのタグ
          　　　では、(h)のtagは？　hedingtag(ヘディングタグ）と読み、見出しをるける際に使うタグ
        -->
          <h2>Works</h2>
           <img src="https://lh3.google.com/u/0/d/1Z2wuIjH4R-QPmY70nxIuhYByLDITg3S7=w514-h596-iv1" class="a-b-ta-Ua"  width="600" height="400" alt="TKのWorkSpeaseです">
          <!--ここで指定していIMGtagと、src=img/work2は意味合いが違います。
            　srcはソースの略称
            　　要するに「img」の元ソースはどこ？ってこと
            　ソースを指定する際に用いている、/ は、一つ下の階層を指定。
           　記載していなかった備忘(alt属性は「代替えテキストとして活用」)
          -->

         <h3>私の大好きな「ゲーム」につて紹介です</h3>
          <p>
            基本的には、コンシューマー向けのゲームになるのですが...
            複数のシリーズが展開されていて、作品によってはアプリ<br>
            またPSのポータブルも販売していますので、
            是非、ゲームをプレイしてください(´ω｀*)
          </p>
         
         <h3>閃の軌跡</h3>
          <<img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;" src="https://pbs.twimg.com/media/DmJX1E-UwAAb-Nw?format=jpg&amp;name=large" width="600" height="400" alt="英雄伝説の画像">
          <P>
          このゲームは上記に記載したコンシューマゲームに該当します。

          RPG（ロールプレイングゲーム）となっており、<br>基本的にはストーリーラインが緻密に構成され、バトルアクションも楽しめるといった作りになっています。
          <br>作品自体の魅力としては、【王道のようで、王道ではない】という点です。

          </P>
          <!--
            　VSコードにて、chordのコピー作業を行える。shift * alt * ctrl 上下で操作が行える。
            　ただ、Setingの問題なのか同乗の操作が行えないので既存のショートカットキーを活用して、ctrl * C or V　で、ひとつづつコピペｗ
          -->
          <p>
            (C)dotinstall.com
          </p>
      </body>
    </head>
   </html>
~

音で覚えると間違やすいタグ三つ　

※コードの中にも備忘しているけど、画像添付したかったからこっちで

( h )= heading tag

f:id:Takeda2864:20200509144832p:plain — <h>tag = (hedingtag) =へディングタグ

hedingtag(ヘディングタグ）と読み、見出しをるける際に使うタグ

(head)tag

f:id:Takeda2864:20200509145718p:plain — <head>tag =ヘッドタグについて

headerタグは、bodyの中に使うヘッダー要素を入れるためのタグ

()タグは、文章全体に情報を入れるために使うタグ

(header)tag

f:id:Takeda2864:20200509150116p:plain — <header>tag =ヘッダタグについて

(header)タグは,bodyの中に使うヘッダー要素を入れるためのタグ

vscordの操作について(alt+↕)

VS操作を行う際の（alt+↕)について、タグの宣言に必要な→<><>は、並列ではなくrow
つまり行で、切り分けられていないと入れれれない(;´･ω･)

~  
     <footer>
            <p>
              (C)dotinstall.com
            </p>
          </footer>
        </body>
    </head>
   </html>
~