Jumat, 07 Agustus 2020

Panduan Dasar Belajar Pemrograman HTML Untuk Pemula

Bagi Anda yang belum tahu, HTML adalah kepanjangan dari Hypertext Markup Language. Perlu diketahui bawah HTML bukan termasuk bahasa pemrograman, melainkan HTML adalah markup standart yang digunakan dalam menampilkan halaman website. 

Jadi dengan HTML tidak memiliki kemampuan untuk membuat website yang dinamis, perlu mengkombinasikan dengan bahasa pemrograman web lain.

Menurut sejarahnya, HTML pertama kali diperkenalkan pada tahun 1990-an. Tim Berners-Lee pada tahun 1989 menciptakan HTML sederhana namun sangat efektif untuk pengkodean dokumen elektronik. 

Web browser pada zaman itu digunakan untuk membuka dokumen-dokumen dengan format HTML. Pada saat tahun 90-an inilah yang menjadi sejarah lahirnya HTML sehingga dinamakan HTML versi 1.0.

Sebelum versi HTML yang terbaru keluar, ada proses panjang harus melalui persetujuan dari W3C (World Wide Web Consortorium) dengan evaluasi yang ketat. Dengan adanya seperti ini, setiap ada perkembangan versi terbaru dari HTML bisa dipastikan ada update dan fitur baru dari versi sebelumnya. Sampai saat ini versi HTML yang terbaru sudah sampai HTML veris 5.0
Kegunaan HTML

Agar lebih semangat dalam belajar, HTML bisa diaplikasikan untuk berbagai keperluan dalam pembuatan website, apa saja itu? Berikut pembahasannya:

  • Membungkus element pada HTML
  • Membuat format judul
  • Membuat heading
  • Membuat tabel
  • Membuat paragraph
  • Membuat list
  • Membuat form
  • Membuat tombol
  • Membuat garis
  • Menampilkan gambar
  • Menampilkan video
  • Dan masih banyak lagi fitur dari HTML


Nah untuk bisa mempraktekan semua itu Anda perlu belajar HTML dari dasar terlebih dahulu, untuk lebih lengkapnya silahkan ikuti pembahasan belajar html dibawah ini. 


Belajar HTML Dasar

Sebelumnya pastikan terlebih dahulu Anda sudah memiliki text editor pada komputer yang Anda gunakan. Biasanya Windows memiliki text editor bawaan bernama “Notepad”. Jika Anda mau menggunakan text editor lain juga bisa tergantung keperluan saja. Selain itu pastikan sudah terinstall Web Browser untuk melihat hasil dari script yang Anda tuliskan. Langsung saja silahkan ikuti panduan belajar HTML untuk pemula berikut ini:

1. HTML Basic

Semua dokumen HTML dideklarasikan dengan tipe dokumen <!DOCTYPE html> dimulai <html> diakhiri dengan </html>. Didalam dokumen HTML terdapat bagian yang akan ditampilkan dalam web browser dimulai <body> dan ditutup dengan </body>.

Berikut contoh HTML basic:


<!DOCTYPE HTML>
<html>
<body>

Ini HTML

</body>
</html>  

2. HTML Elements


Dasar HTML yang kedua adalah elements, element terdiri dari tag awal dan tag akhir dengan konten yang berada ditengah-tengah tag. Kira-kira penerapannya seperti ini <tagname> Ini adalah tagnamen </tagname>.


Start tagElement content End tag
<h1> Ini adalah heading </h1>
<p> Ini adalah paragraf </p>
<br>

3. HTML Atributes

Atribut dalam HTML memiliki fungsi untuk memberikan informasi tambahan tentang elemen yang ada pada HTML. Semua element dalam HTML memiliki atribut yang berada pada tag awal biasanya dengan diikuti tanda kutip. 

Baca juga : Belajar Bahasa Pemrograman PHP

4. Atribut href

Atribut href diawali dengan tag pembuka <a> dan penutup </a>.

Contoh:
<a href=”https://www.qwords.com”>Ini adalah link</a>

 5. Atribut src


Gambar dalam HTML didefinisikan dengan tag <img> dan nama file akan ditulis dalam atribut src.

Contoh:

<img src=”gambar_server.jpg”>

6. Atribut width dan height

Atribut width dan height dalam HTML berfungsi untuk menentukan lebar dan tinggi.

Contoh:


<img src=”gambar_server.jpg” width=”400″ height=”600″> 

 7. Atribut alt

