30の信じられないほどシンプルなWebページ

最も有名なページのいくつかは情報で非常に過負荷になっていますが、私は反対のことを好みます：単純なもの。

明らかに、このグループの大きな指数は、旅を始めて以来、最小限のホームページを持つGoogleです。 しかし、明らかに、物事をシンプルに保つことに取り組んでいるのはインターネット上の唯一のものではありません。

単純なHTMLWebページの例

キーンリッチモンド

キーン・リッチモンドは、いくつかの要素で遊ぶことの単純さを私たちに見せてくれますが、 ミニマリズムに素晴らしい気持ちを与える。 左上に彼のロゴ、右と中央にツイッターと連絡先のアイコンがあり、印象的なタイポグラフィで、彼が捧げているものになっています。

ウェブへのリンク： キーンリッヒモンド

アリス・ドルガード

アリス・ドルガード ロゴを配置してもシンプルに保つ 中央には、ウェブサイトのメインページと適切に配置された一連の写真の間を移動するXNUMXつのタブがあり、あなたが何をして何をしているかが一目でわかります。

ウェブへのリンク： アリス・ドルガード

ジョナサン・オグデン

オグデン あなたの名前がロゴとしていかにシンプルであるかで遊んでください、注目を集めることなくすぐ下にあるソーシャルネットワークとそのデザインは、私たちがそれらをすばやく通過できるように機能します。 XNUMXページに、重要なすべてが表示されます。

ウェブへのリンク： ジョナサン・オグデン

フィンチ

フィンチはすでにタイポグラフィやそれらで遊ぶために他の場所に行きます それが行うことの優雅さと知恵を表す色。 ほんの少しの要素で、彼はすべてのプロ意識を視野に入れています。 また、どのページがあなたにリンクしているかを明確にします。

ウェブへのリンク： フィンチ

別のデザイン

このウェブサイト 違った遊び方。 メインページ、携帯電話、ソーシャルネットワークへのリンクに移動できるヘッダー付きの壁紙を使用してください。

ウェブへのリンク： 別のデザイン

ブリズク

カイは彼自身の姿で私たちを説明します 抽象的な三角形と適切なカラーパレット 親密さを与えるために。 彼についてもっと知りたい場合に備えて、彼はバイオの一部を小さいフォントで提供しています。

ウェブへのリンク： ブリズク

垂直庭園デザイン

前のものと同様に、Vertical Garden Designは、速く見える写真に向かっています オスロ空港での彼の最高の仕事のXNUMXつ。 上部には、«ナビゲーションバー»またはナビゲーションバーのあるヘッダーがあり、言語を変更することもできます。 ロゴは、非常にシンプルなページに最後の仕上げを与えるために、それを垂直形式にします。

ウェブへのリンク： 垂直庭園デザイン

247Grad

247Grad モノクロと背景画像で遊ぶ ほぼ完全に暗い。 テキストやヘッダーよりも小さいヘッダーフォントは大文字で表記され、デザイン全体に大きなコントラストをもたらします。

ウェブへのリンク： 247Grad

これを楽しむ

A 素晴らしいタイポグラフィは、本物であることのしるしになり得ます そして、私たちは自分たちが何をしているのかを知っています。 メッセージが直接的なものであれば、これ以上何も与える必要はありません。 彼らはそれを非常に明確にしています：彼らは美しいアプリやウェブサイトを作成するのが大好きです。 彼らはプロジェクトと彼らの研究のためのメールを別のリンクに残します。

ウェブへのリンク： これを楽しむ

アリソンホウ

アリソンは私たちを連れて行く 他のコースの前に、より多くの画像が含まれています そして、そのより「女性的な」書体。 メイン画像とそのヘッダーについても同じことが言えます。 彼は買い物のコツを示すカードを提示する贅沢を持っています。

ウェブへのリンク： アリソンホウ

pixelot

Pixelotは少しクレイジーですが、作者の創造性も示しています。 使用する マスクを作成するためのマウスポインタ それは私たちがそれをとめているところならどこでもぼやけます。

