1. Jelaskan tentang HTML beserta aturan format penulisannya.
Pengertian HTML:
HTML (Hyper Text Markup Language) 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).
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.
Secara garis besar, terdapat 4 jenis elemen dari HTML:
- structural. tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan sebagai Heading 1
- presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
- hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href=”http://www.ilmukita.com/”>IlmuKita</a> akan menampilkan IlmuKita sebagai sebuah hyperlink ke URL tertentu),
- Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).
Selain markup presentational , markup yang lin tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.
Sumber: Aturan format Penulisan HTML:
Untuk membuat web, diperlukan pemahaman tentang html, setidaknya secara umum. Walaupun sekarang kita bisa bikin web siap pakai dengan mudah (blog, cms), tapi tetap aja pemahaman html secara umum pasti lebih baik untung pengembangan blog selanjutnya.
- Menamai dokumen html (judul pada title bar browser)
- <html></html> tag pembuka dan penutup html
- <head></head> menetapkan judul dan informasi lain yang tidak ditampilkan di browser
- <title></title>
- <body></body> Menetapkan isi dokumen html (yang akan ditampilkan di halaman web browser)
Yang perlu diingat adalah, dalam penulisan html ada dua jenis tag yang digunakan yaitu tag pembuka (cth: <body>, <head>) dan tag penutup (cth: </body>,</head> ).
Struktur dasar penulisan html
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini adalah isi dokumen html yang akan ditampilkan di halaman browser
</body>
</html>
Penjelasannya:
menamai dokumen html (judul pada title bar browser)
<html></html> tag pembuka dan penutup html
<head></head> menetapkan judul dan informasi lain yang tidak ditampilkan di browser
<title></title>
<body></body> Menetapkan isi dokumen html (yang akan ditampilkan di halaman web browser)
Yang perlu diingat adalah, dalam penulisan html ada dua jenis tag yang digunakan yaitu tag pembuka (cth: <body>, <head>) dan tag penutup (cth: </body>,</head> ).
Tag format teks
* <h1></h1>
digunakan untuk membuat headline (h1 s/d h6)
* <b></b>
teks cetak tebal
* <i></i>
teks cetak miring
* <u></u>
teks bergaris bawah
* <cite></cite>
membuat kutipan, biasanya cetak miring
* <strong></strong>
memperjelas kata(cetak tebal)
* <font size=”?” color=”?”></font>
menetapkan ukuran font(1-7) dan warna font/huruf
* <p></p>
membuat paragraf
* <p align=”?”>
mengatur tata letak paragraf (left, center, right)
* <br />
membuat baris baru
* <ol></ol>
membuat ordered list/ daftar dengan angka
* <ul>
membuat unordered list (daftar bullet)
# <li></li>
menulis daftar tiap item dari list
# <div></div>
Aturan format penulisan
1. Menulis judul pada halaman homepage
Setiap dokumen HTML sebuah homepage perlu diberi judul. Berikut adalah tampilan pada saat anda melakukan perintah penulisan judul atau title :
<title>Sinungku document</title>
Ubahlah teks “Sinungku document” dengan judul artikel anda.
Penulisan judul biasanya dimulai dengan tanda tag <title> dan diakhiri dengan tanda tag </title>. Judul tulisan sebaiknya dituliskan pada awal dokumen anda.
2. Menambahkan sub-sub judul dan paragraphnya
Apabila anda telah biasa mempergunakan Microsoft Word, anda sudah biasa pula dengan model-model kodifikasi sub judul (heading) dengan tingkatan kepentingannya. Dalam bahasa HTML ada enam tingkat sub judul (heading). H1 adalah sub judul yang paling penting, H2 adalah sub judul yang agak kurang penting, begitu seterusnya sampai H6, yang paling sedikit kepentingannya..
Setiap paragraph yang anda tulis sebaiknya dimulai dengan sebuah kode tag <p>. Kode tag </p> hanya dipergunakan bila perlu. Kecuali pada penulisan sub judul biasanya diakhiri dengan kode tag </p>. Contoh :
<p>Paragraph Pertama.</p>
<p>Paragraph kedua.</p>
Untuk membuat lay-out tulisan kode yang dipakai :
<p align=”justify”>Teks anda</p> : Rata kiri kanan
<p align=”right”>Teks anda</p> : Rata Kanan
<p align=”center”>Teks anda</p> : Rata Tengah
<p align=”left”>Teks anda</p> : Rata Kiri
3. Menambahkan emphasis / Huruf Miring
Anda dapat menambahkan emphasis yang terdiri dari sebuah kata atau beberapa kata dengan menuliskan kode tag <em> pada awal emphasisnya dan diakhiri dengan kode tag </em>. Atau kode : <i> dan diakhiri </i> Contoh
Sinung putriku <em>pertama</em> yang cantik. Atau :
Sinung putri <i>pertama</i> dari Wahyo.
4. Membuat Huruf Tebal / Bold
Contoh : Sinung putri <b>pertama</b> dari Wahyo.
5. Membuat Huruf Bergaris bawah
Contoh : Sinung putri <u>pertama</u> dari Wahyo.
6. Membuat Warna Huruf
Contoh : Sinung putriku <font color=”#0000ff”>pertama</font>yang cantik.
0000ff adalah kode warna huruf, anda bisa menggantinya dengan kode yang lain.
7. Membuat Warna Background Huruf
Contoh : Sinung putriku <span style=”#0000ff”>pertama</span>yang cantik.
8. Membuat ukuran / size Huruf
Contoh : Sinung putriku <font size=”3”>pertama</font>yang cantik.
9. Mengubah Jenis Huruf
Contoh : Sinung putriku <font face=”Times New Roman”>pertama</font>yang cantik.
10. Menambahkan gambar (images)
Gambar (atau images) dapat ditambahkan kedalam halaman Web anda agar semakin informatif dan menolong penyampaian pesan anda. Cara sederhana untuk menambahkan sebuah gambar adalah dengan menggunakan kode tag <img>.
Misalkan anda hendak menambahkan sebuah file gambar “sinungku.jpeg” dalam folder atau direktori yang sama dimana file dokumen HTML anda simpan. Gambar ini memiliki lebar 200 pixel dan tingginya 150 pixel.Maka menulisnya sebagai berikut :
<img src=”sinungku.jpeg” width=”200″ height=”150″>
Lebar dan tinggi tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan menolong cepatnya tampilan halaman web anda diakses oleh orang lain di internet. Namun masih ada kekurangannya ! Orang lain yang tidak dapat melihat gambar anda, akan memerlukan deskripsi gambarnya. Anda dapat menambahkan deskripsinya dengan cara sebagai berikut :
<img src=”sinungku.jpeg” width=”200″ height=”150″
alt=”Putriku yang Pertama”>
Atribut alt dipergunakan untuk menuliskan perintah deskripsi singkat yaitu ” Putriku yang Pertama “. Untuk gambar-gambar yang kompleks, anda akan membutuhkan deskripsi yang lebih banyak. Misalkan perintah ini akan dituliskan dalam file “sinungku.html”, anda dapat menambahkan atribut deskripsi yang panjang seperti dalam contoh berikut :
11. Menambahkan link (tanda berhubungan) dengan halaman lain
Yang membuat Web demikian efektif adalah adanya kemampuan untuk membuat hubungan (link) dari satu halaman dengan halaman lainnya dan halaman lain yang berhubungan ini dapat dikerjakan cukup dengan satu kali klik saja.
Hubungan atau Link biasa ditulis dengan kode tag <a>. Misalkan sebuah hubungan atau link hendak dibuat pada file “sinungku.html”:
This a link to <a href=”Sinungku.html”>Sinung’s page</a>.
Teks antara kode tag <a> dengan kode tag </a> adalah keterangan tentang hubungan atau link yang akan dibuat. Umumnya keterangan ini diberi garis bawah. Warna teks dan garis bawah dibuat berwarna biru.
Untuk membuat link ke tempat Web yang lain anda perlu menambahkan alamat internet Web selengkapnya (biasanya disebu URL), contoh untuk link ke w3c anda perlu menuliskan :
This is a link to <a href=”http://www.w3c.org/”>W3C</a>.
Anda dapat juga membuat gambar logo memiliki link ke halaman lain. Contoh penulisan berikut memungkinkan gambar logo anda dapat berhubungan dengan home page.
<a href=”/”><img src=”logo.gif” alt=”home page”></a>
2. a. Sebutkan minimal 5 Web browser
b. Web browser apa yang paling sering anda gunakan ? jelaskan bagian-bagiannya dan fungsi pokok nya.
1. Macam-macam web browser :
· Internet Explorer


