WEB DESIGN Materi Pelajaran TIK Kelas XI SMA NEGERI 9 MALANG
KLASIFIKASI WEB Klasifikasi web : 1. Web site statis - Pengguna web tidak bisa berkomunikasi dengan admin server maupun pengguna lain - Pengguna tidak bisa memodifikasi fitur dalam web - Bisa dibangun hanya dengan 1 bahasa pemrograman di sisi browser saja (contoh HTML,XML) 2. Web site dinamis - Pengguna web bisa berkomunikasi dengan admin server maupun pengguna lain - Pengguna bisa memodifikasi fitur yang ada dalam web - Harus dibangun dengan sistem yang dibentuk oleh beberapa bahasa pemrograman di sisi server (contoh : PHP), database (mySQL), dan browser saja (contoh HTML,XML)
HTML Hyper Text Markup Language HTML adalah suatu format data yang berupa bahasa pemrograman digunakan untuk membuat dokumen hypertext yang dapat dibaca dari sisi browser. Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Perbedaan dokumen HTML dengan document teks adalah bahwa anda dapat memberikan suatu format tertentu, seperti bentuk tebal, miring, form, list, table pada dokumen HTML sedangkan pada teks biasa anda tidak dapat melakukannya. Disamping itu adalah adanya elemen-elemen HTML beserta tag-tagnya ( ditulis dengan tanda < > ) Untuk membuat dokument HTML, dapat digunakan beberapa editor seperti Notepad,wordpad,Dream weaver, PHP designer, dan lain-lain
BAGIAN UTAMA HTML A. ELEMEN Dibagi menjadi dua kategori utama, yaitu elemen-elemen <HEAD> yang memberikan informasi tentang dokumen tersebut seperti judul dokumen atau hubungannya dengan dokumen lainnya, serta yang kedua adalah elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser internet, seperti paragraph, list, table, dsb. B. TAG Tag dinyatakan dengan tanda lebih kecil ( < ) dan tanda lebih besar (> ), tag biasanya merupakan suatu pasangan yang disebut tag awal <nama tag> dan tag akhir </nama tag> , sebagai contoh untuk menampilkan teks dalam format miring digunakan elemen I, yang dinyatakan seperti berikut : <I> Teks ini akan terlihat miring di browser </I> <B> Teks ini akan terlihat tebal di browser </B> Note : HTML tidak membedakan antara huruf besar dan huruf kecil dari suatu elemen, semuanya akan memberikan hasil yang sama. HTML tidak membenarkan penulisan tag yang tumpang tindih, seperti : <tag1> Teks untuk tag1 <tag2> Teks untuk tag2 </tag1> </tag2>
Contoh penulisan tag yang benar adalah Teks untuk tag1 <tag2> Teks untuk tag2 </tag2> </tag1> C. ATRIBUT Tag awal bisa memiliki beberapa buah atribut atau property yang menyatakan karakteristik dari tag tersebut, misalnya dalam <P ALIGN=”center”>, atribut dengan nama ALIGN mempunyai nilai “center” yang berfungsi untuk menengahkan paragraph. Bahkan tag bias mengandung beberapa atribut, seperti pada <FONT FACE=”Arial” SIZE=8 COLOR=”red”> yang menyatakan jenis font, ukran serta warna font atau huruf yang digunakan. D. Struktur dokumen HTML Dokumen HTML mempunyai 3 buah tag utama yang membentuk struktur dari dokumen tersebut, yaitu : HTML = untuk menyatakan suatu dokumen HTML HEAD = memberikan informasi tentang dokumen BODY = menyimpan informasi / data yang akan ditampilkan dalam dokumen HTML Strukturnya dapat dilihat seperti berikut :
<HTML> <HEAD> *** Bagian HEAD *** </HEAD> <BODY> *** Bagian BODY *** </BODY> </HTML> Contoh dokumen HTMLnya : <TITLE> Home Page Pribadiku </TITLE> <MARQUEE DIRECTION=“Right” >WELCOME In MY PERSONAL WEB </MARQUEE><BR> <HR COLOR =“RED” SIZE=10 WIDTH=350 ALIGN=“center”> <BODY><P ALIGN=”center”> Hello….Apakah anda sudah mengetahui cara membuat home page ? jika belum, mari kita mempelajarinya bersama-sama menggunakan HTML, kelihatannya rumit tapi ternyata menarik…</P> <P ALIGN=”left”> Anda harus rajin menulis, mengcopy, atau bahkan cut & paste untuk mempercepat penulisan tag di dokumen notepad…</P>
Simpan fiel di atas dengan nama *.html Karakter * dapat diganti dengan nama file
TAG-TAG dalam HTML PARAGRAPH syntaxnya : <P atribut >…</P> untuk membuat suat paragraph, contoh dalam dokumen HTML : <HTML> <HEAD><TITLE> Membuat paragraph</TITLE> </HEAD> <BODY> <P ALIGN=”left”> teks-teks suatu paragraph dengan atribut ALIGN=”left” akan diratakan pada margin kiri.</P> <P ALIGN=”center”>teks-teks suatu paragraph dengan atribut ALIGN=”left” akan diratakan pada margin tengah.</P> <P ALIGN=”right”> teks-teks suatu paragraph dengan atribut ALIGN=”left” akan diratakan pada margin kanan.</P> </BODY> </HTML> PREFORMATTED TEXT syntaxnya : <PRE>…</PRE> untuk menampilkan teks seperti yang dituliskan, sekalipun demikian anda tetap dapat menggunakan tag-tag lain ( seperti <B> untuk tebal, <I> untuk cetak miring ) tetapi tag-tag pemformatan paragraph ( seperti <P>, <H> ) ada baiknya untuk tidak digunakan.
<HTML> <HEAD><TITLE> Menggunakan PreFormat</TITLE> </HEAD> <BODY> <PRE> Teks ini menggunakan s p a s i dan juga tombol ENTER untuk berpindah ke baris ini. Table di bawah ini menggunakan elemen BOLD dan beberapa buah spasi untuk menebalkan baris judul. <B> Browser editor ------------------------------------------ </B> IE Notepad Mosaic HotMetal Anda juga dapat membuat gambar dalam preformatted text : /\___/\ ( o o ) /\ ---- </PRE> </BODY> </HTML>
Contoh tag dasar dalam html <body> <p> <head> <title> <hr> <br>