Starting HTML Navigation
- Starting Html -Intro
- Lesson1-An Introduction to HTML-Your first Web Page
- Lesson2-HTML TAGS Explained
- Lesson3-Formatting Text - Fonts
- Lesson4-Lists and Tables and Images
- Lesson5-Anchors and Linking
An Introduction to HTML
We will start learning HTML by creating some basic web pages and examining them, rather than learning HTML and then making web pages.
Web Pages are simply text pages with special formatting Tags which describe how the text appears i.e. is it bold, which font etc. This formatting is called HTML- Hypertext Mark-up Language.
HTML ( HyperText Markup Language), is a mark-up languages used to encode Web pages. It provides the web browser with information for laying out and presenting the web page.:
Exercise 1
Please watch the video first and then do the exercise later.
1.Open Notepad and type the following:
MY First Web Page
2. Save the file as page1.txt in a directory on
your computer (eg C:\course directory).
3. save the File again but this time change the file extension to .html. So the page becomes page1.html.
3. Open the course directory and you should now have two files page1.txt and page1.html. Notice how your system displays them.
Yours may look slightly different than the screenshot below, as the icon depends on your default browser.
4. Open the page1.html file in notepad (right click and choose notepad to open the file.
5. Edit the text so that the word page is shown in bold- tip use the b tag as shown in the video.
6. Save the file and then open it with the browser and check that the word page is shown in bold type.
7. Copy the text shown below between the dashed lines and paste it into the page.html file replacing the text that you have there.
--------------
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
My First Web <b>Page</b>
</BODY>
</HTML>
---------------
8. Save the file and open it with the browser. You should see exactly the same page as before.
End Exercise 1
File Extensions .htm and .txt
The file extension .htm or .txt defines what application is used to open the file. Files ending with .txt files are opened by Notepad (or any other text editor) and .htm or .html extensions are opened by your default web browser (Firefox or Internet Explorer).
Extensions .htm and .html
HTML Web pages have the .htm or .html file extension e.g index.htm or index.html.
Which one you use is up to you but if you start using .htm then stay consistent and save all you files as .htm files.
HTML consists of a series of tags which are enclosed in Triangular brackets (< >). HTML tags are in pairs and are case-insensitive; that is, it doesn't matter whether you type them in upper or lower case. Using upper case makes the tags easier to pick out in a document, but you can do whatever you like.
HTML tags
HTML tags are used by the browser for formatting the page but they are not displayed. Tags typically occur in 'begin-end' pairs. These pairs are in the form
<tag> .... .. </tag>
Where the <tag> indicates the beginning of a tag-pair, and the </tag> indicates the end. (The dots indicate an arbitrary amount of content between the tags.
The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends.
The absolute most basic of all possible Web documents is:
| <HTML> </HTML> |
That's it. If you were to load such a page into a Web browser, it wouldn't do anything except give you a blank screen, but it is a valid Web page.
Apart from a few exceptions HTML is case insensitive and so <HTML> is the same as <html>.
Next come the header tags <HEAD> and </HEAD>. The header tags contain all of the document's header information like the document title and so on. They are not displayed by the browser.
Between the title tags <TITLE> and </TITLE> you should have the title of your document in this case --My First Web Page---.
This will appear at the top of the browser's title bar, and also appears in the history list of the browser and any bookmarks.
If you don't type anything between the title tags or don't include the title tags at all then the browser will typically use the actual file name for the title which can be confusing.
Finally the body tags <BODY> and </BODY>, between which you find everything that gets displayed in the browser window.
Basic HTML Page
A basic HTML page that includes all the required tags is shown below:
| <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> Main page content goes here </BODY> </HTML> |
Continue to next---->Lesson 2