03 はじめてのホームページ HTMLとCSS

Webサイト制作,ホームページ基礎講座,動画

前回は、HTMLにCSSを追加するところまで行いました。(02はじめてのホームページ)

今回は、画像を設置してみます。

今回使うHTMLコードの確認

前回同様、03のフォルダを作成して、そのフォルダにindex.htmlを作成しておきましょう。フォルダの作成、ファイルの作成は02はじめてのホームページを参照ください。

それでは、下記のコードをコピー、もしくは模写してHTMLファイルを作成しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>エコロジー&環境問題 </title>
</head>
<body>
	<h1>ECOLOGY 【エコロジーへの取り組み】</h1>
	<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
	<p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
	<p><small>Copyright (C) Computer Technology Groups. All rights reserved</small></p>
</body>
</html>

index.htmlファイル(基本のマークアップファイル)が作成できたら、そのHTML内に画像が表示するように追加していきます。画像はimg要素を使います。

ホームページはネットの回線を使うことから、index.htmlの中に画像を埋め込む方法ではなく、画像は別ファイルでフォルダに設置し、リンク呼び出しをします。そのためimg要素には、src属性というファイルを読み込む属性を入力し、イコールの右側にファイルを指定します。そのファイルは、「green.jpg」のように拡張子をつけて記述します。

<p><img src="ファイル名"></p>

画像はインライン要素ですので、今回の動画はp要素の中に書いています。

HTMLファイルから見て下の階層のフォルダに画像が置いてある場合は、<img src="フォルダ名/ファイル名"> となります。

下記のコードを追加します。

    <p>
        <img src="img.jpeg" alt="エコロジー 森林">
    </p>

画像は下記の画像の上で右クリック>名前をつけてファイルを保存しましょう。ファイル名は「img.jpg」とします。ファイルは、ホームページ練習の03のフォルダに設置しておきます。

img.jpegというファイル名で保存しましょう

アクセシビリティでは推奨となっているalt 属性

また 動画では、アクセシビリティでは推奨となっているalt 属性は、画像の説明文の入力する部分です。

画像の説明文を代替テキストと呼びます。

<p><img  src="ファイル名" alt="画像の説明文"></p>

alt属性に、極力画像に、代替テキストを入力するように心がけましょう。

alt属性の効果・メリット

alt属性に画像の代替テキストを入力することで、検索エンジンに画像の説明文を伝えることができます。

またユーザーに優しいホームページの観点から、alt属性に入力される代替テキストは、画像の読み上げソフト「スクリーンリーダー」に利用されたり、ネットワーク回線が低速な場合、表示される文字列として補助機能となります。そのため推奨属性になっています。

続きは、動画を確認しながら進めてみましょう。

03HTMLとCSS 画像を設定するマークアップ動画