An introduction to the InternetBasics of HTML [Archives:2003/649/Education]
July 10 2003
 |
Academic Head
NCC Education, Yemen Center
In the previous lessons, we said that web pages are actually HTML files. HTML stands for HyperText Markup Language, the most used programming language in formatting Internet web pages. There are several versions of HTML. The latest version is HTML 4.0. HyperText here means the text that references another text in a nonlinear method. You click over links in form of words or images to move from one source to another in the Internet. Markup here means putting the text, images or pictures along with tables in one page in an understandable way. And finally, Language means programming language. It is worth bearing in mind that there are other languages used in web pages designing but HTML was the first and is still the dominant language.
Browsing Web pages
When you type the Uniform Resource Locator (URL) of any web site in the Internet, the browser requests an HTML page to be transferred from the web site server (serving computer) to your computer. Then your browser interprets the contents of this HTML file and displays the result of the interpretation in the computer monitor. You can also open the HTML file and look in the coding that formats the page. To check the code of any HTML page, you just go to View menu in your browser and down to Source. For example, when you try to apply this to www.yementimes.com you will find the source of this page which will look something like fig 1.
As you can see in fig1, HTML consists of text and tags and is intended to be read by a browser that uses the tags to decide how to display the text. The browser is also expected to recognize and play any graphics or audio included in the HTML .The source of the HTML consists of simple ASCII text (text consisting of just the normal characters that can be typed at the keyboard). Because of that you can just use any simple text editor program like NOTEPAD to create HTML source and that is what we will use in applying our examples. Other powerful editors that are available can also be used such as Micro Soft FrontPage, Macromedia Dream waver and others. However NOTEPAD is the best tool to practice coding in HTML.
HTML Source
A good way of starting to learn HTML is to experiment with some simple text and tags. We will use the Yemenkids website example as a framework for this experimentation.
Now we need to introduce some formatting. HTML formatting is all accomplished with tags, so you need to become familiar with the concept and the details. Tags usually come in pairs. One tag (the start tag) switches on some formatting feature and a second tag (the end tag) switches that feature off. Sometimes the end tag is not necessary and can be omitted. Tags are delimited by angle brackets < >. The brackets contain a name and possibly other information that identifies what the tag should do. The end tag is identified as an end tag by a slash / inside the angle brackets.
Lets start NOTEPAD and try some of these tags. To start NOTEPAD you need to go to “Accessories” in your start menu programs and you will find NOTEPAD there. Type the following code in NOTEPAD and please don't include the numbers because we just need them to refer to the lines for explanation.
When you finish typing the code saves the file as index.htm or index.html either will work fine. If you didn't, the file will be saved as text file and you will not be able to browse by using the Internet explorer. After you save the file go to the folder where the file is saved and click on it to run. The file should have an Internet explorer icon. The result of running this file is an empty white web page except for one line that displays “welcome to Yemen Kids On-line Website”. Ok, how did that happen? Let's go back to the code.
HTML Starting
Any HTML file should start with the starting tag that tells the browser that this file should be dealt as an HTML file. The tag should be at the first line of your HTML file as you can see in our example in line 1 the tag ““. In line 8 I had to close this tag to terminate the code by using the closing tag “''. It is worth bearing in mind that the tags don't have to be written in capital letters; however, having them capitals will make the code easy to read. So we have to know that “'' and “'' tags are used to delimit an HTML document. The effect of the start tag is to inform the browser that an HTML document follows.
Head
The “” and “” mark off information about the whole document. This information is not displayed when the page is browsed but it is used by the browser and any audit applications in the client computer. Most of the time the information in the “head” is to tell about the standards used by the web designer during the coding. The web page is not affected if the head tags are omitted.
Title
In line 3 I have included the title of the web page. The title of the web page is always displayed in the top left corner of your computer browser when you browse the web page. So between the opening and the closing tags of the title I typed” Yemen Kids On-line” and that will be the title of this web page. In line 4 I closed the head which means that the title of the page is to be used as information about the document.
Body
The “” and “” tags define the body or text of the page. All the content which is intended to be read goes here. In the body I just needed the web page to display one sentence that says “Welcome to Yemen Kids On-line web site”. In line 7 I closed the body tag to delimit the content of the web page.
Next week: More about HTML.
——
[archive-e:649-v:13-y:2003-d:2003-07-10-p:education]
