Praktek 1 Desain Halaman Web

http://kuliah.msyani.
com
Pemrograman Web
2 DESIGN HALAMAN WEB
Overview
Untuk membangun sebuah web site, diperlukan modal dasar berupa bahasa yaitu Hypertext Markup Language(HTML). Setiap tampilan pada halaman web dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna.
Tujuan
1. 2. 3. 4. 5.
Mengenal dasar-dasar HTML Membuat dokumen HTML dan melakukan pemformatan dokumen yang sederhana. Membuat teks preformat dan karakter spesial Membuat list pada dokumen HTML Membuat list bersarang pada dokumen HTML
Design Halaman Web
2-1
http://kuliah.msyani.com
Pemrograman Web
2.1
Pengenalan HTML
HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. Setiap dokumen dalam Web ditulis dalam format HTML. Semua format dokumen, hyperlink yang dapat di klik, gambar, dokumen multimedia, form yang dapat di isi dan sebagainya didasarkan atas HTML.
2.1.1
HTML Editor
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa seperti notepad. Namun sekarang ini di pasaran terdapat banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web), contohnya Macromedia Dreamweaver, Adobe GoLive, Microsoft FrontPage dan Notepad++.
Gambar 2-1 Lembar Kerja Microsoft FrontPage
Design Halaman Web
2-2
Pemrograman Web
Kemudahan Microsoft FrontPage : Pengeditan What You See Is What You Get (WYSIWYG) Menambahkan, menghapus dan mengubah teks. Menambahkan paragraf dan gaya karakter ke dalam teks. Mengubah huruf, ukuran dan warnanya. Memasukkan tabel, gambar, garis horisontal dan hyperlink dalam dokumen web yang anda buat. Drag-and-drop hyperlink dan gambar dari dokumen yang lain.
2.1.2
Struktur Dasar HTML
Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung kode penanda yang disebut tag HTML yang digunakan untuk mengatur format tampilan suatu dokumen. Kode ini diselipkan ke dalam teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai HTML menggunakan huruf besar dalam penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua dokumen HTML terdiri dari dua bagian logikal, yaitu: bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML berisi informasi umum mengenai dokumen dan bagian badan (body) yaitu berisi dokumen yang sebenarnya. Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur dasarnya adalah sebagai berikut:
<html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html> Design Halaman Web 2-3
Pemrograman Web
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, digunakan sebagai identifikasi dokumen. 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. Contoh dari penggunaan tag <HTML> seperti ini:
<HTML> <HEAD> <TITLE> Judul dari dokumen HTML </TITLE> </HEAD> <BODY> My Homepage </BODY> </HTML>
Untuk mencoba script di atas, anda bisa membuka aplikasi notepad ataupun program teks editor yang lain. Tuliskan script di atas dan simpan dengan ekstensi *.html atau *.htm, misalkan MyPage.html. Bukalah dokumen html yang telah anda buat tadi dengan menggunakan web browser, misalkan Internet Explorer. Maka akan terlihat tampilan seperti di bawah ini.
Design Halaman Web
2-4
Pemrograman Web
Gambar 2-2 Tampilan MyPage.html
2.2 2.2.1
Memformat Dokumen HTML Bagian Body
Pada bagian tag <BODY> digunakan untuk 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. 2) Bgcolor : digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya. 3) Teks : digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default. 4) Link : Untuk mengatur warna link dokumen dengan warna biru sebagai warna default 5) Vlink : Untuk mengatur warna visited link dokumen dengan default ungu 6) Alink : digunakan untuk mengatur warna active link dokumen dengan default merah.
2.2.2
Membuat Heading
Heading digunakan untuk mengatur ukuran huruf pada header. Tag heading <Hn>..</Hn>, "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Design Halaman Web
2-5
Pemrograman Web
Dalam banyak dokumen, heading pertama digunakan sebagai judul tulisan. Heading ini mempunyai atribut untuk menentukan letak tulisan, di kiri, kanan ataupun tengah. Jika atribut ini tidak ditambahkan, maka heading akan otomatis rata kiri. Contoh penggunaannya :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> <BODY> My Homepage <H1>Heading tingkat 1</H1> <H2>Heading tingkat 2</H2> <H3>Heading tingkat 3</H3> <H4>Heading tingkat 4</H4> <H5>Heading tingkat 5</H5> <H6>Heading tingkat 6</H6> <H1 ALIGN=LEFT>Heading 1 rata kiri</H1> <H2 ALIGN=CENTER>Heading 2 rata tengah</H2> <H3 ALIGN=RIGHT>Heading 3 rata kanan</H1> </BODY> </HTML> </HEAD>
Tampilan dari script diatas dapat dilihat pada gambar berikut ini :
Gambar 2-3 Contoh Heading

