Cara Membuat Table Sederhana Dengan HTML


COntoh-Gambar
Cara Membuat Table Dengan HTML - Table atau tabel merupakan susunan data dalam baris dan kolom, nah sekarang kangrpl akan memberikan tutorial Cara Membuat Table Dengan HTML, nah pasti kamu pernah mengoprasikan ms.exel atau ms.word kalo yang sudah tau ms.exel pasti sudah tak asing lagi dengan table, yang kita pelajari ini sama hasilnya akan tetapi cara membuatnya berbeda jauh.
Mungkin bila kamu memakai software dreamweaver itu sangat gampang membuat table tinggal klik klik doang jadi, nah di html sangat apa ya di bilang susah enggak di bilang mudah ya bisa jadi kali ya.

Lihat Hasilnya : DEMO

Nah biasanya table itu di gunakan untuk data data misalnya data siswa,barang,user,admin,dan masih banyak lagi.

Pertama buka text editor kalian masing masing, contohnya : notepad,notepad++,sublime,atom atau apalah.

Kita awali dengan dengan kode kode di bawah ini
<html>
<head>
  <title>Judul Web</title>
</head>
<body>
isi table
</body>
</html>
 Lalu ketikan kode di bawah ini di dalam kode body
<html>
<head>
  <title>Judul Web</title>
</head>
<body>
<table>
        <tr>
            <th>No</th>
            <th>Nama Depan</th>
            <th>Nama Belakang</th>
            <th>Nomor HP</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ajis</td>
            <td>Maulana</td>
            <td>08389074xxxx</td>
            <td>Kp.Kadu Gading</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Susi</td>
            <td>lawati</td>
            <td>08389078xxxx</td>
            <td>Kp.Cikeutar</td>
        </tr>
        <tr>
            <td>3</td>
            <td>XXXXX</td>
            <td>XXXXXXX</td>
            <td>0989766XXXX</td>
            <td>Kp.BlaBlaBla</td>
        </tr>
        <tr>
            <td>4</td>
            <td>XXX</td>
            <td>XXXX</td>
            <td>XXXXXXXX</td>
            <td>XXXXXXXXX</td>
        </tr>
    </table>
</body>
</html>
 Untuk
<th>No</th>
            <th>Nama Depan</th>
            <th>Nama Belakang</th>
            <th>Nomor HP</th>
            <th>Alamat</th>
Bisa diganti misalnya " NO,Nama Depan,Nomor HP,Alamat " Semau Kamu.
Dan Yang 
<tr>
            <td>1</td>
            <td>Ajis</td>
            <td>Maulana</td>
            <td>08389074xxxx</td>
            <td>Kp.Kadu Gading</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Susi</td>
            <td>lawati</td>
            <td>08389078xxxx</td>
            <td>Kp.Cikeutar</td>
        </tr>
        <tr>
            <td>3</td>
            <td>XXXXX</td>
            <td>XXXXXXX</td>
            <td>0989766XXXX</td>
            <td>Kp.BlaBlaBla</td>
        </tr>
        <tr>
            <td>4</td>
            <td>XXX</td>
            <td>XXXX</td>
            <td>XXXXXXXX</td>
            <td>XXXXXXXXX</td>
        </tr>
Bisa diganti sama , baris pertama No nya 1 Dan Baris Ke 2 Nama depan Ajis dan baris ke 3 Nama Belakang dan baris ke 4 Nomor HP, dan baris ke 5 Alamat bisa di ganti , misalnya di atas " Ajis " Bisa Di ganti dengan nama depan kamu !! 

Cara Membuat Text Berjalan Di HTML Lengkap

Gambar Text Berjalan
Cara Membuat Text Berjalan Di HTML Lengkap - Hai gan, kembali lagi di kangrpl, di kesempatan kali ini kangrpl akan memberikan dan mengasah skill website kangrpl yang lama tidak di gunakan, kangrpl sekarang akan memberikan tutorial Cara Membuat Text Berjalan Di HTML, nah marquee adalah salah satu tag/kode html yang bersungsi memodifikasi text/tulisan pada website/blog yang akan membuat efek berjalan pada text/tulisan di website/blog.
Atau marquee adalah tag/kode html yang memberikan efek berjalan pada suatu objek di dalam web.

Lihat Hasilnya : DEMO

