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.
Related
a quick background. I have my website done using asp.net (webforms I believe) and it has default.aspx with sitemaster page (not mobile friendly). I have added html pages with separate css as well. (a) Except for main page default.aspx, all other pages are in html (it uses display: block, floats etc., but I am moving towards flex and grid in newer html pages to make it more mobile friendly but still I am constrained by default page though I could try to make that mobile friendly). However, I am left with page url extensions, mobile unfriendly site. Currently web.config is used for url redirection.
I thought of going fully with html/css/javascript if so how could I handle url redirection and removal url extensions? Or shall continue to use a mix of aspx and html pages as I currently have and update for responsiveness and eliminate url extensions using friendly urls nuget package. May be there is a better way. Appreciate your thoughts and input. Thank you
Sorry, how are you constrained by the default.aspx page? You should be able to use HTML classes and tags on it like anything else and render it responsively like the html pages. ~.aspx pages are just pages of HTML that allow code blocks and form controls on them that get processed by the server into html and AJAX (if there's a corresponding code behind file and the certain form controls are used). I'm not sure how it would be any different to make it responsive than any of the html files you have as well.
Regarding routing, what's the motivation for wanting to drop WebForms routing and url redirection? You can get around it with Javascript if you want, but at that point you don't even need WebForms or a backend if you're also trying to get rid of the default.aspx page. Does the site only serve static content and doesn't need a database or server logic at all?
Well, first of all, those asp.net pages and menus ARE bootstrap, and ARE responsive.
You seem to be under the impression that aspx pages and web forms are somehow LESS responsive then HTML pages or some other frame work.
That is NOT the case.
In other words some act of magic does not exist or occur by jumping to MVC pages, or HTML pages.
You get ZERO advantages.
Even for asp.net web forms, bootstrap “responsive” pages has been the default for more then 10 years now.
So, you see this as a web form page (aspx), and NOTE the menu bar:
Ok, lets make the page smaller. we get:
And if we go even smaller, then the menu bar colipases to the familiar "hamburger" like this:
And the same goes even for a standard say grid.
Say we drop in a grid like this:
Ok, lets shrink down to mobile - menu bar goes to hamburger, and we get this:
So, I am not convinced that simply going to HTML, or MVC pages will help much.
To get a nice responsive and re-sizing web page?
The aspx pages seem to work and do as good as job as most frameworks. And the efforts to get similar or even better results?
I don't see much difference. You might want to give a particular example, but aspx pages based on good old web forms seems to do as good as a job as most choices these days. Out of the box, the menu and pages are bootstrapped, and they are responsive.
It takes extra effort, and some talent to lay out such pages, and make them work well for any frame work if the same page is to be mobile friendly all the way up to say a large monitor on a desktop.
I open to adopting a newer framework works better, but those better results are that of the developer choosing to lay things out better - not that by just magic we drop the aspx page and you as a result get a better mobile experience.
On almost every website, they have various pages, each having the same HTML code. I strongly doubt that the creators of the websites edit the HTML code of each page, especially when users can make their own pages (like redditors making their own subreddits). These two pages from wikipedia: https://en.wikipedia.org/wiki/Synthesizer https://en.wikipedia.org/wiki/Drum_machine are different pages but they have very similar html code
And I don't even need to have users create their own pages, I just need to have multiple pages that reuse html code. https://www.apple.com/mac/ https://www.apple.com/ipad/ are clearly different pages that have different html code, but I don't think the developers would copy and paste HTML code, change it, then change the code of the headers in each page to include the new page when they have a new product.
https://getbootstrap.com/docs/4.3/getting-started/introduction/ and https://getbootstrap.com/docs/4.3/examples/ are different pages that use the same html code. What do they use? Should I learn bootstrap? I've seen websites do this way before bootstrap was made, though. What's something like this called? Do they even write in HTML or do they write in something that compiles into HTML? How am I supposed to do this very simple task that every webdev knows how to do yet I am unable to find any information on it?
I've tried searching for "Reusing HTML code" but I found nothing that answers my question. All I've seen are special cases
I'm hoping with this, I'll be able to have a website that can have multiple pages that use the same basic HTML code. If I wanted a new tab, I won't have to edit the HTML code of each page.
What you described is achieved by HTML templates and server-side scripting. The server script injects data in your HTML template, thus reusing one template for any number of pages. A template may consist of multiple parts that can be combined to achieve similarly looking yet different pages. It is called dynamic HTML.
Here is a very basic tutorial on how it works: https://www.php.net/manual/en/tutorial.php
To create a modern website you need to use a dozen different technologies together. Here is an infographic to give get idea: https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
They are many ways to do it!
If you are using asp.net you can use master page.
For more info : Master page demo
or else you can use php "include" statement. Suppose you created one page as header.php(header.html) and other one as footer.php(footer.html), then you just have to include those pages.
eg
<?php include 'header.php';?>
<html>your web page</html>
<?php include 'header.php';?>
Well this question is so extremely general it's hard to answer without knowing what your goal is. I highly doubt there are any web developers that develop a website from scratch anymore. Most use a content management system (CMS) which uses server side scripting to serve HTML pieces to form a website. For example header, footer, content-body I don't mean the HTML tags header and footer, although they will be part of the pieces the CMS serves. The most popular content management system is Wordpress, which is built in php. The pages don't even need to be specifically designated, they can be a list of blog posts, a picture gallery ...etc . There are many different CMS packages that serve different purposes and depend on your requirements. Wordpress is in my opinion the simplest with the lowest learning curve and is quite powerful, especially with all of the templates and plugins available. Wordpress itself is free and there are many free templates to start from. However, there are paid templates and plugins that offer additional features. The only thing that you need is php support and a hosting site.
All you need to know can be found here - https://codex.wordpress.org/Getting_Started_with_WordPress
Other content management systems include Joomla, Drupal, Magento, PrestaShop, TYPO3. Each have their advantages and disadvantages, as well as varying support for plugins and templates. Some are designed to support eCommerce sites, such as PrestaShop and TYPO3 but most CMS libraries provide support for eCommerce through plugins and templates.
Bootstrap is a framework, which is a little different from a CMS, but it offers a similar functionality. It serves different pieces or containers you design to form a website or page.
I recommend starting with Wordpress and if you have more specialized needs, check out the other options. I don't recommend you start writing php code to serve pages unless you are a very experienced php coder and even in that case why would you want to if there are so many free open source tools that have already done this for you.
Are iframes still widely in use today?
I am coding a site with divs, and I want everything to appear in the container div. Is it possible to do it without coding the header + nav into each page and have the content show at the exact same spot without using iframes?
I did a quick Google search and found a post that said it's not possible, but my site will have quite a bit of links.
As of right now, I am coding it with Tumblr, and the hashtags in the posts would act as links to a section of posts (Ex: #blog would retrieve every post under the "blog" link). What are some widely used ways to target links on a website?
If you are creating a multi-page website, it would be helpful to have the HTML content be generated dynamically or be built statically from template files. You don't want to manually update the same content across multiple HTML files.
Dynamic Pages
There are several options for dynamically generating HTML content depending on the software available to you. For example, PHP is a popular language for web development and is available through many web hosts.
Static Pages
It is possible to build static HTML documents from templates using something like Jekyll.
I'm not sure if I'm interpreting what you mean by "coding it with Tumblr" correctly or not, but I think you mean you're making a Tumblr site with their built-in HTML editing capability.
I think you'll have a very difficult time achieving the behavior you desire there. I think you're trying to create something resembling a single-page application. Tumblr probably just allows basic static HTML with little Javascript. The suggestion Kyle made about using PHP or something like that won't work because that code must be executed on a server, and Tumblr doesn't provide that capability to my knowledge.
If you really want this kind of functionality, you probably should get some paid web hosting and develop your web development skills. It's not a simple task, but it's fun!
Sorry if I underestimated you or anything. Just trying to read between the lines. It seems to me that you may be relatively new to web development given the content of your post, and I'm trying to nudge you in the right direction constructively.
I am newbie to Jquery Mobile, so far what ever examples i searched contains only one html page for whole application, with multipe div tags where each page/screen is defined as div tag with data-role as page with some header and footers optionally. Based on user actions, we are hiding some div's(pages) and showing only expected page. Also, this multi-page template seems to be standard design, as written by some blogs. Are there any other designing ways? what I would like to have is multipe html pages, for ex one for login, one for home, one for contact etc. Other wise it is difficult to understand/code/debug issues, especially people from Java background like me.So, what I want is some kind of MVC design with JQueryMobile, like each view/screen as sepearate html associated with one js (Controller). Can we have multiple html pages in JqueryMobile app? If possible how to pass data/ maintain session between them? Any samples are most welcome. Thanks In Advance.
Note: Also I don't want server side includes, may app contains 10 to 15 screens, each page will make a webservice call and fetch some data and map it to UI.
As jerone mentioned above, the jQuery Mobile documentation clearly says
We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
Each page (which can be a static HTML file or anything produced by a script (e.g PHP, Python or whatever)) is thus standalone and transitions from one page to another are done using AJAX calls.
There is no such thing as a controller except if you assume that your browser is one!
You can use multiple html files if you want. jQuery Mobile will automatic include these with AJAX: http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Anyways, jQuery Mobile recommends one big html file with multiple pages.
From http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
I'm building a small-scale website (a personal one) in which each page would have the same set of header elements (I'm not talking about the <head> element). In other words, I want each page to have essentially the same title at the top of the page and the same navigation bar below that (with possibly minor differences in each page). It's kind of like how StackOverflow has that navigation bar (with the logo, and the Questions, Tags, etc. buttons) on the top of every page.
Is it possible create such a header for every web page without copying and pasting the HTML code to do so? I really don't want to run into a situation where if I want to make a single change, I would have to change all of my pages containing the header.
Real web sites use real web frameworks, which have a concept called a "layout" (at least that's what they're called in Rails; as mentioned in Uwe's answer, they're called master pages in ASP.NET). All the common "templatey" stuff goes into a layout.
How about include files in a server-side language like PHP or master pages in ASP.NET?
You need to use some kind of dynamic page processing, whether it's PHP, a server-side include, or a similar tool.
If you need to stick with straight HTML, you could try to rig something up with AJAX or JavaScript - but then you highly limiting your website's functionality, giving it serious performance issues, AND preventing users who have JavaScript disabled from using your website.
A third answer is to use some sort of pre-deployment tool. This used to be a bigger market, but I think it's mostly dried up now. Here's an example for using DreamWeaver to handle this.
If you have a PHP server that supports PHP,
<?php include 'header_inc.php'; ?>
If that's not available
<!--#include virtual="header_inc.html" -->
But whether this works or not is server dependent
If you have a server with PHP capabilities
include 'header.inc.php';
you must put the header code in a file named that and then put that include code in all pages that you want the header to show up on