Html Tutor


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html Tutor

  1. 1. Home | HTML | ASP | JAVA | VB | OFFICE 2000 | .NET | C# HTML INTRODUCTION TO MARKUP LANGUAGE What is programming language? A language is a system of communication. With our natural language such as English, we communicate to one another our ideas and emotions. Similarly, a computer language is a means of communication used to communicate between people and the computer. With the help of a computer language, a programmer tells a computer what he wants it to do. Unlike natural language, most computer languages use a very limited or restricted vocabulary. This is mainly because a programming language by its very nature and purpose does not need to say too much. Classification of programming language Normally programming language can be classified as a) PROCEDURAL PROGRAMMING LANGUAGE b) OBJECT ORIENTED PROGRAMMING LANGUAGE • Procedural programming language Procedure is nothing but a sequence of statements, which perform some specific task and it should return some value after performing that function. Some languages follow or work with procedures like BASIC, PASCAL, and C etc. • Object oriented programming language Before discussing the object-oriented approach, first we have to define the object. For now, we will consider the object to be a package of information together with the operation that can be performed on that information. In other words, an object supports data abstraction, and can be considered as an entity, which encapsulates the object data, and provide the user with a set of predefined operations to manipulate and access the object data. The object data can only be accessed by the operations defined on the object. Some programming languages like C++, Java etc follows this Object Oriented approach and these languages are called Object Oriented Programming Languages, What is Markup Language?
  2. 2. A markup language is a set of conventions for the linear encoding of information structures. There are nonlinear ways to structure information, most notably relational databases. Database schemas and markup languages do the same job. They express the structure of data. So a markup language is only useful if you know what it means. INTRODUCTION TO HTML What is html? Hyper Text Markup Language HTML stands for Hyper Text Markup Language. Hyper Text Markup Language Hyper You may have heard the expression "hyper" in describing someone. In simplest terms, it means active, kind of "all over the place". The word "Hyper" as part of HTML is similar in context. It simply means that when you are on the Internet using a browser such as Netscape Navigator or Internet Explorer, you can in fact; go "all over the place". In browsing through the World Wide Web (WWW), if you see something you like, you can go immediately to it. There is no set order to do things in. Hyper is the opposite of "linear". Linear means that there is a certain order you must follow such as "you must do this before you can do that". Programming languages such as BASIC and FORTRAN are linear. HTML does not hold to that and allows you to jump to any page on the WWW and at any time. Thus the word HYPER refers to the idea that the text in HTML is not linear. Text We are working with text only files. Markup "Markup" comes from the fact that in order to create web pages, we will be typing in the text and then "marking up" the text. Language "Language" means that we are using a language with all its syntax. Note that HTML is not a programming language such as BASIC or FORTRAN. These are
  3. 3. linear programming languages and are based on a whole different set of rules and are far more complicated to learn. The HTML language is easy to learn. History Of HTML After companies started using computers for document processing, it soon became obvious that a storage format should contain not only formatting codes interpreted by computer itself, but also descriptive, human-legible information about the nature and role of every element in a document. The first working system that used these concepts was the Generalized Markup Language (GML) developed by Charles Goldfarb, Edward Mosher, and Raymond Lorie at IBM. This system was the direct predecessor of SGML. SGML stands for Standard Generalized Markup Language. SGML is a general- purpose tool for developing documents of any kind. It originated in the 1960s. It was developed to overcome problems while moving documents across hardware platforms and operating systems. As SGML is used for defining and creating descriptive markup languages and hence it is known as Metalanguage. SGML is platform independent, requiring only a computer and the appropriate software to analyze the documents to make sense of the data. Before HTML, a document’s author didn’t have to care how the document would appear on someone’s monitor. Different versions of HTML HTML Level 0 HTML was at level 0 in its first implementation in 1990. At that time, the means of communication over the Internet included email, Ftp (File Transfer Protocol), and Telnet, all using TCP/IP (Transmission Control Protocol/Internet Protocol). Berners-Lee & his colleagues used SGML to implement HTML. HTML 1.0 The original version of HTML was HTML 1.0. It had very limited features, which greatly limited what you could do in designing your web pages. HTML+ & the advent of graphics Dave Raggett proposed another extension of HTML called HTML+, which incorporated graphical & display elements into HTML. For that reason HTML+ was able to advantage of graphics based browsers.
  4. 4. HTML 2.0 HTML 2.0 then arrived and included all the features of HTML 1.0 plus several new features for web page design. Until January 1997, HTML 2.0 was the standard in web page design. HTML 3.0 HTML 2.0 served its purpose very well, but many people designing web pages (called HTML authors or webmasters) wanted more control over their web pages and more ways to mark up their text and enhance the appearance of their websites. Netscape, the leading browser at that time, introduced new tags and attributes called the Netscape Extension Tags. Other browsers tried to duplicate them but Netscape did not fully specify their new tags and so these extension tags did not work in most other browsers. It led to considerable confusion and problems when HTML authors used these tags and attributes and then saw that they didn't work as expected in other browsers. At about that time, an HTML working group, led by Dave Raggett, introduced the HTML 3.0 draft, which included many new and useful enhancements to HTML. However, most browsers only implemented a few elements from this draft. The phrase "HTML 3.0 enhanced" quickly became popular on the web but it more often than not referred to documents containing browser specific tags (discussed below in "The Netscape Problem" section), instead of referring to documents adhering to the HTML 3.0 draft. This was one of the reasons why the draft was abandoned. HTML 3.0 is now an expired draft. Another reason why HTML 3.0 did not make it was because it was so "big". Future versions were now to be introduced in a more "modular" way so that browsers can implement them modular-by-modular or bit-by-bit. HTML 3.2 (WILBUR) As more browser-specific tags were introduced, it became obvious that a new standard was needed. For this reason, the Word Wide Web Consortium (W3C), founded in 1994 to develop common standards for the evolution of the WWW, drafted the WILBUR standard, which later became known as HTML 3.2. HTML 3.2 captures the recommended practice as of early 1996 and became the official standard in January 1997. Most, if not all, popular browsers in use today fully support HTML 3.2. HTML 4.0 (COUGAR) HTML 4.0 is the current version of HTML. In the early days it was code-named COUGAR. This version introduces new functionality, most of which comes from the expired HTML 3.0 drafts. This version became a recommendation in December 1997 and is now the official standard as of April 1998. Explorer has done a very good job in implementing the many features of HTML 4.0. Unfortunately, Netscape has not kept pace. The latest version of Netscape Communicator still does not recognize the many tags and attributes introduced with HTML 4.0. This means that a web page that involves HTML 4.0 specific tags will look great in Explorer, but can look disastrous in Netscape.
  5. 5. Why we use HTML? HTML allows the assignment of characteristics of text, such as font size, style and type. It also allows the creation of new structural elements such as objects and the definition of characteristics of those objects. • LANGUAGE is COMMON HTML was meant to be a common language that could be used to tie together information from widely different sources. • SIMPLE HTML was meant to be simple for both HTML authors and programmers to use. • PLATFORM INDEPENDENCE It is popular for its platform independence. HTML follows the general philosophy of the web, which is to “be conservative in what is produced and liberal in what is accepted”. This means that the servers try to maximize the correctness and conformance of the HTML output and the Web browsers strive to make sense out of what the server sends. Uniform Resource Locator (URL) Uniform Resource Locator (URL) is the primary naming scheme, which is used to identify Web resources that can either be HTML, documents or other services present in the Web. These Web resources are identified with special names called Uniform Resource Identifier (URI). The URL is the standard method used to identify any resource. Mostly it consists of Service, Hostname and Directory path. Service:// hostname: port/directory-path Service indicates the name of the protocol used to access data present on the other end of the link. Hostname indicates the domain name for the web server where the web page resides. In most cases specification of the port address is not required as the servers themselves have a default port address. Directory-path specifies the name of the HTML file. World Wide Web (WWW) The World Wide Web is a vast amorphous blob of text, images, audio and video scattered across networks and computers worldwide. Hence the name World Wide Web has came. It is shortly referred to as “Web” or “W3”. It is a software
  6. 6. invention, which aids users to explore the Internet facility. World Wide Web is a part of the Internet comprising of Web pages and Web sites. Web is a collection of files known as Web pages. These Web pages can contain hyperlinks to link other Web pages. A hyperlink can be any text or image which when clicked would display another web page. There may be one or more pages in the Home page, which is the initial Web page present in a Web site. Browsers A Web browser is a special type of parsing engine that evaluates the tags and content of an HTML file and displays it according to the capabilities and rules of the file’s own capabilities and platform. For example-a text-only browser displays the alternative text for an image, but a graphical browser displays the actual image. The major browser used to surf the Internet is, Microsoft Internet Explorer and another browser, which is the product of Sun Micro system is Netscape Navigator. Hardware Requirement MINIMUM PREFERRED a) 286PC a) 133 MHz Pentium PC b) 16MB of RAM b) 32 MB of RAM c) 500-MB Hard Disk c) 1.2 GB Hard Disk Software Requirement • • Microsoft Windows 95 (Standard Installation), Windows NT, Unix, Linux etc. • • Microsoft Internet Explorer 3.0 or higher. • • Netscape Navigator 3.0 or higher. • • Internet Connection (optional, it is applicable for live project) What do I need to begin designing a Home Page? • • You need a directory (also called a FOLDER) You should set up a directory or folder to hold only your HTML files (also called documents) for the web pages you are designing. Work in that directory only. If you are doing all these lessons, you may also wish to set up a separate directory to hold all the examples for testing in your browser. You need some place to put your work.
  7. 7. • • You do not need to have your modem connected You do not need to be connected by modem to your server. You can write and design your HTML pages off-line. If all you are doing is designing web pages, you have no need to go on the Internet. Besides, if you are paying by the hour, you don't want to pay any more than you have to. Also, if you have only one telephone line to your house and you are connected by phone, there is no need to tie up the line for hours at a time. How do you disconnect the modem? Well, in most cases, when you load the browser, a little window opens up to dial the server. Simply click CANCEL, and choose to work off-line. If you are using an old version of a browser and this method doesn't work, you may need to call on someone to help you. So remember, you do not need to be connected by modem to design your web pages. • • You need a browser Netscape Navigator (also called Netscape Communicator) and Internet Explorer are among today's most popular browsers and there are different versions of each of these. Netscape, as of version 4.0, is called Netscape Communicator. Before version 4.0, it was called Netscape Navigator. There are other browsers also but they are not nearly as popular as Netscape and Explorer. Most likely you already have a browser or you wouldn't be reading this. • • You need a word processor You need a word processor such as WordPerfect or Microsoft Word or Microsoft Works. Better use NOTEPAD, which can be found in the ACCESSORIES directory (also know as the ACCESSORIES "GROUP"). In Windows 95, for example, NOTEPAD is found by choosing "START"à"PROGRAMS"à"ACCESSORIES"à”NOTEPAD”. Notepad is a simple "text editor" that loads almost instantly. A text editor is a very simple word processor. NOTEPAD also quickly loads any file and quickly saves the file. As we will see later in this lesson, there are other reasons as well for using a text editor such as NOTEPAD. Sometimes a web page can become so big that it will no longer fit into NOTEPAD. In this case, you will need to switch to another text editor or to your word processor to complete the page. In summary, you basically: 1. 1. Do your work in a text editor such as NOTEPAD (typing in all the text and tags)
  8. 8. 2. 2. Save your work in an HTML file using any appropriate name 3. 3. Load the HTML file into the browser to see how your web page looks and works 4. 4. Switch back to NOTEPAD to make any corrections, changes, etc. Naming your text only file You need to give your file (that is, your web page) a name. You not only have to give it a name but you also need to add a suffix to the name. THE NAME: If you are using an IBM or IBM compatible computer and not running Windows 95 or higher, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer. THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ". htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document. Saving your html file (or document) IF YOU ARE USING ONLY NOTEPAD or similar text editor: Simply type in a suitable file name (along with an extension) and click on "OK". Loading your html document into the browser Once you have saved your HTML file or document, you need to SWITCH over to your browser, which is running in the background. Once you activate your browser, choose File from the menu bar, and then choose Open ... or Open File ... or Open File in Browser ... (one of them should be in the File menu). You will then need to locate your file, click on the file name and then click the Okay button. Your HTML file will appear in the browser. You can only observe your file in the browser - you cannot edit in the browser. Once you have seen how your HTML file looks in the browser, you can then SWITCH back to NOTEPAD to continue working and editing. Note: (1) (1) If you want to LOAD a new HTML file into NOTEPAD, and the name does not show up in the correct directory in the dialog window, choose to show All Files (*.*) in the Files of type line and the name should then appear. Click on the name and then on the Open button. (2) (2) If you use a word processor other than NOTEPAD, you may first need to CLOSE the HTML file before it can be loaded into your browser. With NOTEPAD this is not necessary.
  9. 9. HTML ELEMENTS HTML comprises of three major elements that render a well-structured look for a document. • • Head • • Body • • Footer HTML tags HTML works in a very straightforward manner. You type in your text and your tags. To get large print, centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than inserting tags around your text. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called content- based markup, as opposed to presentational markup. Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. Correct use of tags We have "beginning" or "opening" tags (such as <HTML>) and we have "ending" or "closing" tags (such as </HTML>). Many elements consist of an opening tag and a closing tag. An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element. Closing Tags cannot be placed just anywhere. Use the "Last In = First Out" principle or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out". Another way of stating this is that the last tag activated must be the first tag terminated? An example of a correct sequence of tags is: <tag1><tag2> statements </tag2></tag1> In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed. An example of an incorrect placement of tags is: <tag1><tag2> statements </tag1></tag2> In this example, the last tag opened (<tag2>) is not the first tag closed. That is, these tags overlap. </tag2> must come before </tag1>. Therefore this example does not satisfy the LIFO principle. Container tags cannot overlap each other. If you do not place tags properly, your web page simply won't work.
  10. 10. The following is another example of a correct use of tags: <tagA><tagC><tagB><tagD>statements </tagD></tagB></tagC></tagA> Classification of html tags A markup tag is defined by the markup element and an optional set of attributes. Tags are divided into two groups, non-empty and empty. There are mainly two types of tags in HTML. i) Empty tag The tags, which are not required to close (i.e. starting tag will be there but closing tag is not there) are called empty tag. Example: <BR>, <IMG>. As <BR> is an empty tag, that’s why </BR> is not required. It is similar for <IMG> also. ii) Non-empty tag The tags, which are required to close (i.e. starting tag will be there as well as closing tag will be there) are called non-empty tag. Example: <BODY>. </BODY>, <TITLE>.. </TITLE> etc. There is one special tag <P>, which can be said as an empty tag or non-empty tag. Sometimes it can be used with only starting tag i.e. <P> or sometimes it may be used with ending tag also (normally for formatting a paragraph), i.e. <P> … </P>. Basic tags TAG DESCRIPTION <HTML>…</HTML> Indicates the beginning of HTML document <HEAD>…</HEAD> Indicates the beginning of document header <BODY>…</BODY> Indicates the beginning of document text <TITLE>…</TITLE> Indicates title for the web page <HTML> and </HTML> tags We first need to learn how to set things up properly in an HTML document (or file as it is also called). Every HTML document should first be declared that it is in fact an HTML document. When the document is completed we also need to indicate this. You do this with the tags <HTML> and </HTML>. Recall that HTML stands for Hyper Text Markup Language, which is the language of web page design. <HTML> is the beginning tag and </HTML> is the ending tag. The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed.
  11. 11. You can therefore think of the <HTML> and </HTML> tags as "containers", containing the entire HTML document. Therefore HTML is called a container tag. You should use the HTML element for each of your web pages. <HEAD> and </HEAD> tags Each page of your web pages should have these tags. Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags. Thus the HEAD part of a document provides information about the document. You do not see this information displayed on the browser screen. It can be seen by choosing DOCUMENT SOURCE from the VIEW menu of your browser. The HEAD tag must not contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of the document (studied below). The HEAD tag can actually be omitted, but only if you group all the tags that go in it at the top of the document. To avoid any potential problems, I would suggest that you include the HEAD tag in your own documents. <TITLE> and </TITLE> tags One of the statements that must included between the <HEAD> and </HEAD> tags is the TITLE of your web pages. The title in our example is " THIS IS OUR FIRST DOCUMENT". Notice that this title is placed by the browser at the very top of the screen - above the menu choices. In Netscape it reads: Netscape- [THIS IS OUR FIRST DOCUMENT] Thus Netscape has added its name to the title. The TITLE of your website or of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. The information you provide in the title is also used to label the bookmark entry for your web page and is also a caption in search engine results. Therefore you should take time to make up a good descriptive title for each of your web pages. You will notice that each of our lessons has its own title that describes in general the content of the lesson. Because we do not want the title to be displayed on the browser screen, the <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags. <META> tag This tag specifies information about the document to browsers, applications and search engines. With <meta> tag, we can instruct the browser to load a new document after the specified time (client-pull) or you can specify key-words for search engines to associate with your document. Attributes
  12. 12. • • Content Assigns values to the HTTP header fields when using REFRESH HTTP header, assign a number along with a URL to the content attribute, the browser then loads the specified URL after the specified number of seconds. • • HTTP-EQUIV This attribute indicates the HTTP header value you want to define, such as REFRESH, EXPIRES or CONTENT LANGUAGE. • • Name This attribute specifies the name of the association you are defining, such as, keywords or description. <BODY> and </BODY> tags After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser how to display the information. The body of each of your Web pages should be declared with BODY tags. <BODY> tells your browser that what follows is to be the body of the Web page and </BODY> tells the browser that the body part of the page has ended. Thus the <BODY> and </BODY> tags are container tags, containing the body of your document. The BODY tag is also an optional tag. If you place all the HEAD elements first, the browser will know where the actual document body begins. The idea is good of declaring things for what they are. This way there will be no confusion for any early or ancient browser that relies on these declarations. Attributes Background =file Bgcolor=”#RRGGBB” Text =”blue” Link=”red” Vlink=”blue” Alink=”black” Topmargin=”70%” Leftmargin =”60%” Example <HTML> <HEAD><TITLE>THIS IS OUR FIRST DOCUMENT</TITLE> </HEAD>
  13. 13. <BODY background=”image.gif” bgcolor=”#624840” text=”red” link=”green” alink=”magenta” vlink=”blue”> FIRST HTML DOCUMENT </BODY> </HTML> • • Background Specifies as an image to be used to tile on the document background. Do not use with BGCOLOR. • • Bgcolor Specifies a solid color to be used for the document background. • • Text Specifies the text color. Text is black by default. • • Link Specifies the hypertext link color. The default color for the hypertext link color is light blue. • • Alink Specifies the “activated” hypertext link color. The default is red. The link changes to this color when the mouse button clicks on the link and before the mouse button is released. • • Vlink Specifies the “visited“ hypertext link color. The default is dark purple. This is the color that indicates that the link has been previously visited. • • Topmargin Specifies the top margin of the displayed area in the browser below which the text will be displayed. • • Leftmargin Specifies the left margin of the displayed area in the browser from the right of which the text will be displayed. Formatting tags FORMAT TAGS DESCRIPTION
  14. 14. <P> Indicates paragraph break Paragraph <BR> Indicates line break <PRE>…</PRE> Indicates preformatted text <BLOCKQUOTE>...</BLOCKQUOTE> Marks up quotes that take more than a few lines <HR> Draws a horizontal line across the page <CENTER>……….</CENTER> Helps to make center all the elements in the document. <P > and attributes Use the paragraph tag to mark the beginning of a new paragraph; the ending tag, </P>, is optional. You could include the ALIGN attribute to specify whether the paragraph should be centered or right aligned in the page (left-aligned is the default). <BR> tag It tells the browser to wrap the text that follows onto a new line without inserting any extra space between the lines. <PRE>..</PRE> tags This tag is effective for formatting program code or similar information. Usually appears in a fixed-width font with ample space between words and lines. <BLOCKQUOTE>..</BLOCKQUOTE> tags The BLOCKQUOTE element marks up quotes that take more than a few lines. You use this tag when you are quoting one or more paragraphs from another source. In HTML 4.0 the <BLOCKQUOTE> tag can take an optional CITE attribute to indicate where the quote came from. It is written like this- <BLOCKQUOTE CITE=>… </BLOCKQUOTE> <HR> and attributes Used for drawing horizontal lines in the display page. • • Noshade –indicates solid black bar. • • Width=n (default is 100%) • • Size=n (default is 2 pixels) • • Align =left/right/center (default is center) It can be written like this. <HR SIZE=”4” NOSHADE WIDTH=”40%” ALIGN=”RIGHT”>
  15. 15. <CENTER>…</CENTER> tags Helps to position the text in an equal distance between the left and right edges of the document which is given within the starting <CENTER> tag and ending </CENTER> tag. FORMAT TAGS DESCRIPTION <I>…</I> Italicizes text Character <U>…</U> Underlines the text <B>…</B> Indicates text that should appear in boldface <TT>…</TT> Indicates “typewriter” font i.e. displays text in monospace format <EM>…</EM> Emphasizes the text (usually italics) <ADDRESS>.. Indicates information about the author </ADDRESS> who has created the Web page in a unique font <S> OR <STRIKE> Indicates a Strikethrough text style <BIG>…</BIG> Indicates that text display in larger font <SMALL>…</SMALL> Indicates that text display in Small font <STRONG>…</STRONG> Indicates strong emphasis. The browser will probably display the text in a boldface font <CODE>…</CODE> Used to enclose program codes. Header <H1>…</H1> First Level Heading <H2>…</H2> Second Level Heading <H3>…</H3> Third Level Heading <H4>…</H4> Fourth Level Heading <H5>…</H5> Fifth Level Heading <H6>…</H6> Sixth Level Heading <Hn> and Attribute (n=1 to 6) • • ALIGN Positions the heading in the left, right or center of a document. <H3 align=”right”> • • CLASS Indicates which style class applies to the <Hn> element. • • ID Assigns a unique ID selector to an instance of the <Hn> tag. When you then assign a style to that ID selector, it affects only that one instance of the <Hn> tag.
  16. 16. • • STYLE Specifies style sheet commands that apply to the heading. <H1 STYLE=”background: red”> • • TITLE Specifies text assigned to that tag. <H1 TITLE=”Headline”> Example: <HTML> <HEAD><TITLE>DOCUMENT</TITLE></HEAD> <BODY> <STRONG>HELLO!!</STRONG><BR> <B> <U><I>HEADINGS WILL BE: </I></U> </B> <BR> <H1 >THIS IS H1</H1> <H2 > THIS IS H2</H2> <H3> THIS IS H3</H3> <H4 > THIS IS H4</H4> <H5> THIS IS H5</H5> <H6> THIS IS H6</H6> <P> THESE ARE ALL ABOUT HEADINGS <BR> <P> Now come to the next part of HTML <BR> <EM>DETAILS</EM> <ADDRESS> Winserv Technology <BR>center: A.J.C Bose Road </ADDRESS> <BLOCKQUOTE> <p>Omit needless words</p> <p>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph should contain no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines & a machine should not have any unnecessary parts. </p>-William Sturunk </ BLOCKQUOTE > <PRE>A guide to HTML</PRE> </BODY> </HTML>
  17. 17. Output: <BASE> tag A <BASE> tag tells the browser the correct absolute URL of the document, which might fix the relative URLs used on that page. <BASE>…</BASE> <BUTTON> tag Sets up a button to submit or reset a form as well as to activate a script. Use the <IMG> tag between the opening and closing <BUTTON> tag to specify a graphical button. <BUTTON TYPE=”BUTTON” VALUE=”Run program” onClick=doit> Click it </BUTTON> Attributes of button tag • • CLASS Indicates which style class applies to the <BUTTON> element. • • DISABLED Denies access to the input method. Not applicable for Netscape. <BUTTON TYPE=”SUBMIT” NAME=”PASS” DISABLED> • • ID Assigns a unique ID selector to an instance of the <INPUT > tag.
  18. 18. • • VALUE Sets the default value for the button face. • • TYPE Indicates the kind of button to create. • • NAME Gives a name to the value you pass to the form processor. • • STYLE Specifies style sheet commands that apply to the element. • • TITLE Specifies text assigned to the tag. • • TABINDEX Specifies where the input method appears in the tab order. <BUTTON type=”button” class=casual value=”Click To Run” title=”ABC” style=”background: red” tabindex=3 name=”run prog” disabled> Special tags 1. <MARQUEE>………….</MARQUEE> tags A marquee displays a scrolling text message. You can customize a marquee to achieve exactly the effects you want. It is only applicable for Internet Explorer Marquee attributes • • Behavior=Slide/Flash/Alternate/Scroll • Direction=Right/Left (Default) • Height=30% • Width=200 • Loop=-1 (-1 represents infinite looping) 2. <BLINK>…</BLINK> tags This tag is only applicable for Netscape Navigator. 3. <DIV>…</DIV> tags
  19. 19. The W3C (WORLD WIDE WEB CONSORTIUM) has been trying to standardize HTML tags so they all match a similar pattern. One of the great frustrations was Netscape’s introduction of the <CENTER> tag, which had no <LEFT> or <RIGHT> alignment equivalents. To standardize this tag, the W3C supplied the <DIV> tag, which separates documents into separate divisions for formatting purposes. So, a web page can be divided into segments or division called DIVs. Each segment starts with <DIV> and ends with </DIV>. These segments can be positioned anywhere on the page. The <DIV> tag has a position attribute that can take one of the two values, Absolute and relative. Absolute positions the segment with respect to the top/left edge of the browser window. In contrast with Absolute, Relative positions the segment in relation to other elements on the page. <DIV ALIGN=”center”> HTML code to align to center, including headings, text. tables and images. </DIV> <FONT> tag This tag helps to alter or set font characteristics of the font the browsers uses to display text. Syntax: <Font attributes>content to be displayed</font> Attributes • • Face Specifies a comma-separated list of font names the browser uses to render text. If the browser does not have access to the first named font, it tries the second, then the third and so forth. • • Color Indicates the color the browser uses to display text. Color names can substitute for the RGB hexadecimal values. • • Size Specifies the size of the text affected by the FONT tag. You can specify the size relative to the base font size (see the <BASEFONT> tag), which is normally 3. You can also specify the size as a digit in the range 1 through 7. Example: <BASEFONT size=4> <FONT size=+2 face=”Avant Guard”> THIS IS A FONT OF SIZE 6. </FONT>
  20. 20. <FONT size=1 color=#FF0000> THIS IS A FONT OF SIZE 1. </FONT> <BASE FONT> tag Provides a font setting for normal text within a document. Font settings within the document are relative to settings specified with this tag. Use this tag in the document header (between the <HEAD> tag). <BASEFONT SIZE=3> LINKING There are two major categories of links: external links which are links to files not on your own site (created by someone else) and internal links, which are links to files that are part of your site (created by you). With HTML tags we can create links both internal and external. <A>…</A> ‘A’ stands for Anchor. The anchor elements take several attributes. • • Href HREF indicates Hyperlink REFerence. The HREF attribute must point to a URL and the URL should appear in quotes, like this: <A HREF=> Construct </A> • • Title One anchor attribute that provides more information about a link is the TITLE attribute. The TITLE attribute allows an “advisory title” that explains the resource in more detail. <P> we are learning LINKING <A HREF= TITLE=”abc”> in details </A> Browsers may choose different methods of showing the advisory TITLE attribute, such as displaying the title in a tool tip or balloon help, or the title might appear on the status bar. Currently the only popular browser that makes use of the TITLE attribute in a link is Internet Explorer 4, which displays it as a tool tip. Navigator should soon support these attributes. • Name (‘text’) It labels a section of an HTML document with a specific reference name. The NAME attribute enables links to point to a specific section within a document. <A NAME=”directions”> Here is the direction to my office: </A> Once you have added this code, you can link to the directions by taking a normal link tag and adding a number sign (#) and the name assigned to the URL. If the
  21. 21. normal URL for the page is, then you would specify the link for the directions name like this: The <A HREF=> direction to my office </A> is available. • • Target The TARGET attribute is normally used with frames. However, you can use the TARGET attribute even if you don’t use frames. When you specify a TARGET for your links, you indicate the name of a window where you’d like the linked page to appear. A link can be specified like this: <A HREF= TARGET =”window2”> XYZ </A> When this link is followed, a new window (named internally “window2”) is created, containing the XYZ page. • • Rel This attribute and its value indicate the relationship of the current document to the document referenced in HREF. Possible values include Contents, Index, Glossary, Copyright, Next, Previous, Style Sheet, Bookmark and Help. <LINK rel=Glossary href=”glossary.html”>. This attribute is also used to specify linked style sheets. Another possible value is Alternate, which indicates an alternate version of the document. • Rev This attribute is similar to rel, except it indicates a reverse relationship between the document and the URL. <LINK rev=Glossary href=”chapter1.htm”> It accepts the same values as rel. So, for linking we can use i)<A href=”c:my documentssuni.htm” >click </A> The text click word is used for linking. ii)<A href=”c:my documentssuni.htm”><img src=”bubbles.bmp” width=100 height=100></A> The image bubbles.bmp is used for linking. Example: <Html>
  22. 22. <Body bgcolor=pink> <A href="sec.htm"><b>This is Winserv Technology. </b></A> <BR><BR><BR> <A href="third1.htm"><img src="earth.gif" width=100 height=100></a> </body> </html> Output: LIST AND IMAGE List HTML has special sets of tags just for displaying lists with a host of special attributes to give you greater control over their appearance. Lists are a great way to provide information in a structured, easy-to-read format. A list is a good form for a procedure. At the most basic level, lists are divided into two categories. • Ordered lists These lists are typically used to indicate a sequence of events or priorities. They are also used to specifically identify sections and relationships when creating outlines. • Unordered lists
  23. 23. These lists are typically used to display a group of items that are somehow related, but necessarily in a hierarchical fashion. LIST TAG EFFECT <OL> Specifies that the information appear as an ordered (numbered) list <UL> Specifies that the information appear as an unordered (bulleted) list <LI> Specifies a line item in either ordered or unordered lists Type attributes can be included 1. 1. For numbered lists TYPE=”1” TYPE=”a” TYPE=”A” TYPE=”i” TYPE=”I” 2. 2. For bulleted lists TYPE=”DISC” TYPE=”SQUARE” TYPE=”CIRCLE” Ordered lists have additional attributes that you can use to specify the first number in the list, as well as to create hierarchical information. The name of that attribute is VALUE. Using definition lists Finally, one special list variant, definition lists, can be useful for providing two levels of information. <DL> is used to create a glossary-style listing, which is handy for items such as dictionary listings and Frequently Asked Questions pages. The <DL> tag is used similarly to the unordered list tag, except that it doesn’t use the <LI> tag to mark its entries because a definition list requires two items for every entry, a term and its definition. Marking these two items is done with the corresponding <DT> and <DD> tags. This is the syntax of the <DL> tag. <DL> <DT>Term1<DD>Definition 1 <DT>Term 2<DD>Definition 2 … …. ……..
  24. 24. ………… ……….. <DT>Term n<DD>Definition n </DL> In this tag, Term is the word requiring a definition, and Definition is the block of text that supplies the definition. LIST TAG EFFECT < DL>----</DL> Specifies that the information appear as a definition list <DT> Indicates definition term <DD> Identifies definitions Example: <html> <head><title>two shopping lists</title></head> <body bgcolor=cyan> <ul> <li>EGGS <li>MILK <li>APPLES <li>RAZOR BLADES </ul> <ul type="square"> <li> HAMMER <li>SCREWDRIVER <li type="disc">SCREWS <li type="circle">CHAINSAW </ul> <ul> <li>A <ul> <li>AA <li>AB <ul> <li>AAA <li>ABA </ul>
  25. 25. <li>AC </ul> </ul> <ol> <li>BREAD <li>TURKEY BACON <li value="10">DARKCHOCOLATE <li>AVOCADOS </ol> <DL> <DT>Term A <DD>Definition of term A <DT>Term B <DD>Definition of term B </DL> </body> </html> Output:
  26. 26. Placing images on web page You can include images (pictures or other nontext objects) in any Web page to provide information or to make the page more attractive. An image that you include in a Web page is called an inline image, as opposed to an image that is viewed separately in your browser, such as when the image file is the target of a link. • Alternate Text When a browser cannot display graphic images, perhaps because the image file cannot be found or because the browser’s image-loading capabilities have been turned off to save download time, you can include the ALT attribute in an image tag to have text displayed in place of the image. • Sizing By default, your browser loads an image from the top down and displays the image in as large a box as needed. You can specify an exact size for the image by including the WIDTH and HEIGHT attributes within the HTML tag. • Aligning You can use the ALIGN attribute with the LEFT, CENTER, or RIGHT options to position the image either left, centered, or right in the browser window. You can also use the TOP, BOTTOM, or MIDDLE attributes to align text with the top, bottom, or middle of the image. How to include image in the browser using its attributes ? <IMG SRC=file :///c:windowsbubbles.bmp Align=top/middle/bottom Width=100 Height=100 Vspace=30 (vertical space in pixels) Hspace=30> (horizontal space in pixels) Other attributes: Border=n Ismap Usemap Alt (“text”) specifies the text, which would be displayed, if the browser does not support graphics.
  27. 27. • Src “URI” specifies the location of the image to load into the document. • Align “top | middle | bottom | left | right” Aligns the object with respect to context. • Width “length” sets the display width of the image. • Height “length” sets the display height of the image. • Vspace “pixels” sets the amount of space to be inserted to the top and bottom of the element. • Hspace “pixels” sets the amount of space to be inserted to the left and right of the element. • Border sets the border width of the image. • Ismap used to define a server-side image map. • Usemap “URI” Associates an image map as defined by the MAP element with this image. • • Alt “TEXT” Alternate text to be displayed if the user agent cannot render the element. Image as a link The map element (<MAP> and </MAP>) is used for imagemaps. An imagemap is an image that contains hotspots can take a surfer to different URLs. So an imagemap is simply an image that can be used to take a surfer to different places, depending on where they click in the image. So, an imagemap is an extended version of hyperlink. Instead of having an image represent only one link, the image can represent several different links depending on where in the image you click.
  28. 28. Example: <MAP name=”sportsmap”> <AREA shape=”circle” cords=”65,129,57” href=> <AREA shape=”rect” cords=”165,157,200,120” href=> <AREA shape=”default” href=> </MAP> <MAP> elements are contained within the body of the document and have only one attribute name. The name attribute identifies the particular MAP element referenced with the usemap attribute. The AREA element is used within the MAP to delineate a hyperlink and the shape and coordinates of its corresponding hot spot in the image. <AREA shape=value coords=”shape dependent” href=”hyperlink_URL”> There are three different shapes that can be defined with the shape attribute: rect, circle and poly. If it is written like the following <img src=”sporting_goods.gif” usemap=”#sportsmap”> The usemap attribute tells the browser that it’s dealing with an imagemap and then directs the browser to where coordinate and the URL information for this imagemap can be found.
  29. 29. HTML’S SPECIAL CHARACTER CODE CHARACTER ENTITY DESCRIPTION & OR &amp; Ampersand &lt; Less than &gt Greater than &ntilde; Small n, tilde &quot; Quote <!………> Comment &nbsp; Space &reg; Circled R, registered sign &copy; Circled C, copyright sign &not; Negation sign &deg; Degree sign
  30. 30. HEXADECIMAL CODE FOR COLORS Color Code Black “Black” or “#000000” Green “Green” or “#008000” Silver “Silver” or “#C0C0C0” Lime “Lime” or “#00FF00” Gray “Gray” or “#808080” Olive “Olive” or “#808000” White “White” or “#FFFFFF” Yellow “Yellow” or “#FFFF00” Maroon “Maroon” or “#800000” Navy “Navy” or “#000080” Red “Red” or “FF0000” Blue “Blue” or “#0000FF” Purple “Purple” or “#800080” Aqua “Aqua” or “#00FFFF” Cyan “Cyan” or “#00FFFF” Sea green “#2E8B57” Violet “#EE82EE” Khaki “#F0E68C” Brown “#A52A2A” Orange “#FFA500” Pink “#FFC0CB” Gold “#FFD700” Ivory “#FFFFF0” Tomato “#FF6347”
  31. 31. WORKING WITH TABLE The table as the name indicates aligns contents in a row and column format .The table can contain any kind of data, i.e. it can include links, paragraphs, all header levels, another table, preformatted text, images and so on. Attributes <TABLE> tag Attributes Description Border=n Indicates border for the table. Bordercolor=”#RRGGBB” or “..” Specifies the color of the border of all the table cells Bordercolordark=”#RRGGBB” or Specifies the darker color used “..” to draw 3-D borders around the table cells Bordercolorlight=”#RRGGBB” or Specifies the lighter color used “..” to draw 3-D borders around the table cells Cellpadding=n Indicates space between border & contents of cell Cellspacing=n Indicates spacing between cells Align=LEFT/CENTER/RIGHT Positions the table according to the alignment value in the window Background=URL Specifies the absolute or relative location of a graphic image file loaded as a background image for the entire table Bgcolor=”#RRGGBB” or “..” Specifies the background color within all table cells Class=”…” Indicates which style class applies to the <Table> element. Cols=n Specifies the no. Of columns in the table Width=n Indicates width of the table <CAPTION> tag Align----top/bottom/left/right
  32. 32. <THEAD> tag Defines a table header section. At least one table row must go within <THEAD>. Attributes Description Title=” …” Specifies text assigned to the tag VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents BASELINE of table header with respect to the top and bottom edges of the header container. Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table header will line up with the edges of the table cells Class=”…” Indicates which style class applies to the <TH> element. <TH> tag Contains table cell heading. ATTRIBUTES DESCRIPTION Title=” …” Specifies text assigned to the tag Bordercolor=”#RRGGBB” or “..” Specifies the color of the border of the table heading cell Bordercolordark=”#RRGGBB” or Specifies the darker color used “..” to draw 3-D borders around the table heading cells Bordercolorlight=”#RRGGBB” or Specifies the lighter color used “..” to draw 3-D borders around the table heading cells Colspan=n Indicates that a table cell occupy more columns than the default of one. Rowspan=n Indicates that a table cell occupy more rows than the default of one.
  33. 33. ATTRIBUTES DESCRIPTION VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents of a cell BASELINE with the top, bottom, middle or baseline of the cell Background=URL Specifies the absolute or relative location of a graphic image file loaded as a background image for the table cell Bgcolor=”#RRGGBB” or “..” Specifies the background color within a table cell Class=”…” Indicates which style class applies to the <TH> element. Nowrap Disables default word-wrapping within a table cell, maximizing the cell’s horizontal space. Width=n Specifies the horizontal dimension of the cell in pixels or as a percentage of the table width. <TR> tag Contains a row of cells in a table. You must place the <TR> tags inside the <TABLE> container, which can contain <TH> and <TD> tags. ATTRIBUTES DESCRIPTION Title=” …” Specifies text assigned to the tag Bordercolor=”#RRGGBB” or “..” Specifies the color of the cell borders within the row. Bordercolordark=”#RRGGBB” or “..” Specifies the darker color for the 3-D borders around the table row Bordercolorlight=”#RRGGBB” or “..” Specifies the lighter color for the 3-D borders around the table row Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table row will line up with the edges of the table
  34. 34. ATTRIBUTES DESCRIPTION cells Bgcolor=”#RRGGBB” or “..” Specifies the background color of the table cells in the row. Class=”…” Indicates which style class applies to the <TR> element. Nowrap Indicates that text within table cells in the row not wrap. VAlign=TOP/MIDDLE/BOTTOM/ Specifies the vertical BASELINE alignment of the contents of the cells within the row. <TD> tag This tag is the data cell tag, used for the body of the table. ATTRIBUTES DESCRIPTION Bordercolor=”#RRGGBB” or “..” Specifies the color of the border of all the table cells Bordercolordark=”#RRGGBB” or Specifies the darker color used “..” to draw 3-D borders around the table cells Bordercolorlight=”#RRGGBB” or Specifies the lighter color used “..” to draw 3-D borders around the table cells Colspan=n Indicates that a table cell occupy more columns than the default of one. Rowspan=n Indicates that a table cell occupy more rows than the default of one. VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents of a cell BASELINE with the top, bottom, middle or baseline of the cell Background=URL Specifies the absolute or relative location of a graphic image file loaded as a background image for the table cell
  35. 35. ATTRIBUTES DESCRIPTION Bgcolor=”#RRGGBB” or “..” Specifies the background color within a table cell Class=”…” Indicates which style class applies to the <TD> element. Nowrap Disables default word wrapping within a table cell, maximizing the cell’s horizontal space. Width=n Specifies the horizontal dimension of the cell in pixels or as a percentage of the table width. <TBODY> tag Defines the table body within a table. This tag must follow <TFOOT> tag. ATTRIBUTES DESCRIPTION Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table footer will line up with the edges of the table cells VAlign=TOP/MIDDLE/BOTTOM/ Specifies vertical BASELINE alignment of the contents of the table body. Title=”…” Specifies text assigned to the tag Class=”…” Indicates which style class applies to the <TBODY> element. <TFOOT> tag Defines table footer within a table. It must precede the <TBODY> tag. ATTRIBUTES DESCRIPTION Align=LEFT/RIGHT/CENTER/JUSTIFY/CHAR Specifies how text within the table footer will line up with the edges of
  36. 36. ATTRIBUTES DESCRIPTION the table cells VAlign=TOP/MIDDLE/BOTTOM/ Aligns the contents BASELINE of the table footer with the top, bottom, or middle of the footer container. Title=”…” Specifies text assigned to the tag Class=”…” Indicates which style class applies to the <TFOOT> element. Example1: <html> <head> <title>glossary</title> </head> <body bgcolor=pink> <center> <font color="white"> <table border=4 background="clouds.jpg" width=75% bordercolorlight="blue" cellpading=7 cellspacing=10 > <caption><b>DETAILS OF BOOKS</b></caption> <thead align=CENTER> <td><b>TITLE</b></td><td><b>AUTHOR</b></td> </thead> <tr align=CENTER> <td>HTML</td><td>BPB publication</td> </tr> <tr align=CENTER> <td>JAVA</td> <td>PATRIC</td> </tr> <tr align=CENTER> <td>LET US C</td> <td>BPB Publication</td> </tr> </table> </font></body>
  37. 37. </html> Output: Example2: <html> <head> <title>example of attributes</title> </head> <body bgcolor=cyan> <center> <table border=6 bgcolor=white width=75%> <caption>example of rowspan</caption> <tr align=CENTER> <td rowspan=2>CELL 1,1</td> <td >CELL 1,2</td> </tr> <tr align=CENTER> <td>CELL 2,2</td> </tr> <tr align=CENTER>
  38. 38. <td>CELL 3,1</td> <td>CELL 3,2</td> </tr></table> <table border=6 bgcolor=white width=75%> <caption>example of colspan</caption> <tr align=CENTER> <td colspan=2>CELL 1,1</td> <td >CELL 1,2</td> </tr> <tr align=CENTER> <td>CELL 2,1</td> <td>CELL 2,2</td> <td>CELL 2,3</td> </tr><tr align=CENTER> <td>CELL 3,1</td> <td>CELL 3,2</td> <td>CELL 3,3</td> </tr></table> </body> </html> Output: WORKING WITH FORM TAG
  39. 39. Here we will be able to capable of utilizing a dazzling feature that enables the user to interact with the Web server through a tag named <FORM>. With this special feature, users can enter information in a web page and send it to the server. Forms, which help visitors to your site to give you input, are used for a variety of purposes. It can be used for order processing on a retail site or they can be set up to get customer feedback by email. The form element consists of several other elements, called controls. <FORM>…</FORM> TAG: Creates a container for the controls ATTRIBUTES DESCRIPTION Title Specifies text assigned to the tag Name Specifies the name of the form Action=FILE/URL Specifies the location where FORM data is passed Method=GET/POST Specifies the method by which the data is sent to the server. <SELECT>. …</SELECT> TAG: Creates a pull-down menu. ATTRIBUTES DESCRIPTION NAME Uniquely identifies <Select> tag SIZE Specifies the number of items visible at a time. MULTIPLE Allows multiple items to be selected <OPTION> TAG: Defines items of the pull-down menu. It is written within <SELECT> tag. ATTRIBUTES DESCRIPTION SELECTED Specifies the default item among the list VALUE Provides the content associated with the NAME=attribute <TEXTAREA>… </TEXTAREA> TAG: Text areas are places within a form for extensive text input ATTRIBUTES DESCRIPTION NAME Specifies the name of the TEXTAREA ROWS Specifies the number of rows COLS Specifies the number of cols <FIELDSET>…. </FIELDSET> TAG: Groups related form elements ATTRIBUTES DESCRIPTION TITLE Specifies text assigned to the tag.
  40. 40. <LEGEND>…. </LEGEND> TAG: Assigns a caption to a FIELDSET. ATTRIBUTES DESCRIPTION ALIGN Indicates whether the legend appears at the top, bottom, left, or right of the fieldset. TITLE Specifies text assigned to the tag. <INPUT> TAG: It is the basis for data entry. TAGS ATTRIBUTES DESCRIPTION <INPUT TYPE=TEXT> Specifies the single line text Name Label of the control Size Size of the control Maxlength Maximum no of characters taken by the control Value The default text the text box is going to display <INPUT TYPE=RADIO> Creates a radio button two-stated field, selected or unselected, usually only one can be selected Name Name applies to the collection of buttons Value Value of the specific button Checked If the button is checked, it will remain checked from the very beginning. <INPUT Creates a checkbox, two-stated field, TYPE=CHECKBOX> selected or unselected, usually more than one can be selected Name Label of the item Value Value of the specific item Checked To specify the default selection <INPUT Displays asterisk in the field TYPE=PASSWORD > Name Label of the control Size Size of the control Maxlength Maximum no of characters taken by the control <INPUT The field will not be visible. TYPE=HIDDEN> Name Name of the hidden control Value Value of the hidden control
  41. 41. <INPUT Creates a button, other than TYPE=BUTTON> SUBMIT/RESET button. Name Name of the button control Value Text which will be displayed on the button <INPUT Creates a button, which passes data TYPE=SUBMIT> to the Web server. Value Text which will be written on the face of the button <INPUT Creates a button, which resets all the TYPE=RESET> fields of the form. Value Text which will be written on the face of the button <INPUT TYPE=IMAGE> An image is used for Submit button Name Specifies that the x, y coordinates where the mouse is located will be returned to the server when the image is clicked. Src URL of the image Border Border of the image <INPUT TYPE=FILE> File field allows uploading files. Name Specify the name of the control Size Specify the visible length of the control Accept Specify which file types can be uploaded Maxlength Specify the maximum length of the control Example: Formex.htm <html> <head> <title>FORM EXAMPLE</title> </head> <body bgcolor=lightcyan> <Form method="POST"> <B><p align="center"> <Font color="#800000"> <i><b>EXAMPLE OF FORM</b></i> </font> </p> <p align="left"> <font color="#800080">NAME</font>
  42. 42. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <input type="text" name="T1" size="20" maxlength="30"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p> <p align="left"> <font color="#800080">PASSWORD &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; :&nbsp;&nbsp;&nbsp; <input type="password" name="T3" size="20"> </font> </p> <p align="left"> <font color="#800080">ADDRESS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; :&nbsp;&nbsp; <textarea rows="2" name="S1" cols="20"></textarea> </font> </p> <p align="left"> <font color="#800080">PHONE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <input type="text" name="T2" size="8" maxlength="16"> </font> </p> <p align="left"> <font color="#800080">SEX : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; MALE <input type="radio" value="V1" checked name="R1"> FEMALE <input type="radio" name="R1" value="V2"> </font> </p> <p align="left"> <font color="#800080">EDUCATIONAL QUALIFICATION :&nbsp;&nbsp;&nbsp; <select size="1" name="D1"> <option>UNDER GRADUATE</option> <option selected>GRADUATE</option> <option>POST GRADUATE</option>
  43. 43. <option>B.E.</option> </select> </font> </p> <p align="left"> <font color="#800080">HOBBIES &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; LISTENING MUSIC <input type="checkbox" name="C1" value="ON" checked> </font></p> <p align="left"> &nbsp;&nbsp; <font color="#800080"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; READING STORY BOOKS <input type="checkbox" name="C2" value="ON"> </font> </p> <p align="left"> &nbsp;&nbsp; <font color="#800080"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; PLAYING <input type="checkbox" name="C3" value="ON"> </font> </p> <p align="left"><font color="#800080"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; WATCHING MOVIES <input type="checkbox" name="C4" value="ON">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font></p> <p align="center"> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"></p> <p align="left">&nbsp;</p> </form> </body> </html> Output:
  44. 44. FRAME A frames page is a special kind of HTML page that divides the browser window into different areas called frames, each of which can display a different page. When you click a hyperlink on a page displayed in one frame, the page pointed to by that hyperlink can be displayed in another frame. The frames page itself contains no visible content: It's just a container that specifies which other pages to display and how to display them. When you create a frames page using one of the frames page templates, the navigation between frames is already set up for you. In the Contents frames
  45. 45. page template, for example, clicking a hyperlink in the Contents frame on the left displays a page in the Main frame (called the target frame) on the right. Frames allow a single Web browser window to be divided into several different areas. Each area can display a different Web page. Thus frames add flexibility to a site. To define frame, first define a page that gives the frame layout. Second, specify a web page put in each frame. A page that gives a frame layout does not have <BODY>; instead, <FRAMESET> tag, you break the window into columns or rows. Each column or row then may be used as frame, or broken up into smaller frames by using another <FRAMESET> tag. Like <BODY> the <FRAMESET> container must end with </FRAMESET> tag. TAGS ATTRIBUTES DESCRIPTION <FRAMESET>… Divides pages into </FRAMESET> frames. COLS Divides documents into Columns ROWS Divides documents into Rows <FRAME> Specifies the file to be displayed in each frame. SRC Specifies URL of the HTML file NAME Specifies the name of the frame BORDER Specifies the thickness of the border around the frame in pixels. BORDERCOLOR Specifies the bordercolor of the frame NORESIZE Specifies that the size of the frame is fixed, i.e. it cannot be altered by users. SCROLLING Specifies scroll bars. It can take values YES, NO or AUTO. <NOFRAMES>… Specifies that the HTML </NOFRAME> codes within these tags are displayed by non- Netscape browser. To place a frameset within a frameset (nested frameset) <FRAMESET rows=”20%, 80%”>
  46. 46. <FRAME scrolling=”yes”> <FRAMESET cols=”25%, 75%”> <FRAME scrolling=”yes”> <FRAME scrolling=”yes”> </ FRAMESET> </ FRAMESET> Display A Page In A Frame When a frames-compatible browser downloads a frames page, it reads the frame information and then displays an initial page in each frame. When a site visitor clicks a hyperlink on a page in one frame, the page pointed to by that hyperlink usually opens in another frame on the same frames page. When you click a hyperlink on a page that's displayed in one frame of a frames page, the page pointed to by that hyperlink usually opens in another frame (called the target frame). On frames pages that you create using frames page templates (suppose in FrontPage), the navigation between frames is already set up for you. In the Contents template, for example, any hyperlinks you create on the page in the Contents frame automatically display a page in the Mainframe. Example: FARMEEX.HTM <HTML> <HEAD><TITLE>frame example</TITLE></HEAD>
  47. 47. <FRAMESET cols="20%, 80%"> <FRAME scrolling="yes" src="first.htm"> <FRAMESET rows="35%, 65%"> <FRAME scrolling="yes" src="third.htm"> <FRAME scrolling="yes" src="sec.htm"> </ FRAMESET> </ FRAMESET> </Html> FIRST.HTM <HTML> <HEAD><TITLE>THIS IS OUR FIRST DOCUMENT</TITLE> <base target="rtop"></HEAD> <BODY>FIRST HTML DOCUMENT</BODY> </HTML> SEC.HTM <HTML> <HEAD><TITLE>two shopping lists</TITLE> <base target="rbottom"></HEAD> <BODY bgcolor=cyan> <ul> <li>EGGS <li>MILK <li>APPLES <li>RAZOR BLADES </ul> <img src="earth.gif" height=120 width=150 vspace=20 hspace=50> <ul type="square"> <li> HAMMER <li>SCREWDRIVER <li type="disc">SCREWS <li type="circle">CHAINSAW </ul><ul> <li>A <ul> <li>AA <li>AB <ul> <li>AAA <li>ABA </ul> <li>AC
  48. 48. </ul> </ul> <ol> <li>BREAD <li>TURKEY BACON <li value="10">DARKCHOCOLATE <li>AVOCADOS </ol> <DL> <DT>Term A<DD>Definition of term A <DT>Term B<DD>Definition of term B </DL> </BODY> </HTML> THIRD.HTM <HTML> <HEAD> <TITLE>DOCUMENT</TITLE> </HEAD> <BODY> <STRONG>HELLO!!!!!!!</STRONG> <B><U><I> HEADINGS WILL BE: </I></U></B> <BR> <H1 align="center">FIRST LEVEL HEADING</H1> <H2 >SECOND LEVEL HEADING</H2> <H3>THIRD LEVEL HEADING</H3> </BODY> </HTML>
  49. 49. Output : Floating Frame Floating frames are scrollable areas that appear in a file on a web page. Unlike regular frames, they cannot be resized. You can place a floating frame anywhere; you can place an image or other element on an ordinary web page. The <IFRAME> tag is used to create a floating frame. Attributes • Src ”URI” specifies the URI containing the initial contents of the frame. • Name names the current frame. • Frameborder ”1 | 0” Toggles borders to be drawn around the frame. 1 represents a border is drawn. 0 represents a border is not drawn. • Marginwidth ”pixels” Sets the margin between the contents of the frame and its left and right borders.
  50. 50. • Noresize Prohibits the user agent from resizing the frame. • Scrolling ”auto | yes |no” determines whether the user agent provides scrolling devices for the frame. The syntax for the <IFRAME> tag is: <IFRAME WIDTH=400 HEIGHT=300 SRC=”anypage.htm”> </IFRAME> Example: <HTML> <head> <title>example of inline frame</title> </head> <body bgcolor="pink" text="blue"> <p> DIFFERENT FILES <center> <IFRAME src="first.htm" marginheight="0" frameborder="10" width="300" height="100"> <P> The <A href="first.htm">first</A> first file is available. </IFRAME> <IFRAME src="sec.htm" marginheight="0" frameborder="10" width="300" height="100"> <P> The <A href="sec.htm">sec</A>second file is available. </IFRAME> <IFRAME src="third.htm" marginheight="0" frameborder="10" width="300" height="100"> <P> The <A href="third.htm">third</A>third file is available. </IFRAME> </center> </body> </HTML> Output:
  51. 51. STYLE SHEET A style is a set of formatting instructions for any given HTML element specified by the W3C. Many webmasters are already using styles in their web pages because of their usefulness. For example, the heading <H> tags represent various styles: Heading level one is bold, times new roman, and 24 points by default; Heading level four is bold, times roman, and 12 points by default; Using style sheet features, you can change these default attributes. You can also control margins, line spacing, and placement of design elements, as well as specify colors, fonts, and point sizes. There are three ways you can use style sheets on pages in your web: • Link a page to an external style sheet. • Create an embedded style sheet on a page. • Apply inline styles to individual page elements. Each method has advantages and disadvantages: Use an external style sheet when you want to apply the same styles consistently across some or all pages in your web. By defining styles in one or more external style sheets and linking them to pages, you ensure consistency of appearance throughout those pages. If you decide to change a style, you need only make one change — in the external style sheet — and the change will be reflected in
  52. 52. all of the pages linked to that style sheet. Typically, an external style sheet uses the .css file name extension, such as Mystyles.css. Use an embedded style sheet when you want to define styles only for the current page. An embedded style sheet is a type of cascading style sheet that's "embedded" within the <HEAD> tags of a page. Styles in an embedded style sheet can be used only on that same page. Use inline styles to apply cascading style sheet properties to individual elements on a page. If a page is linked to an external style sheet, the embedded or inline styles that you create for that page will either extend or override properties specified in the external style sheet. Note: Linked and inline style sheets are ignored by non-style sheet capable browsers. Example of INLINE STYLE SHEET <SPAN STYLE=”font-size: 14pt; color: red”> Example of EMBEDDED STYLE SHEET Suppose you want to create a page like the following • • Create a light gray background for the page • Center all <H3> headings and display their text in white. • Indent the first line of all paragraphs. So the HTML code will be <HTML> <HEAD><TITLE>Sample Example</TITLE> <STYLE> BODY {BACKGROUND: pink} H3 {TEXT-ALIGN: “center”; COLOR: “RED”} P {TEXT-INDENT: “+10%”} </STYLE></HEAD> <BODY> <H3>This heading has been created for style sheet</H3> <P> This is a normal paragraph. </P> </BODY> </HTML>
  53. 53. Output: Cascading style sheet Cascading style sheets refers to the use of multiple, overlapping style definitions in a single document. A style sheet file can link to every document in a web site, thus controlling the overall look and feel of the site. The HTML 3.2 recommendation for Cascading Style Sheets specifies four ways to apply style variations. The first two methods provide ways to reference external style sheets (text files with .css extensions), which allow you to use styles across multiple web pages. The third method defines styles for a single page. The fourth method is used to make quick temporary style changes to existing HTML text, such as spanning a background color or an image behind words. Working with cascading style sheets Cascading style sheets give you more control over the appearance and presentation of your pages. Using cascading style sheets, you can extend the ability to precisely specify the location and appearance of elements on a page and create special effects. You can also make your site more accessible for visitors with specialized browsers or output devices. The contents of a style sheet A cascading style sheet (CSS) defines the styles that you can apply to pages or page elements. Each style definition, or style rule, consists of a selector followed by the properties and values for that selector. The following are simple examples of style rules defined in a style sheet: H1 {font-size: x-large; color: green}
  54. 54. H2 {font-size: large; color: blue} . Note {font-size: small} #Footer {font-family: serif} In the example, H1 and H2 are selectors that modify the formatting properties of standard HTML tags. The selectors' properties and values are contained within the curly braces { } — font-size is a property, and x-large is the value of the font- size property. You can specify multiple properties for a selector by separating each with a semi-colon (;). In this example. note is a class selector, and #footer is an ID selector. Using cascading style sheets, you can set a wider range of properties than using standard HTML alone, including: • Font effects, such as small caps and expanded character spacing. • Paragraph properties, such as indentation, line spacing, and spacing before or after. • Borders and shading properties, such as boxes and background colors. • Positioning properties, such as text wrapping around page elements, absolute or relative positioning of page elements, and z-order (front to back layering) of page elements. Linking to style sheets from your html file <LINK REL=STYLESHEET TYPE=”text/css” HREF=”http://”> To set the color of all the tags to blue, you write in the HEAD tag (or right below the TITLE tag): <STYLE TYPE="text/css"> H3 {color: yellow;} FONT {color: blue;} </STYLE> In the CSS code below, FONT is known as the sector and color: blue or anything else that goes within the brackets is known as the declaration. Every HTML tag that fits under the specifications of the sector are given the declarations listed. In this case, any FONT tag in the document is given the color blue. Example of inserting a .css file into .htm file Sty.css BODY {BACKGROUND: cyan} H2 {TEXT-ALIGN: "center"; COLOR: "RED"} P {TEXT-INDENT: "+20%”}