HTML code :<!DOCTYPE html><html lang="en"><head><title>Image Gallery</title><meta charset="utf-8"></head><body><h1>Image Gallery</h1><div id = "gallery"> <li><a href="photo1.jpg"><img src="photo1.jpg" width="100" <span> <img src="photo1.jpg" width="150" height="150"> </li> <a href="#">Golden Gate Bridge</a><li><a href="photo1thumb.jpg"><img src="photo1thumb.jpg" width="100" <span> <img src="photo1thumb.jpg" width="150" height="150"> </li><a href="#">California Beach</a></div></body></html> Lab 61. Configure span elements in the gallery not to display initially.#gallery span (display: none; }Note: View the result on the browser.9. Configure the span elements in the gallery to display only when the webvisitor hovers the mouse over the thumbnail image link. Set the locationof the span to use absolute positioning. Locate the span 10 pixels downfrom the top and 300 pixels in from the left. Center the text within thespan:#gallery a:hover span ( display: block; position:absolute;top: 10px; left: 300px; text-align: center;)4| PageNow, view the result.If everything goes well, move the embedded css to an external css. Provide the necessary link inthe html to make it work.Files to submit: index.html and your external css file 5.Create an embedded css (for now).a. Set the gallery id to use relative positioning.#gallery position: relative; }b. The unordered list in the gallery should have a width of 250 pixels andno list marker.#gallery ul (width: 250px; list-style-type: none; }c. Configure the list item elements in the gallery with inline display, leftfloat, and 10 pixels of padding.#gallery li ( display: inline; float: left; padding:10px; }d. The images in the gallery should not display a border.#gallery img { border-style: none; }e. Configure anchor elements in the gallery to have no underline, #333 textcolor, and italic text.#gallery a {text-decoration: none; color: #333;font-style: italic; )f. Configure span elements in the gallery not to display initially.

Create a new HTML file and open it in a text editor.Write the HTML structure, including the…

Answered: HTML code : Image Gallery Image…

Engineering

Computer Science

HTML code : Image Gallery Image Gallery Golden Gate Bridge California Beach

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE

1st Edition

ISBN:9780357392676

Author:FREUND, Steven

Publisher:FREUND, Steven

Chapter4: Financial Functions, Data Tables, And Amortization Schedules

Section: Chapter Questions

Problem 3EYK

See similar textbooks

Related questions

Q: Part 2 In this exercise, we're going to add a simple tiling background image to the menu. The images…

A: i have added a div around menu and defined relevant css for transparent background.

Q: The online menu is looking pretty good, but let's put a few finishing touches on it. Open the…

A: Answer 1: to remove the spaces in flex so we uses. section { justify-content : flex-start; }…

