Assalamu’alaikum….

Hai sobat… sedih rasanya jika salah satu dari temen kita ada yang pulang. Kali ini saya akan membagi tutorial membuat sebuah template website yang sederhana, menggunakan Bootstrap saya ini tidak menggunakan PHP karena belum install lamp server. Mari kita lihat tutorialnya.


Dalam tutorial ini terdapat :
class=”navbar navbar-inverse”
class=”container-fluid”
class=”navbar-header”
class=”navbar-brand”
class="collapse navbar-collapse"
class="nav navbar-nav"
class="nav navbar-nav navbar-right"
class="carousel-indicators"
class="carousel-inner"
class="item"
class="item active"
class="left carousel-control"
class="breadcrumb"
class="container-fluid text-center"
class="row content"
class="col-sm-2 sidenav"
class="col-sm-8 text-left"
dan masih banyak lagi, karena ini cuma sederhana ya cuma ini yang ada dalam pembuatan template website saya, maaf kalau masih kurang.


Tutorialnya sebagai berikut :

  1. kita buat terlebih dahulu tema yang akan kita buat tadi, kalau saya kali ini terfikirkan sebuah tempat wisata di Yogyakarta. ini contoh hasil jadi template saya.






  1. Pertama kita buat file, simpan dengan nama “prambanan.html”

Coding :

<html>
<head>
<title> sssss </title>
</head>
<style>

body {
background-color: aqua;
}


h1 {
color: #FFFFFF;
font-size: 40px;
}


.gambar {

margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
border: 1px solid #000000;
}

#isi p {
float: center;
text-align: justify;
line-height: 18px;
margin-top: 0px;;
}

</style>
<body>
<center>

<div id="isi">
<img src="prambanan.JPG" class="gambar" widht="1000" height="300" />
<p align="center"><b>Sejarah Candi Prambanan -  Kerajaan Pengging Dan Boko </b></p>

<p>Berawal pada suatu ketika di zaman kerajaan dahulu kala di bumi nusantara ini. Tersebutlah dua kerajaan Hindu yang cukup besar di Pulau Jawa. Yakni Kerajaan Pengging dengan rajanya yaitu Prabu Damar Moyo, Kerajaan yang satunya adalah Kerajaan Pengging dengan rajanya Prabu Boko.</p>

<p>Dikisahkan bahwa Kerajaan Pengging adalah sebuah kerajaan Hindu di Jawa yang sangat maju dan rakyatnya pun sangat makmur sentosa. Prabu Damar Moyo yang merupakan Raja Pengging, adalah seorang raja yang sangat baik hati dan bijaksana. Beliau memerintah rakyatnya dengan sangat adil. Hal Inilah yang membuat Kerajaan Pengging menjadi damai dan sangat makmur. Raja Damar Moyo memiliki seorang putra bernama Bandung Bondowoso yang sangat perkasa dan gagah berani.</p>

<p>Sementara di bagian lain lagi, Kerajaan Boko merupakan sebuah keraton yang masih berada di bawah wilayah kerajaan Pengging. Sesuai dengan namannya Keraton Boko ini diperintah oleh seorang raja bernama Prabu Boko. Di ceritakan bahwa Prabu Boko dikenal sebagai seorang raksasa bengis dan kejam berwajah menyeramkan, dan juga gemar memakan daging manusia. Konon Prabu Boko juga sangat dikenal sebagai raja yang lalim, kejam, dan sangat semena-mena dalam memerintah kerajaannya.</p>

<p>Akan tetapi dibalik wujudnya yang sangat bengis dan mengerikan, ternyata Prabu Boko memiliki seorang puteri yang sangat cantik jelita paras wajahnya. Roro Jonggrang, begitulah nama  Puteri Prabu Boko. Selain memiliki seorang puteri yang rupawan, Prabu Boko juga memiliki seorang patih kepercayaan. Patih tersebut bernama Patih Gupala yang juga berwujud seorang raksasa.</p>

<p><b>Sejarah Candi Prambanan Yogyakarta - Peperangan Dua Kerajaan</b></p>

