 Hello, this is Christian. In this video, when I took a look at master page or master site page in SAP.NET, the master page is a special file or a special page that contains the structural elements of a web page so that it will make your site look kind of consistent across all pages. So if you look at this diagram here, it's the shady area here that contains the content that are similar or identical to all pages that use this master page. So the white square here contains the content placeholder. It's a tag that will allow you to inject content pages or their data to that location. So when these two files merge together, they create this final page or this virtual page that is rendered to the browser. Let's see how this page is created in SAP.NET. So I'm going to go and create a new project in here. And I want to use a web framework. So make sure it's C sharp in this example at the .NET framework. And I'm going to just call this one here my master page demo. And then go ahead. I'll use the empty page. And I don't need the HTTPS. I'm going to go ahead and just use the web forms here anyway, even though there's nothing in those folders. Take a little while to create this for the first time. OK, here we go. So I'm going to close this. And right off the bat, I'm going to create another folder here for my style sheet. So right click on the project name, add new folder. And we'll just call it styles. Inside the styles folder, I'm going to create a new style sheet and I'll call it default. And I have some style tags already created in the other file. I'm going to copy that, put it right in here. I'll also include it in the video so you can use it. So here are some really simple tags. One for the footer, the navigation links, and the main tag, and also the body color. So we like gray and things like that. So save that. All right, so when you create web pages in ASP.NET, you have the option of creating a page with or without a master page. So for example, if I go here and right click on the project name and click add, go to the new item. And here you are presented with these options under the web tag over here. So we have the web form. This is the one without the master page. If you want to create with a master page, you have to click this one here. So as you can see, let's do this again. So the master page here, I'm going to give it a name. Actually, I can't because I don't have a master page yet. So let's create the default one here and I'll call this one default. So this is what a page will look like without a master page. So these are the actual content of your HTML element followed by the page directive up here. And so this page uses just regular HTML, right? No side master. Now to create a master page, you just basically go here. Let's do this again. Let's delete this. OK, so first let's create a master page. Go to your project name, right click on it, and go to add and new item. We're going to search for the one that says web forms master page. It's down here somewhere. So here we are. There are two of them. One is the master page, one is the nested type. So we want just the one that says master page. And the default name is site one. You can keep it as is or in my case, I'm going to call it main site. And then that master will be created automatically for us. OK, so here is the master page. This is the anatomy of the master page file. You have a master directive tag on the top here. Follow up on the language and the active, I mean the other attributes are here. I'm not going to go over these in this case. But you see that this is the HTML content of the page. So whatever you include here will always be available for all other pages that are linked to this master page. So in the master page, you have two content place holder already generated for us by default. One is in the head section. This is the invisible content. Notice the ASP colon content placeholder tag followed by the ID and have a unique ID name here. In this case, it just called head. And it also must have the run add attribute on the server side. So this will be things like unique style sheets or JavaScripts or other meta tags you want to add to a particular page. And they'll be injected here for either be unique for every page. Everything else that are similar across the page should not be injected here. And let's suggest a page title, for example. And then down here in the body section, you have a form tag. So by requirement, all site master page must have a form tag. And they can only be one form tag per site master or per page for ASP.net. Inside that form tag, you have a div tag followed by another content placeholder with the ID called content placeholder1. And I don't like this name, so I'm going to replace to one with the main here. And then inside this content is where you add the main content injected to this location. Of course, you can have multiple content placeholders, as you can see here. You may want to have one for the logo, for example. If that's something that is unique on every page or every section or features of the page, you put that into a logo area. Maybe also one for the right rail or the left navigation menu for ad spots or other slots, calendar, or the footer, for example. You can also do that here. But for now, we're just going to keep one main content. And I'm going to go and add here in the div tag here. I'm going to add the navigation as well so that it looks across the same across all the pages. And just a really simple navigation here. I'm going to link to the home page. This slash is the home page and not the global AX, but this will be the default. I'll create one for default ASPX, the home page here. And I'm going to link that to that page and we'll just call it home. I'm going to duplicate this line, control D, two times. And I'll create one for the about and then the contact. And again, I'll change this to content and about. So that's my navigation links. And the bottom here, right outside the div tag, I'm going to create a footer tag. I don't want to put my inside the div tag. And then I'll just use the copy symbol followed by my site. OK, that's good, I think. And then also we'll include a style sheet. So I'll create it here already. So as you can see, you can just drag this and put it right in here. So I'll put it right below the content place order here. Yeah, I'm going to grab it and just drag it right here. OK, so it's all good. So that's my master page. Now let's create a content page. Now content pages are created like you normally create the ASPX file. You can go here or you can just right click on the master page here and create content page. The only thing if you do this way is that you cannot name it. It's default name to web form 1 and 2 and 3 and things like that. And you have to manually change the name. So you can do that or go to the site master page and go to create. Let me add a new content page. And we're going to use the web form with master right here. Give it a name. I'll call this the default. And then it's going to prompt you for the content master page here. So click that, click OK. And now you will see that this page is now already rendered for us using, adding, including the content place order ID and the content place order main for us automatically. Of course, you don't have to use them if you don't need them. But they're optional, right? So I'm not going to include in the head area. So I'm going to delete that just to save my code. And then now this is a page directive. It has a page directive, the title. I want to put here home page. And then the master page file attribute, as you can see here, is assigned with the main site master. So once this page is now linked to a master page file, you must only enter data inside this ASP content tag. Let's link to a place order and then site master page. If you don't include this, you cannot add data, any content outside of it. So for example, if I want to put something like this, for example, hi, if I do that, it's not going to work. Even though there's no error here, if you look, go to the design view, you will see that has an error because you're not allowed to add any elements outside of that tag. Once this page is now linked to a master page, OK? That is the rule. And so you can't do that. Now if you take that off and go back to the design view, you're going to see that now it shows the master page content followed by a gray box here, or a box you can actually add a content in here, OK? So if you go in here and just type something, you can see that I can type content in here and is inside this ASP content tag, right? So that is a way to protect your code, protect you, the designer, from accidentally deleting or updating content in the site master page. So I'm going to go and add in here a main tag followed by an H1. And I'll put here maybe just like welcome. I'll just put a home page here. Welcome to my main site, something like that. And then I'm going to go ahead and run this file. So go ahead and run it without debugging. So it looked much faster. And hopefully everything loads correctly without any errors. So here we go. All right, so here it is. This is the main page here. And the About and Contact page are not created yet. But that is what it looks like. So let's go and create those two pages and then we'll download this video. I'm going to create another page here. You can go here and add new content, new item, or the shortcut is right here. If you already used before, it should be visible here. So go click that and this will be the About. And then just click OK. Again, I'm going to do one more for the contact. OK, so inside here, I can put a main tag again. And H1, I'll put here contact me without the dot. The same for the About. OK, so those pages are done. Notice that I don't have to put the navigation at all. And you will see that it loads the About page, the Contact page, and the Home page. So the navigation and the photo looks very similar across all pages. The only thing that's different is the content. And that is the purpose of a master page.