Marquee juga memiliki attribut diantaranya
Attribute Marquee :
  • bgcolor
  • direction
  • scrollamount
  • scrolldelay
  • behavior
  • width
  • height
  • align
  • onmouseover
  • onmouseout
 Keterangan Attribute :


bgcolor : Untuk Memberikan Warna Pada Background Text Marquee
direction : Befungsi untuk Mengarahkan Darimana Kemana Text Tersebut Berjalan
scrollamount  : Menerapkan Kecepatan Pengguliran
scrolldelay : Menyetel Kecepatan Pengguliran
behavior : Menuntukan Bagaimana Isi Gulir
width : Memberikan Lebar Untuk Text
height : Memberikan Tinggi Untuk Text
align : Mengatur Posisi Text/Text Marquee
onmouseover : Untuk Menghentikan Laju Pada Text Berjalan
onmouseout : Untuk Menghentikan Laju Pada Text Berjalan

Nahdiatas adalah penjelasan beserta attribute dan keterangnya, apa kurang lengkap ? yuk kita langsung praktekan kode marquee nya.

Paktek Kode <marquee></marquee>

1. Text Berjalan

Text Berjalan
Kode " <marquee>Text Berjalan</marquee>

2. Text Berjalan Ke Kanan

Text Berjalan
Kode " <marquee direction="right">Text Berjalan</marquee>

3. Text Berjalan Ke Atas

Text Berjalan
Kode " <marquee direction="up">Text Berjalan</marquee>

4. Text Berjalan Ke Bawah

Text Berjalan
Kode " <marquee direction="down">Text Berjalan</marquee>

5. Text Berjalan Memantul

Text Berjalan
Kode " <marquee behavior="alternate">Text Berjalan</marquee>

6. Text Berjalan Memantul Ke Bawah

Text Berjalan
Kode " <marquee behavior="alternate" direction="down">Text Berjalan</marquee>

7. Text Berjalan Pake Jeda

Text Berjalan
Kode " <marquee scrolldelay="230">Text Berjalan</marquee>

8. Text Berjalan Cepat 
Text Berjalan
Kode " <marquee scrollamount="90">Text Berjalan</marquee>

Untuk yang diberi warna merah itu bisa di ganti.
Semoga artikel di atas bisa menambah wawasan kamu, salam #LIERNING

Kode Kode/Tag HTML Lengkap Beserta Fungsinya

Kode Kode/Tag HTML Lengkap Beserta Fungsinya
Kode Kode/Tag HTML Lengkap Beserta Fungsinya | Kode kode html atau yang sering kita sebut tag html adalah sekumpulan perintah perintah untuk menampilkan sesuatu didalam sebuat website misalnya, gambar, audio, gif, link, video, table, dan lain lain.

untuk artkel ini kangRPL akan membagikan sebagian kode kode/tag tag yang sering di gunakan dalam web antara lain :

