Creating Web Pages

Collapse Content Show Content

You've used some HTML in the challenges below, but now it's time to create web pages for your own site. The first step is downloading an HTML editor.

HTML Editor

There are many WYSIWYG editors, but to learn HTML initially, you should code by hand. Pick one of these programs to begin!

On Windows
Microsoft Expression Web offers both an HTML and WYSIWYG interface, so you can use the HTML part and immediately see how it looks.

On Mac
If you have $75 to spare, check out Coda, which offers previews of your HTML, along with various features for coding.

Cross-platform Text Editor
It makes sense to have a plain-text editor as well so you can just focus on the code. Windows comes with Notepad, but this doesn't offer any features to help with code such as syntax highlighting or tag-matching. Instead try the free Adobe Brackets, which has many useful features for dealing with HTML.

Creating your first HTML Page

This is the standard boilerplate for web pages (hover over tags for more info):

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Copy the above text into your editor.
Give your page a title by putting text in the <title> element, such as "First Page".
Put some text in the body element, like "Hello HTML".
Save your file and add .html at the end of its name (e.g. index.html).

Congratulations! You've just created your first web page. To view your page in a browser, simply open the folder it is in and double-click it.

helloHTML screenshot

Publishing your site

As mentioned in Intro to Websites, there are many free or inexpensive ways to host a static website. Go ahead and upload your HTML file to your static web host. You can now share your website with anyone!

On the next page, add more HTML to your site.

Challenge

What is the address of your web page?

Please sign in or sign up to submit answers.

Alternatively, you can try out Learneroo before signing up.

Previous Next Node