HTML

HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本

Sponsored Link

Sponsored Link

HTMLとは最初に書いたようにHyperText +Markup Languageの略で2つの意味が組み合わさった言葉です。

前記事ではそのうち主にMarkup Languageに関係したタグを簡単に紹介しました。

HTMLの勉強で押さえておくべきこと①Markup Languageとして使われるタグ

今記事ではでHyperText に関するタグを説明したいと思います。

HTMLリンクダグ

HTMLをでは様々なリンクを貼ることができます。

別ページへ飛ばすリンクはもちろんのこと画像・動画・音声などのデータファイルを呼び出すリンクなどで。
それらをテキストの中に埋め込むことができます。
それによって記事中に画像・動画・音声を載せることができ。
ビジュアルな構成を実現することができます。

ただそれらには別々のタグが割り当てられています。

href

例えばトップページに飛ぶようにリンクを貼りたいと思えば。

<a href=”リンクしたいページのURL”>~</a>という形で埋め込みます。

「href」は「aタグ」とセットで使われますから。
「a href」(
アンカーエイチレフ)の形で使われます。

意味ですが。

aタグは以下はリンクだよ、という目印になるもので。
aタグの次にはどんな種類のリンクかな?ということを表す属性タグが続きます。

hrefは別ページに飛ばすリンクを指定するタグです。
hrefはhypertext referenceの略で「ハイパーテキストの参照」という意味です。

書き方ですが。

<a href=””>~</a>ではさみます。リンク先のURLは開始タグの中にhref=”リンク先のURL”という形で書きます。

つまりhrefはべつのURLのページに飛ばすハイパーリンクですよ、ということをコンピューターにわからせる。
ハイパーテキスト上で参照機能として用いられる属性だということを示しています。
新しいタブでトップページが開かれるようにリンクを作ろうと思ったら。
エディタに以下のように書いて埋め込みます。
<a href=”https://maliajoy.com/” target=”_blank” rel=”noopener”>サイトのトップページ</a>

” target=”_blank”

target 属性とはリンク先の文書を開くフレームやウインドウを指定するための属性です。
_blankは新しいページにリンクページを開く場合に入れますが、非常に脆弱だと言われていて。
ここからフィッシング詐欺などの攻撃を受ける場合もあり得るとのことです。
詳しいフィッシング詐欺の例はこのサイトなんかに詳しいです。

そのためtarget=”_blank”にはrel=”noopener”をつけ加えてその脆弱性をカバーします。

relは「relation(関係)」の略です。
つまり「linkタグが書かれているページ(現ページ)とhrefで指定しているページ(リンク先ページ)との間で、
どのような関係があるのかを示します。

その関係がnoopener(関係ありません)であるというわけですね。

「サイトのトップページ」と書かれた部分はウェブ上に表記される文字です。
以下のように文字にリンクが貼られますので文字部分をクリックするとしてのページに飛びます。

サイトのトップページ

文字でなくて画像にリンクを貼ることもできます。その前に画像を呼び出す画像のハイパーリンクの属性を見ていきます。

img

例えば以下のように記述をすると
<img class=”aligncenter” src=”https://maliajoy.com/wp-content/uploads/2019/04/ce1a44f4d7a21b893589bff220c7939c.gif” alt=”” width=”300″ height=”300″ />
以下のように画像が記事内に表示されます。

imgタグは画像を呼び出すためのHTMLタグの一つですが。
画像を表示させるためにはパスと呼ばれる画像の「住所」を指定する必要がありますので。
位置を表す「src属性」(srcは、sourceの略でエスアールシー属性と呼ばれます。)が必要です。

img src=”画像が格納されている場所(path)”

今はワードプレスを使っていますから そこを見てみると
https://maliajoy.comというサイトの中にあるwp-contentの中に入っている2019/04/にuploadsされたce1a44f4d7a21b893589bff220c7939c.gif

ですよ、と格納場所が示されています。

/は「~の中に」という意味です。

「alt属性」(altは、alternativeの略で、オルト属性と呼ばれます)はalt=”ここに画像の説明がなされます”
と文字を入れることで代替テキストとなり。
画像が何らかの事情で表示されなかった際に代わりに表示されます。

(正常に画像が表示される場合にはテキストは表示されません)

見えないのになぜ表記するかというと、様々な理由で画像を表示せずに記事をみる方もいるため、
alt属性を入れた方がそういう方がには親切だからです。
そしてSEO的にも有利です。
というのも検索エンジンは、画像の情報を読み取ることはできませんがそのかわりalt属性を読み取り、文章で使われたキーワードは、検索対象となります。

もしカーソルを当てて文字が表示されるようにしたい場合には、
<img alt=”link” title=””/>

とタイトルタグを加えて、そこに例えば「まりちゃんGIF」と入れます。

<img class=”aligncenter” src=”https://maliajoy.com/wp-content/uploads/2019/04/ce1a44f4d7a21b893589bff220c7939c.gif” alt=”まりちゃんGIF” title=”まりちゃんGIF”/>width=”300″ height=”300″ />
と記述するとたしかにカーソルを当てると「まりちゃんGIF」というテキストが表示されます。

まりちゃんGIFwidth=”300″ height=”300″

は幅と高さを決めています。
imgではそれ以外にpadding:要素の内側の余白とmargin:要素の外側の余白という余白についての設定もできます。

ちなみにimgは終了タグがありませんので。</img>はつけません。

なおclass=”aligncenter”は画像をセンターに持っていくためにつけたものですがCSSなので今回はパス。

video

ハイパーテキストには動画へのリンクもあります。

ifarmeタグvideoタグがありまして。YouTubeの動画はifarmeタグを使っていますが。
ifarmeタグは廃止の方向に行くということなので。
videoタグが使えるようになっていれば良いと思います。

以下のように記述してみました。
<video controls autoplay loop><source src=”動画/fireworks.mp4″ width=”300″ height=”150″></video>

controls autoplay loopはcontrols属性でインターフェースを表示します。
controlsはコントロールパネルを表示させます。
autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されますし
loop属性を指定すると繰り返し再生されます。

一番うしろにあるwidth=”300″ height=”150″は幅と高さを指定しています。

詳しくは以下の記事などを参照してください。

HTMLで動画や画像を埋め込みする方法を詳説

こんなふうにハイパーテキストは様々な種類があって
それらを使うことによってビジュアルで使いやすいページを作ることができます。

以上でハイパーリンクで使うタグの基本の解説は終わりです。

前記事とこの記事だけでHTMLについては最低限のことが身につくと思います。
この記事を土台にして次からCSSの学習に入りたいと思います。

 

Sponsored Link

Sponsored Link

関連記事

  1. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  2. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  3. HTMLで動画や画像を埋め込みする方法を詳説
  4. CSS WEBアイコンフォントの使い方 Font Awesome…
  5. CSS 幅と高さの指定方法 widthとheightプロパティ基…
  6. CSS marginとpadding 余白の指定方法 基礎
  7. CSS最低の書き方の基本 CSSはどこにあるの?
  8. CSS 擬似要素beforeとafter 使い方基本

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  2. WordPress新エディタ「Gutenberg」の使い方
  3. WordPressのフォルダ構成とバックアップの仕方
  4. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  5. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  6. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  7. WordPressエディタ「Gutenberg」の使い方 総まとめ
  8. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)

ソフト・アプリの使い方

PAGE TOP