Design Halaman Web 2-6
Pemrograman Web
2.2.3
Memformat Paragraf
Dalam membuat paragraf, ada beberapa hal yang harus diperhatikan. Dengan adanya perbedaan browser web yang berjalan pada komputer yang berbeda, memiliki kemampuan untuk menampilkan grafis yang berbeda sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda. Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk browser web yang memiliki ukuran satu halaman penuh dan yang tidak. Untuk membuat paragraf ini digunakan tag <P>, hal yang perlu dicatat adalah tag <P> ini akan mengabaikan spasi dan pindah baris. Dalam pembuatan paragraf pun, kita bisa menggunakan atribut ALIGN untuk mengatur letak paragraf, rata kiri, tengah ataupun rata kanan . Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY. Contoh penggunaan paragraf dapat dilihat pada script berikut ini.
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Paragraf rata kiri</h3> <P ALIGN=LEFT>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. </P> <h3>Paragraf rata tengah</h3> <P ALIGN=CENTER>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. </P>
Design Halaman Web
2-7
Pemrograman Web
<h3>Paragraf rata kanan</h3> <P ALIGN=RIGHT>Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. </P> </BODY> </HTML>
Tampilan di browser akan seperti ini.
Gambar 2-4 Contoh Format Paragraf
2.2.4
Line Breaks
Line breaks digunakan untuk menambahkan baris baru pada teks dalam dokumen HTML dengan cara menambahkan tag <BR>. <CENTER> digunakan untuk membuat teks dalam posisi di tengah. Setiap teks yang
Pemrograman Web
terdapat diantara <CENTER> dan </CENTER> akan ditempatkan di tengahtengah margin kiri dan kanan. Contoh script penggunaan Line Breaks dan <CENTER> :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Penggunaan Line Breaks</h3> Contoh penggunaan line break<BR> baris baru<BR>sudaaaahhh<br><br> <CENTER>contoh teks ditengah</CENTER> </BODY> </HTML>
Hasilnya :
Gambar 2-5 Contoh Penggunaan Line Break dan Center
Design Halaman Web
2-9
Pemrograman Web
2.2.5
Teks Preformat
Berbeda dengan pembuatan paragraf yang mengabaikan setiap tambahan spasi, tag <PRE> ini akan membuat spasi ikut diperhitungkan. Dengan kata lain tag <PRE> akan menampilkan teks pada halaman web sesuai dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat. Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom, yang membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut ini contoh penggunaan dari tag <PRE>.
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Penggunaan Teks Preformat</h3> Contoh dibawah adalah penggunaan tag Preformat membuat tabel<br> <PRE> Tabel data mahasiswa ---------------------------------Nama Umur ---------------------------------Adi Sasongko 19 Budi Swarga 20 Chev Sampurna 18 Della Rossa 19 ---------------------------------</PRE> </BODY> <HTML>
untuk
Hasil :
Gambar 2-6 Contoh Penggunaan Teks Preformat

