Penulisan HTML dan Macam-Macam Web Browser

28 Dec 2010

  1. Html singkatan dari hypertext markup language, merupakan program penulisan informasi sebuah homepage. Tulisan ini merupakan pendahuluan cara menulis dengan bahasa HTML.

Aturan penulisan format HTML:

a) 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.

b) 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..

Berikut adalah bagaimana caranya menambahkan sub judul (heading) :

<h1>Judul Penting</h1>

dan berikut adalah penulisan sub judul selanjutnya :

<h2>Judul Kurang Penting</h2>

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

c) 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.

d) Membuat Huruf Tebal / Bold

Contoh : Sinung putri <b>pertama</b> dari Wahyo.

e) Membuat Huruf Bergaris bawah

Contoh : Sinung putri <u>pertama</u> dari Wahyo.

f) 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.

g) Membuat Warna Background Huruf

Contoh : Sinung putriku <span style=#0000ff>pertama</span>yang cantik.

h) Membuat ukuran / size Huruf

Contoh : Sinung putriku <font size=3>pertama</font>yang cantik.

i) Mengubah Jenis Huruf

Contoh : Sinung putriku <font face=Times New Roman>pertama</font>yang cantik.

j) 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 :

<img src=”sinungku.jpeg” width=”200″ height=”150″

alt=”Putriku yang Pertama ” longdesc=”sinungku.html”>

Anda dapat membuat gambar dengan beberapa cara, dapat dengan mempergunakan kamera digital, scanner, atau membuat gambar dengan program pembuatan gambar seperti Photoshop, Corel, Microsoft Photoeditor, LViewpro dll. Kebanyakan program browser dapat membaca format gambar GIF dan JPEG, program browser yang terbaru juga dapat membaca format PNG. Untuk mencegah lambatnya gambar anda diakses di internet sebaiknya anda menerapkan ukuran file gambar yang tidak terlalu besar.

Secara umum, format JPEG adalah format terbaik untuk fotografi dan memperhalus berbagai jenis gambar, sedangkan format GIF dan PNG baik untuk grafis seperti bidang datar berwarna, garis dan teks. Ketiga bentuk format itu memiliki kemampuan “progressive rendering” yaitu kemampuan mengirimkan gambar kasarnya terlebih dahulu dan kemudian dilanjutkan dengan menambahkan detailnya sampai gambar tersebut tampil seluruhnya dengan baik.

k) 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>

l) Tiga macam daftar

Bahasa HTML memiliki kemampuan membuat tiga jenis daftar (list). Pertama daftar dengan kode bulat (bulleted list), biasa disebut unordered list. Penulisannya mempergunakan kode tag <ul> dan kode tag <li>, contoh :

<ul>

<li>Sinung putriku pertama</li>

<li>Wahyo adalah ayahnya</li>

<li>Dyah adalah ibunya</li>

</ul>

Perhatian, anda selalu harus menuliskan kode tag </ul> pada bagian akhir daftar anda, tetapi kode tag </li> bersifat tambahan atau bisa juga tidak dipergunakan. Jenis daftar kedua disebut daftar bernomor atau disebut juga ordered list. Ini dituliskan dengan kode tag <ol> dan kode tag <li>. Contoh :

<ol>

<li>Sinung putriku pertama</li>

<li>Lahir tanggal 18 Agustus</li>

<li>Hari lahir Jum`at jam 20.05 WIB</li>

</ol>

Seperti daftar pertama, anda selalu perlu mengakhiri daftar dengan kode tag </ol> , tetapi kode tag </li> pada bagian akhir adalah tambahan dan dapat dihilangkan.

Daftar ke tiga dan terakhir adalah daftar berdefinisi (definition list). Dengan daftar ini memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini ditulis dengan kode tag <dl> pada awal tulisan dan diakhiri dengan kode tag </dl>. Masing-masing terminologi dimulai dengan kode tag <dt> dan setiap definisi dimulai dengan kode tag <dd>. Contoh :

<dl>

<dt>the first term</dt>

<dd>its definition</dd>

<dt>the second term</dt>

<dd>its definition</dd>

<dt>the third term</dt>

<dd>its definition</dd>

</dl>

Kode tag </dt> dan </dd> adalah tambahan dan bisa tidak dipergunakan. Catatan, tiap daftar dapat disubkan antara satu daftar dengan daftar lainnya.Contoh :

<ol>

<li>the first list item</li>

<li>

the second list item

<ul>

<li>first nested item</li>

<li>second nested item</li>

</ul>

</li>

<li>the third list item</li>

</ol>

Anda bahkan dapat membuat paragraph dan headingnya dan lain-lainl.pada daftar yang lebih panjang.

  1. a. Berikut adalah beberapa program web browser

  1. 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.

  1. 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.

  1. 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.

  1. Chrome

Google Chrome adalah web browser yang dirancang untuk sistem Windows. Ia menawarkan desain minimal dan ‘teknologi canggih’, untuk membuat akses lebih cepat, aman, dan mudah.

  1. Safari

Safari adalah sebuahpenjelajah web buatanApple Inc. yang awalnya ditujukan khusus bagisistem operasi Mac OS. Khusus untuk pengguna Mac, Safari adalah pilihan yang sangat baik untuk sebuah web browser. Safari berkemampuan akses cepat dan kompatibilitas yang baik.

b) saya sering menggunakan web browser mozilla ferefox, karena web browser ini sangat popular di kalangan masyarakat. Selain itu, Firefox juga mempunyai level keamanan yang cukup tinggi.

Kelebihan:

    • Mendukung Flash, Java servlet dan applet

    • Banyak add ons

    • Update Mudah

    • Security OK

    • Cocok untuk download-dowload file besar karena sudah ada download manager sendiri

    • Mudah untuk mendownload file-file youtube

Bagian-bagian web browser mozilla firefox

      • Titte Bar : untuk menampilkan web browser yang sedang aktif.

      • Menu Bar : baris menu yang digunakan untuk operasional internet.

      • Address : tempat untuk mengetik halaman website yang akan di akses.

      • Menu Tool : berfungsi sebagai tombol klik cepat.


TAGS


Comment
-

Author

Follow Me

Search

Recent Post