HTML and CSS Grade 8 booklet.pdf

DBE Coding and Robotics Summary: HTML 2 I ntroduction to HTML Welcome to your HTML adventure! In this module, you'll dive into the world of HTML (HyperText Markup Language), the fundamental building block of web pages. What is HTML? HTML is a markup language used to create and design web...

DBE Coding and Robotics Summary: HTML 2 I ntroduction to HTML Welcome to your HTML adventure! In this module, you'll dive into the world of HTML (HyperText Markup Language), the fundamental building block of web pages. What is HTML? HTML is a markup language used to create and design web pages. It’s like the skeleton of a webpage, giving it structure and meaning. Think of HTML as the language that tells your web browser how to display content, from simple text to complex images and interactive features. Why Learn HTML? Understanding HTML is crucial for anyone interested in web development. With HTML, you can: Create your own web pages. Structure content effectively. Ensure that your website is accessible and well-organized. How Does HTML Work? When you visit a webpage, your browser receives HTML code and converts it into the visual layout you see. This code is written using plain text and includes special tags that define different parts of the page. Example: If you've ever right-clicked on a webpage and selected "View Page Source," you’ve seen HTML code in action. This code is what browsers interpret to display the web page. 3 Tools You’ll Use To start writing HTML, you need a text editor. Unlike word processors like MS Word, which add extra formatting codes, text editors are designed to handle plain text. We’ll be using Notepad++ in our lessons, but other text editors like Visual Studio Code, Atom, or Sublime Text are also great choices. Fun Fact! Did you know that HTML has been around since 1991? It’s been the backbone of the web for over three decades! I nteractive Activity: Text Editors Comparison Instructions: 1. Read the Descriptions: Review the descriptions of various text editors. 2. Match the Editors: - Setup: Copy the given HTML code into a file named index.html and open it in a web browser. - Drag-and-Drop: Learners drag text editor names into the boxes below the descriptions. - Check Results: Ensure that each description is correctly matched with its text editor. Descriptions Text Editor Description 1. Notepad++ 1. A powerful, open-source text editor with a strong community. It supports many programming languages and has a wide range of extensions. 2. Visual Studio Code 2. A lightweight and fast text editor that is part of the standard Windows installation. It lacks advanced features but is simple to use for basic HTML coding. 3. Atom 3. A versatile text editor known for its speed and ease of use. It provides a distraction-free writing experience and includes a lot of customization options. 4. Sublime Text 4. An advanced text editor with a focus on code development. It includes features like debugging, code navigation, and Git integration. 4 Code to copy Text Editors Comparison body { font-family: Arial, sans-serif; margin: 20px; display: flex; flex-direction: column; align-items: center; background-color: #f0f8ff; }.container { display: flex; justify-content: space-between; width: 80%; margin-bottom: 20px; }.box { width: 45%; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; min-height: 300px; position: relative; }.box h3 { margin-top: 0; }.description { cursor: pointer; padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; background-color: #fafafa; }.description.dragging { opacity: 0.5; }.dropzone { border: 2px dashed #ddd; height: 40px; line-height: 40px; text-align: center; color: #666; margin-bottom: 10px; border-radius: 5px; }.text-editor { cursor: pointer; padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; 5  border-radius: 5px; background-color: #fafafa; } #check-button { padding: 10px 20px; border: none; border-radius: 5px; background-color: #28a745; color: white; font-size: 16px; cursor: pointer; margin-top: 20px; } #check-button:hover { background-color: #218838; } #result { margin-top: 10px; font-size: 16px; } Match the Text Editors to Their Descriptions Descriptions A powerful, open-source text editor with a strong community. It supports many programming languages and has a wide range of extensions. Drop editor here A lightweight and fast text editor that is part of the standard Windows installation. It lacks advanced features but is simple to use for basic HTML coding. Drop editor here A versatile text editor known for its speed and ease of use. It provides a distraction-free writing experience and includes a lot of customization options. Drop editor here An advanced text editor with a focus on code development. It includes features like debugging, code navigation, and Git integration. Drop editor here Text Editors Notepad++ Visual Studio Code Atom Sublime Text 6  Check Answers const descriptions = document.querySelectorAll('#descriptions.description'); const textEditors = document.querySelectorAll('#editors.text- editor'); const dropzones = document.querySelectorAll('#descriptions.dropzone'); textEditors.forEach(editor => { editor.addEventListener('dragstart', () => { editor.classList.add('dragging'); }); editor.addEventListener('dragend', () => { editor.classList.remove('dragging'); }); }); dropzones.forEach(dropzone => { dropzone.addEventListener('dragover', (e) => { e.preventDefault(); }); dropzone.addEventListener('drop', (e) => { e.preventDefault(); const draggedEditor = document.querySelector('.dragging'); if (draggedEditor) { dropzone.textContent = draggedEditor.textContent; draggedEditor.remove(); } }); }); document.getElementById('check-button').addEventListener('click', () => { let correct = 0; const correctAnswers = { 'drop1': 'Notepad++', 'drop2': 'Notepad', 'drop3': 'Atom', 'drop4': 'Sublime Text' }; dropzones.forEach(dropzone => { if (dropzone.textContent.trim() === correctAnswers[dropzone.id]) { correct++; } }); const total = dropzones.length; const resultText = `You got ${correct} out of ${total} correct!`; document.getElementById('result').textContent = resultText; }); You do not have to study the above code for the upcoming exam. 7 S ummary of HTML Tags… (thus far) 1. Purpose: Declares the document type and HTML version. It tells the web browser that the document is written in HTML5. Usage: Should be the very first line in an HTML document. 2. / Purpose: The root element that contains all other HTML elements. The opening tag starts the HTML document, and the closing tag ends it. Usage: Encloses the entire HTML content. 3. / Purpose: Contains meta-information about the document, such as the title, character set, and links to CSS files or scripts. Usage: Placed inside the element, before the element. 4. / Purpose: Sets the title of the web page, which appears in the browser’s title bar or tab. Usage: Must be placed inside the element. 5. / Purpose: Contains the visible content of the web page, such as text, images, links, and other elements. Usage: Encloses the main content of the web page, placed inside the element after the. 6. / Purpose: Defines a top-level heading. is the highest level, with , , etc., being progressively smaller. Usage: Used to create headings on the web page, with being the most important. 8 7. / Purpose: Defines a paragraph of text. Automatically adds space before and after the paragraph. Usage: Used to group text into paragraphs for better readability. Example HTML Code Using These Tags My First Web Page Welcome to My Web Page This is a paragraph of text on my first web page. A ctivities Complete the crossword puzzle. 9 10 Find the word 11 P age Formatting – More Tags 1. Basic Tags Headings: to represent headings of different sizes, with being the largest. Example: Largest Heading Smaller Heading Paragraph: is used for creating paragraphs. Example: This is a paragraph of text. Line Break: is a self-closing tag that adds a line break. Example: This is the first line.This is the second line. Horizontal Line: adds a horizontal line across the page. Example: Bold Text: makes text bold, but an alternative is , which is more modern. Example: This text is bold. This is also bold text. Italic Text: makes text italic. Example: This text is italicized. Underline: underlines text. Example: This text is underlined. Comments: is used for adding notes that won’t be visible on the webpage. Example: 12 2. Attributes Font Tag: An older, deprecated tag for styling text. Example: This text is size 6. This text is red. Style Attribute: A modern way to apply inline styles. Example: This paragraph is red. 3. Colors Color can be defined by: o Names: like "red" or "blue". Example: This text is blue. o RGB: color: rgb(255, 0, 0); (where each value ranges from 0 to 255). Example: This text is red. o Hex: color: #ff0000;. Example: This text is red using a hex value. Combine styles using a semi-colon: Example: This text is red, has a yellow background, and is size 16px. 4. Span Tag 1. is used for styling specific parts of text within a paragraph. Example: This is a red word in the paragraph. 5. Self-Closing Tags Some tags like and do not need a closing tag and are self- contained. Example: First line.Second line.This is after a horizontal line. 13 I nteractive Activity: HTML Tags Instructions: 1. Review the descriptions of HTML Tags. 2. Match the Tags: - Setup: Copy the given HTML code into a file named tags.html and open it in a web browser. - Complete the questions: Learners click on the correct answer. HTML Tag Riddles body { font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px; } h1 { color: #4CAF50; }.riddle { margin-bottom: 20px; padding: 10px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }.options { margin-top: 10px; } select { padding: 5px; font-size: 16px; }.submit,.reset { margin-top: 20px; padding: 10px 20px; background-color: #4CAF50; color: #fff; 14  border: none; border-radius: 5px; cursor: pointer; }.submit:hover,.reset:hover { background-color: #45a049; }.result { margin-top: 10px; font-weight: bold; } HTML Tag Riddles I’m the biggest and boldest of my kind, When you need a title, I come to mind. You see me first, I set the stage, To mark the start of a brand-new page. What am I? Select the correct tag: --Choose an answer-- <h1> <p> <br> I hold the words, the lines, the prose, In your content, I’m where the story flows. I don’t shout, I just explain, In simple blocks, I keep it plain. What am I? Select the correct tag: --Choose an answer-- <p> <b> <i> 15  I’m small and quiet, but make a space, You’ll find me when lines need a break. I step in when your words don’t fit, And need a pause, but not a split. What am I? Select the correct tag: --Choose an answer-- <br> <hr> <ul> My lines divide, a clear straight line, Across your page, I help define. A boundary, a break, between your thoughts, But not the end, just some pause brought. What am I? Select the correct tag: --Choose an answer-- <hr> <h2> <ol> I gather items, one by one, In bullets or numbers, I make them run. I organize what’s here to see, In a tidy list, all thanks to me. What am I? 16  Select the correct tag: --Choose an answer-- <ul> <a> <img> I bring you pictures, big or small, Wherever you need, I answer the call. I don’t say words, but I show a view, Of anything you want, the choice is up to you. What am I? Select the correct tag: --Choose an answer-- <img> <em> <strong> I take you places, with just a click, On different pages, I do the trick. Blue or underlined, I link the way, To new websites or pages you might sway. What am I? Select the correct tag: --Choose an answer-- <a> <nav> <div> 17  Submit Answers Reset Quiz function checkAnswers() { // Get selected values const riddle1 = document.getElementById('riddle1').value; const riddle2 = document.getElementById('riddle2').value; const riddle3 = document.getElementById('riddle3').value; const riddle4 = document.getElementById('riddle4').value; const riddle5 = document.getElementById('riddle5').value; const riddle6 = document.getElementById('riddle6').value; const riddle7 = document.getElementById('riddle7').value; // Correct answers const correctAnswers = { riddle1: "", riddle2: "", riddle3: "", riddle4: "", riddle5: "", riddle6: "", riddle7: "" }; // Check answers and calculate score let score = 0; if (riddle1 === correctAnswers.riddle1) score++; if (riddle2 === correctAnswers.riddle2) score++; if (riddle3 === correctAnswers.riddle3) score++; if (riddle4 === correctAnswers.riddle4) score++; if (riddle5 === correctAnswers.riddle5) score++; if (riddle6 === correctAnswers.riddle6) score++; if (riddle7 === correctAnswers.riddle7) score++; let message = `You got ${score} out of 7 correct!`; if (score === 7) { 18  message += " Amazing job!"; } else if (score >= 4) { message += " Keep going, you're doing great!"; } else { message += " Don't worry, try again!"; } document.getElementById('results').textContent = message; } // Function to reset the quiz function resetQuiz() { document.getElementById('riddle1').value = ""; document.getElementById('riddle2').value = ""; document.getElementById('riddle3').value = ""; document.getElementById('riddle4').value = ""; document.getElementById('riddle5').value = ""; document.getElementById('riddle6').value = ""; document.getElementById('riddle7').value = ""; document.getElementById('results').textContent = ""; } You do not have to study the above code for the upcoming exam. I mages in HTML Adding Images to HTML To display an image, use the tag. Example: Key Attributes src (source): Specifies the path to your image file. Ensure the file name matches exactly (case-sensitive). alt (alternative): Provides a description for screen readers and displays if the image cannot load. 19 Adjusting Image Size You can control the size of your image with the width and height attributes. Example: Why Use Width and Height? Adding width and height attributes helps your browser allocate space for the image while it loads, resulting in a smoother browsing experience. Adding Borders You can also add a border to your image. Example: Centering Images If you want your image to appear in the center of the page, wrap it in a tag (or tag) Example: T Ypes of Lists Unordered Lists (UL) An unordered list is created using the tag. Each item in the list is defined with the tag. Unordered lists do not have numbers; instead, they can have bullet points or symbols. You can change the bullet style using the type attribute. For example: o type="circle" produces hollow circles. o type="square" produces squares. 20 Ordered Lists (OL) An ordered list is created using the tag. Like unordered lists, each item is defined with the tag. Ordered lists are numbered automatically (1, 2, 3, etc.). You can change the numbering style using the type attribute. Options include: o type="A" for uppercase letters (A, B, C). o type="a" for lowercase letters (a, b, c). o type="I" for uppercase Roman numerals (I, II, III). o type="i" for lowercase Roman numerals (i, ii, iii). Additional Features Both types of lists can include as many list items as needed. You can make list items clickable by wrapping them in an anchor () tag, allowing you to create a functional menu system. A ctivity Multiple Choice Questions 1. What is the purpose of the src attribute in the tag? A) To provide a description of the image B) To specify the path to the image file C) To set the size of the image D) To add a border to the image 2. Which of the following attributes is optional when using the tag? A) src B) alt C) width D) height 3. What happens if you don’t include width and height attributes for an image? A) The image will not display B) The browser may take longer to load the page C) The image will automatically adjust its size D) The image will be centered on the page True/False Questions 4. True or False: The alt attribute is used to improve accessibility for visually impaired users. 21 5. True or False: You can only use the tag to center an image; the tag cannot be used for this purpose. Short Answer Questions 6. Explain why it is important to match the file name exactly in the src attribute. 7. What is the effect of adding a border to an image using the border attribute? Fill-in-the-Blank Questions 8. The tag is a __________ tag, meaning it does not require a closing tag. 9. To center an image on the page, you can wrap it in a tag and set the __________ property to "center." H TML Glossary 1. html: The root element that contains all other HTML elements in a web document. 2. heading: A tag that defines a top-level heading, indicating the most important title on a web page. 3. paragraph: A tag used for creating paragraphs of text, improving readability on web pages. 4. src: An attribute in the img tag that specifies the path to an image file, essential for displaying images. 5. browser: Software that allows users to access and view web pages on the internet. 6. hr: A tag used to add a horizontal line across a web page, often used to separate content visually. 7. doctype: An opening tag that declares the document type and HTML version being used in an HTML document. 8. span: A tag used for styling specific parts of text within a paragraph without creating a new block-level element. 22 A 1. ctivities Create a Personal Webpage Scenario: Imagine you have been tasked with creating a personal webpage to introduce yourself to the world. This webpage will showcase your interests, hobbies, and some personal achievements. Questions to Guide Your Creation: 1. What is the purpose of your webpage? Write a brief statement explaining why you are creating this webpage. 2. What main heading (h1) will you use to introduce yourself? Think of a catchy title that represents you. 3. What paragraphs (p) will you include? Describe yourself in one paragraph. What hobbies do you have? What are your interests? 4. What image will you choose to represent you? Include an image (make sure to note the file name and path). Why did you choose this image? 5. What additional sections (h2) do you want to add? Consider sections like "About Me," "My Hobbies," or "Achievements." What headings will you use? 6. How will you make certain text stand out? Identify parts of your paragraphs that you can emphasize using or other styling methods. 7. What comments will you add in your HTML code? Think about useful notes that could help you or others understand your code. 8. What horizontal lines (hr) will you use to separate content? Decide where you might want to add visual breaks in your content. Now create your website. 23 2. Build a Community Event Webpage Scenario: Your local community center is hosting a fun fair, and they need your help to create a simple webpage to promote the event. This webpage will provide details about the event, including the date, time, location, activities, and how to register. Questions to Guide Your Creation: 1. What is the name of the event? Choose a catchy title for the fair to grab attention. 2. What date and time will the event take place? Include the specifics so visitors know when to attend. 3. Where is the event being held? Provide the location details, including any relevant landmarks. 4. What activities will be available at the fair? List the main attractions (e.g., games, food stalls, live performances). 5. How can people register for the event? Include information on how to sign up or contact for more details. 6. What images will you use to make the webpage visually appealing? Decide on images related to the event (e.g., pictures of past fairs, activities). 7. What additional sections do you want to include? Think about adding sections like "Contact Us" or "FAQ." 8. What comments will you add in your HTML code? Add notes to help others understand your code or to remind yourself of future edits. 3. Design a Travel Blog Homepage Scenario: You are an aspiring travel blogger, and you want to create a homepage for your travel blog. This homepage will introduce visitors to your adventures, showcase your favorite destinations, and provide links to your travel stories. Questions to Guide Your Creation: 1. What is the name of your travel blog? Create a unique and catchy title for your blog. 2. What is your tagline or motto? Write a short phrase that captures the essence of your travels. 3. What are some of your favorite travel destinations? List a few places you've visited or would like to visit. 24 4. What images will you include to make your blog visually appealing? Choose images from your travels that represent the destinations. 5. What sections do you want to include on your homepage? Consider sections like "Latest Posts," "Travel Tips," or "About Me." 6. How can visitors subscribe to your blog? Provide a way for visitors to sign up for updates (e.g., an email signup form). 7. What links will you include to direct visitors to your travel stories? Think about including links to specific blog posts or categories. 8. What comments will you add in your HTML code? Include notes to help others understand your code or to remember future edits. 25 P 1. ossible Answers Create a Personal Webpage Welcome to My Personal Webpage Welcome to My World! Hi! My name is Alex, and I am a passionate coder and a lover of nature. About Me I enjoy spending my free time exploring the outdoors, coding new projects, and learning about technology. My Hobbies Some of my hobbies include: Hiking - I love discovering new trails. Programming - I enjoy creating websites and apps. Photography - Capturing beautiful moments is a passion of mine. Achievements I recently completed a coding bootcamp and built my first website! 26 Code Explanation: : Declares the document type. , , : Basic structure of the HTML document. : Main heading introducing the webpage. : Paragraphs describing the person and their interests. : Displays an image with a specified path and alternate text. : Creates horizontal lines to separate sections. : Subheadings for different sections of content. and : Creates an unordered list of hobbies. Comments: Notes within the code that won’t appear on the webpage. 2. Build a Community Event Webpage Community Fun Fair 2024 Welcome to the Community Fun Fair! Join us for a day of fun, food, and festivities! Date and Time The event will take place on Saturday, March 15, 2024, from 10 AM to 5 PM. Location Come visit us at the Community Center Park, 123 Main Street, Yourtown. Activities We have a variety of exciting activities planned: Games and Prizes Food Trucks Live Music Performances Arts and Crafts Booths Petting Zoo Registration To register for the event, please contact us at [email protected] om. Gallery 27  Contact Us If you have any questions, feel free to reach out! Phone: (123) 456-7890 Code Explanation: : Declares the document type. , , : Basic structure of the HTML document. : Main heading for the webpage. : Paragraphs providing details about the event. : Subheadings for sections like date, location, activities, etc. and : Unordered list of activities at the fair. : Hyperlink for email registration. : Displays an image related to the event. : Creates a horizontal line to separate sections. Comments: Notes for clarification and reminders. 3. Design a Travel Blog Homepage Wanderlust Adventures Welcome to Wanderlust Adventures! Your guide to exploring the world, one destination at a time. Favorite Destinations Paris, France Bali, Indonesia New York City, USA Tokyo, Japan Latest Travel Stories 28  Check out my latest adventures: Exploring the Charm of Paris Relaxing in Bali's Beaches The Buzz of New York City Cultural Wonders of Tokyo Subscribe to My Blog Stay updated with my latest travels by signing up! Email: Gallery About Me Hi! I'm Jamie, a travel enthusiast who loves exploring new cultures and cuisines. Join me on my adventures! h2 { color: blue; } My Hobbies I enjoy [list your hobbies, e.g., painting, hiking, coding]. Each hobby brings me joy and relaxation. Achievements Some of my achievements include [list your achievements, e.g., certifications, awards]. © 2024 [Your Name]. All rights reserved. 48