はじめてのWebページ

概要

HTMLファイルを作成してブラウザで表示させてみます。

index.htmlというHTMLファイルを作成する
profile.htmlを作成する
index.htmlからprofile.htmlへリンクを作成する
profile.htmlからindex.htmlへリンクを作成する

index.htmlを作る

まずはindex.htmlを作成しましょう。 index.htmlはWebサイト(Webページの集合)のトップページとなるHTMLファイルです。

では早速テキストエディタを開いてください。テキストエディタに次の内容を入力してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>はじめてのWebページです！わーい</p>
  </body>
</html>

これはWebページを構成するための必要最低限のHTMLです。入力できたら、勉強会用のフォルダにindex.htmlという名前で保存します。

Atomの場合はFileメニューの「Save as」をクリックしてください。

保存ダイアログが表示されるので、~/lestudy/htmlにindex.htmlという名前で保存してください。

Windowsならライブラリのドキュメントにlestudyフォルダがあります。

Macの場合は下の図の通り▼ボタンをクリックしてください。

保存ダイアログが広がったら、キーボードで「Command + Shift + H」キーを押してください。同時押しです。そうするとホームディレクトリが表示されるのでlestudyフォルダが見つかります。

lestudy/htmlフォルダを選択したら「Save as」欄にindex.htmlと入力して【Save】ボタンをクリックしてください。

これでHTMLファイルが保存できました。ブラウザで表示してみましょう。

Finderでlestudy/htmlフォルダをみると、中にindex.htmlができています。

これをダブルクリックしてください。うまくいけば、次のようにWebページが表示されるはずです！

profile.htmlを作る

次はprofile.htmlを作成しましょう。 AtomのFileメニューから「New File」をクリックして、新しくファイルを作成します。

次のHTMLを適当に編集してindex.htmlと同じように勉強会用フォルダ(lestudy/html)にprofile.htmlとして保存してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自己紹介</title>
  </head>
  <body>
    <h1>自己紹介</h1>

    <section>
      <h2>なまえ</h2>
      <p>なまえはほげほげです。</p>
    </section>

    <section>
      <h2>しゅみ</h2>
      <p>しゅみはもげもげです。</p>
    </section>

    <section>
      <h2>とくぎ</h2>
      <p>とくぎはふがふがです。</p>
    </section>
  </body>
</html>

保存できたらindex.htmlと同じようにprofile.htmlをダブルクリックして開いてみてください。

リンクさせる

最後にindex.htmlとprofile.htmlを互いにリンクさせてみましょう。まずはindex.htmlからprofile.htmlへのリンクを作成します。

先ほど作成したindex.htmlを開いてください。 Atomだと左のツリーメニューや上部のタブからindex.htmlをクリックすればOKです。

タブなどでindex.htmlが表示されていない場合はFileメニューの「Open」からindex.htmlを開いてください。

開いたindex.htmlを次のように編集してください。 <section>〜</section>が追加されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>はじめてのWebページです！わーい</p>

    <section>
      <h2>メニュー</h2>
      <ul>
        <li><a href="./profile.html">自己紹介</a></li>
      </ul>
    </section>
  </body>
</html>

編集が終わったら保存してください。既に作成されているファイルを編集した場合は、ファイルメニューの「Save as」ではなく「Save」をクリックします。

保存できたらもう一度ブラウザでindex.htmlを開いてください。リンクが追加されていると思います。このリンクをクリックしてprofile.htmlが表示されることを確認してください。これがWebページを結びつけるハイパーリンクという機能です。

次にprofile.htmlからindex.htmlに戻れるようにリンクを作成します。 profile.htmlをエディタで開いて次のように編集してください。 <footer>〜</footer>が追加されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自己紹介</title>
  </head>
  <body>
    <h1>自己紹介</h1>

    <section>
      <h2>なまえ</h2>
      <p>なまえはほげほげです。</p>
    </section>

    <section>
      <h2>しゅみ</h2>
      <p>しゅみはもげもげです。</p>
    </section>

    <section>
      <h2>とくぎ</h2>
      <p>とくぎはふがふがです。</p>
    </section>

    <footer>
      <p><a href="./index.html">戻る</a></p>
    </footer>
  </body>
</html>

同じようにブラウザで表示させてみてください。 index.htmlとprofile.htmlを行き来できるようになっていれば成功です！

WebサイトはこのようにWebページを互いにリンクさせて構築していきます。