TITLE:HTMLファイルの「骨組み」 *HTMLファイルの「骨組み」をつくる [#dd821259] **HTMLファイルの作成 [#vdd88e24] それでは、HTMLファイルを作成していきます。 実際に入力して練習しましょう。 それには、まずテキストエディタを起動します。 -「TeraPad」を利用する場合 ++「スタート」ボタンをクリックし、「すべてのプログラム」→「TeraPad」→「TeraPad」を選択 #ref(Lecture/JouhouC2010/2nd/head_body/terapad_icon.png,nolink,TeraPad) ++Tera Padが起動 -「メモ帳」を利用する場合 ++「スタート」ボタンをクリックし、「すべてのプログラム」→「アクセサリ」→「メモ帳」を選択 #ref(Lecture/JouhouC2010/2nd/head_body/memopad_icon.png,nolink,メモ帳) ++メモ帳が起動 なお、基本的に、''この授業では「TeraPad」を使用します''。 **HTML文書の骨組み [#l7130ca3] HTML文書の構造は、次の3つの要素によって、 内容を組み立てられています。 -''html要素'': HTML文書全体(<html>...</html>) -''head要素'': HTMLファイルの基本情報(<head>...</head>) -''body要素'': Webページとして表示される内容(<body>...</body>) head要素は、HTML文書に関する情報や設定を記述する場所です。 HTML文書のタイトルもその中に記述します。 -''title要素'': Webページのタイトル --title要素は、head要素のなかで1つだけ記述できる --設定したタイトルは、ブラウザのタイトルバーに表示される :例| #code(html,nolink,nonumber){{ <html> <head> <title>Webページのタイトル</title> </head> <body> (Webページとして表示される内容) </body> </html> }} **ファイルの保存とブラウザでの確認 [#r03a31a8] ひとまず、ファイルを保存してみましょう。 +TeraPadのメニューから、「ファイル」→「名前をつけて保存」を選択 +「保存する場所」を「マイドキュメント」に設定 +「ファイル名」を「''自分の学籍番号''」+「''.html''」と入力~ (例: 学籍番号がC2092000の場合、c2092000.html) +「保存」ボタンをクリック +HTMLファイルとして、内容が保存される。 TeraPadの場合、HTMLファイルとして保存すると、 ''タグや属性の部分が色分けして表示''されます。 HTMLファイルが保存できたら、 ブラウザでWebページとして確認してみましょう。 次のいずれかの方法で確認してください。 //+メニューから「ファイル」→「開く」を選択 //+「参照」ボタンをクリック //+保存したファイルを指定し、「開く」ボタンをクリック -Internet Explorerを起動 ++「マイドキュメント」を開いて、作成したHTMLファイルのアイコンを探す ++HTMLファイルのアイコンを、Internet Explorerのなかにドラッグする -TeraPadのツールバーにある「Internet Explorer」のアイコンをクリック -Webページが表示される #ref(Lecture/JouhouC2010/2nd/head_body/desktop.png,nolink,作業中のデスクトップ) このあと編集作業は、次のように進めていくことになります。 +HTMLファイルを編集したら、上書き保存 +ブラウザのツールバーにある、「更新」ボタンをクリック #ref(Lecture/JouhouC2010/2nd/head_body/reload.png,nolink,更新ボタン) +HTMLファイルが上書きした内容で読み込まれ、Webページが再表示される &br; CENTER: COLOR(red):''次の説明から、いくつかのタグを紹介します。'' COLOR(red):''実際に入力してみて、どのように表示されるか、よく確認してください。'' &br; &navi2(Lecture/JouhouC2010/2nd,next);進んでください。 ---- #navi2(Lecture/JouhouC2010/2nd,prev,toc,next) |