--- title: Creating the master page --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). > **Info:** This page is a part of a tutorial, which you should follow sequentially, from the beginning to the end. [Go to the first page: Getting started with Kentico](https://docs.kentico.com/k10tutorial/getting-started-with-kentico.md). The **master page** allows you to define content that will be **shared by all pages\*\*\*\*on the website**, such as a header, navigation menu or footer. A master page does not represent a physical page on the website, but rather a design component that is added to other pages to ensure a uniform look. Define the master page at the beginning of your website development to know what all the pages will look like with the uniform elements. You can define the master page through the following steps: 1. [Copy and paste the HTML code ](#paste-the-html-code)from the sample files into the master page layout. 2. [Replace parts of the HTML code ](#add-web-part-zones)with web part zones. 3. [Add web parts ](#add-the-navigation-menu)to the web part zones. ## Paste the HTML code Insert the HTML code of the shared parts of the website into the master page: 1. In the **Pages** application, select the root page of the website's content tree. 2. In **Edit** mode, switch to the **Master page** tab. ![Master page tab available of the website's root page](https://docs.kentico.com/docsassets/k10tutorial/creating-the-master-page/master_page_tab.png "Master page tab available of the website's root page") 3. Click **Edit layout**. 4. Delete the default layout content. 5. Open the **Index.html** file from the tutorial pack in a text editor. 6. Copy the HTML code inside the **...** tags and paste it into the page layout editor. ```xml title="HTML code in the body tags"

The goal of our clinic is to provide the best medical care. To make your life healthy at all times it is also necessary to keep up with healthy way of living.

Welcome to MEDIO clinic

Our clinic based in Bedford, NH, is federally qualified health center offering high-quality, comprehensive, and family-oriented primary health care and support services since 7th March 1935. We are recognized by the National Committee on Quality Assurance as a Patient-Centered Medical Home. Providing health care for a stronger community, we serve nearly 20,000 patients annually.

``` ![Editing the page layout code](https://docs.kentico.com/docsassets/k10tutorial/creating-the-master-page/page_layout_code.png "Editing the page layout code") 7. Click **Save & Close**. 8. Copy the stylesheet and font lines of code from the Index.html file and paste them into the section of the master page. ```xml title="Stylesheet and font code in the Header" ``` 9. Make sure the doctype definition is HTML 5 – ****. ![Editing the doctype definition and head tag content of the master page](https://docs.kentico.com/docsassets/k10tutorial/creating-the-master-page/master_page_head_code.png "Editing the doctype definition and head tag content of the master page") 10. Click **Save** to save the master page. You have just copied the HTML code from the sample website to Kentico. Because we have already defined the CSS code and the CSS stylesheet is linked to the website, the styles are automatically applied to the master page. You can see that the master page now looks exactly the same as the sample website – switch to **Preview** mode: ![Switching to Preview mode in the Pages application](https://docs.kentico.com/docsassets/k10tutorial/creating-the-master-page/click_preview_mode.png "Switching to Preview mode in the Pages application") The website design is the same as in the sample website: ![Previewing the sample website](https://docs.kentico.com/docsassets/k10tutorial/creating-the-master-page/medio_clinic_home.png "Previewing the sample website") ## Add web part zones Web part zones are elements of the website that allow you to define the layout of pages. Web part zones represent containers, into which the website content can be easily placed and then edited. 1. In the **Pages** application, switch to **Edit** mode. 2. Select the **Design** tab. 3. Click the menu in the green page template header and select **Edit layout**. ![Editing the page layout from the Design tab](https://docs.kentico.com/docsassets/k10tutorial/creating-the-master-page/edit_page_layout.png "Editing the page layout from the Design tab") 4. Locate the navigational part of the layout code and remove everything inside the **** element.  - The HTML code is static, but we want to make the menu dynamic – so that it automatically updates according to the pages we create. > **Tip:** **Skip ahead** > > You can skip steps 4–9 and just copy and paste the final code in step 10. 5. Place the cursor inside the element and click **Insert** above the editor. - This adds a web part zone control into the layout. 6. Change the value of the web part zone’s **ZoneID** property to _ZoneMenu_.  - The ZoneID values of web part zones must be unique on each page template's layout. ```xml title="Web part zone code"
``` 7. Locate and delete both elements. - These sections with text represent content of the website, which we do not want to include in the master page. 8. Place the cursor between the and tags and click **Insert** above the editor. - This web part zone represents a place where the page content will be located on the master page. 9. Set this web part zone’s **ZoneID** to _ZoneContent_. ```xml title="Web part zone code"