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”>–>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<p>Hello, this is my first webpage!</p>
<!– Start of content–>
<p>My name is Mr.Webmaster. I live in San Francisco. I love surfing the internet and finding out interesting things. </p>
<p>In my free time, I enjoy using basic text editors to create webpages.</p>
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.
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>.
- Declare your doctype
- Use the <body> tag to start your webpage content
- Use <h1> for headings
- End with closing tags, eg. </h1>