:::: MENU ::::

Minggu, 27 November 2016

HTML : Tabel pada HTML

 Tabel merupakan struktur yang digunakan untuk menampilkan data ataupun informasi dalam bentuk kolom dan baris. Pasti pernahkan membuat tabel ? yap, pasti hamper semua nya pernah membuat table.

Pada HMTL ada beberapa tag yang digunakan untuk membuat tabel, yaitu : <table>, <tr>, <th> <td>.
Saya akan jelaskan terlebih dahulu setiap tag nya :

<table> : Tag awal dalam pembuatan tabel pada HTML.

<tr> : Singkatan dari Table Row, tag ini digunakan untuk membuat baris pada tabel.

<th> : singkatan dari Table Head, tag ini digunakan untuk membuat bagian kepala tabel.

<td> : Singkatan dari Table Data, tag ini digunakan untuk membuat kolom dan untuk menampilkan data

Contoh pembuatan tabel :

<html>
    <head>
        <title> Belajar Membuat Tabel </title>
    </head>
    <body>
        <table>
            <tr>
               <th> No </th>
               <th> Nama </th>
               <th> NPM </th>
           </tr>
           <tr>
               <td> 1 </td>
               <td> Rizal </td>
               <td> 39114576 </td>
           </tr>
           <tr>
               <td> 2 </td>
               <td> Fatahillah </td> 
               <td> 39114908 </td> 
           </tr> 
    </body> 
</html>

Hasilnya :






  Hmm.. tidak terlihat seperti tabel yang kalian bayangkan bukan :D ? , sepertinya kurang garis tepi pada tabel.

Cara menambahkan garis tepi pada tabel, pada tag <table> cukup tambahkan atribut border dengan nilai =”1”(berapa saja asal jangan 0).

Kurang lebih jadi seperti ini : <tabel border =”1”>, coba run di browser lagi, maka hasilnya :




 


Nah yang ini baru ada garis tepinya hehehe. Oke saya jelaskan, atribut border berguna untuk memberikan garis tepi pada tabel, sedangkan nilai 1 adalah nilai ketebalan garis tersebut.

Mudah bukan membuat tabel pada HTML ? yap sangat mudah sekali …

Jika masih ada yang kebingungan silahkan tinggal kan komentar dikolom komentar ^^, Nantikan Artikel tentang HTML selanjutnya :D

Senin, 21 November 2016

HTML : ENUMERASI ATAU PENOMORAN PADA HTML


Di postingan kali ini saya akan sharing tentang Enumerasi atau penomoran pada HTML. Enumerasi pada HTML bisa kita sebut dengan list. Tag yang digunkan adalah Tag <ul > dan <ol> lalu di ikuti oleh tag <li>. Langsung saja yaaa…


UNORDERED LIST

Tag <ul> atau bisa disebut Unordered List penomorannya tidak berurut. Oke langsung ke contoh ya :

Sintaks :  <ul>
                <li> Teks Disini </li>
               </ul>

Contoh :
<html>
    <head>
        <title> UNORDERED LIST </title>
    </head>
    <body>
        <ul>
        <li> Unordered List </li>
        <li> Unordered List </li>
        <li> Unordered List </li>
        </ul>
   </body>
   <html>

Nah, jika sudah coba jalankan di web browser, hasilnya : 




Bisa dilihat, penomoran yang digunakan oleh tag <ul> adalah lingkaran atau bullet, sehingga disebut daftar yang tak berurutan atau penomoran yang tidak berurut.


ORDERED LIST

Tag <ol> atau bisa disebut Ordered List penomorannya urut. Oke langsung saja ke contohnya :

Sintaks :  <ol>
                <li> Teks Disini </li>
               </ol> 
 
Contoh :
<html>
    <head>
        <title> ORDERED LIST </title>
    </head>
    <body>
       <ol>
       <li> Ordered List </li>
       <li> Ordered List </li>
       <li> Ordered List </li>
       </ol>
   </body>
   <html>

Nah, Jika sudah coba jalankan di web browser, hasilnya :


Bisa dilihat hasilnya, beda dengan tag <ul>, penomoran yang digunakan oleh tag <ol> menggunakan angka, sehingga bisa dikatakan daftar yang terurut atau penomorannya terurut.

Okeee, dari kedua penjelasan serta masing-masing contoh nya, sudah jelas bukan perbedaannya ? 
Ada juga yang disebut list bersarang, apa itu list bersarang ?

Nested List (List Bersarang)

Yaitu sebuah list yang didalamnya terdapat list lagi. Jadi kita bisa gabung kan tag <ol> dan tag <ul>.

Contoh :
<html>
   <head>
       <title> Nested list </title>
   </head>
   <body>
       <ol>
       <li> List Bersarang </li>
       <ul>
       <li> Contoh list Bersarang </li>
       <li> Contoh list Bersarang </li>
       </ul>
       <li> List Biasa </li>
       </ol>
   </body>
