«
»

Dasar dan Aplikasi HTML

Sekilas Tentang HTML

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam setiap file HTML akan selalu didahului dengan tag . Tag ini akan membuat web browser mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam web browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag dengan . Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu :

untuk mengakhiri :

Penulisan Tag HTML adalah incasesensitive. Artinya, akan sama dengan atau .
Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.

Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untuk mendefinisikan header dalam tag HTML maka anda harus menambahkan dan tag di bawah tag dan akan menjadi seperti berikut :

Pada bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text yang ingin Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan tag dan ditutup dengan tag dibawah tag header, sehingga akan terlihat :

Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka digunakan tag dan . Judul ini akan terlihat pada sudut kiri atas pada halaman web. Tag akan berada di dalam tag . Kini saatnya Anda membuat halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode html di bawah ini, kemudian simpanlah di C:\My Documents\hello.htm. Ingat! Nama filenya adalah hello.htm, bukanlah hello.htm.txt atau hello.txt.

Selamat datang pada HomePage Saya

Halo semua, Bagaimana kabar Anda sekalian?

Kemudian, bukalah Internet Explorer dan pilih menu: File  Open, dan bukalah C:\My Documents\hello.htm. Maka akan terlihat sebagai berikut :

Heading

…

Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading akan berbeda dengan tag yang tidak akan muncul dalam halaman web. HTML menyediakan enam tingkat heading.

Heading

Heading level1


Heading level2


Heading level3


Heading level4


Heading level5

Heading level6

Paragraf

…

Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag

dan diakhiri dengan

. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata tengah, dan RIGHT untuk rata kanan:

Paragraf

Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
Aspek yang harus diperhatikan tidak hanya dipandang dari
satu sisi programnya saja, tetapi juga dari aspek
manusianya yang merupakan pengguna dari


Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
Aspek yang harus diperhatikan tidak hanya dipandang dari
satu sisi programnya saja, tetapi juga dari aspek
manusianya yang merupakan pengguna dari


Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
Aspek yang harus diperhatikan tidak hanya dipandang dari
satu sisi programnya saja, tetapi juga dari aspek
manusianya yang merupakan pengguna dari

Blockquote

…

Tag

digunakan untuk menulis kutipan teks. Dengan menggunakan tag ini maka Anda akan mendapati browser menampilkan teks yang menjorok ke dalam (mengidentifikasi teks).
Contoh :
HTML>
<HEAD
Blockquote

Aspek dalam Interface


Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.

Preformated Text 

…

Digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML. Browser akan menampilkan dalam font monospace (biasanya courier new).

performatted text

Dalam perancangan suatu antarmuka terdapat

      akses-akses penting yang harus diperhatikan.

      Aspek-aspek tersebut akan sangat menunjang

      dalam hasil dari perancangan perangkat lunak tersebut.

Begin Row
Digunakan untuk menulis teks pada baris berikutnya. Tag
akan membuat baris baru tanpa memberikan ruang kosong di bawahnya.
Contoh :

Begin Row

Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Ukuran Font …
Untuk mengaur huruf pada HTML Anda menggunakan tag . Tag ini memiliki atribut untuk mengatur ukuran huruf.
Contoh :

Font Size

ukuran font 1
ukuran font 2
ukuran font 3
ukuran font 4
ukuran font 5
ukuran font 6
ukuran font 7

Jenis Font …
Untuk mengatur jenis huruf yang digunakan Anda bisa menggunakan atribut FACE yang harus diisi dengan string jenis font seperti arial, verdana, Tahoma dll.
Contoh :

Jenis font


Arsenal, contoh font arial


Arsenal, contoh font verdana


Arsenal, contoh font tahoma


Warna Font …
Atribut COLOR Anda bisa gunakan untuk mengatur warna font. Ada 2 cara untuk memberi warna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingin digunakan seperti: red, blue, yellow, dll. Cara yang kedua dengan menggunakan nilai RGB.

Warna font


Arsenal, Juara piala FA


Arsenal, The Best


Arsenal, Top Bgt


