IT 1NOTE パソコンスクール

岡山市北区・静かな住宅街のパソコン教室。仕事、日常生活でパソコン活用術。 スマホやタブレット~資格取得まで。IT1NOTE(アイティーワンノート) パソコンスクールつしま校

TEL.086-252-7585

〒700-0088 岡山市北区津島笹が瀬10-16

写真挿入タグ

HP作成No9 Webページに写真

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

8. HP作成No8 Webページ写真の準備

 

今回の目的はWebページへ写真を挿入します。

まず、HP作成ファイルと写真のある場所の確認です。

①デスクトップにある2016tabiを開く
※ここまでの作業は上記No1~8で確認ください

②imgフォルダーを開く

20161115hp%e6%8c%bf%e5%85%a5%e5%86%99%e7%9c%9f%e7%a2%ba%e8%aa%8d

③2016kokubunji.JPGがある事を確認。
この写真をWebページに入れます。

一つ戻って
2016フォルダー内のindex.htmlをメモ帳で開く(下記図参照)

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b92

 

今回は<h2>晴れの国おかやま発~の旅記録</h2>の下に

写真を挿入してみます。まず、以下の画像の配置タグを入力。

<h2>晴れの国おかやま発~の旅記録</h2>
<img src />

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a51

次に<img src />タグの中に
画像がどこにあるのか?を示す 画像パス を入力します。

<img src=”img/2016kokubunji.jpg” />

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a52

更に下記のように入力しましょう。

<img src=”img/2016kokubunji.jpg” alt=”備中国分寺五重塔” />

alt=”〇〇〇”はalt属性といい、代替テキストの情報です。

※代替テキストとは?  画像のかわりに文字で表示
 ネット速度が遅い時代は、画像が出て来るのに時間がかかったのだ

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a53

ファイル → 上書き保存

以下の図のように index.htmlファイルを
InternetExplorerで開いて確認しましょう。

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

下記のように写真入りの
Webページになっていれば成功です。

 

20161115%e7%94%bb%e5%83%8f%e5%85%a5%e3%82%8ahp%e5%ae%8c%e6%88%90

 

また一歩前進です。

スキマ時間で覚えていきましょう♪

 

HP作成No9
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