Merupakan web browser bawaan windows, performanya sejauh ini belum terlalu meyakinkan, meski sudah keluar versi 8.0 nya. Mungkin keunggulannya merupakan web browser yang cocok untuk aktifitas update OS windows. Mungkin hanya itu kegunaan utamanya. Kebanyakan user jarang yang memanfaatkan web browser ini sebagai default web browsernya. Isu tentang bugs dan kelemahan browser ini sering kali terdengar.
Kelebihan:
(+) Tampilan paling menarik, juga menyediakan add on walau tidak
sebanyak FF
(+) Terintegrasi dengan Windows Live, jadi kalau punya email di
hotmail, windows live, juga Windows Messenger bisa langsung
mengaksesnya dengan 1 tombol
(+) Mendukung teknologi Web Slices
(+) Mendukung Silverlight (Flash versi Microsoft yang sedikit lebih
keren)
Kekurangan:
(-) Banyak bug
(-) Lebih lambat dibandingkan yang lainnya
(-) Tidak ada add-ons
(-) Gagal membuka CSS
(-) Security paling lemah, mudah diserang hacker, juga gampang terkena
virus
Mozilla Firefox

Ditujukan bagi user yang lebih mengedepankan kelengkapan add-ons dan fitur tambahan lain guna meningkatkan performa web browser tersebut, Firefox juga mempunyai level keamanan yang cukup tinggi. Setidaknya tersedia 5000 add-ons lebih, guna meningkatkan performa mozilla firefox, hanya dengan tambahan add-ons Fasterfox dan WOT (web of trust) browser ini sudah siap meluncur ke belantara internet (Tentunya dibawah benteng firewall). Firefox sangat cocok digunakan sebagai web browser penjelajah situs/browsing.
Kelebihan:
(+) Mendukung Flash, Java servlet dan applet
(+) Banyak fitur tambahan (add ons), ibarat kepingan puzzle, add ons ini bisa dibongkar pasang sesuai dengan kebutuhan user
(+) Update Mudah
(+) Security OK
(+) Cocok utk donlot2 file besar, karna sudah ada download manager
sendiri, apalagi kalo sudah pasang plugin ‘Flashgot’ dan ‘Down Them
All’
(+) Mudah utk mendonlot file2 youtube
(+) Bandel, cocok untuk membuka situs-situs multimedia
(+) Updatenya mudah
Kekurangan:
(-) Kurang cepat jika dibandingkan dengan Opera
(-) Berat kalo terlalu banyak plugin
· Opera

