用户无法访问某个网站的原因可能有很多。其中之一就是众所周知的404!错误。非常简单的HTML 404!错误信息是一个超文本传输协议(HTTP)状态码,表明服务器无法找到所请求的网站。换句话说,您的网络浏览器可以连接到服务器,但您试图访问的特定页面无法访问。在本教程中,我们将构建一个超文本标记语言404错误网页定制当地在那里看到的访问者看到的内容。我们将使用一些CSS.以及进一步增强页面。

404年!错误

为什么404年!HTML错误出现

当HTTP 404出现在屏幕上时,这意味着虽然服务器可到达,但您正在寻找的具体页面不是。网页被损坏,或者它不再存在。无论您使用的浏览器的类型如何,404错误代码都可以出现在任何浏览器中。

你可能会得到HTTP 404代码的原因有几个:

  • 错误404消息的一个典型触发是从网站删除页面时。
  • 该页面被移动到另一个URL,重定向不正确完成。
  • 您输入了错误的URL地址。
  • 虽然这种情况很少发生,但有时会出现服务器故障。
  • 输入的域名不存在。

不幸的是,在页面被删除或移动后,断开的链接通常会留下很长一段时间。即使当网站所有者维护他们的网站,有时所有者可能删除网站,或改变网站的名称。这意味着,当某人点击一个“旧”链接时,他们将再也无法找到该网站。不幸的是,由于许多人把url放在到处的网站上,最终会有链接实际上链接到任何地方。

对于网站的所有者不定期检查其外部链接是常见的,这导致用户尝试访问死链接。Web维护对于此原因至关重要。

创建一个“Page Not Found”HTML网页

如果访问你的网站的人看到一个旧的、不存在的网页,该网站的服务器会显示一个“404”错误,基本上是说找不到该网页。不允许服务器显示一个乏味的,默认的错误页面,你可以创建一个自己的,你想怎么做就怎么做。

让我们跳进我们的教程之一。

第1步:创建一个HTML Landing网页

让我们首先简单地创建一个基本的HTML页面。这将是创建更令人兴奋和信息丰富的404的基础!错误网页为游客降落。

打开文本编辑器,将文件保存为shorelinesurfteam.html.“并放入以下HTML代码。完成后再次保存文件。

< html >
<头>
<风格类型= / css文本>


> < /风格



<身体>


身体< / >

为了帮助那些已经进入这个“不存在”页面的人,您可以添加一些有用的信息来指导他们走上正确的道路。也许可以添加一些关于页面为什么不再存在的信息。在HTML中添加类似这样的内容。请随意复制以下代码并重新保存html文件。

< html >
<头>
<风格类型= / css文本>< br > < br >> < /风格



这是一个曾经存在的组织的网页。这个组织已经不复存在,取而代之的是一个新的组织,教冲浪的孩子们价值观和热爱海洋。新网站是:https://www.pleasurepointsurfclub.com/
< br > < br >

< p>

< p>



身体< / >

下面的插图标识文本我们添加使页面更有信息。

HTML代码映像

为了显示文本字体,让我们添加一个风格。复制以下代码并保存HTML文件。

!doctype html>
< html >
<头>
<风格类型= / css文本>


P{颜色:蓝色;
粗细:900;

字体大小:20 px;
Font-Family:Helvetica,Arial,Sans-Serif;
}


> < /风格



<身体>


这是一个用于曾经存在的组织的网页。这个组织已经不复存在,取而代之的是一个新的组织,教冲浪的孩子们价值观和热爱海洋。新网站是:https://www.pleasurepointsurfclub.com/
< br > < br >

< p>

< p>



身体< / >

添加一个图像和改变你的文本颜色如果你想的话,也可以通过添加HTML来引用图像来定制一个十六进制颜色。映像也可以放到根目录中。

!doctype html>
< html >
<头>

<风格类型= / css文本>


p {颜色:# 0 ecc8a;

粗细:900;
字体大小:20 px;
Font-Family:Helvetica,Arial,Sans-Serif;
}

> < /风格



<身体>




这是一个用于曾经存在的组织的网页。这个组织已经不复存在,取而代之的是一个新的组织,教冲浪的孩子们价值观和热爱海洋。新网站是:https://www.pleasurepointsurfclub.com/
< br > < br >

< p>

< p>



身体< / >

第2步:告诉服务器使用您的HTML 404!错误页面

创建一个“. htaccess”文件。这个文本文件的作用是将指令传递给服务器。

Web托管空间的根文件夹中可能已经有一个.htaccess文件。如果有,下载并修改该。它可能是一个隐藏的文件。如果是这样,您可能需要调整服务器设置,以便您可以查看此文件。

在这个“. htaccess,你需要添加这一行:

ErrorDocument 404 / shorelinesurfteam.html

这就是您需要添加的全部内容,不需要添加任何HTML代码。

它所做的是告诉服务器,当它遇到404错误,它应该加载shorelinesurfteam.html文件在根文件夹中。

步骤3:保存。htaccess文件到根目录

保存您的”. htaccess文件,并将其上传到你网站的根文件夹。当服务器遇到未找到的错误时,将显示错误页。

现在,当访问者找到网页时(根据上面的代码)

而不是看到这个:

示例错误页面

他们将看到您创建的以下更多信息和友好的错误页面。

示例错误页面

要使绿色文本更多地脱颖而出,可以添加一个司士元素背景颜色如下:

< html >
<头>< br > < br ><风格类型= / css文本>
p {
颜色:# 0 ecc8a;
粗细:900;
字体大小:20 px;
Font-Family:Helvetica,Arial,Sans-Serif;
}< br > < br >div {
背景颜色:灰色;
}

> < /风格
< br > < br ><身体>< br > < br > < br > < br >< div >

这是一个用于曾经存在的组织的网页。这个组织已经不复存在,取而代之的是一个新的组织,教冲浪的孩子们价值观和热爱海洋。新网站是:https://www.pleasurepointsurfclub.com/
< br > < br >

< p>

< p>



身体< / >

这将产生下列结果:

示例错误页面

现在,您可以像您喜欢的那样艺术地创建您的奇特的、信息丰富的404.html页面。时刻记住访客访问该页面,以增强他们的体验。

看到HTML的字体学习如何增强您的文本,并查看CSS背景教程要了解如何增强网页的背景。

下一个地方?

这是对404页错误应该为进一步探究网页管理和无限创意方面提供一个起点吗超文本标记语言报价。在下一篇博客中,您将能够探索HTML设计的其他领域。继续受到启发,进一步探索和深入到网页设计的世界。

参加我们的编程纳米迪尔格的介绍188金宝搏安不安全今天节目!

开始学习