Tuesday, July 28, 2009

Create Your Own Web Page

Overview



You need to understand that there is a language used to create a Web page so that your Browser (Firefox, Internet Explorer, Opera, etc.) can display the content in that Web page properly. That language is called HTML (Hypertext Markup Language) and it consists of a set of tags and rules which decide on how the content will be displayed. XML would be another more complicated language, but the majority of the people use HTML. A reformulated and better to use version of HTML is called XHTML (Extensible Hypertext Markup Language) which conforms to XML.



Setting Up A Website Folder



I'll assume you are using Windows since most of the population uses that. Create a folder on the Desktop of your computer (Right click desktop->New->Folder) and give it a name to represent your Website. If you cannot think of a name, then call it "website". Now open that folder and create a new file within that folder (Right click in folder->New->Text Document) and name it "index.html". Upon hitting "Enter", you may be prompted with a message about changing the file name. Click "Yes" to change it. Files with a ".html" or ".htm" extension are considered to be Web pages and you probably noticed that the file icon (if visible) changed to an "Internet Explorer" icon. Double-click the file and it should open up in your default browser which would be "Internet Explorer" for most people. Notice that the page is blank.



Displaying Content On Your Web Page



Content that displays on a Webpage can range from text to images to embedded video etc. We'll stick with the basics. Open the newly created "index.html" file in a text editor (Right click on file->Open With->Notepad). There is a better text editor I like to use called "Notepad++" which colorized the text depending on the language used.



In order to display something on that blank Web page that opened up in your browser, there are a few tags or elements that are needed that will give you the basic framework for the page. Type or copy and past the following HTML into the "index.html" file and save the file:




<html>
<head>
<title>Web Page Title</title>
</head>
<body>
Hello World
</body>
</html>


As you can see, there is a starting and ending "html" tag "<html>" and "</html>". This is a kind of declaration saying that anything between these two tags or within this element is considered to be "HTML". In addition, there are starting and ending "head" and "body" tags within the "html" element. For this example, you just need to remember that the "head" element will never be displayed on the Web page, only the "body" element will be displayed. In addition, there is a "title" tag within the "head" element which is displayed at the top of your browser window. If you open the Web page again (refresh or reload it if already open), you should see the title displayed at the top of the browser window. In addition, you should see "Hello World" displayed within the browser. Try and change the text within the title and body elements and refresh the Web page.



Creating Headers



Between the opening and closing "body" tags, let's change it so it looks like the following code:




<html>
<head>
<title>Web Page Title</title>
</head>
<body>
<h1>Header Size 1</h1>
<h2>Header Size 2</h2>
<h3>Header Size 3</h3>
<h4>Header Size 4</h4>
<h5>Header Size 5</h5>
<h6>Header Size 6</h6>
</body>
</html>


If you refresh the page in your browser, you will see a very large "Header Size 1" and a very small "Header Size 6". These are the header elements which go from 1 to 6 in size. If you have ever outlined a research paper for your writing course, these headers would represent all the points or bullets of that outline. You can repeat these elements as much as you like and you don't have to use all of them, but remember to use the opening and closing tags around the content such as "<h2>" and "</h2>". The forward slash indicates a closing tag.



Creating Paragraphs



To create a paragraph, we use the "<p>" and "</p>" paragraph tags. Make your code look like mine to see paragraphs:




<html>
<head>
<title>Topic Outline</title>
</head>
<body>
<h1>Main Topic</h1>
<p>The main topic paragraph would go here.</p>

<h2>Sub Topic 1</h2>
<p>The first sub-topic paragraph would go here.</p>

<h2>Sub Topic 2</h2>
<p>The second sub-topic paragraph would go here.</p>

</body>
</html>


Creating Bold, Italics, and Underline Text



To create bold, italics, or underline text, you would use one of the following tags. In addition, you can combine them to create bold-underline or italic-bold text etc. Just remember to close the last opened tag first such as "<b><i>content</i></b>". See below examples.




<b>Bold Text</b>
<strong>Strong Text</strong>
<i>Italics Text</i>
<em>Emphasis Text</em>
<u>Underline Text</u>
<b><u>Bold-Underline Text</u></b>
<i><b>Italic-Bold Text</b></i>


Let's update our current Web page code:




<html>
<head>
<title>Topic Outline</title>
</head>
<body>
<h1>Main Topic</h1>
<p>The <strong>main topic</strong> paragraph would go here.</p>

<h2><em><u>Sub Topic 1</u></em></h2>
<p>The first <strong>sub-topic</strong> paragraph would go here.</p>

<h2><em><u>Sub Topic 2</u></em></h2>
<p>The second <strong>sub-topic</strong> paragraph would go here.</p>

</body>
</html>


Resources



That should be enough of the basics. Here are some links for more information. Once you get past the basics, be sure to check our CSS (Cascading Style Sheets) for styling multiple Web pages so they look consistent and are easy to maintain.



No comments:

Post a Comment