メモ帳で HTML ページを作成する例。メモ帳での HTML ページの作成: ダミーの説明例の HTML タグの説明

22.10.2020

親愛なる友人の皆さん、私は皆さんに喜んで挨拶します。今日はいつものように、ドミトリー・コスティンがあなたと一緒にいます。そして、あなたにちょっとしたサプライズがあります。それは試験です。はい、試験のことを冗談にしていたのです。 HTML の基礎に関するレッスンを終了し、この記事では、これまでのレッスンで得た知識を実際に適用することにしました。

HTML ウェブサイトを作成する簡単な例を示したいと思います。メモ帳++ 数分で完了します。もちろん、私たちはシンプルで複雑ではなく、高速で、ロホフスキーとさえ言えるウェブサイトを作成します（私のフランス語をご容赦ください））。しかし、それでも、これのおかげで、得た知識を定着させることができます。これはこの問題において非常に重要です。

Notepad++ で新しいドキュメントを作成するときは、それを UTF-8 に再コード化することを忘れないでください。

あなたはこう尋ねます。「なぜレッスンがこんなに少ないのですか？」 HTML にはさらに多くのタグと属性があります。」はい、はい、確かにあなたの言うことは正しいですが、時間が経つそして多くのタグが機能しなくなりました最新バージョン html 、または単純に不要とみなされ、誰も使用しません。

たとえば、こんなタグがあります、フォントを担当します。これとその属性のおかげで、フォントサイズ、色、フォント自体などの内部コンテンツを変更できます。しかし今日は、先ほども言ったように、一般的には使用されません。そのようなコードは無効になります。代わりに CSS を使用します。はるかに便利で実用的です。しかたがない。サイトの作成を始めましょう。

これらのリストを作成する必要がある場所を文書にマークしましたが、もちろん、念のため、それがどのように表示されるかを示します。

保存して何が得られたか見てみましょう。すべてはあるべき姿のように思えます。素晴らしい。私たちはすでに長い道のりを歩んできました。

テーブルの挿入

メモ帳でページを開く テーブル.html、同じ名前の Word 文書からすべての見出しとテキストをドラッグし、必要に応じてすべてのタグと属性を配置します。

では、必要なものに進みましょう。 5 行 5 列のテーブルを作成し、対応する値をそこに挿入します。必要な属性を忘れずに入力してください。 border="2"、セルパディングとセルスペースそれぞれ 5 個のコードは次のようになります。

保存して何が得られたか見てみましょう。すべて大丈夫です！

著者ページについて

すでにほぼすべてのことを行っています。あとは著者に関するページを完成させるだけです。ページに移動 obo-mne.html同じ名前の Word 文書からすべてのテキストをすべての見出しとともに挿入し、タグを追加します。

つまり、サイトのヘッダータグとメニューの後に、この画像のアドレスを記述し、テキストが写真を囲むように align="left" 属性を追加する必要があります。見た目が悪い場合は、数ピクセルのインデントをいじってみてください。このように見えるはずです。

すべて完了しましたか? すべてうまくいきましたか？そうだといい。しかし今、私たちはそれを必要としています。文書内にリンクがあります。本文の後ろに貼り付けるだけです。突然ビデオが作者の写真に収まるようになった場合は、テキストの後にいくつかのインデントを作成します。
.

まあ、それだけのようです。すべてが指示に従って完了し、Notepad++ で文字通り 10 ～ 15 分で作成された、このようなシンプルな HTML Web サイトが完成しました。これは最も単純な HTML フレームワークであるにもかかわらず、 CSS プロパティなどの奇妙なこともありますが、このような情報を含む「Web サイトの作成方法」コースを販売している人がまだいることがわかりました。しかもそのためにお金がかかります - 500 ルーブル、場合によっては 2,000 ルーブルもかかります。私はただショックを受けています!)

何らかのコースを受講する場合は、その分野で最善を尽くした専門家から受講する方が良いでしょう。個人的には、アンドレイ・ベルナツキーのコースを視聴することをお勧めします。」 HTML5 と CSS3 をゼロから第一人者まで「このコースは本当に素晴らしく、学びやすく、あらゆるレベルのユーザー向けに設計されています。このコースのおかげで、かなり優れた Web サイトの作成方法を実際に学ぶことができます。

