Web Learning

HTML - Memberi Warna Latar Belakang halaman web

2011-04-16T08:49:00.001+07:00

Selamat pagi semuanya!

Wah...hampir satu tahun saya tidak memberikan postingan di blog ini dikarenakan saya sibuk banget dengan kuliah. Akhirnya sebentar lagi saya lulus dan akan mendapatkan gelar Amd (Ahli Madya) dalam bidang komputer...hehehe...

Udah gak sabar pengen cepet-cepet wisuda n langsung kerja aja deh buat cari duit dulu.. :)

Oh..basa-basinya udah dulu ya... saya akan langsung memberikan materi tentang bagaimana caranya memerikan warna latar belakang pada sebuah halaman web.

Kalau Anda memperhatikan setiap halaman web, pastinya masing-masing memiliki ciri khas warna dasar latar belakang nya. Ada yang putih, abu-abu, biru, hijau, atau bahkan warna-warna yang tidak bisa kita sebutkan jenisnya sebab warna latar belakang tersebut dibuat dengan kode Hexadesimal menggunakan CSS. Nah lho, apa itu warna dalam format Hexadesimal dan CSS?

Tidak perlu khawatir kawan, sedikit-demi sedikit kita belajar, maka hasilnya akan menjadi bukit (gitu toh kata orang-orang...??). Blog ini akan membahas lengkap tentang HTML, namun saya tidak akan langsung memposting sekaligus (Jari n pikiran saya bisa stress lah..hehe). Jika kalian mengikuti langkang demi langkah isi dari postingan blog ini, saya yakin Anda akan memahami tentang HTML (Ingat! Hafal dengan Paham itu beda lho...).

Kalau begitu saya akan mendefinisikan beberapa cara dalam membuat warna pada latar belakang halaman web. Ada dua cara untuk memberikan warna latar belakang;

1. Langsung mewarnai di dalam tag body tersebut.

2. Mewarnai melalui CSS (Cascending Style Sheet) dengan cara memberikan ID atau Class terlebih dahulu pada tag body-nya.

Kali ini saya akan memberikan postingan dengan cara yang pertama di atas, untuk cara kedua akan saya bahas di postingan berikutnya.

Langkah awal:

Buka HTML editor (Saya sarankan menggunakan Notepad++, karena dapat membedakan fungsi atau jenis tag dengan cara membedakan warna teks).

Pastikan Anda langsung mengaktifkan mode HTML pada menu Language lalu pilih HTML Maka akan tampil halama seperti dibawah ini:

Setelah itu, mulailah mengetikkan tag dasar dari HTML, sperti <html>,<head>,<title>,<body>, dan lain sebagainya seperti yang telah dipelajari sebelumnya tentang postingan Mengenal Bagian HTML.

Baiklah, saya akan memerikan contoh sederhana, silahkan Copy Paste kan kode HTML dibawah ini, namun sebaiknya Anda mengetikkan sendiri agar terbiasa :

<html>
<head>
<title>Memberi Warna Latarr Belakang</title>
</head>
<center>
<body bgcolor="black" text="white">

<h1>Warna latar belakang akan berwana Hitam sedangkan warna teks adalah Putih</h1>

</body>
<center>
</html>

Lihat gambar berikut:

Setelah itu, simpan file dengan nama latihan_bg.html pada folder latihan Anda (terserah dimana saja). Setelah itu klik 2x atau bisa juga dengan cara klik kanan lalu -> open with (Pilih browser yang Anda sukai, misal: Mozilla).

Maka pada browser akan menghasilkan tampilan seperti ini:

Bagaimana? Mudah bukan?

