Untuk mengatur agar tulisan kita miring pada css kita bisa menggunakan syntaks

1. PENGENALAN HTML Sebelum kita bahas lebih detail tentang CSS dan berbagai hal yang berkaitan dengan style tersebut, seperti kata pepatah tak kenal maka tak saying, maka ada baiknya jika kita sedikit belajar lagi tentang bahasa dasar dalam pembuatan dokumen web yang dapat dibuat menggunakan CSS yaitu HTML. HTML atau Hypertext Markup Language adalah sebuah protokol yang digunakan untuk membuat format suatu dokumen web yang mampu dibaca dalam browser dari berbagai platform komputer manapun. Sifat dari bahasa HTML ini adalah client script dimana dokumen tersebut dapat dibuka di dalam komputer stand alone yang tidak membutuhkan server untuk dapat menampilkannya di dalam browser. Dokumen HTML merupakan file yang pada umumnya ber-esktensi .htm atau .html dimana bahasa HTML tersebut tersusun atas tag atau syntax yang berformat .

Table of Contents Show

Apa itu font
Apa kegunaan properti font family?
Apa sintaks CSS yang benar untuk membuat semua elemen bold?
Bagaimana cara membuat teks tebal HTML?

Adapun aturan penulisan HTML tersebut adalah : a. Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku

(angle bracket) b. Tag HTML secara normal selalu berpasangan, contoh : dan

c. Tag HTML pertama dalam suatu pasangan adalah tag awal, dan tag

kedua merupakan tag akhir, contoh : akan diakhiri dengan .

d. Tag HTML tidak case sensitive dimana tag dengan huruf kecil sama dengan tag dengan huruf besar, contoh : sama dengan

e. Jika dalam suatu tag terdapat tag lagi, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Contoh : huruf tebal dan miring

f. Penulisan script HTML selalu diawali dengan dan diakhiri dengan

Secara teknis web browser akan melakukan penerjemahan dokumen

untuk ditampilkan dalam bentuk html jika dokumen tersebut terdapat diantara tag dan . Ada baiknya dalam penulisan HTML menggunakan huruf kecil untuk menghadapi HTML generasi berikutnya (rekomendasi dari W3C untuk HTML 4.0 dan XHTML) Dalam HTML struktur dibagi menjadi dua bagian yaitu : a. Bagian Kepala (head)

Bagian ini memuat informasi mengenai kepala dokumen b. Bagian Badan (body)

Bagian ini memuat informasi mengenai badan dokumen

Modul Desain Web Budi Kurniawan, M.Kom

Adapun struktur utama penulisan dalam HTML adalah :

Sedangkan pembuatan dokumen web menggunakan HTML pun sangat mudah karena anda dapat membuatnya menggunakan program editor standar Windows seperti Notepad dan menuliskan bahasa dan aturan HTML dan kemudian menyimpannya dalam ekstensi .htm atau .html. Untuk menggunakan program notepad dapat dipilih lewat menu Start Program Files Accessories Notepad. Kemudian ketikkan kode html anda seperti contoh berikut :

Gambar 1.1. Script html dalam program notepad Kemudian simpan dengan memilih menu File Save As, dan simpan dengan ekstensi .htm atau .html

Gambar 1.2. Menyimpan dokumen dengan ekstensi .html Setelah itu tampilan hasil dokumen html dari script yang telah dibuat tersebut dapat anda lihat menggunakan web browser seperti Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera dan sejenisnya.

Modul Desain Web Budi Kurniawan, M.Kom

Gambar 1.3. Dokumen html dilihat dalam web browser Internet Explorer

2. DOKUMEN HEAD

Dalam bagian head ini kita dapat meletakkan beberapa tag diantara dan yaitu : a. Judul Merupakan tag yang mendeklarasikan judul dari suatu dokumen HTML. Struktur tag untuk judul ini adalah :

...judul... b. URL Merupakan tag yang menyatakan URL asal suatu dokumen HTML. Struktur tag untuk url asal adalah :

c. Link Merupakan tag untuk menghubungankan antara suatu dokumen dengan dokumen lainnya dalam website yang dibuat. Struktur tag untuk menghubungkan dokumen adalah :

d. Meta Merupakan tag yang menyatakan suatu meta informasi dalam suatu dokumen HTML. Struktur tag untuk meta informasi adalah :

Modul Desain Web Budi Kurniawan, M.Kom

e. Index Merupakan tag yang menyatakan bahwa dokumen tersebut diperkenankan di indeks oleh server web. Struktur tag untuk isi index adalah :

f. Style Merupakan tag yang mendefinisikan style dari dokumen HTML. Struktur tag untuk mendefinisikan style adalah :

Contoh penggunaan dalam HTML :

Belajar HTML

... dokumen html ...

3. ATRIBUT BODY

Bagian body dalam HTML adalah bagian dimana dokumen web akan terlihat dalam browser. Dalam bagian ini dapat berisi atribut-atribut, aturan dan isi dari dokumen web yang akan ditampilkan. Penulisan atribut body ini biasanya dituliskan sesudah tag maupun sesudah tag dan sebelum tag . Dalam bagian body tersebut terdapat beberapa atribut yang bisa digunakan. Beberapa atribut tersebut adalah : a. Warna Latar Atribut tag untuk mendefinisikan warna latar untuk isi di dalam dokumen web dengan menuliskan bgcolor=nilai warna. Contoh :

b. Warna Teks Atribut tag untuk mendefinisikan warna teks untuk isi di dalam dokumen web dengan menuliskan text=nilai warna. Contoh :

