1. HTML (Hypertext Markup Language)
1.1. World Wide WebInternet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer.
WWW bekerja merdasarkan pada tiga mekanisme berikut:
1. Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
2. Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.
3. HTML digunakan untuk membuat document yang bisa diakses melalui web.
1.2. HTML
Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:
1. Mengontrol tampilan dari web page dan contentnya.
2. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. 3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
4. Menambahkan object-object seperti : image, audio, video, dan juga javascript dalam document HTML.
1.3. Browser dan Editor
1. Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
2. Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Microsoft Office FrontPage, Dreamweaver, Notepad.
1.4. Tag Dasar HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML.
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
<HTML> . . . </HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan
output yang sama.
Gambar 1.2 Tag <HTML> 1.5. Struktur Dokumen HTML
Document HTML bisa di bagi mejadi tiga bagian utama: 1. HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML. <HTML></HTML>
Tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.
2. HEAD
Bagian header dari document HTML diapit oleh tag <HEAD></HEAD> di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site.
Browser menyimpan “titile” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bias menentukan author name, keywords, dan lainnya pada tag META.
Contoh:
<META name=”Author” contents=”Bocah Gunung”>
Author dari document tersebut adalah “Bocah Gunung”. Atribut http-equiv dapat digunakan untuk meletakkan nama HTTP. Server atribut untuk menciptakan HTTP header. Contoh:
<META http-equiv=”Expires” content=”Wed, 7 May 2003 20:30:40 GMT”>
yang akan menciptakan HTTP header :
Expires: Wed, 7 May 2003 20:30:40 GMT
Sehingga jika documents di cached, HTTP akan megetahui kapan untuk meng-update document tersebut pada cache.
3. BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.
<html> <head>
<title>Welcome to HTML</title> </head>
<body bgcolor="yellow">
<p>Document HTML yang Pertama</p> </body>
</html>
1.6. Elemen Dasar HTML
1. Block Level Element
Block level element yang sering digunakan : Heading (H1 sampai H6) Contoh: <html> <head> title>Heading Elements</title> </head> <body> <h1>Heading one</h1> <h2>Heading two</h2> <h3>Heading three</h3> <h4>Heading four</h4> <h5>Heading five</h5> <h6>Heading six</h6> </body> </html> Gambar 1.4 Heading 2. Paragraf (P) Contoh: <html> <head> <title>Formating Paragraf</title> </head> <body> <h3>Puisi Ceria</h3> <p>
mawar berwarna merah, bibir kamu juga merah, bibir kamu semerah mawar </p>
<h2>puisi sedih</h2> <p>
Melati harum baunya, kalau nggak ganti percuma namanya. </p>
</body> </html>
3. List Item(LI)
List item digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).
a. Unordered List (Bullet) : Contoh : <html> <head> <title>Unordered List</title> </head> <body>
<P>Shedule for HTML Course</P> <ul> <li>Sunday</li> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> </ul> </body> </html> Gambar 1.6 Bullet b. Ordered List (Numbering)
Contoh: <html> <head> <title>Ordered List</title> </head> <body>
<P>Shedule for HTML Course</P> <ol start="1" type="I">
<li>Sunday</li> <ol type="a"> <li>Introduction to HTML</li> <li>Creating List</li> </ol> <li>Monday</li> <ol type="A"> <li>Creating table</li> <li>Inserting Image</li> </ol> <li>Tuesday</li> <ol type="I"> <li>Creating Link</li> <li>Preparing Website</li> </ol> <li>Wednesday</li> </ol> </body> </html>
Gambar 1.7 Numbering c. Definition List
Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan
definition term serta <DD> tag menentukan definition itu sendiri.
Contoh: <html> <head> <title>Definition List</title> </head> <body>
<p><b>List of Internet Resource</b></p> <dl>
<dt>HTML
<dd>HyperText Markup Langguage is not Language Programming</dd>
</dt> <dt>HTTP
<dd>HyperText Transfer Protocol is TCP/IP Protocol</dd>
</dt>
<dt>Internet
<dd>A network of network</dd> </dt> <dt>TCP/IP <dd>Internet protocol</dd> </dt> </dl> </body> </html>
Gambar 1.8 Definition List
1.7. Pemformatan Page 1. Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya
Contoh: <html> <head> <title>Break Line</title> </head> <body>
<h3>Membangun Aplikasi Web Dinamis</h3> <p>
Jika Anda membangun aplikasi web dinamis, <br> mulai dengan membuat aplikasi server dan <br> menghubungkan ke database.
</p> </body> </html>
Gambar 1.9 Break Line
2. Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.
Contoh:
<html> <head>
<title>Formating Font</title> </head>
<font color="#9966FF" size="5"> Menyiapkan Web Server
</font> <p>
<font face="Courier New, Courier, mono">
Untuk menjalankan aplikasi web, anda memerlukan sebuah web server. Sebuah web server adalah perangkat lunak yang melayani file dalam menanggapi permintaan dari web browser. Sebuah web server kadang-kadang disebut sebuah server HTTP. Umum termasuk web server IIS, Netscape Enterprise Server, Web Server iPlanet, dan Apache HTTP Server.
</font> </p> <body> </body> </html>
3. Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link, dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.
#RRGGBB Hexadecimal Color #FF0000 Red #00FF00 Green #0000FF Blue #000000 Black #FFFFFF White 4. Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division, dan lain-lain.
Value Description Left Rata kiri
Right Rata kanan
Center Rata tengah
Justify Rata kanan kiri
5. Format text
a. Physical Formatting
Tag Description
<B> ... </B> Bold text <I> ... </I> Italic text <U> ... </U> Underline Text
<BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal <SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal <STRIKE> ... </STRIKE> Untuk memberi garis di tengah text
<SUP> ... </SUP> Superscript text <SUB> ... </SUB> Subscript text <CENTER> ... </CENTER> Center document
b. Logical Formatting
Tag Description
<EM> ... </EM> Text miring / <I> <STRONG> ... </STRONG> Text tebal / <B>
<DEL> ... </DEL> Mencoret text / <STRIKE> <INS> ... </INS> Underline text / <U>
c. Quotes / Indentasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.
Contoh: <html> <head> <title>Formating Font</title> </head> <body>
<font color="#9966FF" size="5"> Menyiapkan Web Server
</font> <p>
Untuk menjalankan aplikasi web, anda memerlukan sebuah web server. Sebuah web server adalah perangkat lunak yang melayani file dalam menanggapi permintaan dari web browser.
<blockquote>
Sebuah web server kadang-kadang disebut sebuah server HTTP. Yang termasuk web server IIS, Netscape Enterprise Server, Web Server iPlanet, dan Apache HTTP Server.
</blockquote>
Jika anda tidak menggunakan layanan hosting web, pilih web server dan menginstalnya di komputer anda atau pada remote komputer.
</p> </body> </html>
Gambar 1.11 Blockquote d. Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Contoh: <html> <head> <title>Formating Font</title> </head> <body>
<font color="#9966FF" size="5"> Menyiapkan Web Server
</font> <p> <pre>
Untuk menjalankan aplikasi web, anda memerlukan sebuah web server. Sebuah web server adalah perangkat lunak yang melayani file dalam menanggapi permintaan dari web browser.
Sebuah web server kadang-kadang disebut sebuah server HTTP. Yang termasuk web server IIS, Netscape Enterprise Server, Web Server iPlanet, dan Apache HTTP Server.
Jika anda tidak menggunakan layanan hosting web, pilih web server dan menginstalnya di komputer anda atau pada remote komputer.
</pre> </p> </body> </html>
Gambar 1.12 Pre e. Grouping element
Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content.
Contoh:
<html> <head>
<title>Div dan Span</title> </head>
<body> <div> Divisi 1 <p>
Div tag digunakan untuk mengelompokkan group element biasanya untuk block-level element. </p> </div> <div align="right"> Divisi 2 <p>
Ini didalam devisi kedua di tulis dengan alignment kanan. </p>
</div>
<span style="font-size:25; color:blue"> Baris ini dalam span dengan warna blue. </span>
</body> </html>
6. Hyperlink
a. Link Address
Absolute Address - merupakan full internet address (URL) yang meliputi protocol,
network location dan path dan nama file. Contoh:
http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak menyebutkan protocol dan network location-nya
(hanya path dan nama filenya). b. Anchor
Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property
digunakan untuk menentukan tujuan dari hyperlink tersebut.
<A HREF=”URL”> Hypertext </A>
<A HREF=”protocol://host.domain:port/path/filename”> Hypertext </A>
c. Link ke Document Lain
Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm : link1.htm <html> <head> <title>Using Link</title> </head> <body>
<center><font size="5" color=hotpink>Creating Link </font></center>
<br>
<a href="link2.html"> Click here to view document 2</a> </body> </html> Gambar 1.14 Hyperlink 1 link2.htm <html> <head> <title>Document 2</title> </head>
<center><font size="5" color=limegreen>Creating Link </font></center>
<br>
<a href="link1.html"> Back to document 1</a> <body>
</body> </html>
1.7. Table dan Image 1. Table
a. Membuat table
Tag <TABLE> digunakan untuk membuat table dalam document HTML, bagian pokok
dari tabel adalah cell yang didefinisikan dengan menggunakan tag <TD>. <html> <head> <title>Using Table</title> </head> <body> <table border="1">
<td>Table dengan single cell</td> </table>
</body> </html>
Gambar 1.16 Tabel 1
Kita dapat menambahkan beberapa cell untuk membuat satu baris cell.
<html> <head> <title>Using Table</title> </head> <body> <table border="1"> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </table> </body> </html> Gambar 1.17 Tabel 2
Berikutnya jika ingin membuat beberapa baris cell dalam table gunakan tag <TR>. <html> <head> <title>Using Table</title> </head> <body> <table border="1"> <tr> <td>cell 1a</td> <td>cell 1b</td> <td>cell 1c</td> </tr> <tr> <td>cell 2a</td> <td>cell 2b</td> <td>cell 2c</td> </tr> </table> </body> </html> Gambar 1.18 Tabel 3 b. Merge cell
Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge
baris. Contoh colspan : <html> <head> <title>Using Table</title> </head> <body>
<table bgcolor=”CCCCFF” width="62%" border="1" cellpadding="0"> <tr> <td colspan="3" align="center">Quarter 1</td> <td colspan="3" align="center">Quarter 2</td> </tr> <tr align="center"> <td>Jan</td> <td>Feb</td> <td>Mar</td> <td>Apr</td> <td>May</td> <td>Jun</td> </tr> <tr> <td>100</td>
<td>5000</td> <td>200</td> <td>1500</td> <td>2500</td> <td>1750</td> </tr> <tr> <td>290</td> <td>5050</td> <td>2300</td> <td>100</td> <td>270</td> <td>300</td> </tr> </table> </body> </html> Gambar 1.19 Tabel 4 Contoh rowspan : <html> <head> <title>Rowspan</title> </head> <body>
<table bgcolor="lavender" width="75%" border="1" cellpadding="0"> <tr> <td></td> <td></td> <td>South</td> <td>North</td> </tr> <tr> <td rowspan="3">Quarter 1</td> <td>Jan</td> <td>1000</td> <td>12000</td> </tr> <tr> <td>Feb</td>
<td>12500</td> <td>1345</td> </tr> <tr> <td>Mar</td> <td>78090</td> <td>71080</td> </tr> </table> </body> </html> Gambar 1.20 Tabel 5 2. Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan : a. GIF (Graphical Interchange Format) (.GIF)
b. JPEG (Joint Photographic Expert Image) (.JPG)
c. PNG (Portable Network Graphics) (.PNG)
2.1. Insert Image ke Document
Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya:
<IMG SRC = “URL”> <html>
<head>
<title>Working with Image</title> </head>
<body>
<img src="PC.JPG"> </body>
</html>
2. Dreamweaver
Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver , dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain.
Dalam kesempatan ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver dan membuat halaman web sederhana.
2.1. Lingkungan Kerja Dreamweaver
Lihat Gambar 1. Dreamweaver menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver akan memberikan opsi: Macromedia Dreamweaver Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver Workspace.
Gambar 1. Lingkungan kerja Dreamweaver
Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property
Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view,
atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver .
Gambar 1. Area Kerja Dreamweaver
Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.
Insert Panel
Panels Group Document Toolbar
Property Inspector
Document Window
Gambar 2.1. Area Kerja Dreamweaver
Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2.
Gambar 2.2. Property Inspector
2.2. Heading
Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.
Gambar 2.3. Heading
2.3. Paragraf dan Line Break
Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (<p>) secara default
menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan <br> di HTML. Untuk berpindah baris dan bukan paragraf kita
Gambar 2.4. Paragraf dan Line Breaks
2.4. Memformat Teks Dengan Property Inspector
Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.
Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 2.5.
2.5. Membuat Link dan Target
Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link— juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.html. Halaman ini yang akan menjadi link sumber kita.
Mari kita buat halaman baru untuk dilink:
Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 2.6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.html. Pada contoh, saya
memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.html.
Gambar 2.6. Membuat dokumen baru
Pada index.html, pilihlah teks “Profil Sekolah”, kemudian pada Property Inspector ketikan profil.html pada kotak link. Atau gunakan Browse For File untuk memilih file
profil.html lewat kotak dialog. Lihat Gambar 2.7. Cek dengan menggunakan browser,
bukalah file index.html (Gambar 2.8).
Gambar 2.8. Tampilan index.html di browser
Untuk membuat link ke situs lain, setelah teks dipilih, ketik langsung pada kotak link alamat yang dituju, misalnya http://www.semarang.go.id. (Jangan lupakan http://).
2.6. Page Properties
Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen Web, seperti judul halaman, warna-warna link, dsb. Untuk membuka Page Properties klik Modify > Page Properties. Lihat Gambar 12. Title untuk menentukan judul dokumen. Background Image tempat memasukkan gambar sebagai latar belakang. Background menentukan warna latar.
Text untuk menentukan warna teks. Links mengubah warna link. Visited Link mengubah
warna link yang telah dikunjungi. Active Link mengubah warna link yang sedang diklik.
Margin menentukan margin halaman. Semua elemen ini memiliki padanannya di dalam kode
HTML, yaitu dalam atribut elemen <body>. Anda dapat melihat tampilannya di browser
(Gambar 2.8).
Gambar 2.9. Tampilan akhir profil.html
2.7. Penutup
Di Internet terdapat banyak koleksi background untuk situs yang Anda buat, salah satunya adalah free-backgrounds.com.
3. Referensi
a. http://ilmukomputer.com
b. http://www.master.web.id/mwmag/issue/08/content/tutorial-dreamweaver-1/tutorial-dreamweaver-1.html
