Homepage

HTML、CSS、およびJavaScriptを使用して簡単なホームページを作成します。

背景

インターネットは信じられないようなことを可能にしました。検索エンジンを使って、思いつくものをすべて調べたり、世界中の友人や家族と連絡を取ったり、ゲームをしたり、授業を受けたり、その他たくさんのことができます。しかし、私たちが訪れる可能性のあるページのほとんどは、3つのコア言語で構築されており、それぞれが少しずつ異なる目的を果たしていることがわかりました。

  1. HTML (HyperText Markup Language) は、Webサイトのコンテンツを記述するために使用します。
  2. CSS (Cascading Style Sheets) は、Webサイトのレイアウトを記述するために使用されます。
  3. JavaScriptは、Webサイトをインタラクティブで動的にするために使用されます。

自分自身や好きな趣味や課外活動など、興味のあることを簡単に紹介するホームページを作りましょう。

始め方

VS Codeを開きます。

ターミナルウィンドウ内をクリックすることから始めて、それからcdを実行します。
その後プロンプトは次のようになっていることがわかります。

$

ターミナルウィンドウの内側をクリックし、次のように入力します。

wget https://cdn.cs50.net/2021/fall/psets/8/homepage.zip

その後にEnterを押すと、homepage.zipというZIPがあなたのCodespaceにダウンロードされます。wgetと次のURLの間にあるスペースや、その他の文字を見落とさないように注意してください。

次に

unzip homepage.zip

を実行して、homepageというフォルダを作成します。
ZIPファイルは不要になったため、

rm homepage.zip

を実行し、プロンプトで “y “に続いてEnterで応答すると、ダウンロードしたZIPファイルが削除されます。

次に

cd homepage

の後にEnterを押して、そのディレクトリに移動する（つまり、開く）。これでプロンプトは以下のようになります。

homepage/ $

lsを実行すると、いくつかのファイルが表示されます。

index.html  styles.css

問題が発生した場合は、同じ手順をもう一度実行して、どこが間違っていたかを判断できるかどうかを確認してください。
次のコマンドを実行すると、すぐにサーバーを起動してサイトを表示できます。

$ http-server

次に、表示された最初のリンクをcommand-click（Macの場合）またはcontrol-click（PCの場合）してください。

http-server running on LINK

ここで、LINKはあなたのサーバーのアドレスです。

仕様

次の条件を満たすWebサイトをhomepageディレクトリに実装します。

  • 少なくとも4つの異なる.htmlページを含み、そのうちの少なくとも1つはindex.html (あなたのWebサイトのメインページ) であり、1つ以上のハイパーリンクをたどることによって、あなたのWebサイト上の任意のページから他の任意のページに到達することが可能である必要があります。
  • <html>、<head>、<body>、<title>以外に、少なくとも10個の異なるHTMLタグを使用します。<p>タグなど複数回利用されるいくつかのタグは、それで1つとして数えられます。
  • Bootstrapの1つ以上の機能をサイトに統合します。Bootstrapは人気のあるライブラリ (多くのCSSクラスなどを含む) で、サイトを美しくすることができます。開始するには、Bootstrapのマニュアルを参照してください。特に、興味のある Bootstrapのコンポーネントがいくつか見つかるかもしれません。サイトにBootstrapを追加するには、<head>に以下のコードを含めれば十分です。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
in your pages’ <head>, below which you can also include

また、独自のCSSを含めるには、以下を記述します。

<link href="styles.css" rel="stylesheet">
  • 独自に作成したstylesheetファイルstyles.cssが少なくとも1つあり、少なくとも5つの異なるCSSセレクタ (例:tag (example) 、class (.example) 、またはID (#example)) を使用し、font-sizeやmarginなど、合計で少なくとも5つの異なるCSSプロパティを使用します。
  • また、JavaScriptの1つ以上の機能をサイトに統合して、サイトをよりインタラクティブにします。たとえば、JavaScriptを使用して、アラートを追加したり、定期的な間隔で効果を与えたり、ボタン、ドロップダウン、またはフォームにインタラクティブな機能を追加したりできます。自由に創造的になってください！
  • モバイルデバイスだけでなく、ノートパソコンやデスクトップのブラウザでも、サイトが適切に表示されることを確認します。

テスト

作業中に自分のサイトがどのように見えるかを確認したい場合は、http-serverを実行することができます。http-serverによって表示される最初のリンクをcommandキーまたはcontrolキーを押しながらクリックすると、新しいタブであなたのウェブページが開かれます。そうすると、あなたのウェブページが新しいタブで表示され、そのタブを更新すると、あなたの最新の変更内容が表示されます。

また、 「Google Chrome」 で 「Developer Tools」 を開くと、モバイルデバイス上でページを訪問するようなシミュレーションが可能になることも覚えておきましょう。開発者ツールウィンドウの 「Elements」 の左側にあるスマートフォンの形をしたアイコンをクリックするか、 「Developer Tools」 タブを既に開いていれば、PCではCtrl+Shift+M、MacではCmd+Shift+Mと入力すればすみます。モバイルデバイス上で個別にサイトを訪問する必要はありません。

評価方法

この課題にはcheck50 がありません！その代わり、サイトの正確性は、上記の仕様の要件を満たしているかどうか、およびHTMLが整った形式で有効かどうかに基づいて評価されます。ページを確実に表示するには、Markup Validation Serviceを使用して、提供されたテキストボックスにHTMLを直接コピーして貼り付けます。送信する前に、このツールによって提示された警告やエラーを削除してください。

次の点も考慮してください。

  • サイトの美しさが、ユーザーにとって直感的でわかりやすいかどうか。
  • CSSが別のCSSファイルに書き出されているかどうか。
  • 親タグからスタイルプロパティを 「カスケード」 することで、繰り返しや冗長性を回避したかどうか。

style50はHTMLファイルをサポートしていないため、HTMLタグをきれいにインデントして位置合わせする必要があります。また、HTMLコメントは次の方法で作成できます。

<!-- Comment goes here -->

しかし、HTMLコードにコメントを付けることは、CやPythonなどでコードにコメントを付ける場合ほど必須とはされません。CSSファイルで、次のようにCSSにコメントを付けることもできます。

/* Comment goes here */

ヒント

この問題で導入された言語に関する総合的なガイドについては、次のチュートリアルを参照してください。

提出方法

ターミナルで、以下のコマンドを実行して提出してください。

submit50 cs50/problems/2022/x/homepage