HTML Tutorial using WebMatrix Web Editor

How to
1. Use the WebMatrix Web Editor in conjunction with this HTML & CSS Tutorial.
2. Make you First Web Page

Results per page:


Match: any search words all search words

Page Menu

1. Initial Setup of Web Editors

2 Creating a New Web Page

Initial Setup of Webmatrix Web Editor

Non Required

Webmatrix Create a New Web Page

Open WebMatrix

  1. On the WebMatrix start screen, Click New > Empty Site
  2. Click Create a new file ...
  3. Select HTML
    Click OK
    Note an Empty Site: This template creates a bare-bones website based on ASP.NET Web Pages. Use this template if you want to build your site's functionality from scratch.
  4. Alter size of Code Text if required
  5. Type (or Copy & Paste) in between the <title> tags
    Your Page TITLE goes here
  6. Type (or Copy & Paste) in between the <body> tags
    <p>Your Page CONTENT goes here and is in a Paragraph</p>
  7. Note Line & - Signs
  8. Click Sign to compact Section
  9. Click + Sign to re-open section
  10. Click File > Save as
  11. In file ALTER to
  12. I suggest you save the file in the following folder my-first-web-pages which you created in Step 1 of Tutorial  02 is located at location:
    C: > Users > Your User Name >my-first-web-pages

    If you save in a different location Note where the file is being saved for future use.
  13. Click Save button

View Video

MORE ADVANCED Using the New Wizard

This will be covered in later Tutorials

New page wih CSS Header, Side bar, Content, Footer


  1. Open BlueGriffon
  2. Click File > New Wizard
  3. In the New Document Wizard
    1. Title In Title Enter Your Page TITLE goes here
    2. Author In Author: If you want your name etc to be available to the WWW enter any/ all / none of the following: Your name, company, organization, Wemmaster name & email
    3. Keywords Enter the pages Keywords. At this stage you can leave blank or Enter web, page
    4. Language: Select English (en)
    5. Character set: Select Unicode(UTF-8)
    6. Text Direction Select Left to right
    7. Click Next
  4. In the Colours and Backgrounds
    1. I Suggest you leave as the default colours
    2. Only if you wish to change the default colours click Use custom colours & change as required.
    3. Click Next
  5. In Document Background
    1. At this stage leave as is
    2. Click Next
  6. In Page layouts
    1. Ensure predefined CSS layout is Ticked.  This tutorial covers CSS layouts in a later lesson.
    2. Width: Select 950px
    3. Sidebar: Select Left 180px
    4. Click New row > Select 1 column 100%
    5. leave the Include ticked. This produces latin text in the main section. You can delete or alter this later.
    6. Click Finish

The above creates a document that holds more information than is covered in the first few lessons. So only view the code that is relevent