Basics of Web Design: HTML5 & CSS3 (3rd Edition)
3rd Edition
ISBN: 9780133970746
Author: Terry Felke-Morris, Terry Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Concept explainers
Question
Chapter 8, Problem 6HOE
Program Plan Intro
Design a web page to display both in desktop and smartphone browser
Program plan:
- Include the HTML tag using “<HTML>”.
- Include the title on the webpage using “<head>” tag.
- Open the “<meta>” tag to set the viewport for visible area of webpage.
- Include the title on the webpage using “<title>” tag.
- Include the style tag using “<style>” for internal style.
- Add the style for “body” element.
- Internal style for media queries to design the web page.
- Add the style for “wrapper” element.
- Add the style for “nav” element.
- Add the style for “nav ul” element.
- Add the style for “nav a” element.
- Add the style for “main” element.
- Add the style for “header” element.
- Add the style for “h1” element.
- Add the style for “h2” element.
- Add the style for “article” element.
- Add the style for “footer” element.
- Open the body of the web page using “<body>” tag.
- Use the two-column layout to design the webpage using “div” tag.
- Open the header of the web page using <header> tag.
- Open the navigation link using <nav> tag.
- Open the main of the web page using <main> tag.
- Open the section of the web page using <section> tag.
- Open the article of the web page using <article> tag.
- Open the footer of the web page using <footer> tag.
- Close all the tags.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
Using HTML CSS ,javascript create a responsive web design
refer to the below image for all the design and content
>>>and last please do the next window for the movie booking for those are the running movies at that time, do only design, not any another work
>>>> pls don't reject this question because this is very important for my assignment marks
pls help
Develop a basic personal web page using the HTML
he correct html, head, and body tags Insert the following phrase, without the quotes, as your title tag: “HTML Beginner Exercise by <insert your first and last name>.” Example: HTML Beginner Exercise by Theresa Clarke One unordered list of items (must include at least four items) One ordered list of items (must include at least four items) A bold word or phrase anywhere on the page A centered word or phrase anywhere on the page An italicized word or phrase anywhere on the page
At least three hypertext links to other sites on the Internet
Include at least 4 menus(Home, About Me, Interest, Contacts)
Any .jpg or .gif images images
could you made a code with
3-Column Layout
and HTML Table and Local Storage and Loop and Array and External CSS, and Media Query css.
make a file for them
Chapter 8 Solutions
Basics of Web Design: HTML5 & CSS3 (3rd Edition)
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
- Create a home page about cafe business in HTML on a notepad. No CSS required (with source code).arrow_forwardCreate an HTML page with name yourname&ID.html and include thefollowing (After finishing it should like the image ): A <title> element. A <header> element with to headings inside it:o <h1>: Brown Examo <h2>: This is HTML and CSS Exam A <nav> element containing hyperlinks (Home, Examples, About Us, and Contact Us). A <div id="content"> element for the main content. The main content has two parts:o The first part contains a heading <h1>, an image and a dummy paragraph.o The second part contains a heading <h1>, a dummy paragraph, and a table. It finally contains a <footer> element: © Web page prepared by: [your name]arrow_forwardCreate a simple webpage about any famous person using these HTML attributes:Background ColorFont size, color, and faceStyle (bold, italicized, underline, and subscript)Aligning ContentListsUnordered ListDescription ListHref AttributeSrc AttributeTitle Attributearrow_forward
- Create a Page for "Make an Election" of Electronic Voting System using HTML and CSSarrow_forwardCreate an HTML 5 web page 1, add a background color sky-blue, and name the page, “The Sky Is The Limit”. Add a Heading: LEARNER: Lesson Learned (ALL CAPS), add your full nameand Surname, Student Number, Module Code, Semester, Date, and Year in the text line. Also add a paragraph with a list of 05 positive points and five negative points reflecting on this module CS 101, (good and/or bad). Also, make a suggestion on how to improve. Create another page 2 using HTML 5, add background color to be light gray, insert two text boxes, all should be in the middle, the first one lable it Username and the second one Password, and add the following buttons, Clear and Log-in, add a link named Forgotten Password at the bottom, on a mouse click, a popup message/window saying “ Please contact the administrator for assistance!!! should appear. - Use JavaScript code to make text box 1 (Username) accept only text and text box 2 (Password) to accept a combination of both text and numbers.…arrow_forwardCreate a semantic page layout with only with HTML no styling. Within the header, create a navigation list with one or two "skip navigation links. In the main content, create a form with username and email text inputs and a submit button. Create a footer with the copyright date. Make sure that all elements that need proper WGAG compliant AIRA and ROLES and can be navigated by keyboard and screen reader.arrow_forward
- In the index.html and about.html files, add a class attribute with a value of round to the image elements within the main element.--- my index.html <!DOCTYPE html> <html lang="en"> <head> <title>Wild Rescues: Home</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora:ital,wght@0, 400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> </head> <body> <header> <div class="tab-desk"> <div class="mobile"> <h1>🐾 Wild Rescues</h1> <h3>Rescue. Rehabilitate. Release.</h3> <a href="index.html"> <img src="images/baby-hawk.jpg" alt="rescued baby hawk"> </a> </div> </div> </header> <nav> <ul> <li><a…arrow_forwardI need help with making me auditioned needed in the image I have provided the code I have so far Below please help To continue to work on this code to help me I have added everything needed below you simply need to cut and paste it into an HTML/CSS Compiler <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div>…arrow_forwardUsing javascript Need help creating a data base that stores login detail from my html page. Please use code below and integrate to it. main.html <html><head><title> login design </title><link rel = "stylesheet" type = "text/css" href= "style.css"><link rel="icon" type="image/png" href="image/blog.png"><script src= "login2.js"> </script><body><div class="loginbox"><img src="avatar.png" class="avatar"><h1> Login Here </h1><form action="login.php" method="post"><p>Username</p><input type="text" name="" placeholder="Enter Username"><p>Password</p><input type="password" name="" placeholder=" Enter Password"><input type="submit" name="" value="Login" onclick="validate()"><a href="#">Forgot Password? </a><a href="register.html">Register Here</a></form></div>> </body></head></html>…arrow_forward
- <!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <html lang="en" dir="ltr"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title> Website Layout | CodingLab</title> <linkrel="stylesheet"href="style.css"> <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> </head> <body> <nav> <divclass="menu"> <divclass="logo"> <ahref="#">CodingLab</a> </div> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">About</a></li> <li><ahref="#">Services</a></li> <li><ahref="#">Contact</a></li> <li><ahref="#">Feedback</a></li> </ul> </div> </nav> <divclass="img"></div>…arrow_forward<!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <html lang="en" dir="ltr"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title> Website Layout | CodingLab</title> <linkrel="stylesheet"href="style.css"> <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> </head> <body> <nav> <divclass="menu"> <divclass="logo"> <ahref="#">CodingLab</a> </div> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">About</a></li> <li><ahref="#">Services</a></li> <li><ahref="#">Contact</a></li> <li><ahref="#">Feedback</a></li> </ul> </div> </nav> <divclass="img"></div>…arrow_forwardHow can I extend the codebase to include CSS animations and one more CSS element (A STAR) See my HTML AND CSS <!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"> <title>Transforms and Transitions & Animations CSS</title> <link rel="stylesheet" href="./css/cloud.css"></head><body> <div class="wrapper"> <div class="cloud"> <div class="cloudshadow"></div> </div> </div></body></html> CSS: .cloud, .cloudshadow { width: 350px; height: 120px; background: #3498db; border-radius: 100px; position: relative; margin: 150px 50px;}.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before { content: ''; position: absolute; background: #3498db;…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education
Database System Concepts
Computer Science
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:9780134444321
Author:Tony Gaddis
Publisher:PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:9780132737968
Author:Thomas L. Floyd
Publisher:PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:9780133976892
Author:Paul J. Deitel, Harvey Deitel
Publisher:PEARSON
Database Systems: Design, Implementation, & Manag...
Computer Science
ISBN:9781337627900
Author:Carlos Coronel, Steven Morris
Publisher:Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:9780073373843
Author:Frank D. Petruzella
Publisher:McGraw-Hill Education