Html book2

1. A PRESENTATION ON HTML(MARKUP LANGUAGE) Submitted By: Diksha Kumari Student of ‘R.B.S. Engg. Technical Campus Bichpuri’ ‘Computer Science Department’ 1

2. OUTLINES  HTML  Versions of HTML  SGML & XML  Structure document in HTML  Create a web page  Standard extension  Advantages and Disadvantages of HTML  HTML tags Attributes in tags  Creating HTML web pages  Some Examples 2

3. HTML  HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page.  HTML document may be viewed by many different "browsers“, of very different abilities.  HTML allows you to mark selections of text as titles or paragraphs, and then leaves the interpretation of these marked elements up to the browser. 3

4. VERSIONS OF HTML  The first definitive version was HTML 2.0 — this had most of the elements we know and love, but was missing some of the Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes.  HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and utility of HTML.  HTML 3.2 was the next official version, integrating support for TABLES, image, heading and other element ALIGN attributes, and a few other finicky details.  HTML 4.01 is the current official standard. It includes support for most of the proprietary extensions, plus support for extra features (Internationalized documents, support for Cascading Style Sheets, extra TABLE, FORM, and JavaScript enhancements), that are not universally supported.  The introduction of the audio and video elements in HTML5 are nothing more than logical extensions of the old a element. 4

5. HTML IN DETAIL  Hypertext: Hypertext is ordinary text that has been dressed up with extra features, such as formatting, images, multimedia, and links to other documents.  Markup: Markup is the process of taking ordinary text and adding extra symbols. Each of the symbols used for markup in HTML is a command that tells a browser how to display the text.  Language: HTML is not a programming language, but rather a markup language. Here Language relates to some syntax and semantics to create web pages using this language. 5

6. SGML & XML  SGML (Standard Generalized Markup Language) can be used to produce files which can be read by people, and exchanged between machines and applications in a clear-cut manner.  SGML can be created using any editor which can produce files which do not contain application-specific codes (i.e. plain ASCII or EBCDIC).  SGML makes it possible to reuse and share information.  XML stands Extensible Markup Language.  A flexible text format for creating simple very flexible structured documents derived from SGML.  XML was designed to transport and store data, with focus on what data is. 6

7. STRUCTURE OF HTML DOCUMENT  HTML documents are structured into two parts.  HEAD, BODY.  HEAD: The head contains information about the document that is not generally displayed with the document, such as its TITLE.  BODY: The BODY contains the body of the text, and is where you place the document material to be displayed.  Elements allowed inside the HEAD, such as TITLE, are not allowed inside the BODY, and vice versa.  Example of document structure: <html> <head> <title>First Page</title> </head> <body> <b> This is my First HTML Web Page</b> </body> </html> <html> <head> <title>First Page</title> </head> <body> <b> This is my First HTML Web Page</b> </body> </html> 7

8.  The basic structure of an HTML document consists of html, head, title, and body which is explained as under:  HTML: This is the main tag also considered to be the first tag of HTML file. This tag is embedded to write a HTML code.  Syntax:  HEAD: The HEAD tag contains an unordered collection of information about the information about the HTML document.  The element title is used between <HEAD> and </HEAD> tag to provide the title of document.  Syntax: <HTML> DOCUMENT INCLUDED HERE. </HTML> <HTML> <HEAD> <TITLE> First Page </TITLE> </HEAD> </HTML> 8

9.  TITLE: Title tag is used to provide the title of the document. Title should be some strings that identify the contents of the document.  Syntax:  BODY: Body tag contains all the text, images that make up the page, together with the entire HTML element that provides the control and formatting the page. BODY tag is most important tag that contains the actual contents of the web page according to written code.  Syntax: <HTML> <HEAD> <TITLE> First Page. </TITLE> </HEAD> </HTML> <HTML> <HEAD> <TITLE> FUN PAGE. </TITLE> </HEAD> <BODY> DOCUMENT INCLUDED HERE. </BODY> </HTML> 9

10. CREATE A HTML PAGE  HTML documents can be created in any text editor like wordpad, notepad or any other text editor. We can write our HTML code directly into the editor as shown in below:  After writing code, save the file as “filename.html” where “.html” is the extension of the file. In above ex save as TEST1.html.  The above code written can be viewed on the web browser by opening the file in the web browser. 10

11.  Output of above example: 11

