script css website sekolah

#art-main, table
{
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
   text-align: justify;
}
html, body
{
   height:100%;
}
#art-main
{
   position: relative;
   z-index: 0;
   width: 100%;
   min-height: 100%;
   left: 0;
   top: 0;
   cursor:default;
   overflow:hidden;
}
body
{
   padding: 0;
   margin:0;
   width: 1349px;
   min-width: 1349px;
   color: #0F2A38;
      background-color: #C5C5AF;
   background-image: url("images/furley_bg.png");
   background-repeat: repeat;
}
.cleared
{
   display:block;
   clear: both;
   float: none;
   margin: 0;
   padding: 0;
   border: none;
   font-size: 0;
   height:0;
   overflow:hidden;
}
.reset-box
{
   overflow:hidden;
   display:table;
}
form
{
   padding: 0 !important;
   margin: 0 !important;
}
table.position
{
   position: relative;
   width: 100%;
   table-layout: fixed;
}
.art-box, .art-box-body {
   margin:0 auto;
   position:relative;
}
.art-box:before, .art-box:after, .art-box-body:before, .art-box-body:after {
   position:absolute;
   top:0;
   bottom:0;
   content:' ';
   background-repeat: no-repeat;
   line-height:0;
}
.art-box:before,.art-box-body:before{
   left:0;
}
.art-box:after,.art-box-body:after{
   right:0;
}
.art-box:before {
   overflow:hidden;
   background-position: bottom left;
   direction: ltr;
   z-index:-3;
}
.art-box:after {
   background-position: bottom right;
   z-index:-3;
}
.art-box-body:before, .art-box-body:after {
   background-repeat:repeat-y;
}
.art-box-body:before {
   background-position: top left;
   z-index:-3;
}
.art-box-body:after {
   background-position: top right;
   z-index:-3;
}
.art-box .art-box:before, .art-box .art-box:after, .art-box-body .art-box-body:before, .art-box-body .art-box-body:after {
   z-index:-2;
}
.art-box .art-box .art-box:before, .art-box .art-box .art-box:after, .art-box-body .art-box-body .art-box-body:before, .art-box-body .art-box-body .art-box-body:after {
   z-index:-1;
}
.art-bar {
   position:relative;
}
.art-bar:before, .art-bar:after {
   position:absolute;
   top:0;
   bottom:0;
   content:' ';
   background-repeat:repeat;
   z-index:-1;
}
.art-bar:before {
   left:0;
   background-position: top left;
}
.art-bar:after {
   right:0;
   background-position: top right;
}
/* End Bar */
li h1, .art-postcontent li h1, .art-blockcontent-body li h1
{
   margin:1px;
}
li h2, .art-postcontent li h2, .art-blockcontent-body li h2
{
   margin:1px;
}
li h3, .art-postcontent li h3, .art-blockcontent-body li h3
{
   margin:1px;
}
li h4, .art-postcontent li h4, .art-blockcontent-body li h4
{
   margin:1px;
}
li h5, .art-postcontent li h5, .art-blockcontent-body li h5
{
   margin:1px;
}
li h6, .art-postcontent li h6, .art-blockcontent-body li h6
{
   margin:1px;
}
li p, .art-postcontent li p, .art-blockcontent-body li p
{
   margin:1px;
}
div.art-header
{
   margin: 0 auto;
   position: relative;
   z-index: -5;
   width:995px;
   height: 225px;
   margin-top: 0;
   margin-bottom: 0;
}
.art-header-position
{
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
}
.art-header-wrapper
{
   position: relative;
   top:0;
   width:1000px;
   margin:0 auto;
}
.art-header-inner
{
   position: relative;
   margin: 0 6px;
}
.art-header:before
{
   position: absolute;
   display:block;
   content:' ';
   z-index:-2;
   top: 0;
   width:100%;
   height: 225px;
   background-image: url("images/bg.jpg");
   background-repeat: no-repeat;
   background-position:top left;
}
div.art-headerobject
{
   display: block;
   left: 67%;
   margin-left: -263px;
   position: absolute;
   top: 0;
   width: 394px;
   height: 225px;
}
#art-flash-area
{
   position: absolute;
   top: 0;
   left: 0;
   width: 988px;
   height: 225px;
   overflow: hidden;
}
#art-flash-container
{
   height: 247px;
   top: -10px;
   position: absolute;
   width: 988px;
   left: 50%;
   margin-left:-494px;
}
#art-flash-container div.art-flash-alt
{
   position: relative;
   width: 110px;
   height: 30px;
   margin: 0 auto;
   top: 10px;
}
div.art-logo
{
   display: block;
   position: absolute;
   top: 93px;
   left: 0;
   margin-left: 12px;
}
.art-logo-name
{
   display: block;
   text-align: left;
   font-weight: bold;
   padding: 0;
   margin: 0;
   color: #0D2430 !important;
}
.art-logo-name a,
.art-logo-name a:link,
.art-logo-name a:visited,
.art-logo-name a:hover
{
   font-weight: bold;
   padding: 0;
   margin: 0;
   color: #0D2430 !important;
}
.art-logo-text
{
   display: block;
   text-align: left;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   font-size: 14px;
   padding: 0;
   margin: 0;
   color: #0D2430 !important;
}
.art-logo-text a,
.art-logo-text a:link,
.art-logo-text a:visited,
.art-logo-text a:hover
{
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   font-size: 14px;
   padding: 0;
   margin: 0;
   color: #0D2430 !important;
}
#headline, #slogan
{
   display: block;
   min-width: 150px;
   text-align: left;
}
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
   outline: none;
   position: relative;
   z-index: 11;
}
ul.art-hmenu, ul.art-hmenu ul
{
   display: block;
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}
ul.art-hmenu li
{
   margin: 0;
   padding: 0;
   border: 0;
   display: block;
   float: left;
   position: relative;
   z-index: 5;
   background: none;
}
ul.art-hmenu li:hover{
   z-index: 10000;
   white-space: normal;
}
ul.art-hmenu li li{
   float: none;
   width: auto;
}
ul.art-hmenu li:hover>ul {
   visibility: visible;
   top: 100%;
}
ul.art-hmenu li li:hover>ul {
   top: 0;
   left: 100%;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}
