Web page HTML, HTML editors For Absolute Beginners
Although it is possible to make a web page using simple text editors like Notepad or Word these tools are only suitable for very basic web pages. Anyone who wants to make a website requires a suitable editor.
Introduction
This is a beginners guide to starting HTML . It is for people who have never written any HTML before and want to learn the basics of HTML.
This guide consists of short tutorials containing exercises which I recommend that you do on your own computer. Is is designed to teach you all the HTML you need for making basic web pages and more even more importantly for editing and other HTML web pages.
Learning HTML isn't strictly necessary in order to make web pages or indeed a website. There are many tools (web page editors) which make leaning HTML unnecessary for making web pages.
In fact today very few people make web pages by hand coding HTML and many web masters probably couldn't. However, if you understand basic HTML then you will find it much easier to make and edit web pages, and more importantly, to insert scripts like Google adsense and website counters etc into your web pages.
Before starting html you need to have a few basic tools:
Tools needed
- Text editor like notepad or an HTML editor like Trellian codepage.
- Web Browser like Internet explorer or Netscape Navigator.
We will start by making a web page using notepad and then switch to using Trellian codepage as it is much easier to use and far easier for beginners than typing the code manually.
In order to make some basic HTML web pages and display them using a web browser we do not require a web server. Everything we will be doing will be done on our own computer. I recommend you create directory on you computer for these exercises. I've used c:\webs\BYO in the exercise examples:
We will start learning HTML by making some basic web pages and examining them rather than learning HTML and then making web pages. Therefore before starting HTML we need to learn a few basics about HTML and web pages.
What are 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.
Your first Web Page - An Introduction to HTML
Here you are going to familiarise yourselves with HTML and at the same time make a Web page. The tool we will use to make your first Web page is a simple text editor called Notepad which is available for free on all versions of windows. I recommend you follow these exercises on your own computer.
Exercise 1
1.Open Notepad and type the following:
Make Your own Web pages-for free
2. Save the file as my-first-web-page.txt in a directory on
your computer (eg C:\webs\BYO directory).
3. Close Notepad and then open the File my-first-web-page.txt in notepad. Notepad should display my-first-web-page.txt as shown in Figure 1 below:
Figure 1. Text page displayed by notepad
What you have created is a simple text file meant to be
read by a text editor or word processor and it is displayed correctly.
Exercise 2
1. Now open the file my-first-web-page.txt in notepad and change it
to the following :
<HTML>
Starting HTML- my first web page
</HTML>
2. Then save the file as my-first-web-page.txt. Open the file again using notepad. Notepad should display my-first-web-page.txt as shown in Figure 2 below:
Figure 2. An HTML page as displayed by notepad
Notepad doesn't know that < HTML > is actually a formatting tag and not meant to be displayed, so it displays it as normal text.
Now save the file this time as my-first-web-page.htm and then open it again. This time it should open with Internet Explorer. Internet explorer should display my-first-web-page.htm as shown in Figure 3 below:
Figure 3. An HTML page as displayed by Internet Explorer
Notice that the < HTML > tags are missing as the browser knows what to do with them and uses them to structure and format the text but doesn't display them.
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 Internet Explorer.
Extensions .htm and .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. All web pages on this server use the .htm extension and not .html .
HTML TAGS Explained
We will start by examining the HTML we saw in the earlier lesson. This is a very basic HTML page but it illustrates the most basic feature of HTML.
| <HTML>
Starting HTML- my first web page
</HTML> |
HTML consists of a series of tags which are enclosed in Triangular brackets (< >).These 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.
The 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 opening tags can also contain attributes which modify the tag e.g.
<body bgcolor=white>
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:
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 --Starting HTML---.
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
The basic HTML page that includes all the required tags is shown in the table below:
<HTML>
<HEAD>
<TITLE>starting html</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML> |
If you type the above into Notepad or just cut and paste the code and then save the file as start-html-example.htm . Then if you open start-html-example.htm using internet explorer. Internet explorer should display start-html-example.htm as shown in Figure below:
Notice in the above screen shot how the title "starting HTML" is displayed.
Main HTML Tags
We will now look at the other main HTML tags you need to know. We will start first with the formatting tags:
Headings
The heading structures are most commonly used to divide sections of text. There are six levels of heading (from H1 to H6) and by default browsers will display the six heading levels in the same font, with the point size decreasing as the importance of the heading decreases. Heading tags look like this:
<H1>Text for Heading 1</H1>
<H2>Text for Heading 2</H2>
<H3>Text for Heading 3</H3>
<H4>Text for Heading 4</H4>
<H5>Text for Heading 5</H5>
<H6>Text for Heading 6</H6>
Here is how the headings would be displayed in a browser:
Text for Heading 1
Text for Heading 2
Text for Heading 3
Text for Heading 4
Text for Heading 5
Text forHeading 6
Paragraphs
A page is composed of a number of sections separated by headings, each of which is composed of one or more paragraphs. Each paragraph is composed of words, and each word of letters. The beginning of a paragraph is marked by <P>, and the end by </P>. When a browser comes across a <P> tag it starts a new line and adds some vertical white space between the last line and the new line.
Paragraphs don't strictly speaking require the closing tag </P> but you should use it.
Exercise
Open the start-html-example.htm file in Notepad and insert a few carraige returns (hit enter key a few times) so that we open a little space between the body tags. We are going to insert our text between the body tags.
<HTML>
<HEAD>
<TITLE>starting html</TITLE>
</HEAD>
<BODY>
Our text will go here!
</BODY>
</HTML>
|
Insert the following between the body tags ( copy and paste) :
| <H1> Starting HTML - A beginners Guide </H1>
This is the first paragraph. Notice that I haven't used the paragraph tags as the heading tag itself puts some white space before and after it.
<H2> This is a sub heading with two paragraphs</H2>
<P> Paragraphs are a very important part of web page layout . It is good practice when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long.
</P>
<P> This is the second paragraph and I will use it to illustrate how very large paragraphs look on web pages. Has stated above it is good practice when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long. So here we are going to make a very large paragraph that you can later view in a browser of your choice just to see it it looks ok or not. The paragraph itself is not exceptionally long as it only spans 7 lines, Can you imagine how it would look it it spanned 10 or 15 lines.
</P>
<P>
Lets finish with a nice short paragraph
</P> |
The file should look like this:
Starting HTML - A beginners Guide
This is the first paragraph. Notice that I haven't used the paragraph tags as the heading tag itself puts some white space after it.
This is a sub heading with two paragraphs
Paragraphs are a very important part of web page layout . It is good practise when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long.
This is the second paragraph and I will use it to illustrate how very large paragraphs look on web pages. Has stated above it is good practise when writing for the Internet to have plenty of white space between text. Therefore most paragraphs should be short and generally not more than 5 lines long. So here we are going to make a very large paragraph that you can later view in a browser of your choice just to see it it looks ok or not. The paragraph itself is not exceptionally long as it only spans 7 lines, Can you imagine hhow it would look it it spanned 10 or 15 lines.
Lets finish with a nice short paragraph |
Formatting Text
Using Fonts
The problem with choosing fonts for web pages is that the font needs to be installed on the user's computer in order for the web browser to display it properly.
Fonts will always fall into one of two typeface categories either serif or sans-serif. The serif typefaces (the font has curly bits at the top and bottom ends on the letters) are easier to read on paper, and are used in newspapers and books, but the sans-serif (which does not have the curly bits) typefaces are easier to read on a computer screen.
The following are what are considered to be web safe fonts:
Arial - This text is in 12 pt Arial font.
Times Roman - This text is in 12 pt Times Roman font.
Verdana - This text is in 12 pt Verdana font.
The majority of web sites including this one use the Verdana sans serif font
In case the web site user does not have the font installed on their computer you have chosen for a page it is best to specify several fonts all in the same typeface to keep your design as near as possible to the way you designed it.
If your chosen font is not available on the user's computer the web browser will show its default font. This is usually 'Times New Roman' for Windows machines and 'Times' on Macintosh machines.
Use the HTML font tag to specify several font tags with the with the font you want to use first, followed by equivalent fonts on other machines, and in case the user does not have any of these fonts on there system then place a generic typeface last: -
For example the body part of my web pages all start with
<FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>
and end the body part with the closing font tag
</FONT>
this is illustrated below
<HTML>
<HEAD>
<TITLE>starting html</TITLE>
</HEAD>
<BODY>
<FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>
Our text will go here!
</FONT>
</BODY>
</HTML> |
The font tag can have several attributes (these modify the tag in some way ). The ones above are size and style. Notice that in the case of the style attribute it has multiple options which are themselves separated by commas and all enclosed in quotes.
The font tag is usually used for a block of text or the entire page but it can also be used on individual characters.
The HTML for this is shown below:
| c<FONT size=4>h</FONT>arac<FONT color=#ff0000 size=5>t</FONT>ers |
Notice how I changed the color and size of the t by using the color and size attributes. The HTML is below:
| <FONT color=#ff0000 size=5>t</FONT> |
The Size attribute
the size attribute can have a value from 1-7 they equate to a point size from 8 to 36.
| Size |
Point |
| 1 |
8 |
| 2 |
10 |
| 3 |
12 |
| 4 |
14 |
| 5 |
18 |
| 6 |
24 |
| 7 |
36 |
The Color Attribute
The color attribute has an is a hexadecimal number representing red, green and blue components preceded with a hash e.g. #rrggbb. Where rr= red component etc.
Here are some of the common colors:
| |
|
|
|
|
|
| FFFFFF |
000000 |
FFFF00 |
FF0000 |
008000 |
0000FF |
| white |
black |
yellow |
red |
green |
blue |
Bold and Italics and Underlined Text
To emphasis sections of text you can either make the text bold or place in italics, underline or a combination of all three.
the tags used are:
- <STRONG></STRONG>
- <EM></EM>
- <U></U>
Here are some examples of how to use them:
This text is bold- and this is the HTML used:
| <STRONG>This text is bold</STRONG> |
This text is in italics- and this is the HTML used
| <EM>This text is in italics</EM> |
This text is in underlined ----and this is the HTML used
| <U>This text is in underlined</U> |
This text is bold, underlined and in italics ----and this is the HTML used
<STRONG><EM><U>This text is bold, underlined and in
italics</U></EM></STRONG> |
Lists and Tables and Images
Lists
If you have a number of items to place in a list then you can use either plain, numbered, or bulleted lists as well as lists of definitions. The lists are formed by a code to specify the list type -ordered or unordered and a secondary code to specify the lists items.
Primary code tags are:
- <OL></OL>-- ordered list
- <UL></UL>--unordered list i.e. bulleted
- <DL></DL>---definition lists
Secondary Tags
- <LI></LI>
- <LI></LI>
- <DD></DD>
- <DT></DT>
Unordered list Example:
- This is an unordered list-item 1
- This is an unordered list-item 2
- This is an unordered list-item 3
This is the HTML to produce the list above. My notes are in red
| <UL> <---------- Primary Tag open
Secondary Tag open Secondary tag close
<LI>This is an unordered list-item 1</LI>
<LI>This is an unordered list-item 2</LI>
<LI>This is an unordered list-item 3</LI>
</UL> <---------- Primary Tag close |
Definition lists deserve a special mention as they are very useul for alist that links words or pharses with a much longer definition e.g. in a dictionary.
Tables
Tables like lists are used for structuring data. A Table is formed using 3 tags:
<<TABLE></TABLE> Indicates start and end of table
<TR></TR>dd Indicates start and end of row
<TD></TD>dd Indicates start and end of a cell
A table with one row and three columns would look like this (with the text cell1, cell2, Cell3 in the cells) :
<TABLE>
<TR>
<TD>cell1</TD><TD>cell2</TD><TD>cell3</TD>
</TR>
</TABLE>
Tables on Web sites are used to present information in a particular way and are by far the most popular way of organising a web page. Tables help designers layout text and graphics in the page so that they remain in specific places and relationships to other information on the page.
Tables also help determine what happens to the content of a web page when the browser window is re-sized. See laying out a web page using tables for more information.
I would also recommend you consult an HTML book for more information about tables. Web page editors like FrontPage or Trellian make making tables very easy. I wouldn't recommend you to try manually coding all but the most basic table.
Inserting Images
To inset an image on a page use the <IMG> tag as follows
<IMG SRC="my picture"> where my picture is the name and location of the image.
It is usual to offer alternative text for people who use non graphical browsers nut more importantly today for the search engines. the format is:
<IMG SRC="my picture" ALT= " if can't see my picture">
You can also specify the image size using
width= and height= attributes and even give the image a border using the border= attribute.
Here is an example of inserting an image called flowers.gif with a size of 300*200 and a border 1 pixel thick.
| <IMG SRC="flowers.gif" ALT= " picture of a flower" width=300 height=200 border=1> |
Anchors and Linking
Links allow the reader to jump from one section of a document to another section of the document or to a new document altogether. This is shown in Figure 5 below:
Figure 5 linking in an HTML
In order to link you require two things:
- The start of the link.
- The destination of the link.
The start of the link is called the hotspot and it shows up in the browser as underlined and in normally in blue until it has been clicked. It is designated in HTML by use of the anchor tag <A> . Unlike simple tags the anchor tag has extra attributes which specify the name of the tag (so that it can be linked to) and the destination web page or page section. The form is as shown in Figure 6:
Link destinations and anchors
The destination of the link can be either:
- Another web page
- A particular location in an another web page (named anchor or bookmark).
- A location within the same page -The ability to link to a specific location within a web page is particularly useful when dealing with large web pages.
When the destination is another web page then the destination is the URL of the web page. The URL can be either a relative URL (if it is on the same website) or an absolute URL (if it is on another website).
In order to link to allocation in a web page the location need to have an anchor or bookmark. For example to make an anchor out of the text Example links below I would use the anchor tag <A></A> as follows.
| <A name=example>Example links:</A> |
Where the link name example would be used in the link used to access it.
To direct a viewer to this area of the web page you would create a link to the named anchor using <A HREF="#anchor name>. The example links: text below is a named anchor (anchor name= example ).A link to this anchor would look like this:
Click to see some examples
The HTML code is
| Click to see <A href="#example">some examples</A> |
Example links:
Here are a collection of relative and absolute link examples:
Link to home page this is a relative link. HTML is:
| <A href="index.htm">Link to home page</A> |
link to top of this page this is a relative link to a bookmark. HTML is:
| <A href="#Anchors and Linking">link to top of this page</A> |
link to another web site this is an absolute link to a page on another web site.. HTML is:
| <A href="http://www.oeupdates.com/index.html"> link to another web site</A> |
Absolute Link examples:
Link to home page absolute link
link to top of this page absolute link to a bookmark
link to another web site this is an absolute link to a page on another web site
HTML for the above links:
<a href="http://www.affiliated-business.com/index.htm">Link to home page</a> absolute link
<a href=http://www.affiliated-business.com/tools/index.html#Anchors and Linking>link to top of this page</a> absolute link to a bookmark
<a href="http://www.oeupdates.com/index.html">link to another web site</a> this is an absolute link to a page on another web site |
|