Q: Black Goose Bistro Summer Menu body { font-family: Georgia, serif;

A: we first have to create main-styles.css file to convert embedded css in external css file. After…

Q: Create a web form as shown below that allows the user to select a team's starting lineup for a game.…

Q: 1. Use an embedded style sheet for this exercise. Start by adding a style el- ement in the head of…

A: First of all, I have created an embedded style sheet in the HTML file below the title tag then I…

Q: Lab 14 Sticky Note Board Transforms CSS transforms change the shape and position of the…

A: Applying background color for the sticky note . Using CSS

Q: Black Goose Bistro Summer Menu body { font-family: Georgia, serif; font-size: 100%; line-height:…

A: According to the Question below the Solution: HTML Code: <!DOCTYPE html > <html>…

Q: html

A: Given :- A code fragment using the html and css web technologies is given in the above question…

Q: Use an embedded style sheet for this exercise. Star

A: embedded or inline style means providing the style rules with in the html tags .

Q: Online Library Enter ISBN :…

A: According to the above question there are different methods to add CSS: 1) Inline CSS by usnig style…

Q: create a start botton , it will randomly create 10 different names with gender and age like this…

A: Add event listener click function to the submit button to call name function in js file use a random…

Q: Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this…

A: Code : <!DOCTYPE html><html><head> <script…

Q: Black Goose Bakery Grid html { box-sizing: border-box; } * { box-sizing: inherit; } body {…

A: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

Q: Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this…

A: <!DOCTYPE html> <html> <head> <script…

Q: this html code books Books list 《tomandjerry》…

A: HTML and CSS code to design the list

Q: Black Goose Bakery Grid html { box-sizing: border-box; } * { box-sizing: inherit; } body {…

A: I did all the required changes in the below html code.

Q: Specifications for the 3-column layout 127.0.0.15500/happ_solutions/ch06/index3.com.htm Shape Up!…

A: HTML which refers to the markup language that are used by the browser to manipulate text, images,…

Q: Page Title body { font-family: Arial, Helveti

A: Q. <!DOCTYPE html><html lang="en"><head><title>Page…

Q: • Separate your style sheets into three files: o Istyles/colors.css o Istyles/formatting.css o…

A: check next steps

Q: Create three break points using media queries in at least one style sheet to alter the way your…

A: Given that the HTML code used to generate the total webpage.with an animation affects and provided…

Q: Open the the gallery, txt (attached) file and save it as gallery1.html Make copies of the…

A: HTML is hypertext markup language, which is used to create web content in a web browser. HTML…

Q: Shape Up! 5 Enhance the home page formatting In this exercise, you'll use the CSS box model to add…

A: We will be doing the answer in HTML and CSS Programming.

Q: Black Goose Bakery Grid html { box-sizing: border-box; } * { box-sizing: inherit; } body {…

A: Please go through the below code modified code.

Q: JavaScript MultiplicationTable 1- write function that first row and first colum be yellow…

A: Algorithm: Start Define a function named "multiplicationTable". Inside the function, get the values…

Q: The CSS Requirements ● Separate your style sheets into three files: o/styles/colors.css…

A: Create three stylesheets colors.css, formatting.css, and transitions-animation.css. Link these files…

Q: There must be at least one Grid layout and one Flex layout on your website Grid style requirements:…

A: <!DOCTYPE html><html><head><style>.item1 { grid-area: header; }.item2 {…

Q: JavaScript & jQuery - Chapter 5: Document Object Model - Example List…

A: Code: <!DOCTYPE html><html lang="en"> <head> <title>JavaScript &amp;…

Q: Shape Up! Shape Up! Find the best fit for you Home Strength Training…

A: HTML HyperText Markup Language is what HTML stands for. It is a widely used markup language for…

Q: Black Goose Bakery Grid html { box-sizing: border-box; } * { box-sizing: inherit; } body {…

A: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

Q: homework 14 Sticky Note Board…

A: HTML stands for Hypertext Markup Language. It is the standard markup language used for creating web…

Q: Whan you are done experimenting, set align-items back to stretch. Instead of having all the items on…

A: There were four layout modes prior to the Flexbox Layout module: For portions of a webpage, use a…

Q: How can I frame all the product pictures with a frame

A: By Using DIV class Adding CSS into the HTML .frame { width: 250px; height: 250px;…

Q: Hands-On Practice 14.9.(SHOWN ABOVE). Add a text box for the user’s city. Ensure that this text box…

A: JavaScript is the most popular scripting language for the web. It allows for designing interactive…

Q: In this exercise, we'll set up the grid template for the page shown in FIGURE 16- 37. We'll place…

A: The CSS grid styles are used as per instructions given in the question WITHOUT changing any of the…

Q: book.html Online Library Enter ISBN :…

A: Here is the detailed explanation of the solution

Q: Given: a span { color : red; } Information…

A: The Html tag <html> is used to define an HTML document with head and body. The script element…

A: Given code : <!DOCTYPEhtml><hTm><head><title>Page…

Q: Finally, try out the space and round repeat values on the body background image and see if you like…

A: <html> <head><meta charset="utf-8"><title>Black Goose Bistro Summer…

Q: Lab 14 Sticky Note Board…

A: HTML stands for Hypertext Markup Language. It is the standard markup language used for creating web…

Question

HTML code :

<!DOCTYPE html>

<head>

<title>Image Gallery</title>

</head>

<body>

<h1>Image Gallery</h1>

</li>

<a href="#">Golden Gate Bridge</a>

</li>

<a href="#">California Beach</a>

</div>

</body>

</html>

Lab 6
1. Configure span elements in the gallery not to display initially.
#gallery span (display: none; }
Note: View the result on the browser.
9. Configure the span elements in the gallery to display only when the web
visitor hovers the mouse over the thumbnail image link. Set the location
of the span to use absolute positioning. Locate the span 10 pixels down
from the top and 300 pixels in from the left. Center the text within the
span:
#gallery a:hover span ( display: block; position:
absolute;
top: 10px; left: 300px; text-align: center;
)
4| Page
Now, view the result.
If everything goes well, move the embedded css to an external css. Provide the necessary link in
the html to make it work.
Files to submit: index.html and your external css file

5.
Create an embedded css (for now).
a. Set the gallery id to use relative positioning.
#gallery position: relative; }
b. The unordered list in the gallery should have a width of 250 pixels and
no list marker.
#gallery ul (width: 250px; list-style-type: none; }
c. Configure the list item elements in the gallery with inline display, left
float, and 10 pixels of padding.
#gallery li ( display: inline; float: left; padding:
10px; }
d. The images in the gallery should not display a border.
#gallery img { border-style: none; }
e. Configure anchor elements in the gallery to have no underline, #333 text
color, and italic text.
#gallery a {text-decoration: none; color: #333;
font-style: italic; )
f. Configure span elements in the gallery not to display initially.

Expert Solution

This question has been solved!

Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.

SEE SOLUTION Check out a sample Q&A here

Step 1: Algorithm:

VIEW

Step 2: Source Code:

VIEW

Step 3: Screenshot Of Source Code:

VIEW

Solution

VIEW

Step by step

Solved in 4 steps with 3 images

SEE SOLUTION Check out a sample Q&A here

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

Make sure that the heading that starts with “Children’s Lessons” does not float to the right of the image by clearing the float at that element. In the ski.html file, add the following attribute/value pair to the opening tag that marks the Children’s Lessons heading: class="clearfloat"
Q.No.4. Design a web page by using div, h1, h2 and image elements as given below. Implement also the box model to set the image in proper way All the design of elements should be implemented in iternal style sheet. DIV Animal Pictures Koala Penguins DIN tmage
Design a web page by using div, hl, h2 and image elements as given below. Implement also the box model to set the image in proper way. All the design of elements should be implemented in internal style sheet. hi Div Animal Pictures Koala Penguins Div Koalajpg Penguinsjpg Image
How to create a product table page: To create the product list page, you can copy the index.html file you worked on in exercise 7 to the products folder. Then, you can delete the content from the main section and modify the URLs on the page as necessary. • Modify the horizontal navigation menu so it indicates that the product list page is the current page. • Add a table to the section with a caption, a header, and a body as shown above. Be sure to merge the rows in the first column for each category so the category name is displayed only in the first row. Create a new style sheet named summary.css for the product list 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 products/index.html file so it points to the correct style sheet. • Align the caption, headings, and data, and apply any other required formatting as shown above. Use a structural pseudo-class selector to apply a background color of…
Create the page layout as shown in the screenshot above. In particular, we will call the top, bottom, left, and right portions of the page "header", "footer", "content", and "menu", respectively. Note that the content part of the page is further divided into three blocks: the top block has a heading and a paragraph, and is followed by two blocks - one on the left with two images, and one on the right with three "announcements". The header should use large, white, center-aligned text on a red background with a thick black border. There should be some space between the text and the border. The footer should use green, centered-aligned text on a gray background. The menu has an unordered list on a black background. The background of the list is red. Each item in the list is hyperlinked except for "Home". The unlinked text should be black, and the linked text should be white. When a user mouse over a link, the color of the text should change to black. There should be some space between…
HTML One way of centering a div element with class name "inner" inside of another larger div element with class name "outer" with having inner being 200 X 200 pixels and outer being 400 X 400 pixels would be: (Assume that they are nested in the html file page and NOT decoupled and self-contained) Both div elements have borders a. .inner{ margin-top:200px; margin-left:200px; } b. div { margin-top:100px; margin-left:100px; } c. .inner{ margin-top:100px; margin-left:100px; } d. .inner{ margin-left: 100px; } Given the following html, what would be the correct css to make the ul element red text <html> <head> <link rel=…
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.
HTML In strictly default block vertical coordinates, the reference positions for the next element placement on the page is the location of the element immediately on top and the left-hand screen position. (TRUE OR FALSE)? If an outer div container contains two inner div elements, and an outer height is given by css to the outer container, and the background color of the outer container is blue then there will always be blue colored space left below the two inner divs (TRUE OR FALSE)? Image elements can have borders surrounding them , and maintained inside a containing element. (TRUE OR FALSE)? In table elements, the most specific HTML level is the tr element ( row element)(TRUE OR FALSE)? Text can be centered inside a div element by using the selector command text-align: center or otherwise placing the text inside another div element with the same background color and applying margin-left command( TRUE OR FALSE)? A paragraph, div element, and h element will assume the…
HTML True or False One way to introduce an image and place it in a block element container is to embed it inside its own div element , then place that new div element inside the container using internal padding and internal margins.(True or false)? .central li and .central ul are both overriden (in a common selector property such as color) by both div.central li and div ul.(True or false)? Paragraphs in a vertical block structure inside a div element can be flush mounted against each other ( no separation space between them) by employing padding but not by eliminating the margin in-between them (setting margin:0px;). (True or false)? In the table element, the col or colgroup designation with class name can be used to control and override background colors but not text color.(True or false)? Given the following html, what would be the correct css to make the ul element red text . (True or false)?…
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
Computer Science WebGL - Use the z-buffer algorithm to demonstrate hidden-surface removal for three cubes. One cube should be in the center of the canvas. Each of the other two cubes should either overlap the first cube or be overlapped by it. Create separate files for the HTML index and JavaScript required for the program. Please include screenshots of your program running as well.
I need to do an image rollover with the article image. Ill send the picture of the original html code and ill post the css in here. I also attached the directions /* the styles for the elements */ * { margin: 0; padding: 0; } html { background-color: white; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 850px; margin: 0 auto; border: 3px solid #931420; background-color: #fffded; } a:focus, a:hover { font-style: italic; } /* the styles for the header */ header { padding: 1.5em 0 2em 0; border-bottom: 3px solid #931420; background-image: linear-gradient( 30deg, #f6bb73 0%, #fffded 30%, white 50%, #fffded 80%, #f6bb73 100%); } header h2 { font-size: 175%; color: #800000; } header h3 { font-size: 130%; font-style: italic; } header img { float: left; padding: 0 30px; } .shadow { text-shadow: 2px 2px 2px #800000; } /* the styles for the main content */ main { clear:…