Materi HTML by : Otniel Adityo

DAFTAR ISI MODUL

Halaman

KATA PENGANTAR .......................................................................     i

DAFTAR ISI MODUL .....................................................................    ii

PETA KEDUDUKAN MODUL ...........................................................    iii

MEKANISME PEMELAJARAN ..........................................................    iv

PERISTILAHAN / GLOSSARY ..........................................................    v

I.     PENDAHULUAN ...............................................................    1

A.   Deskripsi Judul...............................................................    1

B.    Prasyarat ......................................................................    1

C.   Petunjuk Penggunaan Modul ...........................................    1

1.    Petunjuk Bagi Siswa ..................................................    1

2.    Peran Guru ..............................................................    3

D.   Tujuan Akhir .................................................................    3

E.    Kompetensi ..................................................................    4

F.    Cek Kemampuan ............................................................    5

II.  PEMELAJARAN ................................................................    7

A.   Rencana Pemelajaran Siswa ............................................    7

B.    Kegiatan Belajar ............................................................    8

Kegiatan Belajar 1: Tag-tag dasar HTML...........................    8

a.    Tujuan Kegiatan Pemelajaran.................................    8

b.    Uraian Materi ......................................................    8

c.    Rangkuman ........................................................ 52

d.    Tugas ................................................................. 52

e.    Tes Formatif ....................................................... 53

f.     Kunci Jawaban Formatif ....................................... 54

g.    Lembar Kerja ...................................................... 56

Kegiatan Belajar 2: Memahami dasar-dasar   pemrograman web                57

h.    Tujuan Kegiatan Pemelajaran ................................ 57

i.     Uraian Materi ...................................................... 57

j.     Rangkuman ........................................................ 117

k.    Tugas ................................................................. 117

l.     Tes Formatif ....................................................... 119

m.  Kunci Jawaban Formatif ....................................... 120

n.    Lembar Kerja ...................................................... 121

Kegiatan Belajar 3: Membangun halaman web dengan bahasa pemrograman berbasis web  ...................................................................... 123

o.    Tujuan Kegiatan Pemelajaran ................................ 123

p.    Uraian Materi ...................................................... 123

q.    Rangkuman ........................................................ 125

r.     Tugas ................................................................. 125

s.    Tes Formatif ....................................................... 125

t.     Kunci Jawaban Formatif ....................................... 126

u.    Lembar Kerja ...................................................... 126

III.   EVALUASI ....................................................................... 127

A.   Tes Tulis  ...................................................................... 127

B.    Tes Praktek .................................................................. 127

C.   Kunci Jawaban Tes Tulis ................................................. 128

D.   Lembar Penilaian Tes Praktek ......................................... 130

IV.     PENUTUP ........................................................................ 135

DAFTAR PUSTAKA ..................................................................... 136

PERISTILAHAN/GLOSSARY

Animation                  :  Animasi dari beberapa gambar diam dibuat seperti hidup tanpa ada patah-patah dalam pergerakannya.

Banner                       :  Merupakan kepala atau bagian atas dari sebuah web site.

Download                  :  Proses pengambilan file atau mengcopy file.

Effect                         :  Tindakan yang dikerjakan untuk menghaluskan atau memperindah animasi pada obyek.

Event                         :  Tindakan yang dilakukan setelah adanya action.

Export                        :  Merubah jenis format ke bentuk yang lain.

Format                       :  Bentuk ektensi dari jenis file.

Frame                        :  Bagian dari Timeline.

Grouping                   :  Mengumpulkan beberapa obyek untuk dijadikan satu.

HTML                         :  Hypertext Markup Language, bahasa penanda hipertext

Insert                        :  Memasukkan jenis file kedalam bidang kerja SWiSHmax.

Installation manual   :  Petunjuk Instalasi

Keyframe                  :  Pada dasarnya hampir sama dengan frame. Hanya saja untuk Key frame lebih menunjukkan untuk satu frame.

License Agreement   :  Persetujuan lisensi penggunaan suatu software tertentu

Movie                        :  File yang dibuat dalam SWiSHmax.

Object                        :  Benda yang sedang dikerjakan dalam bidang kerja SWiSHmax.

Operand                    :  data yang dioperasikan atau dimanipulasi.

Operator                    :  simbol/tanda yang digunakan untuk melakukan operasi-operasi matematis atau operasi string.

Player                        :  Untuk memainkan animasi yang telah dibuat.

Preview                     :  Melihat hasil yang telah dikerjakan.

Scane                         :  Satu movie merupakan satu Scane.       

Search Engine           :  Mesin bantu pencarian data.

Server                       :  Pelayan, Komputer induk yang bertugas untuk melayani komputer-komputer klien.

Software                   :  Perangkat lunak, program yang berjalan   di  komputer.

Source Code              :  Kode asli suatu program

Time Line                   :  Garis waktu atau pewaktuan yang terdapat dalam SwiSHmax.

Web design               :  Pembuatan/desain halaman-halaman web.

A.   Kompetensi

SILABUS

NAMA SEKOLAH                   :     SMK NEGERI 1 KOTA BEKASI

MATA PELAJARAN               :      Perencanaan WEB Dasar

KELAS/SEMESTER               :      I/ 1 dan 2

STANDAR KOMPETENSI    :     Membuat dokumen dengan HTML sesuai spesifikasi

KODE KOMPETENSI             :     TIK.PR02.024.01

ALOKASI WAKTU                  :     104 X 45 Menit

KOMPETENSI DASAR	INDIKATOR	MATERI PEMBELAJARAN	KEGIATAN PEMBELAJARAN	PENILAIAN	ALOKASI WAKTU			SUMBER BELAJAR
					TM	PS	PI
