logging in or signing up HTML_PPTnew updates rekasriraji Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 7 Category: Education License: All Rights Reserved Like it (0) Dislike it (0) Added: January 03, 2012 This Presentation is Public Favorites: 0 Presentation Description HTML Basic Concepts Comments Posting comment... Premium member Presentation Transcript HTML: HTMLWhat is HTML?: What is HTML? HTML is a language for describing web pages. HTML stands for H yper T ext M arkup L anguage HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pagesHTML Tags: HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tagsHTML Documents = Web Pages: HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Basic Tags : HTML Basic Tags <html>: This element tells that this is an HTML document. <head>: This element contains the information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. <body>: The body element defines the content of the document (like text, images, colors, graphics, and so on).My First HTML Program: My First HTML Program <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>HTML Headings: HTML Headings <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>HTML Paragraphs: HTML Paragraphs <p>This is a paragraph.</p> <p>This is another paragraph.</p>HTML Links: HTML Links HTML links are defined with the <a> tag. Example: <a href ="http://www.sample.com">This is a link</a>HTML Images: HTML Images HTML images are defined with the < img > tag. Example < img src ="w3schools.jpg" width="104" height="142" />HTML Element Syntax: HTML Element Syntax An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributesHTML Attributes: HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Always Quote Attribute Values Example: <a href ="http://Sample.Com">This is a link</a>HTML Comments: HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: <!-- This is a comment -->HTML Text Formatting: HTML Text Formatting <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p>< i >This text is italic</ i ></p> </body> </html>HTML Tables: HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the < tr > tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.Table Example: Table Example <table border="1"> < tr > <td>row 1, cell 1</td> <td>row 1, cell 2</td> </ tr > < tr > <td>row 2, cell 1</td> <td>row 2, cell 2</td> </ tr > </table>HTML Table Headers: HTML Table Headers <table border="1"> < tr > < th >Header 1</ th > < th >Header 2</ th > </ tr > < tr > <td>row 1, cell 1</td> <td>row 1, cell 2</td> </ tr > < tr > <td>row 2, cell 1</td> <td>row 2, cell 2</td> </ tr > </table>PowerPoint Presentation: Table Properties PROPERTY DISCRIPTION align= left center right left align table center table right align table background=filename image inserted behind the table bgcolor =# rrggbb background color border=n border thickness bordercolor =# rrggbb border color cellpadding =n distance between cell and content cellspacing =n space between cells nowrap Protects again linebreaks , even though the content might be wider than the browser window.HTML Forms: HTML Forms A form is an area that can contain form fields Form fields are objects that allow the visitor to enter information. When your form is submitted you need a program that can receive the information. Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information. The <form>Tag : The <form>Tag A form is defined with the <form> tag. The form tag defines the manner in which the server handles the information input by the user in the form. You must define at least two special form attributes, which provide the name of the form’s processing server and the method by which the parameters are to be sent to the server. A third, optional attribute lets you change how the parameters get encoded for the secure transmission over the network.Form Tag Attributes: : Form Tag Attributes: Action = url : The action attribute points to a form processing application or mechanism (mostly a server side application). A URL that defines where to send the data when the submit button is pushed Method = get/post: Defines how the FORM information is going to be sent. The HTTP method for sending data to the action URL is defined. Default is GET.PowerPoint Presentation: Target: Defines where to open the target URL. _blank The target URL will open in a new window _self The target URL will open in the same frame as it was clicked _parent The target URL will open in the parent frameset _top The target URL will open in the full body of the window Text Field : Text Field Text Fields are one line areas that allow user to enter text Attributes: Text size -One line text field Characters show Maxlength -Max characters allowed. Name -Name of the field. Value -Initial value in the field. Align -Alignment of the field. Tabindex -Tab order of the field.Example : Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> < br > < br > <input type="text" size="40" value="Enter Your Name Here!" Maxlength ="15"> < br > < br > </div> </form> </body> </html> Text Area : Text Area Text areas are text fields that can span several lines. Unlike most other form fields, text areas are not defined with an <input> tag. Instead you enter a < textarea > tag where you want the text area to start and a closing </ textarea > tag where you want the area to end. Everything written between these tags will be presented in the text area box.Attributes Of Text Area: Attributes Of Text Area Rows -Text area - several lines Rows in the field. Cols -Columns in the field. Name -Name of the field. Tabindex -Tab order of the field. Wrap -Turns off linebreaking Shows linebreaking , but sends text as entered.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> < br > < br > < textarea cols="10" rows="2" name=" myname " wrap="off"> type something ths is text area block </ textarea > </div> </form> </body> </html> Check Box: : Check Box: Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. If only one option is to be selected at a time you should use radio buttons instead. Attributes : Name-Name of the field. Value-Value that is submitted if checked. Align-Alignment of the field. Tabindex -Tab order of the field. Checked -Default check this field.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <input type="checkbox" name="option1" value="Option1" align="Center"> Option1< br > <input type="checkbox" name="option2" value="option2" checked> option2< br > </div> </form> </body> </html>Radio Button : Radio Button Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. If more options are to be allowed at the same time you should use check boxes instead. Attributes: Name-Name of the field. Value-Value that is submitted if checked. Align-Alignment of the field. Tabindex -Tab order of the field. Checked -Default check this field.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <input type="radio" name="group1" value="Option1" align="Center"> Option1< br > <input type="radio" name="group1" value="option2" checked> option2< br > </div> </form> </body> </html>Drop Down Menu : Drop Down Menu Drop-down menus are probably the most flexible objects you can add to your forms. Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed). The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <select name="dropdown"> <option value="DN010"> Vignesh </option> <option value="DN017">Suresh</option> <option value="DN028"> Vivek </option> <option value="DN052"> Abhilek </option> </select> </div> </form> </body> </html>Submit Button : Submit Button <input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input. Example: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>PowerPoint Presentation: <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <input type="submit" value="Submit"> </div> </form> </body> </html>HTML Frames: HTML Frames With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: Frames are not expected to be supported in future versions of HTML Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documentsPowerPoint Presentation: Frames can divide the screen into separate windows. With frames, you can display more than one Web page in the same browser window. Each of these windows can contain an HTML document. Each HTML document is called a frame, and each frame is independent of the others.The HTML frameset Element: The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.The HTML frame Element: The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset. In the example below we have a frameset with two columns. Example: <frameset cols="25%,75%"> <frame src ="file.html" /> <frame src =“file2.html" /> </frameset> Meta Tags and Meta Headers : Meta Tags and Meta Headers The <meta> element provides meta-information about the page, such as descriptions and keywords for search engines and refresh rates. In HTML, Meta tag always goes inside the head element. The Meta tag does not have an end Tag. It should always go inside Head Tag. This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> This meta element defines keywords for your page: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">Example: Example <head> <title>Marcia's Dog Training Page</title> <meta name="description" content="This Web page contains information on dog training, including modern training techniques, training news, info on training centres and links to other dog-training sites."> <meta name="keywords" content="Dog, training, puppy, techniques, centres , links, leash, teaching, commands, sit, stay, fetch, beg"> </head> Div Tag : Div Tag The <div> tag in HTML is a tag that defines logical divisions within the content of a page. What this means is that a <div> tag defines sections of a Web page to make it easier to manage, style, and manipulate. You can use the <div> tag when you want to center a block of content or position a content block on the page. The <div> tag is a very powerful tool for Web developers. The <div> tag is a block-level element The <div> tag can contain nearly any other tag The <div> tag cannot be inside <p> tagsHow to use the DIV Tag:: How to use the DIV Tag: The <div> tag is not a replacement for <p> tag. The <p> tag is for paragraphs, only, while the <div> tag defines more general divisions within a document. Don't replace <p> tags with <div> tags. One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It is a good idea to label your <div> tags as you place them in your document. For example, if you are defining the main content area of your site, you should name that DIV tag: " maincontent ". <div id=" maincontent "> It is always a good idea to close your <div> tags as soon as you open them. Then place the contents within the element. If you nest your <div> tags, then be sure that you know where your content is going (in other words, which DIV it should be part of). One can have paragraphs within a <div> you can't have a <div> inside a paragraph.Example Program: Example Program <h2>The div Tag</h2> <div style="color:#FF0000;"> This is some text in a div section< br /> </div> <div style="color:#AA0000;"> This is some text in another div section< br /> </div> Span Tag : Span Tag The <span> tag is used to group inline-elements in a document. It has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag would not change the enclosed items at all. The <span> tag is an inline-level element. The <span> tag can only contain other inline elements like abbr , strong, or tt . The <span> tag can be inside <p> tags or <div> tags.How to use <span> tag: : How to use <span> tag: The <span> tag does not do anything by itself. In fact, the only attribute that might affect the page is the title attribute, and that depends upon the Web browser. Use span tags when you don't want any changes to the layout other than exactly what you specify in the styles of the span. For example, if you use a <div> or <p> most browsers will add space around the element, because they are block elements. It is always a good idea to close your <span> tags as soon as you open them. Then place the contents within the element. If you nest your <span> tags, be sure that you know where your content is going (in other words, which SPAN it should be part of).Example: Example <h1 <span style=" color:black ">H</span> <span style=" color:blue ">E</span> <span style=" color:brown ">L</span> <span style=" color:black ">L</span> <span style=" color:blue ">O</span> </h1>I frame Tag : I frame Tag An inline frame ("floating frame") is a construct which embeds a document into an HTML document so that embedded data is displayed inside a sub window of the browser's window. This does not mean full inclusion; the two documents are independent, and both them are treated as complete documents, instead of treating one as part of the other.How to use ?: How to use ? Decide how big the window is to be. Then, put the IFRAME tag where the window is to be on the page. Give it the URL of the Web page (or script) that will be displayed in the window. The iframe tag can only be used inside a body element. You must not place the iframe tag inside a frameset element.Example: Example <html> <body> < iframe height="200“ width="1000“ src ="http://www.google.com/"> </ iframe > </body> </html>Marquee Tag: Marquee Tag The Marquee tag creates a scrolling effect and can be tailored to include any HTML content. Example: <FONT SIZE="4" FACE="courier" COLOR=blue> <MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor =yellow> This is an example of an alternating marquee...< /MARQUEE> </FONT>END: END You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
HTML_PPTnew updates rekasriraji Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 7 Category: Education License: All Rights Reserved Like it (0) Dislike it (0) Added: January 03, 2012 This Presentation is Public Favorites: 0 Presentation Description HTML Basic Concepts Comments Posting comment... Premium member Presentation Transcript HTML: HTMLWhat is HTML?: What is HTML? HTML is a language for describing web pages. HTML stands for H yper T ext M arkup L anguage HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pagesHTML Tags: HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tagsHTML Documents = Web Pages: HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Basic Tags : HTML Basic Tags <html>: This element tells that this is an HTML document. <head>: This element contains the information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. <body>: The body element defines the content of the document (like text, images, colors, graphics, and so on).My First HTML Program: My First HTML Program <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>HTML Headings: HTML Headings <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>HTML Paragraphs: HTML Paragraphs <p>This is a paragraph.</p> <p>This is another paragraph.</p>HTML Links: HTML Links HTML links are defined with the <a> tag. Example: <a href ="http://www.sample.com">This is a link</a>HTML Images: HTML Images HTML images are defined with the < img > tag. Example < img src ="w3schools.jpg" width="104" height="142" />HTML Element Syntax: HTML Element Syntax An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributesHTML Attributes: HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Always Quote Attribute Values Example: <a href ="http://Sample.Com">This is a link</a>HTML Comments: HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: <!-- This is a comment -->HTML Text Formatting: HTML Text Formatting <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p>< i >This text is italic</ i ></p> </body> </html>HTML Tables: HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the < tr > tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.Table Example: Table Example <table border="1"> < tr > <td>row 1, cell 1</td> <td>row 1, cell 2</td> </ tr > < tr > <td>row 2, cell 1</td> <td>row 2, cell 2</td> </ tr > </table>HTML Table Headers: HTML Table Headers <table border="1"> < tr > < th >Header 1</ th > < th >Header 2</ th > </ tr > < tr > <td>row 1, cell 1</td> <td>row 1, cell 2</td> </ tr > < tr > <td>row 2, cell 1</td> <td>row 2, cell 2</td> </ tr > </table>PowerPoint Presentation: Table Properties PROPERTY DISCRIPTION align= left center right left align table center table right align table background=filename image inserted behind the table bgcolor =# rrggbb background color border=n border thickness bordercolor =# rrggbb border color cellpadding =n distance between cell and content cellspacing =n space between cells nowrap Protects again linebreaks , even though the content might be wider than the browser window.HTML Forms: HTML Forms A form is an area that can contain form fields Form fields are objects that allow the visitor to enter information. When your form is submitted you need a program that can receive the information. Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information. The <form>Tag : The <form>Tag A form is defined with the <form> tag. The form tag defines the manner in which the server handles the information input by the user in the form. You must define at least two special form attributes, which provide the name of the form’s processing server and the method by which the parameters are to be sent to the server. A third, optional attribute lets you change how the parameters get encoded for the secure transmission over the network.Form Tag Attributes: : Form Tag Attributes: Action = url : The action attribute points to a form processing application or mechanism (mostly a server side application). A URL that defines where to send the data when the submit button is pushed Method = get/post: Defines how the FORM information is going to be sent. The HTTP method for sending data to the action URL is defined. Default is GET.PowerPoint Presentation: Target: Defines where to open the target URL. _blank The target URL will open in a new window _self The target URL will open in the same frame as it was clicked _parent The target URL will open in the parent frameset _top The target URL will open in the full body of the window Text Field : Text Field Text Fields are one line areas that allow user to enter text Attributes: Text size -One line text field Characters show Maxlength -Max characters allowed. Name -Name of the field. Value -Initial value in the field. Align -Alignment of the field. Tabindex -Tab order of the field.Example : Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> < br > < br > <input type="text" size="40" value="Enter Your Name Here!" Maxlength ="15"> < br > < br > </div> </form> </body> </html> Text Area : Text Area Text areas are text fields that can span several lines. Unlike most other form fields, text areas are not defined with an <input> tag. Instead you enter a < textarea > tag where you want the text area to start and a closing </ textarea > tag where you want the area to end. Everything written between these tags will be presented in the text area box.Attributes Of Text Area: Attributes Of Text Area Rows -Text area - several lines Rows in the field. Cols -Columns in the field. Name -Name of the field. Tabindex -Tab order of the field. Wrap -Turns off linebreaking Shows linebreaking , but sends text as entered.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> < br > < br > < textarea cols="10" rows="2" name=" myname " wrap="off"> type something ths is text area block </ textarea > </div> </form> </body> </html> Check Box: : Check Box: Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. If only one option is to be selected at a time you should use radio buttons instead. Attributes : Name-Name of the field. Value-Value that is submitted if checked. Align-Alignment of the field. Tabindex -Tab order of the field. Checked -Default check this field.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <input type="checkbox" name="option1" value="Option1" align="Center"> Option1< br > <input type="checkbox" name="option2" value="option2" checked> option2< br > </div> </form> </body> </html>Radio Button : Radio Button Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. If more options are to be allowed at the same time you should use check boxes instead. Attributes: Name-Name of the field. Value-Value that is submitted if checked. Align-Alignment of the field. Tabindex -Tab order of the field. Checked -Default check this field.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <input type="radio" name="group1" value="Option1" align="Center"> Option1< br > <input type="radio" name="group1" value="option2" checked> option2< br > </div> </form> </body> </html>Drop Down Menu : Drop Down Menu Drop-down menus are probably the most flexible objects you can add to your forms. Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed). The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.Example: Example <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <select name="dropdown"> <option value="DN010"> Vignesh </option> <option value="DN017">Suresh</option> <option value="DN028"> Vivek </option> <option value="DN052"> Abhilek </option> </select> </div> </form> </body> </html>Submit Button : Submit Button <input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input. Example: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>PowerPoint Presentation: <html> <head> <title> My First Page </title> </head> <body> <form name="foem1" > <div align="Center"> <input type="submit" value="Submit"> </div> </form> </body> </html>HTML Frames: HTML Frames With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: Frames are not expected to be supported in future versions of HTML Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documentsPowerPoint Presentation: Frames can divide the screen into separate windows. With frames, you can display more than one Web page in the same browser window. Each of these windows can contain an HTML document. Each HTML document is called a frame, and each frame is independent of the others.The HTML frameset Element: The HTML frameset Element The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.The HTML frame Element: The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset. In the example below we have a frameset with two columns. Example: <frameset cols="25%,75%"> <frame src ="file.html" /> <frame src =“file2.html" /> </frameset> Meta Tags and Meta Headers : Meta Tags and Meta Headers The <meta> element provides meta-information about the page, such as descriptions and keywords for search engines and refresh rates. In HTML, Meta tag always goes inside the head element. The Meta tag does not have an end Tag. It should always go inside Head Tag. This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> This meta element defines keywords for your page: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">Example: Example <head> <title>Marcia's Dog Training Page</title> <meta name="description" content="This Web page contains information on dog training, including modern training techniques, training news, info on training centres and links to other dog-training sites."> <meta name="keywords" content="Dog, training, puppy, techniques, centres , links, leash, teaching, commands, sit, stay, fetch, beg"> </head> Div Tag : Div Tag The <div> tag in HTML is a tag that defines logical divisions within the content of a page. What this means is that a <div> tag defines sections of a Web page to make it easier to manage, style, and manipulate. You can use the <div> tag when you want to center a block of content or position a content block on the page. The <div> tag is a very powerful tool for Web developers. The <div> tag is a block-level element The <div> tag can contain nearly any other tag The <div> tag cannot be inside <p> tagsHow to use the DIV Tag:: How to use the DIV Tag: The <div> tag is not a replacement for <p> tag. The <p> tag is for paragraphs, only, while the <div> tag defines more general divisions within a document. Don't replace <p> tags with <div> tags. One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It is a good idea to label your <div> tags as you place them in your document. For example, if you are defining the main content area of your site, you should name that DIV tag: " maincontent ". <div id=" maincontent "> It is always a good idea to close your <div> tags as soon as you open them. Then place the contents within the element. If you nest your <div> tags, then be sure that you know where your content is going (in other words, which DIV it should be part of). One can have paragraphs within a <div> you can't have a <div> inside a paragraph.Example Program: Example Program <h2>The div Tag</h2> <div style="color:#FF0000;"> This is some text in a div section< br /> </div> <div style="color:#AA0000;"> This is some text in another div section< br /> </div> Span Tag : Span Tag The <span> tag is used to group inline-elements in a document. It has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag would not change the enclosed items at all. The <span> tag is an inline-level element. The <span> tag can only contain other inline elements like abbr , strong, or tt . The <span> tag can be inside <p> tags or <div> tags.How to use <span> tag: : How to use <span> tag: The <span> tag does not do anything by itself. In fact, the only attribute that might affect the page is the title attribute, and that depends upon the Web browser. Use span tags when you don't want any changes to the layout other than exactly what you specify in the styles of the span. For example, if you use a <div> or <p> most browsers will add space around the element, because they are block elements. It is always a good idea to close your <span> tags as soon as you open them. Then place the contents within the element. If you nest your <span> tags, be sure that you know where your content is going (in other words, which SPAN it should be part of).Example: Example <h1 <span style=" color:black ">H</span> <span style=" color:blue ">E</span> <span style=" color:brown ">L</span> <span style=" color:black ">L</span> <span style=" color:blue ">O</span> </h1>I frame Tag : I frame Tag An inline frame ("floating frame") is a construct which embeds a document into an HTML document so that embedded data is displayed inside a sub window of the browser's window. This does not mean full inclusion; the two documents are independent, and both them are treated as complete documents, instead of treating one as part of the other.How to use ?: How to use ? Decide how big the window is to be. Then, put the IFRAME tag where the window is to be on the page. Give it the URL of the Web page (or script) that will be displayed in the window. The iframe tag can only be used inside a body element. You must not place the iframe tag inside a frameset element.Example: Example <html> <body> < iframe height="200“ width="1000“ src ="http://www.google.com/"> </ iframe > </body> </html>Marquee Tag: Marquee Tag The Marquee tag creates a scrolling effect and can be tailored to include any HTML content. Example: <FONT SIZE="4" FACE="courier" COLOR=blue> <MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor =yellow> This is an example of an alternating marquee...< /MARQUEE> </FONT>END: END