HTML : Membuat Tulisan Berjalan pada HTML (marquee)

Sudah lama tidak membuat artikel baru lagi.
Kali ini saya ingin melanjutkan artikel mengenai HTML. Pada artikel ini akan dibahas mengenai "cara membuat tulisan bergerak pada HTML".

Untuk membuat tulisan berjalan dapat menggunakan tag <marquee> </marquee>.

Penulisan umum : <marquee> Teks Di sini </marquee>

Langsung kita coba saja :

  Tulisan berjalan menggunakan Marquee

Nah hasilnya akan seperti diatas. Arah dari tulisan tersebut dari kanan ke kiri. Lalu, bagaimana caranya agar kita dapat mengubah arah jalannya tulisan tersebut misalkan dari atas ke bawah atau sebaliknya ?

cara nya cukup mudah, dengan hanya menambahkan attribut "direction". 

• DIRECTION

Penulisan umum : <marquee direction="up"></marquee>  

Ayo kita langsung coba saja :

Teks ke Atas 

Cukup mudah bukan ? mari kita jelaskan.

pada attribut direction nilai nya adalah up yang artinya bahwa tulisan tersebut akan bergerak dari bawah ke atas. Ada beberapa nilai yang dapat diterapkan pada attribut direction, yaitu :
- up  =  teks yang bergerak dari bawah ke atas
- bottom = teks yang bergerak dari atas ke bawah
- left = teks yang bergerak dari kanan atau kiri
- right = teks yang bergerak dari kiri ke kanan

Untuk arah tulisan kita sudah berhasil membuatnya, sekarang adalah bagaimana kita hanya ingin tulisan tersebut bergerak hanya sebanyak 2x atau 10x saja ? 
Cara nya pun cukup mudah hanya dengan menambahkan attribut "loop" yang berarti "ulang".

• LOOP

Penulisan umum : <marquee loop="angka"> Teks disini </marquee>

Langsung saja kita praktekkan dengan nilai loop sebanyak 2 : <marquee loop="2"> Tulisan ini berulang sebanyak 2x </marquee>

Tulisan ini akan berulang sebanyak 2x 

 Jika tidak terlihat tulisannya tolong di refresh karena jika sudah 2x looping maka tulisannya hilang.  Jika kita tidak menuliskan attribut loop boleh saja karena nilai default dari nilai loop adalah infinite

Eitss, ada beberapa attribut lagi loh yang dapat di tambahkan ke dalam tag <marquee> ini yaitu :

- scrollamount = digunakan untuk mengatur kecepatan gerak tulisan
- scrolldelay = digunakan untuk mengatur waktu gerak tulisan atau mengatur jeda.

Pasti masih kebingungan dengan hanya penjelasan seperti di atas bukan ? lebih baik kita praktekkan saja langsung.

Kita akan membahas scrollamount terlebih dahulu.

• SCROLLAMOUNT

Penulisan Umum : <marquee scrollamount="angka"> Teks disini </marquee>

Langsung saja kita praktekan dengan membuat dua buah statement dengan nilai scrollamount agar tahu perbedannya :

 Marquee dengan scrollamount bernilai 5  
Marquee dengan scrollamount bernilai 10 

Bagaimana ? terlihat jelas bukan perbedaan kedua hasil tersebut yang pertama lebih cepat dibandingkan yang kedua. Jadi, semakin besar nilai scrollamount maka semakin cepat tulisannya berjalan.

• SCROLLDELAY

Lalu sekarang bagian scrolldelay. Nilai dari scrolldelay ini akan di bagi 1000, contoh kita memasukkan nilai 500, maka 500/1000 = 0,5 jadi jeda dari tulisannya adalah 0,5 detik.
Contoh lain kita memasukkan nilai 5000, maka 5000/1000 = 5, jadi jeda tulisannya adalah 5 detik. Mari kita langsung praktekkan saja.

Penulisan Umum : <marquee scrolldelay="angka"> Teks disini </marquee>
Contoh :


Marquee yang menggunakan nilai scrolldelay 500  
Marquee yang menggunakan nilai scrolldelay 5000

Terlihat jelas bukan perbedaannya dari kedua hasil di atas ?  jadi semakin besar angka nya semakin lama juga jeda nya.

Okeee, kita sudah membahas cukup banyak tentang tag marquee semoga jelas dengan apa yang saya tulis di artikel ini. Jika ada yang ingin ditanyakan silahkan tanya melalui kolom komentar,

Continue Reading

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.

Continue Reading

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 ^{angka atau huruf}

Contoh :

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

Hasil :

Angka atau huruf yang diapit tag  akan dicetak tinggi.

Subscript

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

Sintaks : angka/huruf _{angka atau huruf}

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

Hasil :

Angka / huruf yang diapit oleh tag  akan dicetak rendah.

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

Continue Reading

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 ^^. 

Continue Reading

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

Continue Reading

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. 

Continue Reading

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

Continue Reading