Download to read offline
Mastering HTML: The Building Blocks of the Web
- 1. HTML LESSON Let's start withthe basics of HTML and gradually move to more advanced topics. HTML (HyperText Markup Language) is the standard language used to create and design web pages.
- 2. TABLE OF CONTENTS 01 Basic Structure ofa HTML 03 Lists 02 Tags 04 Links,Images, Tables,Forms
- 3. TABLE OF CONTENTS 05 Attributes 07 Multimedia Tags 06 Semantic HTML5Tags 08 Inline vs Block Elements
- 4. TABLE OF CONTENTS 09 MetaTags 11 Linking CSS and JavaScript 10 Comments 12 DOCTYPE Declaration
- 5.
- 6. • HTML standsfor Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • 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 label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. INTRODUCTION
- 7. —Santosh Kalwar “Coding likepoetry should be short and concise.”
- 8. Basic Structure ofan HTML Document 01
- 9. Every HTML documentshould start with a declaration and have a structure like this: <!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is a paragraph.</p> </body> </html> Basic Structure of an HTML Document
- 10.
- 11. Basic Tags •<html>: Rootelement of an HTML page. •<head>: Contains meta-information about the HTML document. •<title>: Specifies the title of the document, shown in the browser's title bar. •<body>: Contains the contents of the HTML document, such as text, images, links, etc. •<h1> to <h6>: Header tags, <h1> is the largest and <h6> is the smallest. •<p>: Paragraph tag. •<br>: Line break. •<hr>: Horizontal rule (line).
- 12. Text Formatting Tags •<b>:Bold text. •<i>: Italic text. •<u>: Underlined text. •<strong>: Important text (usually bold). •<em>: Emphasized text (usually italic). •<mark>: Highlighted text. •<small>: Smaller text. •<del>: Strikethrough text. •<ins>: Inserted text (usually underlined).
- 13.
- 14. Unordered List <ul> <li>Item 1</li> <li>Item2</li> <li>Item 3</li> </ul>
- 15. Ordered List <ol> <li>First item</li> <li>Seconditem</li> <li>Third item</li> </ol>
- 16.
- 17.
- 18.
- 19. Images Image Tag: <img src="image.jpg"alt="Description of image">
- 20. Tables Table Structure: <table> <tr> <th>Header 1</th> <th>Header2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
- 21. Forms Form Elements: <form action="/submit-form"method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> Form Elements: html
- 22.
- 23. Links Common Attributes: •id: Uniqueidentifier. •class: Class name for CSS styling. •style: Inline CSS styles. •title: Tooltip text. •alt: Alternative text for images.
- 24.
- 25. Semantic HTML5 Tags SemanticTags: •<header>: Defines a header for a document or section. •<nav>: Defines navigation links. •<section>: Defines a section in a document. •<article>: Defines an independent, self-contained article. •<aside>: Defines content aside from the main content. •<footer>: Defines a footer for a document or section. •<main>: Specifies the main content of a document. •<figure>: Specifies content that is self-contained, such as images • with captions. •<figcaption>: Provides a caption for a <figure> element.
- 26.
- 27. Audio <audio controls> <source src="audio.mp3"type="audio/mpeg"> Your browser does not support the audio element. </audio>
- 28. Video <video width="320" height="240"controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
- 29. Inline vs BlockElements 08
- 30. Inline Elements •Examples: <span>,<a>, <img>, <em>, <strong>. •Do not start on a new line and only take up as much width as necessary.
- 31. Block Elements •Examples: <div>,<p>, <h1>, <ul>, <table>. •Always start on a new line and take up the full width available.
- 32.
- 33. Block Elements <meta charset="UTF-8"> <metaname="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> •Meta Information:
- 34.
- 35. Comments <!-- This isa comment --> Adding Comments:
- 36. Linking CSS andJavaScript 11
- 37. Linking CSS <link rel="stylesheet"type="text/css" href="styles.css"> CSS:
- 38. Linking Java Script <scriptsrc="script.js"></script> JavaScript:
- 39.
- 40.
- 41.
- 42. Using Character Entities <for < > for > & for & " for " ' for '
- 43.
- 44. Meta Tag forResponsive Design <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 45.
- 46. Alt Text forImages <img src="image.jpg" alt="Description of image">
- 47.
- 48. Inline CSS andJavaScript 16
- 49. Inline CSS <p style="color:blue;">Thisis a blue paragraph.</p>
- 50. Inline JavaScript <button onclick="alert('HelloWorld!')">Click Me</button>
- 51. These topics covermost of the useful tags,attribtes and concepts in HTML. Feel free to ask for more detailed explanation or examples on any specific topic. Email = umarkhan99887766ui@gmail.com Conclusion