:::: MENU ::::

Rabu, 14 Desember 2016

HTML : HYPERLINK PADA HTML


Hyperlink atau biasa yang kita sebut link digunakan untuk menghubungkan antara 1 dokumen dengan dokumen lain atau bisa juga dari suatu situs ke situs lain. Nah, pada HTML ada tag khusus untuk membuat link yaitu tag <a> atau anchor. Tujuan dari pembuatan hyperlink pada html, agar saat kita klik suatu teks atau gambar, maka akan dialihkan ke halaman atau situs yang telah diatur pada saat penulisan hyperlink tersebut.

Tag <a> ini harus wajib diikuti oleh atribut href (hypertext reference) jika ingin berfungsi sempurna. Atribut href ini berisi alamat yang akan dituju pada saat teks atau gambar diklik.

Sintaks : <a href=”Alamat yang dituju”> Klik Disini ! </a>

Contoh :

  <html>
      <head>
            <title> Hyperlink </title>
      </head>
      <body>
            Belajar HTML <a href=”http://how-box.blogspot.co.id”> Klik Disini </a>
      </body>
  </html>

Hasil :




 
 

Saat kita klik teks "Klik Disini" maka akan menuju alamat yang sudah diatur pada saat penulisan yakni how-box.blogspot.com

Oh iya ada 2 jenis hyperlink pada HTML :  
  1. Alamat Absolute, yakni penulisan alamat file disertakan dengan alamat website nya.
    Contoh : <a href=”how-box.blogspot.com/tutorials/html/” > Klik Disini </a>
     
  2.  Alamat Relatif, yakni penulisan alamat file yang berada pada satu folder. Contoh : akan memanggil file latihan.html pada folder yang sama <a href=”latihan.html”> Klik Disini </a>

Oh ya saya akan memberi tahu atribut target = ”_blank” pada tag <a>, langsung saja : 

Atribut target=”_blank”

Atribut ini digunakan jika kita ingin membuka tab baru saat hyperlink di klik.

Sintaks : <a href=”http://www.hot-box.blogspot.co.id” target=”_blank”> Klik Disini ! </a>
 
Contoh :

  <html>
      <head>
            <title> Hyperlink </title>
      </head>
      <body>
            Link menggunakan atribut target =”_blank” <a href=”http://how-box.blogspot.co.id” target=”_blank”> Klik Disini </a>
      </body>
  </html>

Hasil :






Nampak nya terliha sama saja ya ? eittss, tapi jika diklik maka alamat yang dituju akan dibuka di tab baru. 
Yups sekian dulu, jika masih ada yang kebingungan silahkan tinggalkan komentar di kolom komentar.


Minggu, 04 Desember 2016

HTML : TAG SUPERSCRIPT DAN SUBSCRIPT


Tag Superscript ( <sup> ) dan Subscript ( <sub> ) biasa nya digunakan untuk menuliskan rumus matematika dan rumus kimia. Langsung saja ke penjelasannya :

Superscript

Tag ini digunakan untuk menandai bagian karakter untuk dicetak tinggi, seperti menuliskan pangkat.

Sintaks : angka/huruf <sup> angka atau huruf </sup>

Contoh :

<html> 
   <head> 
       <title> Superscript </title> 
   </head> 
   <body> 
            Penjumlahan dari 2<sup>2</sup> + 2<sup>2</sup> = 8 
   </body> 
</html>

Hasil :




Angka atau huruf yang diapit tag <sup> </sup> akan dicetak tinggi.

Subscript

Tag ini digunakan untuk menandai bagian karakter untuk dicetak rendah, seperti menuliskan senyawa kimia.

Sintaks : angka/huruf <sub> angka atau huruf </sub>

<html> 
   <head> 
       <title> Superscript </title> 
   </head> 
   <body> 
            Hasil dari 2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O 
   </body>  
</html>

Hasil :




Angka / huruf yang diapit oleh tag <sub> </sub> akan dicetak rendah.

Yups sekian dulu, bila ada yang kebingungan silahkan tinggalkan komentar dikolom komentar.

Jumat, 02 Desember 2016

HTML : MENAMBAHKAN GAMBAR PADA HTML

Gambar digunakan untuk memperjelas suatu informasi atau membuat suatu artikel menjadi lebih menarik. Nah, untuk menjadikan suatu halaman website menjadi menarik, kita perlu menambahkan suatu gambar yang cocok dengan artikel. 
Pada HTML format gambar yang didukung yaitu .PNG, .JPG/.JPEG, .GIF terdapat tag yang dikhususkan untuk menampilkan gambar yaitu tag <img> di ikuti dengan atribut src dan alt.  


Atribut src

Atribut src ini singkatan dari source, dan atribut ini digunakan untuk menunjukan URL / Letak gambar yang akan ditampilkan. Atribut ini wajib ada setiap menggunakan tag <img>.

Ada beberapa cara menampilkan gambar menggunakan atribut src.

1. Hanya memanggil nama gambar berserta formatnya, dengan syarat file html dan gambar harus berada pada 1 folder.


 


Misalkan seperti gambar diatas, didalam satu folder terdapat 1 file html (yang akan dimasukkan gambar) dan 1 gambar. Jadi jika ingin menampilkan gambar dengan atribut src, hanya menggunakan nama dan format gambar. 
Sintaks : <img src=”html.png” />

2. Menulis nama folder berserta nama gambar, jika gambar / file berada pada folder yang berbeda. 



 




Misalkan seperti gambar diatas didalam folder web terdapat 1 file html (yang akan dimasukkan gambar) dan 1 folder Gambar. Didalam folder gambar terdapat 1 buah gambar dengan format PNG. Jadi, jika ingin menampilkan Gambar di folder berbeda, sebutkan nama folder lalu nama gambar berserta formatnya.
Sintaks : <img src=“/gambar/html.png” />
 
3. Menuliskan URL dari gambar tersebut, jika gambar tersebut berada pada situs / web lain.

Sintaks : <img src=”http://how-box.blogspot.com/gambar/html.jpg” />


Atribut alt

Atribut ini yaitu alternative teks jika gambar tidak tampil, jadi di usahakan isi dari atribut alt ini adalah definisi dari gambar yang akan ditampilkan.
Sintaks : <img src=”html.png” alt= “html 5 ” />

Contoh lengkap penggunakan tag <img> :

<html>
   <head> 
       <title> Menyisipkan Gambar </title>
   </head>
   <body>
       <img src=”html.png” alt=”html-5”/>
   </body>
</html>

Hasil nya :




 















Yup, cukup mudah bukan? Ya sangat mudah. Oke sekian dulu, jika masih kebingungan silahkan tinggalkan komentar di kolom komentar, Semoga Membantu ^^. 



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