<p>Dikisahkan pada suatu ketika Prabu Boko memiliki keinginan untuk memperluas keratonnya dan juga menguasai Kerajaan Pengging yang kala itu menjadi Kerajaan yang sangat kuat. Lalu berundinglah Prabu Boko bersama dengan patihnya yaitu Patih Gupala, serta menyusun berbagai strategi untuk memberontak dan menyerang Kerajaan Pengging. Ketika segala persiapan selesai dan semua kekuatan telah terhimpun, lalu berangkatlah Prabu boko, sang patih, diikuti seluruh pasukan Keraton Boko menyerang Kerajaan Pengging.</p>

<p>Kemudian tentu dapat di duga, sebuah pertempuran sengit pun terjadi. Pertempuran antar dua kerajaan ini berlangsung sangat sengit dan mengorbankan banyak prajurit dari kedua kerajaan tersebut. Tidak sedikit prajurit meregang nyawa, rakyat jelata juga tidak kalah menderita dan banyak juga yang menjadi korbannya. Tak hanya korban jiwa, ternyata perekonomian kerajaanpun menjadi lumpuh, banyak rakyat menderita kelaparan, terserang penyakit, dan lain sebagainya</p>

<p>Mengetahui keadaan yang semakin memburuk ini lalu Prabu Damar Moyo mengutus anaknya yaitu Pangeran Bandung Bondowoso untuk melawan Prabu Boko dan merenggut nyawanya. Mendapat perintah dari sang ayah, berangkatlah Bandung Bondowoso menuju medan peperangan. Pertarungan antara Bandung Bondowoso dan Prabu Boko pun pecah. Dalam pertarungan duel ini akhirnya Pangeran Bandung Bondowoso dapat mengalahkan Brabu Boko dan membunuhnya.</p>

<p>Mengetahui rajanya kalah dan terbunuh, sang Patih Dwarapala pun melarikan diri pulang menuju keraton Boko. Melihat hal itu Bandung Bondowoso tidak tinggal diam, Bandung Bondowoso merasa harus menumpaskan pemberontakan ini sampai tuntas ke akar-akarnya, Ia pun mengejar Patih Dwarapala menuju Keraton Boko.</p>

<p>Setiba Keraton Boko, sang Patih Dwarapala pun melaporkan apa yang terjadi kepada Puteri Roro Jonggrang. Mendapat kabar bahwa ayahnya telah dibunuh oleh Bandung Bondowoso, Roro Jonggran marah bukan kepalang. Dan mengetahui bahwa Bandung Bondowoso sedang dalam perjalanan menuju keratonnya, akhirnya Roro Jonggrang menyusun siasat untuk menghadapi Bandung Bondowoso.</p>

<p><b>Sejarah Berdirinya Candi Prambanan - Kekalahan Keraton Boko</b></p>

<p>Tatkala Bandung Bondowoso tiba di Keraton Boko, alangkah terkejutnya dia melihat ternyata Prabu Boko mempunyai seorang puteri yang sangat cantik rupawan. Melihat kecantikan Roro Jonggrang yang sangat menggoda, membuat Bandung Bondowoso jatuh hati kepadanya, serta berniat mempersuntingnya.</p>

<p>Saat mengetahui niat dan gelagat Bandung Bondowoso ini kemudian Puteri Roro Jonggrang pun melancarkan siasat yang telah di susun olehnya. Dia mengatakan kepada Bandung Bondowoso bahwa dia bersedia dijadikan isteri Bandung Bondowoso, akan tetapi ada 2 syarat yang harus dipenuhi. Karena terlanjur terpincut dengan Roro Jonggrang yang jelita, Bandung Bondowoso pun tidak kuasa bersedia memenuhi 2 persyaratan tersebut sebelum menikahi Roro Jonggrang.</p>

<p>Syarat-syarat yang harus di penuhi oleh Bandung Bondowoso tersebut adalah:</p>
<p>1.  Membuat sebuah sumur Jalatunda</p>
<p>2.  Mendirikian 1000 Candi dalam waktu satu malam</p>
<p><b>Asal usul Candi Prambanan - Pesona Kecantikan Roro Jonggrang</b></p>
<img src="patung.jpg" class="gambar" widht="800" height="300" />
<p>Pada akhirnya Sang Pangeran pun bersedia memenuhi kedua persyaratan tersebut. Di mulailah dia membangun sumur yang diminta oleh sang putri. Setelah sumur Jalatunda selesai di buat, Roro Jonggrang meminta Bandung Bondowoso untuk masuk ke dalam sumur tersebut. Ketika Bandung Bondowoso sudah masuk ke dalam sumur Jalatunda, Roro Jonggrang memerintahkan Patih Gupala untuk menimbun sumur dengan tanah dan mengubur hidup-hidup Bandung Bondowoso di dalamnya.</p>

