Web技術実習 | |
戻る〔3.Webページの作成T(メモ帳を使って)〕 次へ〔5.Webページの公開と閲覧〕 目次 |
Webページ作成用のアプリケーション・ソフトウェアとして「ホームページ・ビルダー(IBM社)」を使用する。テキストでは、このソフトウェアを「HPBソフト」と表記する。
まず、デスクトップにある「HPBソフト」のアイコンをダブルクリックして起動する。表示されたダイアログ・ボックスは、[キャンセル]をクリックして閉じる。
・新しくWebページを準備
操作1 新しいページを作成する。メニューバーから次のように選択する。
[ファイル(F)] → [標準モードで新規作成(B)]
・タイトルバーに表示する文字を設定
操作2 メニューバーから次のように選択して、属性のダイアログ・ボックスを表示する。
[編集(E)] → [ページの属性(I)...]
結果 ⇒ 属性 のダイアログ・ボックスが表示される。
操作3 表示された属性のダイアログ・ボックスの[ページ情報]タブ、[ページタイトル(P):]の入力欄に「はじめてのWebページ2」と入力して、[OK]ボタンをクリックする。
・文字データの入力
操作4 次のようにデータ(文字)を入力し、ファイル名(hajime2.htm)で保存する。
入力したデータ(3行)がピンク色の枠で囲まれる。この枠が1つのタグにはさまれた部分を表している。
ウィンドウ右上に <P> と表示されており、この枠が段落を表す<P>タグと</P>タグにはさまれた部分であることを表している。
操作5 Webブラウザで、ファイルhajime2.htmを閲覧する。
データにHTMLのタグを入力していないが、Webブラウザには正しく表示される。
次に、HPBソフトで、どのようにタグが入っているのか確認する。
操作6 [HTMLソース]タブをクリックして、タグが入っていることを確認する。
タグ(青色で表示)は自動的に挿入されている。
このウィンドウで編集することもできる。
・見出し部の設定
操作7 学校名を大きな文字に変更する。[ページ編集]タブをクリックして、学校名の行末で[Shift]+[Enter]を押す。
結果 ⇒ 学校名とほかの2行が別の段落になる。
「総合学科」の上の改行マークは削除しておく。
操作8 学校名の段落にカーソルを移動して、メニューバーから次のように選択する。
[編集(E)] → [段落(P)] → [見出し1(1)]
上書き保存する。
操作9 Webブラウザの更新ボタンをクリックして、再表示させる。
・文字の色を設定
操作10 学科名をドラッグで範囲指定して、メニューバーから次のように選択する。
[編集(E)] → [フォント(C)]
ダイアログで色指定から赤色を選択する。上書き保存する。
操作11 Webブラウザの更新ボタンをクリックして、再表示させる。
戻る〔3.Webページの作成T(メモ帳を使って)〕 次へ〔5.Webページの公開と閲覧〕 目次 | ||
Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda |