メモ

メモを入力してみよう!


Lesson 03「画像を表示させてみよう!」

練習を見る

学習概要

imgタグを使ってホームページに画像を表示させてみましょう!

補足

■パスとURLとURI
ファイルの場所を示すものを「パス」と言ったり「URL(ゆーあーるえる)」「URI(ゆーあーるあい)」と言ったりもします。厳密には違うものですが、同じものだと思っていて大丈夫です。
■タグと属性
色々なタグには「属性」といった「オプション」のようなものをつけることができます。属性は「属性名="属性値"」という形の書き方をします。
属性をつける場合は、今回のようにタグ名の後に必ず半角スペース(空白)をいれるようにします。
属性を複数つけたい場合も、同じく属性ごとの間には半角スペースを入れます。

どのプログラミング言語もそうですが、半角スペースで区切ることで「その1つ1つが別の命令なんだ」ということがPCの方で理解できるようになります。

タグによってつけられる属性は違うので、使いたいタグはどんな属性がつけられるのか調べてみましょう。

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 03「画像を表示させてみよう!」 の内容※SEO用のため読めません

表示させていきましょう。

【入門】HTML言語・CSS言語初心者前回作ったファイルをそのまま使っていきたいと思いますまずは新しくフォルダを作成しましょう。フォルダ名は何でも結構です。新しく作ったフォルダの中に前回作成したファイルをコピーします。【入門】HTML言語・CSS言語初心者コピーしたファイルを開くと前回と同じホームページが表示されるはずです次に表示させる画像を用意しましょう。

今回はインターネット上から適当な画像をダウンロードしてきます画像を新しく作成したフォルダの中へ移動します今回は画像の名前を SAMPLE . jpg とします画像が準備できたらホームページのファイルを開きましょう。編集画面が表示されたら画像を表示させるプログラムを変えていきます。

【入門】HTML言語・CSS言語初心者画像を表示させるにはイメージタグというものを使いますイメージタグを使い画像のパスを指定しますパスとは場所のことですパスを指定するには SRC =ダブルクォーテーション二つで指定しますダブルクォーテーション二つの中に画像のパスを入れていきます。

今回は SAMPLE . jpg としますまたアルト=ダブルクォーテーション二つで画像の名前を入れることもできます今回は雨の写真としたいと思いますこれで画像を表示させる【入門】HTML言語・CSS言語初心者プログラミングは完了です書き終わったら保存をしましょう保存が終わったら再度ファイルを開いていますこれでホームページに画像が表示されました説明をしていきたいと思います。

がそうなんですけどもというのは今編集しているファイルはどこにあるのか移動してみたいと思いますまた新しいフォルダをちょっと作ってもらってですね画像その中に入れてきてくださいその状態で指定メールファイルを開いてみると画像の場所が分かりませんよっていうことで画像が表示されなくなります先ほど指定していたパスはですね SAMPLE . jpg なのでお前してみると同じフォルダにある SAMPLE . jpg という画像を表示してくださいという意味になりますのでこの場合のパスの指定方法はイメージフォルダの中にある SAMPLE . jpg を表示したいのでイメージスラッシュ SAMPLE . jpg という形にしますスラッシュはそのフォルダの中のという意味になりますそうするとまた画像が表示されます【入門】HTML言語・CSS言語初心者。