30個非常簡單的網頁

在綫

一些最著名的頁面信息非常多,但我更喜歡相反的內容:簡單的頁面。

很明顯,自從Google踏上旅程以來,這個小組的最大代表就是其極簡的主頁, 但是顯然,它並不是Internet上唯一致力於使事情變得簡單的人。

簡單的HTML網頁示例

基恩·里士滿

基恩·里奇蒙德

基恩·里士滿(Kean Richmond)使我們看到了玩幾個元素的簡單性,但是非常適合 極簡主義。 他的徽標位於左上角,Twitter和聯繫人圖標位於右側和中間,帶有醒目的版式,以表達他的敬業精神。

鏈接到網絡: 基恩里奇·蒙德

愛麗絲·德魯加德

愛麗絲·德魯加德

愛麗絲·德魯加德 放置徽標也保持簡單 在中心,有四個標籤可在您的網站主頁和適當放置的一系列照片之間移動,以便一眼就能知道您在做什麼和在做什麼。

鏈接到網絡: 愛麗絲·德魯加德

喬納森·奧格登

喬納森·奧格登

奧格登 繼續使用您的名字作為徽標的簡單性,位於下方的社交網絡卻沒有引起人們的注意,其設計作品也使我們可以快速瀏覽它們。 在一頁上,它顯示了所有重要內容。

鏈接到網絡: 喬納森·奧格登

芬奇

芬奇

芬奇已經準備去其他地方玩排版了 代表優雅和智慧的色彩。 僅需幾個元素,他就可以保留所有專業知識。 它還可以使您清楚鏈接到哪些頁面。

鏈接到網絡: 芬奇

不同的設計

不同的設計

本網站 發揮不同。 使用帶有標題的牆紙,我們可以從該牆紙轉到主頁,您的電話以及到您的社交網絡的鏈接。

鏈接到網絡: 不同的設計

布里茲克

布里茲克

凱用他自己的形象向我們說明 抽像三角形和合適的調色板 給予親密感。 如果我們想更多地了解他,他還提供了他的個人簡歷的一部分,並以較小的字體顯示。

鏈接到網絡: 布里茲克

垂直花園設計

垂直花園設計

與上一版一樣,“垂直花園設計”朝著顯示快速照片的方向發展 他在奧斯陸機場最出色的工作之一。 在頂部,我們具有帶有“導航欄”或導航欄的標題,甚至可以更改語言。 徽標以垂直格式放置,可以使非常簡單的頁面具有最終的觸感。

鏈接到網絡: 垂直花園設計

247度

247度

247度 玩單色和背景圖像 幾乎完全黑暗。 標頭字體小於文本和標頭,大寫以在整體設計中產生很大的對比。

鏈接到網絡: 247度

享受這種

享受這種

出色的排版可能是真實的標誌 而且我們知道我們在做什麼。 如果消息是直接的,則您無需再提供其他任何信息。 他們說得很清楚:他們喜歡創建漂亮的應用程序和網站。 他們將項目和研究的郵件留在另一個鏈接中。

鏈接到網絡: 享受這種

侯佳佳

侯佳佳

艾莉森帶我們 在其他課程之前,並且包含更多圖像 還有更“女性化”的字體。 您的主圖像和標題也是如此。 他可以出示一張顯示購物技巧的卡片,這很奢侈。

鏈接到網絡: 侯佳佳

像素

像素

Pixelot有點瘋狂,但這也表明了作者的創造力。 使用 鼠標指針創建遮罩 無論我們在哪裡棲息,它都會變得模糊。

鏈接到網絡: 像素

萊昂內爾·舒爾特斯

萊昂內爾·舒爾特斯

如果你想 只不過使您的簡歷在線,Lionel向您顯示了步驟。 合適的字體(您的照片在左上角)鏈接到您的社交網絡和您的體驗。 唯一的裝飾元素是兩條不同顏色的水平線。

鏈接到網絡: 萊昂內爾·舒爾特斯

優雅的海鷗

優雅的海鷗

我們返回 極簡優雅 和那些大的空白。 一方面,頁眉與其餘元素相距甚遠,另一方面,這些元素的形狀使它們之間形成了很好的視覺和諧感。

鏈接到網絡: 優雅的海鷗

生存空間

生存空間

正如您在所有示例中看到的,這很重要 標題標籤可轉到不同頁面 從網站。 字體非常重要,其中一個用於標題,另一個用於帶有無襯線的文本,這非常有用。

鏈接到網絡: 生存空間

粉紅點

粉紅點

顏色的對比使我們在所有視圖中都變得稍微複雜一些。 並非所有主要要素都缺失 這次使用背景圖像的漸變色和具有主圖像漸變色主色的那兩個部分進行播放。

鏈接到網絡: 粉紅點

萬國

萬國

一張很棒的照片 精心選擇的字體和“英雄”元素 你可以給這個網站。 使用滑塊可以顯示部分作品,其概念非常簡單。

鏈接到網絡: 萬國

劈斬

劈斬

數碼插圖將我們引向印章 吞噬了所有視覺效果的圖像。 標頭中的藍色使它可以創建與網絡投影的整個圖像一致的色度值。

鏈接到網絡: 劈斬

7松

7松

7Pine和果嶺一起成為本壘打的主角。 其餘的組成 具有大量綠色和簡單標題的圖像 希望徽標不引起注意。

鏈接到網絡: 7松

總和

總和