ul.art-hmenu, ul.art-hmenu ul {
   min-height: 0;
}
ul.art-hmenu ul
{
   visibility: hidden;
   position: absolute;
   z-index: 10;
   left: 0;
   top: 0;
   padding: 10px 30px 30px 30px;
   margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-left-to-right {
   right: auto;
   left: 0;
   margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-right-to-left {
   left: auto;
   right: 0;
   margin: -10px -30px 0 0;
}
ul.art-hmenu ul ul
{
   padding: 30px 30px 30px 10px;
   margin: -30px 0 0 -10px;
   margin-left: -11px;
   z-index: -1;
}
ul.art-hmenu ul ul.art-hmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 30px 30px 30px 10px;
   margin: -30px 0 0 -10px;
   margin-left: -11px;
}
ul.art-hmenu ul ul.art-hmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 30px 10px 30px 30px;
   margin: -30px -10px 0 0;
   margin-right: -11px;
}
ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
   right: auto;
   left: 100%;
}
ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
   left: auto;
   right: 100%;
}
ul.art-hmenu{
   position:relative;
   padding: 6px 6px 12px 6px;
   float: left;
}
.art-nav
{
   width:1000px;
   margin:0 auto;
   min-height: 50px;
   z-index: 100;
   margin-top: 3px;
   margin-bottom: -14px;
}
.art-nav:before, .art-nav:after{
   background-image: url("images/nav.png");
}
.art-nav:before{
   right: 11px;
}
.art-nav:after{
   width: 11px;
}
.art-nav-outer{
   position:absolute;
   width:100%;
}
.art-nav-wrapper
{
   position: relative;
   width:1000px;
   margin:0 auto;
}
.art-nav-inner{
   margin: 0 13px;
}
ul.art-hmenu>li>a
{
   position: relative;
   display: block;
   height: 32px;
   cursor: pointer;
   text-decoration: none;
   color: #E0E0E0;
   padding: 0 18px;
   line-height: 32px;
   text-align: center;
}
ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   background-image: url("images/menuitem.png");
}
ul.art-hmenu>li>a:before
{
   left: 0;
   right: 1px;
   background-position: top left;
}
ul.art-hmenu>li>a:after
{
   width: 1px;
   right: 0;
   background-position: top right;
}
.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
   font-size: 18px;
   text-align: left;
   text-decoration: none;
}
ul.art-hmenu>li>a.active:before {
   background-position: bottom left;
}
ul.art-hmenu>li>a.active:after {
   background-position: bottom right;
}
ul.art-hmenu>li>a.active {
   color: #fff;
}
ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before {
   background-position: center left;
}
ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after {
   background-position: center right;
}
ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{
   color: #000000;
}
ul.art-hmenu>li:before
{
   position:absolute;
   display: block;
   content:' ';
   top:0;
   left:  -7px;
   width:7px;
   height: 32px;
   background: url("images/menuseparator.png") center center no-repeat;
}
ul.art-hmenu>li {
   margin-left:7px;
}
ul.art-hmenu>li:first-child {
   margin-left:0;
}
ul.art-hmenu>li:first-child:before{
   display:none;
}
.art-hmenu ul a
{
   display: block;
   white-space: nowrap;
   height: 25px;
   background-image: url("images/subitem.png");
   background-position: left top;
   background-repeat: repeat-x;
   border-width: 1px;
   border-style: solid;
   border-top-width: 0;
   border-color: #56A7D2;
   min-width: 7em;
   text-align: left;
   text-decoration: none;
   line-height: 25px;
   color: #1F1F1F;
   font-size: 11px;
   margin:0;
   padding: 0 12px;
}
.art-hmenu ul>li:first-child>a
{
   border-top-width: 1px;
}
.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active
{
   text-align: left;
   text-decoration: none;
   line-height: 25px;
   color: #1F1F1F;
   font-size: 11px;
   margin:0;
   padding: 0 12px;
}
.art-hmenu ul li a:hover
{
   color: #000000;
   background-position: left bottom;
   border-color: #82BEDE;
   border-top-width: 1px !important;
}
.art-hmenu ul li a.art-hmenu-before-hovered
{
   border-bottom-width: 0 !important;
}
.art-hmenu ul li:hover>a
{
   color: #000000;
   background-position: left bottom;
   border-color: #82BEDE;
   border-top-width: 1px !important;
}
.art-sheet
{
   max-width:1000px;
   margin-top: 5px;
   margin-bottom: -5px;
   cursor:auto;
   width: 1000px;
}
.art-sheet-body
{
   padding:13px;
   min-width:16px;
   min-height:16px;
   padding-top:13px;
   padding-bottom:13px;
}
.art-sheet:before, .art-sheet:after
{
   content: url("images/sheet_t.png");
   font-size: 0;
   background-image: url("images/sheet_b.png");
}
.art-sheet:after{
   clip:rect(auto, auto, auto, 979px);
}
.art-sheet:before,.art-sheet-body:before{
   right:21px;
}
.art-sheet-body:after{
   width: 21px;
   top:21px;
   bottom:21px;
   background-image:url("images/sheet.png");
}
.art-sheet-body:before{
   top:21px;
   bottom:21px;
   background-image:url("images/sheet.png");
}
.art-layout-wrapper
{
   position:relative;
   margin:0 auto 0 auto;
}
.art-content-layout
{
   display: table;
   width:100%;
   table-layout: fixed;
   border-collapse: collapse;
}
.art-content-layout-row {
   display: table-row;
}
.art-layout-cell
{
   display: table-cell;
   vertical-align: top;
}
.art-block
{
   max-width:974px;
   margin: 5px;
}
.art-block-body
{
   padding:5px;
   min-width:26px;
   min-height:26px;
}
.art-block:before, .art-block:after
{
   content: url("images/block_t.png");
   font-size: 0;
   background-image: url("images/block_b.png");
}
.art-block:after{
   clip:rect(auto, auto, auto, 956px);
}
.art-block:before,.art-block-body:before{
   right:18px;
}
.art-block-body:after{
   width: 18px;
   top:18px;
   bottom:18px;
   background-image:url("images/block.png");
}
.art-block-body:before{
   top:18px;
   bottom:18px;
   background-image:url("images/block.png");
}
div.art-block img
{
  border-width: 1px;
   border-color: #C7C7C7;
   border-style: solid;
   margin: 10px;
}
.art-blockheader {
   margin-bottom: 2px;
   min-height: 38px;
   line-height:38px;
}
.art-blockheader:before, .art-blockheader:after{
   background-image: url("images/blockheader.png");
}
.art-blockheader:before{
   right: 25px;
}
.art-blockheader:after{
   width: 25px;
}
.art-blockheader .t
{
   min-height: 38px;
   line-height:38px;
   color: #000000;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   font-size: 14px;
   margin:0;
   padding: 0 10px 0 31px;
   white-space: nowrap;
}
.art-blockheader .t a,
.art-blockheader .t a:link,
.art-blockheader .t a:visited,
.art-blockheader .t a:hover,
.art-blockheader .t a:category
{
   color: #000000;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif, Comic;
   font-size: 14px;
}
.art-blockcontent
{
   max-width:1000px;
}
.art-blockcontent-body
{
   padding:5px;
   color: #0F2A38;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif, Comic;
   font-size: 12px;
}
.art-blockcontent-body table,
.art-blockcontent-body li,
.art-blockcontent-body a,
.art-blockcontent-body a:link,
.art-blockcontent-body a:visited,
.art-blockcontent-body a:hover,
.art-blockcontent-body a:category
{
   color: #0F2A38;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif, Comic;
   font-size: 12px;
}
.art-blockcontent-body p
{
   margin: 0 5px;
}
.art-blockcontent-body a, .art-blockcontent-body a:link
{
   color: #A22101;
   text-decoration: underline;
}
.art-blockcontent-body a:visited, .art-blockcontent-body a.visited
{
   color: #525252;
   text-decoration: none;
}
.art-blockcontent-body a:hover, .art-blockcontent-body a.hover
{
   color: #D52B01;
   text-decoration: underline;
}
.art-blockcontent-body a:category, .art-blockcontent-body a.category
{
   color: #D52B01;
   text-decoration: underline;
}
.art-blockcontent-body ul li
{
   font-size: 13px;
   line-height: 125%;
   color: #0F2A38;
   margin: 2px;
   padding: 0 0 0 0 2px;
}
span.art-button-wrapper>a.art-button,
span.art-button-wrapper>a.art-button:link,
span.art-button-wrapper>input.art-button,
span.art-button-wrapper>button.art-button
{
   text-decoration: none;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: bold;
   font-size: 12px;
   text-transform: uppercase;
   position:relative;
   top:0;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
   color: #292929 !important;
   width: auto;
   outline: none;
   border: none;
   background: none;
   line-height: 32px;
   height: 32px;
   margin: 0 !important;
   padding: 0 19px !important;
   overflow: visible;
   cursor: pointer;
   text-indent: 0;
}
.art-button img, span.art-button-wrapper img
{
   margin: 0;
   vertical-align: middle;
}
span.art-button-wrapper
{
   vertical-align: middle;
   display: inline-block;
   position: relative;
   height: 32px;
   overflow: hidden;
   white-space: nowrap;
   text-indent: 0;
   width: auto;
   max-width:974px;
   margin: 0;
   padding: 0;
   z-index: 0;
}
.firefox2 span.art-button-wrapper
{
   display: block;
   float: left;
}
input, select, textarea
{
   vertical-align: middle;
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: bold;
   font-size: 12px;
   text-transform: uppercase;
}
div.art-block select
{
   width:96%;
}
span.art-button-wrapper.hover>.art-button, span.art-button-wrapper.hover>a.art-button:link
{
   color: #0E2734 !important;
   text-decoration: none !important;
}
span.art-button-wrapper.active>.art-button, span.art-button-wrapper.active>a.art-button:link
{
   color: #380B00 !important;
}
span.art-button-wrapper>span.art-button-l, span.art-button-wrapper>span.art-button-r
{
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: 0;
   padding: 0;
   background-image: url("images/button.png");
   background-repeat: no-repeat;
}
span.art-button-wrapper>span.art-button-l
{
   left: 0;
   right: 12px;
   background-position: top left;
}
span.art-button-wrapper>span.art-button-r
{
   width: 12px;
   right: 0;
   background-position: top right;
}
span.art-button-wrapper.hover>span.art-button-l
{
   background-position: center left;
}
span.art-button-wrapper.hover>span.art-button-r
{
   background-position: center right;
}
span.art-button-wrapper.active>span.art-button-l
{
   background-position: bottom left;
}
span.art-button-wrapper.active>span.art-button-r
{
   background-position: bottom right;
}
span.art-button-wrapper input
{
   float: none !important;
}
.art-post
{
   max-width:974px;
   margin: 5px;
}
.art-post-body
{
   padding:21px;
}
.art-post:before, .art-post:after
{
   content: url('images/post_t.png');
   font-size: 0;
   background-image: url("images/post_b.png");
}
.art-post:after{
   clip:rect(auto, auto, auto, 965px);
}
.art-post:before,.art-post-body:before{
   right:9px;
}
.art-post-body:after{
   width: 9px;
   top:9px;
   bottom:9px;
   background-image:url("images/post.png");
}
.art-post-body:before{
   top:9px;
   bottom:9px;
   background-image:url("images/post.png");
}
a img
{
   border: 0;
}
.art-article img, img.art-article, .art-block img, .art-footer img
{
   border-color: #C7C7C7;
   border-style: solid;
   border-width: 1px;
}
.art-metadata-icons img
{
   border: none;
   vertical-align: middle;
   margin: 2px;
}
.art-article table, table.art-article
{
   border-collapse: collapse;
   margin: 1px;
}
.art-post .art-content-layout-br
{
   height: 0;
}
.art-article th
{
   padding: 2px;
   border: solid 1px #B5B5B5;
   vertical-align: top;
   text-align: left;
}
.art-article th
{
   text-align: center;
   vertical-align: middle;
   padding: 7px;
}
pre
{
   overflow: auto;
   padding: 0.1em;
}
#preview-image
{
   float: left;
   }
