このチュートリアルでは、基本的なHTMLドキュメントを紹介し、ブラウザでHTMLドキュメントのソースコードを表示する方法を説明します。
HTMLは、ドキュメントのコンテンツを表示および解釈する方法をブラウザに指示する指示でドキュメントをマークアップするために使用されます。 たとえば、HTMLは、どのテキストコンテンツを見出しとして解釈する必要があり、どのテキストコンテンツを段落として解釈する必要があるかをブラウザに指示できます。 HTMLは、画像を追加したり、テキストや画像へのリンクを割り当てたりするためにも使用されます。 これらの手順は、次のように記述されたHTMLタグを介して伝達されます。 <tagname>. すべてではありませんが、多くのタグは、開始タグと終了タグを使用して、変更に使用されるコンテンツをラップします。
これらのタグがどのように使用されているかを理解するために、HTMLコードのスニペットを調べてみましょう。 以下のHTMLコードは、HTMLタグを使用してテキストを構造化し、リンクや画像を追加する方法を示しています。 タグをすぐに理解しなくても心配しないでください。次のチュートリアルでタグについて学習します。
<h1>Sammy's Sample HTML</h1>
<p>This code is an example of how HTML is written.</p>
<p>It uses HTML tags to structure the text.</p>
<p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p>
<p>And it also uses HTML to add an image:</p>
<img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>
このHTMLコードは、ブラウザで次のようにレンダリングされます。
これで、HTMLサンプルコードがブラウザでどのようにレンダリングされるかを理解できたはずです。 次に、ブラウザツールを使用して任意のWebページのソースコードを表示する方法を学習します。
Webページのソースコードの表示
遭遇するほぼすべてのWebページは、HTMLを使用してHTMLページを構造化および表示します。 FirefoxやChromeなどのWebブラウザを使用して、任意のWebページのソースコードを検査できます。 Firefoxでは、トップメニューの[ツール]メニュー項目に移動し、次のように[Web開発者/ページソース]をクリックします。
Firefoxでは、キーボードショートカットを使用することもできます Command-U Webページのソースコードを表示します。
Chromeでは、プロセスは非常に似ています。 トップメニュー項目「表示」に移動し、「開発者/ソースの表示」をクリックします。 キーボードショートカットを使用することもできます Option-Command-U.
このチュートリアルシリーズで構築するデモWebサイトのソースコードを調べてみてください。 上記の例よりもはるかに多くのHTMLタグを含むページを受け取るはずです。 それが圧倒的であるように思われる場合でも心配しないでください。 このチュートリアルシリーズの終わりまでに、HTMLソースコードを解釈する方法と、HTMLを使用して独自のWebサイトを構築およびカスタマイズする方法について理解を深めることができます。
注：上記のように、FirefoxまたはChrome Webブラウザーのツールを使用して、任意のWebページのソースコードを検査できます。 お気に入りのWebサイトのいくつかのコードを調べて、Webドキュメントを構成する基本的なコードを理解してください。 これらのサイトのソースコードにはHTMLよりも多くの言語が含まれている可能性がありますが、最初にHTMLを学習すると、必要に応じて後でWebサイトを作成するための追加の言語とフレームワークを学習する準備ができます。
これで、HTMLドキュメントの形式について一般的に理解し、ブラウザツールを使用してHTMLソースコードを検査する方法を理解する必要があります。 HTMLがどのように機能するかをよりよく理解するために、その主要なコンポーネントを調べてみましょう。 次のチュートリアルでは、HTMLドキュメントの作成に使用されるビルディングブロックであるHTML要素について詳しく学習します。
