Question

In: Computer Science

5 html files minimum (does not include css file) Use of all three methods of css...

5 html files minimum (does not include css file)
Use of all three methods of css (inline, internal, external). Have inline and internal css on all 5 html files and use one external css file that styles all 5 html pages
Use div tags to section off part of the pages and add border radius the divs
1 paragraph on at least 5 html pages (1 paragraph must have at least 6 sentences)
The following CSS properties must be used somewhere in your css styles (use classes and IDs)
- border
- float
- color
- background-color for html page
- background-color for divs
- :hover (use on multiple divs and links)
- margin
- padding
- width
- height
- font-size
- font-family
Picture tags
hyperlinks on text, and at least one hyperlink on an element (like how I made a div a link in the video or make an image a link)

Expert Solution

Note:

Save all files as the same name in answer and put all file and image in the same folder.

All different type of css has been mentioned in html file as comments.

External CSS file

assingment.css
/*for header backgrounf color*/
header {
background-color: #ffffff;
}

/*for wrapping up the base*/
#wrap {
width: 80%;
min-width:700px;
max-width:1024px;
margin-left: auto;
margin-right: auto;
}

/*for navigation bar color and width*/
.navi{
position: sticky;
top: 0;
height: 60px;
width: 100%;
display: flex;
align-items: center;
background: #ffff00;
}

/*for paragraph*/
p{
font-style: italic;
color: #800080;
}
/*for div tag*/
.d{
background-color: #00FFFF;
border: 2px solid black;
}

/*for hovering on div tag*/
.d:hover{
background-color: #ffffff;
}
.navi:hover{
background-color: #ffffff;
}

HTML FIles

page1.html

<!DOCTYPE HTML>
<html>


<div id="wrap">
<head>


<link rel = "stylesheet"
type="text/css" href="assingment.css">


<style>
h1{
text-align: center;
font-size: 200%;
font-family: serif;
color: #000080

}

h2{
       text-align: left;
font-size: 100%;
font-family: serif;
color: #ff0000
       }
</style>

<header>
<h1>This is Assignment First html</h1>

</header>
</head>

<body>

   
   <nav class="navi">
   <a href = "page1.html">Page 1</a>
   <a href = "page2.html">Page 2</a>
   <a href = "page3.html">Page 3</a>
   <a href = "page4.html">Page 4</a>
   <a href = "page5.html">Page 5</a>
   </nav>
<h2> For this sentence internal css has been used</h2>



   <div class = "d">
   <h2>The first paragraph</h2>
   <p>This html page is about css styles</p>
   <p>Here we will learn different types of css</p>
   <p>There are 3 types of css </p>
   <p>First one is inline where we include style attributes in html file itself</p>
   <p>Second is internal we put css code for group in head part</p>
   <p>Third is external where we include a link to an external .css file</p>
</div>

   
   <footer style="font-size: 7;font-style: Bold;color: #003366;">
   Important Links<br>
   <a href="www.youtube.com">Best lecture videos on Css</a><br>
<a href="w3schools.com">Best website for learning Css</a><br>
   <a href="page1.html"><img src="home.png" style="width:20px;height:40px;"></a>
   </footer>

</body>
</div>
</html>

Image used: home.png

Output of Webpage

Note: Here only 1 html page has been included due to time limit. We can create 4 more html files just by changing the text in the paragraph and giving them name page2.html page3.html page4.html and page5.html respectively

venereology answered 2 days ago

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

CSS Write a document wide style block (include the correct HTML tag) to set all <p>...

CSS Write a document wide style block (include the correct HTML tag) to set all <p> tags to be double spaced and justified (not ragged left / right text)

This needs to be written in JavaScript with two files. One HTML file and a JavaScript...

This needs to be written in JavaScript with two files. One HTML file and a JavaScript file. Make an empty HTML file, put three buttons inside the body and an empty main tag below the buttons. The text of the buttons should be "Foo", "Bar", and "FooBar" respectively. Don't put the " in the buttons that's just for clarification in these instructions. Add unique IDs to each button In your JavaScript, get 3 separate references to the buttons using the...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.

Please use HTML and CSS - Create the overlay and popup: Note: this is my original...

Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...

Create a web application for a daily planner in HTML. Please include testing in the files...

Create a web application for a daily planner in HTML. Please include testing in the files and show correct code formatting.

5. Create an HTML file that uses an array to store links for your three favorite...

5. Create an HTML file that uses an array to store links for your three favorite websites. Use a for loop to display each link URL within an alert dialog box. I would like to see the HTML page displaying the message.

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a...

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a bulleted list and 3 paragraphs this can be loren ipsum. Have the information text fade in when the page is done loading. Stagger the animations so that the text that is higher up on the page fades in before. Add three more animations in addition to the ones above including an interval timer based animation, an event based animation click or hover, and an...

Code the following in C++ and make sure to include all three files required at the...

Code the following in C++ and make sure to include all three files required at the end. Hotdogs – The World’s Greatest Cost Effective Wholesome Nutritious Food Due to world food supply scarcity and the burgeoning populations of the world’s countries, your hot stand business is globalizing to satisfy the world’s desire for a cost effective wholesome nutritious food source. Market studies have shown that tens of billions of people are craving for the eponymous hotdog which will result in...