Pin Me

Creating a Web Page with HTML

written by: •edited by: Michele McDonough•updated: 2/16/2010

If you want to know how to create a web page using HTML, then check out this article for a gentle introduction.

  • slide 1 of 8

    What is HTML?

    HTML stands for Hyper Text Markup Language and the majority of the web pages online have been created using it. It is a relatively simple set of codes and tags that allow you to define the look and layout of a web page. The code is interpreted by your web browser and it draws the page.

    There are plenty of WYSIWYG (what you see is what you get) programs out there which allow you to create web pages in a kind of text editor and then write the HTML for you. The most popular is probably Dreamweaver. However learning some basic HTML is well worth doing and you’ll find you are able to write more efficient and specific code to get the effect you want.

  • slide 2 of 8

    What do I need to create web pages with HTML?

    All you really need to get started is a text editor like Notepad or Wordpad and a web browser like Firefox or Internet Explorer. There is no need to buy any software. You will also find huge numbers of simple online tutorials offered for free so there is no need to invest in an HTML manual either.

    If you are building a website then you will also need some Internet hosting where the web pages will be stored and an FTP program for uploading them. Once again there are plenty of free solutions out there so this doesn’t need to cost anything. In this article we will just focus on how to create a web page using HTML.

  • slide 3 of 8

    Creating your first web page with HTML

    We’ll make this as simple as possible for absolute beginners so start by creating a folder. Double click My Computer and then double click on your hard disk drive (it will usually be labeled Local Disk (C): but the letter is not important so if yours is D or something else that’s fine. Now select:

    File then New Folder and call it My Web Site

    This is the folder we will work in. In order to create an HTML file all you need to do is save a notepad or wordpad document as an HTML file. This simply means selecting:

    File then Save As and writing in the file name box myfirstwebpage.html

    If you click Save you will now see the HTML file and it should be represented by a different icon. To edit this blank file you simply right click on it and select open with notepad or open with wordpad. Double clicking on the file will open it in your web browser so you can see what the page looks like but since we haven’t added anything yet it will be blank.

  • slide 4 of 8

    Using HTML Tags

    The first addition you’ll want to make to your new web page is some tags. HTML uses all sorts of tags to define different things from the font to use to the paragraph layout. Each tag should have an opening and closing tag. For example to create a simple paragraph you would use the p tag.

    If you wanted the text “Hello and welcome to my web page." to appear then you would put the following code into your HTML file:

    <p>Hello and welcome to my first web page</p>

    Everything you put into your HTML file must have an opening tag < > and a closing tag < />

  • slide 5 of 8
    Find out how to create a web page using HTML in this simple step by step tutorial. If you want to know what tags to use, how to add a simple image to your page and where the content should go then check out this simple HTML guide for beginners.
  • slide 6 of 8

    How to create a web page using HTML

    Now open your HTML file in notepad or wordpad (I find wordpad neater and easier to work with). The first tag you need to place in there is the HTML tag which tells the browser what language it is reading. So put in the following:

    <html>

    </html>

    Everything you add to the web page must appear between those HTML tags. You can use tags to define various specifics about the page so let’s add a few more. For each addition I’ll keep the original tags we have added and layer it up so you can see exactly what should appear on your page.

    <html>

    <head>

    </head>

    <body>

    </body>

    </html>

    The head section will define the title of your web page and can include scripts, style sheet references and meta data. The body will contain the content. In this tutorial we’ll keep it basic so just add a title like this:

    <html>

    <head>

    <title>My First Web Page</title>

    </head>

    <body>

    </body>

    </html>

  • slide 7 of 8

    Adding an image to your web page using HTML

    Now we are going to add an image as your banner so go in the My Web Site folder and select:

    File – New Folder and name it images

    MyBanner We’ll show you how to create a banner image for your web page in another tutorial so for now you can use the image shown here. Click on the image to open it in a separate page and then right click and choose Save Image As. Rename the image as MyBanner.jpg and save it in your images folder.

    Now open up your HTML file in notepad again and add the image within the body tags so your file looks like this:

    <html>

    <head>

    <title>My First Web Page</title>

    </head>

    <body>

    <img src="images/MyBanner.jpg">

    </body>

    </html>

    Now save and close the file and you can double click to open it in your browser. It should display the banner image and the very top of the browser you’ll see the web page title My First Web Page.

  • slide 8 of 8

    Adding content to your web page using HTML

    Now we want to add some content so go open your HTML file in notepad again and this time you want to add a paragraph so it should look like this:

    <html>

    <head>

    <title>My First Web Page</title>

    </head>

    <body>

    <img src="images/MyBanner.jpg">

    <p>Hello and welcome to my first web page</p>

    </body>

    </html>

    If you save and close the file and then double click on it again to open it in your browser you’ll see the banner image and underneath you’ll see the text “Hello and welcome to my first web page".

    To add a second paragraph of text you would have the following:

    <html>

    <head>

    <title>My First Web Page</title>

    </head>

    <body>

    <img src="images/MyBanner.jpg">

    <p>Hello and welcome to my first web page</p>

    <p>This is my second paragraph of text</p>

    </body>

    </html>

    There you have it - the basics of how to create a web page using HTML. There are loads of other tags to learn about but that should be enough to get you started. One of the best places to find more help is W3 Schools.

    If you have any questions feel free to post them in the comments.