Latihan HTML Selamat Belajar HTML

Dasar-dasar HTML Mengenal HTML HTML (HyperTex Markup Language) adalah standar informasi yang berbasis hypertext yang dipakai di web. Berdasarkan standar inilah Web Browser bisa memahami isi suatu dokumen yang berasal dari web server. HTML bekerja dengan menggunakan HTTP (HyperText Transfer Protocol), yaitu protokol komunikasi yang memungkinkan web server berkomunikasi dengan web browser. Kode HTML berupa sebuah berkas teks dengan akhiran berupa .HTML, .html, .HTM, atau .htm.

Contoh kode HTML: <TITLE>Latihan HTML Selamat Belajar HTML Penjelasan dari kode: ● Pasangan tag dan menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkannya sebagai dokumen

●

●

●

Bagian yang terdapat dalam dan umumnya terbagi atas: ✔ kepala ✔ badan Bagian kepala ditandai dengan pasangan tag dan , sedangkan bagian badan ditandai dengan tag dan . Pada bagian kepala, Anda bisa menentukan judul dokumen HTML. Judul ini ditulis dengan pasangan tag <TITLE> dan . Pada contoh di depan, judul dokumen HTML berupa Latihan HTML. Judul ini diletakkan di bagian atas jendela browser.

Cara Menuliskan Tag Setiap tag memiliki nama. Nama tag ditulis di dalam tanda < dan >. Penulisan nama tag dan tanda < tanpa spasi. Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain penulisan dianggap sama. Tetapi umunya nama tag ditulid dengan huruf kecil saja atau huruf kapital saja. Atribut dalam Tag Beberapa tag mengandung atribut di dalamnya. Contoh:

Pada contoh ini, P adalah tag, sedangkan ALIGN adalah atribut. Pada umumnya atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai untuk atribut ALIGN. Seperti halnya nama tag, nama ALIGN juga tidak membedakan huruf kecil dan kapital. Tag
Salah satu tag yang biasa digunakan dalam kode HTML yaitu
. Sebagai contoh: <TITLE>Tag BR

Selamat Belajar HTML
Semoga Sukses! Fungsi tag
adalah untuk membuat baris baru atau berpindah baris. Dengan demikian, setelah browser menampilkan tulisan Selamat Belajar HTML Maka browser akan menempatkan berikutnya pada baris baru.

tulisan

Menggunakan Tag
Tag
berguna untuk membuat paragraf. Contoh: <TITLE>Contoh Paragraf Musik Jaz
Musik Jazz banyak disukai oleh
Mereka yang menyukai keindahan dan
Kedinamisan bunyi.

Menggunakan Tag Judul HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa
…
,
…
,
…
,
…
,
…
,
…
. Contoh: <TITLE>Contoh Judul
Musik Jazz
Musik Jazz banyak disukai oleh
Mereka yang menyukai keindahan dan
Kedinamisan bunyi.

Contoh lain: Tag H1-H6
Tag H1

Tag H1

Tag H1

Tag H1

Tag H1

Tag H1

Sebagaimana telah dijelaskan di depan, kebanyakan tag memiliki atribut. Begitu juga halnya tag judul seperti
. Salah satu atribut yang bisa digunakan adalah ALIGN, yang berfungsi untuk mengatur penempatan teks di dalam baris. Salah satu nilai yang dapat diberikan ke ALIGN adalah CENTER, yang berarti judul ditempatkan di tengah-tengah layar pada baris yang bersangkutan. Contoh:
Musik Jazz
Selain CENTER, nilai lain yang dapat diisikan ke ALIGN yaitu LEFT, RIGHT, dan JUSTIFY. LEFT merupakan nilai bawaan untuk ALIGN, yang mengatur teks rata kiri terhadap halaman.

RIGHT mengatur teks rata kanan terhadap halaman. JUSTIFY mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Membuat Garis Horizontal Untuk mempercantik tampilan, seringkali pembuat dokumen web menambahkan garis horizontal. Garis ini dapat dibuat dengan mudah dengan menyertakan tag
. Contoh: <TITLE>Tag HR

