facit övningar html och css

css_övningar_html_övning

129 total views, 1 views today

Facit till övningar i html och css. Övningarna till detta facit hittar du här: övningar html och css.
Varsågod, här är övning nummer 1.

1.
<DOCTYPE html>
<html>
<head>
</head>
<body>
</html>

4.
<DOCTYPE html>
<html>
<head>
<link href=”mystyle.css” rel=”stylesheet”  type=”text/css”>
</head>
<body>
</body>
</html>

5.

<DOCTYPE html>
<html>
<head>
<link href=”mystyle.css” rel=”stylesheet”  type=”text/css”>
</head>
<body>
<p>Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p
</p>
</body>
</html>

7.
p  {
color: black;
}

8.

<DOCTYPE html>
<html>
<head>
<link href=”mystyle.css” rel=”stylesheet”  type=”text/css”>
</head>
<body>
<h1> Detta är min h1-rubrik</h1>
<p>Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p
</p>
</body>
</html>

9.

h1 {
text-align: center;
}

p  {
color: black;
}

10.

 

h1 {
text-align: center;
}

#olle {
  color: red;
 font-family: verdana, sans-serif;
font-size: 16px;
}

p  {
color: black;
}

 

 SLUT DEL ETT I ÖVNINGAR HTML OCH CSS

DEL TVÅ

11.

h1 {
text-align: center;
}

#olle {
font-size: 16px;
font-family: verdana, sans-serif;
color: red;
}

p {
color: green;
}

12.

<!DOCTYPE html>
<html>
<head>
<title> css-övningar</title>
<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<h1> Detta är h1-rubriken</h1>
<p> Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är </p>
</body>
</html>

 

13.

<body>
<h1> Detta är h1-rubriken</h1>
<p> Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.. </p>
<p id=”olle”> Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? </p>
</body>
</html>

 

14.

<body>
<h1> Detta är h1-rubriken</h1>
<p> Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i </p>
<h2> Detta är h2-rubriken</h2>
<p id=”olle”> Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? </p>
</body>

15.

<h2> Detta är h2-rubriken</h2>
<p id=”olle”> Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id? Fungerar ditt id?</p>
<h3> Här är rubrik 3</h3>
</body>

</html>

 16.

h1 {
text-align: center;
}

h2,h3 {
color: yellow;
font-size: 20px;
}

17.

h2,h3 {
color: yellow;
font-size: 20px;

margin-left: 50px;
}

18.

body {
background-color: grey ;
}

 19.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

20.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin-left: 150px;
}

</head>
<body>
<h1> Detta är min h1rubrik</h1>
</body>
</html>

 22.

<head>
<style>
body {
background-image: url(”bakgrundsbild.jpg”);
}
h1 {
margin-left: 150px;
}
</style>

23.

<style>
body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: repeat-x;
}

h1 {
margin-left: 150px;
}
</style>

24.

<!DOCTYPE html>
<html>
<head>
<style>
/*body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: repeat-x;
} */
h1 {
margin-left: 150px;
}
</style>
</head>
<body>
<h1> Detta är min h1rubrik</h1>
</body>
-</html>

25.

<body>
<h1> Detta är min h1rubrik</h1>
<p> Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. </p>
</body>

26.

h1 {
margin-left: 150px;
}

p {
text-decoration: line-through;
}

27.

p {
text-decoration: line-through;
text-indent: 70px;
}

28.

<!DOCTYPE html>
<html>
<head>
<style>
/*body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: repeat-x;
} */

h1 {
margin-left: 150px;
text-shadow: 2px 2px red;
}

p {
text-decoration: line-through;
text-indent: 70px;
}

</style>
</head>
<body>
<h1> Detta är min h1rubrik</h1>
<p> Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. </p>
</body>
</html>

 

29.

p {
text-decoration: line-through;
text-indent: 70px;
line-height: 200%;
}

30.

p {
color: green;
font-family: ”Times New Roman”, times, sans-serif;
}

31.