<p>Ternyata usaha Roro Jonggrang dan sang patih tidak berjalan lancar, Bandung Bodowoso dengan mengerahkan ilmu kesaktiannya, telah berhasil menyelamatkan diri keluar dari dalam sumur yang telah di timbun tersebut. Mengetahui bahwa ia di jebak Bandung Bondowoso pun sangat marah kepada Roro Jonggrang dan mendatangi Roro Jonggrang. Akan tetapi berkat kecantikannya dan bujuk rayu Roro Jonggrang, membuat kemarahan Bandung Bondowoso mereda. Dan Bandung Bondowoso bersedia memenuhi persyaratan yang kedua, yakni membangun 1000 candi dalam waktu 1 malam.</p>

<p><b>Sejarah Candi Prambanan Jawa Tengah - Siasat Putri Roro Jonggrang</b></p>

<p>Permintaan untuk membangun 1000 candi dalam waktu semalam bukanlah perkara yang mudah bagi Bandung Bondowoso meski ia terkenal sangat sakti. Lantas dia pun mengerahkan segala kekuatannya dan meminta bantuan para Jin untuk membuat 1000 candi untuknya, dan para jin pun bersedia membantu.</p>

<p>Mengetahui bahwa Bandung Bondowoso meminta bantuan jin, Roro Jonggrang yang memang sebenarnya hanya ingin mengalahkan Bandung Bondowoso dan tidak rela bila Bandung Bondowoso bisa menyelesaikan 1000 candi dalam semalam, Roro Jonggrang memutar otaknya dan mengeluarkan siasat yang lainnya. Guna menggagalkan usaha Bandung Bondowoso membangun 1000 candi, ia meminta bantuan para gadis dari keratonnya.</p>

<p>Gadis- gadis itu diperintah untuk membakar jerami dan menumbuk lesung(alat tradisional jawa untuk menumbuk padi). Jerami pun dibakar agar lagit terlihat terang seperti pagi saat matahari mulai terbit. Kemudian lesung-lesung dipukul agar ayam berkokok pertanda pagi sudah tiba.</p>

<p>Saat mendengar suara lesung-lesung yang dipukuli, maka ayam-ayam jantan pun bangun dan mulai berkokok semua karena mengira bahwa pagi telah tiba. Sementara para jin yang sedang bekerja membangun candi melihat langit mulai terang dan ayam-ayam jantan mulai berkokok-kokok, juga mengira bahwa hari telah pagi. Mengetahui pagi telah tiba mereka pun menghentikan pekerjaan mereka membangun candi.</p>

<p><b>Sejarah Candi Prambanan - Candi Sewu Dan Mitosnya</b></p>

<p>Melihat para jin yang tiba-tiba berhenti bekerja karena di kira hari telah pagi, Bandung Bondowoso pun terkejut dan curiga dengan yang terjadi. Lalu Bondowoso memanggil Roro Jonggrang untuk menghitung seluruh candi yang telah jadi dibangun tersebut. Setelah dihitung jumlahnya, ternyata candi yang telah selesai dibuat hanya berjumlah 999 buah.</p>

<p>Menyadari tipu muslihat dari Roro Jonggrang, Bandung Bondowoso pun murka dan akhirnya mengutuk Puteri Roro Jonggrang menjadi candi yang ke 1000. Sungguh ajaib, seketika itu juga tubuh Puteri Roro Jonggrang berubah menjadi patung batu. Bukan hanya itu saja Bandung Bondowoso juga mengutuk para gadis yang telah membantu muslihat Roro Jonggrang menjadi perawan tua dan seumur hidup mereka tidak pernah menikah.</p>

