Pasang Iklan and disini

Info Tech News

Info Tech News

Nasional

Artikel

Network

Tutorial

Ketahui Jenis File Gambar yang Tepat untuk Web

Posted by: Unknown Posted date: 13:32:00 / comment : 0 , ,

Bagi seorang developer web yang juga berperan sebagai web desainer, gambar sudah menjadi hal wajib untuk dimasukkan ke dalam projeknya. Ada banyak format file untuk gambar dan juga dapat digunakan untuk ditampilkan pada web browser untuk keperluan website, namun apakah sudah tepat dalam memilih format file nya? Kali ini CodePolitan akan kupas mengenai format file apa yang tepat digunakan untuk website, apa saja kah itu? Berikut ulasanya.

GIF

Format GIF dikembangkan oleh CompuServe Inc pada tahun 1987 dengan maksud agar dapat mentransfer gambar secara cepat melalui koneksi yang memiliki kecepatan rendah. Gif sendiri merupakan kependekan dari Graphic Interchange Format. Format ini memiliki ekstensi .gif dan untuk pengucapanya sendiri masih menjadi perdebatan publik antara “gif” atau “jif, namun sang pembuatnya, Steve Wilhite menyebutkan bahwa pengucapan yang benar adalah “jif”.
Untuk pewarnaan, format GIF mengenali hingga 256 warna (indexed color) dan menggunakan proses dithering yaitu proses mengkombinasikan 2 piksel warna menjadi satu warna untuk mengurangi jumlah warna yang digunakan sehingga dapat memperkecil ukuran file gambar yang dibuat. Format GIF mendukung warna transparan dan dapat memuat banyak frame gambar sehingga dapat digunakan untuk membuat gambar gerak (animasi). Ukuran file format GIF tergantung dari jumlah warna yang digunakan, semakin sedikit warna yang dipakai maka semakin kecil ukuran file nya.
Contoh Gambar GIF.
Sumber: wikipedia.org
File GIF ini sangat cocok untuk gambar dengan sedikit warna seperti ikon untuk web ataupun clipart. Karena kemampuanya dapat menyimpan banyak frame dalam satu gambar, format ini cocok digunakan untuk animasi. Dan ukuran file yang bergantung pada jumlah warna yang terpakai, maka format ini juga sangat cocok untuk gambar yang simpel dalam hal pewarnaan, misalnya untuk gambar garis pembatas, border, dan lain sebagainya.

JPEG

tipe File Jpg
Format file ini memiliki ekstensi .jpeg atau .jpg. JPEG merupakan kependekan dari Joint Photographic Expert Group dan mulai dikembangkan pada tahun 1986. Cara pengucapan JPEG adalah “jay-peg” bukanya “jepeg” yang sering kita ucapkan.
JPEG mendukung hingga 1 juta warna, sehingga dapat menyimpan gambar dalam format true color (24-bit). Meskipun dapat menyimpan sampai dengan 16 juta warna, JPEG dapat memiliki ukuran file yang sangat kecil karena format ini menggunakan teknik kompresi yang sangat komprehensif. Karena kemampuan kompresi nya yang tinggi ini, format ini sangat cocok untuk menyimpan gambar-gambar fotografi.
Meskipun kompresi gambar JPEG sangatlah efisien dan selalu menyimpan gambar dalam kategori warna true color (24 bit), format ini bersifat lossy, yang berarti bahwa kualitas gambar dikorbankan bila tingkat kompresi yang dipilih semakin tinggi. JPEG sendiri kompatibel dengan platform Windows dan Mac serta dengan kompatibel dengan banyak aplikasi web browser ataupun image editor.
Format JPEG ini akan sangat cocok untuk gambar diam, fotografi dengan gambar realistik, gambar dengan pewarnaan yang kompleks, dan gambar yang memiliki perubahan warna dari gelap ke terang secara detail.

PNG

