-
-
Writing Simple HTML Creating your own webpage may seem like a scary and daunting task. You might even have glanced at some of the source code behind some simple websites out there on the internet, and after glancing at the seemingly incoherent codes and programming language; you went running in the other direction.
What if I told you that I could teach you how to create your own simple web page in one short article? Go ahead – scroll down and see for yourself. By the time you are done reading this 600 word article (about the length of a newspaper article) – you will have the skills required to write a single HTML web page that you can open in your web browser.
Let’s Get Started
What makes a webpage not simply one long stream of words and sentences? Formatting. Other than the spaces that you see between every word, the web browser needs to be told how to format every single paragraph and text.
Picture your browser as a complete idiot who only understands simple instructions. If you want to format a word, sentence, or paragraph, you need to circle that sentence, word, or paragraph.
For example: If you wanted to create a paragraph with a space above and a space below, you would place a <p> in the front of the paragraph, and a </p> afterwards.
In HTML, you always assign the code within “<>” and you always end that code with the same, but with a back-slash inside “/” inside.
In six short paragraphs, I will teach you how to:
-
1. Create a title and a heading
-
2. Create a paragraph
-
3. Format your text with bold or italics
-
4. Insert images into your webpage
-
5. Add links to your webpage
-
6. Create lists (like this one)
As you read through this guide – open up notepad and type along. When we’re done, simply save the file as an “.htm” or “.html” file – and open it with Internet Explorer or Netscape.
When you open Notepad, first type the following lines (html documents are formatted this way)
<html>
<head>
Now you’re ready to edit the body of your web page!
Titles and Headings
Every webpage (usually) has a title. Remember our example of circling the text you want to format. So you simply “circle” your text as the title as follows:
<title>This is my very first Web Page!</title>
After your title is done, you need to close out the header of your page and start creating the body.
</header>
<body>
If you want to create smaller headers, you can do so with h1 and h2 (which provide a large and smaller header formatting, respectively).
<h1>This is my most important heading</h1>
<h2>This is my less important heading</h2>
Then start writing your paragraphs as you would when you normally type, but remember that you need to tell the browser how to format, or space, your paragraphs.
<p>I love writing, but I’ve always been too afraid to write in html format, so I don’t have a webpage yet – but I will soon! </p>
If you want to format the text, to add a little style to your writing, try adding emphasis or bold (same thing), or italics as shown below. I will also show you how to force a new line using the “line break” command:
First I’m going to provide great <em>emphasis</em> to my work. <br>
Then I’m going to simply <i>italics</i> the words.<br>
And when I’m done – I’m going to <b>bold</b> the words again. <br><br>
Notice that placing two “<br>” together provides two line breaks, which is essentially the same as creating a new paragraph. So there are lots of different ways that you can format your web page.
Of course, you can’t have a web page without some pictures. And we’re also going to make sure the picture is nice and centered on the web page.
<center>
<img src=”mugshot.jpg” width=”200”>
</center><br><br>
For this to work, you need to make sure that there’s a picture called “mugshot.jpg” in the same exact folder as this html file that you’ve created. Make it a picture of yourself!
The next step is one of the most common features of a web page – links to other web pages! Now let’s put a link to Google in your web page:
<a href=”www.google.com”>Click this Link to Google</a>
<br>
<br>
The important thing to note about web links is that they can link to either any webpage on the internet like the Google example above, or they can link to any other html file that you create. For example if you’ve created another webpage html file called “pagetwo.html”, you can replace the “www.google.com” in the example above with “pagetwo.html” and it will call that webpage.
Keep in mind with links that the text between “>” and “</a>” can be anything you like. Whatever you make it – it will show up as a hyperlink on your web page.
By the way – if you want to get fancy, you can replace that text with an image using the image example above – and now your image has become a clickable hyperlink! See…it’s easy!
Finally, you can create an unordered list, an ordered list, or a definition list. An unordered list simply creates a bulleted list. An ordered list will count the items. A definition list will create the necessary formatting for an item and a definition.
Unordered list:
<ul>
<li> Item number one.</li>
<li> Item number two.</li>
<li> Item number three.</li>
</ul>
Ordered list:
<ol>
<li> Item number one.</li>
<li> Item number two.</li>
<li> Item number three.</li>
</ol>
Definition list:
<dl>
<dt>First Item:<dt><dd> Item number one.</dd>
<dt>Second Item:<dt><dd> Item number two.</dd>
<dt>Third Item:<dt><dd> Item number three.</dd>
</dl>
When you’re finished, don’t forget to end your html document with the correct footer formatting:
</body>
</html>
As you can see – once you get accustomed to placing the formatting “tags” before and after the sections of text and paragraphs that you want to format, writing in HTML is actually very easy. Just remember to always place either the paragraph tag <p> or the line break tag <br> everywhere that you want a space between paragraphs or lines.
Only using the simply tips outlined in this short article – you can start creating great online content on your website today. So get writing!
-
-