</html>
 
Coba jalankan dibrowser, hasilnya :





 
 Jika ingin membuat List bersarang tambahkan saja tag <ul> atau <ol> setelah tag <li></li> seperti contoh di atas.



Cukup sekian dulu tutorial nya, jika masih ada yang kebingungan silahkan tinggalkan komentar di kolom komentar ^^, Terima Kasih. 



Rabu, 16 November 2016

HTML : TIPOGRAFI PADA HTML



Pada postingan kali ini saya ingin share / berbagi pengetahuan tentang tipografi pada HTML. Lantas, Apa itu topograpi ?

Tipografi adalah Suatu teknik untuk memanipulasi huruf untuk membuat kesan tertentu dengan tujuan kenyamanan semaksimal mungkin pada saat dibaca. Pada HTML ada beberapa Tag yang digunakan untuk memanipulasi huruf atau text contohnya Heading, Font-face dll. Okee kita bahas saja langsung :


HEADING

Heading biasanya digunakan untuk membuat judul atau sub judul. Heading pada HTML ada 6 jenis.

Penulisan Umum : <hn> teks disini </hn>

* n = angka 1-6

Contoh :

<html>
   <head>
       <title> Belajar Heading </title>
   </head>
   <body>
      <h1> Heading 1 </h1>
      <h2> Heading 2 </h2>
      <h3> Heading 3 </h3>
      <h4> Heading 4 </h4>
      <h5> Heading 5 </h5>
      <h6> Heading 6 </h6>
</body>
</html>

Maka jika dijalankan di browser hasilnya :


* Semakin besar Angka Heading, maka semakin kecil ukuran font nya.



FONT-FACE

Font-Face digunakan untuk mengganti jenis font.

Penulisan Umum : <font face=”jenis_font”> Teks Disini </font>

Contoh :

<html>
   <head>
       <title> Font Face </title>
   </head>
   <body>
       <font face = “Calibri”> Font tipe Calibri </font>
       <font face = “sans-serif”> Font tipe sans-serif </font>   
       <font face = “Times New Roman”> Font tipe Times new Roman </font>
</body>
</html>

Maka jika dijalankan di browser masing-masing hasilnya : 


Teks tersebut akan berubah sesuai jenis font nya.



FONT - COLOR

Font color berfungsi untuk mewarnai font.

Penulisan Umum : <font color =”warna dalam bahasa inggris atau kode warna”> Teks Disini </font>

Contoh :

<html>
   <head>
       <title> Font Color </title>
   </head>
   <body>
       <font color=”red”> Teks Warna merah </font><br/>
       <font color=”#00FF00”> Teks Warna Hijau dengan kode warna #00FF00 </font>
   </body>
</html>

Hasil nya :
 

* jika menggunakan kode warna, Selalu di awali dengan tanda pagar atau “#”(tanpa tanda Petik).



BOLD, ITALIC, dan UNDERLINE

Pada HTML pun tulisan bisa dibuat menjadi tebal, miring, dan bergaris bawah. Caranya sih cukup mudah, cukup tambahkan :

<b> </b> : Tag ini berfungsi untuk membuat huruf menjadi tebal (bold).

<i> </i> : Tag ini berfungsi untuk membuat huruf menjadi Miring (italic).

<u> </u> : Tag ini berfungsi untuk membuat huruf ada garis bawah nya (Undeline).

Penulisan Umum : <format_huruf> Teks Disini </format_huruf>

Contoh :

<html>
    <head>
       <title> Format Huruf </title>
    </head>
    <body>
       <b> Huruf Bold </b><br/>
       <i> Huruf Miring </i><br/>
       <u> Huruf dengan Garis Bawah </u><br/>
       <i><b><u> Huruf Miring, Tebal, dan Bergaris Bawah </u></b></i>
</body>
</html>

Jalankan di Browser :


* Tag <b></b> sama saja dengan tag <strong> </strong>, sama sama menghasilkan huruf tebal


Nah mudah bukan ? 
sekian dulu, jika ada yang masih kebingungan silahkan tinggalkan komenter di kolom komentar

HTML : TAG, ELEMEN, ATRIBUT, dan Struktur Dasar HTML



Pada penulisan script HTML akan bertemu dengan yang namanya Tag, Elemen, dan Atribut. Lalu apa maksud dari ke 3 hal tersebut ? Dalam postingan kali ini akan memberi tahu apa itu Tag, Elemen, Atribut serta struktur dasar HTML. Oke langsung saja ya ..

TAG
 
Tag adalah Suatu teks khusus yang memberi tahu web browser bagaimana teks atau objek yang kita buat akan ditampilkan. Hampir semua tag html itu ditulis secara berpasangan, maksudnya ada tag pembuka dan tag penutup. Tag selalu di apit oleh symbol “<” dan “>”.