1.      Menetapkan pemakaian dan struktur dokumen	·       Kegunaan dari dokumen dan audiens diidentifikasi ·       Bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens ditetapkan ·       Struktur dasar dokumen sesuai persyaratan pengguna dirancang ·       Site map dokumen dikem-bangkan dan dikonfirmasikan dengan klien	·       Kegunaan dari dokumen dan audiens ·       Bahasa HTML ·       Struktur dasar penulisan dokumen ·       Site map dokumen dikembangkan dan dengan klien	·       Mengidentifikasi kegunaan dari dokumen dan audiens ·       Menetapkan bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens ·       Membuat program sederhana dari script  dasar ·       Merancang struktur dasar dokumen sesuai persyaratan pengguna ·       Mengatahui scriptdasar HTML ·       Mengkonfirmasikan Site map dokumen dikembangkan dan dengan klien	·      Program sederhana ·       Program script dasar	2	4(8)		·       Buku HTML Dasar ·       E-book HTML ·       Komputer ·       Modul ajar ·       jobsheet
2.      Membuat struktur dokumen dengan bahasa HTML	·       Dokumen HTML dilengkapi dengan Head dan title ·       Body pada dokumen dibuat, teks dan paragraf sesuai kebutuhan ditambahkan ·       Format dokumen menarik dan  mudah dibaca dibuat ·       Simbol khusus pada browser/ platform ditambahkan dan  ditampilkan secara tepat ·       Dokumen disimpan sesuai dengan  penamaan standar.	·       Dokumen HTML dengan Head dan title ·       Body pada dokumen, teks dan paragraf sesuai kebutuhan ditambahkan ·       Simbol khusus pada browser/ platform	·       Menlengkapi dokumen HTML dengan Head dan title ·       Membuat Body pada dokumen ·       Menambahkan teks dan paragraf sesuai kebutuhan ·       Format dokumen menarik dan  mudah ·       Dokumen penamaan standar. ·       Medesain Format dokumen menarik dan  mudah dibaca dibuat ·       Penambahan simbol khusus pada browser/ platform ·       Mengatur itampilan secara tepat ·       Penyimpanan dokumen disimpan sesuai dengan  penamaan standar.	·      Program sederhana ·       Program dokumen sederhana	2	4(8)	8(16)	·       Buku HTML Dasar ·       E-book HTML ·       Komputer ·       Modul ajar ·       jobsheet
3.      Memformat dokumen dan menambahkan obyek	·       Teks diformat   untuk memenuhi persyaratan penyajian pengguna ·       Background warna atau gambar yang sesuai menurut persyaratan pengguna ( logo peru-sahaan, buku pedoman perusahaan) dipasang ·       Posisi setiap elemen pada halaman dibuat lebih menarik ·       Indent teks dan list (ordered, unordered, dan nested) dibuat ·       Gambar disisipkan (GIF, JPEG, atau embedded image) dan  dokumen diformat sesuai persyaratan  ·       Wrap teks di sekitar gambar digunakan atau ditambahkan jarak di sekitar gambar ·       Skala gambar  dan perataan pada dokumen di format	·       Format teks dengan HTML ·       Pemberian Background  dan warna pada dokumen ·       Menempatkan objek pada bidang desain	·       Mempormat Teks untuk memenuhi persyaratan penyajian pengguna ·       Memasang Background warna atau gambar yang sesuai menurut persyaratan pengguna ( logo peru-sahaan, buku pedoman perusahaan) ·       Menempatkan Posisi setiap elemen pada halaman ·       Indent teks dan list (ordered, unordered, dan nested) ·       Wrap teks di sekitar gambar digunakan atau jarak di sekitar ·       Skala gambar  dan perataan pada dokumen di format ·       Membuat setiap elemen pada halaman dibuat lebih menarik ·       Membuat Indent teks dan list (ordered, unordered, dan nested) ·       Menyisipkan gambar disisipkan (GIF, JPEG, atau embedded image) ·       Mempormat dokumen sesuai persyaratan  ·       Menambahkan Wrap teks di sekitar gambar ·       Menambahkan jarak di sekitar gambar ·       Mempormat skala gambar  dan perataan pada dokumen	·      Program sederhana campuran dari materi 3 ·       Contoh program insert object (gambar dan teks)	2	4(8)	8(16)	·       Buku HTML Dasar ·       E-book HTML ·       Komputer ·       Modul ajar ·       jobsheet

NAMA SEKOLAH                   :     SMK NEGERI 1 KOTA BEKASI

MATA PELAJARAN               :     Perencanaan WEB Dasar

KELAS/SEMESTER               :     I/ 1 dan 2

STANDAR KOMPETENSI    :     Menerapkan dasar-dasar pembuatan web statis tingkat dasar

KODE KOMPETENSI     :           TIK.PR02.027.01

ALOKASI WAKTU                  :     128 X 45 Menit

KOMPETENSI DASAR	INDIKATOR	MATERI PEMBELAJARAN	KEGIATAN PEMBELAJARAN	PENILAIAN	ALOKASI WAKTU			SUMBER BELAJAR
					TM	PS	PI
