Lecture/JouhouC2010/2nd/head_body の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/JouhouC2010/2nd/head_body へ行く。
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文書の構造は、次の３つの要素によって、
内容を組み立てられています。
-''html要素'': HTML文書全体（<html>...</html>）
-''head要素'': HTMLファイルの基本情報（<head>...</head>）
-''body要素'': Webページとして表示される内容（<body>...</body>）

head要素は、HTML文書に関する情報や設定を記述する場所です。
HTML文書のタイトルもその中に記述します。
-''title要素'': Webページのタイトル
--title要素は、head要素のなかで１つだけ記述できる
--設定したタイトルは、ブラウザのタイトルバーに表示される

:例|
#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)
KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/2nd/head_body の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
