こんにちは、メモ蔵です！
ホームページを作成したいと思ったときに、まず始めに取り組むのが【HTML】です。
どんなホームページを作りたいのか、デザインを描くのもいいですが、そのデザインを実現使用するには、【HTML】と【CSS】の知識が不可欠です。
この記事では、ホームページを作るはじめの一歩として、HTMLの基本について紹介します。
HTMLファイルの準備
テキストエディタ
ホームページを作るには、まずHTMLファイルを作る必要があります。
Windows標準の【メモ帳】でも作成することはできますが、専用のエディタを選択することを推奨します。
- Visual Studio Code (VS Code)
-
Microsoftが開発したフリーでオープンソースのエディタ。豊富な拡張機能が利用可能で、HTML、CSS、JavaScriptなどのウェブ技術に対応しています。直感的なインターフェースと強力なコード補完機能があり、デバッグ機能も充実しています。
- Sublime Text
-
高速で軽量なテキストエディタで、多くのプログラミング言語とマークアップ言語をサポートしています。ユーザーインターフェースはシンプルで使いやすく、カスタマイズ性が高いです。有料ですが、試用版も長期にわたって無料で使用できます。
- Atom
-
GitHubによって開発された無料のオープンソースエディタ。カスタマイズが容易で、GitHubとの連携が非常に強いです。プラグインシステムが充実しており、さまざまな機能を追加することが可能です。
メモ蔵テキストエディタの使い方などについては、
またの機会に紹介できればと思います。
基本的なHTML構造
テキストエディタの準備ができたら、新しいHTMLファイルを作成しましょう。
ファイル名は【index.html】としてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あなたのウェブサイトのタイトル</title>
</head>
<body>
<!-- コンテンツはここに入れます -->
</body>
</html>HTMLを書く時の基本的な構造です。
テキストエディタによっては、自動入力してくれます。
- <!DOCTYPE html>
-
文書のタイプを宣言し、HTML5であることを示します。
- <html>
-
ページのルート要素。
- <head>
-
ドキュメントのメタ情報（タイトルや文字コードなど）を含む部分。
- <body>
-
Webページのコンテンツを含む部分。
メモ蔵実際に目にするホームページの内容は【body】の中に記入します。
ここでは、【文章を書き方】【画像の挿入】【リンクの作成】の手順を紹介します。
文章の書き方
それでは、Webサイトに文章を記入してみましょう。
<body>タグ内に以下のように記述します。
<h1>こんにちは、世界！</h1>
<p>これは私の最初のウェブページです。</p>- <h1>
-
見出しを示すタグです。
- <p>
-
段落を示すタグです。
画像を挿入
Webページに画像を挿入するには、<img>タグを使用します。
<img src="image.jpg" alt="説明テキスト">- src
-
画像のファイル名やURLを入力します。
- alt
-
画像が表示されない場合に表示されるテキスト。
リンクの作成
他のページや同じホームページ内の別のページや特定の場所への【リンク】を作成するには<a>タグを使用します。
<a href="https://www.example.com">訪れるサイト</a>- href
-
ここにリンク先のURLを入力します。
まとめ
HTMLの基礎的な部分について紹介しました。
次回以降でより内容を深めていけたらと思います。
本日はここまでです。
最後までお読みいただき、ありがとうございます。