1.    Menjelaskan  konsep dasar dan teknologi  dari Webpage.	·       Konsep-konsep dan teknologi web       dijelaskan (web Server, URL, HTTP, HTML, Web browser , gateway ·       Perbedaan antara klien dan server dijelas. ·       Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layar dijelaskan. ·       Ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang  web page dibandingkan ·	·  Konsep dan teknologi web       ·  Konsep klien dan server pada teknologi WEB ·  Kapasitas Bandwidth dan kulaitas tampilan halaman WEB ·  Pemilihan software aplikasi perancangan web ·  Perbandingan local server dan remote server (hosting provider)	·   Menjelaskan Konsep-konsep dan teknologi web  (web Server, URL, HTTP, HTML, Web browser , gateway ) ·   Mengetahui Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer ·   Menjelaskan perbedaan antara klien dan server ·   Menjelaskan cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer ·   Membandingkan ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang  web page ·   Menjelaskan keuntungan dan kerugian running dari server yang dimiliki dibandingkan server provider. ·	·       Kompilasi program ·	4	4(8)		·       Bukub Pemrograman HTML ·       Komputer ·       Buku membuat halaman WEB dengan Frontpage
2.    Mempersiapkan pekerjaan pembuatan web	·       Software teks editor dan browser sesuai dengan kebutuhan diidentifikasi ·       Software beroperasi sesuai dengan standar operasi software ·       Sketsa disain untuk web yang akan dibuat sudah disiapkan ·       Data yang akan ditampilkan di Web tersedia ·       Area kerja untuk membuat dokumen web baru sudah disiapkan.	·       Pemilihan teks editor dan browser ·       Kinerja WEB Browser ·       Desain layout halaman WEB	·       Mengidentifikasi software teks editor dan browser sesuai dengan kebutuhan ·       Mempersiapkan software beroperasi sesuai dengan standar operasi software ·       Membuat Area kerja untuk membuat dokumen web ·       Mempersiapkan sketsa disain untuk web yang akan dibuat sudah disiapkan ·       Menyediakan data yang akan ditampilkan di Web ·       Menyiapkan area kerja untuk membuat dokumen web baru.	·       sketsa disain untuk web				·       Bukub Pemrograman HTML ·       Komputer ·       Buku membuat halaman WEB dengan Frontpage
3.    Melakukan pembuatan dokumen web baru	·       Proses pembuatan Web sesuai dengan standar operasi aplikasi dilakukan ·       Web yang dibuat tampil dilayar sesuai dengan disain ·       Data yang tersedia tampil di layar Web	·       Proses pembuatan Web sesuai dengan standar operasi aplikasi	·       Memanagemen langkah langkah Proses pembuatan Web sesuai dengan standar operasi aplikasi ·       Membandingkan  Web yang dibuat tampilan dilayar sesuai dengan disain ·       Menampilkan data yang tersedia di layar Web	·       Kompilasi program ·       Hasil Web standar	4	4(8)		·       Bukub Pemrograman HTML ·       Komputer ·       Buku membuat halaman WEB dengan Frontpage
4.    Menampilkan Web dalam browser	·       Format URL (Uniform Resource Locator) dijelaskan ·       Peran dari browser dalam membaca file-file Web didemonstrasikan (text-only, hypertext) dengan mengakses  ke URL tertentu melalui menu yang tersedia ·       Perbedaan browser mempengaruhi tampilan dari halaman web dapat diidentifikasi	·       Format URL (Uniform Resource Locator) ·       Peran dari browser dalam membaca file-file ·       Perbandingan lokasi browser	·       Membuat tampilan Format URL (Uniform Resource Locator) ·       Mendemonstrasikan Peran dari browser dalam membaca file-file Web (text-only, hypertext) dengan mengakses  ke URL tertentu melalui menu yang tersedia ·       Mengatahui macam-macam browser web ·       Mengetahui Peran dari browser dalam membaca file-file Web (text-only, hypertext) dengan mengakses  ke URL tertentu melalui menu yang tersedia ·       Mengidentifikasi perbedaan browser yang mempengaruhi tampilan dari halaman web ·       Mengetahui Perbedaan browser mem-pengaruhi tampilan dari halaman web	·       Kompilasi program ·       Hasil Web standar	4	4(8)		·       Bukub Pemrograman HTML ·       Komputer ·       Buku membuat halaman WEB dengan Frontpage

Keterangan

TM          : Tatap Muka

PS           : Praktek di Sekolah (2 jam praktik di sekolah setara dengan 1 jam tatap muka)

PI            : Praktek di Industri  (4 jam praktik di Du/ Di setara dengan 1 jam tatap muka)

Struktur Dasar HTML

Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

                  <html>

                              <head>

                                          <title>Judul Halaman Web</title>

                              </head>

                              <body>

                                          ISI Halaman WEB

                              </body>

                  </html>

Keterangan:

<html> .. </html>    Mendefinisikan bahwa teks yang berada diantara 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.

<title> .. </title>     Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. Ikuti langkah-langkah berikut ini:

1.    Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan kita.

2.    Buka Browser, misalnya Internet Explorer atau Netscape Navigator.

3.    Buka program aplikasi teks editor misalnya dalam latihan ini adalah Notepad.

4.    Mulai baris paling atas, tuliskan:

<html>

                                <head>

        <title>Latihan 1</title>
</head>

                                <body>

                                Ini adalah halaman web pertama saya.

        </body>
</html>

5.    Simpan file anda dengan cara klik menu File - Save:

     

6.    Selanjutnya pilih direktori latihan yang tadi kita buat.

7.    Pada box File name, isikan nama filenya dengan Latihan1.html

8.    Pada drop down list di Save as type, pilih All Files. Sehingga tampilannya seperti berikut:

9.    Simpan proyek anda dengan meng-klik pada tombol Save

Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti Internet Explorer, Mozila Firefox.

1.    Klik menu File à Open

     

2.    Setelah jendela Open terbuka, klik tombol Browse

     

3.    Ketika jendela baru terbuka, pilih direktori Latihan dan pilih file Latihan1.html.

     

4.    Klik tombol Open lalu tekan tombol Ok, halaman web yang ditampilkan dalam browser adalah seperti berikut:

                 

Catatan:

1 Semua dokumen HTML mempunyai ekstensi .html (atau .htm)

1 Semua halaman web (homepage) mempunyai file Latihan1.html. File Latihan1.html secara otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat menyimpan file tersebut di buka di browser.

      Kode Warna

      Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:        

Red	Green	Blue
FF	FF	00

      Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=”yellow”.

      Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.

Warna	Heksadesimal
White	#FFFFFF
Black	#000000
Red	#FF0000
Green	#00FF00
Blue	#0000FF
Magenta	#FF00FF
Cyan	#00FFFF
Yellow	#FFFF00

      Anda dapat juga membuat campuran sendiri warna-warna berdasarkan emajinasi anda. Yang penting anda mengikuti aturan diatas.

2.  Pengaturan Halaman Web dan Teks

Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks:

a.    <body>, digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

1 Background  =  digunakan untuk mengatur latar belakang dengan gambar/image.

1 Bgcolor         =  digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.

1 Teks              =  digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default.

1 Link               =  Untuk mengatur warna link dokumen dengan warna biru sebagai warna default

1 Vlink              =  Untuk mengatur warna visited link dokumen dengan default ungu

1 Alink              =  digunakan untuk mengatur warna active link dokumen dengan default merah.           

b.    Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

contoh1_1.html                

                <html>

                <head>

                        <title>::: Membuat Heading Dokumen HTML:::</title>

            </head>

            <body bgcolor=#000000 text=#FFFFFF>

                        <h1>Headng Tingkat 1 </h1>

                        <h2>Headng Tingkat 2 </h2>

                        <h3>Headng Tingkat 3 </h3>

                        <h4>Headng Tingkat 4 </h4>

                        <h5>Headng Tingkat 5 </h5>

                        <h6>Headng Tingkat 6 </h6>

            </body>

            </html>

            Hasilnya akan terlihat seperti:

c.     Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

d.    Line Break: <BR> Digunakan untuk pindah ke baris baru.

e.    No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

f.     Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.

e  SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

e  FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

e  COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).

contoh1_2.html               

            <html>

            <head>

                        <title>::: Mengatur Ukuran, Jenis dan Warna Font:::</title>

            </head>

            <body>

            <font size=1 Face=arial color=red>Ukuran font 1</font><br>

            <font size=2 Face=arial color=green>Ukuran font 2 </font><br>

            <font size=3 Face=arial color=blue>Ukuran font 3 </font><br>

            <font size=4 Face=verdana color=red>Ukuran font 4 </font><br>

            <font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>

            <font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>

            <font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>

            </body>

</html>

Hasilnya akan terlihat

Contoh lainnya:

<font size=2 face="times_new_roman" color="#0066cc">

g.    Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

Contoh:

<basefont size=2 face="arial,helvetica" color="#ff0000">

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu:

Perhatian: Semua tag di bawah ini membutuhkan tap penutup.

<B>                Bold text

<I>                 Italic text

<U>                Underscore

<TT>              Typewriter

<S>                Strikeout - draws a line through the text

<PRE>            Preformatted Text <DFN> Definition

<BLINK>        Text berkedip (lebih baik jangan digunakan)

<STRONG>     Strong

<ADDRESS>

                        Italic

<CITE>           Digunakan untuk quoting text

<CODE>         Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<SAMP>         Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<KBD>           Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<BIG>            Ukuran teks akan lebih besar satu ukuran