So, silahkan Anda pelajari dengan cara mengganti-ganti warna pada tag <body bgcolor="black" text="white">.Tag attribut bgcolor artinya warna untuk latar belakang, sedangkan tag dengan atribut text adalah untuk mewarnai teks. Anda dapat menggunakan nama warna yang telah dikenali oleh browser, seperti red, yellow, white, black, blue, green, brown, dll. Atau Anda juga dapat menggunakan warna berpola Hexadesimal dengan ploa #000 atau #000000. Warna pada Hexadesimal artinya memberikan kombinasi 16 satuan pada tiap digit mulai dari 0 sampai F (total 16 satuan). Pada pearnaan menggunakan Hexadesimal Anda haruss meletakkan tanda "#" sebelum menuliskan nilai Hexadesimal-nya.

Sebagai Contoh, ubahlah pola warna pada tag sebelumnya menjadi seperi dibawah ini:

         <html>
    <head>
    <title>Memberi Warna Latarr Belakang</title>
    </head>

    <center>
    <body bgcolor="#000000" text="#ffffff">

    <h1>Warna latar belakang akan berwana Hitam sedangkan warna teks adalah Putih</h1>

    </body>

    <center>
    </html>

Perhatikan yang teks yang berwarna merah, terdapat perubahan nilai pada tag atribut bgcolor dan text. Jika Anda jalankan kembali, maka akan menampilkan warna latar belakang dan teks yang sama. Kerana #000000 artinya berwarna Hitam sedangkan #ffffff artinya berwarna Putih. Pola dari pewarnaan Hexadesimal adalah setiap 2 digit untuk pola 6 digit dan 1 digit untuk pola 3 digit, yang masing-masing kombinasi dari warna red, green, dan blue. Jika Anda ingin memerikan warna yang berbeda, silahkan kombinasikan sendiri dengan kreatifitas Anda.

Sampai Jumpa di pelajaran tentang HTML berikutnya... ^_^ v

Jika Anda seorang pemula yang belum paham, silahkan berkomentar, dan saya akan siap untuk menjawab pertanyaan Anda.

Terima Kasih!

Meta Tag Deskripsi (Web-Learnings)

2010-06-24T10:55:00.000+07:00

Baiklah kawan, sudah 1 Minggu saya tidak posting artikel tentang web. Sekarang saya akan memberikan materi tentang Meta Tag.
Waw..apa itu Meta Tag? Meta tag adalah tag yang digunakan di dalam tag <head></head>, berfungsi sebagai identitas ataupun introduction dari web kita, seperti Memberi deskripsi tentang web kita kepada search engine, memberi keyword, memberi tanggal expired, memberi relasi dengan Google, dan lain-lain.
Namun, kali ini saya hanya akan memberikan gambaran tentang Meta Tag untuk mendeskripsikan web kita.

Untuk membuat meta tag deskripsi pada HTML sangat berbeda dengan pemberian deskripsi pada suatu artikel yang ditulis pada tag <body>.
Penulisan deskripsi pada meta tag hanya dapat disimpan informasinya oleh browser dan tidak akan diterjemahkan pada halaman browser secara langsung. Jika kita ingin melihat secara keseluruhan dari deskripsi HTML tersebut dapat dilakukan dengan cara: Klik kanan pada Mouse -> View Page Info -> General.
Pada kolom tabel akan terdapat beberapa meta tag yang telah dideskripsikan sebelumnya. salah satunya adalah description.
Penjelasan meta tag ini akan sama dengan meta tag yang lain. Hanya saja isi dan definisi pada kolom "name" dan "content" berbeda.
Berikut ini adalah cara menuliskan meta tag pada HTML:

<html>
<head>
<title>Web Learnings by MICRO</title>
<meta name=”keywords” content=”HTML, Meta, Tag, WEb, Learnings, MICRO” />
<meta name=”description” content=”Belajar HTML,CSS dan JavaScript oleh Divisi Web Desain MICRO IPB” />
</head>

<body>
</body>
</html>

Teknik dalam menuliskan deskripsi pada HTML harus sesuai dengan "Apa yang ada pada situs tersebut" agar mesin pencari mudah menghubungkan antara keyword, deskripsi dan konten di dalamnya. Teknik ini telah dipakai oleh situs-situs yang ingin cepat terindeks informasinya oleh mesin pencari terutama Google.

