MASHの「ホームページのススメ (Windows版)」

・Cool（と言われる）HPを作りたい人の参考書＝＝＝＞ MASHのいろんな意味での先輩 YAMさんの　眩惑のコラージュ
評価ポイント：TOPから「さりげなく赤と黒をベースにして幻想的な映像で構成される詩の世界」　Coolとは「見た目」以上にその人のポリシーが美しく表現されていることでは？　うっ・・・　MASHとは別世界！！
・かわいいHPを作りたい人の参考書＝＝＝＞ TINTINさんの　たまごのこころ　 （現在　春眠中？です）
評価ポイント： 水滴とパステル色が、上品だけどかわいい女性らしいムードをかもし出している。
・コンテンツHOTなHPを作りたい人の参考書＝＝＝＞
SEVENTH PROJECT　は、そう簡単にマネできないかも・・・
評価ポイント： 壮大な宇宙ドラマを果てることなく創作しており、且つ登場キャラやメカ、ストーリーに「妥協」がない。

ホームページを今すぐ作ってみよう！「テキスト・エディター編（その2）」

どうしても、お金を掛けずに自分でホームページ(以降 HPと呼ぶ）を作ってみたい人は、テキスト・エディターを使ってトライしてみよう。テキスト・エディターっていうのは、テキストが書けるソフトなどを指す。（フリーウエアも一杯ある）例としては、Windowsにオマケで付いている「メモ帳」などである。PART1では、この「メモ帳」を使って、簡単なHPを作ったけど、今度は、画像・映像・サウンドに関するタグを使って遊んでみよう！
このページを読もうとされている人は、すでにデジカメでGETした映像をフォトレタッチ（写真編集・加工）ソフトを使って、アルバムにしたりした経験はあると思います。ところが、HPに写真を貼り付けるのに、それなりの編集・加工ソフトがないといけないと思っている人が多い。いきなり、ソフトを買う前にタダで勉強してから、本当に「使える」ソフトを選んだ方がお得では？

1)まずは、画像表示に関して、簡単な例から・・・・下にあるHTMLタグ（<html>と</html>の間）をコピーして、メモ帳へペーストして、拡張子を html又はhtmとして、適当なファイル名を付けて保存。　ここでは、とりあえず　visual.html 　にしますが、これと同じフォルダーにあるフォルダー"jpgfile"の中にdugon.jpgという名前をつけた適当な画像ファイルを保管して下さい。慣れてきたら、dugon.jpgの代わりに、お気に入りの画像ファイル(たとえば、ABC.gif　や　mash.jpgなど）に変更して試すと良いでしょう。　むろん、"jpgfile"というフォルダー名やディレクトリー（フォルダーの階層）などもいじりながら、変化を確かめましょう。　dugon.jpgという部分（赤色指示の箇所）のみ編集し、"jpgfile"へ画像を保管して下さい。　 実際には、visual.htmlは、このように見えます。

注）事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。

<html>

<head>

<title>Visual Training1</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

</head>

<body>
<!--
次のタグは、PART1でも説明したフォルダー"jpgfile"内にある"dugon.jpg"という画像ファイルを表示。
-->
<img src="jpgfile/dugon.jpg">


<!--
次のタグは、先程のdugon.jpgを「低解像度」で表示するタグです。簡単に言えば、ざらつきのある
色褪せた画像のイメージ。モノクロ画像向き。
こんな表現が、たったこれだけのことでできてしまう。
もうひとつのタグ　altは、画像読込中に文字を表示。テキストブラウザーで閲覧する人への思いやりだし、
うまく使えば、ユーモアのあるHP作りにも役立ちそう。この例では、「ジュゴンの写真だよ！！」の
文字が表示されます。 後で、HPが見れたら、ジュゴンの3番目の写真上にマウスでカーソルを重ねると
「ジュゴンの写真だよ！」というメッセージが出てくるはず。
-->
<img src="jpgfile/dugon.jpg" alt="ジュゴンの写真だよ！">

<!--
次のタグは、画像サイズを指定。要するに、タテ幅、ヨコ幅を決める。
サイズの単位は、ピクセル　又は　％で定義します。ただし、タテとヨコの比率が変わると、画像自体が
歪んでしまうので、全体的に小さくしたり大きくしたい場合は、タテ、ヨコとも同じパーセンテージ指定
するのがベター。
-->
<img src="jpgfile/dugon.jpg" width="400"　height="300">

<img src="jpgfile/dugon.jpg" width="30%" height="40%">
</body>
</html>

2)次は、せっかく入れた画像に自分のコメントや説明を入れたくなるはず。適当なソフトで、これらを挿入することは簡単だけど、何となく自由度が少なくて、好きな場所へ文字が入れにくい場合がある。タグに詳しくない人には、「仕方ないか」ということになってしまう。少なくとも、後で勉強（するかもしれない）表組みのタグを知っていれば、解決するが、ここでは、もっとシンプルなタグでやってみたい。 さっきと同じく下にあるHTMLタグ（<html>と</html>の間）をコピー、メモ帳へペーストして、適当なファイル名（ここでは、moji.html）をつけて、HTML形式で保存します。とりあえず、画像ファイルとの関連付けは変えずにjpgfileフォルダーにしておいて下さい。 moji.htmlは、このように見えます。

<html>

<head>

<title>Visual Training2</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

</head>

<body>
<!--
次のタグ align は、先程のジュゴンの画像（30%縮小）をページの左(left)に配置して、
コメントを写真の右側へ持ってくるタグです。leftの代わりに、right, top, middle, bottomなど
その単語と同意の位置に画像を配置できる。更に、その後ろへ別の画像を違う側へ
配置したい場合は、その直前に <br clear="left">などとタグを加えればOKです。
-->
<img src="jpgfile/dugon.jpg" width="30%" height="30%" align="left" >

これは、「人魚伝説のモデル」となったジュゴンです。


</body>
</html>

次回は、クリッカブル・マップについてお話したいと思います。最近では、定番ですので、これも知っててソンはしません。
有名・強力壁紙関連サイトへのリンク MASH厳選 素材リンク集

次回 「テキスト・エディター編（その3）」 をお楽しみに！

MASHのHPへ