Dasar Pemasangan Gambar Pada Laman HTML

Tutorial kali ini, admin akan menunjukkan cara menambahkan gambar ke halaman web anda. Admin akan memulai penjelasan tutorial ini dari dua jenis gambar utama pada halaman web anda, yakni gambar berformat jpg dan gif. Setelah itu, admin akan menunjukkan beberapa cara yang bisa anda lakukan untuk memasukkan dan menyesuaikan gambar anda secara khusus dengan bantuan pihak ketiga untuk mensejajarkan gambar dengan baris atau mensejajarkan gambar dengan gambar lainnya yang biasa disebut align.

Beberapa bagian yang berkaitan dengan gambar yang tidak dibahas di sini adalah :

• Membuat gambar bekerja sebagai link, (Nanti diarahkan ke linknya - contohnya anda bisa lihat di sini)
• Pemilihan warna untuk gambar, (Nanti diarahkan ke linknya)
• Pemasangan efek mouse pada gambar. (Nanti diarahkan ke linknya - contohnya anda bisa lihat di sini)

1. GIF dan JPG

Komputer menyimpan gambar dalam beberapa cara yang berbeda. Beberapa metode penyimpanan difokuskan pada mengompresi ukuran gambar sebanyak mungkin. Masalah utama dengan menggunakan gambar pada situs web adalah menggunakan banyak waktu untuk memuat gambar dibandingkan dengan menggunakan teks. Untuk mengurangi waktu download sebanyak mungkin, maka dua jenis gambar terbaik dalam mengompresi ukuran gambar di web adalah gambar berformat GIF dan JPG:

GIF	JPG
256 warna	Warna tak terbatas
Dapat dibuat transparan	Tidak dapat dibuat transparan
Format ini tidak baik untuk mengompresi photo	Sangat baik untuk mengompresi photo dan gambar lebih kompleks
Gambar ini sangat bagus untuk digunakan sebagai banner, sebagai tombol dan sebagai clipt art	Gambar ini tidak cocok untuk digunakan sebagai banner, sebagai tombol dan sebagai clipt art

Ini berarti bahwa:

• Banner, tombol, pemisah, clip art dan gambar sederhana lainnya paling bagus menggunakan gambar berformat GIF.
• Foto dan gambar lebih kompleks, sangat bagus menggunakan gambar berformat JPG.

Jika anda ingin menggunakan gambar berformat JPG atau GIF, maka anda harus membuat gambar anda terlebih dahulu menggunakan desain grafis, kemudian menyimpannya sebagai JPG atau GIF.


2. Menginsert gambar ke HTML

Tag yang digunakan untuk memasukkan gambar adalah <img>. Di bawah ini tentunya dan pasti anda melihat gambar yang disebut "Preloader.gif".

Kode HTML yang digunakan untuk menyisipkan gambar tersebut pada halaman blog ini adalah :

<Img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6WKJAx0JskY6zA1LnUIXMYrB8FxThGEK2awyxMcV8Xx7OyMhGO-a082Zz-dwiSJedY51VsMgQCykWSQQ8qpjoQ2H8UOdy4VrdGss_zE17O3VQP-QGXG9XStLyO5zeDeE6bFgFXsRWrSH/s1600/Preloader.gif">

Jika gambar disimpan dalam folder hostingan yang sama pada sebuah website, anda tidak perlu menuliskan nama domainnya (misalnya, website anda berdomain jibankontemporer.web.id), cukup dengan memasukkan nama gambarnya saja seperti:

<Img src = "Preloader.gif">

3. Mengubah resolusi gambar

Anda dapat mengubah resolusi gambar dengan menggunakan atribut width dan atribut height. Secara umum, tidak dianjurkan untuk mengurangi ukuran gambar menggunakan pengaturan ini, karena gambar akan ditransfer melalui internet dalam ukuran aslinya. Misalnya, gambarnya berukuran 3MB kemudian anda memperkecil resolusi gambar anda di tampilan web, maka tetap gambar yang dimuat adalah gambar yang berukuran 3MB, dan tentunya, hal ini akan memperlambat loading halaman web anda.

Jika anda memiliki gambar yang lebih besar dari ukuran yang anda inginkan pada halaman anda, maka anda harus mengurangi ukuran gambar anda melalui desain grafis, bukan memperkecil resolusi pada halaman web menggunakan atribut width dan atribut height. Sebaliknya, kadang-kadang menjadi solusi terbaik dengan cara memperbesar gambar menggunakan teknik ini dari gambar yang ukurannya kecil.