.preview-cms-logo
{
   border: 0;
   margin: 1em 1em 0 0;
   float: left;
}
.preview-sharepoint-logo
{
   border: 0;
   margin: 5px;
   float: left;
}
.menu_content
   {
    background-image: url("images/depan.jpg");
    background-repeat: no-repeat;
    background-position:top center;
    margin: 5px;
    width: 510px;
    height: 280px;
   }
.art-footer
{
   position: relative;
   margin-top:0;
   margin-bottom:0;
   width: 100%;
}
.art-footer-body
{
   position:relative;
   padding: 10px;
  color: #000;
 font-size: 18px;
}
.art-footer-body ul li
{
   font-size: 13px;
   line-height: 125%;
   color: #0D2430;
   margin: 5px 0 0 5px;
   padding: 0 0 0 13px;
}
.art-footer-body:before
{
   position: absolute;
   content:' ';
   z-index:-2;
   left:0;
   right:0;
   top:0;
   bottom:0;
   background-image: url("images/footer.png");
   background-position:bottom left;
}
.art-footer-body .art-rss-tag-icon
{
   position: absolute;
   left:   6px;
   bottom:10px;
   z-index:1;
}
.art-rss-tag-icon
{
   display: block;
   height: 32px;
   width: 32px;
   cursor: default;
}
.art-footer-text p
{
   padding:0;
   margin:0;
   text-align: center;
}
.art-footer-body a,
.art-footer-body a:link,
.art-footer-body a:visited,
.art-footer-body a:hover,
.art-footer-body td,
.art-footer-body th,
.art-footer-body caption
{
   color: #1F1F1F;
   font-size: 11px;
}
.art-footer-text
{
   min-height: 32px;
   padding-left: 10px;
   padding-right: 10px;
   text-align: center;
}
.art-footer-body a,
.art-footer-body a:link
{
   color: #1F5775;
   text-decoration: none;
}
.art-footer-body a:visited
{
   color: #4A4A4A;
}
.art-footer-body a:hover
{
   color: #297299;
   text-decoration: underline;
}
div.art-footer img
{
   margin: 10px;
}/* end Footer */
/* begin PageFooter */
.art-page-footer,
.art-page-footer a,
.art-page-footer a:link,
.art-page-footer a:visited,
.art-page-footer a:hover
{
   font-family: Arial;
   font-size: 10px;
   letter-spacing: normal;
   word-spacing: normal;
   font-style: normal;
   font-weight: normal;
   text-decoration: underline;
   color: #1C4E69;
}
.art-page-footer
{
   position: relative;
   z-index: 10;
   padding: 1em;
   text-align: center;
   text-decoration: none;
   color: #424242;
}
.art-content-layout .art-sidebar1
{
   width: 200px;
}
.art-content-layout .art-sidebar1:before
{
   position: absolute;
   z-index: -2;
   direction: ltr;
   left:   0;
   bottom: 0;
   top: 0;
   content: ' ';
   overflow: hidden;
   display: block;
   background-image: url("images/sidebar_bg.png");
   width: 200px;
}
.art-content-layout .art-sidebar2
{
   width: 200px;
}
.art-content-layout .art-sidebar2:before
{
   position: absolute;
   z-index: -2;
   direction: ltr;
   right:   0;
   bottom: 0;
   top: 0;
   content: ' ';
   overflow: hidden;
   display: block;
   background-image: url("images/sidebar_bg.png");
   width: 200px;
}

