HTML and CSS Grade 9 Booklet.pdf

IEB Coding and Robotics Summary: HTML and CSS 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 C SS and Tables Introduction to HTML Tables Although using tables for layout is deprecated, it's part of the syllabus for completeness. Most developers now use CSS (Cascading Style Sheets) for layout and styling because it offers more control. Basic Table Structure A table is made up of three main HTML tags: 1. – Starts the table. 2. – Defines a table row. 3. – Defines table data or individual cells in the row. Example: Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4 The width attribute sets the width to 800 pixels. The border attribute adds a 1-pixel border around the table so you can see it clearly. Table Rows and Data defines a row. is the table data element. Each contains multiple tags for the number of cells in the row. Think of rows like in an Excel spreadsheet: they contain cells. 49 Aligning Data Use the align attribute in to position your content: o align="center" o align="left" o align="right" For vertical alignment, use valign in : o valign="top" o valign="middle" o valign="bottom" Practical Uses for Tables Even though we don’t use tables for layout anymore, they still help with: Structuring data like spreadsheets. Placing elements in exact spots on a page. You can also put almost anything inside a table cell: Images using the tag. Clickable text using the (anchor) tag. A ctivity Test your understanding of HTML tables: 1. What HTML tag is used to define a row in a table? 2. How can you center align text in a table cell? 3. Which attribute controls the width of the table? 50 Below is an example index.html file that will place a table on a page. Web page title This is the title for the table Column Head 1 Column Head 2 Row 1 Col 1 Row 1 Col 2 Row 2 Col 1 Row 2 Col 2 This code above is indented so that you can clearly see the different HTML tags that make up the table. The table is inserted inside a set of tags. This is not compulsory, but using a container makes it easier for us to style the section of the display where the table is located. A tag is what initially creates the table. I have added the optional border="1" attribute so that the table will draw a border around all of the cells to make it easier for you to see what is going on. 51 You can give your table a title. This is optional. Use the tag to add the table title if you want one. The next part of the table is the table header. This is also an optional section. To place a header for your table you use the tags. If you have used the optional tag, then there are another two HTML tags that you need to include. You need to place a tag to create one row, and then you need a set of tags to create a cell for each column. In the above example the table has 2 columns, and therefore needs two sets of tags inside the tag. The last part of the table is compulsory, and that is the table body tag. In the example code above we are building a table that is 2 rows by 2 columns (not counting the optional header row created above). So the first thing that you need inside of the tag is a set of tags for each row. In the example above we need two sets of tags, one for each data row. Once the tags have been inserted, then it is required to add a set of table data (cells) tags for each column. Use the tags for this task. In our example above the table will have 2 rows of 2 columns for data, so we need two sets of tags inside each tag. Carefully study the structure of the code. While it may look very complicated, there is a definite pattern to it that is easy to remember. The above code will create the following (very bare and plain) table on the web page. This is a snip from my Chrome browser. Styling a table using HTML attributes Many of the HTML attributes used to fine-tune/create the tables have been deprecated. I will show you how to use the HTML attributes, and then I will also show you how to use CSS properties (the most common way to do it nowadays). 52 Here is the code to show a table. This is the title for the table Column Head 1 Column Head 2 Row 1 Col 1 Row 1 Col 2 Row 2 Col 1 Row 2 Col 2 Lets investigate what these attributes do for us. The tag has got three attributes included. The border="1" attribute will cause the browser to put a border around all the table cells. The 1 means the border will be 1 pixel in thickness. You can use larger numbers for a thicker border. The width="50%" attribute will cause the table to use 50% of the available screen width. You can also specify the width in pixels, eg. width="500". The height="400" attribute will make the total height of the table be 400 pixels. By setting these attributes in the tag these are the overall settings for the entire table. You should notice that these same attributes can also be set on individual , , and tags as well. If you set the width attribute to 500 for the , and then set the first tag (column #1) to a width of 200, then column #2 will automatically be set to 300 (500-200) even if you do not set anything. It makes sense when you think about it. 53 You do not need to set the width of every cell in a column. By setting the width of just one cell in the column (usually the top one, but doesn't have to be) then all cells in that column will be that width. You also do not need to set the width of every column in a row. The ones you do set will be that width, and the ones you don't will set themselves automatically. Let us try CSS The previous section showed you how to set some of the properties of the table by using HTML attributes. Now on this page you will see how to do exactly the same thing, but this time using the more modern CSS styling method. This is the title for the table Column Head 1 Column Head 2 Row 1 Col 1 Row 1 Col 2 Row 2 Col 1 Row 2 Col 2 54 The following CSS code is in the style.css file. table, th, td, caption { border: 1px solid black; border-collapse: collapse; }.table-width { width: 50%; }.table-height { height: 200px; }.height100 { height: 40px; }.width30 { width: 300px; } Lets investigate what is happening here. In the style.css there is a CSS rule-set that is using HTML selectors to draw a 1 pixel border (using a solid black line) around all , , , and containers. This means that a border is drawn around every cell in the table. In addition, the border-collapse property is being used to make sure that only 1 border is drawn around everything. Remove this property and see what happens. Also in the style.css file we have defined 4 classes that will set the values of various properties. Then, in the index.html file, we have included those classes at the appropriate places. 55 Using CSS to style other properties of a table You have seen how to set a border, and the width and height of the table (or the rows or columns) of the table. Now, lets have a look at styling some other features of the table. Study the following HTML code. This is the title for the table Column Head 1 Column Head 2 Row 1 Col 1 Row 1 Col 2 Row 2 Col 1 Row 2 Col 2 56 Study the following code from my style.css file. table, th, td, caption { border: 1px solid black; #border-collapse: collapse; }.height100 { height: 40px; }.width300 { width: 300px; }.table-settings { margin: auto; width: 50%; height: 200; border-spacing: 20px; } th, td { padding: 20px 30px 20px 30px; }.redonblue { background-color: aqua; color: red; }.textalignright { text-align: right; } Lets investigate what is happening in this CSS code. Notice, in the top piece of code dealing with the table HTML selectors that the border- collapse property now has a # in front of it. This "comments" that line out, so that it is no longer active. I want you to be able to see all of the borders for all of the cells for when we configure spacing and padding. There is a height100 class defined that can be used to style any container to have a height of 100 pixels. There is a width300 class defined that can be used to style any container to be 300 pixels wide. There is a table-settings class defined that is configuring various properties. The margin: auto will cause the entire table to be drawn in the middle of the DIV container (ie. centre of the screen). The width: 50% sets the table width to be 50% of the width of the display. The height: 200px sets the table height to be 200 pixels. 57 The border-spacing: 20px forces each individual cell of the table to be spaced 20 pixels away from any cells in any direction. When you do this for yourself you will see where the cell borders are drawn. Then there is another piece of code for styling any TH and TD selectors. This adds padding in each direction (top, right, bottom, and left). Padding is reserved space that is INSIDE the cell between the cell borders and any content (text). This is different to cell spacing (the spacing between cells themselves). See the image of one cell below, which shows each property. Spacing is not shown, but it is the space between adjacent cells. Then there is another class called redonblue that will cause text to be written in red colour on a light blue (aqua) background. Lastly there is a class called textalignright that will align text to the right (right justified). If you look at the HTML code at the top you will see where these classes have been applied. 58 A ctivity Complete the crossword puzzle. 59 C 1. SS and Tables Glossary Definition: The HTML tag used to create a table. Example: 2. Definition: An optional HTML tag used to add a title or caption to a table. Example: This is the title for the table 3. Definition: The optional section of a table used to define the header row. Example: Header 1 4. Definition: The compulsory section of a table that contains the rows and columns of data. Example: Row 1 Col 1 5. Definition: The HTML tag used to define a row in a table. Example: Row 1Row 2 6. Definition: The HTML tag used to define a header cell in a table. It creates a bold, centered header by default. Example: Column Header 7. Definition: The tag used for individual data cells in a table. Example: Data 1 8. border-collapse Definition: A CSS property that merges borders of adjacent table cells into a single border. Example: border-collapse: collapse; 9. border Definition: An HTML attribute or CSS property that creates a border around table cells or elements. Example: border="1" or border: 1px solid black; 60 10. width Definition: An HTML attribute or CSS property used to define the width of a table or table cells. Example: width="50%" or width: 300px; 11. height Definition: An HTML attribute or CSS property used to define the height of a table or table rows. Example: height="400" or height: 200px; 12. margin Definition: A CSS property used to control the space around elements. In tables, it can center the table on the page. Example: margin: auto; 13. padding Definition: A CSS property used to define the space inside an element between its border and content. Example: padding: 20px; 14. border-spacing Definition: The CSS property that sets the space between table cells. Example: border-spacing: 20px; 15. redonblue Definition: A custom CSS class that sets the background color to aqua and the text color to red. Example:.redonblue { background-color: aqua; color: red; } 16. textalignright Definition: A custom CSS class used to align text to the right within a table cell. Example:.textalignright { text-align: right; } 17. height100 Definition: A custom class that sets the height of a table row to 100 pixels. Example:.height100 { height: 100px; } 18. CSS Definition: Cascading Style Sheets, a language used to define the visual appearance and formatting of HTML elements. Example: table { border: 1px solid black; } 19. HTML Definition: Hypertext Markup Language, the standard language used to create and structure web pages. Example: Table Example 61 A 1. ctivities Create a Webpage for a Café Menu using Tables Objective: Learners will create a basic webpage displaying a café menu using HTML tables and CSS for styling. Instructions: 1. Title: The webpage should be titled "Sunny Café Menu". 2. Table Structure: o Use the , , , , , and tags to create a table with a header and body. o The table should have 3 columns: Item Name, Description, and Price. o The table should have at least 6 rows of menu items (2 for each section: Breakfast, Lunch, and Drinks). 3. Styling: o Use CSS to style the table. o Set the width of the table to 80% of the page. o Add a border around the table and the cells (use border-collapse to merge borders). o Use padding inside the table cells (padding property). o The header row () should have a different background color from the rest of the table rows. o Make the text in the Price column align to the right using CSS (text-align: right). 4. Adding a Caption: o Add a at the top of the table with the text: "Sunny Café Menu". 5. Section Labels: o Create subsections for each part of the menu (Breakfast, Lunch, and Drinks) using different background colors for each section by applying custom CSS classes. 62 2. Activity: Create a Webpage for a Sports Team Roster using Tables Objective: Learners will design a webpage that displays the roster of a fictional sports team using HTML tables and CSS for styling. Instructions: 1. Title: The webpage should be titled "Team Thunder Roster". 2. Table Structure: o Use the , , , , , and tags to create a table. o The table should have 4 columns: Player Name, Position, Number, and Height. o Include at least 8 rows of players. 3. Styling: o Use CSS to style the table. o Set the width of the table to 90% of the page. o Add a border around the table and the cells (use border-collapse). o Apply padding inside the table cells (padding property). o The header row () should have a distinct background color from the rest of the table. o Make the text in the Number column align to the center using CSS (text- align: center). o Add a hover effect to the table rows that changes the background color when the mouse hovers over them. 4. Adding a Caption: o Include a at the top of the table with the text: "Team Thunder Roster". 5. Position Highlighting: o Use different background colors for players based on their positions (e.g., forwards, defenders, goalkeepers) by applying custom CSS classes. 63 P 1. ossible Answers Sunny Café Menu table { width: 80%; margin: auto; border-collapse: collapse; border: 2px solid #444; } th, td { border: 1px solid #444; padding: 10px; } th { background-color: #f4b41a; color: white; }.breakfast { background-color: #ffe5b4; }.lunch { background-color: #ffd700; }.drinks { background-color: #f4a460; }.price { text-align: right; } caption { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; 64 } Sunny Café Menu Item Name Description Price Pancakes Fluffy pancakes with syrup $5.00 Scrambled Eggs Served with toast and bacon $7.00 Grilled Cheese Cheddar cheese on toasted bread $6.00 Burger Beef burger with lettuce and tomato $9.00 Latte Coffee with steamed milk $4.00 Smoothie Fruit blend with yogurt $5.50 65 2. Team Thunder Roster table { width: 90%; margin: auto; border-collapse: collapse; border: 2px solid #333; } th, td { border: 1px solid #333; padding: 10px; } th { background-color: #007bff; color: white; }.forward { background-color: #d1e7dd; }.defender { background-color: #ffeeba; }.goalkeeper { background-color: #f8d7da; }.number { text-align: center; } tr:hover { background-color: #cce5ff; } caption { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; 66 } Team Thunder Roster Player Name Position Number Height John Smith Forward 10 6'2" Jane Doe Forward 11 5'9" Mike Johnson Defender 5 6'0" Emma Brown Defender 4 5'8" Chris Green Goalkeeper 1 6'1" Anna White Forward 7 5'7" 67 David Black Defender 3 5'10" Rachel Blue Goalkeeper 12 6'3" 68

HTML and CSS Grade 9 Booklet.pdf

Document Details

Related

Full Transcript

Upgrade to continue