Modul Desain Web Budi Kurniawan, M.Kom

c. Warna Link Jika anda memiliki sebuah tombol untuk menghubungkan (link / hyperlink) dalam dokumen web yang anda buat dengan dokumen web lainnya, anda dapat mendefinisikan warna dari tombol link tersebut ketika kita klik dengan menggunakan tag contoh :

Contoh penerapan dalam dokumen html :

Dokumen Body Teks berwarna lime tombol1 tombol2

Dalam browser script diatas akan terlihat dua tombol yaitu tombol1 dan tombol2 dan ketika kita klik tombol tersebut maka akan berubah menjadi warna hijau seperti terlihat pada gambar berikut :

Gambar 1.4. Tampilan script dalam browser

Modul Desain Web Budi Kurniawan, M.Kom

4. FORMAT TEKS

Dalam dokumen HTML, teks mempunyai bentuk dalam pemformatan dalam dokumen tersebut. Berikut ini adalah beberapa tag beserta fungsinya untuk melakukan pengaturan dan format tampilan teks dalam dokumen HTML. a. Font

Dalam setting format teks, tag font disini memiliki beberapa macam nilai, diantaranya adalah : face atau jenis font size atau ukuran font color atau warna font style atau style font Contoh penulisan syntaknya adalah : teks dokumen

b. Paragraf Digunakan untuk membuat teks dokumen yang berbentuk paragraf. Syntaknya adalah :

teks dalam paragraf

c. Perataan

Digunakan untuk mengatur perataan teks dalam sebuah paragraph dalam dokumen web yang dibuat, syntaknya adalah :

teks

Nilai dari perataan adalah :

Rata kanan = right Rata kiri = left Rata tengah = center Rata kanan-kiri = justify

d. Preformatted Text

Digunakan untuk mengembalikan format teks ke posisi awal atau posisi default pertama kali sebelum diformat. Syntaks penulisan preformatted teks adalah :

...

Modul Desain Web Budi Kurniawan, M.Kom

e. Line break Line break adalah pemenggalan atau pemutusan kalimat dengan menggunakan garis dengan perintah . Adapun property adalah align untuk perataan garis, size untuk ukuran dari garis, dan color untuk warna garis seperti pada contoh berikut :

Modul Desain Web Budi Kurniawan, M.Kom

format teks1format teks2

Modul Desain Web Budi Kurniawan, M.Kom

penggunaan daftar Daftar belanjaan : bawang putih bawang merah cabe Yang tidak dibeli : kecambah daging kuda daging semut

Gambar 1.6. Tampilan penggunaan daftar dalam browser

7. GAMBAR Gambar atau image dalam halaman Web memegang fungsi yang sangat penting. Selain fungsinya untuk informasi gambar, image juga akan menambahkan unsur artistik yang akan membuat halaman web nampak lebih hidup sehingga akan lebih menarik dari sisi tampilan web yang dibuat. Sintaks penulisannya adalah :

Modul Desain Web Budi Kurniawan, M.Kom

Sedangkan atribut untuk gambar tersebut berupa : src : letak atau alamat gambar alt : alternatif atau alternate gambar width : lebar gambar height : tinggi gambar Contoh:

8. HYPERLINK

Hyperlink atau link dalam HTML berfungsi untuk menghubungkan antara halaman web atau dokumen satu dengan lainnya agar saling terhubung. Syntak dasar penulisannya adalah :

Teks yang dijadikan link

Link dalam HTML dibagi menjadi dua yaitu : a. Link ke halaman lain

Syntak :

Hyperlink ke halaman Contoh :

Profil Perusahaan

b. Link ke servis internet lain HTTP :

Hyperlink ke http FTP :

Hyperlink ke ftp Mailto :

Modul Desain Web Budi Kurniawan, M.Kom

Email Saya

9. WARNA Warna dalam html dapat ditentukan dengan tiga cara, yaitu dengan memasukkan nilai warna dalam nama (common name), hexadecimal, dan nilai RGB.

a. Nilai warna Common name Anda dapat menentukan warna dengan menggunakan nilai warna common name, yaitu dengan memasukkan warna yang diinginkan dan biasanya menggunakan nilai warna dalam bahasa inggris seperti contoh : color:blue bgcolor:lime

b. Nilai warna Hexadecimal

Dengan nilai warna hexadecimal anda dapat menentukan warna dengan menggunakan nilai warna dalam bentuk hexadecimal yang sama dengan yang digunakan jika kita menggunakan html sebagai contoh : color:#00ffff bgcolor:#00ccff

c. Nilai warna RGB

Dengan menggunakan nilai warna RGB anda dapat menentukan warna dengan menggunakan nilai RGB dengan memasukkan nilai dari warna werah hijau dan biru (Red, Green, Blue) seperti contoh sebagai berikut : color:rgb(255,255,204)

10. T A B L E

Tabel merupakan elemen yang terdiri dari sel dan tersusun atas baris dan kolom. Digunakan untuk membuat bentuk

Apa itu font

font-weight adalah properti CSS yang dapat mengubah ketebalan sebuah teks.

Apa kegunaan properti font family?

Family font ini pada umumnya dibuat untuk memudahkan pengguna untuk mengira-ngira kepantasan dalam penulisan. Sederhananya begini, saat pengguna membuka perangkat lunak pengetikan Microsoft Word, bisa ditemukan bentuk lain dalam satu gaya font sekaligus semacam Bold, Italic, atau Bold-Italic.