Di bawah ini adalah dua tampilan gambar yang serupa dengan pengaturan yang berbeda untuk lebar dan tinggi.

<img src="http://jibankontemporer.web.id/Preloader.gif" width="128" height="128"> 

__________________

<img src="http://jibankontemporer.web.id/Preloader.gif" width="320" height="320">

Jika anda tidak menggunakan atribut width dan atribut height, maka browser secara otomatis akan menggunakan ukuran resolusi asalnya. Namun, sebaiknya anda selalu menggunakan atribut width dan atribut height, walaupun pada dasarnya menggunakan ukuran asalnya. Alasannya adalah jika anda tidak menggunakan atribut width dan atribut height, maka browser tidak bisa memunculkan halaman sampai gambar dimuat seluruhnya. Akibatnya, pengunjung tidak bisa membaca teks di sekitar gambar sedangkan gambar itu sendiri adalah pemuatan, dan pada gilirannya akan memberikan kesan kepada para pengunjung kalau halaman yang dikunjunginya lambat loading. Hal ini juga slalu terjadi jika gambar diletakkan dalam tabel. Tabel juga tidak bisa ditampilkan sampai gambar tersebut dimuat seluruhnya.


4. Menambahkan border pada gambar

Anda dapat menambahkan batasan garis pada gambar dengan menggunakan atribut border yang ditunjukkan pada contoh di bawah ini:

<img src="http://jibankontemporer.web.id/Preloader.gif" border="5">

5. Menambahkan teks alternatif pada gambar

Anda juga bisa menambahkan teks alternatif pada gambar dengan menggunakan atribut alt yang ditunjukkan pada contoh di bawah ini :

<img src="http://jibankontemporer.web.id/Preloader.gif" alt="Gambar Sedang Loading">

Tujuan dari teks alternatif ini adalah ketika sebuah halaman belum berhasil memuat gambar, maka yang diperlihatkan adalah teks alternatif dari gambar tersebut, sehingga para pengunjung langsung melihat ide gambar yang akan ditampilkan dari gambar yang akan dimuat nantinya.

6. Menambahkaan spasi horizontal dan vertikal pada gambar

Anda juga dapat menambahkan spasi ke atas dan spasi ke bawah gambar dengan menggunakan atribut vSpace.  Dengan cara yang sama menambahkan spasi ke kiri dan spasi ke kanan gambar menggunakan atribut hSpace. Berikut adalah contoh dalam menggunakan atribut ini :

<Img src = "http://jibankontemporer.web.id/Preloader.gif" hSpace = "30" vSpace = "10">

Tujuan dari spasi ini adalah untuk menambahkan jarak antara gambar dengan yang ada di sekitarnya, kiri, kanan, atas, dan bawah. Baik itu jarak antara gambar dengan tulisan maupun jarak antara gambar yang satu dengan gambar yang lainnya.

<Img src = "http://jibankontemporer.web.id/gambar_lainnya.gif" hSpace = "30" vSpace = "10"><Img src = "http://jibankontemporer.web.id/Preloader.gif" hSpace = "30" vSpace = "10">

7.  Penjajaran gambar dengan teks atau gambar lainnya yang berada di sekitarnya

Pensejajaran ini menggunakan pihak ke tiga, yakni teks atau gambar lainnya untuk memposisikan di bagian mana gambar anda harus diletakkan dengan menggunakan atribut align. Anda bisa mempraktekkan satu per satu dari kode di bawah ini untuk memposisikan gambar anda :

<img src="http://jibankontemporer.web.id/Preloader.gif" align="texttop">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="top">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="middle">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="absmiddle">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="bottom">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="absbottom">

 <img src="http://jibankontemporer.web.id/Preloader.gif" align="baseline">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="left">

<img src="http://jibankontemporer.web.id/Preloader.gif" align="right">

Beberapa kode di atas, anda bisa mempraktekkan bagaimana posisi gambar tersebut jika berada dalam paragraf, berada di antara gambar lainnya, dan berada di dalam kalimat.

Beberapa dasar dalam pemasangan gambar di atas, sangat cocok bagi anda yang kreatif dengan gambar dan juga menyukai postingan yang rapi. Ada sedikit perbedaan dari yang lainnya, antara yang suka copas dan yang suka mengetik, itu bisa dilihat dari keapikan postingan yang disharingnya.