script html website sekolah

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SMP Negeri 1 Sampang</title>
    <link rel="stylesheet" href="desainku.css" type="text/css" media="screen" />
</head>
<body>
<div id="art-main">
    <div class="cleared reset-box">
</div>
<div class="art-header">
        <div class="art-header-position">
            <div class="art-header-wrapper">
                <div class="cleared reset-box">
</div>
<div class="art-header-inner">
                <div class="art-headerobject">
</div>
<div class="art-logo">
                                </div>
</div>
</div>
</div>
</div>
<div class="cleared reset-box">
</div>
<div class="art-bar art-nav">
<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
 <ul class="art-hmenu">
<li>
   <a href="./" class="active">Home</a>
  </li>
<li>
   <a href="#">Profil Sekolah</a>
   <ul>
<li><a href="./?pages=bacaartikel&id=1">Sambutan Kepala Sekolah</a></li>
<li><a href="./?pages=bacaartikel&id=2">Sejarah dan Visi Misi</a></li>
<li><a href="./?pages=bacaartikel&id=3">Program & Kegiatan</a></li>
<li><a href="./?pages=bacaartikel&id=4">Sarana & Prasarana</a></li>
</ul>
</li>
<li>
   <a href="#">Pendidik dan Tenaga Pendidik</a>
   <ul>
