gdg_workshop 2 on web development and github
- 1. HTML: Building the Web Learn the foundation of web development Organised by: GDG-SRGI & Coding Club
- 2. Harsh Agarwal Speaker (Web Dev Lead) Er. Aman Saluja Faculty Advisor
- 3. Session 2 • Introduction to web dev • Basics of HTML
- 4. What We’ll Cover Today: • Doubts • 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 in creating web pages • Foundation of the Web • Defines Content Structure • Integrates with Other Technologies • Ease of Learning
- 7. Structure of an HTML 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 an HTML Document
- 9. Types of Tags in 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 <!DOCTYPE html>: 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.
- 33. Assignment
- 34. THANK YOU!!