How to include duplicate markup in every web page [duplicate] - html

This question already has answers here:
How to create a template in HTML?
(3 answers)
Closed 8 years ago.
If all my web pages have the same navigation and footer markup, what is the best way of avoid hard-coding this in every page, so if it needs changing it's only changed in one place so as not to have to edit every html file?
Thanks

A few options:
Use a static HTML generator, which will allow you to use template and pure HTML.
Use server side includes if your server supports them.
Use iframes.
Use any server side language, and its templating counter part (php, jinja2, django, et. al)

Use the AJAX load() method.
$('#mysection').load('yourfile.html');
Of course the URL can also point to a PHP script etc.
http://api.jquery.com/load/

You should use a server-side solution depending on the technology that are you using (PHP,ASP,etc...)
I think you should take a look at this link.

Related

Simply transfer HTML code into other HTML files [duplicate]

This question already has answers here:
Multiple webpages with common title and navigation bars
(4 answers)
Closed 2 years ago.
I would like to start a homepage for me. Every time I add a thing to index.html I have to add it to the links (in about.html etc.) as well.
How can I simplify that, that the new things of the index.html are automatically transferred directly into the other links (about.html etc.)?
Thanks for the help
The solution I used was to create a JS script that you would include in your HTML, that would add the HTML you want to the document :
let body = document.getElementsByTagName("body")[0];
body.insertAdjacentHTML("beforeend", "your html");
You could then put this script where you want to include the HTML.
I don't know if it's the best solution, but it works.
Right now, using vanilla HTML, there is no quick, easy, and simple way to do this. Using a backend framework like Django, this is easy, but that is really complicated and takes a while to learn!

Encrypt CSS style and HTML Is possible? [duplicate]

This question already has answers here:
How to disable (View Source) and (Ctrl + C ) from my site
(10 answers)
Closed 6 years ago.
My scenario is I have created a html website using inline css and also used css generator tool for menu items so any one who have good Idea in design can easily track that style is generated by tool that's why I want encrypt html and css source after rendering .
please suggest me is there any option to encrypt html or css code.
Thanks In advance.
no I would say thats not possible.
HTML and CSS are client side code which is open for all to view.
So they can't be encrypted.
Maybe look at minification, but the browser needs to interperate the code so encryption wouldn't be an option.
Here is some links to minify.
https://cssminifier.com
https://javascript-minifier.com/
If your using a CMS there are plently of minification tools.

How to let robots parse our custom html elements? [duplicate]

This question already has answers here:
How do search engines deal with AngularJS applications?
(15 answers)
Closed 6 years ago.
I have a website containing custom elements (i use angular 2), and google fails to parse them correctly :
It only sees
<my-app></my-app>
It seems that the value of this component is not retrieved at all by google robots.
Is there a best practice / workaround ?
Thanks for your help.
This has been asked a million times. Please refer to this question and this specific page by google.
Times have changed. Today, as long as you're not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers. To reflect this improvement, we recently updated our technical Webmaster Guidelines to recommend against disallowing Googlebot from crawling your site's CSS or JS files.
What you can do is getting the HTML of your rendered page and inserting it into the <my-app></my-app> tags without user information or the like.
This will get replaced anyway after Angular has booted up, this means you can even put something completely different in there.

Change Code in multiple HTML files [duplicate]

This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 8 years ago.
Is there a way I can change code in multiple static HTML files? I just added two new pages to the site, and the side bar containing links to all the pages need to be updated in all files. Is there a easy way to do it? Thank you very much.
Update: Also the side bar has an active row, which should be different in each file, is there a easy way to change that in each file as well?
notepad ++ allows you to search and replace and also has a reg-ex search and replace function you can use to replace all or replace via file extensions
The question you are asking has two good answers.
The first simple answer for your level of HTML knowledge would be to use a text-editors Find & Replace functionality to simply change identical pieces of code so all pages match. This would be the simplest answer for your question.
The larger answer would be to introduce you to the idea of a layout file. With this layout file(s) you could define your entire page layout, links, headers, etc. Then with each page you load you simply call the content you want to show inside the layout file. This is a high level concept and should ultimately be your goal to reduce issues like those which you stated in your question.
You can accomplish this with a variety of technologies such as PHP, ASP.Net, or Java EE development which are all very advanced stacks. The best starting point I would suggest is Server Side Includes. This will allow you to simply call the required layout text. While this solution is rather legacy; it might help you accomplish your task with grater efficiency.
Microsoft Visual Studio Express can find and replace in files.
But maybe it's time to refactor your pages and put the common information in a distinct file.

Menu from external file [duplicate]

This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 9 years ago.
I am now making a webpage and need a bit of help. Its been some time since Ive done my last page a few years ago. Back then I remember it was quite popular to use frames, but these days, this is basically no longer used.
What I used to do is have a horizontal menu on the top as a frame, and underneath it the content frame.
Now, currently I have a webpage again, where I would like to place a horizontal menu on the top of the page.
The menu is written in pure CSS and HTML. The CSS is loaded from an external file, but the problem I now have is that the menu is basically a DIV element, which however I have to put into each page separately.
I was just wondering there must be a way of making this simpler and have it somehow inserted from an external file again - sorry maybe it sounds confusing, but basically I am looking for an alternative of the frames used in the past. Many pages have menus and I am sure they do it somehow, because if I make a change in the menu, I dont want to be making these changes on all the hundreds of pages.
I dont ask for any specific coding etc. I can google that myself if I dont know how to do it, but I just need a general recommendation how to solve this. Just to summarize, the menu is in HTML+CSS and the pages are mostly PHP, some of them HTML.
I'd think it would mostly depend on the framework. You could just have one page, and use AJAX to load the content of each page, or you could have several php pages, all of which call some function at the beginning to set up the header, or you could use a ASP.NET master page or whatever your framework uses.
If you're using PHP, then the easiest way would be :
<?php include('my_page.html'); ?>
Be carefull of the path to your html page