Our First Website
In this guide, we'll be creating our first website with a menu and few pages. In the process, we'll learn about how a web template system like Onwebed can reduce redundancy in web development.
Last updated
In this guide, we'll be creating our first website with a menu and few pages. In the process, we'll learn about how a web template system like Onwebed can reduce redundancy in web development.
Last updated
In this guide, we're going to be creating a website which features few pages, with a common menu. To reduce redundancy, we're going to host a base page and the menu as two private pages, which will be shared by all our public pages.
We're going to first create a base page, which will act as the foundation for all the webpages of our website.
In this guide, we're going to name it _base with the underscore used to make it private, as there is no point of letting the public access a page which will be used merely as a template.
Here, we're going to create some boxes to represent some basic HTML document:
Now, it does render to a really simple page, but how do we make it act as a base page which will be extended by other pages? We'll look into it in the next section.
To make this base page extensible, we need to use the concept of holes and fills. Anything you want to be filled is a hole, and fills are used to fill a hole. Make sure you read the docs for learning more about holes and fills.
We want to make the title and the body fillable, so let's add holes there:
As you can see, the two liquid boxes are marked as holes through their labels. The holes are given names of title and body so they each got identities and can get pinpointed to when filled.
The page we've created is now ready to be used as a base template for other pages.
In our website, we want a homepage, and an about page.
Let's create the homepage. It'll simply include the base page, and fill the holes.
The first solid box is simply going to represent the base page itself. The following solid boxes are simply fills for the title and body holes respectively.
The title is set as "Homepage", and in the body we got a heading and a paragraph.
Let's assume that we got the about page created in the same way, just with different content for the fills. We're going to look at creating the menu in the next section,
The menu is going to be simple, it'll feature a an ul with two li elements as menu items.
As for a practical example, the ul got an ID of main-menu just to be able to later address it whilst scripting or styling.
In this case, we'll name the page _menu, and the title doesn't even matter for a hidden page. We'll look into including this menu in our website.
Since we want the menu included in our entire website, it's best to put it in the base page. Here's the base page, with the menu page included:
As you can see, the menu is there in the body. Right after the menu, we have the hole named body. This is because we want the menu to precede all of the content inside the body.
Since we have this common base page, which is the foundation for all the pages in our website, it leads to reduced redundancy in development and maintenance of our website. Even if we had hundred pages, updating the menu or foundation needs to be made in only one place.
And that's it! We're done with our first website, with proper HTML unlike the one we created in our "Hello World!" guide. But beware that it's a really simple website intended to get you familiar with Onwebed, not to be a professional web developer.
As a homework, you can improve it. Maybe you can make it responsive, use a CSS framework such as Bulma or Bootstrap, add your own stylesheet to it, etc just to make it look and feel just like any professional website out there on the web.
