html

Module2 htmlHTML HTML stands for Hyper Text Markup Language. It is a formatting language used to define the appearance and contents of a web page. It allows us to organize text, graphics, audio, and video on a web page. HTML documents are also called web pages

HTML TAGSAny formatted text documents composed of a set of elements such as paragraph, headings and lists. each element is surrounded by set of controlling information. formatting is specified by using tags Tag is a command that tells the web browser how to display the text, audio, graphics or video on aweb page.Keypoints about tags The tag name is specified between the angle brackets like . HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name content If a browser not understand a tag it will usually ignore it. Some characters have to be replaced in the text by escape sequences. White spaces, tabs and newlines are ignored by the browser.

STRUCTURE OF HTML DOCUMENT

Welcome To WWW

This a headingThis is a paragraph.

The first tag in your html document is . This tag tells your browser that this is the start of an html document. The last tag in your document is . This tag tells your browser that this is the end of the html document. The text between the tag and the tag is header information. Header information is not displayed in the browser window. The text between the tags is the title of your document. The tag is used to uniquely identify each document and is also displayed in the title bar of the browser window. The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font. Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. Notice you don't see the text between the tags . If you look at the source code, you would see the comment. To view the source code for this page, in your browser window, select View and then select Source. Document HeadEach HTML document also includes a header section indicated by the tag which in turn contains elements like , etc. Document head holds control information to be used by browsers and servers.most programs donot use any of the head tags except Basic HTML TagsHeadersThere are 6 levels of headers.Headings are defined with the to tags. defines the largest heading while defines the smallest. HELLOHELLOHELLOHELLOHELLOHELLO

HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align. I can align headings This is a centered heading This is a heading aligned to the right

Paragraphs Paragraphs are defined with the tag. You can use the align attribute with a paragraph tag as well. This is a paragraph You must indicate paragraphs with elements. A browser ignores any indentations or blank lines in the source text. Without elements, the document becomes one large paragraph. HTML automatically adds an extra blank line before and after a paragraph. Line Breaks The
tag is used when you want to start a new line, but don't want to start a new paragraph. The
tag forces a line break wherever you place it. It is similar to single spacing in a document. The
tag has no closing tag.

HTML BlocksHtml documents are structured as blocks of text,each of which can be formatted independently.A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).Examples of block-level elements: - Character formatting HTML also defines specialelementsfor defining text with a specialmeaning.HTML uses elements like and for formatting output, likeboldoritalictext.tagThe HTMLelement definesboldtext, without any extra importance.This text is bold.HTMLItalicandEmphasizedFormattingThe HTMLelement definesitalictext, without any extra importance.This text is italic.strong tag: This tag is used to always emphasized the text .The HTMLelement definesemphasizedtext, with added semantic importance.This text is emphasized.HTMLSuperscriptFormattingThe HTMLelement definessuperscriptedtext.ExampleThis issuperscriptedtext.HTMLSubscriptFormattingThe HTMLelement definessubscriptedtext.ExampleThis issubscriptedtext.Underline tag is used for underlineCentering ContentYou can usetag to put any content in the center of the page or any table cell.ExampleCentring Content ExampleThis text is not in the center.This text is in the center.This will produce following result:This text is not in the center.This text is in the center.Font tagThe tag specifies the font face, font size, and color of text.This is some text!This is some text!This is some text!specify minimum font size for the basic text but not for heading.size argument takes integer from 1 to 7 using ordered list c c++ J2SE J2EE unordered list C c++ J2SE J2EE definition list HTMLHyper text markup language using to display some text or image on the browsers DHTML Dynamic HTMLNested HTML ListsList can be nested (lists inside lists):ExampleCoffeeTea Black teaGreen teaMilk Coffee Tea Black tea Green tea MilkTablesTables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. examplenamemarka50outputname marka 50To display a table with borders, you will use the border attribute.namemarkNamemarkHeadings in a Table Headings in a table are defined with the tag.namemarka50b70NamemarkA50B70Cell Padding and Spacing The tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together. Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible. Cellpaddingis the pixel space between the cell contents and the cell border. The default for this property is also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on and you want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible, even with the border property turned on.Table Width The width attribute can be used to define the width of your table. It can be defined as a fixed width or a relative width. A fixed table width is one where the width of the table is specified in pixels. For example, this code, , will produce a table that is 550 pixels wide. A relative table width is specified as a percentage of the width of the visitor's viewing window. Hence this code, , will produce a table that occupies 80 percent of the screen. tag is used to display Heading of the table .stringColspan and Rowspan AttributesYou will usecolspanattribute if you want to merge two or more columns into a single column. Similar way you will userowspanif you want to merge two or more rows. Working with table



