Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
9th Edition
ISBN: 9780134801148
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Concept explainers
Question
Chapter 7, Problem 6HOE
Program Plan Intro
Program Plan:
- Include the HTML tag using <HTML>.
- Include the header tag using <head>.
- Include the title on the webpage using <title> tag.
- Include the viewport meta tag.
- Link the external style sheet “lighthouse.css” which includes
- Alignment for body tag.
- Alignment for wrapper tag.
- Alignment for header tag.
- Alignment for navigation tag.
- Alignment for main tag.
- Alignment to make the images float right.
- Alignment for footer tag.
- Close the header tag.
- Include a paragraph using the <p> tag.
- Close the body using </body> tag.
- Include the header tag using <head>.
- Close the file using </html> tag.
- Modify the html file after reviewing the media attribute on the link element and attach an external CSS file “myprint.css” to prevent the navigation files from printing is mentioned, which includes:
- Alignment for body tag.
- Alignment for wrapper tag.
- Alignment for header tag.
- Alignment for navigation tag.
- Alignment for main tag.
- Alignment to make the images float right.
- Alignment for footer tag.
- Prevent navigation from displaying.
- Alignment for body tag.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Use the Bootstrap 5.X starter template along with Animate.css and Google Fonts create a single HTML page, use all of Bootstrap’s built-in classes be sure that the document is responsive and includes following:
A navigation bar with a hamburger menu on mobile
A grid system with at least 3 rows. At least three different configurations in the rows at and above the LG breakpoint, e.g. 1 row has 3 columns, 1 row has 2 columns and 1 row has 4 columns
A bootstrap styled card (hint, look at components) that has two buttons of different colors
At least 1 animation from Animate.css (link above)
At least 1 font, the only CSS allowed is to define the font
This bears repeating, do not write any CSS outside of font definitions.
Use at least 10 bootstrap different utility classes (note there’s more than just backgrounds).
Feel free to use lorem ipsum or placeholder text where appropriate
The wireframe is the home page of Nuksoft Limited. The company through its Software Development Department is outsourcing the development of their web application to a potential GCTU Student of which you have won the contract. You are expected to create an HTML file with name index.php and a Cascading Style sheet with name, nuksoft_styles.css. Make use of only HTML tags. All styles should be control by the css file. Save all files in a folder and save all files related to this question in it. The name of the folder should be Nuksoft followed by your index number (e.g. Nuksoft-1081015001).a.Nuksoft provides the following services.i. Application Developmentii. Installation of CCTViii. Hardware and Networkingiv. IT ConsultancyCreate a drop-down menu using an internal css style and javascript displaying the services as a sub menu. Link each of the sub menu to a unique page.b. Create a similar menu for products. Nuksoft provides three main products to her customers. Each of these product…
Create a CSS file youName.css and link it to the HTML file you created earlier in Part 1.
The results after filling the styles should be as shown in the image below.
NOTE 1: Add classes and ids as you find suitable in the HTML file.
NOTE 2: Any style that is not specified, may be specified as you wish (like margins, paddings …).
NOTE 3: The width of the <body> is 700px and the font-family is “Arial”.
after finsih it must be as the image
Chapter 7 Solutions
Web Development and Design Foundations with HTML5 (9th Edition) (What's New in Computer Science)
Ch. 7.2 - Prob. 1CPCh. 7.2 - Prob. 2CPCh. 7.2 - Prob. 3CPCh. 7.10 - Prob. 1CPCh. 7.10 - Prob. 2CPCh. 7.10 - Prob. 3CPCh. 7 - Prob. 1MCCh. 7 - Prob. 2MCCh. 7 - Prob. 3MCCh. 7 - Prob. 4MC
Ch. 7 - Prob. 5MCCh. 7 - Prob. 6MCCh. 7 - Prob. 7MCCh. 7 - Prob. 8MCCh. 7 - Prob. 9MCCh. 7 - Prob. 10MCCh. 7 - Prob. 11FIBCh. 7 - Prob. 12FIBCh. 7 - Prob. 13FIBCh. 7 - Prob. 14FIBCh. 7 - Prob. 15FIBCh. 7 - Prob. 1AYKCh. 7 - Prob. 2AYKCh. 7 - Prob. 3AYKCh. 7 - Prob. 1HOECh. 7 - Prob. 2HOECh. 7 - Prob. 3HOECh. 7 - Prob. 4HOECh. 7 - Prob. 5HOECh. 7 - Prob. 6HOECh. 7 - Prob. 7HOECh. 7 - Prob. 8HOECh. 7 - Prob. 9HOECh. 7 - Prob. 10HOECh. 7 - Prob. 1WRCh. 7 - Prob. 1FWD
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Similar questions
- ****Urgent Urgent Urgent - Javascript code required**** I am including contents of CSS file and .html file that was provided along with this project. PLEASE USE JAVA SCRIPT TO MAKE THIS ASSINGMENT. THE CSS AND HTML FILE CANNOT BE EDITED. ***CSS doc*** *{margin: 0;padding: 0;box-sizing: border-box;} body{min-height: 100vh;display: flex;align-items: center;justify-content: center; } .calculatorF17{flex: 0 0 40%;}.screenF17{width: 100%;font-size: 7rem;padding: 0.5rem;background: rgb(41,41,56);color: white;border:none;} .buttonsF17{display: flex;flex-wrap: wrap;transition: all 0.5s linear;} button{flex:0 0 25%;border: 1px solid black;padding: 0.25rem 0;transition: all 2s ease;} .btn-grey{background: rgb(224,224,224);} .btF17{font-size: 4rem;} ***HTML DOC*** <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">…arrow_forwardneed help with the instruction in the attached images aslo atached is a copy of the js code and i will paste html code below as i can only upload 2 images. html code <!DOCTYPE html><html><head> <!-- JavaScript 7th Edition Chapter 3 Hands-on Project 3-2 Author: Date: Filename: project03-02.html --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 3-2</title> <link rel="stylesheet" href="styles.css" /></head> <body> <header> <h1> Hands-on Project 3-2 </h1> </header> <article> <h2>International Space Station Images</h2> <div id="gallery"></div> </article></body></html>arrow_forward9.Which of the following technique is also known as Fahrner Image Replacement? a. CSS ON/Images ON b. CSS ON/Images OFF c. CSS OFF/Images ON d. CSS OFF/Images OFFarrow_forward
- split these into two files one that is index.HTML and the other that is style.CSS what I have down below <!DOCTYPE html> <html lang="en"> <style> @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Roboto:wght@100&family=Scheherazade+New&display=swap'); body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background-color: #556271; color: white; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #556271; color: white; } h1 { color: #fe6a67; text-align: center; font-weight: normal; text-transform: uppercase; border-top: 1px dotted #d4dccd; margin-top: 30px; } h2 { font-size: 1em; text-align: center; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h1 { width: 2px; border-top: 1px dotted; border-top-color: #506D84; } h2 { text-align: center; } /* style rule for paragraph elements */ p { font-size: 2em;…arrow_forwardhow to do this exercise? Halloween 11 Create a product page In this exercise, you’ll create a product page that uses a variety of features for working with images. When you’re through, the page should look similar to this: Specifications: • To create the product page, you can copy the index.html file you worked on in exercise 7 to the products folder and rename it cat.html. Then, you can delete the content from the section, modify the URLs on the page as necessary, and add the content shown above. • Create a new style sheet named product.css for the product page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the cat.html file so it points to the correct style sheet. • Modify the horizontal navigation menu so it indicates that no page is current. • In the section, float the image to the left of the text. In addition, set the left margin for the text so if the product description is longer, the text won’t…arrow_forwardOpen your text editor: Please complete this code in HTML create a new file and name it “Lec_Ex4_2.html” create a new file and name it “style_2.css” Type the 8 lines in the html(basic html structure). Add this line to the head section of html: Write these lines in the body of the html: <div id=“title”><h1>Your name</h1></div> <div id=“container1”> . </div> Style it in the CSS: #title{ background-color:blue;} #container1 {background-color:red;} If we don’t specify the width of the div element,it will take up the full width available. We can specify the width and height of the divusing percentages or pixels. Percentages are flexible (changes according tothe screen size), and pixels are fixed. Add the following property to both divs: Width:80%; This is comparing to the full screen For the title div: Padding:2%; For the container div: Height: 400px; Height can also be made with percentages, butpixels are preferred. Your…arrow_forward
- You are going to add some javascript to your webpage to greet the user. All the below instructions can be found with further explanations in the Javascript lectures. Don not only give me the html code, i need javascript If you do not already have them, add two <h1> title tags so they display at the top of your webpage The first tag should have the contents: “Welcome” The second tag should have an id='username' and contents: “Placeholder” All Javascript must go in a file with the extension “.js”, such as “main.js” or “script.js”. Create a file to hold your javascript if one is not already there. Add a script tag at the end of your body tag that includes your javascript file. In your script tag, use the javascript prompt command to save input from the user into a variable Ask the user their name in the prompt command You can name the variable whatever you like Change the second <h1 id=’username’> contents to the name entered by the user it should be stored in the…arrow_forwardhi i need help in html css. i need to copy the one picture on the left with black background as well as the justified center postition of the picture. my work is the one with wednesday. as you can see it has white background and the picture position is wrong. i have 1 index.html file and 2 css: style.css and utilities.css here is the source code // this is index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- import css --> <link rel="stylesheet" href="css/style.css"> <!-- import favicon --> <link rel="shortcut icon" href="images/image1.jpg" /> <!-- import icons --> <script src="https://kit.fontawesome.com/bd6a72777e.js" crossorigin="anonymous"></script> <!-- import google fonts --> <link…arrow_forwardCreate another new text file and write the following codes. <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <h3> A White Header </h3> <p> This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p> </body> </html> Save this file with name MyExternalCSSdemo.html (Run and see the effect.) Create a new folder name – Tutorial -5 Create a two text file inside this folder and name – Tutorial -5.txt for HTML page and ExternalCSS.txt for CSS file Open Tutorial -5.txt as a sublime text (by right click on it) Following tasks to be completed to develop a web page using external CSS. 1. Create an External CSS which should have background colour ‘white’, Header H1 colour ‘black’ and paragraph colour ‘Red’ 2. Web page should have…arrow_forward
- Create an infographic webpage of your three closest friends namely Bill, Ted and Peter. 2. Create a folder named: SurnameFirstname 3. Webpage content of the folder is as follows: nickname_inline.html = design the webpage using inline CSS nickname_internal.html = design the webpage using internal CSS nickname_external.html = design the webpage using external CSS 4. Images and CSS files should be saved in the assets subfolder.arrow_forwardThe image is the home page of Nuksoft Limited. The company through its Software Development Department is outsourcing the development of their web application to a potential GCTU Student of which you have won the contract. You are expected to create an HTML file with name index.php and a Cascading Style sheet with name, nuksoft_styles.css. Make use of only HTML tags. All styles should be control by the css file. Save all files in a folder and save all files related to this question in it. The name of the folder should be Nuksoft followed by your index number (e.g. Nuksoft-1081015001).a.Nuksoft provides the following services.i. Application Developmentii. Installation of CCTViii. Hardware and Networkingiv. IT ConsultancyCreate a drop-down menu using an internal css style and javascript displaying the services as a sub menu. Link each of the sub menu to a unique page.b. Create a similar menu for products. Nuksoft provides three main products to her customers. Each of these product…arrow_forwardIm getting an error and wanted to know how I can fix this I will share the codes with you for the two files its showing. index.html file <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cocktails</title> <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" /> <!-- css --> <link rel="stylesheet" href="./styles.css" /> </head> <body> <form class="search-form"> <h2>cocktails API</h2> <input type="text" placeholder="search your favorite" name="drink"/> </form> <section class="section cocktails"> <article class="loading"> <img src="./loading.gif" alt="loading"> </article> <h2 class="title"></h2> <div class="section-center">…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning