Need help? Chat now!

Hostwinds 博客

寻找结果为:


Hostwinds教程:如何在没有站点构建应用程序的情况下构建基本的博客网站Pt.1 特色图片

Hostwinds教程:如何在没有站点构建应用程序的情况下构建基本的博客网站Pt.1

通过: Hostwinds Team  /  十二月 21, 2018


首先,坦诚的忏悔或专业和优雅的东西?坦率的忏悔是:我对这个博客系列感到非常兴奋。我觉得我肚子里有整个蝴蝶河口!我喜欢软件开发和编码,这是我的梦想,一段时间教授一个像你这样的可爱观众如何创建一个非常基本的(重点是"基本")网站从头开始。我们到了!你们都可以成为我的小豚鼠,因为我们学习了如何生成基本的HTML文档和CSS文档(并且可能更多!),然后将所有它们链接在一起,从而创建我们自己的网站。这不仅仅是关于翻滚小猫的普通网站。不,它不会。事实上,因为博客是这样,当孩子们说这些天时,"像每一个和各级一样令人敬畏,"我们将在一起创建一个博客网站!这将是,因为那些孩子再次说,"沉闷"。没有时间喜欢现在开始! HTML文档是您开始创建网站的位置,因为HTML构成了您网站的基础。很有趣!在我们创建HTML文档和使用HTML计算机编程语言的代码之前,这里有一些关于HTML本身的东西:

什么是HTML?

超文本标记语言是从头开始构建网站的最基本部分。 以下来自上一篇有关HTML内容的博客文章的引文解释了每一段"超文本标记语言"的含义:

" "超文本" 在HTML中,"文字"是指引用其自身以外的文字的文字。

"标记" 在HTML中代表有点听起来它的样子。 HTML是一种用网页标记网页的语言,其中网站将显示到查看者的显示。 这个方向符合标签的形式,这些标签构成了HTML的语言。 标记还占据了网站观众无法看到在后台中编写的代码来创建网站的事实。

'语言' 在HTML中解释说,HTML是一种计算机语言,具有法语或西班牙语等语法和规则。"

我强烈建议看看HTML博客帖子在继续本教程之前,因为1.它会给您提供更多HTML上下文,在构建网站时会感到更加自信,而2.我无耻地插上帖子,因为它就像我的一个其他博宝婴儿,我对它的完美偏见了。下面的链接将带给您对此博客宝贝的权利,我说:

Hostwinds HTML炒作

SPOILER ALERT:我将毫不留情地插入以前在本博客文章的整个过程中发布的几篇博客文章,因为1.它们是相关的,当我们学习构建网站所涉及的复杂程序时,它们可以作为备忘单; 2.他们 都很棒,值得无耻地插入。

基础

好的,现在我们觉得知道HTML是什么,时间让你的HTML文档全部设置。 我们将从您的网站的主页开始,否则称为网站的着陆页。 我们将在您喜欢的任何文本编辑器中打开一个文件。 如果您开始和升级文本,我会推荐Notepad ++如果您有点熟悉软件开发/编码。 关于这些文本编辑的最佳消息是他们都是免费的!

cPanel文件管理器还提供了文本编辑器。 谈到cPanel,请随时参考以下博客文章" Hostwinds教程:如何在cPanel File Manager中设置网站文件"。 它涉及在cPanel文件管理器中创建或上传网站文件(如HTML和CSS文档)的每个步骤:

Hostwinds教程:如何在cPanel File Manager中设置网站文件

此外,Hostwinds的心爱的前线专家之一Abigail写了一个关于为您的网站构建主页的精彩知识库指南。在本指南中,Abigail解释说:"如果您使用的是CPANEL等控制面板,则会将这些文件添加到您的域名的public_html目录或文档root。如果您没有使用控制面板,则最有可能将这些文件添加到/ var / www / html,尽管您域名文档根的位置可能会有所不同。"

您在文本编辑器中创建的HTML文件通常保存为"index.html"。 为什么? Abigail的指南地址此确切的问题:"在域文件夹(或public_html)中设置Apache的方式,如果这些文件存在并提供此文件,则读取您的DirectorIndex,例如index.htm,index.html或index.php 作为您的文件夹的主页。 如果这些文件中没有一个,那么它将显示一个索引列表。 您可以通过您的.htaccess文件更改目录索引。" 不要无耻地插上更多,但我也强烈建议审查这一指南 有关继续在cPanel中存储文件的博客文章,因为它会为您提供此博客文章的精采注释以及一些我们无法触及的有关HTML的额外信息,因此请继续。 点击下面查看:

如何使用HTML和CSS创建自定义登录页面

在我们继续之前,请先从Abigail的指南中再引用一遍:

"标签是我们如何在HTML文档中识别不同的元素,通常成对出现。 大多数标签都有一个开始\ <>和结束\,一些标签将没有第二个标记,并将以/>结束,这被称为"空元素",主要在链接和图像上看到。"

标签

请允许我详细说明HTML - 标签的重要组成部分。 他们告诉浏览器您希望您的网站如何组织。 作为阿比盖尔提到的,通常,标签具有开口和闭合标签。 打开标签告诉计算机要以某种方式组织它和结束标签之间的内容。 例如,以下段落标记(或p标签)中的文本告诉计算机您希望在您的网站上以某种方式显示文本的一段:

您可以在此处向网站添加文本段落。

一些标签是自我终止的。这意味着它们不需要结束标签。自终止标记的示例是断裂标签,它表示网页上的两个元素之间的空间。

为了确保此博客文章并不像泰坦尼克号,我专门为HTML标记提供了博客文章。 如果您不确定我们使用的每个标签的目的来创建我们的HTML文档,请单击下面的链接以查看您的HTML标记备忘单:

Hostwinds HTML Hype第2部分:标签讨论

内容

"内容"是位于开始和结束标签内的内容。 内容就是您希望用户在网站上看到的内容。

例如,以上段落标签中的内容是:

"在这里您可以在网站上添加文字段落。"

元件

"元素"是整个代码,包括开口标签,关闭标签(如果标签确实具有闭合标签,则所有这些都没有)和内容。 换句话说,元素是整个谢银。 在我们上面的示例中,元素是:

您可以在此处向网站添加文本段落。

甜蜜,第一步写入HTML文档正在将标签直立设置。每次创建HTML文档时,您都希望使用第一个模板设置。

这些是最重要的标记,因为它们可以设置您的文档。

标记表示我们使用的HTML版本。 重要的是要将其放在您创建的每个HTML文档的顶部。

和标签之间的任何内容都表示与网站相关的信息。

标签之间的任何东西都是您不想在网站上看到的东西,但是需要传达给网站的浏览器的信息以正确运行。 例如,这是您想要将HTML文档链接到CSS文档的代码行。 为浏览器提供有关网页结构的重要信息的标记称为"元标记"。

元标记的另一个例子是标签。 此标记表示允许为您的网站使用的特定字符集。 包括UTF-8字符集的字符几乎每个角色都可以想到。

标签之间的任何东西都旨在在您的网页(或换句话说)上看到 身体 您的网站)。

标签之间的任何内容都是您想要的标签在网站上的窗口顶部的顶部。

评论

注释提供了某些标签或元素的描述,这些标签或元素可帮助您或其他人在将来查看或编辑代码。 评论适用于网站开发人员,当您键入为您的网站的代码键入代码时,他们会为您澄清一下。 在我的经验中,它必须尽可能地评论,因此您可以记住每个代码应该是什么或别人稍后再返回和编辑代码。

可能放在HTML文档中的注释示例:

个人喜好:我喜欢在网页的每个区域周围添加注释,以使我更容易识别每个部分。 一个示例如下所示:

我的照片我的简历了关于我的主机版主的主页

上面的代码块刚刚提醒我要插入 重要 通知: 当我插入这些博客帖子的代码块太长时才能适合窗口,当您将鼠标悬停在该区域时,在此代码的底部将出现一个小滚动条。 您可以将滚动条滑动到右侧以查看整个块的代码。 在整个博客文章和本博客系列的第2部分和第3部分中记住这一点。

