超簡単なホームページの作り方 インターネットのWWW(World Wide Web)で情報を発信するためのホームページの作り方を超簡単 に解説します。 ホームページの書き方 ホームページは通常のテキストファイルですが, HTML(HyperText Markup Language)という方式 に則って記述しなければなりません。 HTMLで記述した文書の簡単な例をあげてみます。 <...> で囲んだ部分がHTMLの命令です(詳しくは 後で説明します)。皆さんも,適当に内容を変えて打ち込んでみてください。 やなさん

やなさんのホームページ

わたくしはやなさんです

お見知りおきを。  
やなで〜す  
こんどあそぼうよ! HTMLの命令の部分は,大文字でも小文字でもかまいませんが,必ず半角文字で書いてください。なお, 上の例では見やすいように頭を下げて書きましたが, やなさん

やなさんのホームページ

わたくしはやなさんです

お見知りおきを。
やなで〜す
こんどあそぼうよ! のように詰めて書いても同じことです。 WWWブラウザ(Mosaic, Internet ExplorerやNetscape Navigatorなど)を立ち上げてください。 どうでしょうか。やってみて納得してください。 ここでは、「MEMO.HTML」 HTMLの命令 上の例で使われたHTMLの命令の意味は次の通りです。多くの命令が <...> と で対になってい ます。 ,……HTML文書の始まり・終り。 ,……頭書き(ヘッダ)部分の始まり・終り。 ……タイトルの始まり・終り。 このタイトルは通常WWWブラウザのタイトルバーに 現れます。

……大見出しの始まり・終り。 大きな文字で独立した行に出力されます。 Hはheading (見出し)の意味です。

……段落の始まり(従来の流儀では段落の区切り)。 Pはparagraph(段落)の意味です。 本来は 段落の終わりの命令

があるのですが,

は省略できます。 段落の区切りの命令

を入れたところでは必ず改行されますが,それ以外のところでは,エディタ で作ったファイルの改行位置とは無関係に, WWWブラウザが画面の幅に合わせて適当な位置で改行して くれます。 注意!! 自分のホームディレクトリのファイルは、( こうすると,mypic.gif というファイルが文書の中に入ります。 WWWブラウザで画像を表示しない設定に した場合は,ALTで指定した文字列(この場合は“My Picture”)が画像の代わりに表示されます。 画像は一つの大きな文字として扱われますので,画像を独立した行に置きたいときは,画像の前後に段落 開始の命令

を入れて

My Picture

これは私の写真です。 のようにするのがよいでしょう。 WWWでは画像の形式はGIFが一般的です(最近はJPEGも増えました)。 リンクのしかた たとえば ここから 青春グラフティ(梁川プライベートホームページ)に行けます。 と書いておけば,WWWブラウザでは ここから青春グラフティ(梁川プライベートホームページ)に行けます。 のように,青春グラフティ(梁川プライベートホームページ)という語だけ色が変わって(あるいは、ア ンダーライン付きで)表示されます。そして,マウスで青春グラフティ(梁川プライベートホームページ) という語をつつくと,実際に http://www.mni.ne.jp/~yanaken/yanaken/ に移動できます。 Aはanchor (いかり)の意味,HREFはhypertext referenceの意味です。 リンク先は同じマシンの中のファイル名でもかまいません。たとえば ここを押すと解説のページの情 報が現れます。 と書いておけば,解説のページの部分を押すと,解説のページというHTML文書に飛びます。また, その他の命令

...

は,

...

より少し小さい見出しです。 以下同様に,
...
まであります。
は画面の幅いっぱいに横線を入れます。 この前後は

を入れなくても改行します。 HRはhorizontal rule(水平の罫線)の意味です。

は箇条書きです。 各箇条は頭に
  • を付けます。 たとえば 部員紹介: のようにして使います。 各項目の前後は改行しますので,

    を入れる必要はありません。 ULはunordered list(番号の付かない箇条書き), LIはlist item(箇条書きの項目)の意味です。

      ...
    は番号付き箇条書きです。 各箇条は頭に
  • を付けます。 OLはordered list(番号の付 く箇条書き)の意味です。 ... で囲んだ部分は 強調表示(emphasis)になります。 ... で囲んだ部分は 最強調表示(strong emphasis) になります。
    は強制改行(break)します。

    と似ていますが, 通常

    は少し余分に行間が空くのに対して ,
    は通常の行間隔のままで単なる改行をします。

    ...
    で囲んだ部分は, ファイルの改行位置と同じところで改行します。 つまり,各行の最後 に
    を入れるのと同じことになります。 表などを出力するのに便利です。PREはpreformatted(書式 指定済み) の意味です。
    ...
    で囲んだ部分は, その前後で改行され, 頭が少し下がります(実際は WWWブラウザによります)。 本文に引用文をはさむときに便利です。 のように書いた部分は, WWWブラウザの画面には現れません。注釈を書くのに使いま す。 HTMLでは半角の <,>,&," は特別な意味をもつので,これらを出力したいときは,それぞれ <,> ,&," と書くか,あるいは全角文字を使います。これらの命令は大文字・小文字を区別します ので, < などとは書かないでください。 もっと知りたい場合は、 ここをクリックしてください。