ところで、手の調子はどうですか？ごちゃごちゃせずに、素晴らしいペンですべてを書き留めてくれることを願っています。あなたの頭が混乱せず、すべてを適切に説明できたことを願っています。何かがうまくいかなかった場合は、フォルダー内にすべてのコメントを含む既製のバージョンのサイトがあり、それを理解できるようになります。

ふー。大体、今日はここまでです。今日は暑さのせいか水を4リットルも飲みました。私の記事を気に入っていただき、学習に役立つと思っていただければ幸いです。私のブログの新しい記事を購読することを忘れないでください。もっと面白いことをたくさん教えてあげるよ。そして、頑張って暑さに耐えて頑張ってほしいと思います。さて、涼みに行きました。またね。バイバイ！

よろしくお願いします、ドミトリー・コスティン。

で現代世界自分のウェブサイトを持つことは、電話番号や住所を持つことと同じくらい重要なこともあります電子メール。残念ながら、誰もが自分で美しいプロフェッショナルなウェブサイトを作成できるわけではなく、場合によってはうまくいかないこともあります。誰もがそれを買う余裕があるわけではないので、プログラマーに注文することも理想的な解決策ではありません。

彼らはあなたがこの状況から抜け出すのを助けてくれるでしょう無料のHTMLウェブサイトのテンプレート。 HTML Web サイトテンプレートは、特定のトピックに関する Web サイト用の既製の静的ページのセットです。このテンプレートを使用すると、HTML マークアップの基本的な知識があれば、わずか数時間で簡単な Web サイトを作成できます。 HTML セクションでは、あと数時間勉強すればこの知識が得られます。CSS セクションを時間をかけて勉強すれば、HTML Web サイトのテンプレートのデザインを完全に制御し、それに合わせて完全にカスタマイズできるようになります。あなたのニーズ。

Web サイトテンプレートのもう 1 つの紛れもない利点は、ほとんどの場合、専門家によって作成されていることです。プロフェッショナルな Web サイトテンプレートとは、美しくモダンなデザインだけでなく、コードの記述方法も意味します。検索エンジン彼らはあなたのウェブサイトがどのように書かれているか、コードがSEOに最適化されているかどうかを調べ、それに基づいて検索結果におけるあなたの位置を下げたり上げたりします。したがって、優れた Web サイトは美しくモダンであるだけでなく、コードが正しく記述されている必要があります。これは重要なことです。

無料でダウンロード HTMLテンプレートウェブサイトにアクセスし、可能な限り短時間でプロジェクトを作成します。

それで。前回よりも複雑なものを作成しますが、前のレッスンで学んだ内容を使用します。

MM コースパート 1 のこのレッスンでは、2 ページの Web サイトを作成します...たとえば、インターネットでのお金の稼ぎ方についてです。

まず、おおよそどのようなものになるかを決めましょう。

サイト上部に「サイトヘッダー」を作成します。左側にはサイトの他のページへのリンクを含むサイトメニューがあり、残りのスペースはサイトのコンテンツで占められます。

アイデアは明確ですか？始めましょう。

メモ帳を起動して、ページを作成するための最小限のセットを作成しましょう。

ではタグの間に書いてみましょうページの名前、たとえば次のようになります

<span>インターネットでお金を稼ぐことについてのサイト。インターネット上でお金を稼ぐことに関する情報とサイトへのリンク</span>

次にタグを配置していきます

そしてサイト上のすべてのコンテンツがページの中央に配置されるようにします。
忘れていない場合はタグを付けてくださいそしての間に配置する必要がありますそして

、つまりこのような

ページフレームを作成するにはテーブルを使用しますが、テーブルに関する HTML レッスンで説明したものよりも少し注意が必要です。最初の行に 1 つのセルがあり、他の行に 2 つのセルがあるテーブルが必要です。必要なテーブルは次のとおりです。

セル 1 にはサイトヘッダーを配置し、セル 2 にはサイトメニューを、セル 3 にはページコンテンツを配置します。

このようなテーブルを作成するには、次のコードを記述します。

それらの。ページのコードは次のようになります。