Sintaks : <tag_pembuka> Teks atau objek yang akan kita tampilkan </tag_penutup>

Contoh :

<p> Belajar HTML </p>

Penjelasan :

- <p> adalah tag pembuka nya

- Belajar HTML : teks yang akan ditampilkan

-</p> adalah tag penutupnya.



Tetapi ada juga tag yang tidak selalu berpasangan, contoh :

- <br/> : break line artinya digunakan untuk pindah kebaris selanjutnya.

- <hr/> : horizontal artinya digunakan untuk membuat garis secara horizontal

- <link /> : biasanya digunakan untuk memanggil file-file eksternal



ELEMENT 


Element adalah teks atau objek yang berada diantara tag pembuka dan tag penutup.

Contoh : <p> Belajar HTML </p>

Penjelasan : “Belajar HTML” adalah elemen dari tag <p>.

Elemen tidak hanya berisi teks atau objek tetapi juga bisa berisi tag lainnya.

Contoh : <p> <b> Belajar HTML </b> </p>

Penjelasan : “<b> Belajar HTML </b>” adalah elemen dari tag <p>.



ATRIBUT 
 

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini dapat berupa 

intruksi atau perintah untuk merubah warna background, merubah warna teks, dll. Atribut

memiliki nama (name) dan nilai (value).

Sintaks : <tag_pembuka nama_atribut = “nilai_atribut”> teks atau objek </tag_penutup>

Contoh : <p color=”blue”> Belajar HTML </p>

Penjelasan : color adalah nama dari atibutnya, sedangkan “blue” adalah nilai dari atributnya.

* nilai atribut selalu di apit oleh tanda petik satu (‘) atau petik dua (“).



Struktur HTML:

<html> 
 
     <head>

     </head>

     <body>

         .

         . ( Isi Konten )

         .
 
    </body>

</html>



Penjelasan :

1. Tag <html> adalah awal dimana document HTML dibuat dan tag </html> adalah penutup nya.

2. isi Tag <head> </head> bisa seperti judul atau pun memasukkan CSS eksternal dan CSS internal dan lain-lain.

Contoh:

        - Membuat Judul (Title)

               <head>
                    <title> Belajar HTML </title>
               </head>

Fungsi dari tag <title></title> adalah membuat judul suatu halaman. Bukan berarti judul suatu kontent atau artikel yang anda buat.

- Memasukkan link CSS eksternal

              <head>
                     <link href=”style.css” type=”text/css” rel=”stylesheet” />
              </head>

3. Tag <body> </body>, nah disinilah kalian isi dengan content yang akan kalian buat, entah itu video, gambar, teks, dll.


mari kita mencoba menerapkannya. Tools yang dibutuhkan :

1. Web Browser ( Contohnya : Mozilla Firefrox, Google Chorme, Safari, dan lain-lain ).

2. Text Editor ( Contohnya : Notepad, Notepad++, Sublime Text, dan lain-lain).

Coba ketikan script berikut pada text editor anda :

<html>
   <head>
      <title> Belajar HTML </title>
   </head>
   <body>
       Belajar HTML itu Mudah !
   </body>
</html> 

lalu jalankan pada web browser, Hasil nya: 



 * Ingat !! pada HTML selalu ada Tag Pembuka dan Tag Penutup. Misalkan, tag pembukanya <html> berarti penutupnya </html> atau misalkan tag pembukanya <p> berarti tag penutupnya yaitu </p>, Tag penutup selalu diawali dengan “ / “ (tanpa tanda petik).

* Tata letak tag-tag nya pun harus diperhatikan :
 


Maksud dari gambar diatas ialah tag terakhir yang dipakai harus di tutup pertama. 

Nahh,, Sekian dulu saya berbagi ilmu mengenai HTML. jika masih ada yang kebingungan silahkan tinggalkan komentar di kolom komentar ...




Kamis, 10 November 2016

HTML : Pengertian HTML dan Sejarah HTML









HTML adalah singkatan dari Hyper Text Markup Language yang artinya sebuah bahasa Markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).


PERKEMBANGAN HTML

Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.


- HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).


- HTMl versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.


- HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.


- HTML versi 3.2

Perang antar browser terus berlanjut dikarenakan mereka membuat tag HTML mereka sendiri. Untuk menghentikan hal ini, dibentuklah sebuah organisasi yang menangani standard dari HTML. Organisasi ini bernama World Wide Web Consortium (W3C).


- HTML versi 4.0

HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini diambil. HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.


- HTML versi 5

HTML 5 adalah versi terakhir dari HTML . HTML 5 membawa banyak sekali perubahan terhadap versi sebelumnya. Banyak tag baru yang diperkenalkan . Selain itu, HTML 5 mendukung streaming video tanpa menggunakan flash. 



Fungsi HTML :

1.  Membuat Website
2. Menambahkan Video, Gambar, Audio dll pada halaman Web
 
Contact us

Pages

Labels

About