Artibut alt merupakan teks alternative yang digunakan saat gambar tidak bisa ditampilkan, alternate image ini juga bisa dioptimasi untuk keperluan SEO.

Contoh:


<img src=”gambar_server.jpg” alt=”gambar server windows terbaru”> 

 8. Atribut style


Atribut style digunakan untuk menentukan styling seperti warna, font, ukuran dll.

Contoh:

<p style=”color:blue”>Ini paragraph style warna biru.</p>   

 9. Atribut lang

Atribut lang berguna untuk mendeklarasikan bahasa. Contohnya pada syntak <html lang=”en-US”> menAndakan bahasa yang digunakan adalah en menunjukan English dan US menunjukan dialek yang digunakan. 

 10. Atribut title


Atribut title untuk menunjukan judul dari sebuah halaman. Biasanya atribut title ini diawali dengan atribut pembuka <p> tittle </p>.

Contoh:


<p title=”Ini adalah title”>
Ini adalah paragraf.
</p>
 

 11. HTML Headings


Heading didefinisikan dengan tag <h1> sampai <h6>. Untuk H1 biasanya digunakan untuk judul, H2 untuk sub judul dan heading lainnya mengikuti.

Contoh:


<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>

12. HTML Paragraphs


Tag pada paragraph didefinisikan dengan pembuka <p> dan penutup </p>.

Contoh:


<p>Ini adalah paragraf.</p>
<p> Ini adalah paragraf.</p>


Nah itulah beberapa panduan dasar belajar HTML untuk pemula. Untuk lebih lengkapnya Anda bisa belajar di W3Shools.com, disana tersedia materi HTML, CSS, JavaScript, Server Side, Programming, Web Building, XML Tutorials dan masih banyak materi lainnya.

Read More

Jumat, 31 Juli 2020

Berbagai Daftar Kode Warna Pada HTML & CSS

Pada pemrograman, pewarnaan dilakukan dengan menggunakan kode html. Bagi Anda yang sudah terbiasa dengan desain komputer pasti tidak asing dengan beberapa kode seperti #92a8d1 dan #ff0000. Kedua kode tersebut merupakan kode warna hexadecimal.

Ada beberapa tipe kode warna pada html yang biasanya digunakan di dalam pemrograman komputer, yaitu berbentuk hexadecimal, RGB, RGBA, HSL, dan HSLA.

Hexadesimal tersusun dari kombinasi huruf dan angka dengan diawali dengan tanda ‘#’. Sedangkan RGB terdiri dari 3 bagian angka yang terpisah oleh tanda koma. Kode warna pada HTML menggunakan HTML triplets. Setiap dua digit kode melambangkan warna-warna red (merah), green (hijau), blue (biru) atau #RRGGBB.

Di bawah ini adalah list kode warna pada HTML lengkap yang dapat Anda gunakan sebagai panduan untuk menyusun kode warna.
         nama warnaHex                     
