もっと色々な事をホームページで表現してみよう
無料ツールをただ集めてきただけでは宝の持ち腐れと言うものです。
ここからはそのツールも使ってより見栄えの良いホームページ作りにチャレンジしてみましょう。
各ツールごとの詳しい使い方はそのツールの名前などで検索して
実際に使ってみて慣れていくのが一番の早道です。
「習うより慣れろ」とはまさにこの事なのかも知れません。
ペイントツールで描いた絵や、画面上を撮影したスクリーンショットなどは
<img>タグを使えば簡単にホームページ上に表示させられます。
まずは、その表示の仕方から覚えていきましょう。
レベル10：使う頻度の高い便利な＜タグ＞を覚えよう
まずは、絵やスクリーンショットなどの画像ファイルの表示について触れていきましょう。
拡張子が.pngや、.jpgや、.gifや、.bmpなどのファイルがそれにあたります。
それらのファイルを、.htmlや.cssと同じ階層のフォルダにおいても間違いではないのですが、
同じフォルダの中にたくさんの種類のファイルが混在するのも良くないので、
ここは画像ファイルと呼ばれる種類のファイルは新しくフォルダを作り、
その中に入れるようにした方が、後々、管理が楽になります。
名前は何でも良いのですが、ここはとりあえず「img」という名前のフォルダにしましょう。
↑このような感じでindex.htmlと同じ階層にimgファイルを作り、
その中に画像ファイルを作って入れていきます。
<img src="img/ファイル名.jpg" width="350" height="200" alt="画像ファイルの名前" />
img{border:none;}
上記の書式で「ファイル名」の箇所にimgフォルダの中に入れたファイルの中で表示したいファイルの名前を入力、
上記では拡張子が.jpgですが、それはあくまでも例なので拡張子がそうでない場合は、
それに合わせて入力する必要があります。
右隣のwidthは広さを表し、さらにその右隣のheightは高さを表します。
この２つは何も入力しない場合、元のファイルの大きさに合わせて表示されますが、
美しいソースを目指すならば書き加える必要があります。
表示させたいファイルの幅と高さを知りたいならば、そのファイルにカーソルを合わせて、
右クリック→プロパティ→詳細 で知ることができるので、その数値を入力しましょう。
さらにその右隣のaltは、カーソルを置いたときに表示されるテキストを入力します。
何も入力しなくても表示に関しては問題はありませんが、
これも美しいソースを目指すならば必ず何かの文章を入力して置いてください。
style.cssに書き込むimg{border:none;} とは、
表示させる画像の周りに勝手に枠を作るなという意味です。
○○{background-image:url('img/ファイル名');}
↑・・・などの書式を任意のスタイルシートの中にある{ }の中に書くと、
htmlソース内で指定した＜タグ＞の内部に限って、
背景を指定した画像ファイルで表示することもできます。
黒い文字と<span style ="color:#ff0000;font-weight:bold;">赤い上に太い文字</span>を入れたい場合、<br />
このように入力する。
↑このように入力すると
黒い文字と赤い上に太い文字を入れたい場合、
このように入力する。
↑実際にはこのように表示される。
↑スタイルシートにこのように入力して、
↑htmlソース内でこのような書式を展開すれば、 実際には
↑・・・と、このように表示される。
拡張子が.swfのようなflashと呼ばれる動画ファイルをホームページ上に表示したいのならば、
「img」フォルダに加えてまた新しく「js」などの名前のフォルダを新規作成して、
その中にテキストファイルでまず↓のように打ち込む。
document.write ("<param name=\"allowScriptAccess\" value=\"sameDomain\">");
document.write ("<param name=\"movie\" value=\"flash.swf\">");
document.write ("<param name=\"quality\" value=\"high\">");
document.write ("<embed src=\"flash.swf\" quality=\"high\" width=\"320\" height=\"240\" name=\"test\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"></object>")
↑長い書式が入るが、スタイルシートとは異なり、括弧から括弧までの間は改行してはならない。
↑のような書式を入れるとflash動画がホームページ上に出現する。
上記の例の場合、ファイル名はflash.swf 、表示させたい幅が320ピクセル、高さが240ピクセル
flash.swf を入れたフォルダ名がjs の場合となるが、
これは作る側の都合で名前や数字を自由に変える事ができる。
また、通常＜タグ＞と＜／タグ＞の間には何かの文字を入れなければならないのだが、
この場合は正しい書式として採点されるようです。
本格的なホームページは作れるようになりましたか？
＜タグ＞の種類はそれこそ夥しい程の数が存在しますが、
実のところこれだけ覚えていれば、そこそこのホームページが作れるようになれます。
あとは細かなところを必要に応じて
いじっていけば、
また、新たな発見があるかもしれません。
ホームページが完成すれば、後はそのフォルダの中身をサーバーにアップロードすれば
ＵＲＬアドレスを入力することで、世界中のパソコンからアクセスできるようにはなりますが、
そのままではそのサイトはどこのサイトからもリンクを受けていない為、
リンクを辿って誰かがそこに辿り着いたり、
クローラーと呼ばれる検索サイトに表示させるロボットも
巡回に来ることができません。
どこからもリンクを受けていないそのサイトはそのままですと、
大海原の中にぽっかり浮かぶ無人島のようなものです。
せっかくサイトを作ったからには
より多くの人に見に来て欲しいものですよね。
次からはそのより多くの人にどうやって自分の作ったサイトに見に来てもらうか・・・
などについて触れていきたいと思います。
スポンサードリンク
当サイトの内容を無断で複製・転載することはご遠慮願います。