12. STANDARD EXTENSIONS  Here are some of the standard extensions, and their meanings:  html (Also .htm) : HTML document, containing text and HTML mark-up instructions.  .txt : A plain text file. The browser presents the file as a block of text and does not process it for mark-up instructions.  Browsers generally treat unknown types of data as a text file.  .Gif : A GIF format image file.  .Xbm : An X-Bitmap (black & white) image file.  .Xpm : An X-Pixmap ( colour) image file.  .jpeg (also .jpg) : A jpeg-encoded image file.  .mpeg (also .mpg or .mpe): An mpeg-encoded video file.  .avi : A (Microsoft) AVI-format video file  .au : An aiff-encoded audio (sound) file.  .Z : A compressed file - compressed using the adaptive Lempel-Ziv coding. This compression/decompression program are commonly found on UNIX computers. 12

13. ADVANTAGES OF HTML  It produces the static code means it displays only that content which we write.  HTML can display Web pages with a wide range of colors, shapes, and objects.  It is not case sensitive language or we can say not a true programming language.  HTML is easy to use and easy to learn.  Loose syntax (although, being too flexible will not comply with standards)  Supported on almost every browser.  Widely used for established on almost every website.  Very similar to XML syntax, which is increasingly used for data storage.  We can easily add sound, video and graphics files easily.  We can divide single window in many windows as the requirements of the user. 13

14. DISADVANTAGES  It cannot produce dynamic output, since it is a static language.  Sometimes, the structuring of HTML documents is hard to grasp.  You have to keep up with deprecated tags, and make sure not to use them  Deprecated tags appear because another language that works with HTML has replaced the original work of the tag thus the other language needs to be learned (most of the time, it is CSS)  Security features offered by HTML are limited.  It does not support the looping. 14

15. HTML TAGS AND ATTRIBUTES  Html Elements  TAG: Tag are the command that instruct the browser about the structure and how the contents are displayed on web page .Tags are specify by pair of angled brackets starting with sign “< “ and ending with sign “ >” where as end tag is recognized by forward slash”/” before the tag name angled brackets.  ATTRIBUTES: Attribute is used to provide the supplementary information about the tag. Each attribute have its own name and values assigned by equal to sign (=). It always come in starting of the tag and its value should be enclosed in double quotes (“”).examples of most common attributes are height, color, width, src, border, align etc.  HTML uses a number of elements to do the formatting of the text. We can create headings, lists, tables etc. using these elements of HTML. HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. HTML is written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags. 15

16.  There are two basic categories of body tags include in html.  Text-level/inline  block-level elements.  Text-level elements are:-  Physical inline elements  Logical inline elements 16

17. PHYSICAL INLINE ELEMENTS  Physical inline elements are used to specify that how text is to be formatted. If the browser does not have the capability to construct the define style then the formatting may be lost and display normal text.  Tags are given below:  <I>…..</I>This tag is used for Italicize text form the document.  <B>.....</B>This tag is used for bold text in a document.  <U>….</U>This tag is used for underline the text form the document.  <SUB>….</SUB>This tag is used for subscript text i.e. lower text on line is decreased size form the document.  <SUP>….</SUP>This tag is used for superscript text i.e. raise text on line is decreased size form the document.  <STRIKE>….</STRIKE> or <S>….</S>This tag is used for strike through text form the document. 17

18.  <TT>…..</TT>This tag is used to display type writer font i.e. fixed width font.  <SMALL>….</SMALL>This tag is used for display the text in smaller font size( 1 font size smaller then surrounding text).  <BIG>….</BIG>This tag is used for display the text in bigger font size( 1 font size bigger then surrounding text). 18

19. EXAMPLE OF PHYSICAL INLINE ELEMENTS 19

20. OUTPUT OF ABOVE EXAMPLE 20

21. LOGICAL INLINE ELEMENTS  Logical inline elements are used to specify text according to the meaning of the text.  Logical inline elements are more useful than the physical inline elements because if the browser is incapable to provide physical inline elements, it will show normal text but logical inline elements always rendered by the web browser.  Tags which are used in Logical inline elements are given below:  EM - Emphasized text <EM>….</EM> This tag is used for emphasizing important parts of documents and display in italics.  STRONG-Strongly emphasized<STRONG>…..</STRONG>This tag is used for strong emphasis. It display the text in bold.  <CODE>…. </CODE>This tag is used for coding, display in courier, fixed width font and used for display for computer code. Code (program language, HTML, etc.) fragment. 21

