Ｗｅｂページの作成 つぎの一歩 （ index.html ）
表紙（目次）となる index.html を作ります
左のように最初に表題を表示し、つぎに見出しが続くようにします。
保存場所はｗドライブの
「webxxxxx」フォルダを指定します（先に作った link.html と同じフォルダ）
この index.html が、これから作成するＷｅｂサイトのトップページとなります
HeTeMuLu Creator はタグを挿入するのに便利な機能を持っていますから、ここでは HeTeMuLu Creator を用いて説明します。説明中、赤い文字は選択するか入力する部分を表しています。
《手順》
5 までは link.html と同じ手順で、ファイル名だけが違います。
- HeTeMuLu Creator を起動する
すでに Ｗドライブにコピーしているはずの HM-creator フォルダー内の hetecre.exe をダブルクリック
→ 編集画面が開く（新規作成が出来る状態になっている）
- ページタブ をクリック
→ コマンドバーにページを設定するためのボタン（アイコン）が現れる
- 「HTMLの骨組みの作成」（左端の黄色いボタン）をクリック → 「HTMLの骨組み」ダイアログが現れる
- 「タイトル」欄に 最初の一歩 と入れる
（注） 文字や背景の色もこの場面で設定することが出来ますが、とりあえずタイトルだけを設定しておきます
- ＯＫボタンをクリック → ヘッダーの部分が作られ、カーソルは12行目付近に来ているはず
（注） カーソルが <body bgcolor="・・・> と </body> の間にあることを確認しなさい
- （とりあえず文字を入力する）
表題（タイトル）と入力し、カスタムタブのツールバーにある 改行ボタン（Enterマーク）をクリック
→ 文字の後ろに<br> がつく
（注） Shiftキーを押しながらEnterキーを押しても良い
- 見出し１ 見出し２ リンク を入力し、それぞれ改行ボタンをクリックして <br> を付ける
- （行間を空ける・・・改行を挿入する）
前の作業で付けた <br> の後ろにもう一つずつ <br> を付ける
- （中央に配置する）
タグの部分を含めて、入力した部分を選択
-
レイアウトタブで表示されるコマンドボタンの中から中央揃えボタンをクリック
→ 先に選択した文字列の前に <div align="center"> が、最後に </div> が付け加えられる
- （表題部分の文字を大きくする）
「表題（タイトル）」の文字を選択し、反転させる
- カスタムタグで表示されるコマンドボタンの中からＦボタンをクリック
→ フォントの設定ダイアログボックスが開く
- 文字サイズの設定の項で、絶対指定にマークが付いているので +(P)を選び、数値を２に変更
フォントの色のチェックをはずす（色の変更はしない）
- （「リンク集」の部分をクリックすると、先に作った「link.html」を開くようにする）
「リンク集」の文字を選択し、反転させる
→ ハイパーリンクボタン（鎖のマーク）をクリック
→ リンクの設定ダイアログボックスが開く
→ リンク先のテキストボックスの右にある［…］ボタンをクリック
→ ファイルを開くダイアログボックスが開く
→ ファイルの場所にＷドライブのwebxxxxxx フォルダーを指定。
その中にある link.html ファイルを指定して［開くボタン］をクリック
- リンクの文字の前に <a href="link.html">、後に </a> が挿入される。
- （名前をつけて保存）
［ファイル］→［名前をつけて保存］→ 保存のダイアロボックスグが開く
→ 「名前をつけて保存」ダイアログボックスで「保存する場所」に ｗドライブの「webxxxxx」フォルダーを指定
→ ファイル名を index.html として「保存ボタン」をクリック
---- コーディング終わり ----
上記の作業の結果、つぎのようになります
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>最初の一歩</title>
</head>
<body>
<div align="center">表題（タイトル）<br><br>
見出し１<br><br>
見出し２<br><br>
<a href="link.html">リンク</a><br><br>
</div>
</body>
</html>
|
戻る