1 MODUL PENGANTAR INTERNET 12 BAB I INTERNET 1.1 Pengertian Internet Pada tahap awal, Internet dapat diartikan sebagai sebuah konektifitas dimana bany...
BAB I INTERNET 1.1 Pengertian Internet Pada tahap awal, Internet dapat diartikan sebagai sebuah konektifitas dimana banyak komputer yang ada di berbagai penjuru dunia saling terhubung dengan protocol TCP/IP. Tapi untuk kondisi sekarang, Internet dapat diartikan sebagai sebuah dunia yang terbentuk oleh perangkat-perangkat elektronik yang mendukung teknologi untuk terkoneksi ke Internet itu sendiri. Tidak hanya computer, tetapi telepon seluler, kulkas, game console, serta beberapa perangkat elektronik lain sudah mampu mengkoneksikan diri ke Internet. 1.2 Sejarah Internet USSR (Uni Soviet) yang meluncurkan Sputnik memancing Amerika Serikat untuk mendirikan Advanced Research Projects Agency, yang dikenal sebagai ARPA, pada bulan Februari 1958 untuk mengambil alih kepemimpinan teknologi. ARPA membuat IPTO ( Information Processing Technology Office) untuk meningkatkan penelitian pada program Semi Automatic Ground Environment (SAGE) , yang mana mempunyai sistem radar yang terhubung di seluruh negeri untuk pertama kalinya. mengepalai
J. C. R. Licklider terpilih untuk
IPTO, dan melihat bahwa jaringan universal mempunyai potensi untuk
menyatukan revolusi manusia. Licklider pindah dari Psycho-Acoustic Laboratory (Laboratorium Psiko-akustik) dari Harvard University menuju MIT pada tahun 1950, setelah tertarik dengan teknologi informasi. Di MIT, Ia menjadi anggota dewan yang mendirikan Lincoln Laboratory dan bekerja pada proyek SAGE. Pada tahun 1957 Ia menjadi wakil presiden BBN, dimana Ia membeli produksi komputer pertama PDP-1 dan melakukan demonstrasi pertama di depan publik mengenai time-sharing (pembagian-waktu). Di IPTO, Licklider merekrut
Lawrence Roberts untuk mengepalai proyek untuk
menerapkan sebuah jaringan, dan Roberts menerapkan teknologi yang dikerjakan oleh Paul Baran, yang menulis tentang sebuah studi untuk Angkatan Udara AS yang merekomendasikan packet switching (pertukaran paket) untuk membuat jaringan yang matang dan bisa dihandalkan. Setelah itu, dua titik (node) yang nantinya akan menjadi ARPANET, terhubung antara UCLA dan SRI International di Menlo Park, California pada tanggal 29 Oktober 1969. ARPANET adalah salah satu jaringan awal dari Internet sekarang. Dimulai dari 2
demonstrasi pertukaran paket (packet switching) oleh ARPANET, British Post Office (Kantor Pos Inggris), Telenet, DATAPAC dan TRANSPAC bekerjasama untuk membuat layanan jaringan pertukaran-data Internasional untuk pertama kalinya. Di Inggris, layanan ini mengacu pada IPSS ( International Packet Stream Service ) pada tahun 1978. Kumpulan dari jaringan berbasis X.25 tumbuh dari Eropa dan Amerika mencakup Kanada, Hong Kong dan Australia sekitar tahun 1981. Standar pertukaran data X.25 dikembangkan oleh CCITT (Sekarang dikenal sebagai ITU-T) sekitar tahun 1976. Vinton Cerf dan Robert Kahn mengembangkan deskripsi awal mengenai protokol TCP pada tahun 1973 dan mempublikasikan makalahnya pada tahun 1974. Penggunaan istilah Internet untuk menjelaskan sebuah jaringan global TCP/IP berawal dari dipublikasikannya RFC674 pada bulan Desember 1974 , spesifikasi penuh untuk pertama kalinya mengenai TCP ditulis oleh Vinton Cerf, Yogen Dalal dan Carl Sunshine. Selama sembilan tahun kedepan, perbaikan terus dilakukan untuk protokol-protokol yang ada dan mengimplementasikannya ke Sistem Operasi yang lebih luas. Jaringan WAN TCP/IP pertama kali dioperasikan pada tanggal 1 Januari 1983, saat semua host dari ARPANET menggantikan protokol lama NCP ke TCP/IP. Tahun 1985, Lembaga Sains Nasional Amerika Serikat (NSF = National Science Foundation) melakukan pembangunan jaringan backbone (tulang punggung) sebesar 56 kilobit/detik yang menggunakan komputer-komputer yang diberi nama "fuzzballs" oleh penciptanya, David L. Mills. Tahun berikutnya, NSF mensponsori pengembangan backbone dengan kecepatan lebih tinggi yaitu 1.5 megabit/detik yang diberi nama NSFNet. Kunci keputusan untuk menggunakan protokol
DARPA TCP/IP dibuat oleh
Dennis Jennings, yang nantinya
mengepalai program Supercomputer di NSF. Pembukaan jaringan komersial dimulai tahun 1988. Dewan Jaringan Federal AS (US Federal Networking Council) menyetujui interkoneksi dari NSFNET ke sistem Mail MCI pada tahun itu dan sambungannya dilakukan pada musim panas tahun 1989. Layanan e-mail komersial lain pun segera ikut tersambung, termasuk OnTyme, Telemail dan Compuserve. Tahun yang sama , tiga Internet Service Providers/ISP (Penyedia Layanan Internet) juga dibuat: UUNET, PSINET dan CERFNET. Berbagai jaringan komersial dan pendidikan seperti Telenet, Tymnet, Compuserve dan JANET saling terhubung mengikuti perkembangan Internet. Telenet (nantinya dikenal sebagai Sprintnet) adalah jaringan nasional terbesar yang didanai secara pribadi dengan akses dial-up gratis untuk kota-kota di seluruh Amerika Serikat. Jaringan ini pun terhubung dengan yang lain pada tahun 1980-an ketika protokol TCP/IP menjadi lebih populer. Kemampuan TCP/IP untuk bekerja secara virtual atas jaringan komunikasi yang telah 3
ada memungkinkan untuk perkembangan yang lebih mudah, walaupun perkembangan dari Internet itu sendiri tergantung pada ketersediaan router komersil dari perusahaan seperti Cisco Systems, Proteon dan Juniper, ketersediaan perlengkapan Ethernet komersil untuk jaringan lokal dan implementasi secara luas dari TCP/IP pada sistem operasi UNIX. 1.3 Manfaat Internet Internet yang pada awalnya hanya diperuntukkan untuk kalangan tertentu saja sudah memasuki ke dalam tahap dimana masyarakat dunia mulai tergantung kepada Internet itu sendiri. Manfaat Internet: -
Segi Bisnis: Pengenalan produk, penjualan produk, company image, penghematan kertas, dll.
-
Segi Komunikasi : Biaya yang jauh lebih murah dari cara komunikasi konvensional (telepon) seperti menggunakan VoIP, Instant Messanging,dll.
-
Segi Pendidikan : Pembelajaran jarak jauh, E-Learning, perpustakaan digital, dll
-
Segi Hiburan: Permainan Massively Multiplayer Online memungkinkan orang dari seluruh penjuru dunia dapat bermain bersama-sama, Streaming Musik dan Video.
1.4 TCP/IP Model TCP/IP menggunakan 4 layer/lapis yang secara logis menyamai 6 lapis teratas dari model OSI . Dapat dilihat dari gambar berikut:
4
Gambar 1.1 TCP/IP Model
a. Network Interface Sesuai namanya, lapisan ini mewakili tempat dimana protocol TCP/IP berjalan pada lapisan di antarmuka jaringan. Lapisan ini agak controversial karena pada dasarnya core dari protocol TCP/IP tidak ada yang berjalan di lapisan ini. Akan tetapi, lapisan Network Interface tetap menjadi bagian dari arsitekturnya. Lapisan ini sama dengan lapisan data link pada Model OSI. b. Lapisan Internet Lapisan ini mewakili lapisan network / jaringan pada model OSI (dan dengan alasan ini, terkadang memang sering disebut lapisan Network bahkan dalam diskusi yang membicarakan model TCP/IP). Lapisan ini bertanggung jawab serupa dengan fungsi layer tiga, seperti logical device addressing, data packaging, manipulation and delivery, dan yang paling penting, routing. Pada lapisan ini kita menemukan Internet Protocol (IP), bisa dibilang jantungnya dari TCP/IP, juga mendukung protocol seperti ICMP dan protocol routing (RIP, OSFP, BGP, etc.) Versi terbaru dari IP, disebut IP version 6, akan digunakan secara luas dimasa mendatang dan tentu berada di lapisan ini juga.
5
c. Lapisan Transport (Host to Host) Fungsi utama dari lapisan ini adalah memfasilitasi komunikasi end-to-end pada internetwork. Ia bertugas dalam mengijinkan koneksi logis antara perangkat untuk mengirim data. Nama resmi dari lapisan ini sering disingkat layer transport saja, protocol kunci dari TCP/IP pada layer ini adalah Transmission Control Protocol (TCP) dan User Datagram Protocol (UDP). Lapisan transport pada TCP/IP sama dengan layer OSI yang mempunyai nama yang sama juga (layer 4). d. Lapisan Aplikasi (Application Layer) Ini adalah lapisan tertinggi dari model TCP/IP . Lapisan ini cukup luas, mencakupi layer 5 sampai 7 pada model OSI. Mungkin terkesan kurang perincian sebagaimana pada model OSI. Akan tetapi model TCP/IP menggambarkan kondisi “kabur” atas pembagian fungsi pada lapisan-lapisan teratas dari model OSI dengan lebih baik. Karena memang sulit untuk membagi beberapa protocol yang mencakupi pada lapisan lima, enam, dan tujuh, jadi lebih cocok dijelaskan dalam satu lapisan saja. Banyak protocol yang ada di lapisan ini. Diantaranya : HTTP, FTP , SSH, Telnet, IRC , POP dan SMTP dalam menyediakan layanan end-user, serta protocolprotokol administrative seperti SNMP, DHCP dan DNS. Note: Protocol adalah seperangkat aturan yang disepakati, yang mengatur koneksi, komunikasi, dan pertukaran data antara dua computer. 1.5 Tipe Layanan Internet Dari protocol - protocol yang berjalan pada Lapisan Aplikasi (Application Layer) yang menyediakan beberapa layanan internet dapat dijelaskan sebagai berikut: a. WWW / World Wide Web (Port 80) WWW (World Wide Web atau lebih dikenal dengan Web saja) sering disamakan dengan Internet, hal itu tidak bisa terlalu dipersalahkan karena layanan inilah yang paling banyak digunakan. World Wide Web adalah dokumen-dokumen, gambar-gambar, yang saling terhubung dalam jumlah besar oleh hyperlink (penyambung antar halaman web) dan URL (skema pengalamatan oleh WWW browser untuk menunjukkan lokasi 6
dari suatu resource). Hyperlink dan URL memungkinkan web server dan mesin lain yang menyimpan resource asli, atau cached copy-nya untuk dikirimkan sesuai yang diminta menggunakan HTTP (Hypertext Transfer Protocol). HTTP hanya salah satu dari protocol komunikasi yang digunakan di Internet. Dalam penggunaan normal, web browser, seperti Internet Explorer dan Firefox, mengakses halaman web dan memungkinkan user untuk bernavigasi dari satu halaman ke halaman lain via hyperlinks. Dokumen-dokumen Web dapat mengandung hampir semua kombinasi dari data computer mencakupi graphics, sounds, text, video, multimedia dan konten interaktif seperti game, aplikasi office dan demonstrasi sains. - Ilustrasi Web Page Request
Gambar 1.2 Diagram Web Page Request
7
- Web Browser Untuk menampilkan halaman web, diperlukan sebuah web browser. Mei 1993, Marc Andreesen dan beberapa murid dari NCSA (National Center for Supercomputing Applications) membuat Web browser Mosaic untuk sistem X-Windows yang berbasiskan grafik dan mudah untuk digunakan, serta menyediakan navigasi yang ideal untuk internet. Saat ini browser yang masih banyak digunakan masyarakat adalah Internet Explorer keluaran Microsoft. Hal ini terjadi karena Internet Explorer sudah termasuk sebagai browser bawaan dari system operasi Windows. Akan tetapi kehandalan dari Internet Explorer tidak begitu baik, baik itu dari segi keamanan maupun kecepatan dalam merender tampilan halaman web. Beberapa browser lain seperti Firefox, Opera, Safari (bawaan Macintosh) memberikan alternative kepada user sebagai browser yang lebih aman, cepat, serta memiliki fitur-fitur tambahan yang sangat bermanfaat. b. File Transfer Protocol (FTP) (Port 21) Layanan FTP digunakan untuk pertukaran file dari satu computer ke computer lain. Untuk computer penyedia layanan memerlukan FTP server sedangkan untuk computer yang ingin memanfaatkan layanan FTP memerlukan FTP Client. Contoh FTP server: VSFtpd (linux based), proFTP (linux based),dll Contoh FTP client: filezilla, cuteFTP, dll c. E-Mail Layanan untuk berkirim surat elektronik yang ditangani oleh SMTP ( Simple Mail Transfer Protocol) . Protocol yang sekarang digunakan adalah ESMTP (extended / enhanced SMTP). Untuk email akan dibahas lebih mendalam di bab berikut. 1.6 Mengenal IPv6 IPv6 dirancang sebagai penerus dari IPv4 yang merupakan protocol internet saat ini. Perubahan utama dari IPv6 adalah ruang pengalamatan yang lebih luas. Panjang alamat yang bertambah tersebut mengurangi kebutuhan akan penggunaan NAT (network address translation) yang digunakan untuk mengatasi kekurangan alamat. Walau bagaimanapun bukanlah tujuan dari para perancang IPv6 untuk memberikan alamat unik yang permanent untuk setiap orang atau computer.
8
Untuk melihat contoh bagaimana ruang alamat IPv6 itu sangat-sangat besar, kita lihat contoh sebagai berikut: IPv6 mendukung alamat sepanjang 128 bit ,(IPv4 hanya 32 bit) atau kira-kira 5×1028 alamat untuk tiap 6.5 milyar orang yang ada di bumi ini. Atau untuk contoh lain, ada 252 alamat untuk tiap bintang yang ada di jagat raya ini. a. Pengalamatan IPv6 Alamat pada IPv6 biasanya ditulis dalam 8 kelompok atas 4 digit hexadecimal, dimana
tiap
kelompok
dipisahkan
oleh
titik
dua
(:).
Sebagai
contoh
2001:0db8:85a3:08d3:1319:8a2e:0370:7334 adalah alamat IPv6 yang benar. 1. Jika satu atau lebih 4 digit group berisi 0000 secara berurutan, angka 0 boleh dihilangkan dan diganti dengan dua buah tanda titik dua (::). Contoh, 2001:0db8:0000:0000:0000:0000:1428:57ab
bisa
dipendekkan
menjadi
2001:0db8::1428:57ab. 2. Digit yang diawali angka 0 dapat dihilangkan juga. Alamat di bawah ini adalah benar dan juga mengandung arti yang sama: 2001:0db8:0000:0000:0000:0000:1428:57ab 2001:0db8:0000:0000:0000::1428:57ab 2001:0db8:0:0:0:0:1428:57ab 2001:0db8:0:0::1428:57ab 2001:0db8::1428:57ab 2001:db8::1428:57ab 3. 4 byte beruturan diakhir alamat IPv6 juga bisa ditulis dalam bentuk decimal, dengan menggunakan titik (.) sebagai pemisah. Cara ini sering digunakan untuk alamat dengan alasan kompatibilitas. Contoh: Skema penulisan alamat berikut lebih gampang saat kita berhadapan dengan lingkungan pengalamatan campuran antara IPv4 dan IPv6. Penulisan secara umum adalah x:x:x:x:x:x:d.d.d.d dimana x adalah 6 deret digit heksadesimal yang lebih tinggi, sedangkan d adalah digit decimal atas urutan 8 bit alamat tersebut sebagaimana itu adalah format dari IPv4. Contoh: ::ffff:12.34.56.78 sama saja dengan alamat ::ffff:0c22:384e dan 0:0:0:0:0:ffff:0c22:384e. Penulisan seperti ini tidak didukung oleh beberapa aplikasi.
9
b. Penulisan IPv6 dalam URL Pada URL, IPv6 ditulis di dalam tanda kurung siku ( [ ] ), contoh: http://[2001:0db8:85a3:08d3:1319:8a2e:0370:7348]/ Cara penulisan ini memungkinkan agar tidak bingung antara alamat IPv6 dan port: https://[2001:0db8:85a3:08d3:1319:8a2e:0370:7344]:443/ Tidak hanya berguna tapi juga dianjurkan terutama pada penulisan singkat: https://[2001:db8::1428:57ab]:443/
10
BAB II E-MAIL 2.1 Sejarah email E-mail salah satu factor yang berperan dalam pembentukan Internet. MIT pertama kali mendemokan system bernama Compatible Time-Sharing System (CTSS) tahun 1961. Sistem ini memungkinkan multiple user untuk log / masuk ke IBM 7094 dari remote dial-up terminals, dan bisa menyimpan file secara online. Kemampuan ini memungkinkan user untuk berbagi informasi dengan cara baru. E-mail dengan cepat menjadi jaringan surat elektronik yang besar, memungkinkan user untuk mengirim pesan antar computer sekitar awal 1966. Jaringan computer ARPANET memegang peranan penting dalam pengembangan email. Ray Tomlinson mengusulkan tanda @ untuk memisahkan nama dari user dengan mesinnya pada tahun 1971. 2.2 Pembuatan Email Dari sekian banyak penyedia layanan email yang ada di Internet, pada bab ini kita akan coba menggunakan layanan email dari Google, yaitu GMail. Kenapa? Gampang saja, karena nanti kita juga akan membuat blog dari Blogger.com yang sudah dibeli oleh Google. Jadi dengan adanya account di google, akan memudahkan dalam proses pembuatan blog nanti. Sesuai pepatah “Sambil Menyelam Dua Tiga Pulau Terlampaui” :D . a. Step 1 Sign up (http://mail.google.com)
11
b. Step 2 Isi Formulir
12
c. Berhasil dan Lanjutkan ke Inbox
d. Inbox
Kesimpulan: Pada dasarnya proses pendaftaran email ini cukup gampang. Kita hanya perlu mengisi form yang telah disediakan. Langkah selanjutnya adalah tinggal memanfaatkan email ini untuk berkirim atau menerima surat.
13
BAB III FORUM INTERNET 1.1 Definisi Sebenarnya tidak perlu kita pusing-pusing mendefinisikan kata forum internet ini. Pada dasarnya forum adalah tempat kumpul para netter yang mempunyai minat yang sama dan saling berdiskusi untuk bertukar pikiran. Banyak sekali forum yang ada saat ini, dan masing-masing forum mempunyai dasar minat yang sama(minimal pada awalnya begitu) seperti tempat kumpul para pecinta computer, video games, novel, dll. Dengan semakin berkembangnya sebuah forum, bisa saja forum itu mempunyai sub forum yang membahas sampai segala hal. Contoh forum besar di Indonesia: -
kaskus.us
-
forum.chip.co.id
-
videogamesindonesia.com
-
forumponsel.com
Contoh forum besar luar negri: -
Ubuntuforums.org
-
Kirupa.com/forum
-
Flashkit.com
1.2 Mendaftar Dalam Forum Tidak dapat dipungkiri bahwa dengan mengikuti sebuah forum, kita bisa mendapatkan informasi yang banyak sekali. Jadi silakan Anda mendaftarkan diri ke dalam sebuah forum sesuai minat yang Anda miliki. Proses pendaftaran tidak jauh beda dengan membuat email, jadi sepertinya tidak perlu lagi diberikan bimbingan dalam proses pendaftaran menjadi anggota forum.
14
BAB IV BLOG 4.1 Pengertian Blog Blog merupakan singkatan dari "web log" adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Posting-posting tersebut seringkali dimuat dalam urutan secara terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web semacam itu biasanya dapat diakses oleh semua pengguna internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut. 4.2 Sejarah Blog Sesuai singkatan dari Blog yaitu web log, awalnya dimulai dari catatan harian dari seorang web master yang mempublikasikannya di Internet. Catatan harian itu berupa progress perkembangan dari web tersebut. Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum akhirnya PyraLab diakuisisi oleh Google.Com pada akhir tahun 2002 yang lalu. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada perkembangan para penulis blog tersebut. Blog mempunyai fungsi yang sangat beragam, dari sebuah catatan harian, media publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan perusahaanperusahaan. Sebagian blog dipelihara oleh seorang penulis tunggal, sementara sebagian lainnya oleh beberapa penulis. Banyak juga weblog yang memiliki fasilitas interaksi dengan para pengunjungnya, yang dapat memperkenankan para pengunjungnya untuk meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga yang yang sebaliknya atau yang bersifat non-interaktif. Situs-situs web yang saling berkaitan berkat weblog, atau secara keseluruhan merupakan kumpulan weblog sering disebut sebagai blogosphere. Bilamana sebuah kumpulan gelombang aktivitas, informasi dan opini yang sangat besar berulang kali muncul untuk beberapa subyek atau sangat kontroversial terjadi dalam blogosphere, maka hal itu sering disebut sebagai blogstorm atau badai blog.
15
4.3 Jenis Blog •
Blog politik: Tentang berita, politik, aktivis, dan semua persoalan berbasis blog (Seperti kampanye).
•
Blog pribadi: Disebut juga buku harian online yang berisikan tentang pengalaman keseharian seseorang, keluhan, puisi atau syair, gagasan jahat, dan perbincangan teman.
•
Blog bertopik: Blog yang membahas tentang sesuatu, dan fokus pada bahasan tertentu
•
Blog kesehatan: Lebih spesifik tentang kesehatan. Blog kesehatan kebanyakan berisi tentang keluhan pasien, berita kesehatan terbaru, keterangan-ketarangan tentang kesehatan, dll.
•
Blog sastra: Lebih dikenal sebagai litblog (Literary blog).
•
Blog perjalanan: Fokus pada bahasan cerita perjalanan yang menceritakan keteranganketerangan tentang perjalanan/traveling.
•
Blog riset: Persoalan tentang akademis seperti berita riset terbaru.
•
Blog hukum: Persoalan tentang hukum atau urusan hukum; disebut juga dengan blawgs (Blog Laws).
•
Blog media: Berfokus pada bahasan kebohongan atau ketidakkonsistensi media massa; biasanya hanya untuk koran atau jaringan televisi
•
Blog agama: Membahas tentang agama
•
Blog pendidikan: Biasanya ditulis oleh pelajar atau guru.
•
Blog kebersamaan: Topik lebih spesifik ditulis oleh kelompok tertentu.
•
Blog petunjuk (directory): Berisi ratusan link halaman website.
•
Blog bisnis: Digunakan oleh pegawai atau wirausahawan untuk kegiatan promosi bisnis mereka
•
Blog pengejawantahan: Fokus tentang objek diluar manusia; seperti anjing
•
Blog pengganggu (spam): Digunakan untuk promosi bisnis affiliate; juga dikenal sebagai splogs (Spam Blog)
4.4 Blog Roll Dapat diartikan sebagai link kepada blog-blog yang dianggap sebagai rekan. Pada dasarnya blogroll ditempatkan pada ruang tertentu dimana akan terdapat daftar alamat blog atau hanya nama pemiliknya.
16
4.5 Step Pembuatan Blog di Blogger
Gambar 4.1 Membuat Blog di blogger.com 1. Kita tinggal memasukkan alamat email beserta password dari gmail yang telah kita miliki
17
Gambar 4.2 Step 1 Pendaftaran 1. Mengisi “Nama Tampilan” 2. Mengklik centang untuk menerima persyaratan dan layanan 3. Tinggal melanjutkan
18
Gambar 4.3 Step 2 Pemberian Nama beserta Alamat Blog
19
Gambar 4.4 Pemilihan Template untuk tampilan blog
Gambar 4.5 Selesai Proses Setting Blog 20
Gambar 4.6 Penulisan Posting Pertama
Gambar 4.7 Posting Telah Dipublish 21
Gambar 4.8 Tampilan Blog Setelah Publish Posting Pertama
22
BAB V HTML 5.1 Definisi HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). 5.2 Tag HTML Introduction
Dog Tag
Real Dog Tag
Gambar di atas bukanlah tag HTML, tapi Dog Tag kalau diterjemahkan bulat-bulat berarti adalah kalung anjing. Gambar di sebelah kanan memang benar kalung yang dipakai anjing, sedangkan yang di sebelah kiri adalah dogtag yang digunakan tentara. Fungsi dari kalung tersebut adalah sebagai penanda. Untuk sang anjing, tentu pada kalung tersebut terdapat nama si Anjing
23
maupun nama Tuannya beserta alamat. Sedangkan untuk tentara, ada berbagai informasi seperti nama, golongan darah, pangkat, dll. Pada intinya adalah dog tag berguna sebagai penanda. Pada dokumen HTML, terdapat banyak tag yang berguna memberi informasi pada Browser bagaimana menampilkan halaman tersebut dengan benar. Tanpa berbelit-belit mari kita langsung coba, sebagai seorang calon programmer handal kita hanya memerlukan sebuah aplikasi pengolah kata sederhana saja untuk membuat dokumen HTML. Silakan jalankan notepad (pada windows), atau yang pakai Linux boleh menggunakan vi, nano, dsb. Isikan sebagai berikut: Judul Halaman Web Koe Ini halaman web pertamakoe. Text ini tebal kan? Save file dengan nama cupu.htm, simpan di desktop saja. Kemudian jalankan browser favorit kita. Pilih open, dan cari file yang kita simpan tadi. Lihat apa yang muncul. Penjelasan: 1. Ini adalah penanda utama yang menunjukkan bahwa document kita ini adalah dokumen html. adalah pembukanya, sedangkan menandakan penutup yang mengakhiri bagian dari dokumen HTML. Sebagian besar tag selalu diakhiri dengan bentuk 2. Text diantara tag ini tidak akan ditampilkan di web browser, hanya berupa informasi header. 3. Text diantara tag ini akan ditampilkan di caption browser sebagai judul halaman 4. Text diantara tag ini akan dimunculkan di halaman web browser 5. Text diantara tag ini akan dicetak tebal. 24
5.3 Lebih Dalam Mengenai Tag HTML 1. Tag HTML digunakan sebagai penanda atas element HTML 2. Tag HTML dikelilingi oleh 2 karakter yaitu < dan > yang disebut sebagai kurung siku 3. Tag yang ada biasanya sepasang, seperti sebagai pembuka, dan sebagai penutup 4. Teks diantara tag HTML disebut elemen HTML (liat point 1) 5. Tag tidak memandang huruf besar atau kecil (tapi agar lebih rapi gunakan huruf kecil semua, lagipula rekomendasi dari W3C untuk format penulisan memang disarankan pakai huruf kecil) 6. Tiap tag adalah singkatan dari sebuah kata yang mempunyai fungsi sesuai dari kata itu sendiri. 5.4 Tag HTML Dasar a. Heading / Judul Kecil (
,
…
) Masukkan seperti ini :
Ini Heading
Ini Heading
Ini Heading
Ini Heading
Ini Heading
Ini Heading
Save seperti biasa, dan jalankan. Lihat hasilnya.
akan menghasilkan tulisan terbesar, sedangkan
terkecil. HTML secara otomatis akan membuat baris kosong sebelum dan sesudah heading. b. Paragraph (
) Masukkan seperti ini:
Ini paragraph pertama
Ini paragraph kedua
Save dan jalankan. Sama seperti Heading, HTML secara otomatis membuat baris kosong di awal dan sesudah paragraph.
25
c. Line Break / Baris Baru ( ) Masukkan seperti ini:
Saya suka susu sapi sebab susu sapi sangat sehat
Save dan jalankan. Lihatlah bahwa setelah kata sebab, maka kata berikutnya ditampilkan dibawah. Khusus tidak memerlukan pasangan / penutup. d. Horizontal Rule / Garis Horizontal ( ) Masukkan seperti ini: Sebenarnya susu sapi bisa diganti susu kambing Tapi kambing kan bau ya Save dan jalankan. Setelah kata kambing, dibuatlah garis horizontal dibawahnya, kemudian dibawahnya lagi dilanjutkan text Tapi kambing kan bau ya. 5.5 Tag HTML Lanjutan (Memberikan Attribute) a. HTML Tag Attribute Tag HTML bisa diberikan atribut untuk memberikan informasi tambahan pada element HTML ( ingat…ingat…elemen HTML itu Teks yang diapit oleh Tag HTML ). Contoh: Selamat Datang di situs PADI Perjuangan Note: - Attribute selalu datang berpasangan dengan format namaAttribute=”nilai” -
Attribute selalu diletakkan dalam tag pembuka
-
Gunakan penulisan lowercase / huruf kecil, ini rekomendasi dari W3C untuk standar HTML 4
-
Biasakan nilai attribute diberi tanda kutip / double style quote (“) , tanda petik juga diperbolehkan / single style quote (‘)
b. Text Formatting Tag HTML menyediakan tag untuk melakukan format text seperti menebalkan, memiringkan, garis bawah, dll.
26
Berikut sedikit contoh tag yang tersedia, silakan dicoba sendiri:
bold text
big text
<em>
emphasized text / penekanan
italic text
<small>
small text
<strong>
strong text
<sub>
subscripted text
<sup>
superscripted text
inserted text / garis bawah
<del>
deleted text
c. Tag Link / Anchor dan Attribute Href Sebuah tag Anchor (anchor kalau diartikan dalam bahasa Indonesia adalah jangkar) bisa merujuk pada resource apa pun yang ada di web : gambar, web Page, suara, dll. Format penulisan: Teks yang akan ditampilkan
dan ) Untuk membuat daftar pada HTML, kita bisa menggunakan tag List yang baik itu yang tidak berurutan / unordered list (
) maupun berurutan / ordered list (). Di dalam tag tersebut kita tinggal memberikan tag (
= list item) untuk masing-masing item. Contoh unordered list:
Honda
Yamaha
Suzuki
Contoh ordered list:
Honda
Yamaha
Suzuki
f. Image Tag ( ) Digunakan untuk menampilkan gambar. Format penulisan sbb: Attribute src kepanjangan dari source atau sumber , jadi attribute ini menentukan lokasi gambar ada dimana. Contoh: Pada contoh di atas ada tambahan attribute alt / alternative, gunanya adalah saat gambar bernama “tukul.jpg” belum selesai ditampilkan, maka tulisan “reynaldi” akan dimunculkan sebagai alternative. Selain itu, attribute alt ini berguna juga untuk membantu saudara kita yang tuna netra untuk tahu bahwa gambar tersebut adalah gambar Reynaldi alias Tukul Arwana.
28
BAB VI CSS 6.1 Cascading Style Sheet (CSS) CSS adalah sebuah solusi dalam mengatur penampilan yang ada pada dokumen HTML. Bisa kita bayangkan, kita ingin membuat setiap hyperlink yang ada di halaman web kita itu berwarna merah. Mau tidak mau kita harus bermain di attribute color untuk tiap hyperlink yang kita buat, dan bayangkan lagi jika kita ingin membuat sebuah situs portal yang terdapat 100 lebih link yang ada di satu halaman saja. Dengan CSS kita cukup membuat sebuah aturan saja, maka semua hyperlink akan bisa kita buat menjadi warna merah. 6.2 Syntax *Syntax dari CSS terbagi menjadi 3 bagian: selector, property, dan value” Selector{ property:value} Selector umumnya adalah element/tag HTML yang ingin kita tentukan, property adalah attribute yang ingin kita rubah, dan tentunya tiap property (dalam hal ini mengacu pada attribute) memerlukan value/nilai. Property dan value dipisahkan dengan titik dua ( : ) dan diapit oleh kurung kurawal { } . Contoh: 1. p {color:green} Artinya: semua paragraph
yang ada di document HTML akan berwarna hijau. 2. p {font-family:”san serif”} Artinya: semua paragraph akan menggunakan jenis font San Serif Note: untuk value/nilai yang terdiri dari dua kata, harus diapit oleh tanda petik “” 3. p {color:green ; font-family:”san serif”; align:center} Untuk memasukkan lebih dari satu aturan property, pisahkan tiap property dengan titi koma
29
4. p { color:green; align:center } Keterangan: penulisan di atas sangat dianjurkan untuk memudahkan dalam pembacaan. 5. h1,h2,h3,h4 { color:grey } Keterangan: kita bisa mendefinisikan secara berkelompok, jadi semua tag h1 – h4 akan berwarna abu-abu.
Class Selector Dengan class kita bisa membedakan masing-masing element HTML dengan ditentukan classnya. Contoh: p.merah{color:red} p.hitam{color:black} Penerapan di HTML:
Ini paragraph warna merah
Ini paragraph warna hitam
Contoh lain: -Kita bisa menggunakan syntax css seperti ini juga: .hitam{color:black} .posisi{align:center} Penerapan di HTML:
Judul Paragraph
ini paragraph
Keterangan: - kita cukup membuat kelas yang diawali tanda titik (.) Dengan begini, class ini bisa dipakai oleh element HTML manapun. -
untuk menerapkan lebih dari dua class cukup dipisahkan nama class dengan spasi. 30
6.3 Bagaimana Memasukkan CSS ke HTML ? a. Melalui CSS External Cara ini sangat direkomendasikan, karena dengan cara ini, semua halaman web yang kita link-kan CSS nya pada CSS external, akan memudahkan dalam perubahan. Mengapa? Karena kita cukup edit sebuah file CSS saja dan semua halaman web akan ikut berubah dalam penataan style-nya. File CSS bisa ditulis dengan text editor sederhana sekelas notepad. Dan harus disimpan dalam extension .css. Dan ingat, pendefinisian lokasi file CSS harus diletakkan dalam tag . b. Melalui CSS Internal <style type="text/css"> c. Melalui Cara Inline Style
Ini adalah paragraph menggunakan CSS lewat cara Inline
Note: Gunakan cara ini hanya jika kita memang menginginkan perubahan secara spesifik saja.
31
Penting: Berdasarkan urutan cara pemasukkan CSS itu, juga berpengaruh pada aturan yang akan dipakai. Jika pada CSS external sudah memberikan aturan tertentu, dan pada CSS internal didefinisikan lagi aturan yang baru, maka aturan yang dipakai adalah CSS internal. Dan akan diteruskan pada Inline Style: Jadi Urutannya: External -> Internal -> Inline 6.4 Beberapa Contoh Parameter CSS Yang Sering Dipakai a. Font Properties font
Font-family Font-size
Font-style Font-weight
Value
Keterangan
font-style font-variant font-weight font-size/line-height font-family Arial, san serif, dll
Deklarasi singkat untuk semua property yang
xx-small x-small small medium large x-large xx-large smaller larger length % normal italic oblique normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Untuk ukuran font
diperlukan oleh font sekaligus. Istilahnya property sapu bersih :D Jenis font yang mau dipakai
Ketebalan font
32
b. Text Properti text pada CSS berguna dalam mengatur bagaimana sebuah teks ditampilkan, berikut daftar properties serta nilai yang bisa diberikan. Properties
Values
Keterangan
color
#ffffff / rgb(255,255,255)
Text-align
left right center justify none underline overline line-through blink none capitalize uppercase lowercase
Warna teks, bisa ditulis dalam format hexa atau RGB. Untuk kode nilai ini bisa didapat dengan bantuan software pengolah gambar. Perataan pada text
Text-decoration
Text-transform
Dekorasi teks :D Tidak ada penjelasan yang bisa lebih jelas dari katanya sendiri. Merubah teks jadi huruf kecil semua atau besar semua, atau huruf pertama jadi huruf besar
c. Background Properties background pada CSS berguna untuk mengatur segala hal mengenai background untuk element HTML. Properties background
Keterangan Sama seperti font, property ini juga termasuk property sapu bersih. Set semua keperluan dengan satu property saja. Atur apakah gambar background tetap diam atau ikut bergerak saat scroll Warna background Memberi gambar Pengulangan pada gambar
33
d. List List property pada CSS dapat menambah variasi lebih banyak untuk list daripada HTML Properties List-style List-style-image List-style-position List-style-type
Values list-style-type list-style-position list-style-image url inside outside none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
Keterangan Properti list sapu bersih Beri gambar untuk list Posisi list Jenis pengurut /list
e. Float Mengatur bagaimana gambar atau teks diletakkan didalam element lain (kanan atau kiri) Syntax: float{ left/right/none} f. Clear Kebalikan dari Float, property ini untuk tidak mengizinkan element diletakkan didalam element element lain (kiri atau kanan) Syntax: clear(left/right/both)
Pada contoh di atas ada tambahan attribute alt / alternative, gunanya adalah saat gambar bernama “tukul.jpg” belum selesai ditampilkan, maka tulisan “reynaldi” akan dimunculkan sebagai alternative. Selain itu, attribute alt ini berguna juga untuk membantu saudara kita yang tuna netra untuk tahu bahwa gambar tersebut adalah gambar Reynaldi alias Tukul Arwana.