|
実際に作ってみよう
さあいよいよ自分の手でホームページを作る時がやってきました！できるだけ簡単に、分かりやすく説明していこうと思っていますので、最後までお付き合いよろしくおねがいします。
それではまず準備を始めましょう。まずファイルの拡張子を表示させるよう設定し、次にメモ帳を開きます。分からない方はこちらを参考にして準備を進めてください。 準備できましたか？それではいよいよ始めましょう！ ちなみに日本語以外の文字を入力するときは必ず半角英数字で入力して下さいね。 ではまず最初に <html> と入力してください。
これは｢今から入力するのはHTMLのプログラムですよ｣と宣言する意味があります。 これを書かないとコンピュータはHTMLのファイルと認識してくれません。 ところでこの<html>という文字、半角の< >で囲まれてますよね？ この半角の< >で囲まれた文字をHTMLタグといいます。このタグというのが曲者で、結構種類があるんですよね〜。私は数十種類しか覚えていませんが（＾＾；） では次に <head> と入力しましょう。
さあ二つ目のタグが出てきました。この<head>タグは 「ここから先に入力するのは、このファイルのheadの部分ですよ」 と、コンピュータに認識させる意味があります。ま、とにかく <html>と書いたら次は<head>と書くのがお決まりなので、深く考える必要はないでしょう。 ちなみになんか少しずれた位置に書いていますが、これは見やすくする為なので特に意味はありません。みなさんもこのように少しずらしたいときは、必ず半角スペースを使うようにしてくださいね！ さて、さっきは「ここからがheadの部分だよ」と認識させたので、次は「ここまでがheadの部分ですよ」と終了地点を認識させます。
よく見るとheadの前に /（スラッシュ） が入ってますね。これがhead終了の合図なのです。ほとんどのタグはこのように閉じるという操作をしなければなりませんが、まれに閉じなくてもいいタグもあります。 では次に空っぽで寂しい<head>の中身を書くことにします。<head>の中身にはそのページの情報などを記入するのですが、ここでは<title>タグを使ってページのタイトルを入力してみましょう。タイトルは自分の好きなように名前をつけて下さいね。ここでは「初めてのホームページ」と書きます。
これでこのページのタイトルは「初めてのホームページ」になりました。 でもタイトルってどこに表示されるの？と思いますよね。</head>の中に書いたタイトルはブラウザのタイトルバーに表示されます。（今みなさんが見ているこのページでいうと「ホームページ作成講座−STEP2 実際に作ってみよう」という表示がある場所） さあタイトルも決まったところでいよいよ本文を書こう！・・と言いたい所ですが、一休みも兼ねてファイル保存の勉強をしましょうか（＾＾） ではまずは閉じていなかった<html>を閉じます。
閉じ終わったらファイルを保存しましょう。ちなみに保存する前に、ホームページ作成専用のフォルダを作っておくことをオススメします。 「ファイル」→「名前を付けて保存」を選択します。 しかしここで気をつけてほしいのが、ファイル名と一緒に拡張子名も書くということです。 ここは無難にファイル名を「index」、拡張子名を「html」とします。 つまり「index.html」としておきましょうか。 ちなみに「index」と「html」の間にピリオドを入れるのを忘れないで下さいね〜！ 保存が終わったら、今保存したファイルをダブルクリックして開いて見ましょう。 ・・多分真っ白なページが表示されたとおもいます。でもタイトルバーをよくみて下さい。さっき入力したタイトルが表示されていませんか？表示されていれば大成功です（＾＾）表示されていない場合はどこかに入力ミスがあると思うので細かくチェックしてみましょう。 とりあえずここまでお疲れ様でした！いよいよ次からは本文を入力したりしていきますよ！ 次へ進む |