 Lesson :: アドバンストエディタ
このページで使われている用語の解説 :: |
Lesson :: アドバンストエディタを使ってみよう 
このレッスンでは、
アドバンストエディタで新しいページ(自己紹介ページ)を作成し、既にあるページからそのページへリンクをはる
という作業の流れを解説していきます。 Lesson :: 1 :: 新しいページを作成する
アドバンスドエディタってどこにあるの？まず、ファイルマネージャにログインしましょう。 新しいページを作成する
ファイルマネージャにログインすると、下図のような画面になります。
今回は、新しいページを作成するのが目的ですから、上図(1)の「新規」ボタンをクリックします。
ここで大事なのは、ファイル名の欄に新しく作るページのファイル名を記入することです。
ファイル名の欄には、拡張子まで含めたファイル名を記入してください。
なお、既に存在するファイルと同じ名前を記入したり、拡張子の無いファイル名を記入したまま「保存」ボタンを押してしまったりしても、警告が表示されて保存されないので安心です。 新しいページの内容を作成する
次に、自己紹介ページの内容を作成しましょう。 最初から記入されているHTMLタグをいったん全て消してから、以下のHTMLコードをコピーしてアドバンストエディタのテキストエリアに貼り付けてください。
今回は作業の流れを覚えるのが目的なので、HTMLタグの意味が解らなくてもかまいません。
あとは「保存」ボタンを押すだけですが、「プレビュー」ボタンでページの見た目を確認することも出来ます。
「保存」ボタンを押すと自動的にファイルマネージャに戻ります。
これで、新しいページを作る作業は終了です。 Lesson :: 2 :: 既にあるページから自己紹介ページにリンクをはる
既にあるページの編集
今度は、既にあるページから、先ほど作成した自己紹介ページに移動できるようにリンクをはってみましょう。 既にあるページに、自己紹介ページへのリンクを作成するページの編集画面に切り替わったら、まず<body>タグと</body>タグを探しましょう。
HTMLタグのルールでは、ページに表示するものは基本的に<body>タグから</body>タグの間に記述するという決まりになっています。
この<body>タグから</body>タグの間に、自己紹介ページへのリンクを表示するためのHTMLタグを記述します。 リンクのHTMLタグ
リンクを作成するには、
HTMLタグのルールでは、<a>や<div>といったタグ自体を"タグ"と呼び、<a href="index.html">文字</a>や<div>文字</div>といった開始タグから終了タグまで記述したタグのひとかたまりを"要素"と呼びます。
今回は、このページから、先ほど作成したページ(profile.html)にリンクをはりたいので、HTMLコードは以下のようになります。
<body>タグから</body>タグの間の好きなところに上記のHTMLコードを貼り付けたら、「保存」ボタンをクリックしましょう。
これで、自己紹介ページにリンクをはる作業は終了です。 Lesson :: 3 :: 動作確認をする
実際のページで動作を確認する
最後に、作成したリンクから実際に移動できるかを確認していきましょう。
ページ編集中に「プレビュー」でもページの動作確認が出来ますが、「プレビュー」の機能はあくまで「ページの見た目の確認」用の機能です。
プレビューではリンクが正しく機能しなかったり表示に不具合が起きたりする場合があるので、最終的な動作確認は実際のページを表示して行うと間違いがありません。
index.htmlを表示させると、先ほど作った自己紹介ページへのリンクが追加されていると思います。
自己紹介ページにちゃんと移動できたでしょうか？ アドバンストエディタとは？
アドバンストエディタはHTMLタグの知識が必要
アドバンストエディタは、HTMLタグを自分で書き込むことでページを作成するテキスト型のオンラインエディタです。
HTMLタグの知識が無くても、いやゆるタグ屋さんなどで配布されているHTMLタグのサンプルをコピーして貼り付ける事でサイト作成はできますが、HTMLタグの知識が無いうちにタグ屋さんのお世話になることはあまりおすすめしません。
HTMLタグの基本を抑えてからタグ屋さんのお世話になった方が、結果的にHTMLタグの習得の早道になります。 コラム ::
HTMLタグは、簡単な英単語さえ解れば比較的簡単に覚えることが出来ます。  = 類似  = 関連  = 参照  = 推薦  = 例
Total view ::
|
|
Copyright © 2004 halo All rights reserved.
| |
