Kumpulan Code Warna Pada HTML

Code Warna Pada HTML

Warna adalah sebuah reseprentasi dari spektrum tertentu yang didalamnya terdapat cahaya dan panjang gelombang cahaya yang mengikutinya. Didalam citra digital warna umumnya terdiri atas 2 yaitu hitam dan putih (warna sempurna) atau disebut Grayscale. Sedangkan macam-macam jenis warna lainnya itu disebut True Color seperti merah, biru, hijau, kuning. True Color ini terdapat 2 macam pengelompokkan yaitu RGB (Red Green Blue ),CMYK( Cyan Magenta Yellow Black ), Sedangkan metode sistem model dari warna yaitu HSV (Hue Saturation Value ) dan HSL ( Hue Saturation and Lightness ).

Kode heksadesimal adalah 3 atau 6 karakter kode yang sering digunakan dalam HTML dan CSS untuk memberitahu browser atas satu warna untuk ditampilkan. Jadi misalnya, #fff  atau #FFFFFF adalah kode warna untuk menghasilkan warna putih pada sebuah halaman web anda.

Dibawah ini terdapat daftar kode-kode warna lengkap untuk membuat Kode Warna CSS atau html dalam merancang halaman web, atau metode untuk menggambarkan dan menentukan warna tersebut.

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000
#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000
#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#999933	#999900
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000
#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6600FF	#6600CC	#660099	#660066	#660033	#660000
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000
#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

Free Copy asalkan berbagi
Happy Coding - Maulnalafans-

Source : http://www.impoint.info/2013/07/kode-warna-html.html#axzz38Y8fjF5o

Cara Membuat Dropdown Menu HTML

Cara Membuat Dropdown Sederhana Menggunakan CSS

Langsung saja yah gan

Pada artikel kali ini saya akan mencoba berbagi tutorial tentang membuat menu dropdown dengan CSS. Sesuai dengan judulnya jadi disini kita hanya menerapkan code CSS dan tidak menggunakan javascript.

Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav> 

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik: 

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Berikut penjelasan dari code css:

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Script Dropdown ini sudah saya coba sendiri, Tinggal rubah saja beberapa code diatas sesuai dengan keinginan

Berikut ini contoh dari script diatas yang sudah saya beri sedikit sentuhan

HappyCoding Kawan Kawan :)

-Maulana-

Source script  :  http://ngajarcss.blogspot.com

Pengenalan HTML | Hypertext Markup Language

Apa itu HTML?
Hypertext Markup Language (HTML) adalah salah satu format yang banyak dipakai dalam pembuatan dokumen halaman web. sederhananya merupakan kode-kode tertentu yang disebut sintaks yang dituliskan kedalam suatu file yang meberikan aturan main pada browser bagaimana dan seperti apa halaman dokumen tersebut ditampilkan. file HTML bereksistensi *.html bisa juga *.htm
Bagaimana Membuat file HTML?Untuk membuat file HTML bisa dengan editor teks biasa seperti Notepad dll. namun pada saat sekarang telah banyak editor HTML yang memiliki tampilan bersifat WYSIWYG sepert Macromedia Dreamweaver, Adobe GoLive, MS FrontPageyang bisa menampilakan file tersebut dalam bentuk sintaks HTML biasa maupun seperti apa yang akan ditampilkan browser.

Jika anda pemula sangat saya anjurkan untuk membuat secara manual menggunakan notepad dll dengan langsung mengetikkan kode demi kode HTML ke dalam file yang anda buat. Kenapa? jika menggunakan software tertentu anda tidak akan terbiasa dengan tag HTML.anda akan dimanjakan oleh tools yang digunakan dalam software tersebut untuk membuat tampilan halaman HTML, ini akan menyulitkan jika anda ingin mengedit kembali file tersebut secara manual.

Struktur Dasar Html
Kode HTML harus berada dalam sebuah tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan
</namatag>. Struktur dasar HTML berisi elemen-elemen atau tag sebagai berikut:

<html>
<head>
<title>Judul Halaman/Caption</title>
</head>
<body>
Isi web/konten
</body>
</html>

Keterangan:

• <html>..</html>
  Mendefinisikan bahwa teks yang berada antara kedua tag tersebut adalah file HTML.
• <head> .. </head>
  Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META dll
• <title> .. </title>
  Sebagai titel atau judul halaman. Kalimat yang ada dalam tag ini akan muncul pada title bar browser Anda.
• <body> .. </body>
  Didalam tag inilah yang menjadi inti halaman web yaitu bagian yang akan ditampilkan sebagai isi halaman pada browser. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin,topmargin dll

Sekarang kita langsung saja membuat file HTML, ikuti langkah-langkah berikut :

• Buat sebuah folder tempat menyimpan file HTML yang akan kita buat.

• Buka notepad atau editor teks lainnya untuk lebih memudahkan saya merekomendasikan untuk menggunakan editor yang memang dikhususkan untuk editor pemograman seperti PSPAD, Notepad++ dll. untuk tutorial ini saya menggunakan PSPAD. download PSPAD