<SMALL>        Ukuran teks akan lebih kecil satu ukuran

<SUP>            Membuat teks^superscript

<SUB>            membuat teks_{sub script}

<ABBREV>     Abbreviations

<ACRONYM> Untuk akronim

<PERSON>     Digunakan untuk indexing

<Q>                            Membuat short inline quotation

<VAR>            Membuat variable name, selalu dalam italics.

h.    <HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.

Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

contoh1_3.html                

<html>

            <head>

                        <title>::: Membuat Garis Horisontal:::</title>

            </head>

            <body bgcolor=#fffccc>

                        <font size=1 Face=tahoma color=blue>Ahlan Wa Sahlan</font>

                        <hr size=1 width=150 align=left>

                        <h1><center>www.smkn1-kotabekasi.com</h1>

                        <hr size=5 align=center noshade>

            </body>

</html>

Hasilnya tampak sebagai berikut:

i.      LISTS

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.

Terdapat tiga tipe list yang dapat digunakan, yaitu:

þ  Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>.  Pada jenis ini tidak memerlukan pengurutan data.

Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai “circle” untuk bentuk lingkaran tengahnya putih, “square” untuk bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna hitam.

contoh1_4.html       

<html>

<head>

      <title>::: Membuat Undordered List:::</title>

</head>

<body>

<b><font size=3 Face=tahoma color=blue>

      Jurusan TIK yang ada di SMKN 1 Kota Bekasi ada 3 Program Studi: </b>

      <hr size=2 width=150 align=left>

      <ul type=circle>

                  <li>Multimedia

      </ul>

      <ul type=square>

                  <li>RPL

      </ul>

      <ul type=disc>

                  <li>TKJ

      </ul>

      </font>

      </body>

</html>

Hasil dari kode di atas adalah:

þ  Ordered Lists: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.  Atribut yang ada pada Ordered List adalah TYPE dan START.

contoh1_5.html       

<html>

      <head>

                  <title>::: Membuat Ordered List:::</title>

      </head>

      <body>

      <b><font size=2 Face=tahoma color=black>

SMKN 1 Kota Bekasi memiliki 3 Jurusan: </b>

      <hr size=2 width=150 align=left>

      <ol type=1>

                  <li>TIK

                  <li>Mesin

                  <li>Otomotif

      </ol>

      <hr size=3 width=500>

      <b><font size=2 Face=tahoma color=black>

Jurusan TIK memiliki 4 LAB Komputer: </b>

      <ol start=4>

                  <li>LAB. Multimedia

                  <li>LAB. RPL

                  <li>LAB. TKJ

      </ol>

      </font>

      </body>

</html>

Hasil dari kode di atas adalah:

Untuk attribut TYPE, dapat juga menggunakan:
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.

þ  Definition Lists: <DL>,  digunakan untuk menjelaskan istilah-istilah.  Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan  dan tag <DD> Definition Data yang merupakan penjabaran dari istilah.

contoh1_6.html       

<html>

<head>

      <title>::: Membuat Definition List:::</title>

</head>

<body>

      <dl>

                  <dt>  Bagian Pertama.

                  <dd> Isi dari Bagian Pertama.

                  <dt> Bagian Kedua.

                  <dd> Isi dari Bagian Kedua

      </dl>

</body>

</html>

Hasil dari kode di atas adalah:

þ  Preformatted Text: <PRE>. Digunakan untuk mengatur format tampilan agar sesuai dengan aslinya.

contoh1_7.html       

     <html>

     <head>

     <title>Aplikasi dari &lt;pre&gt; tag</title>

     </head>

     <body>

     <h3>tanpa menambahkan pre</h3>

                          Berakit-

                       rakit ke hulu

                     berenang-renag

                ketepian, bersakit-sakit

       dahulu, bersenag-senang kemudian

     <p><h3>dengan menggunakan pre</h3>

     <pre>

                         Berakit-

                       rakit ke hulu

                     berenang-renag

                ketepian, bersakit-sakit

       dahulu, bersenag-senang kemudian

     </pre>

     </body>

     </html>

Hasil dari kode di atas adalah:

þ  Extended Quotations: <BLOCKQUOTE>, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.

contoh1_8.html       

              <html>

                  <head> <title>::: Membuat Blockquote:::</title>  </head>

                  <body>

                  <h3>Pengaturan Teks</h3>

                  <blockqoute>

Untuk mengatur halaman web yang baik, pengaturan teks dapat dilakukan dengan menggunakan blockqoute.

</blockqoute>

</body>

</html>

Hasilnya tampak seperti bnerikut ini:

3.  Hypertext Link

Digunakan untuk membuat link/penghubung antara suatu halaman dengan halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman yang sama.

Sintak tag link adalah sebagai berikut:

      <a href=url_tujuan>nama_link</a>

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <body>.  Adapun macam-macam link adalah sebagai berikut:

Link ke Dokumen Lain

Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat script berikut dan beri nama dengan link_dokumen_lain.html.

<html>

<head>

       <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>

</head>

<body bgcolor=#ffffd0>

<font face=arial size=6 color=tahoma>

<b>.::: SMKN 1 Kota Bekasi:::. <br>

<font face=arial size=4 color=blue>

<i>Sukses itu didapat dari usaha dan kerja keras serta doa</i>

<font face=arial size=1 color=tahoma>

<hr size=2 width=100 align=left color=blue>

| <a href=link_dokumen_lain.html>H o m e</a>

| <a href=proli.html>Program Keahlian</a>

| <a href=ekstra.html>Ekstra Kurikuler</a> |

<hr><p><font face=verdana size=4 color=orange>

Ahlan wa Sahlan di web kami ...

</body>

</html>

Buat lagi file berikut dan beri nama dengan proli.html

<html>

<head>

       <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>

</head>

<body bgcolor=#ffffd0>

<font face=arial size=6 color=tahoma>

<b>.::: SMKN 1 Kota Bekasi:::. <br>

<font face=arial size=4 color=blue>

<i>Sukses itu didapat dari usaha dan kerja keras serta doa</i>

<font face=arial size=1 color=tahoma>

<hr size=2 width=100 align=left color=blue>

| <a href=link_dokumen_lain.html>H o m e</a>

| <a href=proli.html>Program Keahlian</a>

| <a href=ekstra.html>Ekstra Kurikuler</a> |

<hr><p><font face=verdana size=4 color=brown>

Program Keahlian<br>

<font size=1>

<ul type=circle><li>Rekayasa Perangkat Lunak

                   <li>Multimedia

                   <li>Teknik Komputer dan Jaringan

                   <li>Teknik Mekanik Otomotif

                   <li>Teknik Bodi Otomotif

                   <li>Teknik Pemesinan

                   <li>Teknik Las</ul>

</body>

</html>