Dasar Penulisan List Pada Laman HTML

Bagi yang ingin membuat daftar bullet cukup dengan menambahkan tag <ul> dan </ul> di awal dan akhir daftar listnya. Daftar list yang bernomor atau berurut berdasarkan angka memiliki tag <ol>, dan bukan tag <ul>.

Untuk memisahkan daftar item tunggal menggunakan tag <li> dan </li>. Lebih lengkapnya anda bisa mempelajari daftar list bullet dan daftar list bernomor sebagai berikut :

1. Daftar List Berupa Bullet

Ada beberapa cara penulisan bullet yang bisa kita pilih :

• Disc
• Circle, dan
• Square

Lihat contoh penulisannya

<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Output :

• text
• text
• text

Kode bullet di atas bisa kita rubah dengan menambahkan kode berikut kedalam tag <ul> :

1. <ul type="disc">
2. <ul type="circle">
3. <ul type="square">

Sehingga hasilnya seperti ini :

<ul type="disc">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

<ul type="circle">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

<ul type="square">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Output :

• text
• text
• text

• text
• text
• text

• text
• text
• text

2. Daftar List Berupa Angka dan Abjad

Kode tag yang digunakan ini menunjukkan bagaimana membuat berbagai jenis daftar list bernomor dan berabjad.

Ada beberapa pilihan list penomoran yang bisa kita pilih :

• Nomor
• Huruf Kapital
• Huruf Kecil
• Angka Romawi
• Angka Romawi Kecil

Selain pilihan ini, anda juga dapat menentukan di mana urutan daftar harus dimulai. Awal nilai sebagai default untuk daftar nomor adalah nomor satu (atau huruf A). Lebih lengkapnya perhatikan kode html yang ada dalam tabel berikut dan bagaimana output yang dihasilkan.

Kode HTML	Output
<ol> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol start="5"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="A"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="a"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="I"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="i"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="1"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="I" start="7"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text

Catatan :

Untuk menghasilkan output yang berbeda-beda, anda perlu menambahkan kode tertentu ke dalam tag <ol> seperti contoh di atas.

Kini anda bisa memanfaatkan macam-macam kode list di atas untuk lebih mempercantik postingan anda.

Dasar Penulisan Teks atau Font Pada Laman HTML

Untuk memasukkan teks pada halaman anda, yang harus anda lakukan adalah hanya memasukkan teks. Jika anda tidak menentukan atribut untuk teks, maka teks yang akan ditampilkan menggunakan ukuran default font, color, dan size dari browser pengunjung.

Browser hanya dapat menampilkan font yang tersedia pada PC pengunjung. Oleh karena itu, anda terbatas untuk menggunakan font yang tersedia di hampir semua komputer. Jika anda menginginkan untuk menggunakan font mewah, maka anda harus menggunakan desain grafis untuk membuat gambar dengan teks. Ini akan memastikan bahwa pengunjung akan melihat hal yang sama di komputernya, walaupun pengunjung tersebut tidak memiliki font mewah di komputernya seperti yang anda gunakan di komputer anda.

Dikarenakan gambar memakan banyak ruang untuk penulisan teks biasa, dan waktu yang digunakan juga untuk mengupload tergolong lama berdasarkan jaringan yang anda miliki, maka anda harus berhati-hati jika ingin menggunakan opsi ini. Sedikit kesalahan mengakibatkan tampilan halaman anda tidak rapi dan teks gambarnya loncat sana, loncat sini tidak beraturan.

Di samping desain grafis yang menggunakan gambar sebagai teks, ada alternatif lain bagaimana untuk menyesuaikan pengaturan font, baik pada teks normal, menyesuaikan warna dan ukuran, maupun pada teks yang bekerja sebagai link.

1. Menggunakan Tag <basefont>

Untuk menentukan font keseluruhan untuk halaman anda, cukup dengan menambahkan tag <basefont> di bagian awal <body> .

Contoh : Teks halaman yang terlihat di browser.

Selamat Datang di halaman saya !
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a.

HTML: Kode untuk menghasilkan contoh di atas.

<html>
<head>
 <title> halaman saya </ title>
</ head>
<body>
 <basefont face = "arial, verdana, courier" size = "4" color = "green">
Selamat Datang di halaman saya ! <br>
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a. <br>
</body>
</html>

