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

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

配布資料

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

フォルダの操作

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

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

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

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

前回の講座の復習です。

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

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

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

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

で開いてください。

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

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

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

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

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

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

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

リンク＜a＞タグの作り方

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

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

画像の貼り方

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

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

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

画像が表示されない場合

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

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

タグの打ち方のコツ

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

画像チャレンジ

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

まとめ

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