Rabu, 13 Maret 2013

BELAJAR TAG HTML YUK...

Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:


Titel Websiteku


Ini adalah dokumen HTML pertamaku

Preview
Simpan file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all files". Kemudian buka browser, dari menu File klik Open dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " </…>". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.
Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): , body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka " " dan tag penutup " " dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: , , , , semuanya adalah sama.
Baca juga Update dari Pengenalan HTML ini di Tutorial HTML.


Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:


Disini titel websiteku


Disini adalah konten yang tampil di browser

Preview
Tag pertama pada dokumen HTML diatas adalah: " " tag ini merupakan awal dari suatu dokumen HTML, dan tag " " merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag ….
Kemudian tag " …" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " " merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".
Titel Websiteku
Tag "…" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Baca juga Update dari Tag Dasar HTML ini di Tutorial HTML.


Format Font HTML

Tag HTML untuk font adalah …, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:



Untuk membuat jenis font (face):

Judul dengan font Verdana

Konten dengan font Times
Untuk membuat ukuran (size):

Judul dengan size 5

Konten dengan size 3
Untuk membuat warna font (color):

Judul dengan warna biru

Konten dengan warna merah
Contoh komplit untuk membuat jenis font (face),size dan color:

Judulnya Tentang Font

Ini adalah contoh tulisan dengan pengaturan font yang menggunakan tag HTML elemen font dengan atribut face, size dan color...
Preview
Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size:
Atribut
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag tidak dipergunakan lagi, sebagai gantinya dibuat tag

PENGENALAN HTML

Sebelumnya sudah ada postingan yang berjudul Belajar HTML, disana sudah dijelaskan secara mendasar tentang HTML. Sekedar untuk mengingatkan kembali tentang apa itu HTML anda bisa membacanya di Pengenalan HTML.
Didalam tutorial HTML ini kita akan membahas kembali tentang HTML tersebut termasuk elemen-elemen HTML yang belum kita bahas sebelumnya seperti frame, table, form dan sebagainya.

Apa yang dibutuhkan dalam Belajar HTML ini?

  1. Komputer dan koneksi ke Internet.

    Agar kita bisa membaca dan belajar sambil praktek.
  2. Teks editor.

    Teks editor seperti Notepad di Windows adalah pilihan paling mudah karena sudah terintegrasi dengan system kita. Jika ingin menggunakan teks editor yang lebih bagus lagi, bisa men-download Notepad ++.
    Jika menggunakan software lain seperti MS FrontPage atau Dreamweaver usahakan untuk selalu berada di kode "HTML View" dan gunakan real browser untuk menampilkan atau "preview" dokumen HTML anda.
    Dengan kata lain biasakan untuk membuat, mengedit dan memasukkan kode-kode HTML dengan mengetiknya secara manual sehingga nantinya akan terbiasa dan hafal dengan kode-kode HTML.
  3. Browser atau peramban.

    Untuk Windows ada Internet Explorer namun jika ingin menggunakan peramban yang lain ada bermacam-macam pilihan seperti Mozilla Firefox, Google Chrome, Opera, Safari dsb.
  4. Kreatif, tekun dan sabar.

    Misal jika diberikan contoh-contoh HTML, kemudian berinisiatif membuat contoh-contoh yang berbeda berdasarkan imajinasinya sendiri ini namanya kreatif.

DESAIN KEMASAN PRODUK

Hai my students....

di bawah ini bisa kalian lihat contoh2 desain kemasan produk.
Silahkan dilihat dan dipraktekkan ya...
agar kalian semakin terasah ilmu desain grafisnya...:) ok..!!!
 Cara buatnya gampang kok...
1. Buka lembar kerja baru di Corel Draw (versi bebas)
2. Setting ukuran kertas sesuai dengan kemasan
3. Buat Layoutnya
4. Atur warna dan font yang menarik (ingat prinsip K3R ya...!)
5. Finishing
6. Selesai deh....:)



 

Nahhhhhh...kalo yang pepsodent di atas itu asli desain nya bu dita...:)