Web authoring (HTML)
Introduction
HTML Stands for Hyper Text Mark-up Language. It is the language behind all of the web pages you see on the world-wide web. To create a webpage using HTML you could use any of the following:
· A text editor such as Notepad, comes free with MS Windows or Text Edit for the Apple Mac
· The code view of a web authoring program e.g MS FrontPage or Adobe Dream Weaver
· Dedicated HTML editor such as NotePad++ for windows or Text Wrangler for Apple Mac
· A web browser such as Internet Explorer, Mozilla FireFox, Google Chrome, Opera, Safari e.t.c
You do not need to be connected to the Internet while making or creating your websites.
If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dream weaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. HTML is used to make websites. It is as simple as that!
You will also learn about XHTML (Extensible Hyper Text Mark-up Language) which, in short, is a new and well-structured way of writing HTML.
For the IGCSE ICT course the HTML you have to know can be broken down into.
· Basic web page structure
· Controlling web page layout
· Different types of text
· Adding images
· Adding hyperlinks
· Head elements
Basic webpage structure
Web pages have to be created in a particular way. All web pages must start with <html> and end with </html>. Within theses tags the document is divided into two parts
· Head
· Body
The content of the head section doesn't actually appear in the web page. It is used to hold links to style sheets add Meta data and set the page title.
The content of the body section is what actually appears in the web page window. Most of your work will be in this section.
The basic structure of a webpage is shown here.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
ELEMENTS AND TAGS
Elements give structure to a HTML document and tell the browser how you want your website to be presented. Generally elements consist of a start tag, some content, and an end tag.
Tags are labels you use to mark up the beginning and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
There are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.
Sometimes we can have nested tags i.e. tags inside tags. E.g. <B><I>Some Text</I></B>.
This is perfectly normal. However, we must be careful when closing the tags as we close the last opened tag first.
HTML is all about elements. To learn HTML is to learn and use different tags.
Note: Whereas the case of the tags does not really matter a lot, when creating an HTML web page, it is advisable to always write the tags in lower case.
Creating Your First Website.
Let us start with something simple. Let us create a web page that shows the following message: “Hello, welcome to my first web page”.
Open Notepad or any other text editor on your system. This is where we shall type our web page elements.
The next thing is to tell the browser that you will "talk" to it in the HTML language. This is done with the tag <html>. So before you do anything else type "<html>" in the first line of your document in Notepad. Create the basic structure if the website. Refer to the structure given above.
Now let us spice our web page up a little. To give our web page a title, type the following between the <head> and </head> tags.
<title> My first website </title>
Please also note that we have used the <title> element and it is within the <head> element.
This title appears in the Title bar of the browser window.
The text to be displayed in the web page is place in the <body> section. So between the <body> and </body> tags, type the following:
<p>Welcome! This is my first website.</p>
The <p> stands for "paragraph" which is a text paragraph.
At this stage, the HTML document should look like this:
<html>
<head>
<title>My first website </title>
</head>
<body>
<p>Welcome! This is my website.</p>
</body>
</html>
Next all you have to do is to save it to your hard drive and then open it in your browser:
· In Notepad choose "Save as..." under "File" in the top menu.
· Choose "All Files" in the "Save as type" box. This is very important - otherwise, you save it as a text document and not as an HTML document.
· Now save your document as "page1.htm" (the ending ".htm" indicates that it is an HTML document. ".html" gives the same result. It doesn't matter where you save the document on your hard drive - as long as you remember where you saved it so you can find it again.
Now go to the browser:
· In the top menu choose "Open" under "File" (or press CTRL+O).
· Click "Browse" in the box that appears.
· Now find your HTML document and click "Open".
You should now be able to see a web page with the words:
Welcome! This is my website.
MORE BASIC HTML TAGS
<BR>
<BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which means that no codes are saved and so your browser will not know when to end a line and continue on to the next line. The <BR> tag does this for you.
<P>
<P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.
<HR>
<HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put there with <HR> tags.
HEADER TAGS
Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time.
There are only six HEADER tags and they range from H1 to H6.
H1 produces the largest size heading and is called the "level 1 heading".
H6 produces the smallest size heading and is called the "level 6 heading".
To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML document (this will also allow you to experiment with the document):
<HTML>
<HEAD>
<TITLE>HEADING LEVELS</TITLE>
</HEAD>
<BODY>
<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.
<H2>THIS IS H2.</H2> THIS IS NORMAL SIZE.
<H3>THIS IS H3.</H3> THIS IS NORMAL SIZE.
<H4>THIS IS H4.</H4> THIS IS NORMAL SIZE.
<H5>THIS IS H5.</H5> THIS IS NORMAL SIZE.
<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.
<HR />
</BODY>
</HTML>
Save your HTML document and open it in a web page.
LIST OF HTML TAGS AND WHAT THEY REPRESENT
HTML Stands for Hyper Text Mark-up Language. It is the language behind all of the web pages you see on the world-wide web. To create a webpage using HTML you could use any of the following:
· A text editor such as Notepad, comes free with MS Windows or Text Edit for the Apple Mac
· The code view of a web authoring program e.g MS FrontPage or Adobe Dream Weaver
· Dedicated HTML editor such as NotePad++ for windows or Text Wrangler for Apple Mac
· A web browser such as Internet Explorer, Mozilla FireFox, Google Chrome, Opera, Safari e.t.c
You do not need to be connected to the Internet while making or creating your websites.
If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dream weaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use. HTML is used to make websites. It is as simple as that!
You will also learn about XHTML (Extensible Hyper Text Mark-up Language) which, in short, is a new and well-structured way of writing HTML.
For the IGCSE ICT course the HTML you have to know can be broken down into.
· Basic web page structure
· Controlling web page layout
· Different types of text
· Adding images
· Adding hyperlinks
· Head elements
Basic webpage structure
Web pages have to be created in a particular way. All web pages must start with <html> and end with </html>. Within theses tags the document is divided into two parts
· Head
· Body
The content of the head section doesn't actually appear in the web page. It is used to hold links to style sheets add Meta data and set the page title.
The content of the body section is what actually appears in the web page window. Most of your work will be in this section.
The basic structure of a webpage is shown here.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
ELEMENTS AND TAGS
Elements give structure to a HTML document and tell the browser how you want your website to be presented. Generally elements consist of a start tag, some content, and an end tag.
Tags are labels you use to mark up the beginning and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
There are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.
Sometimes we can have nested tags i.e. tags inside tags. E.g. <B><I>Some Text</I></B>.
This is perfectly normal. However, we must be careful when closing the tags as we close the last opened tag first.
HTML is all about elements. To learn HTML is to learn and use different tags.
Note: Whereas the case of the tags does not really matter a lot, when creating an HTML web page, it is advisable to always write the tags in lower case.
Creating Your First Website.
Let us start with something simple. Let us create a web page that shows the following message: “Hello, welcome to my first web page”.
Open Notepad or any other text editor on your system. This is where we shall type our web page elements.
The next thing is to tell the browser that you will "talk" to it in the HTML language. This is done with the tag <html>. So before you do anything else type "<html>" in the first line of your document in Notepad. Create the basic structure if the website. Refer to the structure given above.
Now let us spice our web page up a little. To give our web page a title, type the following between the <head> and </head> tags.
<title> My first website </title>
Please also note that we have used the <title> element and it is within the <head> element.
This title appears in the Title bar of the browser window.
The text to be displayed in the web page is place in the <body> section. So between the <body> and </body> tags, type the following:
<p>Welcome! This is my first website.</p>
The <p> stands for "paragraph" which is a text paragraph.
At this stage, the HTML document should look like this:
<html>
<head>
<title>My first website </title>
</head>
<body>
<p>Welcome! This is my website.</p>
</body>
</html>
Next all you have to do is to save it to your hard drive and then open it in your browser:
· In Notepad choose "Save as..." under "File" in the top menu.
· Choose "All Files" in the "Save as type" box. This is very important - otherwise, you save it as a text document and not as an HTML document.
· Now save your document as "page1.htm" (the ending ".htm" indicates that it is an HTML document. ".html" gives the same result. It doesn't matter where you save the document on your hard drive - as long as you remember where you saved it so you can find it again.
Now go to the browser:
· In the top menu choose "Open" under "File" (or press CTRL+O).
· Click "Browse" in the box that appears.
· Now find your HTML document and click "Open".
You should now be able to see a web page with the words:
Welcome! This is my website.
MORE BASIC HTML TAGS
<BR>
<BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which means that no codes are saved and so your browser will not know when to end a line and continue on to the next line. The <BR> tag does this for you.
<P>
<P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.
<HR>
<HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put there with <HR> tags.
HEADER TAGS
Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time.
There are only six HEADER tags and they range from H1 to H6.
H1 produces the largest size heading and is called the "level 1 heading".
H6 produces the smallest size heading and is called the "level 6 heading".
To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML document (this will also allow you to experiment with the document):
<HTML>
<HEAD>
<TITLE>HEADING LEVELS</TITLE>
</HEAD>
<BODY>
<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.
<H2>THIS IS H2.</H2> THIS IS NORMAL SIZE.
<H3>THIS IS H3.</H3> THIS IS NORMAL SIZE.
<H4>THIS IS H4.</H4> THIS IS NORMAL SIZE.
<H5>THIS IS H5.</H5> THIS IS NORMAL SIZE.
<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.
<HR />
</BODY>
</HTML>
Save your HTML document and open it in a web page.
LIST OF HTML TAGS AND WHAT THEY REPRESENT
· ADDRESS - Address information · APPLET - Java applet · AREA - Hotzone in imagemap · A - Anchor · BASE - Document location · BASEFONT - Default font size · BIG - Larger text · BLOCKQUOTE - Large quotation · BODY - Document body · BR - Line break · B - Bold · CAPTION - Table caption · CENTER - Centered division · CITE - Short citation · CODE - Code fragment · DD - Definition · DFN - Definition of a term · DIR - Directory list · DIV - Logical division · DL - Definition list · DT - Definition term · EM - Emphasized text · FONT - Font modification · FORM - Input form · H1 - Level 1 header · H2 - Level 2 header · H3 - Level 3 header · H4 - Level 4 header · H5 - Level 5 header H6 - Level 6 header · HEAD - Document head · HR - Horizontal rule · HTML - HTML Document · IMG - Images · INPUT - Input field, button, etc. · ISINDEX - Primitive search · I - Italics |
· · KBD - Keyboard input · LINK - Site structure · LI - List item · MAP - Client-side imagemap · MENU - Menu item list · META - Meta-information · OL - Ordered list · OPTION - Selection list option · PARAM - Parameter for Java applet · PRE - Preformatted text · P - Paragraph · SAMP - Sample text · SCRIPT - Inline script · SELECT - Selection list · SMALL - Smaller text · STRIKE - Strikeout · STRONG - Strongly emphasized · STYLE - Style information · SUB - Subscript · SUP - Superscript · TABLE - Tables · TD - Table cell · TEXTAREA - Input area · TH - Header cell · TITLE - Document title · TR - Table row · TT - Teletype · UL - Unordered list · U - Underline · VAR - Variable |