ul.lista1 {
color: white;
list-style-type: disc;
}

32.

<h3> Här är rubrik 3</h3>
<ul class=”lista1″>
<li>hej</li>
<li> då </li>
</ul>
</html>

33.

<body>
<h1> Detta är h1-rubriken</h1>
<p style=”margin-left: 100px; font-size: 20px;”> Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i….

34.

p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p. </p>
<img src=”test.jpg” width=” 100″ height=”100″>
<h2> Detta är h2-rubriken</h2>
<p id=”olle”> An id should be unique within a page, so the id selector is used if you want to select a single, unique element.An id should be unique within a page, so th…

 

35.

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<a href=”https://www.google.se/”>Länk till Google</a>
<h1> Detta är h1-rubriken</h1>
<p style=”margin-left: 100px; font-size: 20px;”> Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta

 

36

p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. </p>
<table>
<tr>
<th>antal</th>
<th> färg </th>
</tr>
<tr>
<td>15</td>
<td>grön</td>
</tr>
</table>
</body>
</html>

 

37

table th, td {
border-collapse: collapse;
border: 1px solid black;
}

 

38. 

td {
height: 60px;
}

table {
width: 50%;
}

39.

td {
height: 60px;
padding-left: 100px;
}

40.

th {
background-color: green;
color: white;
}

41.

svar: <!DOCTYPE html>
<html>
<head>
<style>
/*body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: repeat-x;
} */

div {
background-color: lightgrey;
}

h1 {
margin-left: 150px;
text-shadow: 2px 2px red;
}

 

42.

div {
background-color: lightgrey;
width: 250px;
padding: 40px;
border-style: solid;
height: 150px;
}

 

43. 

#olle {
font-size: 16px;
font-family: verdana, sans-serif;
color: red;
margin: 50px 25px;
}

 

44.

body {
background-color: grey;
}

.first_class {
color: purple;
}

h1 {
text-align: center;
}

h2,h3 {
color: yellow;
font-size: 20px;
margin-left: 50px;

}

#olle {
font-size: 16px;
font-family: verdana, sans-serif;
color: red;
margin: 50px 25px;
}

p {
color: green;
font-family: ”Times New Roman”, times, sans-serif;
}

ul.lista1 {
color: white;
list-style-type: disc;
}

 

45.

<h3> Här är rubrik 3</h3>
<ul class=”lista1″>
<li>hej</li>
<li> då </li>
</ul>
<p class=”first_class”> This is text. This is text. This is text. <br>This is text. This is text. This is text. This is text. This is text. This is text. This is text.<br> This is text. This is text. This is text. This is text. This is text. This is text. This is text.<br> This is text. This is text. This is text. This is text. This is text. This is text. </p>
</body>
</html>

46.

.first_class {
color: purple;
background-color: orange;
width: 550px;
}

47.

</head>
<body>
<a href=”https://www.google.se/?gws_rd=ssl”>Länk till Google</a>
<h1 style=” color:green”> Detta är h1-rubriken</h1>
<p style=”margin-left: 100px; font-size: 20px;”> Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i p.Detta är text i

48

s text.<br> This is text. This is text. This is text. This is text. This is text. This is text. </p>
<p> this is even more text. this is even more text.this is even more text.<br>this is even more text.this is even more text.this is even more text.this is even more text.<br>this is even more text.this is even more text.this is even more text.this is even more text.<br>this is even more text.</p>
</body>
</html>

49.

s text. </p>
<p style =”color: #FF00FF”> this is even more text. this is even more text.this is even more text.<br>this is even more text.this is even more text.this is even more text.this is even more text.<br>this is even more text.this is even more text.this is even more text.this is even more text.<br>this is even more text.</p>
</body>
</html>

50.

#urban {
background-color: rgb(0,176,238);
color: white;
width: 500px;
}

51,

body {
background-color: grey;
background-image: url(”blue_sky.jpg”);
}

52.

body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: repeat-x;
}

53.

body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: repeat-x;
background-position: center bottom;
height: 1000px;
}