Tipe File PNG
PNG (diucapkan “ping” atau “pi en ji“) mulai dikembangkan pada pertengahan 90-an sebagai alternatif format GIF dan JPEG tetapi masih memiliki keunggulan dari kedua format tersebut. PNG merupakan kependekan dari Portable Network Graphic dan memiliki ekstensi .png.
PNG memiliki 2 bentuk yaitu PNG-8 dan PNG-24. PNG-8 memiliki kesamaan sifat seperti GIF, yaitu mendukung hanya 256 warna (indexed color) serta mendukung transparansi 1-bit. Namun terkadang format PNG-8 ini memiliki ukuran file yang lebih kecil dibandingkan dengan GIF.
Kemudian PNG-24, format ini memiliki kesamaan dengan JPEG yaitu mendukung pewarnaan hingga 24-bit (true color) dimana memiliki kedalaman warna hingga 16 juta warna. Perbedaan dengan JPEG adalah PNG menggunakan kompresi loosless, artinya gambar yang dihasilkan memiliki kualitas yang luarbiasa namun ukuran file yang lebih besar dibanding JPEG.
Baik PNG-8 ataupun PNG-24 mendukung transparansi dimana tingkat transparansi nya dapat diatur dari mulai gelap (pekat) hingga transparan atau dapat disebut juga alpha channel. Format PNG dapat dipakai di berbagai platform dan browser ataupun aplikasi pengolah gambar, namun untuk beberapa browser jadul akan mendapati masalah dalam menampilkan PNG karena browser tersebut belum mendukung alpha channel.
Format PNG akan sangat cocok digunakan untuk gambar logo pada website yang terkadang dibutuhkan tranparansi/alpha channel. Selain itu PNG juga cocok untuk gambar fotografi berkualitas tinggi dimana ukuran file tidak menjadi pertimbangan.
Dengan menggunakan format gambar yang bervariasi dan sesuai dengan penggunaanya, tentu saja akan berpengaruh pada ukuran file gambar sehingga space pada hosting web pun dapat dihemat selain itu waktu loading pun dapat di efektifkan.

Bagi seorang developer web yang juga berperan sebagai web desainer, gambar sudah menjadi hal wajib untuk dimasukkan ke dalam projeknya. A...

6 Prinsip dalam Membuat Desain User Interface

Posted by: Unknown Posted date: 06:14:00 / comment : 0 , ,


Dalam mendesain user interface untuk pengguna atau client, tentunya ada beberapa hal yang perlu diperhatikan. Mengapa? Karena tentunya anda tidak ingin pengguna yang menggunakan produk anda mengalami kesulitan dalam menggunakan produk buatan anda.
Nah untuk itulah prinsip desain user interface ini diperkenalkan oleh Larry Constantine and Lucy Lockwood. Berikut merupakan prinsip dari desain user interface.

1. The structure principle

Tampilan desain untuk user interface harus diatur sesuai fungsinya agar lebih terorganisir. Tampilan yang dibuat juga harus jelas, konsisten dan dapat dipahami oleh pengguna. Misalnya seperti menaruh beberapa hal yang saling terkait fungsinya dan memisahkan yang tidak ada hubungannya. Prinsip struktur ini saling berkaitan dengan keseluruhan arsitektur user interface.

2. The simplicity principle

Desain yang dibuat haruslah sederhana, mudah digunakan, dan dapat berkomunikasi dengan jelas dengan bahasa yang dipahami oleh penggunanya.

3. The visibility principle

Desain yang kita buat sebaiknya dibekali dengan pilihan dan memenuhi kebutuhan pengguna dalam mengerjakan suatu tugas tanpa membuat pengguna kesusahan dengan banyaknya informasi yang sebenarnya tidak diperlukan.

4. The feedback principle

Desain yang baik harus memberikan informasi yang jelas kepada setiap hal yang dilakukan pengguna, seperti ketika menunjukan error ketika ada langkah yang bermasalah, menunjukan keterangan sukses jika langkah yang dilakukan pengguna sudah benar dan lain sebagainya. Intinya harus ada komunikasi yang jelas antara sistem dan pengguna.