<p>Semenjak saat itulah Candi Prambanan mulai dikenal masyarakat, dan 100 candi yang berada di sekitarnya. Selain itu Candi Prambanan juga dikenal dengan Candi Sewu. Kata Sewu jika dalam bahasa Indonesia berarti seribu. Mitos juga mengatakan bahwa, barang siapa ada sepasang kekasih yang mengunjungi Candi Prambanan Yogyakarta maka diyakini pasangan kekasih itu tidak akan langgeng hubungannya, konon mereka akan berpisah. Inilah Sejarah Candi Prambanan dan Kisah Roro Jonggrang, sobat pembaca boleh mempercayai atau tidak, kami kembalikan lagi kepada Anda.</p>
</div>

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




Hasil :







  1. Selanjutnya kita buat lagi, simpan dengan nama “tugu.html”

Coding :

<html>
<head>
<title> sssss </title>
</head>
<style>

body {
background: url(tumblr.gif );
}

#content {
width: 750px;
margin: auto;
}

#header {
border:1px solid #000000;
background-color:#000000;
padding: 10px
}
h1 {
color: #FFFFFF;
font-size: 40px;
}

#footer {
padding:10px;
border:1px solid #000000;
background-color:#CCCCCC;
}

#footer p {
text-align: justify;
font-weight: bold;
}

#menu {
float:right;
}

#isi {
width:800px;
margin-top: 10px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
background: white;
}

.gambar {
float: left;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
border: 1px solid #000000;
}

#isi p {
text-align: justify;
line-height: 18px;
margin-top: 0px;;
}

</style>
<body>
<center>

<div id="isi">
<img src="tugu jogja.jpg" class="gambar" widht="800" height="300" />
<p>Tugu Yogyakarta atau yang lebih dikenal sebagai Tugu Malioboro ini mempunyai nama lain Tugu Golong Gilig atau Tugu Pal Putih merupakan penanda batas utara kota tua Yogya. Tugu Yogya bukanlah tugu sembarang, tapi tugu Yogya ini adalah tugu yang memiliki mitos yang sangat bersejarah dan sejuta misteri di dalamnya, sehingga menjadi salah satu keistimewaan yang dimiliki kota Yogya.
</p>

<p>Tugu Yogya dibangun pada tahun 1755 oleh Sri Sultan Hamengku Buwono I, pendiri kraton Yogyakarta yang mempunyai nilai simbolis dan merupakan garis yang bersifat magis menghubungkan Laut Selatan, Kraton Yogya dan Gunung Merapi.
</p>

<p>Pada saat awal berdirinya, bangunan ini secara tegas menggambarkan Manunggaling Kawula Gusti, semangat persatuan rakyat dan penguasa untuk melawan penjajahan.Semangat persatuan atau yang disebut golong gilig itu tergambar jelas pada bangunan tugu, tiangnya berbentuk gilig (silinder) dan puncaknya berbentuk golong (bulat), hingga akhirnya dinamakan Tugu Golong-Gilig.Keberadaan Tugu ini juga sebagai patokan arah ketika Sri Sultan Hamengku Buwono I pada waktu itu melakukan meditasi, yang menghadap puncak gunung Merapi. Bangunan Tugu Jogja saat awal dibangun berbentuk tiang silinder yang mengerucut ke atas, sementara bagian dasarnya berupa pagar yang melingkar, sedangkan bagian puncaknya berbentuk bulat. Ketinggian bangunan tugu golong gilig ini pada awalnya mencapai 25 meter
</p>
<p>Kondisi Tugu Yogya ini berubah total pada 10 Juni 1867, di mana saat itu terjadi bencana alam gempa bumi besar yang mengguncang Yogyakarta, yang membuat bangunan tugu runtuh. Runtuhnya tugu karena gempa inilah yang membuat keadaan dalam kondisi transisi karena makna persatuan benar-benar tak tercermin pada bangunan tugu.
</p>
<p>Pada tahun 1889, keadaan Tugu benar-benar berubah, saat pemerintah Belanda merenovasi seluruh bangunan tugu. Kala itu Tugu dibuat dengan bentuk persegi dengan tiap sisi dihiasi semacam prasasti yang menunjukkan siapa saja yang terlibat dalam renovasi itu. Bagian puncak tugu tak lagi bulat, tetapi berbentuk kerucut yang runcing.
</p>
<p>
Ketinggian bangunan pun menjadi lebih rendah, yakni hanya setinggi 15 meter atau 10 meter lebih rendah dari bangunan semula. Sejak saat itulah, tugu ini disebut sebagai De White Paal atau Tugu Pal Putih. Perombakan bangunan Tugu saat itu sebenarnya merupakan taktik Belanda untuk mengikis persatuan antara rakyat dan raja, namun melihat perjuangan rakyat dan raja di Yogyakarta yang berlangsung sesudahnya, akhirnya upaya tersebut tidak berhasil.
</p>
</div>

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