Opera lebih mengedepankan kecepatan dan kualitas. Dan bisa dibilang Opera merupakan web browser yang paling unggul dalam hal tampilan halaman web terlebih untuk membuka halaman web yang penuh dengan gambar dan penekanan nuansa layout, wajar saja karena Opera sudah lulus test ACID2 Browser test dengan nilai tertinggi sekaligus penyandang gelar pertama kali (meskipun rata-rata web browser sekarang sudah lulus ACID2 Browser test) soal tampilan Opera tiada duanya. Sangat cocok buat membuka situs-situs social networking.
Kelebihan:
(+) Banyak fitur yang memudahkan pemakaian, seperti ’speed dial’
(+) Mendukung Flash
(+) Ringan
(+) Cepat dalam pemanggilan cache
(+) Ada teknologi kompresi, jadi data yg didownload lbh cepat
terpanggil, cocok buat yang pakai internet quota, ngirit bandwith
Kekurangan:
(-) Belum mendukung Java servlet, dan sulit jika membuka situs yang terdapat AJAX, (contohnya jika membuka situs facebook.com, kita belum bisa mengedit untuk menghapus komentar teman di Opera dan belum bisa menggunakan aplikasi touchgraph-nya facebook, sedangkan di Mozilla bisa)
(-) Tidak ada add-ons (namun skin tampilan juga dapat diganti)
(-) Lambat dalam membaca script
(-) Update paling susah, harus mendownload file masternya lagi
· Chrome

Kelebihan:
(+) Bug-nya sulit dieksploitasi
(+) Paling ringan
(+) Design simple dan minimalis
(+) Update Mudah
(+) Security paling OK, paling kuat, menjadi browser paling tahan
terhadap serangan hacker
Kekurangan:
(-) Fitur kurang
(-) Installnya musti online
· Safari

(+) Kelebihan:
> Kemampuan memecah tab menjadi jendela, dan sebaliknya
> Snapback
> Fitur terbaru yang menarik adalah penerapan Nitro Engine. Dengan aplikasi ini browser bisa mengolah aplikasi-aplikasi web dengan lebih cepat karena Nitro Engine dapat mengeksekusi java script delapan kali lebih cepat dibanding dengan browser lainnya.
> Safari dilengkapi juga dengan Cover Flow yang membuat tampilan bookmark dan history browser lebih nyaman.
> Safari juga mendukung format modern web berbasis html 5 yang dapat mengumpulkan web-web favorit yang sering dibuka oleh pengguna dalam bentuk thumbnail, mirip dengan yang dimiliki oleh Opera.
(-) Kekurangan:
> Tampak aneh sebagai aplikasi Windows jika pertama kali menggunakannya.
> Tak ada fitur baru yang menonjol
> Tak ada fitur restore kalau Safari hang.
> Adanya bug Bug pada Safari dapat berakibat attacker mampu untuk membuang desktop korban dengan eksekusi file executable (.exe), sebuah penyerangan yang dikenal dengan nama Carpet Bombing
B. Mozila Firefox yang sering saya gunakan sebab :
Mozilla firefox dibuat oleh mozilla corporation,dan dapat digunakan dengan mudah karena aksesnya mudah dan dengan Mozilla firefox mempunyai keistimewaan yaitu kita bisa mendapat informasi yang luas, bertransaksi secara global.
Bagian Firefox dan fungsinya
add-ons ini : agar pengguna Firefox bisa menyusun sendiri menu mana saja yang ingin ditampilkan.