東京・オンラインでも開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.6 画像を挿入する

画像を挿入する

演習1.6 画像を挿入する

☑画像を表示する  <img src= “画像ファイル名”>

Webページに写真やイラストなどの画像を加えると訴求力が生まれ、全体が生き生きとしてきます。

ここでは、インパクトのある可愛らしい子猫の写真を中央に配置してみます。

1. 写真を挿入する

画像を挿入するには、<img src=”画像ファイル名”>を記述します。

以下のように、記述を追加してください。

①ソース・フォルダー :html/ch06
②ファイル名     :index.html

➢ index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子猫と子犬の部屋</title>
<body bgcolor="#FFFFCC">
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1>
<h3><font color="red">かわいい動物たちの写真館</font></h3>
<img src="img/img01.jpg"><br><br>
<font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ!</strong></font><br>
<strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。<br><br>
今後も色々と紹介していきますので、楽しんでください。<br>
<hr width="540">
</body>
</html>
        

2. 属性を指定する

続いて、画像の挿入に関して細かな設定をする属性を指定します。

先ほど追加した記述に、以下のように、属性を追加してください。

	~前略~
<img src="img/img01.jpg" border="0" alt="メイン写真"><br><br>
	~後略~
        

ここでは、画像に属性を追加することで、以下の指定を加えました。

① border=”0″

画像の枠線をピクセル数で指定します。

② alt=”メイン写真”

  代替テキストと呼ばれ、画像を表示できない環境の場合、ここで指定した説明が表示されます。

3. HTMLファイルを保存

記述が終わったら、上書き保存をしてください。

4. ブラウザで表示

では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。

図 1.6.1

ページの中央に画像が表示されました。画像がないときに比べて、ページ全体がいきいきとしてきました。

NEXT>> 演習1.7 画面表示をセンター揃えにする

HTMLとCSSの入門 目次

セミナー一覧

神田ITスクールの就職・転職

HTMLとCSSの入門 目次

HTMLとCSS入門書

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

ホームページ制作・保守

ホームページ制作・保守

他のHTML及びCSSの講座・スクールの紹介

セミナー講師

セミナー講師

主席インストラクター&管理人

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.