HTML
- 1. Presented by Yogita solanki Cse 5th sem
- 2. Introduction of html Structure of html Basic html tags Versions of html Doctype declaration Html heading Text formatting Html link Html image Html tables Html input tags Extra markups Css
- 3. Html stands for hypertext markup language. Html is derived from a language SGML(standard generlised markup language). A markup language is a set of markup tags. Html is not case sensitive language. HTML documents are described by HTML tags. Opening tag can carry attributes. Attributes require name and values.
- 4. HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname> The start tag is often called the opening tag. The end tag is often called the closing tag HTML tags normally come in pairs like <p> and </p> 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, but with a slash before the tag name Html code is in blue.
- 5. Write html code in notepad or any text editor. Save the file by (.html)/(.htm) extension. View the page in any web browser. The purpose of web browser is to read html document and display them as web page.
- 6. Container element–container tags contain start tag and end tag i.e <html>……</html>. Empty element-empty tag contain start tag i.e <br>.
- 7. <html> <head> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
- 8. The DOCTYPE declaration defines the document type to be HTML. It help the browser to display web page correctly. The text between <html> and </html> describes an HTML document. The text between <head> and </head> provides information about the document. The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes a paragraph
- 9. Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014
- 10. HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">
- 11. Heading element –there are six heading element. (<H1>,<H2>,<H3>,<H4>,<H5>,<H6> <h1> will print largest heading. <h6> will print smallest heading.
- 12. <!DOCTYPE html> <html> <head><title>HEADING<title></head> <body> <h1>HELLO WORLD</h1> <h2>HELLO WORLD</h2> <h3>HELLO WORLD</h3> <h4>HELLO WORLD</h4> <h5>HELLO WORLD</h5> <h6>HELLO WORLD</h6> <body> <html> View page
- 13. <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscript text <super> Defines superscript text <strike> Defines strike text <ins> Defines inserted text <del> Defines deleted text <tt> Defines teletype text <u> Defines underline text
- 14. <html> <head><title></title></head> <body> <b>this text is bold</b> <br><i><s>this text is italic</s></i> <br><em><int>this text is emphasized<int></em> <br><small><del>this text is small</del></small> <br><strong>this text is strong</strong> <br><sub>this text is subscript</sub> <br><super>this text is superscript</super> <br><tt>this text is teletype</tt> <br><u>this text is underlined</u> <br><strike><q>this text is strike</q></strike> <abbr title=“automatic teller mmachine”>ATM</abbr> </body> </html> view page
- 15. This element is used to format the size , typeface and color of the enclosed text. The size attribute on font tag take values from 1 to 7. The commonly used font in web page is Arial , Arial black ,Impact , courier new , verdana , Arial narrow, Times new roman.
- 16. The attribute bgcolor is use to change the background color of page. <body bgcolor=“green”> Text is used to change the color of enclosed text. <body text=“black”>
- 17. A hyperlink is a reference(an address) to the resourse on the web. hyperlink can point to any resourse on web: html page , image ,video etc. The html anchor element <a> define both hyperlinks and anchors <a href=“url”>link text<a> href attribute defines a link address. mailto:
- 18. To display an image on page we need to use src attribute. Src stands for “source”. The value of the src attribute is the url of image. It is empty tag. <img src=“url”>
- 19. <img> Defines an image <src> Display an image on page src stand for source. <alt> Define ‘alternate text’ for image <width> Defines width of image <height> Defines height of image <border> Defines border of image <hspace> horizontal space of image <vspace> vertical space of image <align> align an image within the text <background> add a background image
- 20. <table> used to create table <tr> table is divided into rows <td> each row is divided into data cells <th> headings on the table <caption> caption to the table <colgroup> defines group of table columns <col> define attriute value for one or more column . <thead> defines a table head <tbody> defines a table body <tfoot> defines a table footer <cellspacing> amount of space between table cells <cellpadding> space around the edges of each cell <colspan> no. of column working with will span <rowspan> no. of row working with will span <border> defines border of table
- 21. <html> <head><title>table without borders </title></head> <body> <table border=“1”> <tr><th>name</th> <th>loan no</th> <th>amount</th></tr> <tr><td>john</td> <td>s-1</td> <td>6000</td></tr> </table> </body> </html> view
- 22. <ul>(unordered list),<ol>(ordered list) tags are used and type attribite is used. Each item in the list placed between <li></li>,li stands for list item. Defination list is created with <dl> tag , inside <dl> tag you will usually see the pair of <dt> and <dd>. <dt> stands for defination term is used to contain the term being defined. <dd> this contain the defination. Lists can be nested inside one another.
- 23. i.e <html> <body> <h1>ordered list</h1> <ol=“A”> <li>apple</li> <li>mango</li></ol> <ul> <li>orange</li> <li>apple</li></ul> <dl> <dt>coffee</dt> <dd>black hot drink</dd></dl> </body> </html> view
- 24. <form> form controls contain form content action ulr for page on server that will receive info method <input> different form controls Type text , password ,radio ,checkbox, submit <textarea> used to take mutiline textinput checked used to select by default value <select>,<option>,<label>,<fieldset>, <legend>
- 25. <span> <div> comments <!....> <iframe> Id attribute
- 26. Css associates style rules with html elements. Css rules contains 2parts selector and declaration eg. P {font-color:yellow;} here p is selector & font-color:yellow is declaration External css use <link href=“”> Internal css use <style>
- 27. universal selector - *{} type selector- h1,h2 {} Id selector- #id{} Adjacent sibling selector- h1+p{} General sibling selector-h1-p{} Child selector-li>a{}
- 28. Html5 tags <video> <audio> <source> <svg> <canvas> <autoplay> <controls>
- 29. THANK YOU