Terima Kasih,

Pengenalan JavaScript Part 2 (Web-Learning)

2010-06-16T22:58:00.004+07:00

Setelah saya memposting tentang Java Script bagian pertama, sekarang saya memposting pengenalan JavaScript bagian kedua. Dalam bahasan kali ini ada beberapa materi pokok yang akan saya bahas, yaitu diantaranya tentang bagaimana cara menuliskan kalimat dalam JavaScript, memberikan komentar dan membuat JavaScript pada browser yang tidak mendukung JavaScript.

Baiklah, pertama akan saya bahas mengenai cara menuliskan suatu kalimat dalam JavaScript agar dapat ditampilkan di browser.

1. Cara menuliskan kalimat dalam JavaScript

<html>

<head>

    <title>Cara menuliskan kalimat dalam JavaScript</title>

</head>

<body>/div>
<script language="JavaScript">

document.write("Hallo Dunia!");

</script>
</body>

</html>

Dari penulisan di atas maka jika dieksekusi akan tampil seperti di bawah ini:


2. Cara menuliskan komentar pada JavaScript
Cara menuliskan komentar dalam JavaScript sama seperti dalam pemberian komentar pada bahasa pemrograman lain yaitu dengan cara komentar Single Line dana Multi Line.

Lihat contoh dibawah ini:
<script language="JavaScript">

//ini adalah contoh komentar Single Line

/* ini adalah 
contoh komentar
Multi Line */

</script>

3. Membuat JavaScript pada browser yang tidak mendukung bahasa JavaScript
ernyata ada browser yang tidak mendukung JavaScript namun sekarang sudah tidak ada. Dulu Internet Explorer merupakan salah satu browser yang tidak mendukung JavaScript. Sampai sekarang pun IE masih harus dipasang ActiveX untuk dapat menampilkan bahasa JavaScript.
Lihat contoh penulisan JavaScript dibawah ini:

<noscript>
document.write("Halo browser yang tidak mendukung JavaScript!!!");
</noscript>

Jika kode tersebut di runing pada browser yang mendukung JavaScript maka tidak akan tampil, akan tetapi jika di buka menggunakan browser yang tidak mendukung JavaScript maka akan tampil.

Nah, bagaimana dengan postingan tentang JavaScript Part 2 ini? Menarik bukan?
Apabila ada pertanyaan silahkan tinggalkan komentar ya!!!
Thanks!

Pengenalan JavaScript Part 1(Web-Learning)

2010-06-15T21:22:00.006+07:00

Hai para Blogger yang cinta dengan bahasan tentang Web!
Sudah 5 bulan saya vakum di dunia blog karena sibuk dengan tugas-tugas kuliah yang buat stress.
Akhirnya, sekarang bisa tampil lagi di hadapan Anda-Anda para pecinta blogger..^_^v

Sekarang saya akan memberikan materi tentang apa itu JavaScript. Pastinya jika Anda salah satu mahasiswa atau pelajar yang suka dengan web sudah tidak asing lagi dengan bahasa pemrograman web yang populer ini. Ya ga?

Coba lihat gambar diatas. Itu saya ambil dari salah satu blogger pengguna Wordpr*** (pelan-pelan ntar ketahuan ma Google..hehe).
JavaScript merupakan bahasa pemrograman web yang dinamis, kita dapat melakukan tindakan scripting seperti PHP namun tidak se-Komplex PHP. Wah, apa itu PHP? Lumayan rumit lah karena harus ada web server, kalo offline bisa menggunakan XAMPP, tapi untuk beberapa posatingan akan saya jelaskan mengenai PHP. Sekarang saatnya JavaScript dulu, OK!