54.

body {

background-image: url(”bakgrundsbild.jpg”);
background-repeat: no-repeat;
background-position: center bottom;
height: 1000px;
}

55.

p {
text-decoration: none;
text-indent: 70px;
line-height: 200%;
}

56.

div {
background-color: lightgrey;
width: 250px;
padding: 40px;
border-style: solid;
height: 150px;
}

57.

Så här bör din html2.html-fil se ut.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(”bakgrundsbild.jpg”);
background-repeat: no-repeat;
background-position: center bottom;
height: 1000px;
}

div {
background-color: lightgrey;
width: 250px;
padding: 40px;
border-style: solid;
height: 150px;
}

div2 {
color: #DC143C);
background-color: #00FF00;
width: 600px;
height 300px;
}

h1 {
margin-left: 150px;
text-shadow: 2px 2px red;}

p {
text-decoration: none;
text-indent: 70px;
line-height: 200%;
}

table th, td {
border-collapse: collapse;
border: 1px solid black;
height: 60px;
}

table {
width: 50%;
}

td {
padding-left: 100px;
}

th {
background-color: green;
color: white;
}

</style>
</head>
<body>
<h1> Detta är min h1rubrik</h1>
<p> Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. </p>
<p =”div2″> Här är div text. Här är div textHär är div textHär är div textH <br>är är div textHär är div textHär är div textHär är div textHär är div textHär är div text <br>Här är div textHär är div textHär är div text</p>
<table>
<tr>
<th>antal</th>
<th>färg </th>
</tr>
<tr>
<td>15</td>
<td>grön</td>
</tr>
</table>
<div> </div>
</body>
</html>

58.

div2 {
color: #DC143C;
background-color: #00FF00;
width: 600px;
height 300px;
line-height: 220%;
}

59.

div2 {
color: #DC143C;
background-color: #00FF00;
width: 600px;
height 300px;
line-height: 220%;
font-family: Arial, Helvetica, sans-serif;
}

60.

div2 {
color: #DC143C;
background-color: #00FF00;
width: 600px;
height 300px;
line-height: 220%;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}

61.

valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. </p>
<h2 style=”font-size: 50px”>Här är rubrik 2</h2>
<div2> Här är div text. Här är div textHär är div textHär är div textH <br>är är div textHär är div textHär är div textHär är div textHär är div textHär är div text <br>Här är div textHär är div textHär är div text</div2>
<table>
<tr>

62.

alfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. Detta är valfri text i p. </p>
<h2 style=”font-size: 3.5em”>Här är rubrik 2</h2>
<div2> Här är div text. Här är div textHär är div textHär är div textH <br>är är div textHär är div textHär är div textHär är div textHär är div textHär är div text <br>Här är div textHär är div textHär är div text</div2>
<table

63.

<td>grön</td>
</tr>
</table>
<div> </div>
<a href=”https://startpage.com/sve/?”>Denna länk går till startpage</a>
</body>
</html>

64.


<style>
a:link {
background-color: yellow;
}

 

65.

<style>
a:link, a:visited {
display: block;
font-weight: bold;
color: #ffffff;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}

66.

</tr>
</table>
<div> </div>
<a href=”https://startpage.com/sve/?”>Denna länk går till startpage</a>
<ul>
<li>kaffe</lli>
<li>mjölk</li>
<li>socker</li>
</ul>
</body>
</html>

67.

}
table {
width: 50%;
border-collapse: collapse;
}

68.

td {
padding-left: 100px;
border-width: 5px;
}

69.

td {
padding-left: 100px;
border-width: 5px;
border-color: rgb(0,255,255);
}

70.

div {
background-color: lightgrey;
width: 250px;
padding: 40px;
border-style: solid;
height: 150px;
margin-top: 75px;
}

71.
.first_class {
color: purple;
background-color: orange;
width: 550px;
padding: 50px 25px;
}

 

 

 

 

 

 

 

 

 

Share

Kommentera