30个非常简单的网页

网路

一些最著名的页面信息非常多,但我更喜欢相反的内容:简单的页面。

很明显,自从Google踏上旅程以来,这个小组的最大代表就是其极简的主页, 但是显然,它并不是Internet上唯一致力于使事情变得简单的人。

简单的HTML网页示例

基恩·里士满

基恩·里奇蒙德

基恩·里士满(Kean Richmond)使我们看到了玩几个元素的简单性,但是非常适合 极简主义。 他的工作位于左上角,Twitter和联系人图标位于右侧和中间,并带有醒目的字体。

链接到网络: 基恩里奇·蒙德

爱丽丝·德鲁加德

爱丽丝·德鲁加德

爱丽丝·德鲁加德 放置徽标也保持简单 在中心,有四个选项卡可在您的网站主页和适当放置的一系列照片之间移动,以便一眼就能知道您在做什么和在做什么。

链接到网络: 爱丽丝·德鲁加德

乔纳森·奥格登

乔纳森·奥格登

奥格登 不断使用您的名字作为徽标的简单性,位于下方的社交网络却没有引起人们的注意,其设计作品也使我们可以快速浏览它们。 在一页上,它显示了所有重要内容。

链接到网络: 乔纳森·奥格登

芬奇

芬奇

芬奇已经准备去其他地方玩排版了 代表优雅和智慧的色彩。 仅需几个元素,他就可以保留所有专业知识。 它还可以使您清楚链接到哪些页面。

链接到网络: 芬奇

不同的设计

不同的设计

本网站 发挥不同。 使用带有标题的墙纸,我们可以从该墙纸转到主页,您的电话以及到您的社交网络的链接。

链接到网络: 不同的设计

布里兹克

布里兹克

凯用他自己的形象向我们说明 抽象的三角形和合适的调色板 给予亲密感。 如果我们想更多地了解他,他还提供了他的个人简历的一部分,并以较小的字体显示。

链接到网络: 布里兹克

垂直花园设计

垂直花园设计

与上一版一样,“垂直花园设计”朝着显示快速照片的方向发展 他在奥斯陆机场最出色的工作之一。 在顶部,我们具有带“导航栏”或导航栏的标题,甚至可以更改语言。 徽标以垂直格式放置,可以使非常简单的页面具有最终的触感。

链接到网络: 垂直花园设计

247Grad

247Grad

247Grad 玩单色和背景图像 几乎完全黑暗。 标头字体小于文本和标头,大写以在整体设计中产生很大的对比。

链接到网络: 247Grad

享受这

享受这

出色的排版可能是真实的标志 而且我们知道我们在做什么。 如果消息是直接的,则您无需再提供其他任何信息。 他们说得很清楚:他们喜欢创建漂亮的应用程序和网站。 他们将项目和研究的邮件留在另一个链接中。

链接到网络: 享受这

侯佳佳

侯佳佳

艾莉森带我们 在其他课程之前,并且包含更多图像 还有更“女性化”的字体。 您的主图像和标题也是如此。 他可以出示一张显示购物技巧的卡片,很奢侈。

链接到网络: 侯佳佳

像素

像素

Pixelot有点疯狂,但这也表明了作者的创造力。 使用 鼠标指针创建遮罩 无论我们在哪里栖息,它都会变得模糊。

链接到网络: 像素

莱昂内尔·舒尔特斯

莱昂内尔·舒尔特斯

如果quieres 只不过使您的简历在线,Lionel向您显示了步骤。 合适的字体(您的照片在左上角)链接到您的社交网络和您的体验。 唯一的装饰元素是两条不同颜色的水平线。

链接到网络: 莱昂内尔·舒尔特斯

优雅的海鸥

优雅的海鸥

我们返回 极简优雅 和那些大的空白。 一方面,页眉与其余元素相距甚远,另一方面,这些元素的形状使它们之间形成了极大的视觉和谐。

链接到网络: 优雅的海鸥

栖息地

栖息地

正如您在所有示例中看到的,这很重要 标题标签可转到不同页面 从网站。 字体非常重要,其中一个用于标题,另一个用于带有无衬线的文本,这非常有用。

链接到网络: 栖息地

粉红点

粉红点

色彩的对比使我们在所有视图中都变得稍微复杂一些。 并非所有这些主要要素都缺失了 这次使用背景图像的渐变以及具有主图像渐变色的那两个部分播放。

链接到网络: 粉红点

万国

万国

一张很棒的照片 精心选择的字体和“英雄”元素 你可以给这个网站。 使用滑块可以显示部分作品,其概念非常简单。

链接到网络: 万国

劈斩

劈斩

数码插图将我们引向印章 吞噬了所有视觉效果的图像。 标头中的蓝色使它可以创建与网络投影的整个图像一致的色度值。

链接到网络: 劈斩

7松

7松

7Pine和果岭一起成为本垒打的主角。 其余的组成 具有大量绿色和简单标题的图像 希望徽标不引起注意。

链接到网络: 7松

总和

总和

总和确实将我们引向其他方向。 玩寓言寓言的黑白插图,非常有创意 并与其余的元素和另外两个插图一起创建了一个不仅有趣的景观。 创建一个与众不同的网站的示例。

链接到网络: 总和

帽盒

帽盒

蓝色是该网站上的主要颜色,其中没有缺失的图像完全被白色所照亮,以及游戏的样子 在该网站建设者的3D中 随着我们的移动而移动。

链接到网络: 帽盒

卡拉·莱特

卡拉·莱特

卡拉去 自然而美丽的外观带来简约和极简主义 在您的照片中。 其余的是文本,其中包含标题的主要元素以及打开它的汉堡按钮。

链接到网络: 卡拉·莱特

Instrinsic Studio营销

固有

Es 最简单的网络 但这向我们展示了创建博客的意义。 红色和黑色是一个非常“博客”站点中的主角。

链接到网络: Instrinsic Studio营销

如何用HTML创建一个简单的网站

HTML

我们将教你 用HTML创建一个简单的网站 让您知道组成它的最基本的元素。 必须有一个Web主机,我们可以在其中加载代码和CSS的一些调整,但是,这些都是开始HTML之旅的原则。

看过一些 简单的网络示例 这样一来,您就可以充分激发自己的动力来进行自己的设计,而又不会伤脑筋。 有时候,简单的方法比复杂的方法产生更好的效果。 您将看到,在大多数情况下,简单效果很好。 去吧。

用HTML创建简单的网站比起初看起来要容易。 一个网站 由标题,主体组成 或内容以及页脚或页脚为主要元素。 我们可以通过以下方式对其进行分类:

  • 文件:我们要创建的所有文档都必须使用 。 我们以并总是以
  • 身体或身体:文档的可见部分位于ÿ
  • 床头板:他们被H1,H2,H3所熟知...我们从一个然后以。 里面的文本将显示为标题,并根据其编号以较小或较大的形式显示。
  • 段落:该段落包含在并与关闭
  • 链接: 最明显的例子是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电话后,请务必用方括号将其关闭。

的标头照片 格雷格·拉科齐(Greg Rakozy)


发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   Cristopher-网站

    我也对设计充满热情,是了解设计世界的好页面。

    最好的祝福。

  2.   乔治

    朋友你好,你好吗?

    我正在用html创建一个非常简单的网页,我想在每个出版物中添加一个注释框。 你能指导我怎么做吗?

  3.   艾默生

    我们这些人需要一个非常简单的网页,其中包含三个按钮和一个图像,并且无论如何需要播放器,这样的事情都会非常有用。
    但是,我不相信使用此信息可以构建我的页面,但至少它可以为您提供想法和寻找的内容