JavaScript dapat membangun web statis menjadi dinamis, karena dapat melakukan aksi-aksi yang dapat kita defiisikan dengan bahasa pemrograman, menggunakan fungsi Logika, Fungsi IF, While dan lain-lain.
Namun, untuk tahap awal saya akan menjelaskan tentang dasar-dasar dari JavaScript.

Cara penulisan JavaScript ada 3 cara yaitu ditulis di dalam tag <head></head> lalu di eksekusi langsung di tag <body></body>. Kemudian yang ke-dua langsung ditulis scriptnya di dalam <body></body> dan sekaligus dieksekusi. Lalu yang terakhir dengan cara membuat file JavaScript terpisah dari dokumen HTML. Yaitu membuat file.js tersendiri, lalu di eksekusi pada bagian <body></body>.

Untuk mengenalkan JavaScript kepada browser kita perlu mendefinisikan bahasanya terlebih dahulu dengan cara menuliskannya seperti ini:

//kode JavaScript disini

</script>

Coba perhatikan contoh implementasi ke-tiga cara di atas:

1. Menuliskan Script di dalam tag <head></head>

<html>

<head>

      <titile>JavaScript di dalam Tag Head</titile>

//Kode javascript taruh disii

</script>

</head>

<body>

//Kode pemanggilan taruh disini

</script>

</body>

</html>

2. Menuliskan Script di dalam tag <body></body>

<html>

<head>

       <titile>JavaScript di dalam Tag Body</titile>

</head>

<body>

//Kode script dan pemanggilan taruh disini

</script>

</body>

</html>

3. Menuliskan file JavaScript di dokumen terpisah lalu dieksekusi pada dokumen HTML

<html>

<head>

       <titile>JavaScript di dalam Tag Body</titile>

</head>

<body>

//hasil akan tampil disini

</script>

</body>

</html>

Jangan lupa dalam peletakan file.js di dalam folder yang sama dengan file.html agar lebih mudah di-eksekusi.

Nah, bagaimana? apakah postingan saya kali ini cukup membantu? Jika ada hal yang didak dimengerti silahkan tinggalkan komentar Anda.OK!
See you..to next post!!!

Format tag HTML (Web-Learning)

2009-05-06T15:27:00.029+07:00

Pada HTML terdapat beberapa tag yang akan menyusun teks yang kita buat. Sebenarnya tag-tag ini sudah tidak dianjurkan untuk dipakai dalam pembuatan halaman HTML yang akan digunakan di media Internet. Namun tidak ada salahnya kita mengetahuinya karena ini merupakan dasar dalam format sebuah teks. Sekarang format teks telah diganti dengan menggunakan CSS (Cascending Style Sheet) yang memang lebih mudah dalam menyusun format teks.

Baiklah, berikut ini merupakan beberapa tag untuk formatting teks HTML:

1. Format teks menjadi tebal <b></b>
    <b>Teks ini tebal</b><br>

2. Format teks menjadi miring <i></i>
   <i>Teks ini miring</i><br>

3. Format teks menjadi digaris bahawi<u></u>
   <u>Teks ini digaris bawahi</u><br>

4. Format teks supersript <sup></sub>
    Normal<sup>superscript</sup><br>

5. Format teks subscripts <sub></sub>
   <sub>subscript</sub>Normal<br>

6. Format teks dicoret <strike></strike>
   <strike>Teks ini dicoret</strike><br>

Sebelumnya Anda jangan heran dengan tag <br>. Itu hanya cara untuk membuat baris baru pada teks.
Output dari 6 format tag diatas adalah sbb:

1. Teks ini tebal

2. Teks ini miring

3. Teks ini digaris bawahi

4. Normal^superscript

5. _subscriptNormal

6. ~~Teks ini dicoret~~

Terima kasih,

3 Tag Dasar pada HTML (Web-Learning)

2009-05-04T21:20:00.143+07:00

Sebelum melangkah lebih jauh lagi, kita perlu mengetahui 3 tag dasar dari HTML sebab nantinya akan lebih mudah memahaminya.

