このチュートリアルシリーズでは、ウェブブラウザで文書を表示するための標準的なマークアップ言語であるHTMLを使用して、ウェブサイトを作成し、さらにカスタマイズする方法を説明します。 コーディングの経験は必要ありませんが、デモサイトを再現したい方は、シリーズの最初から始めることをお勧めします。
このシリーズの終わりには、クラウドにデプロイする準備の整ったウェブサイトと、HTMLの基本的な知識を身につけているはずです。 HTMLの書き方を知ることは、CSSやJavaScriptなどのフロントエンドのWeb開発スキルをさらに学ぶための強力な基盤となります。
このチュートリアルでは、基本的な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ページは、HTMLページの構造と表示にHTMLを使用しています。 FirefoxやChromeなどのWebブラウザを使って、Webページのソースコードを確認することができます。 Firefoxの場合、トップメニューの「ツール」から「Web Developer/Page Source」をクリックすると、以下のように表示されます。
Firefoxでは、キーボードショートカットのCommand-Uを使ってウェブページのソースコードを表示することもできます。
Chromeでも、手順は非常に似ています。 上部メニューの「表示」に移動し、”Developer/View Source “をクリックします。 キーボードショートカットのOption-Command-Uを使うこともできます。
このチュートリアルシリーズで構築するデモサイトのソースコードを検査してみてください。 上記の例よりも多くのHTMLタグが含まれたページが表示されるはずです。 圧倒的に多いと感じても、心配する必要はありません。 このチュートリアルシリーズを終える頃には、HTMLのソースコードを解釈する方法と、HTMLを使って自分のウェブサイトを構築したりカスタマイズしたりする方法について理解が深まっているはずです。
注：前述のように、FirefoxやChromeのWebブラウザのツールを使って、あらゆるWebページのソースコードを調べることができます。 Webドキュメントを構成する基本的なコードを理解するために、お気に入りのWebサイトのコードをいくつか調べてみてください。 これらのサイトのソースコードには、HTML以外の言語も含まれている可能性がありますが、まずHTMLを学ぶことで、後にWebサイトを作成するための他の言語やフレームワークを学ぶための準備ができます。