1 / 76

Comprehensive Guide to HTML Markup Language

Learn the fundamentals of HTML markup language, including tags, elements, and document structure. Explore HTML history, tags, and their usage for web development. Improve your web page ranking with meta tags.

lharpole
Download Presentation

Comprehensive Guide to HTML Markup Language

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Hyper Text Markup Language Mob.: 9009054508, 9630883466 Address: 214-215 1st Floor, Garima Arcade, ShindeKiChhawani, Lashkar, Gwalior (M. P.)

  2. Introduction • HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web page(s) and web site(collection of web page(s)). • HTML was created by Berners-Lee in late 1991. • HTML 2.0 was the first standard HTML specification which was published in 1995. • HTML 4.01 was a major version of HTML and it was published in late 1999. • HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012. • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content Designed By: Priyank Gupta

  3. HTML Tags • HTML tags keywords are surrounding in Opening Tag <html> and Closing Tag</html>. • HTML tags is pairs like <body> and </body>. It's container tags. • Some HTML tags is not pairs in Opening and Closing like <br />, <hr />. It's empty tags. • All tags are write in Lower Alphabetical and empty tags always write in closing Tag type like <br/>. • <html>…</html>: used to design html page it the first or start tag for and web page. It contains two sub tags • <head>…</head> • <body>…</body> Designed By: Priyank Gupta

  4. <head>…</head> • HTML <head> tag is a Container Tag. All Header element contains like general information about page, meta-information, style sheet URL and document type information. • HTML <head> tag inside elements does not display in body part on web browser. • Head Elements Usages • HTML <!doctype> tag use for define a type of document.HTML <link> tag is use for linked external CSS style sheet, external javascript etc... URL define.HTML <meta> tag use for improve a rankings in search engines means optimize webpage using proper meta data information.HTML <title> tag define a document title.HTML <style> tag is use for write internal CSS inside current document.HTML <script> tag is use for create a dynamic web pages easy and more flexible in internal and external write a javascript code. And many more. Designed By: Priyank Gupta

  5. Example <html> <head> <link rel="stylesheet" type="text/css" href="/styles.css"> <title> Example is Head Tag Elements </title> <script src="javascript.js"> </script> </head> <body> <p> Body Part</p> </body> </html> Designed By: Priyank Gupta

  6. HTML <!doctype> tag  • HTML <!doctype> tag refer to the document type declaration use to specifying which version of HTML the document is using. • HTML <!doctype> declaration is not an HTML tag. It's a information about which version of the markup language the page is written. • HTML 4.01 Strict: All HTML tag and attributes are allow to supported document type. It's not allow to frame set and presentational. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Designed By: Priyank Gupta

  7. HTML <meta> Tag • HTML <meta> tag optimize ranking of web page in search engine. • <meta> tag is very useful for web developers. <meta> tag to save page contain related key-word, description etc. Search engine is recognize the keyword and description to identify the ranking of web page. Designed By: Priyank Gupta

  8. <meta> Tag Example <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="description" content="Free online web development tutorials Includes HTML Tutorial, Example codes, Cheet Sheet." /> <meta name="keywords" content="html, free, tutorials, html5, tutorial in html, tutorialized, dynamic, online, web, design, tricks, online, development, site builder, for beginners, master, builder, howto, learn, pdf, editor" /> <meta name="robot" content="index,follow" /> <meta name="revisit-after" content="5" /> </head> Designed By: Priyank Gupta

  9. HTML <title> Tag • HTML <title> tag define a document title that display on browser header. <title> tag define on head section in document. • Example <html> <head> <title> Example is Head Tag Elements </title> </head> <body> <p> Body Part</p> </body> </html> Designed By: Priyank Gupta

  10. HTML <style> Tag • HTML <style> tag define a style sheet definition (usually inline style, internal style or get external style sheet). • Example <span style="color:#66ffcc;"> Binary Systems </span> <br /> <span style="color:#ffcc00;"> Binary Systems </span> Designed By: Priyank Gupta

  11. HTML <script> Tag • HTML <script> tag define a client side script. • Example <script type="text/javascript"> document.write("Hello Students!") </script> Designed By: Priyank Gupta

  12. HTML <base> Tag • HTML <base> tag is define a base URL for all the links with in a web page. • More Description: You have no need to write a full URL in everytimes. Define once base URL than after when you need write only sub directory path URL in a web page. • Always <base> tag is defined on head part of the HTML document. <base> tag is empty tag. • <html> • <head> • <base href="http://www.binarysystems.co.in/" target="_blank" /> • </head> • <body> • <p>Jum To: <a href="index.aspx">Home Page</a></p> • <p>Jum To: <a href="ContactUs.aspx">Contact Us</a></p> • </body> • </html> Designed By: Priyank Gupta

  13. <body>…</body> • HTML body section is a main contain section of web page all contain that will be seen when the user loads the webpage. • HTML body section supported all the contains such as text, hyperlinks, images, Special Character, lists, tables, frames, forms etc. • It's most powerful section and important section to display web page. • Basic Body Section Tags: • <a>: Defines the internal link, external link and Subdirectory link. • <br/>: Defines the single line break. • <div>: Defines the division section in a document. • <form>: Defines the HTML form for use in input documents. • <frame>: Defines the many individual part: • <hr />: Defines the horizontal line. • <p>: Defines the paragraph in web documents. • <table>: Defines the table. • <textarea>: Defines the multiline text. And many more. Designed By: Priyank Gupta

  14. Example <html> <head> <link rel="stylesheet" type="text/css" href="/styles.css"> <title> Example is Body Section Elements </title> </head> <body> <!-- Body Part --> <p> This is Body Section </p> <a href=“a.html">goto a.html</a> </body> </html> Designed By: Priyank Gupta

  15. 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“ • The name is the property you want to set. • The value is what you want the value of the property to be set and always put within quotations. • Core Attributes • The four core attributes that can be used on the majority of HTML elements (although not all) are: • id • title • class • style Designed By: Priyank Gupta

  16. The id Attribute • The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. EXAMPLE <p id="html">This para explains what is HTML</p> <p id="css">This para explains what is Cascading Style Sheet</p> • The title Attribute • The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute: • The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading. • EXAMPLE <!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title="Hello HTML!“>Titled Heading Tag Example</h3> </body> </html> Designed By: Priyank Gupta

  17. The class Attribute • The class attribute is used to associate an element with a style sheet, and specifies the class of element. (learn more with Cascading Style Sheet (CSS)). • The style Attribute • The style attribute allows you to specify Casecading Style Sheet (CSS) rules within the element. • Example <!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style="font-family:arial; color:#FF0000;">Binary Systems</p> </body> • </html> Designed By: Priyank Gupta

  18. Internationalization Attributes • There are three internationalization attributes, which are available for most (although not all) XHTML elements. • dir • lang • xml:lang • The dir Attribute • The dir attribute allows you to indicate to the browser the direction in which the text should flow. The dir attribute can take one of two values. • Ltr: Left to right (the default value) • Rtl: Right to left (for languages such as Hebrew or Arabic that are read right to left) EXAMPLE • <!DOCTYPE html> • <html dir="rtl"> • <head> • <title>Display Directions</title> • </head> • <body> This is “Binary Systems “ right-to-left directed. </body> • </html> Designed By: Priyank Gupta

  19. The lang Attribute • The document language can be declared in the <html> tag. • The language is declared in the lang attribute. • Declaring a language is important for accessibility applications (screen readers) and search engines: • Example <!DOCTYPE html><html lang="en-US"><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> • Note: The first two letters specify the language (en). If there is a dialect, use two more letters (US). • The title Attribute • HTML paragraphs are defined with the <p> tag. • In this example, the <p> element has a title attribute. The value of the attribute is "About W3Schools": Example <p title=“Binary Systems">Join Us for Better Tomorrow</p> • The href Attribute • HTML links are defined with the <a> tag. The link address is specified in the href attribute: Example <a href="http://www.bianrysystems.co.in">Binary Systems</a> Designed By: Priyank Gupta

  20. HTML Basic Tags Designed By: Priyank Gupta

  21. Heading Tags • Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. • Example <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> Designed By: Priyank Gupta

  22. Paragraph Tag • The<p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> Example <body> <p>Here is a first paragraph of text.</p> <p>Here is a second paragraph of text.</p> <p>Here is a third paragraph of text.</p> </body> Designed By: Priyank Gupta

  23. Line Break Tag • Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. • The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML Example <body> <p>Binary Systems<br/> This is HTML Example.<br/> Thanks<br/> Created By: Priyank Gupta</p> </body> Designed By: Priyank Gupta

  24. Horizontal Lines • Horizontal lines are used to visually break up sections of a document. The <hr>tag creates a line from the current position in the document to the right margin and breaks the line accordingly. • Example <!DOCTYPE html> <html> <head> <title>Horizontal Line Example</title> </head> <body> <p>This is paragraph one and should be on top</p> <hr/> <p>This is paragraph two and should be at bottom</p> </body> </html> Note: Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them. Designed By: Priyank Gupta

  25. Non Breaking Spaces(&nbsp;) • Used to give multiple while(blank) spaces • Example <!DOCTYPE html> <html> <head> <title>Non breaking Spaces Example</title> </head> <body> <p>This is HTML.</p> <p>This is &nbsp;&nbsp;&nbsp; HTML.</p> </body> </html> Designed By: Priyank Gupta

  26. Centering Content • You can use <center> tag to put any content in the center of the page or any table cell. • Example <!DOCTYPE html> <html> <head> <title>Centering Content Example</title> </head> <body> <p>This text is not in the center.</p> <center> <p>This text is in the center.</p> </center> </body> </html> Designed By: Priyank Gupta

  27. HTML Comment Tag • Defines the Comments <!-- Your Comment --> tag. • Example <body> <imgsrc=“d:/ab.jpg" width="380" height="70" /> <!--Image File--> </body> Designed By: Priyank Gupta

  28. Nested HTML Elements • It is very much allowed to keep one HTML element inside another HTML element: • Example <!DOCTYPE html> <html> <head> <title>Nested Elements Example</title> </head> <body> <h1>This is <i>italic</i> heading</h1> <p>This is <u>underlined</u> paragraph</p> </body> </html> Designed By: Priyank Gupta

  29. HTML Images Tag • To display Images into web document. • HTML Images are define inside the <img> tag. • HTML <img> tag is insert image into a web document. • The <img> tag is empty tag, that mean's no closing tag. • <img> tag have some attributes are use for display image on web page. • Example <body> <imgsrc=“abc.png" width=“100" height=“100" /> </body> Designed By: Priyank Gupta

  30. HTML Link Tag • Defines the Link in internal or External document. HTML Link are defined inside the <a> tag. • Internal Link • External Link • Mailto Link • Sub-Directory Link Designed By: Priyank Gupta

  31. (A) HTML Links - HTML Internal Link • HTML Internal Link is linked within the same web page. This link can be absolute path or relative path. • HTML internal link name is followed by head sign(#). HTML <a> tag is use for anchor point name, which is referred to a internal link into a same page. • When click on this anchor link, It's referred link automatically scrolls and display on browser. • Example: <a name="Lession.1"> link can be referred as <a href="#Lession.1">Lession.1</a>  Designed By: Priyank Gupta

  32. <html> <head><title>Link Tag</title></head> <body> <a href="#Lession.1">Lession.1</a> <br /><a href="#Lession.2">Lession.2</a> <br /><a href="#Lession.3">Lession.3</a> <br /><a href="#Lession.4">Lession.4</a> <br /> <a name="Lession.1">Introduction of Lession.1</a><p>This is sub topic.1</p><p>This is sub topic.2</p><p>This is sub topic.3</p><p>This is sub topic.4</p> <a name="Lession.2">Introduction of Lession.2</a><p>This is sub topic.1</p><p>This is sub topic.2</p><p>This is sub topic.3</p><p>This is sub topic.4</p> <a name="Lession.3">Introduction of Lession.3</a><p>This is sub topic.1</p><p>This is sub topic.2</p><p>This is sub topic.3</p><p>This is sub topic.4</p> <a name="Lession.4">Introduction of Lession.4</a><p>This is sub topic.1</p><p>This is sub topic.2</p><p>This is sub topic.3</p><p>This is sub topic.4</p> </body></html> Designed By: Priyank Gupta

  33. (B) HTML External Links • HTML Link - External HTML Links is linked to external web page. This link is may be absolute path or relative link path. • <a> tag is used for anchor name which is referred link to another web page. • External link is great future to drive a webpage one to another and useful for surf many webpage in website. • Example <a href=“http://www.binarySystems.co.in">Binary Systems</a> <br /> <br /> <a href=“http://cityeducation.in">City Education</a Designed By: Priyank Gupta

  34. (C) HTML Mailto Link Code • HTML Link also use for create a Mailto link to a send a email to a specific E-mail address. hrefattributes value is set mailto link that followed to a e-mail address. • When click on E-Mail link, it will open E-Mail application. E-Mail link is use to send E-Mail/Review with subject, text message. • Example-Code: <p> <ahref="mailto:guptapriyank87@gmail.com?cc=guptapriyank09@gmail.com&bcc= binarysystems@gmail.com&subject=HTML&body=Hello Students">Click Here </a> for Feedback </p> Designed By: Priyank Gupta

  35. (D) HTML Subdirectory Link • HTML directories are managed in logical hierarchical structure. • How to manage on your directory in website? • Main Levelhttp://www.domain.com/First Level of Sub-Directorieshttp://www.domain.com/subdir1/ Second Level of Sub-Directorieshttp://www.domain.com/subdir1/subdir2/  Designed By: Priyank Gupta

  36. HTML List(a) HTML Ordered List • HTML <ol> tag define ordered list(list of Ordered items). HTML <ol> tag is a Container tag. • <ol> Tag Attributes HTML <ol> tag specified Order list display list of item and its attribute help to change the type of order list. • <li> Tag Attributes <li> tag specified list items and its attribute help to change the type of order list. Designed By: Priyank Gupta

  37. <!DOCTYPE html> <html> <head> <title>Link Tag</title> </head> <body> <ol type="1" value="1"><li>Arabic Number</li><li>Arabic Number</li></ol> <ol type="a" value="1"><li>Lower Alphabet</li><li>Lower Alphabet</li></ol> <ol type="A" value="1"><li>Upper Alphabet</li><li>Upper Alphabet</li></ol> <ol type="i" value="1"><li>Lower Roman numeral</li><li>Lower Roman numeral</li></ol> <ol type="I" value="1"><li>Upper Roman numeral</li><li>Upper Roman numeral</li></ol> </body> </html> Designed By: Priyank Gupta

  38. (B) HTML Unordered List • HTML <ul> tag define Unordered List(list of Unordered items). HTML <ul> tag is a Container tag. • It is use to display list of item with Bulleted style. Designed By: Priyank Gupta

  39. <!DOCTYPE html> <html> <head> <title>Link Tag</title> </head> <body> <ul type="disk" ><li>Disk Bullet</li><li>Disk Bullet</li></ul> <ul type="circle" ><li>Circle Bullet</li><li>Circle Bullet</li></ul> <ul type="square" ><li>Square Bullet</li><li>Square Bullet</li></ul> </body> • </html> Designed By: Priyank Gupta

  40. (C) HTML Definition List • Definition list is use for create glossary list. Definition list are stars with <dl> tag and close with </dl> tag. • <dl> tag have two tag <dt> and <dd> defined inside tag. • <dl> tag is a empty tag. Its use to define definition list. It does not have any attributes. • <dt> tag is a empty tag. Its use to define definition team. It does not have any attributes. • <dd> tag is a empty tag. Its use to define definition define. It does not have any attributes. Designed By: Priyank Gupta

  41. <!DOCTYPE html> <html> <head> <title>Link Tag</title> </head> <body> <dl> <dt>URL <dd>Universal Resource Locator <dt>W3C <dd>World Wide Web Consortium <dt>PNG <dd>Portable Network Graphics </dl> </body> </html> Designed By: Priyank Gupta

  42. HTML Marquee Tag • HTML <marquee> tag use to create a scrolling text or scrolling image from left to right, right to left, top to bottom, bottom to top. There is no limit. It’s user define choice. • <marquee> tag is a Container tag to create scrolling text. • <marquee> tag support following some attributes. This attributes use to add more special effect and easy control. Designed By: Priyank Gupta

  43. <marquee behavior="alternate" direction="left">Side Touch Margin Bounce Text</marquee> • <marquee behavior="scroll" direction="left" scrollamount="3">Slow Speed scroll speed</marquee> • <marquee behavior="alternate" direction="left"><imgsrc="../jix/img_nat.png" width="120" height="80" alt="Natural" /></marquee> • <marquee behavior="scroll" direction="left" scrollamount="15"><imgsrc="../jix/img_nat.png" width="120" height="80" alt="Natural" />Fast Speed scroll speed</a></marquee> • <marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Click Here and hold the mouse marquee stop</marquee> <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Hower over and hold the mouse marquee stop</marquee> • <marquee behavior="scroll" direction="left" id="marquee1"><p>Press Button</p></marquee> <input type="button" value="Stop Marquee" onClick="document.getElementById('marquee1').stop();"> <input type="button" value="Start Marquee" onClick="document.getElementById('marquee1').start();"> <p><a href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee Start/Stop</a></p> • <marquee behavior="scroll" direction="left" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 10, 0);">Click Here and hold the mouse marquee slow</marquee> Designed By: Priyank Gupta

  44. <marquee behavior="scroll" direction="left" id="marquee1"><p>Press Button</p></marquee> <input type="button" value="Stop Marquee" onClick="document.getElementById('marquee1').stop();"> <input type="button" value="Start Marquee" onClick="document.getElementById('marquee1').start();"> <marquee behavior="scroll" direction="left" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 10, 0);">Click Here and hold the mouse marquee slow</marquee> • <marquee behavior="scroll" direction="left" onmouseover="this.setAttribute('scrollamount', 3, 0);" onmouseout="this.setAttribute('scrollamount', 10, 0);">Hower over and hold the mouse marquee slow</marquee> • <marquee behavior="scroll" direction="left" scrollamount="6" id="marquee1">marquee slow/medium/fast speed using button</marquee> <input type="button" value="Slower" onClick="document.getElementById('marquee1').setAttribute('scrollamount', 1, 0);"> <input type="button" value="Medium" onClick="document.getElementById('marquee1').setAttribute('scrollamount', 5, 0);"> <input type="button" value="Faster" onClick="document.getElementById('marquee1').setAttribute('scrollamount', 10, 0);"> <p><a href="http://www.way2tutorial.com/html/html_marquee_tag.php">Marquee Slow/Fast Text</a></p> Designed By: Priyank Gupta

  45. <html> <head><title>Link Tag</title></head> <body> <marquee style="z-index:2;position:absolute;left:22px;top:76px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;"scrollamount="7" direction="down">Way2Tutorial.com</marquee> <marquee style="z-index:2;position:absolute;left:26px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;"scrollamount="1" direction="down">Way2Tutorial.com</marquee> <marquee style="z-index:2;position:absolute;left:3px;top:44px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Way2Tutorial.com</marquee> <marquee style="z-index:2;position:absolute;left:300px;top:108px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:375px;"scrollamount="7" direction="down">Way2Tutorial.com</marquee> </body> </html> Designed By: Priyank Gupta

  46. HTML Color Code Value • Colors are combin on RED, GREEN, and BLUE light. • Hexadecimal Value - #FFFFFF RGB Color Code - R=255 G=255 B=255 Designed By: Priyank Gupta

  47. HTML Special Character Designed By: Priyank Gupta

  48. Designed By: Priyank Gupta

  49. HTML Figure and Figcaption Tag • The HTML <figcaption> tag specifies a caption for an element. <!DOCTYPE html> <html> <head> <title>HTML Figcaption Tag</title> </head> <body> <figure><imgsrc="logo.png"/> <figcaption>Tutorials Point Logo</figcaption> </figure> </body> </html> Designed By: Priyank Gupta

  50. HTML <font> Tag • The HTML <font> tag is used to specify the font of the text. It is deprecated in HTML as well as in XHTML. • Attributes: • color: rgb(x,x,x) or #hexcode or colorname • Face: list of font names • Size: number(1 to 7) <!DOCTYPE html> <html> <head> <title>HTML font Tag</title> </head> <body> <font face="cursive,serif" color="#ff9900" size="4"> Binary Systems </font> </body> </html> Designed By: Priyank Gupta

More Related