Pada bahasa HTML terdapat banyak tag yang umum digunakan namun kini banyak tag yang telah diusangkan oleh Konsorsium W3C karena telah menuju tahap Standarisasi penulisan menggunakan CSS pada HTML 4 dan XHTML 1. Namun, tidak perlu khawatir. Tidak ada salahnya mengetahui tag-tag dasar yang masih digunakan ataupun yang telah diusangkan. Sebab, kita masih mempunyai partner browser paling setia yang mampu menerjemahkan bahasa HTML secara keseluruhan yaitu, Internet Explorer. Ok!

Baiklah, langsung saja menuju tag-tag tersebut. Saya tidak akan mengawalinya dengan penulisan judul pada dokumen HTML sebab pada postingan lalu telah saya terbitkan tersendiri. Jadi, sekarang akan saya jelaskan tag-tag dasar yang lain.

1. Tag untuk menulis paragraf

Bentuk : <p> ini adalah paragraf </p>

Pada tag di atas akan dihasilkan output "ini adalah paragraf". Secara otomatis oleh web browser akan menerjemahkan sebagai teks/paragraf.

2. Tag untuk hyperlink

Bentuk : <a href="http://www.google.co.id">Google</a>

Pada tag di atas kita dapat menuliskan alamat web yang akan kita tuju setelah tanda "=". Saya menggunakan alamat Om Google sebagai contoh. Nah, alamat ini tidak akan ditampilkan pada halaman web, yang ditampilkan adalah tulisan Google yang menunjukkan sebagai nama alamat web akan kita kunjungi.

3. Tag untuk menampilkan gambar

Bentuk : <img src="gambar.jpg" width="???" height="???" />

Untuk tag ini, jika Anda meng-copy paste contoh di atas tidak akan muncul, sebab itu hanyalah contoh format menampilkan gambar. Jika ingin tampil, masukkan alamat gambar setelah tanda "=". Boleh alamat url dari gambar di web dan bisa juga alamat gambar yang Anda miliki pada folder dari Project web Anda.

Terima Kasih,

Jenis - Jenis Tag Judul pada HTML (Web-Learning)

2009-05-04T06:30:00.011+07:00

Baiklah, saya akan menjelaskan tentang penulisan Judul tulisan dalam HTML yang biasanya disebut sebagai title/heading. Ini digunakan untuk menulisakan judul terdapat 6 tingkatan, antara lain mulai dari yang paling besar yaitu heading 1 hingga yang terkecil yaitu heading 6.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6> 

Tag-tag di atas jika ditampilkan oleh web browser maka akan terlihat seperti ini:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Mengapa harus menggunakan Heading untuk membuat judul tulisan? Jawabannya sangat sederhana, yaitu untuk memberikan perbedaan dengan teks/paragraf. Sebab nantinya kita akan menggunakan CSS untuk memberikan format teks. Jika Anda telah belajar Ms. Word pasti tahu mengenai Heading.

Terima Kasih,

Aplikasi untuk membuat Halaman HTML? (Web-Learning)

2009-05-03T22:27:00.008+07:00

Sebelum kita beranjak lebih jauh tentang HTML, sebaiknya kita harus tahu komponen atau aplikasi penyusun untuk membuatnya. Sebab, hal ini sangatlah penting. Karena jika kita membuat HTML pada aplikasi dokumen biasa seperti Ms.Word yang umum digunakan untuk membuat tulisan, beda halnya dengan membuat halaman HTML.

Banyak aplikasi yang digunakan untuk membuat HTML seperti, Notepad, Wordpad, Dreamweaver (GUI dan Code) dll.