<li><a href="./?pages=bacaartikel&id=5">Struktur Organisasi</a></li>
<li><a href="./?pages=bacaartikel&id=6">Kepala Sekolah</a></li>
<li><a href="./?pages=bacaartikel&id=7">Komite Sekolah</a></li>
<li><a href="./?pages=dataguru">Data Guru</a></li>
<li><a href="./?pages=datatu">Data Tata Usaha</a></li>
</ul>
</li>
<li>
   <a href="#">Siswa</a>
    <ul>
<li><a href="./?pages=bacaartikel&id=8">Ruang Siswa</a></li>
<li><a href="./?pages=bacaartikel&id=9">OSIS</a></li>
<li><a href="./?pages=bacaartikel&id=10">Pramuka</a></li>
<li><a href="./?pages=bacaartikel&id=11">Ekstrakulikuler</a></li>
<li><a href="./?pages=bacaartikel&id=12">Beasiswa</a></li>
<li><a href="./?pages=bacaartikel&id=13">E-learning</a></li>
</ul>
</li>
<li><a href="./?pages=psdb2017">PSDB Online 2017</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cleared reset-box">
</div>
<div class="art-box art-sheet">
        <div class="art-box-body art-sheet-body">
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-sidebar1">
      <div class="art-box art-block">
       <div class="art-box-body art-block-body">
          <div class="art-bar art-blockheader">
           <h3 class="t">
