Dasar-Dasar Membuat Website Dengan Semantic UI

Semantic UI adalah kumpulan kode/framework yang membantu menciptakan tampilan yang cantik dan responsif dengan menggunakan HTML yang human-friendly.

simantic UI LOGO

Bahasa pemrograman ini memiliki fungsi yang sama dengan bootstrap.

Bahasa pemrograman ini memiliki kelebihan-kelebihan seperti.

  1. Concise HTML
    Semancti UI membuat kode-kode dan class yang dapat disesuaikan serta penulisanya pun dibuat dari bahasa yang biasa digunakan sehingga mudah untuk dimodifikasi hubungannya.

    <div class="ui three buttons">
      <button class="ui active button">One</button>
      <button class="ui button">Two</button>
      <button class="ui button">Three</button>
    </div>
  2. Intuitive Javascript
    javascript dapat dilihat dan dimodifikasi dengan mudah dimengerti. contoh

    $('select.dropdown')
      .dropdown('set selected', ['meteor', 'ember'])
    ;
  3. Simplified Debugging
    dapat dengan mudah mencari permasalahan yang terjadi.

berikut ini langkah-langkah cara menggunaakn simantic ui di halaman website

  1. download dulu simantic di website resminya disini
  2. Setelah didownload, buat folder dengan nama “simatic-test” kemudian ektrak di folder htdocs tersebut
  3. folder dari ektrak diberi nama “simantik
    simantic ui hirarki folder
  4. kemudian buat file bernama index.html, kodenya html sederhana
    <!DOCTYPE html>
    <html>
    	<head>
    	<title></title>
    		
    	</head>
    	<body>
    	
    	
    	</body>
    </html>
  5. index.html belum terhubung dengan file simantik untuk itu kita membutuhkan code tambahan untuk menghubungkannya dan simantic ini tetap membutuhkan sebuah file jquery
    <link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
    <script
    		  src="https://code.jquery.com/jquery-3.1.1.min.js"
    		  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    		  crossorigin="anonymous"></script>
    <script src="semantic/semantic.min.js"></script>
  6.  jika di gabungkan akan berbentuk seperti ini :
    <!DOCTYPE html>
    <html>
    	<head>
    	<title></title>
    		<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
    	</head>
    	<body>
    	
    	<script
    		  src="https://code.jquery.com/jquery-3.1.1.min.js"
    		  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    		  crossorigin="anonymous"></script>
    		<script src="semantic/semantic.min.js"></script>
    	</body>
    </html>
  7. dokumen simantik siap digunakan..

untuk file dokumentasi atribut-atribut html lain, kamu dapat membacanya di halaman dokumentasi websitenya disini 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.