Untuk melengkapi latihan kali ini, buat juga file berikut dan beri nama ekstra.html

<html>

<head>

       <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>

</head>

<body bgcolor=#ffffd0>

<font face=arial size=6 color=tahoma>

<b>.::: SMKN 1 Kota Bekasi:::. <br>

<font face=arial size=4 color=blue>

<i>Sukses itu didapat dari usaha dan kerja keras serta doa</i>

<font face=arial size=1 color=tahoma>

<hr size=2 width=100 align=left color=blue>

| <a href=link_dokumen_lain.html>H o m e</a>

| <a href=proli.html>Program Keahlian</a>

| <a href=ekstra.html>Ekstra Kurikuler</a> |

<hr><p><font face=verdana size=4 color=orange>

Ekstra Kurikuler<br>

<font size=1>

<ul type=circle>

       <li>Pramuka

       <li>Rohis

       <li>PMR

       <li>Paskibra

       <li>Boxer

</ul>

</body>

</html>

Hasil dari kode-kode diatas adalah sebagai berikut:

Jika link-link tersebut di-klik, maka hasilnya adalah sebagai berikut:

Link ke bagian tertentu dalam dokumen yang sama

Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang bersangkutan.

Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:

       <a href=”#php”> Bab 1 </a>

atau dapat ditulis lengkap:

<a href=”belajar_php.html#php”> Bab 1 </a>

dan untuk nama anchornya:

<a name=”php”>Ada apa dengan PHP?</a>

Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:

             http://nama_URL.

Contoh:

<a href=”http://www.dikti.org”>www.dikti.org</a>

<a href=”http://www.smkn1-kbks.com”>www.smkn1-kbks.com</a>

Link ke Alamat Email

Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis.

Untuk membuat link ke alamat email hanya menambahkan atribut mailto:alamat_email ke dalam tag <A HREF>

Misalnya:

       <A HREF="mailto:smkn1-kbks.yahoo.com">Kirim email</a>

Link File yang akan didownload

Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen

tersebut. Format penulisannya adalah <a href=nama_file>

Misal:

       <a href=”antivirus.zip”>Download anti virus</a>

       <a href=”latihan.doc”>Download latihan Html</a>

       <a href=”mysql.exe”>Download MYSQL</a>

4.  Menyisipkan Gambar/Images

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalah

                   <img src=”nama file gambar”>

Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk mengatur ukuran gambar, menggunakan attribut width daan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace.

contoh1_9.html         

<html>

<head>

      <title>::: menampilkan images:::</title>

</head>

<body>

<b><font size=2 Face=tahoma color=black>

<img src="gambar1.jpg" alt="aplikasi 3dmaks">

<img src="ict.jpg" hspace=10 vspace=5 width=200 height =254

                   align="center" border=2>

</font>

</body>

</html>      

Tampilan dari contoh diatas adalah sebagai berikut:

5.  Layout Halaman Web dengan Tabel (Table)

Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris.

Membuat Tabel

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .

þ  <TABLE>

Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut:

·      align - perataan: rata kiri (left), tengah (center) atau kanan (right).

·      valign – mengatur bentuk perataan secara vertikal

·      bgcolor – mengatur warna latar belakang (background) dari tabel.

·      background – menentukan gambar yang digunakan sebagai background tabel

·      color – Untuk mengatur warna suatu sel dalam tabel

·      border – menentukan ukuran border tabel (dalam pixel).

·      rowspan – menggabungkan beberapa baris

·      colspan – menggabungkan beberapa kolom

·      cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).

·      cellspacing – mengatur spasi/jarak antar cell (dalam pixel).

·      width – menentukan lebar tabel dalam pixel atau percent.

·      height – Menentukan tinggi tabel

þ <TR>

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

·   align - perataan: rata kiri (left), tengah (center) atau kanan (right).

·   bgcolor - warna latar belakang dari baris.

·   valign - perataan vertikal: top, middle atau bottom.

þ <TD>

Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:

·   align – untuk menentukan perataan kolom

·   background – untuk menentukan image yang digunakan sebagai latar belakang dari kolom.

·   bgcolor – untuk menentukan warna latar belakang

·   colspan - lihat gambar contoh

·   height – untuk mengatur ukuran tinggi cell dalam pixels.

·   nowrap – untuk membuat supaya isi dari kolom tetap berada pada satu baris.

·   rowspan - lihat gambar contoh

·   valign – untuk mengatur perataan vertikal: top, middle atau bottom.

·   width – untuk menentukan lebar kolom dalam pixel atau percen.

contoh1_10.html      

<html>

<head>

<title>::: Pembuatan Table:::</title>

</head>

<body>

<font face=arial size=2 color=tahoma>

<table>

     <tr>

          <td>Ini contoh tabel sederhana tanpa border</td>

     </tr>

</table>

<p>

<table border=1>

     <tr>

          <td>Ini contoh tabel sederhana dengan border</td>

     </tr>

</table>

<p>

<table border=1>

     <tr>

          <td>No.</td>

          <td>Nama</td>

          <td>Alamat</td>

     </tr>

     <tr>

          <td>1.</td>

          <td>Wahyu</td>

          <td>Bekasi</td>

     </tr>

     <tr>

          <td>3.</td>

          <td>Lesmono</td>

          <td>Kranji</td>

     </tr>

</table>

</body>

</html>

Hasilnya adalah sebagai berikut:

contoh1_11.html      

<html>

<head>

      <title>.::: Belajar Membuat Tabel:::.</title>

</head>

<body>

                 <table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"

                       width="100%" height="115">

      <tr>

           <td width="100%" height="115" bordercolor="#C0C0C0"

               bgcolor="#BDCED9">&nbsp;</td>

                       </tr>

                 </table>

<font size="1">&nbsp;</font>

<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"

      width="100%" height="431">

      <tr>

                            <td width="23%" height="307" valign="top">

   <table border="1" cellpadding="0" cellspacing="0"

        bordercolor="#BDCED9" width="94%" height="245">

               <tr>

      <td width="100%" height="244"

      bordercolor="#C0C0C0" bgcolor="#BDCED9">&nbsp;</td>

                                 </tr>

           </table>

           <font size="1">&nbsp;</font>

           <table border="1" cellpadding="0" cellspacing="0"

               bordercolor="#BDCED9" width="94%" height="152">

                                <tr>

                         <td width="100%" height="19" bgcolor="#BDCED9"

                         bordercolor="#C0C0C0">&nbsp;</td>

                    </tr>

                <tr>

                         <td width="100%" height="132" bordercolor="#C0C0C0">

                         &nbsp;</td>

                    </tr>

           </table>

                            </td>

           <td width="77%" height="307" valign="top">

           <table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"

                    width="97%" height="411">

               <tr>

                    <td width="64%" height="109">&nbsp;</td>

                         <td width="36%" height="109">&nbsp;</td>

               </tr>

               <tr>

                    <td width="64%" height="301" rowspan="2">&nbsp;</td>

                         <td width="36%" height="24" bgcolor="#BDCED9"

                         bordercolor="#C0C0C0">

                              <font size="1">&nbsp;</font></td>

               </tr>

              

                    <tr>

                         <td width="36%" height="277" bordercolor="#C0C0C0">&nbsp;

                    </td>

                    </tr>

           </table>

           </td>

      </tr>

                 </table>

