1 1. HTML (Hypertext Markup Language) 1.1. World Wide Web Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di ...
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. 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. . . .
Tag tidak case sensitive, jadi anda bisa gunakan 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
Gambar 1.2 Tag 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. 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 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. Welcome to HTML
Document HTML yang Pertama
Gambar 1.3 Dokumen HTML
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 2
1.6. Elemen Dasar HTML 1. Block Level Element Block level element yang sering digunakan : Heading (H1 sampai H6) Contoh: title>Heading Elements
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Gambar 1.4 Heading 2. Paragraf (P) Contoh: Formating Paragraf
Puisi Ceria
mawar berwarna merah, bibir kamu juga merah, bibir kamu semerah mawar
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 3
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 : Unordered List
Shedule for HTML Course
Sunday
Monday
Tuesday
Wednesday
Gambar 1.6 Bullet b. Ordered List (Numbering) Contoh: Ordered List
Shedule for HTML Course
Sunday
Introduction to HTML
Creating List
Monday
Creating table
Inserting Image
Tuesday
Creating Link
Preparing Website
Wednesday
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 4
Gambar 1.7 Numbering c. Definition List Definition List terdiri diapit oleh tag
…
dan
tag menentukan definition term serta
tag menentukan definition itu sendiri. Contoh: Definition List
List of Internet Resource
HTML
HyperText Markup Langguage is not Language Programming
HTTP
HyperText Transfer Protocol is TCP/IP Protocol
Internet
A network of network
TCP/IP
Internet protocol
Gambar 1.8 Definition List 1.7. Pemformatan Page 1. Break Tag 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
Contoh: Break Line
Membangun Aplikasi Web Dinamis
Jika Anda membangun aplikasi web dinamis, mulai dengan membuat aplikasi server dan menghubungkan ke database.
Gambar 1.9 Break Line 2. Font Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Contoh: Formating Font Menyiapkan Web Server
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.
Gambar 1.10 Formating Font
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 6
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 Left Right Center Justify
Description Rata kiri Rata kanan Rata tengah Rata kanan kiri
5. Format text a. Physical Formatting Tag ... ... ... ... <SMALL> ... <STRIKE> ... <SUP> ... <SUB> ...
...
b. Logical Formatting Tag <EM> ... <STRONG> ... ... ...
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 / Text tebal / Mencoret text / <STRIKE> Underline text /
c. Quotes / Indentasi Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. Contoh: Formating Font Menyiapkan Web Server
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 7
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.
Gambar 1.11 Blockquote d. Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Contoh: Formating Font Menyiapkan Web Server
<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.
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 8
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: Div dan Span
Divisi 1
Div tag digunakan untuk mengelompokkan group element biasanya untuk blocklevel element.
Divisi 2
Ini didalam devisi kedua di tulis dengan alignment kanan.
<span style="font-size:25; color:blue"> Baris ini dalam span dengan warna blue.
Gambar 1.13 Div dan Span
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 9
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
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 10
1.7. Table dan Image 1. Table a. Membuat table Tag
digunakan untuk membuat table dalam document HTML, bagian pokok dari tabel adalah cell yang didefinisikan dengan menggunakan tag
. Using Table
Table dengan single cell
Gambar 1.16 Tabel 1 Kita dapat menambahkan beberapa cell untuk membuat satu baris cell. Using Table
cell 1
cell 2
cell 3
cell 4
Gambar 1.17 Tabel 2
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 11
Berikutnya jika ingin membuat beberapa baris cell dalam table gunakan tag
. Using Table
cell 1a
cell 1b
cell 1c
cell 2a
cell 2b
cell 2c
Gambar 1.18 Tabel 3 b. Merge cell Tag
memiliki atribut colspan untuk merge column dan rowspan untuk merge baris. Contoh colspan : Using Table
Quarter 1
Quarter 2
Jan
Feb
Mar
Apr
May
Jun
100
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 12
5000
200
1500
2500
1750
290
5050
2300
100
270
300
Gambar 1.19 Tabel 4 Contoh rowspan : Rowspan
South
North
Quarter 1
Jan
1000
12000
Feb
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 13
12500
1345
Mar
78090
71080
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: Working with Image
Gambar 1.21 Sisipkan Gambar
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 14
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 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 lain. Insert panel ini serupa dengan menu Insert pada Window 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
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 (
) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan 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
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
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
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
. 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
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/tutorialdreamweaver-1.html
Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 20
