Guide to HTML: Your First Webpage

First Webpage rendered in a Web Browser

Above is what your first webpage will look like. It is very simple and it makes use of headings and paragraph text. Start by opening up Notepad or an HTML editor. In Notepad write all this (we will explain it later):

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>–&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Home</title>

</head>

<body>

<h1>Welcome</h1>

<p>Hello, this is my first webpage!</p>

<!– Start of content–>

<h2>About Me</h2>

<p>My name is Mr.Webmaster. I live in San Francisco. I love surfing the internet and finding out interesting things. </p>

<h2>Hobbies</h2>

<p>In my free time, I enjoy using basic text editors to create webpages.</p>

</body>

</html>

Save as HTML in Notepad

Save it by clicking on File>Save As… and select ‘All Files‘ from the drop-down box and change the file name to ‘myfirstwebpage.html’, click on the image (right) for further help if needed.

You have just created your first webpage.

Starting Your Webpage

You should always put the Doctype FIRST, they declare the document type and help the browser interpret your HTML. You can read more about Doctypes at A List Apart. So remember before you start the body you should have this:

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	Replace with Title ()-->

The title appears in the top of your browser tab or window and is contained in the tag. Follow your Doctype declaration with the body tag  which is used to  show the start of the content in an HTML document.

Comments

You may have noticed that there are some parts in the body which do not appear. These parts are called comments and help the web developer to edit websites. To add comment use as the end tag. In this case it was <!– Start of content–>, to show it was where the writer to put their content.

Headings and Paragraphs

The start of your webpage also has a heading. To add a heading use <h1> as the tag, using <h2> will use the second heading text while <h3> will use the third heading text and so on. Writing paragraph text is very easy, simply use <p> and close it with </p>.

Summary

  1. Declare your doctype
  2. Use the <body> tag to start your webpage content
  3. Use <h1> for headings
  4. End with closing tags, eg. </h1>
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s