mark sheet NameMarksCVisualBasicc++shilpa21 45 30 vaishali42 48 33 Table Header, Body, and FooterTables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.The three elements for separating the head, body, and foot of a table are: -to create a separate table header. -to indicate the main body of the table. -to create a separate table footer.A table may contain several elements to indicate differentpagesor groups of data. But it is notable that and tags should appear before Playing audio and videoTo play an audio file in HTML, use thetagExampleYour browser does not support the audio element.Thecontrolsattribute adds audio controls, like play, pause, and volume.Theelement allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.The text between the and tags will only be displayed in browsers that do not support the element.HTML Audio - Media TypesFile FormatMedia TypeMP3audio/mpegOggaudio/oggWavaudio/wavThe HTML tagTo show a video in HTML, use theelement:ExampleYour browser does not support the video tag.Thecontrolsattribute adds video controls, like play, pause, and volume.It is a good idea to always includewidthandheightattributes. If height and width are not set, the page might flicker while the video loads.Theelement allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.The text between the and tags will only be displayed in browsers that do not support the element.HTML AutoplayTo start a video automatically use theautoplayattribute:ExampleYour browser does not support the video tag.HTML Video - Media TypesFile FormatMedia TypeMP4video/mp4WebMvideo/webmOggvideo/oggFrames in HTML To divide a web page into different partitions we use Frames Two tags called and are used for creating frames and loading pages into those frames. The tag defines one particular window (frame) within a .Each in a can have different attributes, such as border, scrolling, the ability to resize, etc.Ex: tag is a A container tag, requires a closing tag Determines the frame types and sizes on the page Two frame types: Columns Rows rows and cols are the attributes of the rows is used to divide the frame horizontally based on value given. cols is used to divide the frame vertically based on value given. In the frameset document, the element takes the place of the element tag is used to Load a web page into a frame using srcattribute Use the name attribute to name a frame, then target the frame name with hyperlinks The syntax for naming a frame is as follows: The following code names a frame: The following code targets this frame: Visit James If a user clicks the Visit James link, the James page will open in the Authors frame Ex1: The Tag AttributesFollowing are important attributes of the tag:AttributeDescriptioncolsspecifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: Absolute values in pixels. For example to create three vertical frames, usecols="100, 500,100". A percentage of the browser window. For example to create three vertical frames, usecols="10%, 80%,10%". Using a wildcard symbol. For example to create three vertical frames, usecols="10%, *,10%". In this case wildcard takes remainder of the window.rowsThis attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, userows="10%, 90%". You can specify the height of each row in the same way as explained above for columns.borderThis attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero means no border.frameborderThis attribute specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border.framespacingThis attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames.The Tag AttributesFollowing are important attributes of tag:AttributeDescriptionsrcThis attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file available in html directory.nameThis attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.frameborderThis attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the tag if one is given, and this can take values either 1 (yes) or 0 (no).marginwidthThis attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10".marginheightThis attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight="10".noresizeBy default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize="noresize".scrollingThis attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.longdescThis attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm"Note: section is not needed for a frameset page. tag is given directly in the html sectionHTML IframesYou can define an inline frame with HTML tag.frame can be embedded with in a document. The tag is not somehow related to tag, instead, it can appear anywhere in your document. The tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.Thesrcattribute is used to specify the URL of the document that occupies the inline frame.ExampleFollowing is the example to show how to use the :HTML IframesDocument content goes here...This creates a button that automatically resets form controls to their initial values. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form'sactionattribute: First name:

Last name:


This is how the HTML code above will be displayed in a browser:Top of FormFirst name:Last name:Bottom of FormThe Action Attribute The action attribute specifies where to send the form-data when a form is submitted. The common way to submit a form to a server, is by using a submit button. Forexample specifies form data send to action_page.php If the action attribute is omitted, the action is set to the current page.The Method AttributeThemethod attributespecifies the HTTP method (GETorPOST) to be used when submitting the forms:or:When to Use GET? You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=Mickey&lastname=Mouse GET is best suited to short amounts of data. Size limitations are set in your browser.when to Use POST?You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address.The Name AttributeTo be submitted correctly, each input field must have a name attribute.This example will only submit the "Last name" input field:Example First name:

Last name:


File Upload BoxIf you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the element but type attribute is set tofile.ExampleHere is example HTML code for a form with one file upload box:File Upload BoxTop of FormBottom of FormAttributesFollowing is the list of important attributes of file upload box:AttributeDescriptionNameUsed to give a name to the control which is sent to the server to be recognized and get the value.AcceptSpecifies the types of files that the server accepts.tagTop of FormTheelement defines a clickablebutton:ExampleClick Me!Try it Yourself This is how the HTML code above will be displayed in a browser:Click Me!Multimedia objectsThe HTML tag is used to embed multimedia in an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.You can also use the tag to embed another webpage into your HTML document.The tag is also used along with this tag to define various parameters. Note:An element must appear inside the element. The text between the and is an alternate text, for browsers that do not support this tag.Example:HTML object Tag alt : test.jpgAttributeValueDescriptionaligntopbottommiddleleftrightSpecifies the alignment of the element according to surrounding elementsarchiveURLNot supported in HTML5.A space separated list of URL's to archives. The archives contains resources relevant to the objectborderpixelsNot supported in HTML5.Specifies the width of the border around an classidclass_IDNot supported in HTML5.Defines a class ID value as set in the Windows Registry or a URLcodebaseURLNot supported in HTML5.Defines where to find the code for the objectcodetypemedia_typeNot supported in HTML5.The media type of the code referred to by the classid attributedataURLSpecifies the URL of the resource to be used by the objectdeclaredeclareNot supported in HTML5.Defines that the object should only be declared, not created or instantiated until neededformform_idSpecifies one or more forms the object belongs toheightpixelsSpecifies the height of the objecthspacepixelsNot supported in HTML5.Specifies the whitespace on left and right side of an objectnamenameSpecifies a name for the objectstandbytextNot supported in HTML5.Defines a text to display while the object is loadingtypemedia_typeSpecifies the media type of data specified in the data attributeusemap#mapnameSpecifies the name of a client-side image map to be used with the objectvspacepixelsNot supported in HTML5.Specifies the whitespace on top and bottom of an objectwidthpixelsSpecifies the width of the objectHTMLTagExampleSet the "autoplay" parameter to "true", so the sound will start playing as soon as the page loads:AttributesAttributeValueDescriptionnamenameSpecifies the name of a parametertypemedia_typeNot supported in HTML5.Specifies the media type of the parametervaluevalueSpecifies the value of the parametervaluetypedatarefobjectNot supported in HTML5.Specifies the type of the value32