</body>

</html>

Hasilnya adalah:

Menambahkan Judul Tabel

Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel, judul kolom table dan judul baris tabel. Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut.

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER <TH>. Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judul baris terletak pada baris pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal.

contoh1_12.html      

<html>

<head>

<title>::: Pembuatan Judul Table:::</title>

</head>

<body>

<font face=arial size=2 color=maroon>

<table border=1>

       <caption align=top><b><u>Daftar Alamat</u></b></caption>

       <tr>

                  <th width=40>No.</td>

                  <th width=150>Nama</td>

                  <th width=200>Alamat</td>

       </tr>

       <tr>

                  <td align=center>1.</td>

                  <td>Wahyu</td>

                  <td>Bekasi</td>

       </tr>

       <tr>

                  <td align=center>2.</td>

                  <td>Lesmono</td>

                  <td>Kranji</td>

       </tr>

</table>

</body>

</html>

Hasilnya akan tampak sebagai berikut:

contoh1_13.html      

<html>

<head>

<title>::: Pembuatan Judul Table:::</title>

</head>

<body>

<font face=arial size=2 color=maroon>

<table border=1>

       <caption align=bottom><b><u>Daftar Alamat</u></b></caption>

       <tr>

                  <th width=60 align=left>No.</td>

                  <td width=150>1.</td>

                  <td width=200>2.</td> 

       </tr>

       <tr>

                  <th align=left>Nama</td>

                  <td>Wahyu</td>

                  <td>Lesmono</td>       

       </tr>

       <tr>

                  <th align=left>Alamat</td>

                  <td>Bekasi</td>

                  <td>Kranji</td>

       </tr>

</table>

</body>

</html>

Hasilnya akan tampak seperti berikut:

Mengatur Lebar dan Tinggi Suatu Tabel

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur tinggi table dengan atribut HEIGHT. Jika atribut WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai atribut mengunakan ukuran % (max 100%) dan ukuran pixel.

contoh1_14.html      

<html>

<head>

<title>::: Mengatur Lebar dan Tinggi Tabel:::</title>

</head>

<body>

<font face=arial size=2 color=tahoma>

<table border=1 width=100%>

       <caption align=top><b><u>Daftar Alamat</u></b></caption>

       <tr>

                  <th width=40>No.</td>

                  <th width=150>Nama</td>

                  <th width=200>Alamat</td>

       </tr>

       <tr>

                  <td align=center>1.</td>

                  <td height=50>Wahyu</td>

                  <td height=50>Bekasi</td>

       </tr>

       <tr>

                  <td align=center>2.</td>

                  <td height=30>Lesmono</td>

                  <td height=30>Kranji</td>

       </tr>

</table>

</body>

</html>

Hasilnya tampak sebagai berikut:

PENASARAN SAMA WARNA AURA MU DAN ORANG LAIN ??? TRY THIS !!

MELIHAT WARNA AURA DENGAN MATA TELANJANG

Banyak orang menduga aura hanya dapat dilihat dengan kekuatan batin tingkat tinggi, atau dengan bantuan khodam. Yang lebih modern, aura dapat terlihat jelas lewat hasil jepretan kamera kirlian. Tapi tahukah, aura sebenarnya dapat dilihat dengan mata telanjang. Tips berikut ini akan memandunya. Namun sebelum kita ulas lebih jauh, ada baiknya kita tengok sejenak mengenai apa dan bagaimana sifat aura itu. Maksudnya agar kita tidak berpijak pada pemahaman yang salah.
Ada beberapa hal penting yang berkaitan dengan aura :
- Aura manusia selalu berubah-ubah sesuai dengan kedewasaan kepribadian seseorang.
- Aura manusia berwarna-warni sesuai dengan kepribadian dan kehidupan seseorang. Masing-masing warna aura menunjukkan kepribadian yang berbeda.
- Panjang pendeknya aura dapat dideteksi dengan indra peraba kulit maupun dengan tongkat deteksi.
- Aura seseorang dapat mempengaruhi maupun dapat dipengaruhi oleh lingkungan sehingga dapat bertambah maupun dapat berkurang karena faktor lingkungan.

Ada beberapa hal yang dapat dilakukan agar pancaran aura tetap cemerlang, diantaranya :
- Makan makanan yang halal, baik dan tidak berlebihan.
- Olahraga yang cukup dan teratur.
- Memenuhi kebutuhan tubuh akan udara segar.
- Istirahat dengan cukup, mengurangi rokok, alkohol dan obat terlarang.
- Mengurangi gerak hati, gerak pikir dan kegiatan-kegiatan yang buruk.
- Mengurangi sikap hati yang kasar, mudah emosi dan memperbanyak rasa kasih sayang.
Sekarang, mari kita mulai latihan melihat aura. Sebelum melihat aura orang lain, ada beberapa urutan latihan yang harus dilakukan demi kesempurnaan hasil.
1.  Melihat Aura Dengan Jari Tangan
Carilah tembok yang berwarna putih, lalu duduklah dengan tenang pada jarak 1/2 meter dari tembok. Ambil nafas sebanyak mungkin dan tahan selama mungkin. Lakukan sebanyak 5 kali. Gosoklah kedua telapak tangan hingga terasa hangat. Tempelkanlah masing-masing jari tangan kanan dan kiri saling berpasangan. Letakkanlah kedua tangan yang masih berpasangan tadi 30 cm didepan mata dengan latar belakang tembok berwarna putih. Renggangkanlah perlahan-lahan kedua telapak tangan saling menjauh. Perhatikanlah, antara kedua ujung jari tadi akan mengeluarkan garis cahaya putih. Itulah aura yang memancar dari ujung jari kita.
2.  Melihat Aura Dengan Telapak Tangan
Tariklah nafas dan gosokkanlah kedua telapak tangan seperti pada cara No. 1. Tempelkanlah salah satu telapak tangan pada tembok yang berwarna putih. Tariklah nafas, tahan dan hembuskanlah. Lepaskan telapak tangan dari tembok. Amatilah bekas telapak tangan yang tertinggal ditembok. Itulah aura yang memancar dari telapak tangan dan lama kelamaan akan larut dalam aura alam.
3.  Melihat Aura Diri Sendiri
Letakkanlah cermin besar dihadapan kita. Duduklah dengan tenang. Usahakanlah latar belakang tembok berwarna putih dan penerangan berupa lampu neon. Tariklah nafas sebanyak mungkin dan tahanlah selama mungkin. Ulangilah sebanyak 5 kali. Tataplah bayangan diri kita yang ada dicermin. Pandangan mata diusahakan tidak melihat tubuh maupun bayangan tubuh, namun lihatlah batas tepian kepala dengan latar belakang tembok. Setelah pandangan mata kita terfokus, maka perlahan-lahan dari kepala dan bahu akan keluar cahaya aura kita. Sinar yang pertama kali terlihat, biasanya berwarna putih. Putih ini biasanya bukan merupakan warna aura kita yang sesungguhnya, melainkan dari warna aura yang sesungguhnya. Tataplah terus sampai kita melihat warna lain yang tidak berubah. Setelah berhasil, mulailah untuk melihat aura orang lain.
4.  Melihat Aura Orang Lain
Mintalah bantuan seseorang yang akan menjadi objek untuk berdiri didepan tembok yang berwarna putih. Usahakanlah penerangan didalam ruangan dibuat remang-remang atau redup. Berdirilah lebih kurang 3 meter didepan objek. Fokuskanlah pandangan mata pada bagian tepi kepala dan bahu objek. Perlahan-lahan akan keluar sinar aura dari tepi kepala objek. Fokuskanlah pandangan pada seluruh tepian tubuh objek, maka seluruh tubuh objek akan memancarkan warna aura.

