Translate

 
Kamis, 28 Februari 2013

Belajar HTML



PERTEMUAN 1

I.          PENGENALANHTML
HTML atau HyperText Markup Language merupakan bahasa pemrograman standar yang digunakan di lingkungan berbasis web. Adapun yang bisa dilakukan oleh HTML adalah sebagai berikut:
● Mengontrol tampilan dari webpage dan contentnya.
● Mempublikasikan dokumen secara online sehingga bias diakses seluruh dunia.
● Membuat online form yang bisa digunakan untuk menangani pendaftaran, transaksi secara online.
● Menambahkan object-object applet dalam dokumen HTML.

File HTML biasanya disimpan dengan ekstensi atau akhiran HTML atau HTM saja. File ini sama untuk semua sistem operasi seperti Windows, Linux, UNIX dan sebagainya.

Dalam membuat dokumen HTML murni, untuk sistem operasi Windows kita bisa menuliskannya di program editor seperti Notepad, EditPlus, Adobe Dreamweaver CS6, dll. Namun sebagai dasar pembuatan script, kita gunakan EditPlus.

II.        STRUKTUR HTML
Dalam penulisan dokumen HTML, dokumen ini memuat elemen-elemen yang harus diawalitag pembuka dengan format <nama tag>dan diakhiri tag penutup dengan format, </nama tag>. Ada 3 bagian utama dalam

pembuatan dokumen HTML, yaitu :
● HTML
  Merupakan elemen/tag dasar yang mendefinisikan bahwa dokumen ini dokumen HTML. Setiap dokumen HTML harus diawali dan ditutup dengan tag HTML seperti berikut : <HTML> </HTML>
Tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah dokumen HTML.
● HEAD
  Elemen ini merupakan judul dari dokumen yang kita buat. Untuk memberikan judul pada dokumen HTML yang kita buat, pada elemen <HEAD> harus diikuti elemen <TITLE> karena jika elemen <HEAD> berdiri sendiri tidak akan memberikan judul pada dokumen HTML yang kita buat.
● BODY
  Elemen atau Tag <BODY> digunakan untuk mengisi semua data yang akan ditampilkan di halaman dokumen HTML yang kita buat. Jadi, apapun data yang ingin kita tampilkan di halaman dokumen HTML yang kita buat, harus dituliskan di dalam tag ini.

Sebagai latihan, kita akan membuat dokumen HTML berikut ini menggunakan EditPlus, lalu simpan dengan nama Coba.html atau Coba.htm.
Setelah disimpan, kemudian buka dokumen HTML yang tadi dibuat pada web browser seperti Internet Explorer, Mozilla Firefox, dll. Berikut hasil output yang akan ditampilkan :

Judul pada dokumen HTML
Isi dari dokumen HTML
 

 



III.     TAG-TAG DASAR HTML
Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan

terdiri atas teks informasi. Bentuk dari penulisan tag HTML adalah sebagai berikut :

<ELEMENT ATTRIBUTE=”VALUE”>
à         Element                         :  Nama tag
à         ATTRIBUTE                :  Attribute dari Tag
à         Value                             :  Nilai dari Attribute

<BODY BGCOLOR=”BLUE”>
BODY merupakan element, BGCOLOR merupakan attribute yang memiliki nilai BLUE.
Adapun tag dasar dari HTML adalah sebagai berikut :

à         HEADING ( JUDUL PARAGRAF )
Dalam membuat sebuah paragraf yang mempunyai judul, heading disini sangat diperlukan untuk pengaturan formatting judul paragraf. Adapun tag-tag yang diperlukan untuk mengatur format judul yaitu dimulai dengan <H1>, <H2>, <H3>, <H4>, <H5> dan <H6>. Adapun perbedaan yang dimiliki tiap tag heading adalah ukurannya.

Sebagai latihan, buatlah script di bawah ini lalu simpan dengan nama heading.html, kemudian jalankan dengan web browser.
Berikut hasil output yang akan ditampilkan :
à         BREAK ( PEMENGGALAN KALIMAT )
Dalam menulis sebuah dokumen yang panjang diperlukan suatu pemenggalan kalimat atau pindah baris sehingga dokumen yang dibuat menjadi lebih efisien. Begitu pula dalam membuat dokumen HTML, diperlukan pemenggalan kalimat. Namun dalam dokumen HTML digunakan tag <BR>. Tag ini ditulis di depan baris kata yang akan dipindahkan. Pindah baris bukan berarti pindah paragraf. Dalam penggunaan tag <BR>, tidak ada tag penutup yang mengikutinya.

Sebagai latihan, buatlah dokumen HTML dengan nama Break.html.

Berikut hasil output yang ditampilkan :

à         PARAGRAF
Dalam membuat dokumen HTMl yang isinya berupa teks panjang tanpa ada pemisah antar paragraf, mungkin akan merepotkan untuk membacanya. Jadi untuk memisahkan antar paragraf diperlukan komponen paragraf.

Komponen penulisan paragraf dalam HTML disingkat dengan <P>. Setiap paragraf yang diberi tag <P> akan ditampilkan dengan loncat satu baris. Penulisan tag <P> tidak harus diberi pasangan atau tag penutup </P>.

Dalam membuat sebuah paragraf juga dibutuhkan perataan teks, terdapat 4 jenis perataan yang biasa digunakan yaitu rata kiri <ALIGN=”LEFT>, rata kanan <ALIGN=”RIGHT>, rata tengah <ALIGN=”CENTER”> dan rata kiri-kanan <ALIGN=”JUSTIFY>. Untuk mengatur format perataan

teks dalam HTML, digunakan tag <P> yang diikuti dengan ALIGN dan diakhiri dengan </P>
Sebagai latihan, buatlah dokumen HTML lalu simpan dengan nama Paragraf.html.
Berikut hasil output yang ditampilkan :

à         GARIS DATAR
Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf dan juga digunakan untuk memisahkan header dengan isi dokumen. Tag ini mendefinisikan Horizontal Rule atau <HR>. Tag ini tidak memerlukan tag penutup dan ditulis dimana akan diletakkan garis mendatar.

Sebagai latihan, buatlah dokumen HTML lalu simpan dengan nama Gari.html

Berikut hasil output yang ditampilkan :

0 komentar:

Posting Komentar

Breaking News

« »
« »
« »
Get this widget

Updates Via E-Mail