同棲カップルの日常

現役システムエンジニアと現役調理師によるおすすめ商品紹介

ひっそりと注目されているHTML入門⑥~aタグの即テク~

おはこんにちばんは

どうも、旦那のまことです

 

このブログは1人でも多くの人に

プログラミングの楽しさを

知ってもらうために書いています

 

ITの学校なんて行ってない

ITの知識なんて何にも知らない

って人でも全然大丈夫です!!!

 

僕もITの学校なんて行ってないですし

知識0からでも

システムエンジニアとして

働けています!

 

ちなみに僕は県内で偏差値が

1番低い高校出身で、前は肉体労働の

仕事をしていました!

 

IT、プログラミングに少しでも

興味のある方、僕と一緒に

少しずつ勉強していきましょう!

 

一気に沢山の事を教えてしまうと

頭の中でごちゃごちゃになったり

覚えきれないので、基本的には

1つのブログで1つの事を

教えていきたいと思います

 

テキストを表示する電源を入れたコンピューターモニター

 

第1回目のブログで書いた

HTMLの基本的な構文を

見てない方は見てください

 

下のリンクを押せば

第1回目のブログが見れます

【実践】HTMLを使ってみよう①

 

htmlファイルの作り方が

わからない方は

下記のブログを見てください

【実践】HTMLを使ってみよう②~pタグの使い方~

 

ではタイトルに書いてある通り

今回は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>

---------------------------------------

 

表示結果はこの様になります

f:id:makoxti:20210302221853p:plain

 

そして更に△△のリンクを

押してみると

f:id:makoxti:20210302221941p:plain

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>

---------------------------------------

 

ではこちらをブラウザで表示

させてみましょう

f:id:makoxti:20210302222446p:plain

ちゃんと「><」の間に書いた文字が

ブラウザで表示されました!

 

ここでもう1つテクニック

お伝えいたしましょう!

 

もちろん今のままでもURLで

指定したページに遷移

できるのですが、

遷移先のページは別のタブ

開きたい場合もありますよね?

タブとはこれのことを言います

f:id:makoxti:20210302222812p:plain

 

上記のプログラムでも、指定した

URLのサイトへ遷移できるのですが

タブは同一のままです

何を言っているかといいますと、

最初は「HTML勉強」というタブで

ブラウザが表示されていますが、

リンクを押下すると

HTML勉強のタブが

指定したURLのサイトに

切り替わります

 

では遷移先のページを新しい

タブで開くにはどうするのか、

それは「target="_blank"

を使います

 

使い方は簡単です

aタグの部分を

<a href="https://www.google.co.jp/" target="_blank">Googleへ</a>

このように書き換えてあげます

それだけで、遷移先のページが

別のタブで開かれるようになります

 

実際にブラウザで表示させて

リンクを押下してみたら

ちゃんと別のタブで

遷移先のページが表示されました

f:id:makoxti:20210302223516p:plain

 

念のために

プログラムを貼っておきますね

---------------------------------------

<!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さん家の日常ブログと

表示されていますが、表示される

ブログの内容はそれぞれ違います

 

ここまでお読みいただき

ありがとうございました!

 

それでは次のブログでお会いしましょう!