An Ordered list is one that is numbered and may also be used to indicate sequential form of information. <ol> and </ol> are opening and closing tags for an ordered list respectively. The code used for ordering the List as below: [Read more…] about HTML OL – Ordered lists
HTML table tag
A table is an orderly arrangement of data distributed across a grid of rows and columns similar to a spreadsheet. In printed documents, tables commonly serve a subordinate function, illustrating some point described by accompanying text. Tables still perform this illustrative function in HTML documents. [Read more…] about HTML table tag
HTML UL – Unordered lists – Bulleted lists
Unordered lists are used to represent a set of items that have a relation among themselves but do not follow a specific order. The syntax is same as that of ordered list, only <ol> and </ol> tags are replaced by <ul> and </ul>. [Read more…] about HTML UL – Unordered lists – Bulleted lists
What is CGI? | Common Gateway Interface Definition
The Common Gateway Interface (CGI) is a specification defined by the World Wide Web Consortium (W3C), defining how a program interacts with a Hyper Text Transfer Protocol (HTTP) server. The Common Gateway Interface (CGI) provides the middleware between WWW servers and external databases and information sources. CGI applications perform specific information processing, retrieval, and formatting tasks on behalf of WWW servers. [Read more…] about What is CGI? | Common Gateway Interface Definition
HTML frame tag
A frame is an independent scrolling region or window, of a web page. A framed document divides a browser window into multiple panes or smaller window frames. Each frame may contain a different document. Frames can communicate with each other so that an action performed on a page in one frame can change the contents and behavior of another frame. [Read more…] about HTML frame tag
How to add image in HTML
Adding an image in any part within an HTML is as simple as wrapping text in <p> and </p> tags. The label used to insert images in the HTML documents: <img> tag. It’s an empty tag and contains attributes only, that tag consists of a single instruction, and so </img> does not exist, and their use is prohibited. We can insert an image within <body>…</body> tag as if it were a word of it and displayed by the browser after the text. The src attribute used to add the image source, i.e., URL of this image. The alt attribute is for adding alternative text, width for adding width, and height for adding this image’s height. [Read more…] about How to add image in HTML
HTML Lists
Now day’s lists are omnipresent. Whenever one jots down the items to be bought from a grocery store, one goes through the telephone directory to look for a particular phone number or looks up at the table of contents of a book, or is taking the help of lists to make his task easier. In fact, lists are the best method of organizing information and presenting it in a structured fashion.
There are 3 kinds of lists:
(1) Ordered lists (Numbered lists)
(2) Unordered lists (Bulleted lists)
(3) Definition lists
Ordered Lists: <OL> ...............</OL>An ordered list is one that is numbered and may also be used to indicate sequential form of information. <OL> and </OL> are opening and closing tags for an ordered list respectively. The code used for ordering the List as below:
<html>
<head>
<title>ordered list without numbers</title></head>
<body>
software testing methods
<ol> black box testing
white box testing
control structure testing
</ol>
</body>
</html>
We observe from above code that text is indented during the actual printing of the list. However, the listed items have not been printed on separate lines. HTML does not recognize line breaks, unless it is told by using <P> or <BR> tags. The list item tag <LI> is used to remove this problem. It can be noticed in the code as shown below:
<html>
<head><title>ordered list with numbers</title></head>
<body>
software testing methods
<ol>
<li> black box testing
<li> white box testing
<li> control structure testing
</ol>
</body>
</html>
When the browser encounters the tag <LI> for each item, it starts a new line, indents and adds a number. Thus we get the output as seen in the above figure1.15. Ordering is typically rendered by a numbering scheme, using Arabic numbers, letters or Roman numerals.
By default numbered lists use Arabic numerals (1, 2, 3, 4). So by writing <OL type = a> instead of just <OL> we have overridden the default & created a numbered list which uses alphabets for numbering. The code shows the OL listing as:
<html>
<head><title>ordered list with numbers</title></head>
<body> software testing methods
<oltype= a>
<li> black box testing
<li> white box testing
<li> control structure testing
</ol>
</body>
</html>
The values & Styles for the type attribute are given below:
Value Style Example
1 (default) Arabic 1, 2, 3, 4, ….
a Lower case alpha a, b, c, d, ….
A Uppercase alpha A, B, C, D….
I Uppercase Roman I, II, III, …..
i Lower case Roman i, ii, iii,…….
The start attribute: This attribute is used to override default list numbering when a list is divided into multiple parts. The use of start attribute can be shown in the code as.
<htm>
<head><title>ordered list with numbers</title></head>
<body>
impact printers
<ol>
<li> dot matrix
<li> chain printer
<li> drum printer
<li> ink jet printer
</ol>
<p>non-impact printers
</p>
<olstart=5>
<li> laser printer
<li> electrostatic printer
<li> wax printer
</ol>
</body>
</html>
The use of <OL start = 5> instead of <OL> makes the browser understand that the numbering of the second list is to start from 5 & not 1 (The default value)
Nested Lists
A nested list is a list within a list that can extend up to several levels. One of the most common places where we can see a nested list is in the contents of a book. To create a nested list a new set of ordered list tags is to be included within the current list tags. The code shows the insertion of a new list within the original list i.e. (nested list).
<html>
<head><title>nested list </title></head>
<body> type of printers
<oltype=a>
<li> impact printers
<oltype=1>
<li>character printers
<oltype=i>
<li> dot matrix
<l1> ink jet printer
<l1> letter quality
</ol> <li>line printers
<oltype=i>
<li>chain printers
<li>drum printers
</ol> </ol>
<li>non-impact printers
<oltype= a>
<li> laser printer
<li> electrostatic printer
<li> wax printer
<li> ink jet printer
</ol> </ol>
</body>
</html>
Unordered list : <UL >………… </UL>
Unordered lists are used to represent a set of items that have a relation among themselves but do not follow a specific order. The syntax is same as that of ordered list, only <OL> and </OL> tags are replaced by <UL> and </UL>. In an ordered list items of the lists are numbered (1,2,3,4…; a,b,c,d or I,II, III, IV….) but in an unordered list the items are presented using bullets. The code for an unordered list is given as:
<html>
<head><title>unordered list </title></head>
<body>
software testing methods
<ultype= a>
<li> black box testing
<li> white box testing
<li> control structure testing
</ul>
</body>
</html>
You will realize that an unordered list is represented in the similar way as ordered list, the only difference being that bullets (i.e. A dot or other symbol placed before text, such as items in a list, to add emphasis.) are used instead of numbers to represent each item.
The type attribute
The actual appearance of bullets may vary from browser to browser. Does that mean the choice of the type of bullets is completely with the browser and the user has no control over it? Of course not. HTML does offer additional choices for the bullet appearance using the type attribute.
Syntax
<ULtype= type_of_bullet >
type_of_bullet: It takes anyone of the values: circle, square or disc.
Let us write down the HTML document that uses different types of bullets. The code shows how nesting can be done in unordered lists. Note that we can have an ordered list as the list item for an unordered list and vice versa. Also nesting can be done to any number of levels.
<html>
<head><title>unordered list </title></head>
<body> type of printers
<ultype= square>
<li> impact printers
<ultype= circle> or<ul>
<li> dot matrix
<li> chain printer
<l1> drum printer
<li> ink jet printer </ul>
<li>non-impact printers
<ultype= disc>
<li> laser printer
<li> electrostatic printer
<li> wax printer </ul>
</ul>
</body>
</html>
The above example is also that of a nested list. Some browsers may automatically select a different bullet style for each nested layer. However, if you want to get a particular effect, you will have to specify the style explicitly by using the type attribute.
Definition List: < DL>………….. </DL>
A definition list is a list of terms paired with associated definitions – in other words, a glossary. Definition list (which cannot in the strictest sense be called a list) is used to provide two levels of information.
This type of listing is usually found in dictionaries, in glossary of terms at the end of a book and in Frequently Asked Questions Pages. Because definition lists don’t add numbering or bullets, many HTML writers have used this element to indent text. Just as we had used <OL> and <UL> tags for ordered and unordered lists respectively, similarly we use <DL> tag for definition list.
The two levels of information, namely the term and the definition are done with the <DT> and <DD> tags. <DL> tag makes the browser understand that we are dealing with a definition list. <DT> tag defines the term of the definition list and the <DD> tag defines the definition.
<html>
<head><title>definition </title></head>
<body> glossary
<dl>
<dt><b> templates</b>
<DD>A template determines the basic structure for a document and contains document settings such as AutoText entries, fonts, key assignments, macros, menus, page layout, special formatting, and styles. <DT><B>WIZARD</B>
<DD>A feature that asks questions and then creates an item, such as a form or web page, according to your answers.
</dl>
</body>
</html>
HTML Anchor Tag
Anchors elements are used to link multiple HTML documents. It requires only one tag viz., the <A> tag. It occurs only in the body of an HTML document. If an anchor is used to turn text into a hyperlink, the text is usually colored blue and underlined.
Syntax <a href=" "> content </a>If you want to create a hyperlink which will take the user to a different page href or hypertext reference is mandatory. For without it, the anchor will not function as a hyperlink.
Hyperlinks can be of two type:
(1) Links to an external document
(2) Links to a specified place within the same document.
External Document References
It links the source document to a specific external document.
Example <ahref="main.htm"> Home </a>Here “HOME” becomes a hyperlink and links to another document. “Main.htm” which is present in the current working directory. If the file is not present in the current directory a relative or absolute path can be specified.
By default a hyper link takes a user to the beginning of the new web page. At times it might be necessary to jump to a particular location within the new web page. To enable a jump to a specific location in a web page, Named Anchors can be set up.
Named Anchors
Named Anchors are used to create links to a specific location within a page Jumping to a particular location on a web page can be summarized in two steps.
Step 1 : Mark the location to be jumped to i.e. identify the location in a web page to jump to by giving the location a name. The “Name” attribute of <A> tag does this
Syntax <a Name="Location-name">
Example: <a Name="location1">
This identifies to jump at location l
Step 2: While jumping to a specific web page and a specific location on the web page, in addition to the name of the web page to be jumped to, the name of the location on the web page to go to is required.
A web page will really be contained in an HTML file. Hence the web page to jump to really requires a filename. ·htm, together with the name of the location to jump to in the HTML file. This is done as follows;
Syntax <a href="file_name. Htm # location_name"> </a>Example:
<A href= “Main.htm # location 1″ > Home </ A> Home becomes a hotspot and leads to a location named location 1” in the file “Main.htm”. The following lines of code show the use of external links:
Main Document
<html>
<head><title>external links </title></head>
<booy>
<h2><p>discover more about dreamweaver 4 </p></h2>
<a href="d:\code\lntro\dll.htm#one">what's new in dreamweaver 4 <a><br><br>
<a href="d:\code\ol 1.htm#two">dreamweaver web site </a><br><br>
<a href="d:\code\ol2. htm#three">dreamweaver exchange</ a><br><br>
<a href="d:\code\ol3.htm#four">release notes</a><br><br>
</body>
</html>
Code of Referenced Document
<html> <head><title> text fields</title></head>
<bodybgcolor="pink">
<aname="one">
<h2> new in dreamweaver4</h2>It highlights the exciting new features included in this release. Thanks to people like you, Macromedia Dreamweaver has become the standard solution for professional web development on both the Windows and Macintosh platforms.
</booy>
</html>
As you can observe in the code of main document not only the document name (DLL.HTM) but also the name of the location (/fone”) to be referenced is mentioned. Also you will notice in the document (DLL.HTM) the heading “New in Dreamweaver 4” is given an identification number “one” respectively. So when one clicks on the highlighted portion say What’s New in Dreamweaver 4 in Figure the href attribute links the user to that part of the external page which is defined by <A NAME= “ONE”>. Similarly names of external files and their respective location name are specified for headings Dreamweaver Web Site, Dreamweaver Exchange and Release Notes.
Internal Document References
Sometimes a jump is required to a different location in the same document. For example at the bottom of a long page you can provide a link to the top by using named anchor. Now the visitor won’t need to scroll the entire page and can jump directly to the top by just using a mouse click.
Since the jump has to be targeted to a specific location the same two steps need to be performed as before i.e. identify a location with a name and then jump to that location using the name. The only difference is that the file name. ·htm now will be the current file name.htm
Syntax: <a NAME="location-name/">
<a href="#location_name"............</a>
The absence of the filename ·htm before the # symbol indicates that a jump is required within the same document.
Example <a NAME="location 1">
<a href="#location1"> Home </a>
Home becomes a hotspot and leads to a location named location1 in the same Document.
What is HTML?
What is HTML?At its most fundamental, Hypertext Markup Language (HTML) is a set of special codes that you embed in text to add formatting and linking information. HTML is based on Standard Generalized Markup Language (SGML). By convention, all HTML information begins with an open angle bracket (<) and ends with a closing angle bracket (>), for example, <html>.
This tag tells an HTML interpreter (browser) that the document is written and marked up in standard HTML. An example of an HTML interpreter would be Microsoft’s Internet Explorer, available for free from the Microsoft Web site; pop over to www.microsoft.com/ie/ to get your copy.
Although a small number of HTML tags are stand-alone entities, the majority are paired, with beginning and end tags. The beginning tag is called the open tag, and the end tag is called the close tag.
The most basic of all tags is the, <html>, which indicates that the information that follows is written in HTML. The <html> tag is a paired tag, however, so you need to add a close tag at the end of the document, which is the same as the open tag with the addition of a slash: </html>. By the same token, if you begin an italic phrase with <i> (the italics tag), you must end it with </i>. Everything between the open and close tags receives the particular attribute of that tag.
If you get confused and specify, for example, a backslash instead of a slash, as in <\html>, or some other variant, the browser program doesn’t understand and simply ignores the close tag. When this happens, the attribute specified in the open tag continues past the point where you meant it to stop. In the case of the <html> tag, the problem is probably not significant because </html> appears at the end of the document. Nothing comes after it to mess up. But in many situations, a missing close tag can completely destroy a Web page,
What do you think would happen if you included quotation marks around a tag—suppose, for example, that you used “<html>” at the beginning of your document rather than <html>. If you guessed that only the quotes would be displayed, you’re right. Let me say it one more time: Web browsers are very simple-minded in their interpretation of HTML. Any tags that vary from the specific characters in the HTML-language specification result in something other than what you were expecting, or your formatting requests are ignored completely.
Launching your HTML editor
To start, I suggest you use Notepad, a terrific—albeit simple—text editor included with the Windows operating system. It’s free and ready for you to start up, even if you didn’t realize you had it!
In just about every Windows configuration I’ve ever seen, Notepad is accessible by clicking the Start button on the bottom-left corner of the window, and then choosing Programs Accessories. You should see a list of choices Notepad is about half way down the list. After Notepad launches, it shows you a blank page where you can type the HTML.
Saving your file as HTML
After you type an adequate amount of material in your HTML, it’s time to save the file to disk. Then you can open it in your favorite Web browser and see how it looks when the HTML is rendered (interpreted by the browser).
When you save this new HTML document, it’s critical that you append either the .htm or .html filename suffix to ensure that the Web browser properly recognizes it as an HTML document. You can do this by explicitly typing .html as the suffix in the File Name box. Give this file a name, such as firstpage.html, and type that name directly into the File Name box.
If you don’t specify a filename suffix, by default Notepad uses .txt. Saving the file with this extension causes problems! When you look at the page later in your Web caution browser, you see the HTML itself rather than having it interpreted. If that happens, and you find that you’ve already saved the file with a .txt or another extension, simply open the file again in Notepad, choose File Save As, and resave the file with the .html suffix.
Now you’re ready: You have named the file, remembered the .html suffix, made sure that it’s stored in the directory you want, and clicked Save. You’ve created your first Web page.
Opening the file in Internet Explorer
Now it’s time to launch a Web browser and have a look. I launch Internet Explorer because I have the icon right on my desktop. I double-click the blue e icon, and the Web browser opens to the Creating Cool Web Sites home page. To open a different page, the Web page you just created choose File Open. The Open dialog box appears,
To open the Web page you just created, click Browse. The dialog box shown opens. When you find the file, click Open and then OK. You should be looking at your HTML page