Download to read offline
Week 7 Introduction to HTML PowerPoint Notes.pptx
- 1. Introduction to HTML (PowerPointNotes) Basics of Web Development Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
- 2. What is HTML? HyperTextMarkup Language The foundational language for crafting web pages Standard Document Type Acts as the standard for web document creation Content Structure Provides structure and content for everything you see on the internet How HTML Works <html>This is the root element</html> HTML uses tags in angle brackets to structure content Tags define and structure content on the web 1/8 Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
- 3. Understanding HTML Tags Whatare Tags? Keywords enclosed in angle brackets that define elements Tag Pairs Tags come in pairs: opening and closing Tag Errors Unclosed tags can cause formatting errors Tag Examples <html> HTML document content </html> <head> Page metadata </head> <body> Visible content </body> Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 2/8
- 4. Basic HTML DocumentStructure Every HTML page follows a fundamental structure defined by core tags: <html> Declares webpage is HTML, root element <head> Contains metadata, stylesheets, scripts <body> Encloses visible content in browser window HTML Document Structure <html> ← Root element <head> ← Metadata section </head> <body> ← Content section <h1>Heading</h1> <p>Paragraph</p> </body> </html> Proper nesting of tags is essential for valid HTML Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 3/8
- 5. The Head Sectionand Page Title <head> Section • Contains metadata about the HTML document • Metadata includes title, stylesheets, and scripts • Content is not directly displayed on the web page Head Section Example <html> <head> <title>Page Title</title> <link> to stylesheets <script> for interactivity </head> <body>Visible content</body> </html> The <title> Tag • Defines the title of the web page • Displayed in the browser's title bar or tab • Not displayed on the actual web page content • Serves as an identifier for browsers and search engines Title Tag Example <title>This appears in the browser tab</title> The title is important for SEO and browser functionality Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 4/8
- 6. Text Formatting Basics HeadingTags HTML provides heading tags from h1 to h6 h1 - Most Important Heading h2 - Second Level h6 - Least Important Heading Paragraph Tags The p tag defines paragraphs <p>This is a paragraph.</p> Line Breaks The br tag forces a line break <p>First line. <br>Second line.</p> Why It Matters Organizes content with clear hierarchy Improves readability and structure Helps search engines understand content Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 5/8
- 7. Common HTML Elements Lists Organizeinformation in a clear, digestible format <ul> <li>Unordered list item</li> <li>Unordered list item</li> </ul> Horizontal Rules Visually separate content with horizontal lines <hr> Images Embed visual content with the img tag <img src="image.jpg" alt="Description"> Hyperlinks Create connections between web pages and resources <a href="https://example.com">Link Text</a> Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 6/8
- 8. Building Complete WebPages Piece Together Elements Combine structural tags, text formatting, and other elements to create functional websites Build Complete Documents Create well-structured web pages using HTML fundamentals Essential Foundation This knowledge serves as an essential starting point for anyone venturing into web design Complete HTML Example <html> <head> <title>My Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> <ul> <li>First item</li> <li>Second item</li> </ul> </body> </html> All elements work together to create a functional website Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 7/8
- 9. References Beginner's Guide toWeb Design - Kristen S https://mason.gmu.edu/~kshiffl4/375/module5-2.html HTML Styles - W3Schools https://www.w3schools.com/html/html_css.asp HTML JavaScript - W3Schools https://www.w3schools.com/html/html_scripts.asp Some facts about HTML which everyone knows - Ashish Aryan 's Blog https://ashisharyan5680.hashnode.dev/some-facts-about-html-which-everyone-knows Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 8/8