第5回『リンクタグと画像タグをしっかり理解』

ホームページとブログの教室、第5回は前回の続き、フォルダとブラウザの基本操作おさらいと、『リンク』『画像』タグです。

配布資料

印刷用ダウンロード→ hpblog-20170530(前回と同じです)

フォルダの操作

講座で使っているファイルを、一つのフォルダにまとめましょう。


デスクトップがこんなふうになっていませんか?

『hp』フォルダの中に必要なファイルをまとめておきましょう。

『.html』ファイルをクロームで開く

前回の講座の復習です。

『既定のブラウザ』がGoogle Chromeになっていない方は、右クリックでブラウザを選んで開きましょう。

『.html』ファイルをメモ帳で開く

『.html』ファイルは、ダブルクリックすると、ブラウザが開きます。
編集(書き換え)するためにはメモ帳などのエディタソフト(アプリ)で開くことが必要です。

  • 右クリックして『プログラムから開く』→『メモ帳』を選ぶ
  • メモ帳を開いておいて、ファイルのアイコンをドラッグ&ドロップ
  • メモ帳を開いておいて、上のメニュー『ファイル』→『開く』から選ぶ

で開いてください。

書き換えをした後は『上書き保存』をお忘れなく!

持ち運ぶ際、ノートパソコンはシャットダウンしないのがおすすめ

講座が終わって帰る際、ノートパソコンを『シャットダウン』したら、『Windowsの更新』が始まってしまってなかなか帰れない!
そんなことはありませんか?

移動など、一時的なパソコンの電源停止は『休止』または『スリープ』をおすすめします。

『休止』と『スリープ』の違い

休止:
開いているすべてのデータをストレージ(HDDやSSD)に保存して電源を切ること
特徴は、電気の消費が少なく、再度開いたときに少し時間がかかります(シャットダウンより早いです)
次に電源を入れるまで1日以上時間がかかる場合におすすめです。
※通常の設定ですと、休止メニューがない場合もあります

スリープ:
開いているすべてのデータをメモリに保存して電源を切ること
特徴は、再度ひらいたときにすぐ立ち上がりますが、電力を少しずつ消費します。
家に帰ったらまた使うなど、数時間以内にすぐに電源を入れる際におすすめです。
※そのままにして数日たつとバッテリーがなくなってしまい正常に停止されないことがありますので注意。

リンク<a>タグの作り方

href=”○○○”
○○○ の部分に、リンク先(クリックして開きたいページ)のアドレスを入れます。
同じフォルダの中なら、ファイル名のみ、外の別のホームページなら、アドレスをコピペして入れます。
※『””』 ダブルクォーテーションや空白などを消さないように注意!

target=”_blank”
これを記入することで、別タブで開くことができます。
別タブで開く必要がない場合は無くても構いません。

画像の貼り方

src=”○○○”
○○○の部分に、ファイルの場所と名前を記入します。
同じフォルダの中にある場合、ファイル名のみ(例:rose.jpg)で良いですが、『img』等のフォルダの中にある場合は、『./img/rose.jpg』等とフォルダ名とスラッシュで記入します。(最初のピリオドはファイルのある自身のフォルダを表しています)

alt=”○○○”
この部分は無くても画像は表示されますが、検索エンジンや読み上げソフトのために、何の画像なのかを記入しておくとよいでしょう。日本語適切なタイトルをつけても良いですし、面倒な場合はファイル名でも構いません。

width=”” height=””
width(ワイズ)が幅、height(ハイト)が高さです。
画像のサイズをピクセル単位(画像の粒子一粒が1ピクセル)で記入します。
記入しないと、画像の大きさそのまま貼り付けられます。
どちらか一方の場合は、自動的に画像の比率で表示されます。

画像が表示されない場合

  • 文字が半角英数になっていますか?
  • 空白がなくなっていませんか?
  • ファイルの名前と場所は正しいですか?
  • ピリオド、ダブルクォーテーションが間違っていませんか?
  • 『l(小文字のLエル)』と『1(数字の一イチ)』の違いなどありませんか?

このようなページをつくりました。

タグの打ち方のコツ

以下のような手順でタグを打ってみると、抜け落ちが防げます。

<></>

<a></a>

<a href=””></a>

<a href=”index.html”>テキスト</a>

<a href=”index.html” target=””>テキスト</a>

<a href=”index.html” target=”_blank”>テキスト</a>

画像チャレンジ

画像のサイズを変えていろいろ試してみましょう。

まとめ

  • htmlファイルをChromeで開くことができるかどうか
  • htmlファイルをメモ帳で編集できるかどうか
  • リンクタグをきちんと打てるかどうか
  • 画像タグの意味がわかり、きちんと打てるかどうか
タイトルとURLをコピーしました