とりあえず最低限のやり方をここで順番に説明するつもり。
途中で丸投げしたくなっても怒らないから気楽に行きましょう笑

まず必要な物、というか環境について

  • パソコン(そりゃそうだ)
  • テキストファイルが編集できるもの(windowsなら「メモ帳」とかmacなら「テキストエディタ」とか・・・)
  • ネットワーク回線

  • とまぁこんなとこでしょうか。

    ホームページってのは基本的に(快ラビのは全ページ)htmlファイルってので書かれてるわけです。
    ・・・とかごちゃごちゃ言ってないで実際やってきましょうか笑

    1.まずテキストエディタ開いて


    2.下のをそのまま打ち込んでみてください。

    (改行やスペースは見やすいようにするといい)
                <html>
                        <head>
                                <title>
                                </title>
                        </head>
                    
                        <body>
                        </body>
                </html>
            

    さて、軽く上の説明をしときましょうか。 大前提としてhtmlってのは基本的に書いた文字がそのままページ上に表示されるんだけど、 <title>〜</title> みたいに<>で囲んだ物(タグ)は扱いが特殊で、ブラウザで読み込む時に特定の処理をしてくれるわけです。
    とりあえず上のコードはhtmlページの形にするための最低限の記述だと思ってください。
    タグは基本的に対になってる(挟んだ部分にのみ効果が出るから当然と言えば当然)ので、上のコードだと4個覚えればいいのかな。 で、意味がわからなくてもいいから

    3.自分のテキストエディタで同じように書いたら「test.html」って名前で好きな場所に保存してください


    4.そしたら今保存したtest.htmlをブラウザで開いてみましょう


    真っ白なページが開けばOKです。(普通にファイルダブルクリックで開けばブラウザでひらくと思うけど、テキスト形式で開かれちゃう人がいたら右クリックでアプリケーション指定して開いてください) でも真っ白なページ作っても楽しくもなんともないですよね・・・

    では実際にページになんか表示させて見ましょう


    ・・・と言いたいところなんだけど、その前に1つだけおつきあいください

    5.test.htmlに以下のように書き足してください

                <html>
                    <head>
                        <title>
                            快足ラビット2
                        </title>
                    </head>
                
                <body>
                </body>
                </html>
            
    はい。そうです。<title>〜</title>の間に「快足ラビット2」が入っただけです

    6.実際にtest.htmlを開いてください(すでに開きっぱの人はファイル上書き保存後にページ更新すればOK)

    どこが変わったかと言うと、タグ名からもわかるかも知れないけどページのタイトルです。
    快ラビのホームページでは全部「快足ラビット2」にしてるので深く考えずここには快足ラビット2って打っとくことしましょう。

    さて、やっとこさページ内部をいじる段階に来ました


    7.以下のようにbodyタグの間に書き足してください

                <html>
                    <head>
                        <title>
                            快足ラビット2
                        </title>
                    </head>
                
                <body>
                    こんにちは。さようなら。
                </body>
               
                </html>
            

    ではtest.htmlを表示してみてください

    ・・・あれ?と思った人もいるでしょう。環境によっては大丈夫な可能性もありますが

    文字化けしてるんじゃないかとおもいます

    (してない人も一応ここ大事なので見といてください!!)

    ここではheadタグの間に文字コードを指定する1文を書き込む必要があります

    ここも丸覚えする感じでいいので書き込んでみましょうか笑
                <html>
                    <head>
                        <meta http-equiv="Content-Type" content="html/txt; charset=utf-8">
                        <title>
                            快足ラビット2
                        </title>
                        </head>
                
                <body>
                    こんにちは。さようなら。
                </body>
               
                </html>
            

    これでついに真っ白な画面上に「こんにちは。さようなら」の文字が正しく表示されたと思います。
    今書き込んだ1行は文字コードをutf-8で読み込んでくださいっていう指示をブラウザに指示する文章です。
    自分が書いてるときにshift_jisとかで書いている場合は「charset=shift_jis」のように書きます。

    快ラビのホームページは基本的にutf-8で書いてあります。


    とりあえず今回はここまで!

    第二弾へ

    快ラビホームページトップに戻る inserted by FC2 system