Pemrograman Web
2.2.6
Memformat Bentuk Tulisan
Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan. Cara menggunakannya adalah awali dengan <tag>, terus masukkan tulisan yang akan diatur dan akhiri dengan </tag>. Tag-tag yang dapat digunakan untuk mengatur teks adalah : <B> <I> <U> <TT> <S> <BLINK> <CITE> <BIG> <SMALL> <SUP> <SUB> <ABBREV> <ACRONYM> <PERSON> <Q> <VAR> Bold text Italic text Underscore Typewriter Strikeout - draws a line through the text Text berkedip (lebih baik jangan digunakan) Digunakan untuk quoting text Ukuran teks akan lebih besar satu ukuran Ukuran teks akan lebih kecil satu ukuran Membuat tekssuperscript membuat tekssub script Abbreviations Untuk akronim Digunakan untuk indexing Membuat short inline quotation Membuat variable name, selalu dalam italics.
Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini.
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> Contoh menggunakan Tag pada Teks<BR><BR> <B>tag untuk menebalkan huruf</B><BR><BR> <I>tag untuk membuat huruf miring</I><BR><BR> tag untuk membuat huruf<SUP>superscript</SUP><BR><BR> tag untuk membuat huruf<SUB>subscript</SUB><BR><BR> untuk membuat huruf yang <U>digaris bawahi</U><BR><BR> untuk membuat huruf yang lebih <BIG>BESAR</BIG><BR><BR> untuk membuat huruf yang lebih <SMALL>kecil</SMALL><BR><BR> </BODY> </HTML> Design Halaman Web 2-11
Pemrograman Web
Tampilan dari Script di atas akan terlihat seperti berikut ini.
Gambar 2-7 Contoh Menggunakan Tag pada Teks
2.2.7
Tag Font
Tag <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.
Pemrograman Web
SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. 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. COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini.
<html> <head> <title>::: Ukuran, Jenis dan Warna Font:::</title> </head> <body> <font size=1 Face=arial color=#FF0000>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 :
Design Halaman Web
2-13
Pemrograman Web
Gambar 2-8 Contoh Tag Font dan Atributnya
2.2.8
Karakter Spesial
Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar (>), tanda dan (&) dan kutip ganda (), yang mempunyai arti khusus dan digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu karakter spesial untuk menggantikan karakter-karakter di atas. Karakter spesial tersebut antara lain : < karakter spesial untuk < > karakter spesial untuk > & karakter spesial untuk & " karakter spesial untuk " @ karakter spesial untuk @ © karakter spesial untuk © karakter spesial untuk ® karakter spesial untuk ® karakter spesial untuk karakter spesial untuk spasi yang tak dapat dipecah
Pemrograman Web
Dibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial dalam dokumen HTML :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Penggunaan Karakter Spesial</h3> Berikut ini contoh penggunaan karakter spesial<br> Sekarang kita mencoba menggunakan tanda lebih kecil seperti ini < dan sekarang kita akan coba menggunakan tanda lebih besar seperti ini >. Bagaimana? dapat terlihat kan? yang akan ditampilkan saat ini adalah tanda dan &. tanda kutip ganda " dan tanda @ seperti yang sering digunakan dalam alamat email. Pernah lihat tanda © atau tanda © atau tanda ® atau tanda ®. Pasti salah satunya sudah pernah lihat kan? &nbsp ;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa spasi di kalimatnya. </BODY> </HTML>
Hasilnya akan terlihat seperti gambar di bawah ini.
Design Halaman Web
2-15
Pemrograman Web
Gambar 2-9 Contoh Penggunaan Karakter Spesial
2.2.9
Membuat Garis Horizontal
Tag <HR> digunakan untuk membuat garis horizontal pada jendela browser. Defaultnya adalah membuat garis yang solid. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. <HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D. <HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel, default 2. <HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan garis. <HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis dengan letak sebelah kiri (left), kanan (right) atau tengah (center-default). Contoh pembuatan garis horizontal :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <H2>My Homepage</H2> <h3>Membuat Garis Horizontal</h3> Design Halaman Web 2-16
Pemrograman Web
Garis horizontal biasa (Shade dan solid) <HR> Garis horizontal No Shade <HR NOSHADE> Garis horizontal dengan ukuran 10 (berongga, bukan solid) <HR SIZE=10> Garis horizontal dengan Lebar 100 <HR WIDTH=100> Garis horizontal dengan lebar 50% dari lebar dokumen <HR WIDTH=50%> Garis horizontal dengan lebar 100 dan diletakkan di sebelah kiri <HR WIDTH=100 ALIGN=LEFT> Garis horizontal dengan ukuran 10, lebar 100 dan diletakkan di sebelah kanan <HR SIZE=10 WIDTH=100 ALIGN=RIGHT> </BODY> </HTML>
Gambar 2-10 Contoh membuat Garis Horizontal

Pemrograman Web
2.3
List
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/simbol. Terdapat tiga tipe list yang dapat digunakan, yaitu:
2.3.1
List Tanpa Urutan (Unordered Lists)
Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entri didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini : Tabel 2-1 Tabel Jenis Bullet Tipe Disc Circle Square Penjelasan Bullet berbentuk cakram Bullet berbentuk lingkaran Bullet berbentuk kotak
Contoh penggunaannya adalah sebagai berikut :

<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List tanpa urutan</h3> <UL> <LI>apel</LI> <LI>jeruk</LI> <LI>mangga</LI> <LI>jambu</LI> </UL> </BODY> </HTML>
Design Halaman Web
2-18
Pemrograman Web
Gambar 2-11 Contoh Unordered List
2.3.2
List Berurut (Ordered Lists)
<OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entri juga didefinisikan dengan tag <LI>. Contoh pembuatan list berurut adalah sebagai berikut :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List berurut</h3> <OL> <LI>apel</LI> <LI>jeruk</LI> <LI>mangga</LI> <LI>jambu</LI> </OL> </BODY> </HTML>

Pemrograman Web
Gambar 2-12 Contoh Ordered List Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa type penomoran yang dapat digunakan pada ordered list ditunjukkan pada tabel di bawah ini : Tabel 2-2 Tipe Penomoran pada Ordered List Tipe I i a A Penjelasan Angka ditampilkan dalam angka romawi huruf besar Angka ditampilkan dalam angka romawi huruf kecil Angka ditampilkan dalam abjad huruf kecil Angka ditampilkan dalam abjad huruf besar
Pada tag <OL> juga terdapat atribut START untuk memulai list dari nomor tertentu. Pada tag <LI> terdapat atribut VALUE untuk melewati nomor yang tidak diinginkan. Contoh penggunaannya adalah sebagai berikut:
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List berurut</h3> Contoh penggunaan atribut START dan VALUE<br> <OL START=3> Design Halaman Web 2-20
http://kuliah.msyani.com <LI>apel</LI> <LI>jeruk</LI> <LI VALUE=7>mangga</LI> <LI>jambu</LI> </OL> Contoh penggunaan atribut START type=A<br> <OL TYPE=A START=3> <LI>apel</LI> <LI>jeruk</LI> <LI VALUE=7>mangga</LI> <LI>jambu</LI> </OL> </BODY> </HTML>
Pemrograman Web
dan
VALUE
dengan
Gambar 2-13 Contoh Penomoran dengan Ordered List