Bagian color akan memilih warna yang diinginkan untuk teks anda, bagian face akan memilih jenis font yang diinginkan, dan bagian size akan memilih ukuran font antara 1 (terkecil) dan 7 (terbesar) yang diinginkan untuk teks anda.

Catatan :

Jika Anda memasukkan daftar font seperti contoh di atas, maka browser akan menggunakan font pertama dalam daftar yang tersedia di komputer pengunjung.

2. Menggunakan Tag <font>

Jika keselurahan teks untuk halaman anda telah ditentukan jenis dan ukuran fontnya, maka di bagian-bagian teks tertentu anda juga bisa menentukan outputnya dengan menggunakan tag <font>.

Contoh : Output teks terlihat berbeda dari yang umum

Selamat Datang di halaman saya !
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a.
Hanya teks bagian ini yang terlihat berbeda.
Terima kasih telah berkunjung di halaman saya !

HTML : Kode untuk menghasilkan contoh di atas

<html>
<head>
<title> halaman saya </ title>
</head>
<body>
<basefont face = "arial, verdana, courier" size = "4" color = "green">
Selamat Datang di halaman saya ! <br>
Semua teks di halaman saya terlihat sama, karena halaman saya hanya ditentukan basefont a. <br>
<font color="red" face="courier" size="4">
Hanya teks bagian ini yang terlihat berbeda.
</font>
<br>
Terima kasih telah berkunjung di halaman saya ! <br>
</body>
</html>

3. Menggunakan Tag <a> dan </a> untuk menghasilkan link

Tag yang digunakan untuk menghasilkan link adalah <a> dan </a>. Tag <a> akan memberitahu di mana link harus memulai dan tag </a> menunjukkan di mana link harus berakhir. Antara kedua tag tersebut akan bekerja sebagai link. Target link yang ditambahkan ke tag <a> menggunakan href = "http://www.alamat_link_anda.com".

Contoh di bawah ini menunjukkan bagaimana membuat teks bekerja sebagai link ke wall FB saya.

Klik <a href="https://www.facebook.com/JibanKontemporer/"> di sini </a> untuk menuju ke wall FB saya.

Output di browser anda akan terlihat

Klik di sini untuk menuju ke wall FB saya.

• Anda hanya  menentukan target di <a href=" ">.
• Kemudian tambahkan teks yang harus bekerja sebagai link.
• Akhirnya menambahkan tag </a> untuk menunjukkan di mana link berakhir.

4. Menggunakan format teks

Macam-macam tag yang bisa digunakan untuk format teks adalah sebagai berikut :

1. <b>text</b> : Menulis teks dalam huruf tebal 
2. <i>text</i> : Menulis teks dalam huruf miring 
3. <u>text</u> : Menulis teks bergaris bawah 
4. _teks : Menurunkan teks dan membuatnya lebih kecil 
5. ^teks : Mengangkat teks dan membuatnya lebih kecil 
6. <blink>text</blink> : Menjadikan teks berkedip
7. <strike>teks</strike> : Mencoret teks 
8. <tt>text</tt> : Menulis teks klasik 
9. <pre>text</pre> : Menulis teks persis seperti itu, termasuk spasi. 
10. <em>text</em> : Biasanya membuat teks miring
11. <strong>teks</strong> : Biasanya membuat teks tebal

Output :

1. text : Menulis teks dalam huruf tebal
2. text : Menulis teks dalam huruf miring
3. text : Menulis teks bergaris bawah
4. ^{teks : Mengangkat teks dan membuatnya lebih kecil}
5. _{teks : Menurunkan teks dan membuatnya lebih kecil}
6. text : Membuat teks berkedip
7. teks : Mencoret teks
8. text : Menulis teks klasik
9. text : Menulis teks persis seperti itu, termasuk spasi.
10. text : Biasanya membuat miring teks
11. teks : Biasanya membuat teks tebal

Catatan: 

Tag <blink> hanya didukung oleh browser Netscape, dan anda tidak perlu menggunakannya.


5. Menggunakan macam-macam ukuran font

Macam-macam tag yang bisa digunakan untuk mengubah ukuran font adalah sebagai berikut :

1. <big>text</big> : Memperbesar ukuran teks
2. <small>text</small> : Memperkecil ukuran teks
3. <h1>text</h1> : Menulis teks dalam pos terbesar
4. <h6>text</h6> : Menulis teks dalam pos terkecil
5. <font size = "1"> text </font> : Menulis teks dengan fontsize terkecil. (8 pt)
6. <font size = "7"> text </font> : Menulis teks dengan fontsize terbesar (36 pt)

