home
information

for contents

how-to HTML files

default layout

browsers

pictures

table

frame
upload
tags

form
bbs

HP Guide for Beginners(タイトルロゴ)

(※ PC・タブレットでブラウザーの横幅が大体960px以上の時;
  テキスト中のリンク(下線(一本線)付きのテキストは全てリンクします)が有効になり、
  画面左下に"タグ解説ページ"が"別窓で並行表示"されます)




["how-to HTML files"]

---では、いよいよHTMLライティングに入りますが、その前に、次の"下準備"をして下さい。



〔HTMLファイルの"作成"〕

(ここでは"メモ帳"でのHTML作成について解説しますが、"SimpleText"やワープロソフトなどで書く場合も、基本的には同じです)

WWW上でHPを公開するには、HTMLファイル(HTMLで書かれたテキストファイル)をUPしなければなりません。---というと、何だか難しそうですが、要は、本文にタグを加えていって、拡張子".html"(または".htm")で保存するだけのことです。---それも、(極端に言ってしまえば)絶対必要なタグはわずかで、残りは広い意味での"レイアウト系"です。

HTMLファイルを書くのは、"メモ帳"(または"SimpleText")でOKですが、もちろんワープロソフトなどでも書けます(保存の際は、必ず"テキスト形式"を選択して下さい。---さもないと、"文字化け画面が出て呆然"というハメになります)。



("Basic HTML")

---まず、これから説明する手順通りに書いてみて下さい。
  1. "メモ帳"を起動する
  2. "サンプル"と入力する
  3. ("サンプル"の)前に<HTML><BODY>、後に</BODY></HTML>と入力し(必ず半角で入力して下さい)、仮に"sample.html"というファイル名で保存する(ウインドウは閉じないでおいて下さい)

---その後、この作ったばかりのHTMLファイル(これでも立派なHTMLファイルです---簡単でしょう?)のアイコンをダブルクリックするか、ブラウザを起動してメニューの"ファイル→ファイルを開く"からHTMLファイルを読み込んで下さい(こちらもウインドウは閉じないでおいて下さい)。

---たった今書き写した"文章"がブラウズされているはずです。



---次に、"サンプル"の後に、"その1"と入力して下さい。

---画面を見ておわかりのように、"メモ帳"を書き替えただけではブラウザ画面は変わりません。---修正結果を反映させるには、

  1. HTMLファイル: "ファイル→上書き保存"をクリック
  2. ブラウザ: ネットスケープは"再読込"ボタン、IEは"更新"ボタンをクリック
して下さい。

---ブラウザ画面に"サンプルその1"と表示されるはずです。
(確認したら、"メモ帳"、ブラウザ共ウインドウを閉じて下さい)



---お気づきになっているかもしれませんが、HTMLファイルは一度ウインドウを閉じてしまうと、書き直すためにアイコンをダブルクリックしても("メモ帳"は起動せずに)ブラウザが立ち上がってしまいます(PCの方で、HTMLファイルのアイコンをダブルクリックすると"メモ帳"が起動する、という設定にでもなっていない限りは)。---そこで、HTMLファイルをライティング可能な状態にするには、"メモ帳"の方からファイルを開かなければなりません。

---HTMLファイルを"メモ帳"から開くにはいくつかの方法がありますが、
  1. デスクトップに"メモ帳"のショートカットを作り、そのアイコンの上に、再編集したいHTMLファイル(のアイコン)をドラッグ&ドロップする

  2. スタートメニューでメモ帳を起動し、ウインドウの中にHTMLファイル(のアイコン)をドラッグ&ドロップ

  3. 再編集したいHTMLファイル(のアイコン)を右クリックしてショートカットメニューを出し、"送る→Notepad.exeへのショートカット"をクリック

  4. IEを起動してHTMLファイルを表示した後、画面の何もない部分を右クリックしてショートカットメニューを出し、"ソースの表示"を選択してクリック(またはメニューから"表示"→"ソース表示"をクリック)

    (この方法は、ファイルが空の時は使えません)
の4つがいちばん簡単でしょう。

(3.の方法はWindowsのみ。それ以外はMacでも可能だと思いますが、もし、これでうまくいかなかった場合は、こちらの方法で開いて下さい)



〔HTMLライティング〕

---まず、以下の"サンプル"をブラウザの画面通りに"メモ帳"に書き写し、文章の前に<HTML><BODY>、後に</BODY></HTML>と入力してファイル名"sample2.html"で保存して下さい。

最近売ってるWin98のPCって、IE4しかインストールされてないものばかり---IE派の人が多いといっても、ネットしている人の半数近くはネットスケープ使ってるというのに・・・

ところで、私と同じ頃(97年前半)かそれ以前にネット始めたWinな人が"ネットスケープ派"と"IE派"に分かれるのは、最初のPCが98だったかDOS/Vだったかによるのかも・・・?
(その頃、ちょうどネットスケープもIEもVer.2からVer.3に移行する時期で、NNの方がIEより機能的に上だったので、"一太郎の付属品"としてNNがプレインストールされていることが多かった(当時、NNは有料)98を買った人は"ネットスケープ派"に、そうでないDOS/V買った人は"IE派"に、というのが、(私の)推論)

