多くの人々はあなた自身のウェブサイトを作成することはこれは、真剣な準備と複雑なツールの使用を必要とするトリッキーなビジネスです。実際、最低限の知識と最も基本的なWindowsプログラムであるメモ帳で十分に開始できます。メモ帳でウェブサイトを作成する方法の簡単な手順に従うことで、数時間で最初の本格的なページを作成できます。
経験豊富なプロのWeb開発者ウェブサイトビルダーが仕事でメモ帳を使用することはめったにありませんが、このプログラムが優れた選択肢であるユーザーには2つのカテゴリがあります。
多くの専門家がレイアウトに精通し、HTML、メモ帳を使用してWebサイトを作成する方法を理解します。これにより、得られたすべての知識を確実かつ迅速に統合することができました。メモ帳は、コードやマークアップを操作するためのものではありません。最新のプログラムで利用できる組み込みのヒント、オートコンプリート、その他のチップはありません。つまり、開発者は自分自身と自分のメモリだけに頼ることができます。
メモ帳のテキストエディタは最も控えめです最小限のインターフェース。これは、プログラムの複雑な機能を理解するのに長い間必要とされないことを意味します。これは、あまり使用しないツールの学習に時間を費やす予定がないユーザーにとって非常に魅力的です。
メモ帳でHTMLWebサイトを作成する方法の詳細な手順は、プログラムを開くことから始まります。メモ帳を見つける最も簡単な方法は、[アクセサリ]セクションのWindowsの[スタート]メニューを使用することです。
新しく開いたファイルはで保存する必要があります拡張子html。この拡張機能はブラウザにWebページであることを通知するため、これは重要です。 「ファイル」メニューの「名前を付けて保存」コマンドは、新しいウィンドウを開きます。ここで、ドキュメントにindex.htmlという名前を付け、utf-8エンコーディングと保存するフォルダーを選択する必要があります。
これで、このファイルをダブルクリックするか、コンテキストメニューを右クリックして[メモ帳で開く]を選択することにより、いつでもこのファイルを開くことができます。
このページはすでに作成されており、ブラウザでどのように表示されるかを確認できます。 Webブラウザでドキュメントを開くにはいくつかの方法があります。
ファイル：/// C：/Users/UserName/Desktop/my-site/index.htmlこれで、ページは予想通り未使用の空白になりました。次は情報を入力します。
ワールドワイドウェブの広大なすべてのウェブページ特別な言語のHTML（ハイパーテキストマークアップ言語）で書かれています。メモ帳やその他のエディターでWebサイトを作成する方法を理解するには、その基本を理解することが非常に重要です。開発者はHTMLを使用して、ページがどのように表示されるかをブラウザに説明します。これが、ファイルの正しい拡張子を設定することが重要である理由です。
言語はタグに基づいています-山括弧で囲まれた文字の組み合わせ。
タグの例：
<h1>第1レベルの見出し</ h1> <i>斜体のテキスト</ i>開始タグと終了タグの間のテキストは、ブラウザによって特別な方法で処理されます。
ページに直接表示されるデータに加えて、ページを作成する際には、ブラウザ自体を対象とした特別なサービス情報を指定する必要があります。
HTMLドキュメントの正しいフォーマットで作業を開始する必要があります。ページの基本構造は次のようになります。
<！DOCTYPE html> <html> <頭> <meta charset = "utf-8"> <title>世界で最高のサイト</ title> </ head> <本体> </ body> </ html>各要素の意味：
DOCTYPE -ブラウザの技術情報。コードの解釈方法を示します。html -ページルートタグ。頭 -サイト訪問者には表示されないサービス情報のセクション。メタ -サービスタグ。charset属性はテキストエンコーディングを定義します。題名 -ブラウザタブに表示されるページの名前。体 -ページに直接表示されるドキュメントの本文。コードを保存し、ブラウザでファイルを再度開いた（または再読み込みした）後、最初の変更を確認できます。サイトの名前がタブに表示されます。
メモ帳を使用してHTMLでサイトを作成する方法を理解する前に、このサイトがどのように表示されるかを明確に想像する必要があります。たとえば、あるJohnDoeの個人ブログを見てみましょう。
このページの構造の主な要素は次のとおりです。
このページのHTMLコードは次のようになります。
<！DOCTYPE html> <html> <頭> <meta charset = "utf-8"> <title>世界で最高のサイト</ title> </ head> <本体> <div class = "wrapper"> <ヘッダー> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </ h1> </ header> <nav> <ul> <li> <ahref = "bio.html">自伝</a> </ li> <li> <a href="life.html">私の人生、私の業績</a> </ li> <li> <ahref = "gallery.html">フォトアルバム</a> </ li> <li> <ahref = "contacts.html">私に連絡してください</a> </ li> <li> <ahref = "thanks.html">ありがとう</a> </ li> </ ul> </ nav> <メイン> <記事> <h2>スーパーコンサート</ h2> <div> チケットのための1キロの長さの列の価値がありました このショーを楽しむために！ </ div> <ahref = "posts / concert.html">もっと見る</a> </ article> <記事> <h2>アイスクリームが好きな理由</ h2> <div> 深い理由を共有したい 私のアイスクリームへの愛... </ div> <ahref = "posts / ice-cream.html">もっと見る</a> </ article> <記事> <h2>あるべきかどうか？</ h2> <div> 生と死の問題。 </ div> <a href="posts/to-be-or-not-to-be.html"> 詳細を見る </a> </ article> </ main> <フッター> John Doe（c）2018 </フッター> </ div> </ body> </ html>HTML5標準のセマンティックタグは、Webページを説明するために使用されます。 ヘッダ, メイン, ナビゲーション, フッター, 論文.
コードの説明：
画像 ファイルとフラッシュする index.html..。属性を使用してそのためのコードで 幅 幅は厳密に100ピクセルに設定されています。h1、その重要性を強調しています。h2.ラッパー..。クラス属性は通常、要素のスタイル設定に使用されます。これで、ページは次のようになります。
このビューは、計画されたものとあまり似ていません。状況を修正するには、装飾を追加する必要があります。
これを行うには、隣に別のファイルを作成する必要があります index.html 名前を付けます style.css..。必要なすべてのスタイルが含まれます。
現時点では、プロジェクトの構造は次のようになっています。
メモ帳でWebサイトを作成する方法を理解し続けると、スタイルシートを接続するという新しいレベルに進みます。
ブラウザがデザインの取得元を理解するには、cssファイルのアドレスを指定する必要があります。これはサービス情報です。セクションに配置する必要があります 頭.
<頭> <meta charset = "utf-8"> <title>世界で最高のサイト</ title> <link rel = "stylesheet" href = "style.css"> </ head>これで、ファイルに記述されるすべてのものが style.css、ブラウザがページに適用されます。たとえば、背景色を変更してみましょう。
体 { 背景：＃89745d; }スタイルシートの内容全体は次のようになります。
体 { パディング：0; フォントファミリー：サンセリフ; フォントサイズ：16px; 背景：＃89745d; } .wrapper { パディング：20px; マージン左：自動; マージン右：自動; 幅：960px; } ヘッダーa { テキスト装飾：なし; } ヘッダーimg { 垂直整列：中央; マージン右：20px; } ヘッダーh1 { 表示：インラインブロック; 垂直整列：中央; 色：＃f8d9b7; } nav { パディングトップ：20px; パディング-下：20px; } nav ul { マージン：0; text-align：center; } nav ul li { 表示：インラインブロック; リストスタイル：なし; パディング：0px 15px; } nav ul li a { 色：＃f8d9b7; テキスト装飾：なし; } nav ul li a：ホバー{ テキスト装飾：下線; } 論文 { パディング：20px; マージン：20px 0; 背景：＃f8d9b7; ボックスシャドウ：0 0 15px＃f8d9b7; } 記事h2 { マージントップ：0px; マージンボトム：15px; 色：＃d57106; } 記事a { フォントサイズ：14px; フォントスタイル：斜体; 色：＃d57106; } フッター{ パディング：20px; text-align：right; 色：＃f8d9b7; フォントサイズ：14px; font-weight：太字; }スタイルの説明：
ブラウザでドキュメントを更新すると、最終的な表現を確認できます。最初のWebページが正常に作成されました。
ただし、ブログはメインだけで構成することはできません記事のリストがあるページ。どういうわけか全文で別の投稿を表示する必要があり、さらにナビゲーションメニューに表示されるページはすでに計画されています。
インターネットの最も重要な概念は、リンクを使用して個々のドキュメントをリンクすることです。メモ帳でハイパーリンクされたWebサイトを作成するにはどうすればよいですか？
実際、必要なことはすべてすでに行われています。メニュー項目とポインタ「ウォッチ」は、特別なタグでより詳細にラップされています a、ハイパーリンクの形成を担当します。必要なアドレスは属性に示されています href..。ページ自体を作成し、ファイルの横に配置するだけです。 index.html.
フォトアルバムページのサンプルコード（gallery.html）：
<！DOCTYPE html> <html> <頭> <meta charset = "utf-8"> <title>世界で最高のサイト</ title> <link rel = "stylesheet" href = "style.css"> </ head> <本体> <div class = "wrapper"> <ヘッダー> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </ h1> </ header> <nav> <ul> <li> <ahref = "bio.html">自伝</a> </ li> <li> <a href="life.html">私の人生、私の業績</a> </ li> <li> <ahref = "gallery.html">フォトアルバム</a> </ li> <li> <ahref = "contacts.html">私に連絡してください</a> </ li> <li> <ahref = "thanks.html">ありがとう</a> </ li> </ ul> </ nav> <メイン> <div class = "gallery"> <図> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption>森の中</ figcaption> </ figure> <図> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption>冬に</ figcaption> </ figure> <図> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption>ビーチ</ figcaption> </ figure> <図> <img src = "/ images / images / work.jpg" alt = ""> <figcaption>職場で</ figcaption> </ figure> <図> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption>新年</ figcaption> </ figure> <図> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption>自画像</ figcaption> </ figure> </ div> </ main> <フッター> John Doe（c）2018 </フッター> </ div> </ body> </ html>メインの構造、ヘッダー、ナビゲーション、フッターはメインページを完全に複製し、セクションのみが変更されます メイン複数のブロックを持つギャラリーが含まれるようになりました 図..。各ブロックの中には、写真とキャプションがあります。
同じファイルがページのデザインに使用されます style.cssセクション内で接続 頭..。ギャラリーにいくつかのルールを追加する必要があります。
.gallery { フォントサイズ：0; } 図{ 表示：インラインブロック; 垂直整列：下; 幅：33.3333％; ボックスサイズ：border-box; パディング：10px 15px; マージン：0px; フォントサイズ：14px; 色：＃f8d9b7; text-align：center; } 図img { 幅：100％; マージンボトム：10px; }ここでは、ブロックを3つ続けて配置し、その幅を親コンテナーの幅のちょうど3分の1に設定できるcss手法を使用しています。
ギャラリーの最終的なビューを以下に示します。
ハイパーリンクは、サイトのページ間の移動を提供します。メニューから「フォトアルバム」に移動し、ロゴをクリックすると、メインページに戻ることができます。
そこで、メモ帳でWebサイトを作成する方法を段階的に説明しました。しかし、今では誰も彼を見ていません！しかし、個人のブログはあなたの人生を全世界と共有するために作られています。
状況を改善するには、配置する必要がありますホスティングで作成されたすべてのファイルと、特別なサービスを使用してサイトのドメインを選択します。あらゆる好みや財布にサービスを提供するホスティングプロバイダーは数多くあります。
ホスティング業者との契約を締結すると、作成したすべてのファイルを転送できるコントロールパネルにアクセスできるようになります。現在、プロジェクトの構成は以下のとおりです。
ここでは、残りのサイトページにもHTMLファイルを追加する必要があります。
これで、でhtmlサイトを作成する方法がわかりました。メモ帳ですが、もっと便利な方法があります。専門家は、コードを操作するように設計された特別なエディターを使用します。これらは、サイトの作成と編集を簡単にするための多くの便利なオプションを提供します。
最も人気のあるツール-VisualStudioコード、崇高なテキスト、メモ帳++。あなたはそれらの複雑さを恐れるべきではありません。メモ帳を使用してWebサイトを作成する方法を知っていると、何が何であるかを簡単に理解できます。これらのエディターのすべての追加機能は、ウェブマスターの作業を容易にするように設計されており、その過程でウェブマスターの邪魔をしてはなりません。
メモ帳を使用してWebサイトを構築することは、Web開発者としての長く興味深い旅の始まりにすぎません。