Hasil :





  1. simpan dengan nama “candi ijo.html”











  1. kemudian yang paling penting adalah ini simpan dengan nama “template coba.html”
Coding :


<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
body { background-color: aqua;
}
h1{ color: blue;
background-color:
}
.carousel-inner{
width: 100%;
height: 50%;
}
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
   
    .row.content {height: 450px}
   
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
   
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
   
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;}
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                       
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="tugu.html">Sejarah Tugu Jogja</a></li>
        <li><a href="prambanan.html">Prambanan</a></li>
        <li><a href="#">Candi Ijo</a></li>
        <li><a href="#">Kuliner</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
 

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="tugu jogja.jpg" alt="Yogyakarta" style="width:100%; height:100%;">
        <div class="carousel-caption">
          <h3>Yogyakarta</h3>
          <p>A monument full of history</p>
        </div>
      </div>

      <div class="item">
        <img src="prambanan.JPG" alt="Prambanan" style="width:100%; height:100%;"">
        <div class="carousel-caption">
          <h3>Prambanan</h3>
          <p>The coolest and famous tour in yogyakarta</p>
        </div>
      </div>
   
      <div class="item">
        <img src="candi ijo.jpg" alt="New York" style="width:100%; height:100%;"">
        <div class="carousel-caption">
          <h3>Candi Ijo</h3>
          <p>Where to enjoy the sunset</p>
        </div>
      </div>
 
    </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

<div class="container">               
  <ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="tugu.html">Sejarah Tugu Jogja</a></li>
    <li><a href="prambanan.html">Prambanan</a></li>
    <li><a href="">Kuliner</a></li>
    <li class="active">Vacation</li>       
  </ul>
</div>

</body>
</html>


<div class="container-fluid text-center">   
  <div class="row content">
    <div class="col-sm-2 sidenav">
<p> Kalau bicara soal wisata di yogyakarta pasti gak akan ada habisnya, selain wisata yang indah dan menakjubkan juga terdapat banyak kuliner yang wajib kalian coba.</p>
      <p><img src="tugu jogja.jpg" class="gambar" widht="100" height="70" /> </p>
<a href="tugu.html">Sejarah Tugu Jogja</a>
      <p><img src="prambanan.JPG" class="gambar" widht="100" height="70" /></p>
<a href="prambanan.html">Prambanan</a>
      <p><img src="candi ijo.jpg" class="gambar" widht="100" height="70" /></p>

    </div>
    <div class="col-sm-8 text-left">
      <h1 align="center"><b>Sejarah Yogyakarta</b></h1>
      <p>Sebelum Indonesia merdeka, Yogyakarta merupakan daerah yang mempunyai pemerintahan sendiri atau disebut Zelfbestuurlandschappen/Daerah Swapraja, yaitu Kasultanan Ngayogyakarta Hadiningrat dan Kadipaten Pakualaman. Kasultanan Ngayogyakarta Hadiningrat didirikan oleh Pangeran Mangkubumi yang bergelar Sultan Hamengku Buwono I pada tahun 1755, sedangkan Kadipaten Pakualaman didirikan oleh Pangeran Notokusumo (saudara Sultan Hamengku Buwono II) yang bergelar Adipati Paku Alam I pada tahun 1813. Pemerintah Hindia Belanda mengakui Kasultanan, dan Pakualaman sebagai kerajaan dengan hak mengatur rumah tangganya sendiri yang dinyatakan dalam kontrak politik. Kontrak politik yang terakhir Kasultanan tercantum dalam Staatsblaad 1942 Nomor 47, sedangkan kontrak politik Pakualaman dalam Staatsblaad 1941 Nomor 577. Eksistensi kedua kerajaan tersebut telah mendapat pengakuan dari dunia internasional, baik pada masa penjajahan Belanda, Inggris, maupun Jepang. Ketika Jepang meninggalkan Indonesia, kedua kerajaan tersebut telah siap menjadi sebuah negara sendiri yang merdeka, lengkap dengan sistem pemerintahannya (susunan asli), wilayah, dan penduduknya.</p>
