Download to read offline
gdg_workshop 3 on web development HTML & CSS
- 1. HTML: Building theWeb Learn the foundation of web development Organised by: GDG-SRGI & Coding Club
- 2. Harsh Agarwal Speaker (Web DevLead) Er. Aman Saluja Faculty Advisor
- 3. Session 2 • Introductionto web dev • Basics of HTML
- 4. What We’ll CoverToday: • Doubts and Practicle of code. • Basic to HTML
- 5. What is HTML? •HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages. • HyperText refers to the system of linking documents and resources. • Markup Language refers to the tags used to define the structure and elements of a webpage (e.g., headings, paragraphs, images). • HTML acts as the backbone of any website, providing its basic structure, which is styled and made interactive using CSS and JavaScript. Introduction to HTML
- 6. HTML's role increating web pages • Foundation of the Web • Defines Content Structure • Integrates with Other Technologies • Ease of Learning
- 7. Structure of anHTML Document • The structure of HTML refers to the organized layout of an HTML document, consisting of essential elements like <!DOCTYPE html>, <html>, <head> (for metadata), and <body>. • This structure defines how content is organized and displayed on a webpage.
- 8. Structure of anHTML Document
- 9. Types of Tagsin HTML 1. Opening Tag: Indicates the start of an HTML element. Example <p>. 2. Closing Tag: Indicates the end of an HTML element. 3. Self-Closing Tags: Some tags do not require a closing tag because they do not enclose content.
- 10. Tags in HTML <!DOCTYPEhtml>: Declares the document type and version of HTML (HTML5) to the browser for proper rendering. <html>: Represents the root element of an HTML document that contains all other elements. <meta> (Metadata): Defines metadata for the document (inside <head>), often used for SEO and character encoding. <head>: Contains meta-information about the document, such as title, character encoding, and linked resources like CSS. <body>: Represents the content of the document, including text, images, and other elements that are visible to the user.
- 11. Tags in HTML <h1>to <h6> (Headings): Used for creating headings of different levels. <h1> is the most important heading, and <h6> is the least important.
- 12. Tags in HTML <p>(Paragraph): The <p> tag is used to group text into paragraphs.
- 13. Tags in HTML <div>(Division): A container used to group content for styling or structure.
- 14. Tags in HTML <br>:Inserts a line break, forcing content to the next line.
- 15. Tags in HTML <hr>:Creates a horizontal rule (line) to separate content.
- 16. Tags in HTML <b>(Bold): Makes text bold.
- 17. Tags in HTML <i>(Italics):Makes text italic.
- 18. Tags in HTML <img>(Image): Embeds an image in the webpage.
- 19. Tags in HTML <a>(Anchor Link): Used to create hyperlinks (links to other webpages, locations on the same page, or external resources).
- 20. Tags in HTML Lists:There are two types tags in list: 1. <ul> (Unordered List): Creates an unordered (bulleted) list.
- 21. Tags in HTML 2.<ol> (Ordered List): Creates an ordered (numbered) list. within text, moving content to the next line.
- 22. Tags in HTML <table>(Table): Defines a table for displaying tabular data. A table is made up of: • <table> • <tr> (table row) • <th> (table header) • <td> (table data)
- 23. Tags in HTML 1.<tr> (Table Row): Defines a row in a table, containing one or more <td> or <th> elements. 2. <th> (Table Header): Represents a header cell in a table, typically bold and centered, used for column or row titles. 3. <td> (Table Data): Represents a standard data cell in a table, where actual content is placed within rows.
- 24. Tags in HTML <table>(Table):
- 25. Tags in HTML 2.<audio> (Audio): Embeds an audio file in the webpage.
- 26. Tags in HTML 2.<video> (Video): Embeds a video on the webpage.
- 27. Tags in HTML <iframe>: It is used to embed another HTML document within the current document.
- 28. Tags in HTML <form>:It is used to create a section for collecting user input and sending it to a server for processing. <input>: Input tag is a versatile HTML element used to create various types of form controls, allowing users to enter data.
- 29. Comments in HTML •Comments in HTML are used to add notes or explanations within the code that are not displayed on the webpage. • They help developers understand or document the code but are ignored by the browser. • Comments are written between <!-- and -->.
- 30. Attributes in HTML •HTML attributes provide additional information about HTML elements, controlling their behavior, appearance, or functionality. • They are always specified in the opening tag and are written as name- value pairs.
- 31. Attributes in HTML •id: Specifies a unique identifier for an element • class: Assigns one or more class names to an element, typically for CSS styling. • placeholder: Displays a short hint inside form input fields. • value: Specifies the value of a form element. • href: Defines the URL of a linked resource. • src: Specifies the source URL for media elements like images, videos, or audio. • alt: Provides alternative text for images, used if the image can't be displayed.
- 32.
- 33.
- 34.
- 35.