Grup Jazz:

Rippingtons
Spyro Gyra
Fourplay
Casiopea

Menggunakan Tag Untuk menengahkan suatu teks, bisa digunakan tag . Tentu saja untuk mengakhiri penengahan teks (agar teks berikutnya tidak ditengahkan), perlu disertakan <TITLE>Tag CENTER
Group Jazz Terkenal :
Rippingtons
Spyro Gyra
Fourplay

***** Perhatikan bahwa simbol ***** tidak ditengahkan karena sebelum teks ini terdapat tag pengakhir penengah teks Memformat Teks HTML menyediakan sejumlah tag yang berguna untuk mengatur bentuk teks secara fisik. Lihat tabel berikut:

Daftar tag untuk mengatur teks secara fisik Pemakaian Tag Teks Teks

Keterangan Teks ditampilkan dalam keadaan ditebalkan Teks ditampilkan dengan ukuran lebih besar daripada ukuran normal

Teks

Teks ditampilkan dalam keadaan miring

Teks

Teks ditampilkan dengan ukuran lebih kecil daripada ukuran normal

Teks

Teks ditampilkan sebagai subskrip

Teks

Teks ditampilkan sebagai superskrip

Teks

Teks ditampilkan dalam bentuk seperti ketikan mesin ketik Teks ditampilkan dengan diberi garis bawah.

Teks

Contoh: <TITLE>Format Teks Normal
Tebal
Big
Miring
Digarisbawahi
Miring dan tebal
Xn2

Teks Praformat Contoh: <TITLE>Praformat
Menu:

Nasi Goreng Spesial ........... 15.000 Nasi Rawon .................... 8.500 Nasi Gudeg Lengkap ............ 8.500 Nasi Langgi ................... 8.500 Nasi Soto Madura .............. 5.000
Selamat menikmati.

Pengaturan Font Tag ... berguna untuk mengatur jenis, ukuran, maupun warna font. * Jenis Font Untuk menentukan jenis font, bisa digunakan atribut FACE. Contoh: ABCD Pada contoh di atas, tulisan ABCD akan ditampilkan dengan menggunakan font Arial. Contoh:

<TITLE>Jenis Font Normal: 012345ABCD
Arial: 012345ABCD
Lucida: 012345ABCD
Courier: 012345ABCD
Verdana: 012345ABCD

* Ukuran Font Ukuran font ditentukan oleh atribut SIZE. Contoh: SIZE 1: 012345ABCD
Digunakan untuk mengatur teks dg ukuran font sebesar 1. Ukuran font normal adalah 3. Ukuran font juga dapat memakai tanda + atau – di depan angka pada atribut SIZE. Contoh: SIZE +1: 012345ABCD
menampilkan teks dengan ukuran font lebih besar 1 daripada ukuran normal.

Contoh: <TITLE>Ukuran Font Normal: 012345ABCD
SIZE 1: 012345ABCD
SIZE 2: 012345ABCD
SIZE 3: 012345ABCD
SIZE 4: 012345ABCD
SIZE 5: 012345ABCD

SIZE 6: 012345ABCD
SIZE 7: 012345ABCD
SIZE +1: 012345ABCD
SIZE +2: 012345ABCD
SIZE -1: 012345ABCD
* Warna Font Atribut pada tag yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna latar belakang teks.

Adapun kalau warna latar belakang teks yang akan diatur, pengaturan perlu dilakukan melalui tag dengan properti berupa BGCOLOR. Perlu juga diketahui, tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen. Nilai yang diberikan pada atribut COLOR, BGCOLOR, dan TEXT tersebut berupa: 1. nama warna, atau 2. nilai RGB (Red-Green-Blue) yang dinyatakan dengan “#RRGGBB”.

Daftar nama warna pada atribut penentu warna Nama Warna aqua

RGB 00FFFF

black

000000

