Answered: Make an HTML file with this exact HTML.…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

100%

Make an HTML file with this exact HTML. Change nothing:

<!doctype html>

<head>

<metacharset="utf-8">

<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Doggos</title>

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"crossorigin="anonymous">

<linkrel="stylesheet"href="overrides.css">

</head>

<body>

<divclass="container">

<divclass="row">

<divclass="col">

<h1>Doggos</h1>

<pclass="lead">Who's the best?</p>

<p>Doggos are the <em>best!</em></p>

<pclass="m-4"><img class="border"src="goat.jpg"alt="Goat"></p>

<pclass="text-warning">Oops. That's a goat.</p>

<p>Let's try that again.</p>

<pclass="m-4"><img class="border"src="doggo.jpg"alt="Doggo"></p>

<p><em>That's</em> a doggo!</p>

</div>

></script>

</body>

</html>

Grab some images of your own to use.

Create your own overrides.css. Make the page look like the picture attcahed below.

GIVE ALL CODES. thank you i will upvote!!

**Doggos**

**Who's the best?**

*Doggos are the best!*

Here's one now!

[Image of a goat]

**Oops. That's a goat.**

Let's try that again.

[Image of a dog]

*That's a doggo!*

Expert Solution

Step 1: Algorithm :

Algorithm: Create a Web Page with Images

1. Start with an HTML template.
2. Add a <!DOCTYPE html> declaration to specify the document type.
3. Create an <html> element with the "lang" attribute set to "en" for English language.
4. Inside the <html> element, create a <head> section.
5. Inside the <head> section, add the following meta tags:
- <meta charset="utf-8"> to specify the character encoding.
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> for responsive design.
- <title> element with the title "Doggos."
- Link to the Bootstrap CSS framework.
- Link to a custom CSS file called "overrides.css" for styling overrides.
6. Close the </head> section.
7. Create the <body> of the web page.
8. Inside the <body>, create a <div> element with the class "container" to structure the content.
9. Inside the "container" <div>, create a <div> with the class "row" for a row of content.
10. Inside the "row" <div>, create a <div> with the class "col" for a column of content.
11. Add an <h1> element with the text "Doggos."
12. Add a <p> element with the class "lead" and text "Who's the best?"
13. Add another <p> element with text "Doggos are the best!"
14. Add a <p> element with the text "Here's one now!"
15. Insert an <img> element with the source URL "goat.jpg" and alt text "Goat." (Replace with your image)
16. Add a <p> element with the class "text-warning" and text "Oops. That's a goat."
17. Add another <p> element with the text "Let's try that again."
18. Insert another <img> element with the source URL "doggo.jpg" and alt text "Doggo." (Replace with your image)
19. Add a final <p> element with the text "That's a doggo!"
20. Close the "col" <div>.
21. Close the "row" <div>.
22. Close the "container" <div>.
23. Add a script element to include the Bootstrap JavaScript.
24. Close the <body>.
25. Close the <html>.

End of Algorithm

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