5. The tolerance principle

Desain sebaiknya dibuat dengan fleksibel dan toleran, seperti dapat mengurangi kesalahan pengguna dengan menggunakan fitur undo atau redo dan juga mencegah munculnya error.

6. The reuse principle 

Prinsip ini mengharuskan pengguna untuk menggunakan kembali komponen internal maupun eksternal. Hal ini dikhususkan agar pengguna tidak perlu mengingat kembali kebiasaan atau input yang telah dilakukan berulang ulang.

Nah kurang lebih seperti itulah prinsip dalam membuat desain user interface yang baik dan efektif. Tentunya ketika anda akan mengembangkan sebuah desain user interface maka dapat menggunakan prinsip diatas sebagai acuan untuk menghasilkan desain yang baik dan mudah digunakan oleh pengguna. Sekian ulasan kali ini, semoga bermanfaat :D

Dalam mendesain user interface untuk pengguna atau client, tentunya ada beberapa hal yang perlu diperhatikan. Mengapa? Karena tentunya an...

Sejarah Perkembangan Web Design

Posted by: Unknown Posted date: 05:58:00 / comment : 0 , ,


Berbicara mengenai web design, tentunya kita sudah tak asing dengan yang namanya HTML, CSS, PHP dan bahasa lainnya untuk mengembangkan sebuah website. Website sendiri saat ini sudah berkembang pesat dibandingkan pendahulunya.
Bayangkan, sekarang sebuah website bisa dibuat dengan mudah, cepat, mampu menampilkan animasi dan lain sebagainya. Namun, tentunya perkembangan ini didahului dengan proses yang sangat panjang. mari kita simak..

Perkembangan HTML

HTML pertama kali diluncurkan pada tahun 1990 yang kemudian diikuti dengan munculnya website pertama pada tahun 1991. Website ini diperkenalkan oleh Tim Berners-Lee. Pada peluncuran awal tersebut, HTML hanya dibekali kemampuan untuk menampilkan teks dan link saja. Tentu membosankan membaca website seperti itu.
Tidak berhenti disitu, munculnya tabel untuk membuat layout pada tahun 1992 membuat perkembangan web akhirnya lebih diminati pengguna. Tentunya website yang dikembangkan dengan layout akan lebih menarik dibandingkan hanya berupa teks saja.

Perkembangan Flash dan Javascript

Pada tahun 1995-1996, flash dan Javascript mulai diperkenalkan. Hal ini membuat perkembangan web menjadi lebih pesat lagi. Dengan flash dan javascript, penggunaanya dapat membuat konten pada web menjadi lebih interaktif.

Perkembangan CSS

Dengan berkembangnya teknologi pada website, akhirnya pada tahun 1996 W3C memperkenalkan penggunaan CSS. Dengan CSS tersebut, akhirnya dapat membuat web menjadi lebih cantik dan tentunya tidak membosankan.

Perkembangan Web Dinamis

Pada saat itu, penggunaan web masih sebatas web statis saja. Hal ini membuat konten dari web menjadi kurang menarik. Oleh karena itu, pada tahun 1998 munculah PHP. Bahasa ini dikembangkan secara open source, dan terbukti membuat halaman web menjadi lebih dinamis. Proses update pada halaman web juga menjadi lebih mudah.
Setahun setelah itu, CSS3 muncul dan membuat halaman web menjadi lebih menarik lagi. Dengan dibekali kemampuan dan fitur baru sehingga merubah wajah web dan proses perkembangannya menjadi lebih menarik.

Web 2.0 

Penggunaan internet yang makin ramai membuat banyak developer akhirnya tidak berhenti pada web dinamis saja. Mereka mulai memperkanalkan web yang mampu berinteraksi secara langsung dengan user atau bahkan dikendalikan langsung oleh user.
Perkembangan inilah yang akhirnya memunculkan teknologi seperti Facebook, Twitter, LinkedIn, Blogger dan lain sebagainya.

Mobile Web

