ゼロから始めるエンジニアへの道 #9 ~html~

学習範囲

・外部リンクの挿入（別タブ遷移）　
・tagの親子関係について

説明　

<a>内に,Maillinkの挿入

1.<a>tagを使い、外部リンクの挿入を行う　
2.href属性を活用し、リンクを貼る。　 　
・.目的はiconにリンクを作成すること 　
・リンクはアンカーという意味で、<a>tagを使用する
・リンクから遷移する際に「別タブを開いて～」という命令は、target=""

2つ目のリンクに関して　

・なんとなく別ページへの遷移程度だったら,iconの使い方をmailとかにするかなぁ。。。
・と思ったので下記のメソッドを使って「エンドポイントのシステムOS側で、既存のメールシステムから送信する」リンクを作成　

code-kitchen.dev

比較するとこんな感じ

~
  <li>
            <a href="https://takeyoshiblog.hateblo.jp/" target="_blanck">
              <img src="https://lh3.google.com/u/0/d/1uaEVewlfzbhbmqs8y6qCbUWsoZQ08gTC=w702-h606-iv1" width="20 " height="20" alt="tork icon" 
            </a>
          </li>
          <li>
            <a href="mailto:tk-nomailaddress@gmail.com""tk-nomailaddress@gmail.com">
              <img src="https://lh3.google.com/u/0/d/1hVaFKzM-Rw0PBzOCRiRiCapWAk7WkKt3=w323-h606-iv1" width="20" height="20"  alt="photo.png を表示しています" aria-hidden="true">
            </a>
            <!--
            ・アンカータグの中に存在しないメールを<mailto:>で挿入
            -->
          </li>
~

ページで見て(黄)のインラインのところ

タグの親子関係と正規表現の利用

1.HTMLの活用できる正式なtagは定まっていて、MDNというサイトでサジェストすればよい　
2.正規的な活用方法が乗っているため、開発現場などでは適切な表現がよい（らしい）
・タグには親子関係が存在し、僕が書いたchordの中で<a>の親として<li></li>tagで実装しています。　

tagの親子関係

　

ここまでの振り返り　

ドットインストールは、こんな感じで各章ごとゴールを設けており、非常に学習しやすい環境でした！　 HTML＞CSS×PHP＞Rubyを行っていく際に、HTMLでサイトの骨子（というか内容）を作成してみようというのがテーマになっているので、複雑な内容はなく簡単に学習することができます( ｀ー´)ノ

単純に、HTML自体は覚えやすいです。簡単にブラウザで結果を比較して、「作れているか」、「作れていないのか」、「間違っていればどう表示されるのか？」のみっつが、顕著に表れる題材にしているので、コードを書いたことのない人にはお勧めの導入編でした!(^^)!

次回はCSSに入ってきますので、動的コンテンツを作るまで（デザインはfree素材を使いますが）　あと少しです！(´ω｀*)