Main Menu</h3>
</div>
<div class="art-box art-blockcontent">
           <div class="art-box-body art-blockcontent-body">
          <ul>
<li class="parent">
       <a href="./?pages=berita">
         <span>Berita</span>
       </a>
        </li>
<li>
       <a href="./?pages=gallery_kegiatan">
         <span>Gallery Kegiatan</span>
       </a>
        </li>
<li>
       <a href="./?pages=prestasi">
         <span>Prestasi</span>
       </a>
        </li>
</ul>
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
</div>
<div class="art-box art-block">
       <div class="art-box-body art-block-body">
          <div class="art-bar art-blockheader">
           <h3 class="t">
Mata Pelajaran</h3>
</div>
<div class="art-box art-blockcontent">
           <div class="art-box-body art-blockcontent-body">
              <ul>
<li class="active"><a href="./?pages=bacaartikel&id=14">Bahasa Indonesia</a></li>
<li class="parent"><a href="./?pages=bacaartikel&id=15">Matematika</a></li>
<li><a href="./?pages=bacaartikel&id=16">IPA</a></li>
<li><a href="./?pages=bacaartikel&id=17">IPS</a></li>
<li><a href="./?pages=bacaartikel&id=18">Bahasa Inggris</a></li>
<li class="visited"><a href="./?pages=bacaartikel&id=19">Seni Budaya</a></li>
<li class="hover"><a href="./?pages=bacaartikel&id=20">PKN</a></li>
</ul>
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
<div class="art-layout-cell art-content">
       <div class="art-box art-post">
         <div class="art-box-body art-post-body">
        <div class="art-post-inner art-article">
