Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML | Web Edukasi - Sanabila.com

Home

Daftar Isi

Instagram

Google+

Facebook

Twitter

Contact

Pasang Iklan

Refresh
Loading...

Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML

Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML - Pada artikel ini, kita akan belajar mengenai tata cara penulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML. Penulisan HTML sangat mirip dengan penulisan pengolah kata pada umumnya. Anda bisa membuat tulisan bold and italicized, Larger dan Smaller.

Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML
Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML

Bagaimana tulisan diatas bisa berbeda-beda? itu karena kode HTML yang dimasukkan kedalam tulisan itu berbeda-beda. Lalu bagaimana Cara Membuatnya? Itu mudah, penulisan HTMLnya adalah seperti ini :
  • Anda bisa membuat tulisan tebal dengan <b>bold</b>
  • Tulisan miring dengan <i>italicized</i>,
  • Memperbesar tulisan dengan <font size=+2>Larger</font>, dan
  • Memperkecil tulisan <font size=-2>Smaller</font>.
Kuncinya adalah pada tanda kurung sudut ini "<" dan ini ">" Apa yang bisa kita lakukan hanya dengan dua buah kurung sudut seperti itu? Tentunya ini pertanyaan yang cukup menarik. Ketika Anda memasukkan sesuatu kedalam kurung sudut tersebut, maka ini sering disebut dengan Tag.

Contohnya:
  • <b> Ini adalah tag pembuka dalam Bold dan </b> ini adalah tag penutup Bold tersebut. 
  • (/) dikenal sebagai tag penutup. Banyak tag membuka memerlukan tag penutup setelahnya. Tags tersebut dapat membuat seluruh struktur dari sebuah dokumen HTML.

Misalkan Contoh Penulisan Tag Bold :
<b>Teks ini Bertipe Tebal (Bold)</b>

Contoh Lain : Lihatlah dan cermatilah dua contoh di bawah. Apa yang terjadi? Anda bisa simpulkan sendiri.

#1 - Randy Melompat dari atas genteng.
#1 - Randy Melompat <b>dari atas</b> genteng.
#2 - Randy Melompat dari atas genteng.
#2 - Randy Melompat <b>dari atas<b> genteng.

Anda harus menyadari bahwa kode slash (/) dalam contoh no dua hilang di tag setelah kata DARI ATAS, yang menyebabkan browser web untuk menafsirkan kode akan memembuat kata sesudahnya menadi Bold! Ini adalah kesalahan umum, jadi Berhati-hatilah!

Note: Tags dalam kode HTML TIDAK case sensitive. Contohnya... <title> and <TitLE> kedua Tag tersebut memiliki maksud yang sama.



Struktur Dokumen Pada HTML...

Dalam penulisan kode HTML, Anda jangan lupa untuk save data Anda dengan extension .htm, .html, or .shtml. Strukur HTML memiliki dua bagian, yaitu head dan body. Sama seperti manusia, bagian terpentingnya juga kepala (Head) dan tubuh (body). Bagaimana dengan kaki dan tangan? manusia masih tetap hidup tanpa kaki dan tangan, sama seperti HTML masih bisa berfungsi. Namun, Alangkah baik dan sempurnanya kita harus memiliki dan menambahkan kedua objek tersebut kedalam HTML agar website kita menjadi lebih menarik.

Contoh Struktur HTML Dasar
<html> <head><title>JUDUL WEBSITE</title></head> <body>OBJEK DALAM BODY</body> </html>

Namun alangkah baiknya penulisan HTML diberi spasi agar kita lebih mudah melihatnya, seperti ini :
<html>
<head>
<title>JUDUL WEBSITE</title>
</head>
<body> OBJEK DALAM BODY </body>
</html>

Adapun objek yang ditempatkan diantara Tag TITLE akan menjadi Judul suatu website, Anda bisa melihat judul tersebut di title bar browser Anda [Note: Anda TIDAK bisa memasukkan Tag lain didalam Tag TITLE (Contoh: Kode Bold dalam tittle tidak akan berfungsi: <title><b>title goes here</b></title>.]

Adapun Objek yang ditempatkan diantara Tag BODY akan menjadi wilayah utama dari jendela dokumen, dan itu adalah bagian terbesar dari dokumen HTML Anda.

PRAKTEK MEMBUAT HALAMAN HTML

Coba Anda tulis kode dibawah ini dengan software text Anda, misalkan Notepad.
<html>
<head>
<title>My Home Page</title>
</head>
<body> </body>
</html>

Simpan kode tersebut dengan "Home.htm". Dan coba buka file tersebut dengan browser Anda. Lihat apa yang terjadi...





Share on Google Plus
Written by: Sanabila. com
Sanabila, Updated at: 1/28/2015