1. HTML (Hypertext Markup Language)

Transkripsi

1 1. HTML (Hypertext Markup Language) 1.1. World Wide Web Internet 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 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 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 Tag Dasar HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. Setiap document HTML di awali dan di akhiri dengan tag HTML. <HTML>... </HTML> Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau keduanya menghasilkan output yang sama. Gambar 1.1 Tag Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 1

2 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. <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. <META http-equiv= Expires content= Wed, 7 May :30:40 GMT > yang akan menciptakan HTTP header : Expires: Wed, 7 May :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. <title>welcome to HTML</title> <body bgcolor="yellow"> <p>document HTML yang Pertama</p> Gambar 1.3 Dokumen HTML Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 2

3 1.6. Elemen Dasar HTML 1. Block Level Element Block level element yang sering digunakan : Heading (H1 sampai H6) title>heading Elements</title> <h1>heading one</h1> <h2>heading two</h2> <h3>heading three</h3> <h4>heading four</h4> <h5>heading five</h5> <h6>heading six</h6> Gambar 1.4 Heading 2. Paragraf (P) <title>formating Paragraf</title> <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> Gambar 1.5 Paragraf Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 3

4 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 : <title>unordered List</title> <P>Shedule for HTML Course</P> <ul> <li>sunday</li> <li>monday</li> <li>tuesday</li> <li>wednesday</li> </ul> b. Ordered List (Numbering) <title>ordered List</title> <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> Gambar 1.6 Bullet Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 4

5 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. <title>definition List</title> <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> 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 mirip dengan carriage return. Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 5

6 <title>break Line</title> <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> 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. <title>formating Font</title> <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> Gambar 1.10 Formating Font Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 6

7 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 # 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 Left Right Center Justify Description Rata kiri Rata kanan Rata tengah Rata kanan kiri 5. Format text a. Physical Formatting Tag <B>... </B> <I>... </I> <U>... </U> <BIG>... </BIG> <SMALL>... </SMALL> <STRIKE>... </STRIKE> <SUP>... </SUP> <SUB>... </SUB> <CENTER>... </CENTER> b. Logical Formatting Tag <EM>... </EM> <STRONG>... </STRONG> <DEL>... </DEL> <INS>... </INS> Description Bold text Italic text Underline Text Untuk ukuran yang lebih besar dari normal Untuk ukuran yang lebih kecil dari normal Untuk memberi garis di tengah text Superscript text Subscript text Center document Description Text miring / <I> Text tebal / <B> Mencoret text / <STRIKE> Underline text / <U> c. Quotes / Indentasi Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. <title>formating Font</title> <font color="#9966ff" size="5"> Menyiapkan Web Server </font> <p> Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 7

8 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> Gambar 1.11 Blockquote d. Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. <title>formating Font</title> <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> Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 8

9 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. <title>div dan Span</title> <div> Divisi 1 <p> Div tag digunakan untuk mengelompokkan group element biasanya untuk blocklevel 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> Gambar 1.13 Div dan Span Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 9

10 6. Hyperlink a. Link Address Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. http :// 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 <title>using Link</title> <center><font size="5" color=hotpink>creating Link </font></center> <br> <a href="link2.html"> Click here to view document 2</a> Gambar 1.14 Hyperlink 1 link2.htm <title>document 2</title> <center><font size="5" color=limegreen>creating Link </font></center> <br> <a href="link1.html"> Back to document 1</a> Gambar 1.15 Hyperlink 2 Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 10

11 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>. <title>using Table</title> <table border="1"> <td>table dengan single cell</td> </table> Gambar 1.16 Tabel 1 Kita dapat menambahkan beberapa cell untuk membuat satu baris cell. <title>using Table</title> <table border="1"> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </table> Gambar 1.17 Tabel 2 Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 11

12 Berikutnya jika ingin membuat beberapa baris cell dalam table gunakan tag <TR>. <title>using Table</title> <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> Gambar 1.18 Tabel 3 b. Merge cell Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris. Contoh colspan : <title>using Table</title> <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> Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 12

13 <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> Gambar 1.19 Tabel 4 Contoh rowspan : <title>rowspan</title> <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> Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 13

14 <td>12500</td> <td>1345</td> </tr> <tr> <td>mar</td> <td>78090</td> <td>71080</td> </tr> </table> 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 > <title>working with Image</title> <img src="pc.jpg"> Gambar 1.21 Sisipkan Gambar Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 14

15 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 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 Insert Panel Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada Document Toolbar 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, Document atau elemen Window lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Panels Group 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 Property sekaligus. Inspector 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. 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. Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 15

16 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 Paragraf dan Line Break Gambar 2.3. Heading 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 menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 2.4. Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 16

17 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. Gambar 2.5. Mengubah format huruf Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 17

18 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.7. Memasukkan Link Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 18

19 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 (Jangan lupakan 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. Anda dapat melihat tampilannya di browser (Gambar 2.8). Gambar 2.8. Page Properties Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 19

20 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. b. Workshop Guru TIK SMP RSBI 22 s.d. 29 Maret 2009 LPMP Jawa Tengah Hal 20