ホームページとブログの教室、第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ファイルをメモ帳で編集できるかどうか
- リンクタグをきちんと打てるかどうか
- 画像タグの意味がわかり、きちんと打てるかどうか