<p> Setelah Proklamasi Kemerdekaan Republik Indonesia (RI), Sri Sultan Hamengkubuwana IX dan Sri Paku Alam VIII menyatakan kepada Presiden RI, bahwa Daerah Kasultanan Yogyakarta, dan Daerah Pakualaman menjadi wilayah Negara RI, bergabung menjadi satu kesatuan yang dinyatakan sebagai Daerah Istimewa Yogyakarta (DIY). Sri Sultan Hamengkubuwana IX dan Sri Paku Alam VIII sebagai Kepala Daerah, dan Wakil Kepala Daerah bertanggung jawab langsung kepada Presiden RI. Hal tersebut dinyatakan dalam:</p>
<p> 1. Piagam kedudukan Sri Sultan Hamengku Buwono IX dan Sri Paku Alam VIII tertanggal 19 Agustus 1945 dari Presiden RI.</p>
<p> 2. Amanat Sri Sultan Hamengku Buwono IX dan Sri Paku Alam VIII tertanggal 5 September 1945 (dibuat secara terpisah).</p>
<p> 3. Amanat Sri Sultan Hamengkubuwono IX dan Sri Paku Alam VIII tertanggal 30 Oktober 1945 (dibuat dalam satu naskah).</p>
<p>Dalam perjalanan sejarah selanjutnya kedudukan DIY sebagai Daerah Otonom setingkat Provinsi sesuai dengan maksud pasal 18 Undang-undang Dasar 1945 (sebelum perubahan) diatur dengan Undang-undang Nomor 22 Tahun 1948 tentang Undang-undang Pokok Pemerintahan Daerah. Sebagai tindak lanjutnya kemudian Daerah Istimewa Yogyakarta dibentuk dengan Undang-undang Nomor 3 Tahun 1950 tentang Pembentukan Daerah Istimewa Yogyakarta Peraturan Pemerintah Nomor 31 Tahun 1950 sebagaimana telah diubah, dan ditambah terakhir dengan Undang-undang Nomor 9 Tahun 1955 (Lembaran Negara Tahun 1959 Nomor 71, Tambahan Lembaran Negara Nomor 1819) yang sampai saat ini masih berlaku. Dalam undang-undang tersebut dinyatakan DIY meliputi Daerah Kasultanan Ngayogyakarta Hadiningrat, dan Daerah Kadipaten Pakualaman. Pada setiap undang-undang yang mengatur Pemerintahan Daerah, dinyatakan keistimewaan DIY tetap diakui, sebagaimana dinyatakan terakhir dalam Undang-undang Nomor 32 Tahun 2004.</p>

    </div>
   
</div>

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





Hasil :








  1. yang terakhir ini boleh ditambahkan yaitu buat tampilan login pada saat tombol icon pojok kanan atas di klik, simpan dengan nama “login.html”


Coding :

<html lang="en">
<head>
<style>
h2 {background: aqua;
    text-align: center;
}

</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2><b> Silahkan Log In Dulu </b></h2>
  <form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">         
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">       
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">       
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default"><a href="template coba.html">Submit</a></button>
      </div>
    </div>
  </form>
</div>

</body>
</html>





Hasil :










selesai…. Cuma itu yang dapat saya sharing ke teman-teman semua. Jika ada kesalahan mohon di maafkan.

Maksud dan Tujuan

  • lebih memahami class yang ada pada Bootstrap
  • bisa menampilkan karyanya senndiri

Alat dan Bahan

  1. Laptop
  2. File Items
  3. Text Editor

Hasil yang diharapkan
Dapat membuat template kayanya sendiri, inisiatif diri sendiri.

Referensi