Pada tahun 2008, perkembangan ponsel semakin canggih dan membuat pergeseran budaya masyarakat yang tadinya lebih memilih melakukan browsing internet dengan komputer kini beralih menggunakan ponsel. 
Hal tersebut akhirnya memunculkan trend baru untuk membuat web yang mudah dibaca dan digunakan oleh pengguna ponsel. Inilah awal dari perkembangan penggunaan responsive web design.

Nah, dari ulasan tersebut kita telah mengetahui perkembangan web mulai dari awal hingga saat ini. Tentunya trend penggunaan web akan selalu berkembang dari waktu ke waktu. Apakah menjadi lebih menarik? kita tunggu saja. Karena tentunya penggunaan web juga akan semakin ramai. Sampai jumpa di artikel lainnya.

Berbicara mengenai web design, tentunya kita sudah tak asing dengan yang namanya HTML, CSS, PHP dan bahasa lainnya untuk mengembangkan se...

Mengatasi masalah use mysqli or PDO instead in /home/u729743652/public_html di MySQL Id hostinger

Posted by: Unknown Posted date: 14:06:00 / comment : 0 ,

Kemarin saya Upload file php ke IdHostinger yang menggunakan Database.
Saat buka page nya muncul comment kayak gini :

 Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in/home/u729743652/public_html/publishcomment.php on line 3


Untuk mengatasi masalah di atas ikuti langkah - langkah berikut ini 

1. Contoh script php yang sebelumnya


2. Kemudian letakan error_reporting(E_ALL ^ E_DEPRECATED);
    Pada script yang bermasalah, lihat gambar di bawah
Coba di test kembali pasti sudah tidak bermasalah lagi, cara ini saya sudah coba dan hasilnya
Berhasil !!

Kemarin saya Upload file php ke IdHostinger yang menggunakan Database. Saat buka page nya muncul comment kayak gini : Deprecated : mysql_c...

Cara Buat Form Registrasi HTML & CSS (1)

Posted by: Unknown Posted date: 14:59:00 / comment : 9 ,

Assalamualaikum Warohmatullahi Wabarokatu.

InfotechBoltim.Org - Pada tutorial pertama saya ini, saya akan membahasa bagaimana cara membuat Form Registrasi menggunakan html dan css.
  1. Yang harus diperhatikan adalah anda harus sudah menginstall Sublime Text, Notepad ++. jika belum punya aplikasi Sublime Text Silahkan download disini via mediafire
  2. Buka aplikasi htm editor: Sublime Text/Notepad ++
Silahkan lihat Kode script html dan css dibawah ini.

html
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

      <form action="index.html" method="post">
   
        <h1>Sign Up</h1>
     
        <fieldset>
          <legend><span class="number">1</span>Your basic info</legend>
          <label for="name">Name:</label>
          <input type="text" id="name" name="user_name">
       
          <label for="mail">Email:</label>
          <input type="email" id="mail" name="user_email">
       
          <label for="password">Password:</label>
          <input type="password" id="password" name="user_password">
       
          <label>Age:</label>
          <input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13" class="light">Under 13</label><br>
          <input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13" class="light">13 or older</label>
        </fieldset>
     
        <fieldset>
          <legend><span class="number">2</span>Your profile</legend>
          <label for="bio">Biography:</label>
          <textarea id="bio" name="user_bio"></textarea>
        </fieldset>
        <fieldset>
        <label for="job">Job Role:</label>
        <select id="job" name="user_job">
          <optgroup label="Web">
            <option value="frontend_developer">Front-End Developer</option>
            <option value="php_developor">PHP Developer</option>
            <option value="python_developer">Python Developer</option>
            <option value="rails_developer"> Rails Developer</option>
            <option value="web_designer">Web Designer</option>
            <option value="WordPress_developer">WordPress Developer</option>
          </optgroup>
          <optgroup label="Mobile">
            <option value="Android_developer">Androild Developer</option>
            <option value="iOS_developer">iOS Developer</option>
            <option value="mobile_designer">Mobile Designer</option>
          </optgroup>
          <optgroup label="Business">
            <option value="business_owner">Business Owner</option>
            <option value="freelancer">Freelancer</option>
          </optgroup>
          <optgroup label="Other">
            <option value="secretary">Secretary</option>
            <option value="maintenance">Maintenance</option>
          </optgroup>
        </select>
     
          <label>Interests:</label>
          <input type="checkbox" id="development" value="interest_development" name="user_interest"><label class="light" for="development">Development</label><br>
            <input type="checkbox" id="design" value="interest_design" name="user_interest"><label class="light" for="design">Design</label><br>
          <input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label>
     
        </fieldset>
        <button type="submit">Sign Up</button>
      </form>
   
    </body>