---ブラウザで"sample2.html"を開いて見てみると、文章の内容自体は正しくブラウズされているはずですが---

---ブラウザは、"メモ帳"での改行は無視してしまうのです。---また、"メモ帳"で改行した箇所の後は、半角スペース分空いてしまいます。


---ブラウザ上で改行させるには、改行タグ"<BR>"か段落変えタグ"<P>"を使います。

---では、サンプル文を下のように書き直してみて下さい。(ただし"メモ帳"の方では<BR>または<P>を入れる箇所以外改行しないで下さい(横にスクロールして書きにくい場合は、"書式→右端で折り返す"(Windowsのバージョンによっては"編集→右端で折り返す")をチェックすると楽に書けます))

最近売ってるWin98のPCって、IE4しかインストールされてないものばかり---IE派の人が多いといっても、ネットしている人の半数近くはネットスケープ使ってるというのに・・・<P>
ところで、私と同じ頃(97年前半)かそれ以前にネット始めたWinな人が"ネットスケープ派"と"IE派"に分かれるのは、最初のPCが98だったかDOS/Vだったかによるのかも・・・?<BR>
(その頃、ちょうどネットスケープもIEもVer.2からVer.3に移行する時期で、NNの方がIEより機能的に上だったので、"一太郎の付属品"としてNNがプレインストールされていることが多かった(当時、NNは有料)98を買った人は"ネットスケープ派"に、そうでないDOS/V買った人は"IE派"に、というのが、(私の)推論)



---今度は、サンプル文どおりにブラウズされていると思います。



文章を途中で"上下に分割"したい時は、罫線タグ"<HR>"を使います(いろいろオプションがありますが、詳しくは"tags"を見て下さい)。---<P>の代わりに(あるいは前か後に)入れてブラウズしてみて下さい(IE3とそれ以外のブラウザでスペースの間隔が異なります)。



(画像の表示)

ただ画像を表示させたいだけなら、イメージタグ"<IMG SRC="ファイル名">"と書けば左側(文章を行変えしている時。デフォルトの場合、イメージの横には、テキストは一行しか表示されず、残りはイメージの下に回り込んでしまう)に表示されますが、それではレイアウト上ちょっと・・・という場合が多く、通常はオプションを使用します(詳しくは"tags"、または"default layout"を見て下さい)。



(リンク)

HPに絶対欠かせないのが、この"リンク"です。
リンクの書き方は、ファイルが同じディレクトリにあれば簡単ですが、異なるディレクトリにあると途端にややこしくなります(文頭で、"ファイルはすべて同じディレクトリに置いて下さい"と念を押したのはこのためです)。

(---ディレクトリ分けしたい場合は、こちらをご覧下さい)

  • <A HREF="ファイル名">~</A>
    同一ディレクトリ内のファイルにリンクします。(試しに、先ほど作成した"sample.html"に"<A HREF="sample2.html">リンク</A>"と書いてみて下さい。---"リンク"をクリックすると"sample2.html"にジャンプするはずです。
  • <A HREF="URL">~</A>
    他のURL(ホームページアドレス)のファイルにリンクします。(---もし、お気に入りのHPがあったら、そのURLを記入して"~"("~"は任意のテキスト)をクリックしてみて下さい。---ブラウザにそのHPのキャッシュが残っていれば、接続しなくても表示されます)
  • <A HREF="mailto:e-mail address">~</A>
    自分のメールアドレスを入れておくと、メールアドレス入りのメールウインドウが開かれます。HPの読者との交流には不可欠のタグですね。



("index.html"の作成)

HPの"トップページ"のファイル名を"index.xxx"(xxx: 拡張子; 多くの場合"html")以外にしたい場合、WWW上でディレクトリ内を公開したい時以外は必ずWWW上に作成したすべてのディレクトリ内に"index.html"(中身は空(何も記述しない)で構いません)をアップロードして下さい。

("index.html"がないと、通常、ディレクトリの中身の一覧が表示されてしまいます(中身が丸見えになり、セキュリティ上問題))




---これだけ覚えれば、一応最低限のHPは書けます("美しいレイアウト"とは言い難いですが)。---後は、"default layout"以下のページを参考に実践していって下さい("タグ"は、書いているうちに自然に覚えてしまうものです---"Coolest Moment"程度のレベルのHPであれば、ですが)。 また、(私もそうしてきているのですが)人のHPのソースを研究するのも大変勉強になります(私のHPのソースを見ると、一見難しそうに見えるかもしれませんが、単にタグと"記号"が多いだけです)。---でも、無理には詰め込まないようにして下さい---ページ書くのがいやになってしまったりしますから。




〔"basic sample"〕

ごく基本的なタグのみを使ったサンプルです。(---"オプション"を使わないと"美しくない"ということを示すために、あえて"デフォルト"で書いています。また、実際に"バリエーションサンプル"と互いにリンクします。(メールはこちらからは送れません))

(見終わった後は、(立ち上がった)画面を閉じて下さい)



→Next 


Copyright 1998-2018 (C) "Opal" All Rights Reserved.