NO.TAG HTML FUNGSI TAG HTML DAN CONTOHNYA
1. <I> </I> Menyisipkan tulisan miring.   makan
2. <u> </u> Menyisipkan tulisan bergaris bawah.   minum
3. <b> </b> Menyisipkan tulisan tebal .   belajar
4. <li> </li> Menyisipkan bullet.  *  FUNGSI HTML
5. <marquee> </marquee> Menyisipkan tulisan berjalan .  “welcome to website” bergerak dari kiri ke kanan atau dari atas ke bawah.
6. <blink> </blink> Menyisipkan tulisan berkedip kedip. <blink> klick here </blink>
7. <center> </center> Menyisipkan tulisan dalam bentuk ratah tengan . “hendra simanungkalit”
8. <title> </title> Menyisipkan title html
9. <head> </head> Menyisipkan bagian head pada sebuah html.\
10. <body> </body> Menyisipkan atribut untuk seluruh dokumen. Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
11. <html></html> Tag pembuka di dalam membuat sebuah desain web.
12. <h1> </h1> Menyisipkan tulisan dalam bentuk h1 Header 1
13. <h2> </h2> Menyisipkan tulisan dalam bentuk h2. Header 2
14. <h3></h3> Menyisipkan tulisan dalam bentuk h3. Header 3
15. <h4></h4> Menyisipkan tulisan dalam bentuk h4. Header 4
16. <h5></h5> Menyisipkan tulisan dalam bentuk h5. Header 5
17. <h6></h6> Menyisipkan tulisan dalam bentuk h6. Header 6
18. <h7> </h7> Menyisipkan tulisan dalam bentuk h7. Header 7
19. <abbr> </abbr> Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
20. <acronym></acronym> Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
21. <area ></area> Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
22. <base > </base> Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen
23. <blockquote> </blockquota> Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
24. <cite> </cite> Mendefinisikan kutipan
25. <code> </code> Mendefinisikan sebuah bagian dari kode komputer
26. <button> </button> Mendefinisikan sebuah tombol diklik
27. <cite> </cite> Mendefinisikan kutipan
28. <font> </font> Mendefinisikan jenis font, warna dan ukuran untuk teks
29. <form> </form> Mendefinisikan sebuah form HTML untuk input form
30. <frame> </frame> Mendefinisikan frame dalam frameset
31. <hr> </hr> Membuat garis horizontal
32. <small> </small> Memperkecil ukuran teks dari ukuran defaultnya
33. <span> </span> Mendefinisikan sebuah section dalam dokumen
34. <strike> </strike> Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
35. <strong> </strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b>
36. <tr> </tr> Membuat baris di dalam sebuah table
37. <ul> </ul> Mendefinisikan daftar dalam format bullet
38. <td> </td> Mendefinisikan sel di dalam sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
39. <thead> </thead> Untuk mengelompokkan isi header di dalam sebuah tabel
40. <samp> </samp> Mendefinisikan contoh keluaran dari program computer
41. <frameset> </frameset> Mendefinisikan satu set frame
42. <input > </infut> Mendefinisikan input field pada form
43. <img > </img> Berfungsi untuk menampilkan gambar pada dokumen HTML. Src, alt, name, border, height, width
44. <big> </big> Memperbesar ukuran teks sebesar satu point dari defaultnya
45. <em> </em> Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
46. <fieldset> </fieldset> Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
47.
Mendefinisikan client-side script
48. <select> </select> Membuat daftar drop-down
49. <strong> </strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b>
50. <sub> </sub> Memberikan efek subscript pada teks. Subscript
51. <sup> </sup> Memberikan efek superscript pada teks. Superscript
52. <table> </table> Membuat table. Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign
53. <textarea> <textarea> Mendefinisikan sebuah kontrol input multiline. Name, rows, cols, wrap
54. <tfoot> </tfoot> Untuk mengelompokkan isi footer di dalam sebuah tabel
55. <th> </th> Mendefinisikan sel header di dalam  sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
56. <ul> </ul> Mendefinisikan daftar dalam format bullet
57. <var> </var> Mendefinisikan sebuah variable
58. <xmp> </xmp> Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>
59. <tt> </tt> Mendefinisikan teletype text
60. <option> </option> Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
61. <noscript> </noscript> Jika browser user tidak mendukung client-side scripts
62. <noframes> </noframes> Jika browser user tidak mendukung frame
63. <nobr> </nobr> Mencegah ganti baris pada teks atau gambar
64. <meta > </meta> Mendefinisikan metadata tentang sebuah dokumen HTML
65. <menu> </menu> Mendefinisikan sebuah daftar menu
66. <map> </map> Mendefinisikan client-side peta gambar
68. <listing> </listing> Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes
69. <legend> </legend> Mendefinisikan sebuah caption untuk elemen <fieldset>
70. <ol> </ol> Ordered List (digunakan dengan <li>) . 1. Item 1
71. <p> </p> Menyisipkan paragraph
72. <br> </br> Mengganti baris
73. <hr> </hr> Mengganti horizontall
74. <dt> </dt> Definition term
75. <dd> </dd> Definition list
76. <colgroup> </colgroup> Format yang berlaku bagi kolom. Height, width, align, valign, bgcolor, background, colspan
77. <a> </a> Membuat link ke dokumen atau situs lainnya. Href, target, style, class, name, id
78. <option> </option> Selected, name, value
79. <pre></pre> Preformatted teks. Contoh text
80. <button> </button> Mendefinisikan sebuah tombol diklik.

Bila menurut kamu belum lengkap kamu bisa searching lagi di google, dengan keyword :
  • tag html lengkap
  • tag tag html lengkap beserta fungsinya
  • kode html lengkap
  • tag html paling lengkap
  • belajar tag tag html dan fungsinya

Pengertian HTML Dan Sejarahnya Beserta Contohnya

Pengertian HTML Dan Sejarahnya Beserta Contohnya

Sejarah Singkat HTML

Pada tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

 Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.

Fungsi HTML