22.  <SAMP>……</SAMP> This tag is used for sample text and displayed in fixed width font.  <KBD>….</KBD> This tag is used for text as keyboard input and displayed in pain fixed width font.  <VAR>….</VAR> Variable: This tag is used for indicating variable as a computer codes.  <CITE >…..</CITE> This tag is used for indicating a citation —most browser display in italics. E.g. a book title  <BLINK>….</BLINK>This tag is used to makes the text blink.  <INS>….</INS> And .<DEL>….</DEL>The <INS> tag defines text that has been inserted into a document. The <del> tag defines text that has been deleted into a document.  <PRE>….</PRE>The <pre> tag defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.  <ABBR>….</ABBR>The <abbr> tag describes an abbreviated phrase.  <acronym>…..</acronym>The <acronym> tag defines an acronym. An acronym can be spoken as if it were a word, example NATO 22

23.  <blockquote>…..</blockquote>The <blockquote> tag defines a long quotation.A browser inserts white space before and after a blockquote element. It also insert margins for the blockquote element.  <q>….</q>The <q> tag defines a short quotation. The browser will insert quotation marks around the quotation.  DFN - Definition of a term <DEF>…</DEF>This tag is used for definition of words, displayed text is in italics.  <MARQUEE>…..</MARQUEE>This tag is used to scroll text across the screen.  Attributes used in <MARQUEE>tag:  Bgcolor:- specifies the background color of the marquee. The value can be any standard color name or we can write hexadecimal color.  Direction:- specifies the direction of the contents scroll. Direction may be left or right.  Height:- specifies the dimension of the marquee. The value can be any valid percentage or no. of pixels.  Behavior- this attribute sets the behavior of the marquee. The value can be scroll, slide and alternate.  Width:- this attribute specifies horizontal dimension of the marquee. the value can be any valid percentage or no. of pixels. 23

24.  Hspace:- this attribute specifies left and right margin of the marquee. The value can be any valid percentage or no. of pixels.  Vspace:- this attribute specifies top and bottom margin of the marquee. The value can be any valid percentage or no. of pixels.  Loop: - this attribute controls the no. of appearance of the marquee content. The value can be any positive number.  Scrollamount:- this attribute specifies the shift of the marquee text. the value can be no. of pixels.  Scrolldelay:- this attribute specifies how marquee text redraws. The value can be in no. specifying the delay time in milliseconds. 24

25. EXAMPLE OF LOGICAL LEVEL ELEMENTS 25

26. OUTPUT OF LOGICAL LEVEL ELEMENTS 26

27. BLOCK LEVEL ELEMENTS:-  HTML elements are permitted within the BODY are classified as either block-level elements.  Block-level elements typically contain inline elements and other block-level elements.  When rendered visually, block-level elements usually begin on a new line.  Block-level elements include tags that position text on the page like begin new paragraphs, set heading levels and create lists.  Some tags which are used in Block-level elements are given below:  <CENTER>…. </CENTER>The CENTER element defines a block whose contents are centered horizontally on visual browsers. <CENTER> is a shorthand for <DIV ALIGN=center>, though CENTER is slightly better supported among browsers. 27

28. <HR>…..</HR>This tag is used when we want to change in topic, e.g. in order to separate sections of a document. By default it’s align in center. Attributes of <HR> tag ALIGN: means we want to insert the horizontal rule in the documents. We can align the horizontal rule in LEFT/RIGHT/ CENTER. NOSHADE: means we are requests the rule to be rendered in a solid color. SIZE: means that we can specify height of the rule, in pixels and the value must be in integer. WIDTH: means that we can specify width of the rule, in pixels and the value must be in percentage form. <DIR>…..</DIR>The DIR element defines a directory list. The element contains one or more LI (List Item) elements that define the actual items of the list. The LI elements must not contain a block-level element, which prevents DIRs from being nested. 28

29.  <DIV>…..</DIV>It is used to specify document division.  Attribute  ALIGN: This attribute allows different alignments like LEFT, CENTER, and RIGHT to be used in different parts of the document. By default alignment is LEFT.  <Hn>heading text</Hn>  Where n is 1, 2, 3, 4, 5, or 6. It is used to specify a heading. There are six levels of headers starting from H1 the most important to H6 the least important. In H1 is large font and in bold face, often separated with blank lines from the text. More important headings are generally rendered in a larger font than less important ones. H1 headings are often very large font, whereas H6 can be tiny or even smaller than normal text.  Attributes  ALIGN: heading can be aligning in LEFT, RIGHT and CENTER. The default is LEFT alignment. 29