Link …
Perintah anchor digunakan untuk membuat link. Dan digunakan tag teks pada browser . Untuk membuat link dalam sebuah dokumen HTML perlu disiapkan nama anchor lokasi tujuan link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag
Contoh :
File 1: contoh.html

Link

pemain Milan


DIDA, info selengkapnya

MALDINI

SHEVA

REDONDO

RIVALDO


info selengkapnya


KLIK AJA !!!!

KIPER UTAMA TIMNAS BRAZIL


UP

File 2: tujuan.html

Link TUJUAN

info

PIRLO

INZAGHI

GATTUSO

kembali

HTML Tingkat Lanjut
Mengapa disebut tingkat lanjut ? Hal ini dikarenakan pada bahasan ini akan dilanjutkan bagaimana menggunakan grafik dalam halaman web. Tabel merupakan salah satu yang akan digunakan dalam pembuatan web. Dan dalam pembuatan tabel nanti Anda akan mempelajari bagian yang penting dalam pembuatan web yang dinamis yaitu tabel dan form.
Ordered List

    Digunakan untuk membuat daftar dimana tiap bagian memiliki nomor secara berurut. Tag ini menggunakan tag
      dan diakhiri dengan
    . Sedangkan untuk tiap bagiannya digunakan tag
  1. , dan tidak menggunakan penutup.
    Ketika menggunkan OL ini maka penomoran dimulai 1,2,3,… , namun hal ini dapat diubah dengan menggunkan atribut TYPE pada tag

      TYPE=1; daftar berurut dengan 1, 2, 3,
      TYPE=I; daftar berurut dengan I, II, III,
      TYPE=a; daftar berurut dengan a, b, c,

      Ordered List

      Urutan mobil berdasar peminat :


      1. Mercedest Benz
      2. BMW
      3. Honda
      4. Hyundai

      Unordered List

        Dalam unordered list, tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan bullet yang merupakan default dari unordered list. Untuk membuat tag ini digunakan tag
          dan diakhiri dengan
        dan tiap bagiannya digunakan
      • . Juga bisa digunakan tanda cakram/disk, lingkaran, dll.

        Ordered List

        Urutan mobil berdasar peminat :


        • Mercedest Benz
        • BMW
        • Honda
        • Hyundai

        Grafik dalam Halaman Web
        Dalam HTML digunakan tag untuk menampilkan gambar dalam halaman web. Format gambar yang paling sering digunakan dalam halaman web yaitu GIF dan JPEG, dengan format penulisan : ”nama_alternatif”. Atribut SRC digunakan untuk menentukan sumber gambar. Sedangkan ALT digunakan sebagai teks pengganti gambar.
        Ada beberapa atribut dalam tag yaitu :
        • BORDER: memberikan suatu batas atau border pada gambar defaultnya=0
        • HEIGHT,WEIGHT: menentukan tinggi dan lebar gambar dalam pixel
        • HSPACE,VSPACE: menentukan jarak spasi horizontal dan spasi vertical antara gambar dengan obyek sekitarnya.
        • ALIGN: mengatur perataan gambar terhadap obyek disekelilingnya.

Artikel ini ditulis pada Februari 12, 2009, 5:55 pm dalam kategori HTML. Anda bisa mengikuti tanggapan atas artikel ini melalui RSS 2.0. Anda dapat merespon, or trackback dari website anda.

  1. #1 by ademaulana on Februari 12, 2009 - 5:58 pm

    Assalamu_’Alaikum Wr.Wb…

    Syukran ya akhi….

    Salam kenal dari ana…

    Wassalamu_’Alaikum Wr.Wb…

    Balas

    • #2 by gOd_as4siN88 on Februari 14, 2009 - 6:56 pm

      wa’alaikum salam wr. wb.

  2. #3 by zuki on Oktober 7, 2011 - 3:51 am

    thank taz infonya . .infonya sngat brguna wat pemula seperti saya

    Balas

Tinggalkan Balasan

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / Ubah )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Ubah )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Ubah )

Batal

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.