属性

属性稍微复杂一点,但我们正在深入研究! 如" Hostwinds HTML Hype第2部分:标记讨论"博客文章中所述,该属性指定有关元素的内容。

以下是一些ID和Class以外的属性示例(如果您不确定ID和Class是和/或做什么,请参见有关HTML标签的博客文章):

1。 " href" 锚标记的一部分是属性,它指定要引用的文件。

2。 " alt" 一部分图像标记是一个属性,因为它指定了您希望文本显示为占位符,如果出于某种原因,则不会加载图像。

3.一个例子似乎是最好的教学方法 "目标" 属性确实如此。假设您的HTML文档中有一个锚标记,允许您的网站用户单击将它们带到Hostwinds的主页的链接。

您可以向开放标记添加目标属性,以通知浏览器如何将用户重定向到Hostwinds的网站。 换句话说,您可以使用目标属性来选择您是否希望站点在同一窗口中打开,他们正在查看您的站点或在整个新窗口(AKA选项卡)中。

将目标属性(aka值)"_self"指向用户在当前所在的同一窗口中指向Hostwinds的网站。

给出目标属性的名称(aka值)"_blank",以便将用户指向在一个新窗口(aka选项卡)中的Hostwinds网站。

您还可以给目标属性指定其他值,但是您知道了!

整个HTML文件

哇,那真是太快了! 既然您对HTML了如指掌,那么我们就来建立一个简单的HTML文档,其中包含我们讨论的所有内容。

注意:我们将建立我们的博客网站以模拟Hostwinds的博客网站。但是,它将成为一个基本的博客网站,因为我们开始和学习HTML的基础知识。

另一个注意事项:我非常明智而聪明的妹妹是一个成功的Web开发人员。 她给了我关于网站建设的以下建议:每次要从划伤中创建一个新的网站,请首先尝试映射你想要设置的方式/你想要的方式 在纸上。 一旦我开始追随这样的建议,我注意到我可以快速发展网站两倍。

第1步: 在页面顶部添加一个简单的导航栏(通常,导航栏有许多链接,而只是目前,我们将把它放在我们制作的导航栏中的一个链接):

我的博客网站

注意我已经将导航栏标签放在身体标签中。正如我们之前讨论的那样,这确保了导航栏在网页上会看到。导航杆打开标签位于开口体标签下方。这可确保我们的导航栏位于页面顶部。闭合体标签前的标签。如"Hostwinds HTML Huspe第2部分:标记通话"中所提到的,标签在两个元素之间进行空格。考虑到我们想要在我们的导航栏和下一个元素之间的空间,我们在两者之间覆盖标签。

第2步: 添加您观看者可以单击的区域查看标签下方的第一个博客文章(AKA最新博客文章):

我的博客网站

博客文章1标题

如果愿意,可以在此处放置博客文章的简短摘要

阅读博客文章

请注意,我们在博客文章上方的博客文章上方的博客文章上方的博客文章中的姓名标题为一张按钮上方的博客文章,为我们的网页带来了我们的第一个博客文章。我们将为第一个博客文章创建的HTML文件的名称将是"blogpost1.html"。在本博客系列的第2部分中,我们将创建三个HTML文档,为三个假设博客帖子制作三个网页。我们将名称为这三个HTML文档"blogpost1.html","blogpost2.html"和"blogpost3.html"。因此,我们可以在围绕我们的按钮标记周围的锚标记中引用它们。

注意打开和关闭按钮标签嵌套在打开和关闭锚标签之间。这允许我们单击按钮并导航到我们想要到达的网页。

请注意该块的代码底部的水平线标记。我们将有一个水平线分离您观看者可以单击的三个区域查看博客文章1,2和3.我们还将有一个水平线,将第3博客文章从页脚分开。

文件路径:相对与绝对

文件路径是您通知浏览器在元素中引用它时要获取哪些文件的方式。 您可以在整个文件路径中键入,或者您可以缩写它。 绝对文件路径是整个文件路径,并且相对文件路径是相同文件路径的缩短版本(但它仍然将您的网站用户指向同一文件)。

绝对文件路径的示例:

<img src= “https://www.hostwinds.com/images/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

相对文件路径的示例:

<img src= “/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

一个很酷的系统,其中浏览器解释您输入代码的相对文件路径。我们现在稍微触摸这一点,但如果这有点难以包裹你的思想,那么不要担心,因为我们可能会在其中一个博客帖子中更详细地覆盖主题。

第三步: 让我们快速整理一下文件。 进入index.html文档所在的文件。 创建一个名为" images"的文件夹。 将您要用于博客网站的所有图像拖放到此文件夹中。 博客1的特色图片,博客2的特色图片和博客3的特色图片总共三个图像文件。 您可以随意命名图像文件,但出于我们的目的,我们将其命名为" your_image_goes_here_1.png"," your_image_goes_here_2.png"和" your_image_goes_here_3.png"。 此外,在本教程中,我们将使用各种Hostwinds图像作为特色图像。

我们将使用我们所有网站图片的相对文件路径。现在,指示浏览器进入"图像"文件夹以抓住每个图像。

博客文章1特色图片

文件路径前面的句号和正斜杠告诉浏览器启动index.html文件所在的位置,然后进入" images"文件夹。 "图像"后的正斜杠告诉浏览器在该文件夹中查找文件。

第4步: 添加您查看者可以单击的区域,通过简单地复制我们刚刚为第一个博客文章创建并粘贴下面的代码块来查看标记下方的第二个博客文章。一旦粘贴,我们所要做的就是将所有"1"变为"2."。

步骤5: 添加您查看者可以单击以查看标记下方的第三个博客文章的区域,通过再次复制我们刚刚为第一个博客文章创建的代码块并粘贴下面。一旦全部粘贴,我们所要做的就是将所有"1"更改为"3."

博客文章1标题

如果愿意,可以在此处放置博客文章的简短摘要

阅读博客文章

步骤6: 现在,我们已准备好在标签下方添加一个页脚。我们现在将简单简单,稍后拖动它。

感谢您访问此博客网站!

步骤7: 我之前提到过,我们是在Hostwinds的博客网站之后对这个博客网站进行建模。 参观时注意 https://www.hostwinds.com/blog/ 然后单击其中一个特色图像,您将被引导到与此类特色图像相关联的博客文章。 我们希望我们的博客网站的观众能够做同样的事情,你会感到惊讶,创造这种效果是多么简单。 只是(新的编码术语即将到来:) 打开和关闭锚标标签之间的每个特色图像的标签(如我们用于导航栏链接和按钮的锚标签)。 我们将在我们创建按钮时,引用我们的"blogpost1.html"和"blogpost2.html"和"blogpost2.html"和"blogpost3.html"和"blogpost3.html"文档。

进行此更改后,请注意文档中每个图像标签周围的锚标签:

我的博客网站

博客文章1标题

如果愿意,可以在此处放置博客文章的简短摘要

阅读博客文章

感谢您访问此博客网站!

步骤8: 给自己一轮掌声! 继续和您的网站一起玩一点! 转到File Explorer,右键单击"index.html"文件,然后单击"打开"。 接下来,请选择您首选的Internet浏览器(我推荐谷歌Chrome)。 尝试点击"读博客文章"按钮,并注意他们带您对相应的博客文章。 查看您的网站时,单击图像和按钮以确保代码中没有"错误"(AKA Typos或错误)。

主页

本博客系列的第1部分是完整的,人们。 我们将继续在本系列的第2部分中添加更多HTML到此博客网站,并将成为一个真正的款待! 我不想破坏休息,所以我们现在得出结论。

快乐的HTML

保持调整第2部分并保留此备忘单,因为我们将转回它。 也留在第3部分! 哦,当孩子们说,就会有,"零件零件零件"为此博客系列! 在我们知道之前,我们将有一个更复杂的网站,我们可以发布博客。 以后再聊!

撰写者 Hostwinds Team  /  十二月 21, 2018