More Related Content
What's hot
Similar to Learn HTML Easier
Similar to Learn HTML Easier (20)
Recently uploaded
Recently uploaded (20)
Learn HTML Easier
- 1. LEARN HTML BASICS EASIER Presented by M.Karthick
- 3. What is HTML? HTML stands for Hyper Text Markup Language. HTML is not a programming language, it is a markup language. A markup language is a collection of markup tags. HTML uses markup tags to describe Web pages. What are Tags? HTML markup tags are usually called HTML tags or just tags. HTML tags are keywords surrounded by angle brackets like <html>. HTML tags normally come in pairs, like <b> and </b>. Start and end tags are also called opening tags and closing tags.
- 4. HTML BASICS
- 5. What You Need? You don’t need an HTML editor. You don’t need a Web server. You don’t need a Web site. It’s simple to get started writing HTML. HTML Editors We can use a plain text editor (like Notepad) to edit HTML. File Extensions We can use either the .htm or the .html extension. But, it is perfectly safe to use .html.
- 7. HTML Headings HTML headings are defined with the <h1> to <h6> tags. The lower the number, the larger the heading size. Example <html> <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> </html> Output
- 8. Output HTML Paragraphs HTML paragraphs are defined with the <p> tag. Example <html> <body> <p>This is paragraph 1</p> <p>This is paragraph 2</p> <p>This is paragraph 3</p> </body> </html> NOTE: Most browsers automatically add an empty line before and after paragraphs.
- 9. Output HTML Links HTML links are defined with the <a> tag. If you click the underlined text it takes you to the link given in the <a> tag. Example <html> <body> <a href="https://www.google.co.in">GOOGLE</a> </body> </html>
- 10. HTML Images HTML images are defined with the <img> tag. The <img> tag tells the browser where to find the image file and what size to display it. Example <html> <body> <img src="C:/Users/Administrator/Desktop/Q.jpg" width="100" height="100"/> </img> </body> </html> Output
- 11. HTML ELEMENTS
- 12. HTML Elements An HTML element is everything between the opening tag and the ending tag. HTML Element Syntax An HTML element starts with a opening tag. An HTML element ends with a closing tag. The <p> element is among the most common of elements. The <body> element defines the body of the HTML document. The <html> element defines the entire HTML document. OPENING TAG ELEMENT CONTENT CLOSING TAG <p> This is Paragraph </p> <h1> This is Heading </h1>
- 13. Empty HTML Elements HTML elements without content are called empty elements. <br> is an empty element without a closing tag. It defines a line break. Adding a slash to the end of start tag, like <br/>, is the proper way of closing empty elements. Use Lowercase Tags HTML tags are not case sensitive. <P> means the same as <p>. But it’s recommended to use lowercase tags.
- 14. HTML Rules (Lines) The <hr/> tag is used to create a horizontal rule (line). The lines are often used to separate sections of a document. Example <html> <body> <p>This is paragraph 1</p> <hr /> <p>This is paragraph 2</p> <hr /> <p>This is paragraph 3</p> </body> </html> Output
- 15. Output HTML Comments Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Example <html> <body> <p>This is paragraph 1</p> <!-- Heading 1 --> <p>This is paragraph 2</p> <!-- Heading 2 --> <p>This is paragraph 3</p> <!-- Heading 3 --> </body> </html> NOTE: There is an exclamation point after the opening bracket, but not before the closing bracket.
- 16. Output HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph. The <br /> element is an empty HTML element. It has no end tag Example <html> <body> <p>This is <br /> a paragraph 1</p> </body> </html>
- 18. Text Formatting Tags HTML uses tags like <b> and <i> to modify the appearance of text, like bold or italic. These HTML tags are called formatting tags. TAG DESCRIPTION <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text
- 19. Text Formatting Tags (Examples) <!DOCTYPE html> <html> <head> <title>HTML TEXT FORMATTING TAGS</title> </head> <body> <b>Defines bold text</b> <br /> <big>Defines big text</big> <br /> <em>Defines emphasized text</em> <br /> <i>Defines italic text</i> <br /> <small>Defines small text</small> <br /> <strong>Defines strong text</strong> <br /> <sub>Defines subscripted text</sub> <br /> <sup>Defines superscripted text</sup> <br /> <ins>Defines inserted text</ins> <br /> <del>Defines deleted text</del> <br /> </body> </html> (Outputs)
- 20. HTML LISTS
- 21. TAG LISTS <ul> Unordered List <ol> Ordered List <dl> Definition List Nested List Types of HTML Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. A definition list starts with a <dl> tag (definition list). Each term starts with a <dt> tag (definition term). Each description starts with a <dd> tag (definition description).
- 22. Unordered List (Examples) <!DOCTYPE html> <title>HTML UNORDERED LIST</title> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> </body> </html> (Outputs)
- 23. Ordered List (Examples 1) <!DOCTYPE html> <title>HTML UNORDERED LIST</title> <body> <html> <title>HTML ORDERED LIST</title> <body> <h4>An Ordered List:</h4> <ol> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol> </body> </html></body> </html> (Outputs)
- 24. Ordered List (Examples 2) <html> <body> <h4>Letters list:</h4> <ol type="A"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol> </body> </html> (Outputs)
- 25. Ordered List (Examples 3) <html> <body> <h4>Roman numbers list:</h4> <ol type="I"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol> </body> </html> (Outputs)
- 26. Definition List (Examples) <html> <body> <html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html> </body> </html> (Outputs)
- 27. THANK YOU