.
Alice Blue#F0F8FFrgb(240, 248, 254)
.
Antique White#FAEBD7rgb(251, 235, 217)
.
Aqua#00FFFFrgb(0, 255, 254)
.
Aquamarine#7FFFD4rgb(115, 255, 216)
.
Azure#F0FFFFrgb(239, 255, 255)
.
Beige#F5F5DCrgb(245, 245, 223)
.
Bisque#FFE4C4rgb(255, 227, 200)
.
Black#000000rgb(0, 0, 0)
.
Blanched Almond#FFEBCDrgb(255, 234, 208)
.
Blue#0000FFrgb(0, 0, 255)
.
Blue Violet#8A2BE2rgb(138, 43, 226)
.
Brown#A52A2Argb(165, 42, 42)
.
Burly Wood#DEB887rgb(222, 184, 135)
.
Cadet Blue#5F9EA0rgb(95, 158, 160)
.
Chartreuse#7FFF00rgb(127, 255, 1)
.
Chocolate#D2691Ergb(210, 105, 30)
.
Coral#FF7F50rgb(251, 127, 80)
.
Cornflower Blue#6495EDrgb(100, 149, 237)
.
Cornsilk#FFF8DCrgb(225, 248, 220)
.
Crimson#DC143Crgb(220, 20, 60)
.
Cyan#00FFFFrgb(62, 254, 255)
.
Dark Blue#00008Brgb(0, 0, 139)
.
Dark Cyan#008B8Brgb(29, 139, 139)
.
Dark Golden Rod#B8860Brgb(184, 134, 11)
.
Dark Gray#A9A9A9rgb(169, 169, 169)
.
Dark Green#006400rgb(19, 100, 0)
.
Dark Khaki#BDB76Brgb(189, 183, 107)
.
Dark Magenta#8B008Brgb(139, 0, 140)
.
Dark Olive Green#556B2Frgb(85, 107, 47)
.
Dark Orange#FF8C00rgb(251, 140, 1)
.
Dark Orchid#9932CCrgb(153, 50, 204)
.
Dark Red#8B0000rgb(139, 5, 0)
.
Dark Salmon#E9967Argb(233, 150, 122)
.
Dark Sea Green#8FBC8Frgb(143, 188, 144)
.
Dark Slate Blue#483D8Brgb(72, 61, 139)
.
Dark Slate Gray#2F4F4Frgb(47, 79, 79)
.
Dark Turquoise#00CED1rgb(48, 206, 209)
.
Dark Violet#9400D3rgb(148, 0, 211)
.
Deep Pink#FF1493rgb(249, 19, 147)
.
Deep Sky Blue#00BFFFrgb(43, 191, 254)
.
Dim Gray#696969rgb(105, 105, 105)
.
Dodger Blue#1E90FFrgb(30, 144, 255)
.
Fire Brick#B22222rgb(178, 34, 33)
.
Floral White#FFFAF0rgb(255, 250, 240)
.
Forest Green#228B22rgb(34, 139, 35)
.
Fuchsia#FF00FFrgb(249, 0, 255)
.
Gainsboro#DCDCDCrgb(220, 220, 220)
.
Ghost White#F8F8FFrgb(248, 248, 255)
.
Gold#FFD700rgb(253, 215, 3)
.
Golden Rod#DAA520rgb(218, 165, 32)
.
Gray#808080rgb(128, 128, 128)
.
Green#008000rgb(27, 128, 1)
.
Green Yellow#ADFF2Frgb(173, 255, 48)
.
Honey Dew#F0FFF0rgb(240, 255, 240)
.
Hot Pink#FF69B4rgb(240, 255, 240)
.
Indian Red#CD5C5Crgb(205, 92, 92)
.
Indigo#4B0082rgb(75, 0, 130)
.
Ivory#FFFFF0rgb(255, 255, 239)
.
Khaki#F0E68Crgb(240, 230, 140)
.
Lavender#E6E6FArgb(230, 230, 250)
.
Lavender Blush#FFF0F5rgb(254, 240, 245)
.
Lawn Green#7CFC00rgb(124, 252, 2)
.
Lemon Chiffon#FFFACDrgb(255, 250, 205)
.
Light Blue#ADD8E6rgb(173, 216, 230)
.
Light Coral#F08080rgb(240, 128, 128)
.
Light Cyan#E0FFFFrgb(224, 255, 255)
.
Light Golden Rod Yellow#FAFAD2rgb(250, 250, 210)
.
Light Gray#D3D3D3rgb(211, 211, 211)
.
Light Green#90EE90rgb(144, 238, 144)
.
Light Pink#FFB6C1rgb(252, 182, 193)
.
Light Salmon#FFA07Argb(251, 160, 122)
.
Light Sea Green#20B2AArgb(40, 178, 170)
.
Light Sky Blue#87CEFArgb(135, 206, 250)
.
Light Slate Gray#778899rgb(119, 136, 153)
.
Light Steel Blue#B0C4DErgb(176, 196, 222)
.
Light Yellow#FFFFE0rgb(255, 255, 224)
.
Lime#00FF00rgb(63, 255, 0)
.
Lime Green#32CD32rgb(50, 205, 50)
.
Linen#FAF0E6rgb(250, 240, 230)
.
Magenta#FF00FFrgb(249, 0, 255)
.
Maroon#800000rgb(128, 4, 0)
.
Medium Aqua Marine#66CDAArgb(102, 205, 170)
.
Medium Blue#0000CDrgb(0, 0, 205)
.
Medium Orchid#BA55D3rgb(186, 85, 211)
.
Medium Purple#9370DBrgb(147, 112, 219)
.
Medium Sea Green#3CB371rgb(60, 179, 113)
.
Medium Slate Blue#7B68EErgb(123, 103, 238)
.
Medium Spring Green#00FA9Argb(62, 250, 153)
.
Medium Turquoise#48D1CCrgb(72, 209, 204)
.
Medium Violet Red#C71585rgb(199, 21, 133)
.
Midnight Blue#191970rgb(25, 25, 112)
.
Mint Cream#F5FFFArgb(245, 255, 250)
.
Misty Rose#FFE4E1rgb(254, 228, 225)
.
Moccasin#FFE4B5rgb(254, 228, 181)
.
Navajo White#FFDEADrgb(254, 222, 173)
.
Navy#000080rgb(0, 0, 128)
.
Old Lace#FDF5E6rgb(253, 245, 230)
.
Olive#808000rgb(128, 128, 1)
.
Olive Drab#6B8E23rgb(107, 142, 35)
.
Orange#FFA500rgb(252, 165, 3)
.
Orange Red#FF4500rgb(250, 69, 1)
.
Orchid#DA70D6rgb(218, 112, 214)
.
Pale Golden Rod#EEE8AArgb(238, 232, 170)
.
Pale Green#98FB98rgb(152, 251, 153)
.
Pale Turquoise#AFEEEErgb(175, 238, 239)
.
Pale Violet Red#DB7093rgb(219, 112, 147)
.
Papaya Whip#FFEFD5rgb(254, 239, 213)
.
Peach Puff#FFDAB9rgb(253, 218, 185)
.
Peru#CD853Frgb(205, 133, 63)
.
Pink#FFC0CBrgb(252, 192, 203)
.
Plum#DDA0DDrgb(221, 160, 221)
.
Powder Blue#B0E0E6rgb(176, 224, 230)
.
Purple#800080rgb(128, 0, 128)
.
Rebecca Purple#663399rgb(102, 51, 153)
.
Red#FF0000rgb(255, 0, 0)
.
Rosy Brown#BC8F8Frgb(188, 143, 142)
.
Royal Blue#4169E1rgb(65, 105, 225)
.
Saddle Brown#8B4513rgb(139, 69, 19)
.
Salmon#FA8072rgb(250, 128, 114)
.
Sandy Brown#F4A460rgb(244, 164, 95)
.
Sea Green#2E8B57rgb(46, 139, 87)
.
Sea Shell#FFF5EErgb(255, 245, 238)
.
Sienna#A0522Drgb(160, 82, 45)
.
Silver#C0C0C0rgb(192, 192, 192)
.
Sky Blue#87CEEBrgb(135, 206, 235)
.
Slate Blue#6A5ACDrgb(106, 90, 205)
.
Slate Gray#708090rgb(112, 128, 145)
.
Snow#FFFAFArgb(255, 250, 250)
.
Spring Green#00FF7Frgb(63, 255, 128)
.
Steel Blue#4682B4rgb(70, 130, 180)
.
Tan#D2B48Crgb(210, 180, 140)
.
Teal#008080rgb(26, 128, 127)
.
Thistle#D8BFD8rgb(216, 191, 216)
.
Tomato#FF6347rgb(250, 99, 71)
.
Turquoise#40E0D0rgb(64, 224, 208)
.
Violet#EE82EErgb(238, 130, 238)
.
Wheat#F5DEB3rgb(245, 222, 179)
.
White#FFFFFFrgb(255, 255, 255)
.
White Smoke#F5F5F5rgb(245, 245, 245)
.
Yellow#FFFF00rgb(255, 255, 0)
.
Yellow Green#9ACD32rgb(154, 205, 49)

Anda dapat melihat perbedaan mengenai hexadecimal dan RGB.


Selain menggunakan kode warna, Anda juga dapat menggunakan generator untuk menentukan kode warna pada html apa saja yang bisa digunakan. Anda dapat menggunakan generator warna yang disediakan oleh beberapa website di bawah ini.

  • W3School HTML Color Picker
    Situs ini dapat Anda gunakan untuk memilih warna berdasarkan warna dasar. Anda dapat memilih tingkat saturasi dan melihat langsung (preview) hasilnya. Selain itu, terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna.
  • Colors & Skillshare
    Colors merupakan situs yang digunakan sebagai alat schema generator. Jika Anda seorang desainer, situs ini dapat memberikan saran schema yang sesuai dengan kebutuhan dan juga tersedia kode hexadecimal yang bisa digunakan ke dalam website.
  • HTML Color Code
    HTML Color Code merupakan situs web sederhana yang menyediakan tampilan pemilihan warna. Anda tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk hexadecimal.
Read More

Facebook Like

Blogroll

About