<div class="menu_content">
</div>
<p>
<h4>VISI :<br></h4>
<p>"Dengan iman, taqwa dan akhlak mulia menuju prestasi yang unggul"<br></p>
<h4>MISI :<br></h4>
1. Mewujudkan pendidikan terhadap ajaran agama yang dianut sehingga menjadi sumber kearifan dalam bertindak.<br>
2. Mewujudkan pendidik dan tenaga pendidikan yang profesional dan berdaya saing tinggi.<br>
3. Mewujudkan proses pembelajaran yang PAIKEM dan bimbingan secara efektif, sehingga setiap siswa dapat berkembang secara optimal dan meemiliki kompetensi lulusan yang tinggi.<br>
4. Mewujudkan fasilitas sekolah yang relevan, mutakhir dan berwawasan kedepan.<br>
5. Mewujudkan semangat untuk dapat berpretasi secara intensif kepada seluruh warga sekolah.<br>
6. Meningkatkan jumlah kejuaraan akademik dan non akademik dengan pembinaan dan meningkatkan jumlah siswa dalam lomba-lomba dan uji coba dalam peningkatan standar nilai.<br>
7. Mewujudkan manajemen berbasis sekolah yang tanguh.<br>
8. Mewujudkan monitoring dan evaluasi tindak lanjut kinerja sekolah untuk pengembangan sekolah.<br>
9. Mewujudkan pembiayaan pendidikan yang memadai.</p>
<div class="art-postheadericons art-metadata-icons">
            </div>