Output:

1. text : Memperbesar ukuran teks
2. text : Memperkecil ukuran teks

3. text : Menulis teks dalam pos terbesar

4. text : Menulis teks dalam pos terkecil

5. text : Menulis teks dengan fontsize terkecil. (8 pt)
6. text : Menulis teks dengan fontsize terbesar (36 pt)

Tag <small> dan <big> adalah tag khusus yang bisa digunakan berulang-ulang. Jika anda ingin meningkatkan ukuran font dengan dua kali lipat, maka anda bisa menuliskannnya seperti ini : 

<big><big>Memperbesar ukuran teks  dengan tag <big> dua kali</big></big>

Output

Memperbesar ukuran teks dengan tag <big> dua kali

Catatan :
Tag <font> memungkinkan anda menentukan besar ukuran teks dalam HTML biasa.


6. Menentukan tata letak teks

Macam-macam tag yang bisa digunakan untuk mengontrol tata letak teks adalah sebagai berikut :

1. <p>text</p> : Menambahkan spasi baris setelah teks. (2 baris baru).
2. <p align = "left">text</p> : Memposisikan teks ke sebelah kiri halaman.
3. <p align = "center">text</p> : Memposisikan teks terletak di tengah-tengah baris.
4. <p align = "right">teks</p> : Memposisikan teks ke sebelah kanan halaman.
5. text <br> : Menambahkan baris baru.
6. <nobr>text</nobr> : Mematikan baris baru otomatis, walaupun teksnya lebih lebar dari jendela.
7. text <wbr> : Memungkinkan browser untuk memasukkan baris baru walaupun teksnya berada dalam tag <nobr>.
8. <center>text</center> : Memposisikan teks di tengah-tengah baris.
9. <div align = "center">text</div> : Memposisikan teks di tengah-tengah baris.
10. <div align = "left">text</div> : Memposisikan teks ke sebelah kiri halaman.
11. <div align = "right">teks</div> : Memposisikan teks ke sebelah kanan halaman.

Keenam dasar HTML ini, dapat anda gunakan untuk mempercantik penulisan teks pada halaman statis anda, baik itu di blog maupun di website anda.

Bagian Tubuh Dari Struktur HTML

Bagian tubuh dari sebuah halaman web mencakup semua hal-hal yang ditampilkan secara langsung dari halaman yang dihasilkan. Bagian ini terletak di antara <body> dan </body>

Bagian tubuh dari struktur HTML adalah semua hal dari apa yang anda lihat pada halaman yang dihasilkan, seperti header, background, sidebar, postingan, footer dan sebagainya.

Jika halaman yang dihasilkan dilihat dari monitor komputer, maka semua yang memenuhi monitor anda itulah bagian-bagian dari body atau tubuh.

Jika anda memiliki website, anda bisa melihat sript apa saja yang dihasilkan dari hal-hal yang ditampilkan pada sebuah halaman web.

Bagian Kepala Dari Struktur HTML

Bagian kepala dari sebuah halaman web mencakup semua hal-hal yang tidak ditampilkan secara langsung pada halaman yang dihasilkan. Bagian ini terletak di antara <head> dan </head>.

Di antara tag <head> dan </head> terdapat <title> dan </title> yang merupakan tag pembungkus judul halaman web. Judul yang ditampilkan dapat dilihat di bagian atas jendela browser anda ketika sedang membuka halaman.

Hal lain yang juga terdapat di bagian <head> dan </head> adalah metatag. Metatag digunakan untuk meningkatkan peringkat atau rank di mesin pencari seperti Google, MSN, dan Yahoo, dan inilah salah satu rahasia dari para master SEO untuk menjadikan websitenya ranking nomor satu di mesin pencari.Di antara tag  <head> dan </head> juga sering kali ditemukan banyak mengandung javascript yang merupakan bahasa pemrograman untuk halaman HTML yang lebih kompleks lagi.

Selain dari itu, juga berisikan kode untuk Cascading Style Sheets (CSS). CSS merupakan teknik terbaru dalam mengoptimalkan tata letak dari suatu situs utama.

Jika anda memiliki website, anda bisa memperhatikan apa-apa saja fungsi script yang terletak di antara tag  <head> dan </head> pada template website anda.

Struktur Halaman HTML

