紅葉の始まり

初心者のプログラミングの基礎教室 第5回

head内に記述しブラウザに表示してみる

ファビコンとタイトルを表示してみる

Atomエディタを起動してhead内に
<title>タグ内にタイトルを</title>
<link rel="icon" href="favicon.ico">
と記述します。

linkタグの「rel」はファイルとの関係性を表し「href」でそのファイルのある場所を表しています。

icon(アイコン)は、コンピューター画面上の小図形、ファイルの内容や機能などを絵文字などに表示したものとなっています。

Atomに記述してブラウザに読み込ませたら下の画像のようにページの上部のタイトルバーにファビコンとタイトルが表示されます。

ファビコンはAtomのファイル(index.html)があるフォルダー内にあるので「favicon.ico」と記述すればOKです。

icoとpngの違い

icoはアイコンの画像データに用いられるファイルにつく拡張子のこと、32ビット×32ビットを基本とするビットマップ形式の画像データーのことを言います。

icoの拡張子はマイクロソフトがウインドーズ向けに策定した画像フォーマットでアイコンの利用を目的に作られたもの。

pngはPNG形式の画像ファイルにつく拡張子のこと、主にWebページ上で画像を扱うための形式として開発された、GIF形式と比べると圧縮率が高く画像が劣化しにくいのが特徴

どうしたら変換できるのか?

ファビコン作成ソフト@icon変換を使う

BMP、ICO、PNG、PSD、EXE、DLL、ICLの画像形式をBMP、ICO、PNG、ICL、の画像形式に変換できる画像変換アイコン作成ソフトです。

XPの半透明アイコン、ビスタの大きいサイズのアイコン、faviconの作成に対応しています。

header内に記述し画像を表示してみる

<img>タグでヘッダー画像を読み込んで表示してみる

<body>タグの下に<header>タグを作り画像を読み込むための<img>タグを作りその中にどの画像か、幅は、高さは画像の説明文を記述していきます。

<img src="img/desuktop.jpg" これはimgフォルダーの中のdesuktop.jpgの画像を持ってくることを表しています。

width・height・alt属性を使う

width="400" height="140" alt="ヘッダー画像"> 幅400ピクセル、高さ140ピクセル、画像の説明文を書いています。

これをブラウザに表示すると下のように言葉と画像が表示されます。

alt(オルト)属性は画像の代替えとなるテキスト情報で音声読み上げブラウザでは画像ではなくalt属性に記載された内容が表示または読み上げられます。

head内にリストを記述する

ulとolリストとli要素

リストには番号付きと番号がないリストがあります、インターネットなどで検索すると順序なしリスト・順序付きリストとなっています。

「ul」が順序なしリストでこれでリストにする複数の文章を囲んで、一つの文章を「li」で囲みます。

すると下の画像のように文字が順序なしリストに表示されます

リストにリンク先を指定する

リストにリンク先を指定して他のページに行けるようにします。

<a>アンカー要素とhref属性を利用して別のページに行けるようにします。

これを指定するとHOME、ABOUTの文字の下に線ができてリンクができたことを表しています。

index.htmlとabout.htmlは同一フォルダー内のファイルのことです。

初心者のプログラミングの基礎教室 第5回

簡単な画像の表示や文章の表示が分かりましたら次はこれを装飾していくCSSについて勉強していきたいと思います。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事