<div class="art-postcontent">
            </div>
<div class="cleared">
</div>
<div class="art-postfootericons art-metadata-icons">
            </div>
</div>
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
<div class="art-layout-cell art-sidebar2">
      <div class="art-box art-block">
       <div class="art-box-body art-block-body">
          <div class="art-bar art-blockheader">
           <h3 class="t">
Login</h3>
</div>
<div class="art-box art-blockcontent">
           <div class="art-box-body art-blockcontent-body">
         
          <form action="#" method="post" name="login" id="form-login">
        <fieldset class="input" style="border: 0 none;">
       <p id="form-login-username">
<label for="modlgn_username">Username</label>
         <br />
         <input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" />
       </p>
<p id="form-login-password">
<label for="modlgn_passwd">Password</label>
         <br />
         <input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" />
       </p>
<label for="modlgn_kategori">kategori</label>
         <select>
 <option name="guru"value="Guru">Guru</option>
 <option name="siswa"value="Siswa">Siswa</option>
 <option name="alumni"value="Alumni">Alumni</option>
 <option name="alumni"value="Tamu">Tamu</option>
         </select>
<span class="art-button-wrapper">
         <span class="art-button-l"> </span>
         <span class="art-button-r"> </span>
         <input type="submit" name="Submit" class="art-button" value="Login" />
       </span>
        </fieldset>
</form>
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
</div>
<div class="art-box art-block">
       <div class="art-box-body art-block-body">
          <div class="art-bar art-blockheader">
           <h3 class="t">
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cleared">
</div>
<div class="art-footer">
                <div class="art-footer-body">
                    <a href="#" class="art-rss-tag-icon" title="RSS"></a>
                            <div class="art-footer-text">
                                <p>
Copyright © 2017 SMP N 1 Sampang. All rights reserved.</p>
</div>
<div class="cleared">
</div>
</div>
</div>
<div class="cleared">
</div>
</div>
</div>
</div>
<div class="cleared">
</div>
<p class="art-page-footer">
<a href="#" target="_blank"> </a> </p>
<div class="cleared">
</div>
</body>
</html>

script html dan css website sekolah smp

Contoh Script Html dan CSS Website Sekolah Sederhana

Website sekolah berguna sebagai sarana informasi antar sekolah, guru, staff, siswa, alumni, calon siswa maupun masyarakat umum. Website sekolah juga sangat berguna sebagai sarana komunikasi antar semua pihak yang terlibat. Maka dari itu saya mencoba memberikan contoh script html dan css website sekolah sederhana. Perlu di tekankan bahwa script ini saya dapatkan dari mengcopy paste juga pada blog.. yang saya lupa namanya ;( setahu saya blog itu membolehkannya copast maupun edit.. hehe 

Pertama yang anda butuhkan untuk membuat website sekolah adalah Notepad++ berguna untuk menulis script html dan css, lalu dibutuhkan XAMPP Control Panel dan terakhir dibutuhkan Web Browser seperti Mozilla Firefox, Chrome, dll

Cara membuat Website sekolah dengan html dan css

Pertama buka Notepad++, lalu copy paste kan Script ini :

script html website sekolah klik disini 


Lalu Save as dengan nama "smpku.html" di local C => xampp => htdocs => websmp (folder baru).

Setelah sudah Script Html nya, lalu desain Web menggunakan CSS. 

Script CSS website sekolah klik disini

Lalu Save As dengan nama "desainku.css" di local C=> xampp => htdocs => websmp (folder baru).

Setelah itu aktifkan xampp, dan buka browsernya lalu ketikkan 'localhost/websmp/smpku.html'.

Sebelum itu buat folder 'images' di dalam folder websmp. Bisa di unduh disini

NB : ini adalah contoh sederhana website smp negeri 1 sampang.
setahu saya smp negeri 1 sampang belum memiliki website resmi jadi saya mencoba memberikan gambaran sederhana mengenai tampilan website smp negeri 1 sampang :).Terimakasih