序章

このチュートリアルでは、HTMLとCSSを使用してWebサイトを構築するために必要なフォルダーとファイルを設定します。 また、準備します index.html 先のチュートリアルでHTMLコンテンツを受信できるようにファイルします。

前提条件

このチュートリアルシリーズをフォローしている場合は、引き続き使用できます。 css-practice プロジェクトディレクトリ、 index.html ファイル、 images フォルダ、 css フォルダ、および styles.css シリーズの前半で作成したファイル。 このチュートリアルシリーズに従わず、これらのフォルダとファイルを設定する手順が必要な場合は、このシリーズの以前のチュートリアルCSSおよびHTML練習プロジェクトの設定方法を参照してください。

注：フォルダまたはファイルに独自の名前を作成する場合は、文字スペース、特殊文字（！、＃、％など）、大文字は避けてください。後で問題を引き起こす可能性があります。 また、このチュートリアルシリーズの残りの部分のいくつかの手順でファイルパスを変更して、ファイルの名前と一致するようにする必要があることにも注意してください。

名前の付いたプロジェクトフォルダが必要です css-practice これには、このチュートリアルシリーズでCSSを探索するために必要な次のフォルダーとファイルが含まれています。

  • 名前の付いたフォルダ css ファイルが含まれています styles.css
  • 名前の付いた空のフォルダ images
  • 名前の付いたファイル index.html

このチュートリアルの最初のステップでは、 index.html 先のチュートリアルのコンテンツを受信できるようにファイルします。

あなたを準備する方法 index.html HTMLコンテンツのファイル

あなたを準備するには index.html あなたのウェブサイトのホームページとして機能するファイル、私たちはHTMLのいくつかの重要な行を追加する必要があります。 これらのHTML行はブラウザの指示として機能し、Webページ自体には表示されません。 あなたの index.html ファイルが空で（前のチュートリアルのコンテンツがある場合）、次のコードスニペットをドキュメントに追加します。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <title>Sammy the Shark</title>
   <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
  </body>
</html>

強調表示されたサイトのタイトルを、自分で選択したタイトルに変更してください。 次に、を保存します index.html ファイル。 続行する前に、追加したコードを簡単に確認して、その目的を理解しましょう。

  • The <!DOCTYPE html> 宣言は、このドキュメントで使用されているHTMLのタイプをブラウザに通知します。 HTML標準には複数のバージョンがあり、ブラウザはどちらを使用するかを知っている必要があるため、この値を宣言することが重要です。 この宣言では、 html HTMLの現在のWeb標準であるHTML5を指定します。
  • 開閉 <html> タグは、これら2つのタグの間に挿入されたすべてのコンテンツをHTMLとして解釈する必要があることをブラウザに通知します。 このタグの中に、 lang Webページの言語を指定する属性。 この例では、言語はを使用して英語に設定されています en 言語タグ。 言語タグの完全なリストについては、IANA言語サブタグレジストリにアクセスしてください。
  • 開閉 <head> タグは、ページコンテンツ自体ではなく、通常はページに関する情報を含むセクションをHTMLドキュメントに作成します。 ブラウザは情報を表示しません <head> セクション。
  • The <meta charset="utf-8"> tagは、ドキュメントの文字セットがUTF-8であることを指定します。これは、さまざまな書記言語の文字の大部分をサポートするUnicode形式です。
  • The <title> タグはブラウザにウェブページの名前を伝えます。 このタイトルは、ブラウザタブに表示され、サイトが検索結果に表示されているが、Webページ自体には表示されていない場合に表示されます。 サイトをパーソナライズする場合は、「SammytheShark」を自分の名前または選択したタイトルに置き換えてください。
  • The <link rel="stylesheet" href="css/styles.css"> スタイルルールを含むスタイルシートの場所をブラウザに指示します。 このシリーズの前半の手順CSSおよびHTML練習プロジェクトの設定方法に従った場合、スタイルシートはこのファイルパスに配置されている必要があります。
  • 開閉 <body> タグには、Webページのメインコンテンツが含まれます。 先のチュートリアルでは、これらのタグの間にHTMLコンテンツを追加します。

結論

これで、HTMLとCSSを使用してWebサイトを作成するために必要なすべてのフォルダーとファイルが作成されました。 また、 index.html あなたのウェブサイトのホームページとして機能するために必要なHTMLコンテンツで準備されたファイル。 次のチュートリアルでは、デモンストレーションサイトがどのように構築され、それを再作成するために実行する手順について説明します。