HTMLを実際に調べて、HTML Webサイトの構築を開始するには、テキストエディターを使用して新しいプロジェクトを設定する必要があります。 このチュートリアルシリーズでは、Mac、Windows、またはLinuxで使用できる無料のコードエディターである Visual Studio Code を使用しますが、任意のコードエディターを使用できます。

好みのテキストエディタを開いたら、新しいプロジェクトフォルダを開いて名前を付けます html-practice. このフォルダーを使用して、このチュートリアルシリーズの過程で作成するすべてのファイルとフォルダーを保存します。

Visual Studio Codeで新しいプロジェクトフォルダーを作成するには、トップメニューの[ファイル]メニュー項目に移動し、[ワークスペースにフォルダーを追加]を選択します。 新しいウィンドウで、「新しいフォルダ」ボタンをクリックして、という名前の新しいフォルダを作成します html-practice 以下のgifに示されているように:

次に、という新しいファイルを作成します index.htmlhtml-practice フォルダ。 このファイルをチュートリアルシリーズで使用して、HTMLを試してみます。 Visual Studio Codeを使用している場合は、を使用して新しいファイルを作成できます。 Right Click(Windowsの場合)または CTRL + Left Click (Macの場合) html-practice フォルダ、「新しいファイル」を選択し、ファイルを作成します index.html 以下のgifに示されているように:

これで、HTMLを探索するためのプロジェクトフォルダーとファイルができました。 先のチュートリアルでこのファイルに戻ります。

CSSとHTMLのデバッグとトラブルシューティング

HTMLの演習を始める前に、HTMLを作成するときは精度が重要であることに注意してください。 余分なスペースやタイプミスのある文字でも、コードが期待どおりに機能しなくなる可能性があります。

HTMLコードが意図したとおりにブラウザでレンダリングされない場合は、コードが正確に記述されていることを確認してください。 エラーのトラブルシューティングを行うには、余分なスペースや欠落しているスペース、タグの欠落またはスペルミス、句読点や文字の欠落または誤りを確認してください。 コードを変更するたびに、結果を確認するためにブラウザに再ロードする前に、必ずファイルを保存してください。

自動HTMLサポート機能に関するクイックノート

このシリーズで使用しているVisualStudioコードエディターなどの一部のコードエディターは、HTMLコードの記述を自動的にサポートします。 Visual Studio Codeの場合、サポートにはスマートな提案とオートコンプリートが含まれます。 このサポートは多くの場合便利ですが、これらのサポート機能の操作に慣れていない場合は、エラーが発生する余分なコードが生成される可能性があることに注意してください。 これらの機能が気になる場合は、コードエディタの設定でオフにすることができます。

これで、CSS言語がどのように機能するかを学び始める準備が整いました。 次のチュートリアルでは、CSSルールを使用してWebページ上のHTMLコンテンツのスタイルとレイアウトを制御する方法の調査を開始します。