Pemrograman Web
2.3.3
Definition Lists
Definition lists biasanya digunakan untuk membuat suatu list singkatan dan definisinya atau 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. Contoh :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat Definition LIsts</h3> <DL> <DT> HTTP <DD> HyperText Transfer Protocol <DT> FTP <DD> File Transfer Protocol </DL> </BODY> </HTML>
Gambar 2-14 Contoh Definition List

Pemrograman Web
2.3.4
List Bersarang (Nested Lists)
Dalam pembuatan list bersarang menggunakan tag-tag yang telah dijelaskan sebelumnya seperti tag <UL>, <OL> dan <LI>. Contoh pembuatan list bersarang adalah sebagai berikut :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY> <h3>Membuat List Bersarang</h3> <UL> <LI>List item Number 1</LI> <LI>List item number 2</LI> <UL> <LI>Item 2 sub-item A</LI> <LI>Item 2 sub-item B</LI> </UL> <LI>List item number 3</LI> <UL> <LI>Item 3 sub-item A</LI> <LI>Item 3 sub-item B</LI> </UL> </UL> </BODY> </HTML>
Gambar 2-15 Contoh Nested List

Pemrograman Web
Rangkuman
1. 2. 3. 4.
HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan mengatur warna latar belakang, format teks, pewarnaan teks dan pengaturan paragraf. List ada tiga macam antara lain : ordered list, unordered list dan definition list. Dari ketiga macam list tersebut dapat dibuat bentuk List Bersarang.
Latihan
1. a. b. c. d. e. 2. 3. 4. 5. 6.
Jelaskan masing-masing fungsi dari tag-tag berikut ini : <h3> <br> <sub> <b> <small> Jelaskan perbedaan antara <p> dan <pre>! Untuk pengaturan font dapat digunakan atribut size, face dan color. Jelaskan masing-masing atribut tersebut dan berikan conroh penggunaannya! Tuliskan tag HTML untuk karakter spesial @, &, , , spasi! Sebutkan jenis-jenis list yang ada pada dokumen HTML! Tuliskan perintah HTML untuk membuat list dengan menggunakan penomoran angka Romawi!
Design Halaman Web
2-24

Praktek 1 Desain Halaman Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Praktek 1 Desain Halaman Web

Uploaded by

Copyright:

Available Formats

http://kuliah.msyani.

2 DESIGN HALAMAN WEB

Design Halaman Web

Gambar 2-1 Lembar Kerja Microsoft FrontPage

Design Halaman Web

Struktur Dasar HTML

Design Halaman Web

Gambar 2-2 Tampilan MyPage.html

Memformat Dokumen HTML Bagian Body

Design Halaman Web

Gambar 2-3 Contoh Heading

Design Halaman Web

Tampilan di browser akan seperti ini.

Gambar 2-4 Contoh Format Paragraf

Gambar 2-5 Contoh Penggunaan Line Break dan Center

Design Halaman Web

Gambar 2-6 Contoh Penggunaan Teks Preformat

Memformat Bentuk Tulisan

Tampilan dari Script di atas akan terlihat seperti berikut ini.

Gambar 2-7 Contoh Menggunakan Tag pada Teks

Design Halaman Web

Gambar 2-8 Contoh Tag Font dan Atributnya

Hasilnya akan terlihat seperti gambar di bawah ini.

Design Halaman Web

Gambar 2-9 Contoh Penggunaan Karakter Spesial

Membuat Garis Horizontal

Hasilnya akan terlihat seperti gambar di bawah ini.

Gambar 2-10 Contoh membuat Garis Horizontal

List Tanpa Urutan (Unordered Lists)

Contoh penggunaannya adalah sebagai berikut :

Hasilnya akan terlihat seperti gambar di bawah ini.

Design Halaman Web

Gambar 2-11 Contoh Unordered List

List Berurut (Ordered Lists)

Hasilnya akan terlihat seperti gambar di bawah ini.

Gambar 2-13 Contoh Penomoran dengan Ordered List

Gambar 2-14 Contoh Definition List

List Bersarang (Nested Lists)

Gambar 2-15 Contoh Nested List

Design Halaman Web

You might also like