Wednesday, April 13, 2016

MENGENAL PENGERTIAN DAN DASAR DARI CSS KODE

MENGENAL PENGERTIAN DAN DASAR DARI CSS KODE


Halo sobat semua salam jumpa lagi yah  hehehe setelah kita kemaren mengetahui tentang dasar dari sebuah webpage yaitu kode HTML  sekarang kita melangkah kepada CSS , sepertti kita bahas sebelumnya HTML ibaratnya tulang dan kerangka sebuah web sedangkan CSS adalah kulit dari web page.

CSS sendiri adalah singkatan dari Cascading Style Sheet , nah fungsinya adalah untuk mendeskripsikan format , warna , dan ukuran dari HTML itu . Style sheet mendeskripsikan bagaimana HTML itu akan terlihat dan terbaca dalam browser. Nah dalam postingan MENGENAL PENGERTIAN DAN DASAR DARI CSS KODE ini kita akan berkenalan dari dasarnnya terlebih dahulu.

Oke sekarang ada sebuah kode HTML dasar bisa sobat coba simpan  ,

<!DOCTYPE html!>

<html>
<head>

<title> BELAJAR CSS </title>




<style type="text/css">
/*   

body {
background-color: #99FFCC;
}
#header {
clear: none;
height: 75px;
width: 1000px;
background-color: #FF0000;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#wrapp {
clear: both;
height: 500px;
width: 1000px;
}
#kontenwrapp {
clear: none;
float: left;
height: 1000px;
width: 700px;
background-color: #CCFF00;
}
#wrapp .sidebar {
clear: right;
float: right;
height: 1000px;
width: 300px;
background-color: #00FF99;
}

 *\

</style>
</head>

<body>
<div id="header">HEADER</div>
<div id="wrapp">
  <div id="kontenwrapp">ISI DARI WEB PAGE </div>
  <div class="sidebar"> SIDEBAR WEBPAGE </div>
</div>
</body>
</html>



simpan dengan format HTML dan buka dengan browser , jangan lupa hilangkan kode yang saya kasih tanda merah dan lihat hasilnya . Keberadaan CSS dalam HTML tersebut setelah tag  <style> dan di akhiri dengan tag penutup </style> dalam contoh diatas untuk kode CSS saya kasih warna biru.

Hasilnya akan tampak seperti foto berikut ini , coba sobat simak perbedaan dua foto ini

CONTOH TANPA CSS
tanpa CSS



CONTOH PENERAPAN CSS
menggunakan CSS


Nah disini yang  Saya katakan kalau CSS adalah kulit dari kerangka web page . Nah  sudah pusingkan sobat hehehee ,,,, oke di post selanjutnya kita akan berkenalan dengan CSS lebih jauh lagi  semoga bermanfaat ya sobat.





Saturday, April 9, 2016

MENGENAL KODE TAG DIV DAN SPAN DALAM HTML

MENGENAL KODE TAG DIV DAN SPAN DALAM HTML

Hai sobat , tag div bisa dibilang sebagai wadah , dan didalam body tentunya untuk membuat header , side bar dan lain sebagainya anda bisa menggunakan tag ini. Div berarti " division" , tag div nanti akan berkaitan dengan kode css yang kita punya untuk memperindah serta merubah ukurannya.

contoh penggunaan tag div pada web page:


simpan kode html berikut ini dengan format html menggunakan note pad lalu buka pada browser sobat ,

<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
</body>
</html>

hasilnya akan seperti gambar dibawah ini sobat !

contoh hasil kode



Nah kalau div membagi bagian - bagian web page beda lagi  dengan tag <span> atau span. tag "span" memungkinkan kita untuk  mengontrol styling untuk bagian yang lebih kecil dari web page yang kita buat seperti text atau sebagainya. Semisal dalam suatu paragraf kita ingin membuat kata pertama tebal atau cetak miring maka gunakan tag span sebelum kata yang digunakan kemudian tutup dengan tag penutup.

contoh :

<p>MAKAN <span style="color; red"> NASI MERAH </span> DIPANCI </p>

maka kata diantara <span> dan </span> akan memiliki warna merah.


sekarang mari kita coba membuat sebuah web page dengan kombinasi <div> dan <span> juga beberapa kombinasi lainnya.

- menaruh link dalam div

=>>  <a href="url website "><div></div></a>

- merubah style div , anda juga bisa mengganti dengan atribute comand lainnya

=>> <div style="width:50px; height:50px; background-color:yellow"></div>

- menaruh span dalam paragraf , head , dan div


=>> <p> coBA <span  SPAN TULISAN INI </span>

=>> <h1> coba span <span style="color:red">tulisan ini </span></h1>

=>>  <div style="width:728px; height:90px; background-color:red"> TULISAN WARNA MERAH<span style="font-size:30px;color:blue">TULISAN INI BERWARNA BIRU KARENA TAG SPAN </div>

contoh kode  :



<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>

<h1> coba span <span style="color:red">tulisan ini </span></h1>


<a href="ustkode.blogspot.com"><div style="width:50px; height:50px; background-color:red">TULISAN INI MENGANDUNG LINK </div></a>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:728px; height:90px; background-color:red"> TULISAN WARNA MERAH<span style="font-size:30px;color:blue">TULISAN INI BERWARNA BIRU KARENA TAG SPAN </div>
</body>
</html>



dan lihat hasilnya seperti dibawah ini sobat

hasil percobaan kode





mudah kan sobat semua , semoga bermanfaat jangan sungkan bertanya ya atau kalau ada yang salah silahkan di kritik dalam kolom komentar sampai jumpa!!

Friday, April 8, 2016

BELAJAR MEMBUAT TABEL DENGAN KODE HTML

BELAJAR MEMBUAT TABEL DENGAN KODE HTML


Halo  sobat semua, sekarang kembali kita berkenalan dengan si kode html kali ini kita  coba membuat sebuah tabel dengan bekal kode html. Tabel sendiri sangat berguna dalam pembuatan web , selain untuk mempermudah pengunjung web kita juga untuk menyimpan data tabular dalam web kita.Ada banyak sekali tag  yang terkait dengan tabel dan untuk memulainya diawali dengan tag <table> dan ditutup dengan tag </table>.

Sebuah informasi dalam tabel diatur dalam kolom dan baris, jadi tag yang digunakan untuk membuat baris didalam tabel adalah <tr> dan ditutup dengan tag </tr>. Setelah itu kita akan membuat kolom dengan menggunakan tag <td>  dan ditutup dengan </td> . jadi nanti dalam kombinasi html dalam pembuatan table didalamnya terdapat tag tadi.

Bagaimana denngan kolom kedua dan berikutnya kita tinggal mengulangi langkah diatas dan dalam isian kolom kita isi sesuai informasi yang akan dimasukan. Nah selanjutnya yang kita perlu pahami bahwa sebuah tabel juga memerlukan kepala untuk judul dan badan untuk informasi di didalamnya juga untuk mempermudah kita dalam memperindah tabel yang kita buat. Untuk itu kita buat tag <thead> dan <tbody> letakan didalam tag body.


Bagaimana menyatukan dua kolom ? Untuk menyatukan gunakan atribute "colspan" dan jumlah kolom yang akan digabungkan jadi setelahnya untuk menggunakannya bisa dilihat pada contoh di bagian bawah artikel ini.

Mempercantik dengan menambahkan atribute "style" di setiap awal tag yang akan diubah warn , ukuran , garis tabel , dan lain sebagainya seperti pada contoh dibawah ini.



contoh :

<!DOCTYPE html!>
<html>
    <head>
        <title>BELAJAR MEMBUAT  TABEL DENGAN HTML</title>
    </head>
   
    <body>
       
      <table border="1px">
        <thead>
         <tr> <th colspan="2" style="font-family: Verdana;font-size:25px;color:blue" > BELAJAR </th>
          </tr>
          <th style="color:green;font-size:15px">BIKIN TABEL</th>
          <th>HTML </th>
        </thead>
         <tbody>
     
            <tr>
                <td style="color: yellow">KOLOM PERTAMA BARIS 1</td>
                <td>KOLOM KEDUA BARIS 1</td>    
            </tr>
           
            <tr>
                <td>KOLOM PERTAMA BARIS 2</td>
                <td>KOLOM KEDUA BARIS 2</td>
            </tr>
     </table>
        </tbody>

    </body>
</html>


Simpan kode diatas dengan format html menggunakan notepad , setelah itu coba buka dengan browser sobat maka jadinya akan seperti gambar berikut ini!

contoh hasil membuat tabel dengan html



Mudahkan sobat ?? Semoga bermanfaat ya..





Thursday, April 7, 2016

MENGATUR DAN MEMPERCANTIK HURUF DENGAN HTML


MENGATUR DAN MEMPERCANTIK HURUF DENGAN HTML


Setelah tahu struktur html dan pengaturanya sekarang kita coba mempercantik dengan mengubah ukuran huruf, warna , jenis juga background dan penempatanya.

oke kita awali dari mengubah ukuran huruf , warna dan jenis huruf dalam web page kita menggunakan html. Untuk mengubah ukuran , warna dan jenis kita perlu menambahkan atribut style di dalam tag sebagai contoh berikut

untuk merubah ukuran huruf dalam sebuah paragraf.

<p style="font-size: 10px"> TULISAN PARAGRAF </p>


untuk ukuran di akhiri dengan px, merupakan singkatan dari pixel. untuk penggunanya pun bisa diterapkan pada tag yang ingin diubah.

Untuk merubah warna tambahkan  comand color setelah atribut style ditambah dengan warna yang di inginkan

contoh:


<p style="color: black"> TULISAN PARAGRAF </p>


nah untuk mengkombinasikan dengan yang lain kita cukup menambahkan tanda titik koma  diantara setiap atribut yang dipasangkan.

contoh:

<p style="color: blue, font-size: 12px">  TULISAN PARAGRAF </p>


Nah sobat mudahkan ? berikut ini beberapa kode dari atribut style untuk mempercantik tampilan huruf nantinya akan mempermudah kita dalam berlatih membuat web page:

color:  <= warna huruf
font-size:   <= ukuran huruf
font-family:   <= jenis huruf
text-aligne :   <= mengatur penempatan text ( kanan / kiri )



Dalam contoh berikut ini coba letakan kode berikut ini dalam notepad, simpan dengan format html dan buka dengan browser Anda :


<!DOCTYPE html!>
<html>
<head>
<title> MEMPERCANTIK HURUF </title>
</head>
<body>
<h1>MEMPERCANTIK HURUF</h1>

<p style="font-size: 10px"> UKURAN HURUF 10 PX</p>
<p style="color: blue"> WARNA HURUF BIRU</p>
<p style="font-family: Arial"> JENIS HURUF ARIAL </p>
<p style="background-color: red"> BACKGROUND HURUF MERAH</p>
<p style="text-align: right"> TULISAN BERADA DI KANAN </p>
<p style="font-size: 20px;color: blue;font-family: Arial;background-color: red;text-align: center"> KOMBINASI </p>
</body>
</html>



hasilnya akan seperti berikut ini ,

CONTOH HASIL KODE


Ubah tulisan sesuai dengan keinginan Anda  , selamat mencoba sobat semoga bermanfaat yah,,,,






Monday, April 4, 2016

MENAMBAHKAN ELEMENT UNORDERED LIST DAN ORDERED LIST MENGGUNAKAN KODE HTML

MENAMBAHKA ELEMENT UNORDERED LIST DAN ORDERED LIST MENGGUNKAN KODE HTML


Hai sobat bagaimana kabar ? semoga sehat selalu , kembali pada belajar dasar html, setelah kemarin kita tahu struktul awal dari sebuah webpage dalam postingan BELAJAR HTML DASAR , MEMBUAT WEB PAGE SEDERHANA dari kode dasar html  mari kita coba menambahkan beberapa element lagi dalam kode html kita selain paragraf.

MENAMBAHKAN UNORDERED LIST DAN ORDERED LIST

Untuk menambahkaN list dalam page sebaikanya kita tahu dulu makna dari masing masing kode tersebut, penempatan , dan contoh penggunaanya.

list => Atribut yang digunakan untuk membuat daftar juga sub daftar dalam postingan web kita. Daftar menurun bisa seperti dalam huruf , angka , angka romawi dan simbol - simbol lainnya. kode tagnya <li>

ordered list => Kode atribut untuk membuat daftar berurutan dimana setipa daftarnya terdapat angka pada awalnya dengan kata lain dengan nomor urut. Untuk kode ordered list menggunakan tag <ol> </ol>, pada bagian daftarnya menngunakan tag <li>  </li>.

Unordered list => Kode atribut untuk membuat daftar list yang tidak menggunakan angka pada awalnya dengan kata lain tidak menggunakan nomor urut. Kodenya <ul>  </ul> dan dalam setiapa bagianya menggunakan tag <li> </li>


Definition List => Kode atribut untuk membuat daftar lebih menjorok kekanan jadi seperti di kamus, istilah atau bahasa. Penempatanya pun sama namun tidak ada penomeran urutan dalam hasilnya . Kode yang digunakan adalah tag <DL>  </DL> untuk judul atau daftar yang dibuat, <DT>  </dt>  untuk istilah , <DD>   </DD> untuk definis dan penjelasan lebih rinci tentang istilah yang kita buat.

contoh kode  :

LIST: tag <li>  DAFTAR </li>
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT LIST </title>
</head>
<body>
<li>DAFTAR 1</LI>
<li>DAFTAR 2</LI>
<li>DAFTAR 3</li>
</body>
</html>
contoh kode html <list>


ORDERED LIST: tag <ol> <li>      </li> </ol>

<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT LIST </title>
</head>
<body>

<ol> CONTOH ORDERED LIST

<li>DAFTAR 1</LI>
<li>DAFTAR 2</LI>
<li>DAFTAR 3</li>
</ol>


</body>
</html> 
contoh hasil ordered list



UNORDERED LIST : tag <ul>  <li> </li>  </ul>
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT LIST </title>
</head>
<body>

<ul> CONTOH UNORDERED LIST

<li>DAFTAR 1</LI>
<li>DAFTAR 2</LI>
<li>DAFTAR 3</li>
</ul>
</body>
</html> 
contoh hasil unordered list



Definition List : tag <DL> <DT></DT>   <DD></DD>    </DL>

<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT LIST </title>
</head>
<body>
<DL> CONTOH DEFINITION LIST
<DT>ISTILAH </DT>
<DD>DEFINISI ISTILAH YANG DIBUAT ATAU KETERANGAN </DD>
</DL>
</body>
</html>
CONTOH DEFINITION LIST



dan jika ingin menggabungkanya dengan pragraf , gambar dan link kita tinggal menerapkan dan menggabungkannya, sebagi contoh kode ada gambar dalam daftar masukan kode <img src="url gambar " > letakan diantara tag <lil> </li> begitu pula dengan link.

bagaimana sobat mudah diterapkan bukan , semoga bermanfaat ya ! Jangan sungkan untuk bertanya.

Saturday, April 2, 2016

BELAJAR HTML DASAR , MEMBUAT WEB PAGE SEDERHANA

BELAJAR HTML DASAR , MEMBUAT WEB PAGE SEDERHANA


Hai sobat untuk dasar html kali ini kita coba untuk membuat sebuah web page, nah struktur utama yaitu kode html itu sendiri. Kalau diibaratkan Sama seperti rumah html dalam web page membutuhkan sebuah frame untuk menempatkanya, kata mudahnya adalah wadahnya. Dalam frame html terdiri dari <! DOCTYPE>, <html>, <head>, dan <body> tag.

Sebagai contoh ketika Anda memulai coba tuliska kode berikut di notepad, simpan dengan format .html dan buka dengan browser dan lihat hasilnya



<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>

TULIS PESAN APA SAJA

</body>
</html>




Jika sudah sekarang tambahkan header diantara tag <body> untuk memberikan sebuah judul paragraf dalam postingan web, dengan tag " <h1>  judul </h1>".

Buatlah isian dari postingan Anda , dengan menambahkan tag <p>  tulisan Anda</p> , Anda juga bisa menambahkan paragraf baru dengan menambahkan tag paragraf lagi. Letakan tag <p> setelah tag <h1> untuk memberikan isi dari header yang sudah Anda tulis lagi.

Untuk menambahkan header lagi dengan isian Anda tinggal mengulangi kode diatas untuk tag header gantikan dengan h2,h3 dan seterusnya untuk membedakan ukuran dalam tiap header.

Sekarang tambahkan gambar dalam web page anda dengan menggunakan tag <img src="url gambar "/> letakan dibawah header. Nah sekarang coba tambahkan link dalam paragraf beru jadi Anda memiliki 1 paragraf tulisan, link dan foto.


contoh berikut kode html yang sudah kita rangkai tadi , disini saya menggunakan gambar sendiri Anda juga bisa mnggunakan gambar lain juga mengubah kata - kata sesuai keinginan Anda sobat.



<!DOCTYPE html>
<html>
<head>
<title> web page Anda</title>
</head>
<body>
<h1>HEADEER 1</h1>
<p> isi paragraf</p>
<p> isi paragraf </p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvb2b0yPJNrqlIGgEdhYzJ25YE_XnZ8iZ9sGfHn3omQTVccB0adXGKBxUi_tv3ZPBH7WeYRmCss4Rnl5nBKsNwOvDcfWQRKdAwtPjtHpVuut0DsHDO8AiqwyyODF-UsI8E9ACCQHE1WWqJ/s1600/untitled.JPG" />
<p>    <a href="http://justkode.blogspot.com/"/>BELAJAR HTML</a> </p>

</body>
</html>





Nah sekarang kita tahu tahapan awal dalam membuat web page sederhana hanya dengan kode dasar html, jika sudah berhasil maka akan tampak seperti gambar dibawah ini.

contoh hasil kode
contoh hasil kode


bagaimana sobat mudah kan ? jangan sungkan bertanya ya ,

Thursday, March 31, 2016

MEMASUKAN LINK DAN FOTO MENGGUNAKAN KODE HTML

Seteleh dipostingan kemarin kita mengatahui apa itu html , fungsi dan pemanfaatanya sekarang kita coba menggunakan kode html untuk menambahkan link ,foto dan foto yang terdapat link didalamnnya.

Kode tag yang akan digunakan adalah :

<a href="link tujuan"> Pesan  </a>    <= untuk menambahkan link dengan anchor text.

<img src="link foto"/>                <= untuk menambahkan foto.

<a href="link tujuan"><img src="link foto"/></a>    <= untuk menambahkan foto yang mengandung link jika di klik akan mengarah kepada link didalamnya.


untuk percobaan coba kode dibawah dan ubahlah sesuai keinginan Anda. Simpan dengan format html dan buka menggunakan browser dan lihat hasilnya.


<!DOCTYPE html>

<html>
<head>
<title>test judul</title>
</head>
<body>
           <h1> judul heading</h1>
<img src="https://goo.gl/biq7FY"/>
<p>isi paragraf 1 </p>
<p>isi paragraf 2 </p>
<p>isi paragraf 3 </p>

<h2>Contoh Foto Bisa di klik</h2>
<a href="http://justkode.blogspot.com"><img src="https://goo.gl/biq7FYm"/></a>






</body>
</html>



Pada dasarnya platform blog atau web saat ini sudah memberikan cara yang sangat simple untuk menaruh link , foto dan video hanya saja jika anda mengunakan plaform yang berdiri sendiri dan self hosted masih banyak yang menngunakan cara manual seperti kode diatas tadi.

Jika memang dasarnya untuk blog pribadi saran saya gunakan platform blogger dari google , karena selain kemudahan untuk editing yang tanpa harus paham kode html blogger juga menyediakan space yang lumayan besar dengan gratis bagi para blogger. Jadi untuk mereka yang awan dan baru mengenal akan sangat mudah mempelajari seluk beluk blogger.

nah mudah"an bisa dipahami ya sobat. semoga bermanfaat jangan sungkan untuk bertanya :)