Fungsi html antara lain yaitu untuk membuat rangkaian website dan menampilkan foto kedalam web,video,musik,teks,gif,dan masih banyak lagi.
Html juga bisa membuat link yang bila di klik akan menuju kehalaman lain.

Contoh HTML

Nah diatas kita sudah mengetahui pengertian html sekarang saya akan memberikan contoh sintaks-sintaks html antara lain : head,body dan masih banyak lagi.
<html>
<head>
   <title>Website Saya</title>
</head>
<body>
<div align="center">
  <h1>JUDUL Artikel- Kangrpl</h1>
<br>
<p>Website Pertama Saya<p>
<img src="fotokangrpl.png">
</div>
</body>
</html>


Keterangan : 

<html> : Untuk memulai sebuah HTML
<title > : Untuk memberi judul pada yang nantinya akan muncul di Tab Browser
<head> : Untuk Bagian Header atau Atas
</head> : Untuk Penutup Header dan diawali dengan garis miring "/"
<body > : Untuk Bagian Body atau Isi dalam HTML </ body> : Untuk Penutup/menutup Body dan diawali dengan garis miring "/" : Untuk Menutup Sebuah HTML dan diawali juga dengan garis miring "/"

Apa Itu HTML ? Pengenalan HTML Dari Dasar

Gambar HTML - KangRPL
Apa Itu HTML ? Pengenalan HTML - HTML, apa itu html ? html adalah syntax-syntax untuk membuat kerangka sebuah website, ko kerangka ? emang web punya tulang ? tentu punya tetapi bukan tulang yang ada di tubuh manusia, di katakan kerangka/rangkaian web karena html fungsinya mungkin hampir sama dengan tulang manusia, nah dibawah ini gambar yang menunjukan rangkaian html/kerangka html.
Ilustrasi HTML
Nah diatas adalah ilustrasi rangkaian html yang digambarkan sebagai kerangka manusia, setiap pembuka html pasti ada penutupnya, untuk img dan link serta meta dll, bisa menggunakan slash " / " di akhir > contoh: <img src="#" /> dan bisa juga tidak memakai slash " / " <img src="#">.

Nah kode kode html juga ada panggilannya yaitu TAG, kalo misalnya kamu masuk grup web programming indonesia, kamu melihat orang membuat status.
Bang ada yang blablablablablablabla di tag html saya
Nah kurang lebih begitu, tag html itu banyak sekali, kita akan pelajari dan afalkan di postingan berikutnya, kita sekarang akan membuat rangkaian html yaitu kepala = head, dan badan = body.
<html>
<head>
</head>
<body>
isi website kamu
</body>
</html>
Isi website kamu, adalah isinya yang akan di tampilkan dalam browser, didalam browser akan tampil
isi website kamu
tag tagnya tidak akan di tampilkan karena html hanya memerintah untuk menampilkan isi didalam website.(ini menurut saya)
Sekarang kita akan belajar sedikit tag tag html, seperti : menampilkan gambar,membuat teks berjalan, untuk kode kode selebihnya akan saya postingan selanjutnya.

Didalam web kita bisa menampilkan gambar dengan kode html yaitu <img>
dan kita juga akan mengatur ukuran lebar dan tinggi gambarnya

<html>
<head>
</head>
<body>
   <img src="foldergambar/gambarsaya1.jpg" width="500px" height="430px">
</body>
</html>
 untuk foldergambar adalah lokasi gambarnya, dan gambarsaya1.jpg adalah nama gambar dan typenya yai5tu .jpg , awas type type gambar itu ada banyak yaitu :
  • .jpg
  • .png
  • .jpeg
  • .gif    (gambar bergerak)
biasanya gambar yang diambil dari facebook bertype jpeg dan biasanya gambar yang berukuran 2000x1920 bertype png dan jpg dan bisa gambarnya bergerak berarti gambarnya bertype gif.

Nah bila sudah bisa menampilkan gambar kita akan coba membuat teks berjalan, membuat teks berjalan menggunakan tag html <marquee> .

Yuk kita coba.

<html>
<head>
</head>
<body>
   <marquee>Horee Teks Saya Berhasil Berjalan</marquee>
</body>
</html>
Hasil :


Horee Teks Saya Berhasil Berjalan

Nah untuk mungkin hanya itu pengenalan html.
Untuk selebihnya pengenalan html bisa di searching di google " perkenalan html ", kita akan pelajar 1 demi 1 html, mulai dari menampilkan dan play lagi di browser dengan html dan pengertian html dan lain lain.