30.  <MENU>…..</MENU>  It is used to present information in a menu-like format. Most browsers present a MENU element exactly the same way as an UL element. A few browsers omit the bullets, however.  <P>……. </P>  It is used to present a normal text paragraph.  Attribute  ALIGN: attribute can be used to specify LEFT, RIGHT OR CENTER alignment of the paragraph. By default the alignment of the paragraph is LEFT. 30

31. EXAMPLE OF BLOCK LEVEL ELEMENTS 31

32. OUTPUT OF BLOCK LEVEL ELEMENTS 32

33. HTML LISTS  HTML supports several elements for making lists. Basically there are three kinds of lists. They are:  Ordered lists (also referred to as Numbered lists)  Unordered lists (also referred to as Bulleted lists)  Definition lists  Different List Tags: 33 TAG DESCRIPTION <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines a definition term <dd> Defines a definition description

34.  Ordered list  The ordered list element’s <OL> and </OL> tags are used to create ordered lists.  The different values for TYPE attribute is as under:  TYPE=”1” (Arabic Numbers)  TYPE=”a” (Lowercase alphanumeric)  TYPE=”A” (Uppercase alphanumeric)  TYPE=”i” (Lowercase Roman numbers)  TYPE=”I” (Uppercase Roman numbers)  Unordered List  The unordered list element’s <UL> and </UL> tags are used to create unordered lists.  The different values for TYPE attribute is as under:  TYPE=”CIRCLE”  TYPE=”DISC”  TYPE=”SQUARE” 34

35.  Definition List  The DEFINITION list element uses the <DL> start tag and the </DL> end tag to create a definition list.  This list is rendered without bullets. The <DT> tag is used for definition terms i.e. name or title of the item that we are defining.  The <DD> tag is used for the definitions themselves.  Nested Lists  Nesting of lists include list in another list. Any type of list can be nested into one another or the nesting can be same type of lists also. 35

36. EXAMPLE OF LIST 36

37. OUTPUT OF LIST 37

38. EXAMPLE OF NESTED LIST 38

39. OUTPUT OF NESTED LIST 39

40. LINKING WEB PAGES  Hyperlinks  Hyperlink refers to that text in a HTML document which can link us to other pages externally or it can also link the pages internally.  For creating a hyperlink we use <A> Anchor tag.  There are two basic categories of linking:  External links  Internal links  Attributes for ANCHOR and LINK  HREF (link to object) *  NAME (link from object) *  REL (relationship between objects)  REV (relationship between objects)  URN (URN for the document -- this attribute has been dropped from the HTML specification, and should not be used)  TITLE (TITLE of document)  METHODS (how to link -- this attribute has been dropped from the HTML specification, and should not be used) 40

41.  External Hyperlinks  The HREF attribute (which is actually optional) marks the anchor as the start of a link to another document or resource (it could point, for example, to an image file), or to a particular place in another document.  <A HREF="URL"> text </A>  Were URL (Uniform Resource Locator) is the URL of the document to be accessed. For example HREF can use http: to access other HTML documents, images, etc.  Internal Hyperlinks  Linking a webpage internally known as internal hyperlink. If we want to move one point to another in a webpage the we use internal hyperlinks. Particular places in an HTML document can be marked as specific destinations of hypertext links via the NAME attribute. 41

42. EXAMPLE OF EXTERNAL HYPERLINKS 42

43. OUTPUT OF EXTERNAL HYPERLINKS 43 These figure show that first we click on html then fig1 is show after that when click on link then page which is example of list is open Fig:1 Fig:2

44. GRAPHICS IN HTML  Image Tag  The IMG element allows an image file to be inserted within an HTML document.  It has several attributes: 44 Attribute Value Description Alt Text Defines a short description of the image Src URL The URL of the image to display

45.  Optional Attributes 45 Attribute Value Description Align Top, bottom, middle left, right Specifies how to align the image according to surrounding text. border Pixels Defines a border around an image. height pixels % Defines the height of an image hspace Pixels Defines white space on the left and right side of the image. ismap URL Defines the image as a server-side image map longdesc URL A URL to a document that contains a long description of the image usemap URL image as a client-side image map. Look at the <map> and <area> tags to figure out how it works vspace Pixels Defines white space on the top and bottom of the image. width pixels % Sets

