Html tutorials by www.dmdiploma.com
- 2. HTML ● HTML is the standard markup language for Web pages. ● With HTML you can create your own Website. ● HTML is easy to learn - You will enjoy it! Let’s get started ......
- 3. What is HTML HTML is the standard markup language for creating Web pages. ● HTML stands for Hyper Text Markup Language ● HTML describes the structure of a Web page ● HTML consists of a series of elements ● HTML elements tell the browser how to display the content ● HTML elements are represented by tags ● HTML tags label pieces of content such as "heading", "paragraph", "table", and so on ● Browsers do not display the HTML tags, but use them to render the content of the page.
- 4. HTML Tags ● The <!DOCTYPE html> declaration defines this document to be HTML5 ● The <html> element is the root element of an HTML page ● The <head> element contains meta information about the document ● The <title> element specifies a title for the document ● The <body> element contains the visible page content ● The <h1> element defines a large heading ● The <p> element defines a paragraph
- 5. Example <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>First Heading of DM Diploma</h1> <p>First paragraph of DM Diploma</p> </body> </html>
- 6. OUTPUT
- 7. HTML Headings <h1>This is DM Diploma heading 1</h1> <h2>This is DM Diploma heading 2</h2> <h3>This is DM Diploma heading 3</h3> <h4>This is DM Diploma heading 4</h4> <h5>This is DM Diploma heading 5</h5> <h6>This is DM Diploma heading 6</h6>
- 8. OUTPUT
- 9. HTML Links HTML links are defined with the <a> tag: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is DM Diploma</h1> <a href="https://www.dmdiploma.com/">This is DM Diploma Website link</a> </body> </html>
- 10. OUTPUT
- 11. HTML Image ● HTML images are defined with the <img> tag. ● The source file (src), alternative text (alt), width, and height are provided as attributes: <img src="dmdiploma.png" alt="DMDiploma.com">
- 12. OUTPUT
- 13. HTML Styles Setting the style of an HTML element, can be done with the style attribute. The property is a CSS property. The value is a CSS value. <tagname style="property:value;"> Background Color: <body style="background-color:blue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
- 14. OUTPUT
- 15. Text and Fonts Text Color: <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> Fonts: <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> Text Size: <p style="font-size:160%;">This is a paragraph.</p>
- 16. OUTPUT
- 17. Text Formatting HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text
- 18. Example of Text Formatting <body> <b>This text is bold</b> <strong>This text is strong</strong> <i>This text is italic</i> <em>This text is emphasized</em> <h2>DM Diploma <small>Small</small> Formatting</h2> <h2>DM Diploma <mark>Marked</mark> Formatting</h2> <p>My favorite website is <del>Udemy</del>DM Diploma</p> <p>This is <sub>dm diploma</sub> text.</p> <p>This is <sup>superscripted</sup> text.</p> </body>
- 19. Output
- 20. HTML Comments <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here -->
- 21. Style HTML with CSS Styling HTML with CSS CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file
- 22. Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. This example sets the text color of the <h1> element to blue: <h1 style="color:blue;">This is a Blue Heading</h1>
- 23. HTML Table An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </table>
- 24. OUTPUT
- 25. HTML List Unordered HTML List: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
- 26. Example – Disc <ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Example – Circle <ul style="list-style-type:circle;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul
- 27. Order List An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
- 28. OUTPUT
- 29. HTML Head The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>
- 30. HTML Forms The HTML <form> element defines a form that is used to collect user input: An HTML form contains form elements. Form elements are different types of input elements, like: text fields, checkboxes, radio buttons, submit buttons, and more. <form> Form elements....... </form>
- 31. Form Elements <input> Element The <input> element is the most important form element. The <input> element is displayed in several ways, depending on the type attribute. <input type=”text”> = It Define a Single text input. <input type=”submit”> = It Define a Submitting button for submitting the form. Example: <form> <input type=”text” name=”fname”> <input type=”text” name=”lname”> </form>
- 32. OUTPUT
- 33. The Submit Button <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
- 34. OUTPUT
- 35. HTML Input Types You can use these input types for different purposes like : <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search">