Namun jika komputer yang kita miliki hanya ber-Pentium 2 ke bawah, tidak perlu cemas karena kita dapat menggunakan Notepad dan jika komputer kita di atas Pentium 2, kita dapat memakai Dreamweaver karena lebih mudah dan tag-tag telah tersedia sekaligus ada yang berbasis GUI (Graphic User Interface). GUI artinya kita tidak perlu tahu kode-kode atau tag untuk membuat HTML karena tampilannya telah diterjemakan sehingga lebih mudah dalam penyusunannya.

Akan tetapi saya tidak menyarankan kepada Anda menggunakan untuk menggunakan Dreamwever berbasis GUI. Jika kita ingin mahir, sebaiknya kita biasakan membuat dengan tampilan Code saja.

Terima Kasih

Mengenal Bagian pada HTML (Web-Learning)

2009-05-02T14:20:00.003+07:00

Baiklah kawan, sekarang saya akan memberi tahu bagian terpenting pada halaman HTML bagi Anda yang merasa baru mengenal HTML. HTML tersusun atas 4 bagian utama, diantaranya:
1. Tag Dokumen
2. Tag Tubuh/isi
3. Tag Kepala
4. Tag Judul

Setiap penulisan tag HTML harus diawali dengan tag pembuka dan tag penutup. Bentuk dari tag pembuka adalah <perintah> dan tag penutup </perintah> untuk mengakhiri perintah yang ditulis.

Bagian pertama adalah Tag Dokumen. Bagian ini sangat penting karena merupakan syarat untuk membuat HTML yang berarti dokumen yang kita buat adalah jenis bahasa Markup. Bentuk tag ini adalah:
"<html></html>"

Bagian kedua adalah Tag Tubuh/Isi. Pada bagian ini untuk menempatkan isi dari halaman sebuah web yang akan ditampilkan oleh web browser. Bentuk tag nya adalah:
"<body></body>"

Bagian ketiga adalah Tag Kepala atau head yang digunakan untuk menempatkan isi dari tag ke-4 yaitu Tag Judul. Bentuknya adalah :
"<head></head>"

Bagian terakhir adalah Tag Judul yang ditempatkan di dalam Tag Kepala untuk menampilkan judul pada caption bar agar saat membuat dokumen tidak bertuliskan "untitled" yang artinya tidak berjudul.

Secara keseluruhan jika bagian di atas digabungkan akan terlihat seperti berikut:

-------------------------------------------

<html>

<head>

<title> Judul website </title>

</head>

<body>

isi website

</body>

</html>
------------------------------------------

Untuk contoh-contoh isi ataupun tag-tag yang digunakan pada HTML akan dibahas pada Entri selanjutnya...
Terima Kasih.

Mengenal HTML (Web-Learning)

2009-05-01T11:44:00.010+07:00

Tahukan Anda tentang HTML?

HTML adalah singkatan dari Hypertext Markup Language, merupakan bahasa markup yang akan menerjemahkan <tag-tag> agar dapat di akses oleh browser. HTML digunakan untuk membuat halaman web yang nantinya akan menjadi sebuah web page yang siap untuk dikombinasikan dengan berbagai komponen-komponen tambahan agar lebih menarik dan dinamis.

HTML memiliki beberapa bagian penting yang harus dipenuhi sesuai standar dari konsorsium W3C. Seperti di bawah ini:

-------------------------------------------------

<html>

<head>

<title> Judul yang akan ditampilkan pada caption bar </title>

</head>

<body>

isi halaman web

</body>

</html>

-------------------------------------------------

Aplikasi yang digunkan untuk dapat membuka HTML disebut web browser. Jika kita sering mendengar isstilah Internet Explorer merupakan salah satu web browser pertama dan terbaik. Namun sekarang telah banyak aplikasi web browser yang dapat digunakan untuk dapat membuka halaman web, antara lain : Mozilla Firefox, Opera, Safari, Google Chrome dll.

Itu semua merupakan komponen-komponen yang akan kita pelajari dalam Blog ini terutama tentang bahasa HTML dan PHP.

Sedikit pengantar di atas merupakan gambaran tentang Blog ini.

Terima Kasih.