8/16/2019 Membuat Layout Web Desain Dengan CSS

1/5

1 | S M K M E D I A I N F O R M A T I K A   

PEMROGRAMAN WEBMembuat Layout Web Desain Dengan CSS

1. 

LAYOUT SATU

TAG HTML Simpan dengan nama layout1.html

1. 

2.  3.  Layout CSS 14.  5.  6.  7.

 

8.

 

HEADER9.  10.  PAGE

11. 

RIGHT MENU

12.  13.  FOOTER14.  15.

 

16. 

TAG CSS Simpan dengan nama css1.css

1.  body {2.  background-color: #FF0;3.  }4.  #wrapper {

5. 

width: 980px;6. 

margin-top: 0px;7.  margin-right: auto;8.  margin-bottom: 0px;9.  margin-left: auto;10. }11. #wrapper #header {12.  background-color: #F60;13.  float: left;14.

 

height: 150px;15.

 

width: 980px;16. }17. #wrapper #content {

18. 

background-color: #FFF;19.  float: left;20.  width: 980px;

HEADER

RIGHT MENUPAGE

FOOTER

WRAPPER

      C      O      N      T      E      N      T

8/16/2019 Membuat Layout Web Desain Dengan CSS

2/5

2 | S M K M E D I A I N F O R M A T I K A   

21. 

}22. #wrapper #content .page {23.  padding: 5px;24.  float: left;25.  width: 790px;26. }27. #wrapper #content .right-menu {28.  padding: 5px;29.

 

float: left;

30. 

width: 170px;31.  background-color: #069;32. }33. #wrapper #footer {34.  padding: 5px;35.  float: left;36.

 

width: 970px;37.  background-color: #F60;38. }

2. 

LAYOUT DUA

TAG HTML Simpan dengan nama layout2.html

1.  2.  3.  Layout CSS 24.  5.

 

6. 

7.  8.  9.  LOGO10.  BANNER11.  12.  MENU13.

 

14.

 

LEFT MENU15.  PAGE16.  17.  FOOTER

18. 

19.  20.

 

BANNER

MENU

LEFT MENU

LOGO

PAGE

FOOTER

WRAPPER

      H      E      A      D      E      R

      C

      O      N      T      E      N      T

8/16/2019 Membuat Layout Web Desain Dengan CSS

3/5

3 | S M K M E D I A I N F O R M A T I K A   

TAG CSS Simpan dengan nama css2.css

1.  body {2.  background-color: #FF0;3.  }4.  #wrapper {5.  width: 980px;6.  margin-top: 0px;7.  margin-right: auto;8.

 

margin-bottom: 0px;

9. 

margin-left: auto;10. }11. #wrapper #header {12.  background-color: #F90;13.  float: left;14.  height: 150px;15.

 

width: 980px;16. }17. #wrapper #header .logo {18.  padding: 5px;19.  float: left;20.  height: 140px;21.  width: 170px;

22. 

}23.

 

#wrapper #header .banner {24.

 

padding: 5px;25.  float: left;26.  height: 140px;27.  width: 780px;28. }29. #wrapper #menu {30.

 

background-color: #09C;31.

 

padding: 5px;32.  float: left;33.  width: 970px;

34. 

}35. #wrapper #content {36.  background-color: #FFF;37.  float: left;38.

 

width: 970px;39.

 

padding: 5px;40. }41. #wrapper #content .left-menu {42.  background-color: #09C;43.  padding: 5px;44.  float: left;45.

 

width: 170px;

46. 

}47. #wrapper #content .page {48.  padding: 5px;49.  float: left;50.  width: 780px;51. }52. #wrapper #footer {53.  background-color: #F90;54.

 

padding: 5px;55.  float: left;56.  width: 970px;57.  text-align: center;58. }

8/16/2019 Membuat Layout Web Desain Dengan CSS

4/5

4 | S M K M E D I A I N F O R M A T I K A   

3. 

LAYOUT TIGA

TAG HTML Simpan dengan nama layout3.html

1.  2.  3.  Layout CSS 24.

 

5.  6.  7.  8.  9.  LOGO10.

 

BANNER11.  IKLAN12.

 

13.  MENU14.  15.  LEFT MENU16.  PAGE17.  RIGHT MENU18.  19.

 

BOTTOM MENU20.  FOOTER21. 

22. 

23. 

TAG CSS Simpan dengan nama css3.css

1.  body {2.  background-color: #FF0;3.  }4.

 

#wrapper {5.  width: 980px;6.  margin-top: 0px;7.  margin-right: auto;8.  margin-bottom: 0px;

9. 

margin-left: auto;10. }11.

 

#wrapper #header {12.  background-color: #F90;

BANNER

MENU

LEFT MENU

LOGO

PAGE

BOTTOM MENU

FOOTER

WRAPPER

IKLAN

RIGHT MENU

      H      E      A      D      E      R

      C      O      N      T      E      N      T

8/16/2019 Membuat Layout Web Desain Dengan CSS

5/5

5 | S M K M E D I A I N F O R M A T I K A   

13. 

float: left;14.  height: 150px;15.  width: 980px;16. }17. #wrapper #header .logo {18.  padding: 5px;19.  float: left;20.  height: 140px;21.

 

width: 170px;

22. 

}23. #wrapper #header .banner {24.  padding: 5px;25.  float: left;26.  height: 140px;27.  width: 610px;28.

 

}29. #wrapper #header .iklan {30.  padding: 5px;31.  float: left;32.  height: 140px;33.  width: 170px;34. }

35. 

#wrapper #menu {36.

 

background-color: #09C;37.

 

padding: 5px;38.  float: left;39.  width: 970px;40. }41. #wrapper #content {42.  background-color: #FFF;43.

 

float: left;44.

 

width: 980px;45. }46. #wrapper #content .left-menu {

47. 

padding: 5px;48.  float: left;49.  width: 170px;50. }51.

 

#wrapper #content .page {52.

 

padding: 5px;53.  float: left;54.  width: 610px;55. }56. #wrapper #content .right-menu {57.  padding: 5px;58.

 

float: left;

59. 

width: 170px;60. }61. #wrapper #bottom-menu {62.  background-color: #F90;63.  padding: 5px;64.  float: left;65.  width: 970px;66. }67.

 

#wrapper #footer {68.  background-color: #09C;69.  padding: 5px;70.  float: left;71.  width: 970px;72.

 

text-align:center;73.

 

}