</html>


Css
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}

form {
  max-width: 300px;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}

h1 {
  margin: 0 0 30px 0;
  text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #4bc970;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #3ac162;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
}

label.light {
  font-weight: 300;
  display: inline;
}

.number {
  background-color: #5fcf80;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}

Hasilnya bisa dilihat dibawah ini:
Nantikan untuk tutorial-tutorial selanjutnya dari saya...

Silahkan berikan komentar anda jika ada yang kurang paham dengan pemaparan tutorial diatas...Terima Kasih (Iswanto Mahmud)

Assalamualaikum Warohmatullahi Wabarokatu. InfotechBoltim.Org - Pada tutorial pertama saya ini, saya akan membahasa bagaimana cara membuat...

Cara membuat tampilan website sederhana dengan html dan css

Posted by: Unknown Posted date: 10:44:00 / comment : 0 ,

html adalah bahasa pemrograman inti untuk membuat halaman web, untuk membuat halaman web biasanya html dikombinasikan dengan script css agar tampilannya lebih dinamis dan mudah di edit. css adalah cascading style sheet dimana fungsinya untk mempercantik halaman web html. untuk contohnya adalah seperti berikut:
1. pertama kita ketik kodehtml berikut (copas juga bisa, hehe):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>belajar membuat halaman web dengan html dan css</title>
</head>
<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>
2. kemudian kita buat kode css nya seperti ini :
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
kemudia taruh kode css tersebut dibawah kode ‘</head>’ dan diawal script tambahkan <script>, kemudia di akhir kode tambahkan tag script penutup ‘</script>’ , karena disini kita membuat css yang embeded dengan html artinya  kode css menyatu dengan kode htmlnya (css di halaman html).
sehingga kode lengkapnya seperti ini :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>belajar membuat halaman web dengan html dan css</title>
<style type=”text/css”>
<!–
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
–>
</style>
</head>
<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>

html adalah bahasa pemrograman inti untuk membuat halaman web, untuk membuat halaman web biasanya html dikombinasikan dengan script css aga...

Membuat Site Definition di Dreamweaver

Posted by: Unknown Posted date: 06:34:00 / comment : 0 ,

Kemarin Kita sudah membahas Langkah Awal Membuat CMS di Dreamweaver.
sekarang kita akan membahas Membuat Site Definition di Dreamweaver.
Dreamweaver sudah menyediakan settingan yang lebih mudah dalam membuat Site Definition. Berikut adalah langkah-langkah membuat site definiton:
  • Klik Site > New Site

  • Isi Site Name,  dalam tutorial ini Site name diisi phpcms sesuai dengan folder yang kita buat di tutorial sebelumnya.

  • Local Site Folder, arahkan ke folder yang kita buat sebelumnya dengan nama phpcms


Arahkan ke dalam folder C:\xampp\htdocs\phpcms\, lalu klik select

  • Klik Server pada list di sebelah panel sebelah kiri, hal ini akan membuka panel dimana anda dapat mengatur jenis untuk pengetesan di Local Server ataupun Remote Server.

  • Klik Tanda Plus (+) untuk menambah Server baru guna untuk pengetesan website dinamis yang akan kita buat. untuk lebih jelasnya lihat gambar diatas.
  • Setelah itu Pada Menu Basic, Klik pada Connect Using: Local/Network
  • Untuk Settingan selanjutnya Perhatikan Gambar dibawah ini.
  • Selanjutnya, jangan langsung di Save, klik pada tab Advanced aturlah setinggannya seperti pada Gambar dibawah ini....!!!

Perhatikan yang dirubah disini hanyalah Server Model menjadi PHP MySQL, Setelah itu Save.

Setelah di save settingan kita tadi maka selanjutnya kita akan dibawah ke halaman Site Setup, untuk lebih jelasnya perhatikan gambar dibawah ini.



  • Selanjutnya kita harus memastikan apakah Site Definition yang kita buat tadi apakah sudah benar-benar jalan atau tidak, caranya perhatikan Gambar dibawah ini....!!!

Setelah itu akan muncul halaman baru setelah anda klik testing server, untuk lebih jelasnya perhatikan gambar dibawah ini, dan jangan lupa klik save.



dan akhirnya selesai sudah cara membuat Site Definition di Dreamweaver...!!!


Apabila ada yang kurang paham dari pemaparan diatas, silahkan tanyakan di kolom komentar yang ada dibawah....Terima Kasih Atas Kunjungannya (Iswanto Mahmud)

Silahkan Tunggu untuk tutorial selanjutnya....!!!

Kemarin Kita sudah membahas Langkah Awal Membuat CMS di Dreamweaver . sekarang kita akan membahas Membuat Site Definition di Dreamweaver ...

Langkah Awal Membuat CMS di Dreamweaver

Posted by: Unknown Posted date: 04:41:00 / comment : 0 ,

Assalammualaikum warohmatullahi wabarokatu,

Baiklah sebelum saya memulai tutorial ini hal yang perlu diperhatikan adalah:
1. Anda harus menginstall Dreamweaver terlebih dahulu
2. Anda harus menginstall Xampp di komputer/laptop anda dan
3. yang terakhir adalah siapkan kopi dan roko U-Mild (hehehe bercanda).....

Hal yang pertama yang harus anda lakukan adalah buka aplikasi dreamweaver yang telah anda install di komputer anda, setelah dreamweaver anda terbuka Klik pada Tab File, lalu pilih New atau Ctrl+N, seperti pada gambar di bawah ini.


setelah itu akan muncul halaman baru seperti dibawah ini.


setelah anda Create akan muncul halaman awal yang anda buat tadi seperti gambar dibawah ini.


Jangan lupa save halaman yang baru anda Create tadi, caranya klik File lalu pilih Save As,

ada yang ketinggalan, jangan lupa buatlah struktur folder seperti gambar di bawah ini.


simpan file yang anda buat  tadi di Dreamweaver didalam folder yang anda buat seperti gambar diatas. jangan lupa simpan dengan nama index.php, perhatikan gambar dibawah ini.

Selesai.....

Apabila ada yang kurang paham dari pemaparan diatas, silahkan tanyakan di kolom komentar yang ada dibawah....Terima Kasih Atas Kunjungannya (Iswanto Mahmud)

Assalammualaikum warohmatullahi wabarokatu, Baiklah sebelum saya memulai tutorial ini hal yang perlu diperhatikan adalah: 1. Anda haru...

Langkah Awal Membuat Web Dengan HTML

Posted by: Unknown Posted date: 13:09:00 / comment : 0


tag <>
digunakan untuk menuliskan sintak web, ada dua jenis, yaitu sintax web tag container dansintax web tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.
Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.
LANGKAH 1
  • MEMBUKA NOTEPAD.
LANGKAH 2
  • MENGETIKKAN SINTAK/SYNTAX.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
tekan enter, kemudian ketik
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.
Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.
Sekian tutorial HTML. Meskipun sedikit semoga bermanfaat untuk anda yang baru memulai membuat website menggunakan HTML.

tag <> digunakan untuk menuliskan  sintak we b, ada dua jenis, yaitu  sintax web  tag container dan sintax web  tag biasa. Tag contain...

Subscribe to: Posts (Atom)
⬆
Top