46. ATTRIBUTES IN IMAGE TAG  ALT="alternative text"  Syntax: <img src=”URL of Image” alt=”Any name”>  ALIGN  Syntax:<img src=”URL of Image” align=”left/right/---“>  SRC  Syntax:<img src=”URL of Image”>  HEIGHT and WIDTH  Syntax:<img src=”URL of Image” height=”n” width=”n”>  ISMAP  Syntax:<img src=”URL of Image” ismap=”value”>  BORDER  Syntax:<img src=”URL of Image” border=”value”>  HSPACE and VSPACE  Syntax:<img src=”URL of Image” vspace=”n” hspace”n”> 46

47.  USEMAP  Syntax: <img src=”URL of Image” usemap=”mapping values”>  Example using img tag 47

48. OUTPUT OF EXAMPLE IMG 48After clicking the image find the next page as list

49. TABLES IN HTML  Table elements  The only two elements allowed inside a table are CAPTION, and TR.  CAPTION defines a table caption, and can take one attribute -- ALIGN -- to define where the caption should be placed. Possible values are "top", "bottom" "left" and "right".  TR defines a Table Row -- a table is made up of any number of any numbers of rows, depending on how you design it. Each row in turn contains cells, denoted either by TD (table data) or TH (table header) elements. The number of TD or TH elements.  In general, TD elements are used for data, while TH elements are used for row or column headings. 49

50. TABLE ATTRIBUTES  TH, TD and TR should always have end tags.  A default TABLE has no borders.  By default, a table is flush with the left margin.  Border attributes: <TABLE BORDER=1>  Cellpadding Attribute: <TABLE BORDER CELLPADDING=8>  Cellspacing Attribute: <TABLE BORDER CELLSPACING=8>  Width Attribute: <TABLE BORDER WIDTH=80%>  The TR Element and Its Attributes o The TR Element defines a single table row. The TR element can take the attributes ALIGN and VALIGN, which define alignment properties for the contents of cells within that row. ALIGN, which defines the horizontal alignment properties, can take the values "left", "center" and "right", while VALIGN, which defines the vertical alignment properties of the cells, can take the possible values "top", "middle", "bottom". The default values are ALIGN="left", and VALIGN="middle". 50

51.  TD and TH Alignment Attributes  The individual table cells, defined by the TD and TH elements, can also take the alignment attributes, to specify the alignment of the particular cell. This overrides the alignment specification given by TR, as shown in the examples below. The default values for TD cells are ALIGN="left", and VALIGN="middle", while the default values for TH are ALIGN="center", and VALIGN="middle".  The COLSPAN and ROWSPAN Attributes  COLSPAN indicates how many columns (counting to the right) are occupied by the cell, while ROWSPAN indicated how many rows (hanging down) the cell "spans“ 51

52. EXAMPLE OF TABLE 52

53. OUTPUT OF TABLE 53

54. FRAMES IN HTML  At first the concept of frames was introduced by Netscape in 1995 and after much Discussion, the W3C (World Wide Web Consortium) included frames in HTML 4.0 standards.  Using frames, you can divide the browser’s window into several smaller segments and display a different web page in each of them.  A common frame layout uses an index frame with links on the left, and a content frame on the right.  A multi-frame document does not contain a BODY element -- instead it contains a FRAMESET element, which defines the sizes, locations and initial contents of the individual FRAMES.  A frame can be divided into rows or columns or both. 54

55. FRAMESET ATTRIBUTES  Frameset contains two basic attributes through which we can split our browser windows easily; those two attributes are as follows:  Row Attribute 55 <HTML> <HEAD><TITLE>FRAMES</TITLE> </HEAD> <FRAMESET ROWS=”25%,75%,*”> <FRAME SRC=”ONE.HTML”> <FRAME SRC=”TWO.HTML”> </FRAMESET> </HTML>

56.  Column attribute 56 <HTML> <HEAD><TITLE>FRAMES</TIT LE> </HEAD> <FRAMESET COLS=”25%,75%,*”> <FRAME SRC=”ONE.HTML”> <FRAME SRC=”TWO.HTML”> </FRAMESET> </HTML>

