おはこんにちばんは
どうも、旦那のまことです
このブログは1人でも多くの人に
プログラミングの楽しさを
知ってもらうために書いています
ITの学校なんて行ってない
ITの知識なんて何にも知らない
って人でも全然大丈夫です！！！
僕もITの学校なんて行ってないですし
知識0からでも
システムエンジニアとして
働けています！
ちなみに僕は県内で偏差値が
1番低い高校出身で、前は肉体労働の
仕事をしていました！
IT、プログラミングに少しでも
興味のある方、僕と一緒に
少しずつ勉強していきましょう！
一気に沢山の事を教えてしまうと
頭の中でごちゃごちゃになったり
覚えきれないので、基本的には
1つのブログで1つの事を
教えていきたいと思います
第1回目のブログで書いた
HTMLの基本的な構文を
見てない方は見てください
下のリンクを押せば
第1回目のブログが見れます
htmlファイルの作り方が
わからない方は
下記のブログを見てください
ではタイトルに書いてある通り
今回はaタグについて
学んでいきたいと思います
aタグはどのような時に使うタグ
なのかと言いますと
リンクを貼る時に
使うタグです
リンクとはなんぞやという方向けに
簡単に紹介しますと
他のページに遷移
させるものです
例えば、このような
ものがリンクになります
【大公開】元肉体労働者の僕がシステムエンジニアになるための勉強方法を特別に大公開します
このリンクを押すと、僕が自分で
レンタルしているサーバーに
アップロードしてある本ブログの
記事に遷移します
では早速aタグの使い方について
学んでいきましょう
aタグの構文は下記となります
<a href="https://○○">△△</a>
href=""の「""」の中にはリンクを
押したときに遷移させる先のサイトの
URLを指定します
ちなみに、「"」のことを
ダブルクォーテーション
と言います
ではgoogleにアクセスするURLを
実際に指定してみましょう
---------------------------------------
<a href="https://www.google.co.jp/">△△</a>>
---------------------------------------
これをブラウザで表示させてみます
プログラムは下記となります
---------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<a href="https://www.google.co.jp/">△△</a>
</body>
</html>
---------------------------------------
表示結果はこの様になります
そして更に△△のリンクを
押してみると
Googleのトップページへ
遷移しました
またまた少し話がそれますが、
ボタンを押すことをIT業界では
押下(おうか)と言います
では話を戻しまして、
みなさんお気づきでしょうか？
プログラムで「△△」と書いてある
場所がありましたよね？
そうです、「><」の間に
書いた文字が
ブラウザで表示されます！！
△では見栄えも悪いですし
どこに遷移するかも分からないので
どこに遷移するか書いてあげましょう
---------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<a href="https://www.google.co.jp/">Googleへ</a>
</body>
</html>
---------------------------------------
ではこちらをブラウザで表示
させてみましょう
ちゃんと「><」の間に書いた文字が
ブラウザで表示されました！
ここでもう1つテクニックを
お伝えいたしましょう！
もちろん今のままでもURLで
指定したページに遷移
できるのですが、
遷移先のページは別のタブで
開きたい場合もありますよね？
タブとはこれのことを言います
上記のプログラムでも、指定した
URLのサイトへ遷移できるのですが
タブは同一のままです
何を言っているかといいますと、
最初は「HTML勉強」というタブで
ブラウザが表示されていますが、
リンクを押下すると
HTML勉強のタブが
指定したURLのサイトに
切り替わります
では遷移先のページを新しい
タブで開くにはどうするのか、
それは「target="_blank"」
を使います
使い方は簡単です
aタグの部分を
<a href="https://www.google.co.jp/" target="_blank">Googleへ</a>
このように書き換えてあげます
それだけで、遷移先のページが
別のタブで開かれるようになります
実際にブラウザで表示させて
リンクを押下してみたら
ちゃんと別のタブで
遷移先のページが表示されました
念のために
プログラムを貼っておきますね
---------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML勉強</title>
</head>
<body>
<a href="https://www.google.co.jp/" target="_blank">Googleへ</a>
</body>
</html>
---------------------------------------
いかがだったでしょうか？
少しでも「面白い」と思って
貰えたら嬉しいです
こちらのブログでは僕が
プログラミングを勉強する方法
について特別大公開しているので
よければ見てください
【大公開】元肉体労働者の僕がシステムエンジニアになるための勉強方法を特別に大公開します
子供をお持ちの親御さんであれば
是非こちらのブログも
読んでみてください
どちらもFさん家の日常ブログと
表示されていますが、表示される
ブログの内容はそれぞれ違います
ここまでお読みいただき
ありがとうございました！
それでは次のブログでお会いしましょう！