Warna dari Aura mirip seperti warna pelangi yang menyelimuti permukaan sebuah benda  (terutama benda hidup) dan warna tsb dapat berubah setiap saat tergantung dari keadaan mental orang tsb.

Pada manusia Aura dapat kita lihat menjadi TIGA bagian .

Bagian pertama atau bagian yang paling dekat dengan permukaan tubuh yang seakan menyelimuti dan mengikuti lekuk tubuh secara tepat adalah Aura Kembaran kita.(atau disebut juga Aura kembaran Etheris).

Warna Aura ini kebanyakan berwarna gelap atau kadang agak kelabu.

Lapisan Kedua terletak diatasnya atau diluarnya adalah Aura bagian dalam yang sedikit banyak mencermin kankeadaan kesehatan si pemilik tubuh tsb.

Lapisan ketiga adalah lapisan diatasnya lagi atau dibagian luarnya lagi yang kita sebut Aura bagian luar ,yang sangat banyak terpengaruh oleh keadaan mental atau kebatinan orang ybs.

Warna dan Artinya :

Hitam	Lebih banyak diartikan sebagai pikiran yang negatif
Merah	Lebih banyak diartikan dengan kemarahan dan hawa nafsu
Coklat	Lebih banyak diartikan dengan keserakahan dan mementingkan diri sendiri.
Abu-Abu	Lebih banyak diartikan dengan suasana kemuraman dan kesedihan kadang ketakutan.
Oranye	Lebih diartikan dengan ambisi.
Kuning	Lebih diartikan dengan kecerdasan pada ybs.
Hijau	Sifat baik
Biru	Rasa keagamaan ,ketaatan dan cita-cita mulia
Putih	Menunjukan tingkat kerohanian yang tinggi.

Tentu masih banyak lagi warna kombinasinya yang dapat kita lihat dan ini mempunyai arti gabungan tsb.

MAU SUARA LEBIH BAGUS ?? LATIH AYO !! BACA TIPS INI !!

Berikut ini hanya tips-tips dasar buat Anda yang ingin melatih kemampuan vokal Anda :

1. Artikulasi

Artikulasi sangat diwajibkan bagi seorang penyanyi, karena pesan sebuah lagu disampaikan melalui syair yang dinyanyikan penyanyi tersebut.

Artikulasi berkaitan dengan bahasa yang digunakan pada lagu tersebut. untuk lagu berbahasa Indonesia, latihan dapat Anda bagi menjadi dua, yaitu :

- Huruf Vokal/hidup

Huruf vokal terdiri dari huruf A, I, U , E, O. latihlah berulang-ulang melafalkan kelima huruf ini. Buka mulut anda selebar-lebarnya sesuai dengan huruf yang anda lafalkan.

Perlu diperhatikan, setiap huruf harus dilafalkan dengan benar, huruf A harus benar-benar berbunyi A bukan HA atau AH, huruf I bukan IH, huruf E, benar-benar berbunyi E bukan Ek, dan seterusnya. Jadi latihlah selalu melafalkan huruf-huruf vokal ini secara rutin.

- Huruf Konsonan/mati

Huruf konsonan adalah huruf selain A,I,U,E dan O. lafalkan benar-benar huruf ini dengan baik. Perlu diperhatikan pada huruf B, P, dan T, jangan melakukan penekanan yang berlebihan pada ketiga huruf ini.

2. Pernafasan

Pernafasan ada dua yaitu pernapasan perut dan diafragma. Pada pernapasan perut, ronga perut berfungsi untuk menyimpan udara, seseorang yang menggunakan pernapasan perut akan terlihat, perutnya akan selalu bergerak seiring nafas orang tersebut. sedangkan pernapasan diafragma menggunakan rongga dada untuk menyimpan udara. Dalam bernyanyi dan memainkan alat musik tiup dianjurkan untuk menggunakan pernapasan diafragma ini. Dengan menggunakan pernafasan diafragma, penggunaan udara/napas lebih efektif dalam membantu produksi suara.

Latihlah pernapasan ini, dengan cara menarik nafas dengan mengisi rongga dada, bukan perut. Lalu buang/keluarkan nafas anda perlahan-lahan. Lakukan latihan ini bersamaan dengan latihan huruf vokal A. I, U, E, O.

3. Solfegio

Latihan solfegio dapat dilakukan dengan bantuan gitar atau alat musik melodis lainnya. Misal jika menggunakan gitar, petik satu senar/nada lalu ikuti dengan vokal anda. Tirulah nada gitar tersebut seakurat mungkin dengan suara anda. Lanjutkan latihan dengan nada-nada lain. Latihan ini berguna untuk melatif kepekaan anda terhadap nada, dan akurasi nada yang anda nyanyikan.

Lakukan latihan diatas secara rutin dan berulang-ulang.

Sementara hanya ini dulu untuk mengawali topik seputar bina vokalia ini. Saya anjurkan bagi yang ingin mempelajari vokal juga mengikuti dan memahami artikel Teori musik dasar pada blog kami ini.

Semoga artikel ini bermanfaat bagi kita semua.
TERIMA KASIH

RAMALAN NOSTRADAMUS TENTANG ABAD 21 INI