57. MORE FRAMESET ATTRIBUTE  BORDER: The Border attribute creates the border as outline of frame.  <FRAMESET ROWS=”50%,50%” BORDER=”VALUE/1/2/3/…”>  Here Value describes the thickness of the frame border, if the value of border is zero then there is no border.  FRAME SPACING: It is used to set the value between two frames in pixels.  <FRAMESET ROWS=”50%,50%” FRAMESPACING=”VALUE”>  FRAME ATTRIBUTES  Formatting frames mainly includes controlling the behavior (like scrolling, size) and the appearance (like border width, border color, frame margins) of a frame. There are mainly seven attributes to format a frame.  Removing borders  To turn off borders, set border=0 (for Netscape Navigator) and frameborder=0 (for Internet Explorer). But for uniform results, use both of these attributes in conjunction i.e. use add border=0 frameborder=0. You can use these attributes both in the <FRAMESET> or <FRAME> tags. To remove all the borders from your frames add them in the <FRAMESET> tag and to remove the borders from individual frames include these attributes in the corresponding <FRAME> tag. 57

58.  Adding borderwidth and bordercolor  You can also turn on borders by specifying frameborder=1 (for Internet Explorer) or border=1 (for Netscape Navigator).  make our frame border colored and 10pixels wide, just add border=10 frameborder=1 bordercolor=”purple”.  The NORESIZE attribute  Using noresize attribute, you can prevent the viewer from resizing a frame.  <FRAME src=“dik.gif" height="68" width="55" noresize>  Controlling scroll bars  Using this attribute the scrollbars that you see can be specified as yes, no or auto. Yes means the frame gets scrollbars- whether they’re needed or not. If they are not needed for the content, the browser disables them. No means there will be no scrollbars, even if your frame content is exceptionally large, the browser will simply display as much as it can. Auto is default.  <FRAME src="lolo.gif" height="68" width="55" scrolling=”no”>. 58

59.  TARGET: Targeting Returned Documents to Specific FRAMES Once the frames are named, then a hypertext anchor can be instructed to target the returned data to a particular frame.  NOFRAMES for Browsers that do not Support FRAMEs: If a browser does not support frames it will ignore all the frame elements, and will display the content of NOFRAMES.  Nested Frames: Nested frames represent the combination of split if a browser window into rows and columns combine. By nesting we can split browser window as we requires. 59

60. INLINE FRAMES  Inline are special kind of frames. In this the browser window is not divided into different parts rather a floating frame is being create inside a browser window. Si it is also known as floating frames.  <IFRAME SRC=”FILE.HTML”>IFRAME</IFRAME>  Attributes used by Inline frames  Align : With the use of this align attribute we can change the position of floating frame according to our need. The default value for inline align is left.  <IFRAME SRC=”FILE” ALIGN=RIGHT>IFRAME</IFRAME>  Width: Width is used to change the width of the inline frame. The width can be specified in terms of percentage or in pixels.  <IFRAME SRC=”FILE” WIDTH=”40%”>IFRAME</IFRAME  Height: Width is used to change the width of the inline frame. The width can be specified in terms of percentage or in pixels.  <IFRAME SRC=”FILE” HEIGHT=”40 %”> IFRAME</IFRAME>60

61. HTML FORMS  FORMS: An HTML form is a section of a web document into which the user can enter information.  An HTML form consists of two parts. The first part, the user can see and which he fills out and next one is the part, the users can’t see. The second part specifies how the server should process the user’s information. You should note that HTML forms cannot provide a fully interactive user interface; they can only construct a query or submission to be fetched like any other web page.  Forms only prompt the user for information. To handle the information entered by the user through the form usually requires the provider to write a CGI-based program designed specifically to process submissions from that form. 61

62.  The FORM tag  In the HTML source, a form must start with a <FORM> tag and end with a </FORM> tag.  It has mainly two attributes: action and method.  <FORM action=”URL” method=get | post > …form elements… </FORM>.  Attributes of FORM Tag  Action: The action attribute specify the address of the webpage which will receive the form data when form will be submitted.  <form action=”check.html”>  Method: The method attribute provide two methods to send the data collected from the forms. There are two methods:  GET Method: This method takes the value from FORM fields and encodes them and attaches them to the end of URL of the form.  <form action=”File” method=”get”>  POST Method: This method takes the value from FORM fields and Send it directly to the HTTP without seen in URL of the form that what has been send.  <form action=”File” method=”post”> 62

