Web Architecture

Pengenalan HTML

            HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Nah, HTML inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web yang menarik.

HTML merupakan bahasa standard yang digunakan untuk membuat  website , dengan HTML kita dapat melakukan banyak hal , antara lain:

·        Mendesain tampilan website dengan isinya.

·        Membuat form interaktif untuk formulir pendaftaran , belanja online, dan lain-lain

·        Menambahkan gambar , suara maupun video kedalam tampilan website.

Penulisan HTML dan Menampilkan Hasilnya

Untuk menuliskan dokumen HTML diperlukan sebuah editor sebagai media penulisannya. Editor yang dapat digunakan adalah notepad, macromedia dreamweaver, frontpage, bluefish, dan lain-lain.

Setelah dokumen HTML kita tulis maka kita dapat menampilkan hasilnya dalam sebuah browser. Browser ini berfungsi untuk menterjemahkan tag-tag HTML menjadi sebuah halaman web.

Tag HTML

Perintah dalam html biasanya disebut tag. Bentuk dasar tag dalahsebagai berikut :

         ….

Bentuk tag html secara lengkap adalah sebagai berikut:

           

            Elemen             : nama tag

            Attribute           : atribut dari tag

            Value               : nilai suatu atribut

Contoh:

           

            Tag ini berarti menyatakan elemen body yang mempunyai atribut bgcolor yang mempunyai nilai green. Tag ini akan menghasilkan latar belakang website dengan warna hijau. Tag html tidak case sensitive,  mempunyai arti yang sama dengan .

Struktur dokumen HTML

            Dokumen html mempunyai 3 bagian utama:

1.      Tag HTML

Tag ini wajib ada, menyatakan kepada browser bahwa yang ada diantara tag ini adalah dokumen html.

2.      Tag HEAD

Tag ini menyatakan header,di dalam tag ini kita dapat membuat tag

untuk menampilkan judul pada sebuah website yang ditampilkan diatas taskbar suatu browser.

3.      Tag BODY

Tag body berguna untuk menampilkan teks, link, gambar dan yang lainnya pada halaman website.

                                

Elemen dasar HTML

·        Blok level elemen

Blok elemen yang sering digunakan adalah Heading (H1 sampai H6). Semakin besar level yang diguakan akan semakin besar tulisannya.
 

·        Paragraf

Untuk membuat sebuah paragraph dalam halaman website. Setiap tag ini maka akan dihasilkan paragraph baru.

·        Huruf

Dalam dokumen HTML dengan menggunkan tag Font maka kita akan dapat menentukan jenis huruf, ukuran huruf, warna dan yang lainnya.

Attribute:

·   Face    : untuk menentukan jenis huruf

·   Size     : untuk menentukan ukuran huruf

·   Color  : untuk menentukan warna huruf

Contoh:

Tag ini akan menghasilkan kalimat dengan jenis huruf arial, ukuran huruf 15, dan berwarna biru

·        Format teks

Format teks ini berguna untuk memformat teks apakah teks tersebut tercetak tebal, miring, dan format yang lainnya.

…	Memformat teks untuk dicetak tebal
…	Memformat teks dengan garis bawah
…	Memformat teks menjadi miring
…	Memformat teks menjadi superscript
…	Memformat teks menjadi subcrip
…	Memformat teks seperti di coret
…	Teks berkedip
…	Preformatetted teks

Links

            Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara dan akan terdapat garis bawah.

Contoh:

            Klik disiniuntuk membuat link ke halaman lain.

mailto:asqa@student.gunadarma.ac.id”>Klik disiniuntuk membuat link pada alamat e-mail.

untuk membuat link dengan menngunakan gambar.

        

Lists

            Terdapat tiga tipe list yang dapat digunakan, yaitu:

·        Unordered List:

     Untuk membuat daftar item dengan tanda bullet.

·        Ordered Lists:

Untuk membuat daftar item , yang ada didalamnya memiliki nomor secara urut.        

   

·        Definition Lists:

            Untuk mendefinisikan atau menjelaskan istilah-istilah. List ini disebut juga sebagai Glossray List. Istilah yang akan didefinisikan diaali dengan tag

dan definisi istilahnya diawali dengan tag

Images

            Digunakan untuk menampilkan gambar atau animasi pada halaman web anda. Format gambar yang dapat digunakan: PICT, GIF, JPEG, BMP, dan lain-lain.

            Elemen image dinyatakan dengan tag dan disertai attribute yaitu SRC, ALT, dan ALIGN. SRC untuk menentukan sumber gambar yang akan ditampilkan, ALT untuk alternative bila browser berbasis teks,dan ALIGN untuk mengatur perataan teks.

Contoh :

           

            http://www.image.com/image/inline.gif”>

Tables

            Table sangat penting artinya dalam desain web. Karena dengan menggunakan tag table anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris.

Atribut : ·        Align                : untuk perataan teks (Left, Center, Right) ·        Bgcolor            : untuk pewarnaan latar belakang pada table ·        Border             : untuk menentukan besarnya border ·        Cellpadding      : untuk menentukan jarak pada isi table dengan tepian cell ·        Cellsacing         : untuk menentukan jarakantar cell ·        Width               : untuk menentukan lebar Frames             Digunakan untuk membagi-bagi window browser menjadi beberapa bagian sehingga berbagai informasi dapat ditampilkan suatu saat. Cara-cara pembuatan frame pada HTML:             Pertama kita harus menyusun terlebih dahulu berapa banyak frame yang akan dibuat serta letak frame tersebut. Kemudian perlu diketahui bahwa dalam pembuatan frame harus memiliki beberapa dokumen html untuk ditampilkan pada frame tersebut. Dimana banyaknya dokumen html akan sama dengan banyaknya frame yang akan dibuat. Tag nya adalah sebagai berikut :             untuk membentuk baris frame             untuk membentuk kolomframe Atribut: ·        Name                           : untuk memberikan nam frame ·        Noresize                       : frame tidak bisa diperbesar/diperkecil ·        Scrolling=yes/no           : frame terdapat scrollbar ·        Marginheight                 : jarak spasi vertical dalam satuan pixel ·        Marginwidth                 : jarak spasi horizontal dalam pixel                                                 Sumber : Pengantar Internet, LEPKOM Universitas Gunadarma