How to make this same webpage using HTML and css properties like display property, float,clear and...

Question

Question

How to make this same webpage using HTML and css properties like display property, float,clear and media queries

Picture Tools lab04 (1).docx - Saved to this PC raw Design Layout References Mailings Review View Help Format Tell me spigotdesign VISUAL DESIGN&WEB DEVELOPMENT FROM PARK CITY UTAH ESIGNDEVELLP SUPPORT HOST THE ADMIN BAR AND SOLUTE PASTINNG 200e WEBSTE TESTING

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Making a Web page through html and css is easy task. You need to study the basics of css and html.

Let us go with HTML basics first:

1. Using html tags like <header> to make a header, <div> to make body of the webpage and <footer> to form a footer.

2. Tags should always have class whick makes it esay to apply css to them.

3. A tag can also have Id. Using an Id with a tag is like giving a unique identity to the tag.

Let us now talk about css:

1. CSS can be written in three forms: inline css, internal css and external css.

2. Inline css is < header style="background-color: #fff"> .We should avoid inline css as it will be hard to make the web page responsive afterwords.

3. Internal css is done in the <style> tag inside <head> tag in html. Internal css is an option of displaying your webpage's styling.

4. The best way of styling your website is through making a Exteranl css. A new sheet is formed with extension .css, and the link of the sheet is done in <head> tag through <link> tag. Example: <link rel="stylesheet" type="text/css" href="style.css">

Moving towards your webpage:

1. Display property- Display property will specify the display behaviour of your we page. Example-

p{display: none;} this will not show any paragraph tags in your web page.

p{display: inline;} this will show the paragraph tags in a line instead of next line.

p{display: block;} this will show the paraghraph tags like block in next line.

p{display: inline-block;} this will show paraghraph tags as blocks that are in a line, means block that is not in a new line but embadded in a line.

Float property- Float property allows a tag to float left or right. If you want your tag to move to left, then use p{float: left;} css property.

Clear property: If you dont want an element to the side of your floating element then use clear.

media queries: media queries are many. These can be used to style the printing screen, style screen to some other devices or both of them.

//HTML code for your page

<!document html>

<html>

<head>

</head>

<body>

</div>

<a>Design</a>

</div>

<a>Layout</a>

</div>

<a>References</a>

</div>

<a>Mailings</a>

</div>

<a>Review</a>

</div>

</div>

</div>

<a>Format</a>

</div>

</div>

</header>

</div>

</body>

</html>

//style.css

html{

overflow-x: hidden;

}

.header{

display: flex;

height: 25px;

width:100%;

background-color: #fff;

padding-left: 3%;

padding-top: 0.5%;

}

.header > div{

width: 10%;

}

body{

background-color: black;

margin: 0px;

}

a{

cursor: pointer;

}

.body{

width:35%;

height: 85%;

background-color: #f5f4f4;

margin-top: 3%;

margin-left: 35%;

padding-top: 1.5%;

}

.div_header{

height:25px;

background-color: #fff;

}

I do not have resources like image, according to the above code this is my result:

Draw Design Layout References uies Review Welp Format Tl

You can create the page just like this.

Add a comment

Answer 2

How to make this same webpage using HTML and css properties like display property, float,clear and...

Homework Answers

Add Answer to:
How to make this same webpage using HTML and css properties like display property, float,clear and...

Post as a guest

Earn Coins

Question 1 To remove the underlining from an <a> element, you can use CSS to set...

Question 1 To remove the underlining from an <a> element, you can use CSS to set...

How to make this same webpage using HTML and css properties like display property, float,clear and...

Homework Answers

Add Answer to: How to make this same webpage using HTML and css properties like display property, float,clear and...

Post as a guest

Earn Coins

Question 1 To remove the underlining from an <a> element, you can use CSS to set...

Question 1 To remove the underlining from an <a> element, you can use CSS to set...

Add Answer to:
How to make this same webpage using HTML and css properties like display property, float,clear and...