總和確實將我們引向其他方向。 玩寓言寓言的黑白插圖,非常有創意 與其他元素和其他兩個插圖並駕齊驅,創造出不僅有趣的景觀。 創建一個與眾不同的網站的示例。

鏈接到網絡: 總和

帽盒

帽盒

藍色是該網站上的主要顏色,其中沒有丟失的圖像完全被白色所照亮,以及遊戲的樣子 在該網站建設者的3D中 隨著我們的移動而移動。

鏈接到網絡: 帽盒

卡拉·萊特

卡拉·萊特

卡拉去 自然而美麗的外觀,簡約而簡約 在您的照片中。 其餘的是文本,其中包含標題的主要元素以及打開它的漢堡按鈕。

鏈接到網絡: 卡拉·萊特

Instrinsic Studio營銷

固有

Es 最簡單的網絡 但這向我們展示了創建博客的意義。 紅色和黑色是一個非常“博客”站點中的主角。

鏈接到網絡: Instrinsic Studio營銷

如何用HTML創建一個簡單的網站

HTML

我們將教你 用HTML創建一個簡單的網站 讓您知道組成它的最基本的元素。 必須有一個Web主機,我們可以在其中加載代碼和CSS中的一些調整,但是,這些都是開始HTML之旅的原則。

看過一些 簡單的網絡示例 這樣一來,您就可以充分激發自己的動力來進行自己的設計,而又不會傷腦筋。 有時候,簡單的方法比複雜的方法產生更好的效果。 您將看到,在大多數情況下,簡單效果很好。 去吧。

用HTML創建簡單的網站比起初看起來要容易。 一個網站 由標題,主體組成 或內容以及頁腳或頁腳為主要元素。 我們可以通過以下方式對其進行分類:

  • 文件:我們要創建的所有文檔都必須使用 。 我們以並總是以
  • 身體或身體:文檔的可見部分位於ÿ
  • 標頭:他們被H1,H2,H3所熟知...我們從一個然後以。 裡面的文本將作為標題顯示,並且根據其編號將以較小或較大的大小顯示。
  • 段落:該段落包含在並與關閉
  • enlaces: 最明顯的例子是creativosonline.org/>>> 連結到 Creativos Online
  • 意象:我們通過標籤定義它們。 一個例子是。 我們在引號之間調用圖像,並對替代文本使用alt,這對於SEO是必不可少的。
  • 列表:我們用定義列表為了一團糟整潔。 列表項用於。 永遠記得用欄將其關閉。

HTML

有了這些元素,我們將擁有 創建簡單網站的基礎 正如您將在其中大量看到的那樣,我們將在下一節中教您。 假設具有最重要元素的語義結構如下所示:

  • 標頭及其導航欄 用於網站的各個頁面。
  • 物品或身體空間 我們可以在其中創建博客條目,放置課程表或圖像。
  • 側邊欄或側邊欄 放置其他信息。
  • 頁腳或腳,我們將在其中放置指向網站最重要頁面的鏈接以及社交網絡的圖標(始終作為示例)。

在下面的示例中,您將看到 全部基於簡單但優雅的徽標是一個標題,用於將導航放置到網站的不同頁面,一個以文本或圖像為主的中央空間,以及帶有上一段中提到的元素的頁腳。

我們建議 不要傷腦筋去簡單。 最主要的是,這些區域在幾秒鐘的視覺傳遞中便與其餘區域區分開。 隨著時間的流逝,我們將能夠使自己複雜化並在其他空間中工作。

這是 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齊頭並進,為您提供了以下簡單的網站。

一方面,如果我們在語義上使用HTML來表示標題,正文或帶有其文章或圖片以及頁腳的正文, 在CSS中,我們將使用«Div»函數來識別 到每個空間,以便以後在設計中應用必要的更改。

簡單的事情如下:

網絡語義

雖然我們可以在Div中應用樣式, 合適而完美的結構會有所幫助 這樣網絡爬蟲就可以完美地“閱讀”我們的內容,因此,如果我們遵循該基本結構,我們將做得很好,首先要立足。

Un 簡單的CSS代碼示例:

h1 {
顏色: 白色;
文本對齊: 中央;
}

我們稱H1和文本 我們將其用白色塗成白色: 我們將使用“文本對齊”將其與中心對齊。 打開H1電話後,請始終使用方括號將其關閉。

的標頭照片 格雷格·拉科齊


發表您的評論

您的電子郵件地址將不會被發表。 必填字段標有 *

*

*

  1. 負責數據:MiguelÁngelGatón
  2. 數據用途:控制垃圾郵件,註釋管理。
  3. 合法性:您的同意
  4. 數據通訊:除非有法律義務,否則不會將數據傳達給第三方。
  5. 數據存儲:Occentus Networks(EU)託管的數據庫
  6. 權利:您可以隨時限制,恢復和刪除您的信息。

  1.   Cristopher-網站 他說:

    我真的也對設計充滿熱情,是了解設計世界的好頁面。

    最好的祝福。

  2.   豪爾赫 他說:

    朋友你好,你好嗎?

    我正在用html創建一個非常簡單的網頁,我想在每個出版物中添加一個註釋框。 你能指導我怎麼做嗎?

  3.   艾默生 他說:

    我們這些人需要一個非常簡單的網頁,其中包含三個按鈕和一個圖像,並且無論如何需要播放器,這樣的事情都會非常有用。
    但是,我不相信使用此信息可以構建我的頁面,但至少它可以為您提供想法和尋找的內容