• Jika menggunakan Notepad maka buat sebuah file teks baru, jika menggunakan PSPAD buat sebuah file HTML

• Ketik kode dasar html di atas, lihat contoh :

<html>
<head>
<title>HTML pertamaku</title>
</head>
<body>
Ayo belajar HTML
</body>
</html>

• Simpan halaman tersebut kedalam folder yang kita buat sebelumnya dan beri nama misalnya index.htm

• jika menggunakan Notepad pada pilhan ‘Save as Type’ pilih ‘All Files’.

Dalam pemograman web anda harus membuat sebuah file dengan nama index.html yang berfungsi sebagai file pertama yang akan dibuka, bila browser anda arahkan ke folder tersebut. Untuk nama file selanjutnya terserah anda 

• Buka file yang telah disimpan tersebut dengan browser anda. caranya dengan index.html > klik kanan > Open With > pilih salah satu browser anda misalnya Internet Explore/Mozilla Firefox.

Sampai pada tahap ini anda telah berhasil membuat sebuah file HTML, untuk lebih dalam lagi silahkan baca tulisan saya selanjutnya.
Jika ada kendala mari kita diskusikan disini.

Selamat mencoba..

Asal Mula Terbentuknya Website

Pengertian Web sering diidentikan dengan Internet itu sendiri, meskipun sebenarnya Web merupakan salah satu jasa yang beroperasi di atas Internet seperti halnya e-mail. Sejarah Internet terjadi jauh sebelum Web di kembangkan.

Penemuan WWW

Permulaan penemuan WEB dimulai pada tahun 1980, ketika itu ada seseorang yang Inggris yang bernama Tim Berners-Lee yang bekerja di sebuah perushaaan yang bernama CERN membuat ENQUIRE, sebuah basis data personal dan model suatu software. Saat itu juga Berners-Lee juga memperkenalkan suatu konsep hypertext, dimana semua halaman informasi baru di ENQUIRE tersambung secara langsung ke halaman yang ada.

Sekitar tahun 1984, Tim Berners-Lee kembali ke CERN dan mengemukakan ide bahwa semua fisikawan di dunia perlu untuk berbagai data. Tetapi, tidak ada perangkat keras dan suatu perangkat lunak yang memungkinkan hal itu dapat terjadi. Saat itu atasan Tim, yakni Mike Sendall, meminta Tim untuk mengimlementasikan gagasannya tersebut di mesin workstation NeXT yang baru saja diterima oleh CERN. Dan ada banyak nama yang dipersiapkan oleh Berners untuk gagasanya, antara lain, Information Mesh, The Informatin Mine atau Mine of Informasion, dan World Wide Web.

Sampailah pada bulan Desember 1990, Berners akhirnya berhasil membuat semua perangkat yang dibutuhkan supaya Web dapat bekerja, dan ini merupakan web browser pertama kali di dunia yang di namai, World Wide Web ( yang juga merupakan Web editor ), dan Web server pertama ( Info.cern.ch) serta halaman Web pertama yang menjelaskan tentang proyek tersebut. Browser yang dikembangkan dapat mengkases kelompok diskusi USENET dan juga mengakses file-FTP. Tetapi, browser yang digunakan ini hanya dapat dijalankan pada mesin NeXT. Lalu, sesorang yang bernama Nicola Pelllow akhirnya membuat sebuat browser yang sederhana yang dapat dijalankan hampir semua komputer.

Web Server Pertama Di Luar Eropa

Akhirnya pada tahun 1991 seseorang dari  Stanford Linear Accelerator Center (SLAC), Paul Kunz sangat tertarik dengan Web. Dan dia membawa pulang perangkat lunak NeXT ke Stanford Linear Accelerator Center (SLAC). Sampailah akhirnya dia berhasilkan mengadaptasikannya untuk keperluan sistem operasi VM/CMS . Web ini merupakan Web Server pertama di luar Eropa dan pertama di Amerika Utara.

Kemunculan Website

Pada tanggal 6 Agustus 1991, Tim Berners-Lee menuliskan resume singkat dari proyek World Wide Web di kelompok diskusi alt.hypertext. Tanggal ini pula kemudian dijadikan sebagai tanggal kemunculan Website pertama kali secara publik di Internet.

Website yang terhubung dengan jaringan pertama kali muncul pada tahun 1991 dan dipublikasikan oleh perusahaan CERN pada tahun 1993 dimana CERN mempublikasikan bahwa Web dapat digunakan oleh semua orang di seluruh dunia dengan gratis.

Sebuah website sendiri ditulis menggunakan bahasa yang disebut HTML (Hyper Text Markup Language) yang dapat diakses melalui protokol yang menyampaikan informasi dari web server ke web browser. Sebuah website dibuat di dalam sebuah sistem komputer yang dikenal dengan server web , Sebuah server web umumnya telah dilengkapi dengan perangkat-perangkat lunak khusus untuk menangani pengaturan nama ranah, serta menangani layanan atas protokol HTTP yang disebut sebagai Server HTTP seperti Apache HTTP Server, atau Internet Information Services (IIS).