Semua halaman tersusun oleh dua bagian, yakni kepala dan tubuh. Kepala dikodekan dengan head dan tubuh dikodekan dengan body. Semua isi halaman akan dibaca sebagai html jika diletakkan di antara tag <html> dan tag </htmL>, sehingga struktur sebuah halaman html adalah seperti berikut :

<html>
  <head>
    <!-- Bagian ini adalah untuk judul dan informasi teknis halaman -->
  </.head>
  <body>
     <!-- Bagian ini adalah untuk semua yang ingin anda tampilkan pada halaman -->
  </body>
</html>

Di bagian kepala, yakni <head> ... </head> selalu digunakan untuk tulisan dan tag yang tidak ditunjukkan secara langsung, seperti judul yang hanya ditampilkan di bagian tab browser, favicon, deskripsi, author, keywords, style, css dan js. Sementara di bagian body, yakni <body> ... </body> selalu digunakan untuk tulisan dan tag yang ditunjukkan secara langsung, seperti header, menu bar, widget, artikel, dan footer.

Jika anda pernah melihat sebuah halaman web dan anda bisa menyimpan halaman web itu, cobalah untuk membuka file tersebut dengan menggunakan editor notepad, di situ anda akan melihat susunan dan struktur dari halaman web tersebut, dan anda juga bisa memperhatikan tag dan script apa saja yang berada di antara tag head dan body.

Mengenal Tag HTML

Pada dasarnya komputer anda hanya mengenal dan memandang 'A' sebagai 'A', entah itu bold, italic, big ataupun small. Agar browser bisa membacanya maka diperlukan markup di depan A, dan markup itulah yang disebut Tag.

Semua Tag HTML tentunya diapit oleh dua lambang, yakni '<' dan '>'. Jika '<' dan '>' mengapit sebuah huruf 'b' sehingga tulisannya tampak seperti ini <b>, maka inilah yang disebut tag pembuka. Setiap ada tag pembuka maka harus ditutup dengan tag penutup, misalnya </b>. Jika antara tag pembuka dan tag penutup diletakkan sebuah kata 'tebal' sehingga tulisannya seperti ini <b>tebal</b>, maka browser anda akan membacanya tebal. Hasilnya, tulisan kelihatan tebal.

Setiap kode yang diapit '<' dan '>' maka apa pun setelah kode itu akan dibacanya berdasarkan kode yang diberikan, dan ketika kode tersebut berakhir diapit oleh '</' dan '>', maka ini menunjukkan bahwa browser harus berhenti menulis teks berdasarkan kode yang diberikan.

Misalnya tag <i>, apa pun yang ada di depan tag <i> akan ditampilkan miring, dan ketika diakhiri dengan tag </i>, maka semua yang ditampilkan miring berakhir di tag tersebut.

Mengenal Bahasa Program HTML

Halaman web adalah sesuatu yang ditampilkan dari bahasa program HTML dengan scripting penulisan yang cukup sederhana. HTML adalah singkatan dari Hyper Text Markup Language.

• Hyper Text merupakan sepotong teks yang bekerja sebagai link.
• Markup Language merupakan tata cara penulisan informasi dalam sebuah dokumen. 

Pada dasarnya dokumen HTML adalah file teks biasa yang berisi teks dan tidak ada yang lain, dan ketika browser membuka file HTML tersebut, maka browser akan mencari kode HTML dalam teks dan menggunakannya untuk mengubah tata letak, menyisipkan gambar, atau membuat link ke halaman lain.

Dokumen HTML hanyalah berupa file teks biasa, sehingga untuk menuliskannya pun hanya menggunakan editor teks biasa, seperti notepad. Ada editor pilihan yang kemungkinan sudah populer di pendengaran anda adalah dengan menggunakan editor HTML khusus yang disebut editor WYSIWYG. Menggunakan editor ini sama seperti ketika anda mengetik naskah di dokumen word. Apa yang anda lihat maka itu juga yang akan ditampilkan.

 

Beberapa editor HTML yang juga populer, seperti FrontPage atau Dreamweaver akan sangat membantu anda untuk membuat halaman lebih dan kurangnya seperti ketika anda menulis dokumen di Word atau teks editor apapun yang anda gunakan.

Buatlah halaman web anda, karena setelahnya itu ada beberapa alasan yang sangat baik yang anda temukan untungnya membuat halaman sendiri dengan tangan anda sendiri.