Basics of Web Design: Html5 & Css3
4th Edition
ISBN: 9780134444338
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Question
Chapter 7, Problem 3HOE
Program Plan Intro
Program Plan:
- Include the HTML tag using “<html>”.
- Include the header tag using “<head>”.
- Include the style on the webpage using “<style>”tag.
- Set the position property as “absolute”.
- Set the top property as “20 px”.
- Set the right property as “40 px”.
- Set the background property as “#D3D3D3”.
- Set the border property as “1px solid #80c080”.
- Include the style on the webpage using “<style>”tag.
- Close the header tag using “</style>”.
- Close the header tag using “</head>”.
- Open the body of the web page using “<body>” tag.
- Include the “<div>” tag and add an “id” attribute to assign the style.
- Include the head tag “<h1>” to display page heading.
- Include the content to be displayed in the webpage using paragraph “<p>” tag.
- Close the body using “</div>” tag.
- Include the “<div>” tag and add an “id” attribute to assign the style.
- Close the body using “</body>” tag.
- Include the header tag using “<head>”.
- Close the file using “</html>” tag.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
I believe I am close to having this correct but would like to check.
Write the CSS to configure a grid for an id named container that has two columns and two rows. The first row is 100 pixels high. The first grid item in the second row takes up 75% of the width.
Using Javascript
Write a page that displays a balloon (using the balloon emoji, ?). When you press the up arrow, it should inflate (grow) 10 percent, and when you press the down arrow, it should deflate (shrink) 10 percent.
You can control the size of text (emoji are text) by setting the font-size CSS property (style.fontSize) on its parent element. Remember to include a unit in the value—for example, pixels (10px).
The key names of the arrow keys are "ArrowUp" and "ArrowDown". Make sure the keys change only the balloon, without scrolling the page.
How can you apply it to translate property in CSS on an image when the user hovers it with the mouse pointer it translates an image? Provide CSS code and a screenshot of the output image.
Chapter 7 Solutions
Basics of Web Design: Html5 & Css3
Knowledge Booster
Similar questions
- Implement a Web Page with CSS stylesCreate a div element with a width and height of 500 px. Create a diagonal linear gradient using colors of the rainbow- Red, Orange, Yellow, Green, Blue, Indigo, Violet.arrow_forwardWrite a CSS rule that places a background image halfway down the page, tiling it horizontally. The image should remain in place when the user scrolls up or down.arrow_forward9.Write the CSS style rule to display an image that is fixed in position and is placed at 125 pixels from the top and 140 pixels from the right of its parent window.arrow_forward
- 6. Create a web page that displays eight of your favorite photos (or eight photos supplied by your instructor). Also include a header and footer area on the page. The page layout should implement grid layout to configure a responsive display. Include your name in an e-mail address in the page footer area.arrow_forward2. Write the CSS for an id named not:ice that is configured to 80% width and centered. 3. Write the CSS to configure a class that will produce a headline with a dotted line underneath it. Choose a color that you like for the text and dotted line. 4. Write the CSS to configure an h1 element selector with drop- shadow text, a 50% transparent background color, and sans-serif font that is 4em in size. 5. Write the CSS to configure an id named feature with small, red, Arial font; a white background; a width of 80%; and a drop shadow.arrow_forwardwrite a CSS style rule to set up a linear gradient background based on the following requirements: it is for a class named peter the direction of the linear gradient is to be from right to left and must be represented by degrees the starting colour must be red and presented in the RGB format the ending colour must be blue and presented in hexadecimal formatarrow_forward
- Exercise 2Design a web page with a canvas with the id c2, width – 300 height 300 with solid border with Blue color. Draw a string “Hello” on the canvas at location (10,70) with the font Arial and font size 20 pixelarrow_forwardDescribe a CSS element that would repeat an image in the background only along the Y axisarrow_forwardHow to make this more responsive so that when the screen is small picture and texts will be written in the seperate lines (picture - upper side; texts lower side instead of left - picture and right - text as shown in the pictures) css file: .image-text-container { display: flex; /* Arrange elements horizontally */ align-items: center; /* Align content vertically */ margin: 20px; /* Add some margin around the container */ } html file: <div class="image-text-container"> <figure> <imgsrc="washFace.png"alt="Picture of a woman washing his face"class="full-width-image"> </figure> <article> <h2>Wash your face with water</h2> <p>First off, start by splashing your face with water. It's crucial to clear away the dirt and oil that gathers while you sleep. However, cleanser isn’t needed in the morning; lukewarm water works best. <p> </article> </div>arrow_forward
- Write a css style like, the title is list, Declare a css rule with an id selector, set the font size to double, and display the text "work" apply the id selector to a <b> tag for the display of text "john"arrow_forwardWrite a CSS rule that changes the appearance of all headings at level one (h1) in your page to the following: The heading uses an Arial font face The heading should be blue. The heading must have a font size of 18 pixels. The heading has a blue, thin border at the top and left side.arrow_forwardModify the CSS declarations for the span and p rules to meet each requirement below: Padding on the span: 5 pixels left, and 5 pixels right. Border on the span: 2 pixels solid black above (use -top suffix), and 4 pixels solid gray below (use -bottom). Padding on the paragraph: 10 pixels on all sides. Border on the paragraph: 10 pixels, light green, ridge style (use border-style, border-color, and border-width). Margin on the paragraph: 5 pixels on all sides. <p> The typical filler text is the <span>Lorem Ipsum</span>. According to lipsum.com, this text has been standard dummy text since the 1500s.</p>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 Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable 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