Beberapa Ramalan Penting Nostradamus Abad-21

 
Beberapa Kejadian yang sempat diramalkannya dan terbukti, boleh dikatakan sebagai cikal bakal kepercayaan Nostradamus akan kemampuan serta ketepatan ramalannya.Lalu bagaimana dengan ramalan Nostradamus lainnya yang mengarah ke abad ini.Para pengamat sekaligus pemerhati dari seluruh ramalan Nostradamus yang berbentuk Kuatrain dalam bukunya "Centuries" sepakat bahwa dari sekian banyaknya ramalan yang diberitahukan Nostradamus itu, hanya segelintir saja yang telah terjadi, sedang yang lain masih menunggu. Parahnya, semua ramalan yang belum terpecahkan atau terjadi itu mengarah ke abad-21. Nostradamus meramalkan akan timbulnya marabahaya global yang begitu dashyat di abad ini. Perang Dunia Ke-III kah?

Michael Mc. Clellan, seorang pengamat metafisika sekaligus pengkaji ramalan Nostradamus mengemukakan bahwa bisa dikatakan 3/4 dari seluruh ramalan Nostradamus yang belum terpecahkan, mengarah pada masa kita sekarang. Berikut ramalannya;

Kemungkinan akan meletusnya Perang Dunia Ke-III (Kitab: Armageddon)
Peperangan ini akan memaksa seluruh bangsa untuk terjun ke dalamnya. Ratusan juta bangkai manusia akan memenuhi bumi. Darah menganak sungai, jeritan perih memenuhi angkasa. Pada saat itu, nyawa manusia tidak akan ada harganya sama sekali. Seluruh bangsa akan mengerahkan seluruh kemampuan militernya, Kavaleri, Artileri dan Infanteri. Negara-negara kuat akan menggunakan senjata paling mutakhirnya. Perang ini akan merenggut korban jauh lebih besar dari 2 perang sebelumnya.(peristiwa ini sinyalir akan muncul pertama kalinya dari Timur Tengah).

Bencana global dasyat yang akan melanda seluruh bangsa
[Ini didasarkan atas kuatrain yang ditemui di Century IV ayat 67]
Periode kekacauan dimulai dengan masa masa pergeseran geologis bumi,Gempa,Letusan gunung berapi,dan gangguan sistem cuaca menjadi tanda alam yg mengkhawatirkan. Akibatnya bencana kelaparan terjadi dimana mana sementara di belahan bumi lain terjadi BENCANA BANJIR!.Bangsa-bangsa MAKMUR khususnya bangsa barat akan menjadi lemah. Mereka akan dikalahkan oleh SIPIL dan orang akan berebut ke tempat yg dipenuhi air. Kekuasaan AMERIKA SERIKAT akan takluk oleh bencana alam yg maha dashyat. Secara ekonomi, AS akan mengalami kebangkrutan dan tiga negara besar lain akan mengirim bantuan untuk sipil yang menderita.

Kemunculan kembali raja teror
[Ini didasarkan atas kuatrain yang ditemui di Century VIII ayat 29]
Pada saat rakyat di seluruh bangsa mengalami kesulitan yang begitu sangat, khususnya di negara berkembang,Raja teror akan muncul sebagai Hero yangg taktik sebenarnya hanyalah perbudakan bagi orang yg ditolong. Raja teror akan menggunakan bencana alam sebagai peluang merobohkan kekuasaan pemerintah. Timur Tengah dijadikan basis aksi.

Raja Teror akan menguasai Timur Tengah (IRAN)
[Ini didasarkan atas kuatrain yang ditemui di century II ayat 23 dan 81]
Raja teror akan mengambil alih pemerintahan Iran dengan menggunakkan jebakan melalui tokoh-tokoh politik. Pengkhianatan akan muncul dan terjadi perang sipil disana, seorang wakil akan muncul namun akan terbunuh ketika Iran diambil alih. Kekuasaan raja teror akan melakukan ekspansi besar-besaran hingga ke eropa kemudian ke Mediterania. Dia juga akan menyatukan AFRIKA UTARA yg bersimpati karena latar budaya dengan Asia dan Timur Tengah.

Munculnya perselisihan di kalangan pemimpin dunia ke-3 (Negara-negara miskin)
[century III ayat 60]
Seorang pemuda berkulit hitam akan muncul sebagai pemimpin di negara dunia ke-3 dengan tujuan menyatukan negara-negara tersebut untuk bersama-sama melawan negara maju khususnya diseputar Laut Adriatik,Kaspia dan Israel.(ditegaskan oleh Mc Clellan banyak ramalan Nostradamus yang mengarah ke arah ini...)

Pembunuhan terhadap beberapa tokoh penting dunia
Dalam ramalannya yang kabur, Nostradamus sama sekali tidak menyebutkan secara rinci mengenai tokoh-tokoh penting dunia yang dimaksud!

Terbunuhnya George Walker Bush
Vitalnya pengaruh serta keterlibatannya dalam masalah Timur Tengah diduga akan berakhir dengan kematiannya.

Munculnya Ibu Keserakahan
Sebagian menduga bahwa yang dimaksud dalam ramalan ini adalah Cindy Sheehan seoraang aktvis anti perang dan penentang aktif atas kebijaksanaan Bush, penyebabnya adalah karena anaknya terbunuh saat menjalankan instruksi langsung Bush atas invansi ke wilayah Irak. Dirinya saat ini menjadi sorotan publik yang haus info, popularitas pun berhasil dimilikinya, namun semua itu tidaklah cukup untuk mengganti anaknya yg telah hilang. Jika ayat ini menjadi kenyataan, maka CindySheehan akan merancang skenario demonstrasi massal di Washington dan meluas menjadi kerusuhan besar dan membuat teroris yng menyamar menjadi pelajar dengan mudah menjalankan aksinya.

Kemunculan Lady Diana
Peringatan 10 tahun kematian Lady Diana akan terjadi kesuraman dimana letusan Gunung Yellowstone akan menghantui seluruh rakyat Inggris. Dalam ramalannya, Pada Oktober 2008 nanti akan muncul sebuah cahaya api dengan bayangan menyerupai seorang wanita, ditempat cahaya (pemakaman Lady Diana) tersebut muncul secara jelas Lady Diana. Ribuan orang akan datang menyaksikan peristiwa ini dan saat itu pula Lady Diana menyampaikan pesan pesannya kepada dunia.

Perang Antar Pendeta
Hanya sebagian yang membenarkan kejadian panampakan Lady Diana tersebut, peristiwa ini akan memicu terjadinya peperangan atau tepatnya konflik antara Pendeta, antara Pendeta yang percaya dan menganggap hal ini sebagai Mu'jizat Tuhan dan yang tidak. Konflik beda faham ini, pada puncaknya akan menimbulkan pertumpahan darah di kalangan gereja dan tidak sedikit pendeta yang terbunuh.