Nama Warna RGB navy 000080 olive 808000

blue

0000FF

purple

800080

fuchsia

FF00FF

red

FF0000

gray

808080

silver

C0C0C0

green

008000

teal

008080

lime

00FF00

yellow

FFFF00

maroon

800000

white

FFFFFF

Pada format '#RRGGBB', masing-masing RR, GG, dan BB berupa dua buah digit heksadesimal (berupa angka 0 sampai dengan 9 atau A hingga F). RR menyatakan komponen warna merah, GG menyatakan komponen warna hijau, dan BB menyatakan komponen warna biru. Nilai 00 menyatakan bahwa komponen bersangkutan tidak ada. Sebagai contoh, #0000FF menyatakan warna biru. Contoh: <TITLE>Warna – Bagian 1 Normal
aqua
black

blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
read
silver
teal
yellow

Contoh berikut menunjukkan penggunaan BGCOLOR dan TEXT pada tag BODY.

atribut

<TITLE>Warna - Bagian 2 Normal
Warna Biru
Warna Hijau
Warna Merah
Warna Biru
Warna Kuning
Hasilnya berupa tampilan dengan latar belakang hitam (BGCOLOR = “black”) dan teks yang tidak diatur melalui

Entitas Karakter dan Numerik Misalnya anda ingin menuliskan tulisan:
Tetapi tidak dimaksudkan untuk menampilkan garis maka Anda perlu melakukan penulisan secara khusus. Berhubung tanda < dan > mempunyai makna khusus bagi browser, Anda hanya bisa menampilkan tanda < dan > secara khusus pula. HTML menyediakan sejumlah simbol yang berguna untuk menampilkan karakter-karakter khusus yang menyatakan suatu entitas karakter seperti A umlaut (Ä) ataupun numerik seperti ¼, sebagaimana tabel berikut:

Simbol Ä

HTML Ä

Ë Ï Ü ß © ® ™ Spasi & » « < > x ÷

Ë Ï Ü ß © ® ™ & » « < > × &devide;

Simbol ä

HTML ä

ë ï ü

ë ï ü

½ ¾ ¼

½ ¾ ¼

<TITLE>Penulisan Simbol Khusus
Kamus Jerman - Indonesia
Tschüß = Sampai jumla
Fräulein = Nona
Ich möchte ... = Saya ingin ...

Garis di atas diperoleh dengan menggunakan

kode

Daftar Item * Tag
Digunakan untuk menampilkan data dalam bentuk daftar (list) yang tidak diberi nomor. Contoh: <TITLE>Contoh Pemakaian Tag UL
Group Jazz:

Fourplay
Rippingtons
Spyro Gyra
Shakatak

*****

Supaya setiap dalam daftar diberi tanda bulatan (disebut bullet) bisa ditambahkan tag
di depan masingmasing item. Contoh: <TITLE>Contoh pemakaian tag UL
Group Jazz:

Fourplay

Rippingtons

Spyro Gyra

Shakatak

*****

* Tag
Kadangkala daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag
, pemberian nomor dapat diotomatiskan tanpa harus menuliskan nomor secara eksplisit. Contoh: <TITLE>Contoh pemakaian Tag OL
Group Jazz:

Fourplay

Rippingtons

Spyro Gyra

Shakatak

*****

Latihan HTML Selamat Belajar HTML

Recommend Documents

…

…

…

…

…

…

Musik Jazz

Tag H1

Tag H1

Tag H1

Tag H1

Tag H1

Tag H1

. Salah satu atribut yang bisa digunakan adalah ALIGN, yang berfungsi untuk mengatur penempatan teks di dalam baris. Salah satu nilai yang dapat diberikan ke ALIGN adalah CENTER, yang berarti judul ditempatkan di tengah-tengah layar pada baris yang bersangkutan. Contoh:

Musik Jazz

Grup Jazz:

Group Jazz Terkenal :

Menu:

Kamus Jerman - Indonesia

Group Jazz:

Group Jazz:

Group Jazz: