How can I re-use the navigation bar in multiple pages (Bootstrap) - html

I will keep this short. Simply, I got a navigation bar that I have in <index.html>. How can I reuse that navigation bar on a different page than index?

The functionality you are looking for is referred to as templating. Templating allows you to create blocks of HTML that can be included and re-used various places throughout a web page/site.
For static content (plain HTML pages), Gatsby, Hugo, and Jekyll are all good choices with lots of documentation and strong community support.

Quite simple
Just copy the code of that navigation bar from index.html
And paste it on ur other page...

Related

Looking for a CMS to embed news articles into my Bootstrap website

So I have been working on a news page for website using Bootstrap Studio (I am new to all of this, only have been using html, css, and a tiny bit of js), and I was just creating individual html pages for each article and manually adding them to a list of articles on a news page. I started looking into it and found the a CMS may be a perfect solution so that I dont need to manually create these pages and can just "create" them in a CMS and somehow import them to my website.
So here is my goal, I want to just have some "recent News" blocks display the most recent articles image and title, as well a dedicated "news" page that displays every article. Also, I want the articles to be displayed on my website, as opposed to linking to an external page.
Is this at all possible, and if so, where would be the best place to start.
I appreciate any and all advice.
If your website is primarily a blogging styled website, my recommendation would be to convert your HTML, CSS, and JavaScript files over to WordPress.
There is a free template called HTML5Blank which allows you to completely style your site with your own HTML and CSS.
Here is a great tutorial.

WordPress Landing Page that Differs in Design from Regular Pages

Suppose you have a landing page that looks different than the main website--ie, different layout, different background, different header.
How can you use such a landing page on WordPress, since WordPress automatically formulates all pages to have the same layout, header, and footer?
Yes, the theme you use dictates the major design points of a site, but you can alter page templates to suit both design and data presentation. See https://codex.wordpress.org/Theme_Development on how themes and page templates work. Create a new page template for your theme to change the design, and then select that page template for a page.
Or, if you want to keep the raw coding to a minimum, use a plugin to allow you to use two themes on the same site, and select which pages/posts use each theme: https://wordpress.org/plugins/jonradio-multiple-themes/
I can't just add a comment yet in here, but this tutorial was perfect for me when I was needing to create sub pages based off of different templates. http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/
By using this you will be able to have a different layout, header, etc.

simple static html menu

I'm new at HTML and need to do a simple site as an assignment. For the site navigation menu I guess it would be easy to simply copy and paste the navigation menu HTML onto all the pages in a header div. But is there a better way to do this?
for example, is there an easy way (that doesn't require scripting) to only write the code in one place and have it included on every page? I remember that I did something in Dreamweaver that created a template page that included the navigation menu. However I have a feeling that that was just copying html between pages.
Without scripting your HTML files will need to contain the menubar in full.
You are describing what a server side scripting language can do. Without one - your HTML files are served as they are. Therefore they must contain the HTML for the menubar within them.
The comments mention using an iframe - though very creative - I believe it doesn't satisfy as being "a better way to do this"
You have must use HTML code every page without HTML does't work Try to learn some basic PHP it will help

common HTML parts of webpages

I’m designing a website with asp.net.
In my website I have many web pages.
All pages have a same header, and same menu, and same right menu bar, and others.
Note that the main data in each page is different from others.
For this, I copy the common HTML part of each page and paste it in new page!
Common parts like these:
div id=”headerDIV” style=… >
…
/div>
My problem is that how can I type these common parts of each page just one time and use it in all pages?
Without doing like this, I should change all pages when I wanna change a little thing in the header for example!
I think one way is to save the common HTML part in one .html file, and use it like this:
<!--#include file="header.html"-->
But, is it a best solution ?!
Isn’t it cause bad loading of the website especially for users with low speed Internet !?
Is there any better solution?
Thanks in advance.
If you are using razor you should learn how to use layout pages these pages contain the shared components that you are talking about. If you are not using razor then use master pages.
Razor is the latest view engine in ASP.NET so modern application will be more likely to use Razor and MVC, legacy software will be more likely to use Web Forms and Master Pages.
What your asking to achieve is simply implemented using a master page. Both ASP.NET WebForms as well as MVC support master pages in their own flavor. Master pages let you implement a common layout while including content sections to display individual page content.

Is there a light web template system that compiles before deployment to static HTML?

I'm currently building a website using static HTML/CSS. I can put in a PHP backend if necessary, but I'd like to avoid this additional complexity if possible.
The site has about 10 different HTML pages, and any change to the navigation bar or other layout elements requires manually implementing the change on all the separate HTML documents.
Is there any simple solution where I can implement a layout template in HTML containing header and footer, and then have separate content files for each page, and compile this all to static HTML before deploying? I suppose I could roll my own in Python but it would be nice if there was a pre-existing solution.
Template-Toolkit includes the ttree utility which does that.
I also subsequently came across nanoc which is in Ruby, and seems like perhaps a more modern option.