読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

画像挿入とリンク

画像挿入・リンク、改行・強調

  • テキストP.036〜045

画像挿入 <img>

<img src="画像の置いてある場所" width="幅" height="高さ" alt="代替え文字">


img:image
src:source


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML:画像を表示</title>
</head>
<body>
<h1>画像を表示</h1>
<p>HTML内に画像を挿入する記述</p>
<p><img src="glass.jpg" width="400" height="250" alt="眼鏡"></p>
</body>
</html>

ハイパーリンク <a>

リンクには「テキストリンク」「画像リンク」「メールリンク」の3種類あります。

テキストリンク
<a href="移動先の住所(パス)">リンクテキスト</a>


a:anchor
href:hyper reference

画像リンク
<a href="移動先の住所(パス)"><img src="画像の置いてある場所" width="幅" height="高さ" alt="代替え文字"></a>
メールリンク
<a href="mailto:メールアドレス">お問い合わせ</a>

相対パス絶対パス

  • ホテルの法則


「ホテルの法則」は存在しません。(授業内で説明します。)
このクラスでの「相対パス」の理解のための法則です。

相対パス(relative path)

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。
起点となるフォルダを「.」で、上位フォルダを「..」であらわす。


ひとつ上の階層を表すには「../」を使います。

絶対パス(absolute path)

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、装置内の最上位階層から目的のファイルやフォルダまでのすべての道筋を記述する方式。
フォルダの中の階層を、「/」(スラッシュ)を使って区切ります。


Webの場合、外部サーバーへのアクセスに利用される場合がほとんどです。

  • 例外的に「SEO効果」を狙って、ホームへのリンクを「絶対パス」にする場合もあります(現在では効果はありませんが、授業で事例を解説します。)

Webページを表示する仕組み

Webページ
  • Webにおける文書の単位
  • 1ページあたりの分量はページごとに異なる
  • ひとつのWebページに URL(Uniform Resource Locator)が対応する
  • ブラウザのアドレスバーに URL を入れてアクセス
  • Webページの中には、テキスト(文字)・画像・音声・動画といったコンテンツが含まれる


HyperText Transfer Protocol(http)

  • WebブラウザとWebサーバの間でHTMLなどのコンテンツの送受信に用いられる通信プロトコル
Webとインターネット
  • Webは、インターネットのしくみを利用した一つのサービスとして存在する
  • Web(HTTP)
  • メール(SMTP/POP)

Webページの実体
  • ある規則に従って記述されたテキストファイル
  • メモ帳などテキストエディタで編集可能
  • 特定の編集ソフトを必要としない
  • その規則さえ分かればWebページを作成できる
視覚に訴える表現の特徴