63.  The INPUT tag: The <INPUT> tag defines an input area within a form.  Text fields: <INPUT type=”text”>  Attributes:  <INPUT type=”text” name=”text-id” value=”default-text” size=”n” maxlength=”m” readonly>  Passwords: Password field is exactly similar to text field, except that it displays *****(asterisks) instead of the actual input.  <INPUT type=”password” name=”password-id” value=”default-text” size=”n” maxlength=”m” readonly>  Radio buttons: Radio buttons are mutually exclusive i.e. they allow the user to choose one of the several options.  <INPUT type=”radio” name = ”radio-id” value = ”choice-id” checked>  Checkboxes: An INPUT tag with attribute type=“checkbox” offers the user an “on” or “off” switch. It Is similar to a radio button, but any number of checkboxes may be switched on. If a Checkbox is switched “on” when the form is submitted, its value attribute is submitted as the form data for the named form component. Unlike circular radio buttons, checkboxes Appear as square boxes and contain a checkmark when activated.  <INPUT type=”checkbox” name =”box-id” value =”choice-id” checked > 63

64.  Drop Down Lists: The next type of input field is a Pull down list. With this type you use <SELECT> instead of <INPUT> and it has a closing tag. These fields are highly flexible as the user can select single or multiple responses.  Syntax  <SELECT name=”text-id” size=”n” multiple>  <OPTION value=”choice-id 1” selected>Text label 1</OPTION>  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  :::::::::::::::  <OPTION value=”choice-id m” selected>Text label m</OPTION>  </SELECT>  The TEXTAREA tag: It sets an area within a form in which the user can type a larger section of text.  Syntax: <TEXTAREA name=”text-id” rows=”n” cols=”m” wrap=”virtual|physical|off readonly > Initial content</TEXTAREA>  File Tag: Another useful type of input is file upload input. With it your visitors can send you a file right off their hard drive.  The syntax: <INPUT type=”file” name=”field-id” size=”n” accept=”file-type”> 64

65.  Submit and Reset buttons: An INPUT tag with type=submit provides a button that submits the information in the completed form to the URL, given as the action attribute of the FORM tag. The information is submitted using the HTTP request type specified by FORM’S method attribute.  Syntax: <INPUT type=”submit” value=”button label text”>  The reset value of the type attribute clears all form entries to the default ones (or leaves them blank if no defaults are specified). Not all HTML forms will use this feature, but it can help users to start afresh or if they want to reconsider the default options.  syntax:<INPUT type=”reset” value=”button label text”>  Hidden value  Syntax:<INPUTtype=”hidden”name=”data-id” value=”hidden- form-data”>  The type =”hidden” makes it invisible. 65

66. EXAMPLE OF FORM 66

67. OUPUT OF FORM 67

68. ADDING MULTIMEDIA IN HTML  Adding audio and video files in HTML document  There are three ways to add audio and video files in webpage these are written below:  Link the audio or video file using <A> tag.  Link the audio or video file using <EMBED> tag.  Link the audio or video file using <OBJECT> tag.  Link the audio or video file using <A> tag  It is same as the normal <A> tag the only difference is that in HREF we assign the URL of the audio or the video files.  Syntax: <A HREF=” FILE URL”>text</A>  Link the audio or video file using <EMBED> tag  The <EMBED> tag is most used to adding multimedia files in webpage that requires particular plug in like audio, video etc. the <EMBED> element is supported by both the Netscape Navigator and MS-Internet Explorer but not supported by other browsers.  Syntax: <EMBED src=“file with extension”> 68

69.  Link the audio or video file using <OBJECT> tag.  The <OBJECT> tag is standard tag used for embedding files adding in webpage. it is used to substitute the <EMBED> tag.  Syntax: <OBJECT DATA=“FILE” TYPE=“VIDEO/MSVIDEO” AUTOSTART=“TRUE”> 69

70. EXAMPLE OF AUDIO AND VIDEO 70

71. OUTPUT 71

72. CONCLUSION  Mostly I have studied from the given document.  I have little problem in form in html.  Little problem in multimedia in html.  I am not give a single example of frame tag I have not studied till now but I m study it within 1 or 2 days. 72

73. THANKSTHANKS 73

Html book2

Html book2

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a Html book2

Similar a Html book2(20)

Último

Último(20)

Html book2