ウェブへのリンク： pixelot

ライオネル・ショルテス

したい場合は それだけであなたの履歴書をオンラインにする、ライオネルが手順を示します。 適切なフォント、左上の写真は、ソーシャルネットワークとあなたの経験にリンクしています。 唯一の装飾的な要素は、異なる色のXNUMX本の水平線です。

ウェブへのリンク： ライオネル・ショルテス

エレガントなカモメ

我々は返します ミニマリズムの優雅さに そしてそれらの大きな空白スペース。 一方では、ヘッダーは他の要素から非常に離れており、他方では、それらの要素は、それらの間に素晴らしい視覚的調和を生み出すような形になっています。

ウェブへのリンク： エレガントなカモメ

生息地

すべての例でわかるように、それは重要です 別のページに移動するためのヘッダータブ ウェブサイトから。 タイポグラフィは非常に重要です。XNUMXつはヘッダー用、もうXNUMXつはテキスト用で、サンセリフを使用してください。

ウェブへのリンク： 生息地

ピンクポイント

色のコントラストは、すべてのビューの少し複雑なウェブにつながります。 これらの主要な要素がすべて欠落しているわけではありません 今回は背景画像のグラデーションと、メイン画像のグラデーションのメインカラーを持つXNUMXつのセクションで遊んでください。

ウェブへのリンク： ピンクポイント

IWC

素晴らしい写真 厳選されたフォントと「ヒーロー」要素 あなたはこのウェブに与えることができます。 スライダーを使用すると、作業の一部が非常に単純であることがわかります。

ウェブへのリンク： IWC

切る

デジタルイラストレーションは私たちをチョップチョップに導きます それのすべての視覚的存在を食い尽くすそのイメージ。 ヘッダーの青い色は、ウェブによって投影された画像全体と調和した色彩値を作成するためのポイントを与えます。

ウェブへのリンク： 切る

7パイン

7パインはグリーンでプレーし、ホームプレートの偉大な主人公になります。 残りはそれを構成します 緑が多く、ヘッダーがシンプルな画像 それはロゴに気づかれずに行きたいです。

ウェブへのリンク： 7パイン

合計

合計は私たちを他の方向に導きます。 伝説の白黒、非常に創造的なイラストで遊ぶ そして、それは残りの要素と他のXNUMXつのイラストと一緒になって、興味深い風景以上のものを作成します。 他とは一線を画すウェブサイトを作成する例。

ウェブへのリンク： 合計

帽子箱

青はこのウェブサイトの主な色であり、白で完全に照らされた欠落画像はなく、ゲームはどのようになりますか そのサイトビルダーの3Dで それは私たちが動くにつれて動く。

ウェブへのリンク： 帽子箱

カラライト

カラは行く 自然で美しい存在感のあるシンプルさとミニマリズム あなたの写真で。 残りは、ヘッダーの主な要素とそれを開くためのハンバーガーボタンと一緒に来るテキストです。

ウェブへのリンク： カラライト

InstrinsicStudioマーケティング

Es 最も単純なウェブの しかし、それは私たちにブログを作ることが何であるかを示しています。 赤と黒は非常に「ブログ」サイトの主人公です。

ウェブへのリンク： InstrinsicStudioマーケティング

HTMLで簡単なウェブサイトを作成する方法

私たちはあなたに教えるつもりです HTMLで簡単なWebサイトを作成する あなたがそれを構成する最も基本的な要素を知っているように。 コードをロードしてCSSにいくつかの調整を加えることができるウェブホストが必要になりますが、これらはHTMLでの旅を始めるための原則です。

いくつか見た 簡単なWebの例 頭をあまり壊さずに自分のデザインを作るのに十分なモチベーションを与えることができます。 複雑なことで私たちを複雑にするよりも、単純な方が良い効果を生み出すことがあります。 ほとんどの場合、単純なものが非常にうまく機能することがわかります。 頑張れ。

