☆ HPのたまご ☆


HTMLの小技




ホームページ作成のプチ体験しよう! プラウザとメモ帳だけで出来ちゃうんだよ♪




このコーナーは、まだ自分のホームページをお持ちでない方に、ホームページ作りのプチ体験してもらって、誰にでもホームページを作れるものなのだという事を実感してもらうために作成しました。



◆ 使うソフトは?

特別なソフトはいりません。メモ帳などのテキストエディタと、Internet Explorer などのブラウザがあれば作れてしまうのです♪ (本格的に作る場合はホームページ・ビルダーがあるとラクラク♪)

ホームページは、ワープロで作成する文書とはちょっと違い、HTMLという言語を用いて記述します。

* Windowsの場合、メモ帳は [スタート]→[プログラム]→[アクセサリ]→[メモ帳]で起動します。





◆ まず、拡張子を表示させよう!

Windowsを使用している場合は、[スタート]→[コントロールパネル] →[デスクトップのカスタマイズ]→「フォルダーオプション」→[表示]→で、[登録されているファイルの拡張子は表示しない] のチェックボックスをオフにして、[OK]ボタンをクリックして拡張子を表示させてください。

これで、ファイルの拡張子(ファイル名のお尻に付いている .txt や .htm )が表示されるようになりました。ホームページを作成する上で、ファイルの拡張子はとても重要なので、こうして、いつでも確認できるようにしておこう!

* ちなみに拡張子とは、ファイルの種類を表す記号です。 





◆ テキストエディタ(メモ帳)でHTMLを書いてみよう!

* Windowsの場合、メモ帳は [スタート]→[プログラム]→[アクセサリ]→[メモ帳]で起動します。 テキストエディタに文章を入力してみよう! 英字の部分はすべて半角文字で入力してね。


<HTML>
<HEAD>
<TITLE>ホームページを作ろう</TITLE>
</HEAD>
<BODY>
はじめてのホームページだよ。
</BODY>
</HTML>





これを index.html というファイル名で保存してください。
保存の仕方は、[ファイル]→[名前を付けて保存]で、マイ ドキュメントなど、適当な場所に保存しましょう。この時、ファイル名を 無題 から index.html に変更して[保存]ボタンを押します。

* ホームページで作成するHTML文書や画像ファイルのファイル名は、全て半角の英数文字で名前を付けてね。
* ファイル名(indexの部分)は半角英数字であれば何でもOKですが、 .html は変えないで!!





◆ ブラウザで表示してみよう

作成した index.html をブラウザで表示してみよう! Internet Explorer の [ファイル]→[開く]→[参照]から先ほど保存したファイルを指定して index.html を開いてください。

「はじめてのホームページだよ。」という文章が表示されていますね☆ ブラウザのタイトルバーには「ホームページを作ろう」と表示されます。これで、ホームページが一丁あがりです。 





◆ ちょっと修正してみよう!

「はじめてのホームページだよ。」という文章を少し修正してみよう!修正はブラウザではなく、メモ帳などのテキストエディタで行います。メモ帳からさっき保存したindex.htmlを開いて修正しよう!

* さっき保存したはずの html文書が見つからない時は、▼をクリックして[すべてのファイル]を選択すると出てきますよ。

「はじめての」と「ホームページだよ」の間に改行を入れてみよう!!


はじめての<BR>ホームページだよ。


と修正して保存、再表示してみよう!ちゃんと改行されましたね。





◆ 次は太字にしてみよう!


「ホームページ」の部分を太字にしてみよう☆


はじめての<BR><B>ホームページ</B>だよ。


ブラウザで再表示すると、「ホームページ」が太字で表示されます☆





◆ 色を変えてみよう!


「ホームページ」をピンクにしてみましょう。


はじめての<BR><FONT COLOR=pink><B>ホームページ</B></FONT>だよ。


ブラウザで再表示すると、「ホームページ」がピンクに変りました。





◆ 流れる文字に挑戦しよう!


これを入力するか、コピーアンドペーストしてみる。

* コピーアンドペーストとは、マウスで文字の上をドラッグ→右クリック→[コピー]→貼り付けたいところで右クリック→[貼り付け]

* ドラッグとは、文字の上をマウスで左クリックしながら、横にスライドさせる事です。


<MARQUEE scrollamount="6">流れたくてしょうがない</MARQUEE>


流れたくてしょうがない


プラウザで再表示すると[流れたくてしょうがない]という文字が流れていますね。(^◇^)ノ





*・・・・・***・・・・・* *・・・・・***・・・・・* *・・・・・***・・・・・* *・・・・・***・・・・・*



とっても、簡単でしたね♪ このような仕組みでホームページは出来ています。実際には このようなテキストエディタで タグを打ち込んでホームページを作成するのは面倒くさいので、市販のホームページ・ビルダーという、ホームページ作成ソフトを使ったり、無料でダウンロード出来るソフトも多数出回っているようです。


HTMLの小技]でも、ホームページを飾る色々な方法を紹介してるので、のぞいてみてくださいね。コピーするだけで、一味違った可愛いホームページが出来ますよ。




Copyright (C) 2001-2014. Various Colors. All rights reserved.