HTMLで簡単なWebサイトを作成することは、最初に思われるよりも簡単です。 ウェブサイト ヘッダー、本文で構成されます またはコンテンツとフッターまたはフッターを主要な要素として。 これらは次のように分類できます。

• ドキュメント：作成するすべてのドキュメントは、 。 私たちはで開きますそして常にで閉じます
• 体または体：ドキュメントの表示部分はY
• ヘッダー：それらはH1、H2、H3によって知られています...私たちはそして、私たちは。 中にあるテキストはヘッダーとして表示され、その番号付けに応じて、小さいサイズまたは大きいサイズで表示されます。
• 段落：段落はで囲まれていますで閉じます
• リンクス: 最も明確な例はcreativosonline.org/>>> へのリンク Creativos Online
• 画像：ラベルで定義します。 例は。 引用符で囲まれた画像を呼び出し、代替テキストにaltを使用します。これはSEOに不可欠です。
• リスト：リストを次のように定義します乱雑できちんと。 リストアイテムは。 常にバーでそれらを閉じることを忘れないでください。

これらの要素を使用すると、 シンプルなウェブサイトを作成するための基礎 あなたがそれらのかなりの量で見るように、私たちは次のセクションであなたに教えるでしょう。 最も重要な要素を持つセマンティック構造が次のようになっているとしましょう。

• ナビゲーションバー付きのヘッダー サイトのさまざまなページ。
• 記事またはボディスペース ブログエントリを作成したり、カリキュラムや画像を配置したりできます。
• サイドバーまたはサイドバー 追加情報を入力します。
• フッターまたは足、サイトの最も重要なページへのリンクとソーシャルネットワークのアイコン（常に例として）を配置します。

以下に表示される例では、 すべてシンプルでエレガントなロゴに基づいています、サイトのさまざまなページへのナビゲーションを配置するヘッダー、テキストまたは画像で占められる中央のスペース、および前の段落で説明した要素を含むフッター。

私たちはそれをお勧めします 頭を壊さないで、シンプルに行きましょう。 主なことは、これらの領域が数秒の視覚的なパスで他の領域と区別されることです。 時間が経つにつれて、私たちは自分自身を複雑にし、より多くの他のスペースで働くことができるようになります。

これは HTMLコードの明確な例 最も重要な要素で：

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

これらのHTMLコード行を使用すると、 最初にヘッダーにページタイトルを作成しました、この場合は«セマンティックHTML»で、両方のタイトルを次のように閉じます。 、ヘッダー付きそして私たちは体を開く道を譲ります。

私たちは H1の最初のヘッダー それを閉じるには、そして、サイトのさまざまなページのナビゲーションバーを作成するのに役立つリストに移動します。 リストを閉じます、閉じますそして最後にhtmlドキュメント。

最後に、 常にドキュメントを開く コード全体の最後でスラッシュを使用して閉じます。 ドキュメントを開いた後、言語への参照が常に使用されます。この場合は、「es」と「 。

コードを注意深く観察することが重要です。 関数を開くと、バーで閉じます 心配。

CSSのビット

CSSについて少し説明しますが、理解できるように通過します HTMLのスタイルを設定する方法。 CSSとHTMLが連携して、以下に示す単純なWebサイトを提供するとします。

一方では、ヘッダーまたはヘッダー、本文または本文とその記事または画像、およびフッターにHTMLをセマンティックに使用している場合、 CSSでは、«Div»関数を使用して識別します 後でデザインに必要な変更を適用するために、これらの各スペースに。

次のような単純なもの：

Divでスタイルを適用できますが、 適切で完璧な構造が役立ちます Webクローラーがコンテンツの内容を完全に「読み取る」ことができるように、その基本構造に従うと、最初に素晴らしい仕事と基盤が得られます。

Un 簡単なCSSコード例:

h1 {
カラー: 白;
テキストが整列: センター;
}

H1とテキストを呼びます 私たちはそれを色付きの白に入れます：白; «textalign»で中央に揃えます。 H1コールを開始した後は、必ず角かっこで閉じてください。

のヘッダー写真 グレッグ・ラコジ