HTML

Tutorial HTML
HTML adalah singkatan dari Hyper Text Markup Language , yang

merupakan bahasa yang paling banyak digunakan di Web untuk
mengembangkan halaman web. HTML dibuat oleh Berners-Lee
pada akhir tahun 1991 tetapi "HTML 2.0" adalah spesifikasi HTML
standar pertama yang diterbitkan pada tahun 1995. HTML 4.01
adalah versi utama HTML dan diterbitkan pada akhir tahun 1999.
Meskipun versi HTML 4.01 digunakan secara luas namun saat ini
kami memiliki versi HTML-5 yang merupakan ekstensi dari HTML
4.01, dan versi ini diterbitkan pada tahun 2012.
Mengapa Belajar HTML?
Awalnya, HTML dikembangkan dengan tujuan untuk
mendefinisikan struktur dokumen seperti Heading, paragraf, daftar,
dan sebagainya untuk memfasilitasi pertukaran informasi ilmiah
antar peneliti. Sekarang, HTML banyak digunakan untuk
memformat halaman web dengan bantuan berbagai tag yang
tersedia dalam bahasa HTML.
HTML adalah suatu KEHARUSAN bagi pelajar dan pekerja
profesional untuk menjadi Insinyur Perangkat Lunak yang hebat
khususnya ketika mereka bekerja di Domain Pengembangan
Web. Saya akan mencantumkan beberapa keuntungan utama
belajar HTML:
•Buat situs Web - Anda dapat membuat situs web atau
menyesuaikan template web yang ada jika Anda memahami
HTML dengan baik.
•Menjadi seorang desainer web - Jika Anda ingin memulai karir
sebagai desainer web profesional, mendesain HTML dan CSS
adalah keterampilan yang harus dimiliki.
•Memahami web - Jika Anda ingin mengoptimalkan situs web
Anda, untuk meningkatkan kecepatan dan kinerjanya, ada
baiknya mengetahui HTML untuk mendapatkan hasil terbaik.
•Pelajari bahasa lain - Setelah Anda memahami dasar HTML
maka teknologi terkait lainnya seperti javascript, php, atau
sudut menjadi lebih mudah untuk dipahami.
Halo Dunia menggunakan HTML.
Sekadar memberi Anda sedikit kegembiraan tentang HTML, saya
akan memberikan Anda program kecil HTML Hello World yang
konvensional , Anda dapat mencobanya menggunakan tautan
Demo.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>
Penerapan HTML
Seperti disebutkan sebelumnya, HTML adalah salah satu bahasa
yang paling banyak digunakan di web. Saya akan mencantumkan
beberapa di antaranya di sini:
•Pengembangan halaman web - HTML digunakan untuk membuat
halaman yang dirender melalui web. Hampir setiap halaman
web memiliki tag html di dalamnya untuk menampilkan
detailnya di browser.
•Navigasi Internet - HTML menyediakan tag yang digunakan
untuk bernavigasi dari satu halaman ke halaman lain dan
banyak digunakan dalam navigasi internet.
•UI Responsif - Halaman HTML saat ini berfungsi dengan baik di
semua platform, seluler, tab, desktop, atau laptop karena
strategi desain responsif.
•Halaman HTML dukungan offline setelah dimuat dapat tersedia
secara offline di mesin tanpa memerlukan internet.
•Pengembangan game - HTML5 memiliki dukungan asli untuk
pengalaman yang kaya dan kini juga berguna dalam arena
pengembangan game.
Hadirin
Tutorial HTML ini dirancang untuk calon Desainer dan Pengembang
Web yang memiliki kebutuhan untuk memahami HTML secara
cukup detail beserta ikhtisar sederhana dan contoh
praktisnya. Tutorial ini akan memberi Anda cukup bahan untuk
memulai dengan HTML sehingga Anda dapat membawa diri Anda ke
tingkat keahlian yang lebih tinggi.
Prasyarat
Sebelum melanjutkan tutorial ini , Anda harus memiliki pengetahuan
dasar tentang pengoperasian sistem operasi Windows atau Linux,
selain itu Anda juga harus memahami -
•Pengalaman dengan editor teks apa pun seperti notepad,
notepad++, atau Edit plus, dll.
•Cara membuat direktori dan file di komputer Anda.
•Cara menavigasi melalui direktori yang berbeda.
•Cara mengetik konten dalam file dan menyimpannya di
komputer.
•Memahami tentang gambar dalam berbagai format seperti
JPEG, format PNG.
HTML - Ikhtisar
HTML adalah singkatan dari H yper t ext Markup Language , dan
merupakan bahasa yang paling banyak digunakan untuk menulis
Halaman Web .
•Hypertext mengacu pada cara halaman Web (dokumen HTML)
dihubungkan bersama. Dengan demikian, link yang tersedia
pada suatu halaman web disebut Hypertext.
•Seperti namanya, HTML adalah Bahasa Markup yang berarti
Anda menggunakan HTML untuk sekedar "menandai"
dokumen teks dengan tag yang memberitahu browser Web
bagaimana menyusunnya untuk ditampilkan.
Awalnya, HTML dikembangkan dengan tujuan untuk mendefinisikan
struktur dokumen seperti Heading, paragraf, daftar, dan sebagainya
untuk memfasilitasi pertukaran informasi ilmiah antar peneliti.
Sekarang, HTML banyak digunakan untuk memformat halaman web
dengan bantuan berbagai tag yang tersedia dalam bahasa HTML.
Dokumen HTML Dasar
Dalam bentuknya yang paling sederhana, berikut adalah contoh
dokumen HTML -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Object 1
Tag HTML
Seperti disebutkan sebelumnya, HTML adalah bahasa markup dan
menggunakan berbagai tag untuk memformat konten. Tag ini diapit
dalam kurung kurawal sudut <Nama Tag> . Kecuali beberapa tag,
sebagian besar tag memiliki tag penutup yang
sesuai. Misalnya, <html> memiliki tag penutupnya </html> dan
tag <body> memiliki tag penutupnya </body> dan seterusnya.
Contoh dokumen HTML di atas menggunakan tag berikut -
Sr.Tidak Tag & Deskripsi
<!DOCTYPE...>
1
Tag ini mendefinisikan jenis dokumen dan versi HTML.
<html>
Tag ini membungkus dokumen HTML lengkap dan terutama terdiri dari header
2
dokumen yang diwakili oleh <head>...</head> dan badan dokumen yang diwakili
oleh tag <body>...</body>.
<head>
3 Tag ini mewakili header dokumen yang dapat menyimpan tag HTML lain seperti
<title>, <link> dll.
<title>
4
Tag <title> digunakan di dalam tag <head> untuk menyebutkan Heading dokumen.
5 <body>
Tag ini mewakili isi dokumen yang menyimpan tag HTML lain seperti <h1>, <div>,
<p> dll.
<h1>
6
Tag ini mewakili Headingnya.
<p>
7
Tag ini mewakili sebuah paragraf.
Untuk mempelajari HTML, Anda perlu mempelajari berbagai tag
dan memahami perilakunya, saat memformat dokumen
tekstual. Mempelajari HTML itu sederhana karena pengguna harus
mempelajari penggunaan tag yang berbeda untuk memformat teks
atau gambar untuk membuat halaman web yang indah.
World Wide Web Consortium (W3C) merekomendasikan untuk
menggunakan tag huruf kecil mulai dari HTML 4.
Struktur Dokumen HTML
Dokumen HTML pada umumnya akan memiliki struktur berikut -
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Kita akan mempelajari semua tag header dan body di bab
selanjutnya, tapi untuk saat ini mari kita lihat apa itu tag deklarasi
dokumen.
Deklarasi <!DOCTYPE>
Tag deklarasi <!DOCTYPE> digunakan oleh browser web untuk
memahami versi HTML yang digunakan dalam dokumen. Versi
HTML saat ini adalah 5 dan menggunakan deklarasi berikut -
<!DOCTYPE html>
Ada banyak tipe deklarasi lain yang dapat digunakan dalam
dokumen HTML tergantung pada versi HTML yang digunakan. Kita
akan melihat lebih detailnya saat membahas tag <!DOCTYPE...>
beserta tag HTML lainnya.
HTML - Tag Dasar
Tag Heading (judul)
Dokumen apa pun dimulai dengan Heading. Anda dapat
menggunakan ukuran berbeda untuk Heading Anda. HTML juga
memiliki enam tingkatan Heading, yang menggunakan elemen <h1>,
<h2>, <h3>, <h4>, <h5>, dan <h6> . Saat menampilkan Heading apa
pun, browser menambahkan satu baris sebelum dan satu baris
setelah Heading tersebut.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Ini akan menghasilkan hasil berikut -
Tag Paragraf
Tag <p> menawarkan cara untuk menyusun teks Anda ke dalam
paragraf yang berbeda. Setiap paragraf teks harus berada di antara
tag <p> pembuka dan tag </p> penutup seperti yang ditunjukkan
pada contoh di bawah ini -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Object 2
Tag Break
Setiap kali Anda menggunakan elemen <br /> , apa pun yang
mengikutinya dimulai dari baris berikutnya. Tag ini adalah contoh
elemen kosong , di mana Anda tidak memerlukan tag pembuka dan
penutup, karena tidak ada yang bisa dimasukkan di antara
keduanya.
Tag <br /> mempunyai spasi di antara karakter br dan garis
miring. Jika Anda menghilangkan spasi ini, browser lama akan
kesulitan menampilkan jeda baris, sedangkan jika Anda
melewatkan karakter garis miring dan hanya menggunakan <br>
maka karakter tersebut tidak valid di XHTML.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Object 3
Memusatkan Konten
Anda dapat menggunakan tag <center> untuk meletakkan konten
apa pun di tengah halaman atau sel tabel mana pun.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Garis Horizontal
Garis horizontal digunakan untuk memecah bagian dokumen secara
visual. Tag <hr> membuat garis dari posisi saat ini dalam dokumen
ke margin kanan dan memutus garis tersebut.
Misalnya, Anda mungkin ingin memberi garis di antara dua paragraf
seperti pada contoh di bawah ini -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Sekali lagi tag <hr /> adalah contoh elemen kosong , di mana Anda
tidak memerlukan tag pembuka dan penutup, karena tidak ada
yang bisa dimasukkan di antara keduanya.
Elemen <hr /> memiliki spasi antara karakter hr dan garis
miring. Jika Anda menghilangkan spasi ini, browser lama akan
kesulitan menampilkan garis horizontal, sedangkan jika Anda
melewatkan karakter garis miring dan hanya
menggunakan <hr> maka ini tidak valid di XHTML
Pertahankan Pemformatan
Terkadang, Anda ingin teks Anda mengikuti format persis seperti
yang ditulis dalam dokumen HTML. Dalam kasus ini, Anda dapat
menggunakan tag <pre> yang telah diformat sebelumnya .
Teks apa pun di antara tag <pre> pembuka dan tag </pre> penutup akan
mempertahankan format dokumen sumber.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Object 4
Coba gunakan kode yang sama tanpa menyimpannya di

dalam tag <pre>...</pre>
Ruang yang Tidak Melanggar
Misalkan Anda ingin menggunakan frasa "12 Pria Marah". Di sini,
Anda tidak ingin browser membagi "12, Marah" dan "Pria" menjadi
dua baris -
An example of this technique appears in the movie "12 Angry Men."
Jika Anda tidak ingin browser klien memecah teks, Anda harus
menggunakan entitas spasi nonbreaking bukannya ruang
normal. Misalnya, saat mengkodekan "12 Pria Marah" dalam sebuah
paragraf, Anda harus menggunakan sesuatu yang mirip dengan
kode berikut -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
HTML - Elemen
Elemen HTML ditentukan oleh tag awal. Jika elemen berisi konten
lain, diakhiri dengan tag penutup, di mana nama elemen diawali
dengan garis miring seperti yang ditunjukkan di bawah ini dengan
beberapa tag -
Mulai Tag Isi Tanda Akhir
<p> Ini adalah isi paragraf. </p>
Ini adalah Heading

<h1> </h1>
konten.
Ini adalah konten

<div> </div>
divisi.
<br />
Jadi di sini <p>....</p> adalah elemen HTML, <h1>...</h1> adalah
elemen HTML lainnya. Ada beberapa elemen HTML yang tidak perlu
ditutup, seperti elemen <img.../> , <hr /> dan <br /> . Ini dikenal
sebagai elemen kosong .
Dokumen HTML terdiri dari pohon elemen-elemen ini dan
menentukan bagaimana dokumen HTML harus dibuat, dan jenis
konten apa yang harus ditempatkan di bagian mana dari dokumen
HTML.
Tag HTML vs. Elemen
Elemen HTML ditentukan oleh tag awal . Jika elemen berisi konten
lain, maka diakhiri dengan tag penutup .
Misalnya, <p> adalah tag awal sebuah paragraf dan </p> adalah tag
penutup dari paragraf yang sama, tetapi <p>Ini adalah
paragraf</p> adalah elemen paragraf.
Elemen HTML Bersarang
Sangat diperbolehkan untuk menyimpan satu elemen HTML di
dalam elemen HTML lainnya -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
Ini akan menampilkan hasil berikut -
HTML - Atribut
Kita telah melihat beberapa tag HTML dan penggunaannya seperti

tag heading <h1>, <h2>, tag paragraf <p> dan tag lainnya. Sejauh ini
kami menggunakannya dalam bentuk yang paling sederhana,
namun sebagian besar tag HTML juga dapat memiliki atribut, yang
merupakan informasi tambahan.
Atribut digunakan untuk mendefinisikan karakteristik elemen HTML
dan ditempatkan di dalam tag pembuka elemen. Semua atribut
terdiri dari dua bagian - nama dan nilai
•Nama adalah properti yang ingin Anda atur . Misalnya, elemen
paragraf <p> dalam contoh membawa atribut bernama align ,
yang dapat Anda gunakan untuk menunjukkan perataan
paragraf pada halaman.
•Nilainya adalah nilai properti yang Anda inginkan untuk
ditetapkan dan selalu dimasukkan dalam tanda kutip . Contoh
di bawah ini menunjukkan tiga kemungkinan nilai atribut
align: left, center dan right .
Nama atribut dan nilai atribut tidak membedakan huruf besar dan
kecil. Namun, World Wide Web Consortium (W3C)
merekomendasikan atribut/nilai atribut dengan huruf kecil dalam
rekomendasi HTML 4 mereka.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Ini akan menampilkan hasil berikut -
Object 5
Atribut Inti
Empat atribut inti yang dapat digunakan pada sebagian besar
elemen HTML (walaupun tidak semua) adalah −
•Id
•title
•class
•Style
Atribut Id
Atribut id dari tag HTML dapat digunakan untuk mengidentifikasi
secara unik elemen apa pun dalam halaman HTML. Ada dua alasan
utama mengapa Anda mungkin ingin menggunakan atribut id pada
elemen -
•Jika suatu elemen membawa atribut id sebagai
pengidentifikasi unik, elemen tersebut dan kontennya dapat
diidentifikasi saja.
•Jika Anda memiliki dua elemen dengan nama yang sama
dalam halaman Web (atau style sheet), Anda bisa
menggunakan atribut id untuk membedakan antara elemen
yang memiliki nama yang sama.
Kita akan membahas style sheet dalam tutorial terpisah. Untuk saat
ini, mari gunakan atribut id untuk membedakan dua elemen
paragraf seperti gambar di bawah ini.
Contoh
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>
Heading Atribut
Atribut title memberikan Heading yang disarankan untuk elemen
tersebut. Sintaksnya untuk atribut title mirip dengan yang
dijelaskan untuk atribut id -
Perilaku atribut ini akan bergantung pada elemen yang
membawanya, meskipun sering kali ditampilkan sebagai tooltip
ketika kursor berada di atas elemen atau saat elemen sedang
dimuat.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag
Example</h3>
</body>
</html>
Object 6
Sekarang coba arahkan kursor Anda ke "Contoh Tag Heading

BerHeading" dan Anda akan melihat bahwa Heading apa pun yang
Anda gunakan dalam kode Anda akan keluar sebagai keterangan
alat kursor.
Atribut class
Atribut class digunakan untuk mengaitkan elemen dengan style
sheet, dan menentukan class elemen. Anda akan mempelajari lebih
lanjut tentang penggunaan atribut class ketika Anda mempelajari
Cascading Style Sheet (CSS). Jadi untuk saat ini Anda bisa
menghindarinya.
Nilai atribut juga dapat berupa daftar nama class yang dipisahkan
spasi. Misalnya -
class = "className1 className2 className3"
Atribut Style
Atribut style memungkinkan Anda menentukan aturan Cascading
Style Sheet (CSS) di dalam elemen.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some
text...</p>
</body>
</html>
Object 7
Saat ini, kita belum mempelajari CSS, jadi mari kita lanjutkan
tanpa terlalu memikirkan CSS. Di sini, Anda perlu memahami apa
itu atribut HTML dan bagaimana atribut tersebut dapat digunakan
saat memformat konten.
Atribut Internasionalisasi
Ada tiga atribut internasionalisasi, yang tersedia untuk sebagian
besar (walaupun tidak semua) elemen XHTML.
•dir
•bahasa
•xml:lang
Atribut direktori
Atribut dir memungkinkan Anda menunjukkan kepada browser
tentang arah aliran teks. Atribut dir dapat mengambil salah satu
dari dua nilai, seperti yang Anda lihat pada tabel berikut -
Nila
Arti
i
ltr Kiri ke kanan (nilai default)
Kanan ke kiri (untuk bahasa seperti Ibrani atau Arab yang dibaca dari kanan ke
rtl
kiri)
Contoh
Demo Langsung
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed
text.
</body>
</html>
Object 8
Ketika atribut dir digunakan dalam tag <html>, atribut ini

menentukan bagaimana teks akan disajikan dalam keseluruhan
dokumen. Saat digunakan dalam tag lain, ini mengontrol arah teks
hanya untuk konten tag tersebut.
Atribut lang
Atribut lang memungkinkan Anda untuk menunjukkan bahasa
utama yang digunakan dalam dokumen, namun atribut ini disimpan
dalam HTML hanya untuk kompatibilitas dengan versi HTML
sebelumnya. Atribut ini telah digantikan oleh atribut xml:lang di
dokumen XHTML baru.
Nilai atribut lang adalah kode bahasa dua karakter standar ISO-
639. Periksa Kode Bahasa HTML: ISO 639 untuk daftar lengkap kode
bahasa.
Contoh
Demo Langsung
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Object 9
Atribut xml:lang
Atribut xml:lang adalah pengganti XHTML untuk atribut lang . Nilai
atribut xml:lang harus berupa kode negara ISO-639 seperti yang
disebutkan di bagian sebelumnya.
Atribut Generik
Berikut tabel beberapa atribut lain yang mudah digunakan dengan
banyak tag HTML.
Atribut Pilihan Fungsi
meluruskan kanan, kiri, tengah Meratakan tag secara horizontal
valign atas, tengah, bawah Meratakan tag secara vertikal dalam elemen HTML.
nilai numerik,
bgcolor Menempatkan warna latar belakang di belakang elemen
heksadesimal, RGB
latar Menempatkan gambar latar belakang di belakang

URL
belakang elemen
Memberi nama elemen untuk digunakan dengan

Id Ditetapkan pengguna
Cascading Style Sheets.
Mengklasifikasikan elemen untuk digunakan dengan

class Ditetapkan pengguna
Cascading Style Sheets.
lebar Nilai angka Menentukan lebar tabel, gambar, atau sel tabel.
tinggi Nilai angka Menentukan tinggi tabel, gambar, atau sel tabel.
Heading Ditetapkan pengguna Heading elemen "Pop-up".

Kita akan melihat contoh terkait saat kita melanjutkan mempelajari
tag HTML lainnya. Untuk daftar lengkap Tag HTML dan atribut
terkait silakan periksa referensi Daftar Tag HTML .
HTML - Pemformatan
Jika Anda menggunakan pengolah kata, Anda pasti sudah familiar

dengan kemampuan membuat teks menjadi tebal, miring, atau
bergaris bawah; ini hanyalah tiga dari sepuluh opsi yang tersedia
untuk menunjukkan bagaimana teks dapat muncul dalam HTML dan
XHTML.
Teks tebal
Apa pun yang muncul dalam elemen <b>...</b> , ditampilkan dalam
huruf tebal seperti yang ditunjukkan di bawah ini −
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b>
typeface.</p>
</body>
</html>
Object 10
Teks Miring
Apa pun yang muncul dalam elemen <i>...</i> ditampilkan dalam
huruf miring seperti yang ditunjukkan di bawah ini −
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i>
typeface.</p>
</body>
</html>
Object 11
Teks yang digarisbawahi

Apa pun yang muncul dalam elemen <u>...</u> , ditampilkan dengan
garis bawah seperti yang ditunjukkan di bawah ini −
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u>
typeface.</p>
</body>
</html>
Object 12
Teks Teguran
Apa pun yang muncul dalam elemen <strike>...</strike> ditampilkan
dengan coretan, yaitu garis tipis melalui teks seperti yang
ditunjukkan di bawah ini -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
</body>
</html>
Object 13
Font Berspasi Tunggal

Isi dari <tt>...</tt> ditulis dalam font monospace. Sebagian besar
font dikenal sebagai font dengan lebar variabel karena huruf yang
berbeda mempunyai lebar yang berbeda (misalnya, huruf 'm' lebih
lebar daripada huruf 'i'). Namun, dalam font monospace, setiap
huruf memiliki lebar yang sama.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt>
typeface.</p>
</body>
</html>
Object 14
Teks Superskrip
Isi elemen <sup>...</sup> ditulis dalam superskrip; ukuran font yang
digunakan sama besarnya dengan karakter disekitarnya namun
ditampilkan setengah tinggi karakter diatas karakter lainnya.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup>
typeface.</p>
</body>
</html>
Object 15
Teks Subskrip
Isi elemen <sub>...</sub> ditulis dalam subskrip; ukuran font yang
digunakan sama dengan karakter di sekitarnya, namun ditampilkan
setengah tinggi karakter di bawah karakter lainnya.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub>
typeface.</p>
</body>
</html>
Object 16
Teks yang Disisipkan

Apa pun yang muncul dalam elemen <ins>...</ins> ditampilkan
sebagai teks yang disisipkan.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del>
<ins>wine</ins></p>
</body>
</html>
Object 17
Teks yang Dihapus
Apa pun yang muncul dalam elemen <del>...</del> , ditampilkan
sebagai teks yang dihapus.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del>
<ins>wine</ins></p>
</body>
</html>
Object 18
Teks Lebih Besar

Konten elemen <big>...</big> ditampilkan satu ukuran font lebih
besar dari teks lain di sekitarnya seperti yang ditunjukkan di bawah
ini -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big>
typeface.</p>
</body>
</html>
Object 19
Teks Lebih Kecil

Konten elemen <small>...</small> ditampilkan satu ukuran font lebih
kecil dari teks lain di sekitarnya seperti yang ditunjukkan di bawah
ini -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small>
typeface.</p>
</body>
</html>
Object 20
Mengelompokkan Konten
Elemen <div> dan <span> memungkinkan Anda mengelompokkan
beberapa elemen untuk membuat bagian atau subbagian halaman.
Misalnya, Anda mungkin ingin meletakkan semua catatan kaki pada
halaman dalam elemen <div> untuk menunjukkan bahwa semua
elemen dalam elemen <div> tersebut berhubungan dengan catatan
kaki. Anda kemudian dapat melampirkan Style ke elemen <div> ini
sehingga muncul menggunakan seperangkat aturan Style khusus.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
Object 21
Sebaliknya, elemen <span> dapat digunakan untuk

mengelompokkan elemen sebaris saja. Jadi, jika Anda memiliki
bagian kalimat atau paragraf yang ingin dikelompokkan, Anda
dapat menggunakan elemen <span> sebagai berikut.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style =
"color:green">span tag</span>
and the <span style = "color:red">div tag</span>
alongwith CSS</p>
</body>
</html>
Object 22
Tag ini biasanya digunakan dengan CSS untuk memungkinkan Anda

melampirkan Style ke bagian halaman.
HTML - Tag Frasa
Tag frase telah dihilangkan warnanya untuk tujuan tertentu,

meskipun tag tersebut ditampilkan dengan cara yang sama seperti
tag dasar lainnya seperti <b>, <i>, <pre> , dan <tt> , yang telah Anda
lihat di bab sebelumnya. Bab ini akan membawa Anda melalui
semua tag frase penting, jadi mari kita mulai melihatnya satu per
satu.
Teks yang Ditekankan
Apa pun yang muncul dalam elemen <em>...</em> ditampilkan
sebagai teks yang ditekankan.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em>
typeface.</p>
</body>
</html>
Object 23
Teks yang Ditandai

Apa pun yang muncul di dalam elemen <mark>...</mark> ,
ditampilkan sebagai ditandai dengan tinta kuning.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark>
with yellow</p>
</body>
</html>
Object 24
Teks yang Kuat

Apa pun yang muncul dalam elemen <strong>...</strong> ditampilkan
sebagai teks penting.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong>
typeface.</p>
</body>
</html>
Object 25
Singkatan Teks
Anda dapat menyingkat teks dengan memasukkannya ke dalam tag
<abbr> pembuka dan </abbr> penutup. Jika ada, atribut title
harus berisi deskripsi lengkap ini dan tidak ada yang lain.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title =
"Abhishek">Abhy</abbr>.</p>
</body>
</html>
Object 26
Elemen Akronim
Elemen <acronym> memungkinkan Anda menunjukkan bahwa teks
di antara tag <acronym> dan </acronym> adalah akronim.
Saat ini, browser utama tidak mengubah tampilan konten elemen
<acronym>.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in
<acronym>XHTML</acronym>.</p>
</body>
</html>
Object 27
Arah Teks
Elemen <bdo>...</bdo> adalah singkatan dari Bi-Directional Override
dan digunakan untuk mengganti arah teks saat ini.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to
left.</bdo></p>
</body>
</html>
Object 28
Ketentuan Khusus
Elemen <dfn>...</dfn> (atau Elemen Definisi HTML) memungkinkan
Anda menentukan bahwa Anda memperkenalkan istilah
khusus. Penggunaannya mirip dengan kata-kata yang dicetak
miring di tengah paragraf.
Biasanya, Anda akan menggunakan elemen <dfn> saat pertama
kali memperkenalkan istilah kunci. Browser terbaru merender
konten elemen <dfn> dalam font miring.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn>
term.</p>
</body>
</html>
Object 29
Mengutip Teks
Bila Anda ingin mengutip suatu bagian dari sumber lain, Anda harus
meletakkannya di antara tag <blockquote>...</blockquote> .
Teks di dalam elemen <blockquote> biasanya menjorok ke dalam
dari tepi kiri dan kanan teks di sekitarnya, dan terkadang
menggunakan font miring.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from
the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first
Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2
and HTML 2.0.</blockquote>
</body>
</html>
Object 30
Kutipan Singkat
Elemen <q>...</q> digunakan ketika Anda ingin menambahkan tanda
kutip ganda dalam sebuah kalimat.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
Object 31
Kutipan Teks
Jika Anda mengutip sebuah teks, Anda dapat menunjukkan
sumbernya dan menempatkannya di antara tag <cite> pembuka
dan tag </cite> penutup.
Seperti yang Anda harapkan dalam publikasi cetak, konten elemen
<cite> ditampilkan dalam teks miring secara default.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3
Standard for HTML</cite>.</p>
</body>
</html>
Object 32
Kode Komputer
Kode pemrograman apa pun yang muncul di halaman Web harus
ditempatkan di dalam tag <code>...</code> . Biasanya isi elemen
<code> disajikan dalam font monospace, sama seperti kode pada
kebanyakan buku pemrograman.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular
text.</p>
</body>
</html>
Object 33
Teks Papan Ketik

Ketika Anda berbicara tentang komputer, jika Anda ingin
memberitahu pembaca untuk memasukkan beberapa teks, Anda
dapat menggunakan <kbd>...</kbd> untuk menunjukkan apa yang
harus diketik, seperti dalam contoh ini.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd
element</kbd> Regular text.</p>
</body>
</html>
Object 34
Variabel Pemrograman
Elemen ini biasanya digunakan bersama
dengan <pre> dan <code> untuk menunjukkan bahwa isi elemen
tersebut adalah variabel.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-
name</var>")</code></p>
</body>
</html>
Object 35
Keluaran Program
<samp> ...</samp> menunjukkan contoh keluaran dari suatu
program, skrip, dll. Sekali lagi, elemen ini terutama digunakan
ketika mendokumentasikan konsep pemrograman atau
pengkodean.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello
World!</samp></p>
</body>
</html>
Object 36
Teks Alamat
Elemen <address>...</address> digunakan untuk memuat alamat apa
pun.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills -
Hyderabad</address>
</body>
</html>
HTML - Tag Meta
HTML memungkinkan Anda menentukan metadata - informasi

penting tambahan tentang dokumen dalam berbagai cara. Elemen
META dapat digunakan untuk menyertakan pasangan nama/nilai
yang menjelaskan properti dokumen HTML, seperti penulis, tanggal
kedaluwarsa, daftar kata kunci, penulis dokumen, dll.
Tag <meta> digunakan untuk memberikan informasi tambahan
tersebut. Tag ini adalah elemen kosong sehingga tidak memiliki tag
penutup namun membawa informasi di dalam atributnya.
Anda dapat menyertakan satu atau lebih tag meta di dokumen
Anda berdasarkan informasi apa yang ingin Anda simpan di
dokumen Anda, tetapi secara umum, tag meta tidak memengaruhi
tampilan fisik dokumen, jadi dari sudut pandang tampilan, tidak
masalah jika Anda menyertakannya mereka atau tidak.
Menambahkan Meta Tag ke Dokumen Anda
Anda dapat menambahkan metadata ke halaman web Anda dengan
menempatkan tag <meta> di dalam header dokumen yang diwakili
oleh tag <head> dan </head> . Tag meta dapat memiliki atribut
berikut selain atribut inti -
Sr.Tidak Atribut & Deskripsi
Nama
1 Nama untuk properti. Bisa apa saja. Contohnya termasuk, kata kunci, deskripsi,
penulis, revisi, generator dll.
isi
2
Menentukan nilai properti.
skema
3 Menentukan skema untuk menafsirkan nilai properti (seperti yang dinyatakan dalam
atribut konten).
http-setara
Digunakan untuk header pesan respons http. Misalnya, http-equiv dapat digunakan
4
untuk menyegarkan halaman atau menyetel cookie. Nilai mencakup tipe konten,
kedaluwarsa, penyegaran, dan set-cookie.
Menentukan Kata Kunci

Anda dapat menggunakan tag <meta> untuk menentukan kata
kunci penting yang terkait dengan dokumen dan nantinya kata
kunci tersebut digunakan oleh mesin pencari saat mengindeks
halaman web Anda untuk tujuan pencarian.
Contoh
Berikut adalah contoh di mana kami menambahkan HTML, Meta
Tag, Metadata sebagai kata kunci penting tentang dokumen.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags,
Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Object 37
Deskripsi Dokumen
Anda dapat menggunakan tag <meta> untuk memberikan
gambaran singkat tentang dokumen tersebut. Ini sekali lagi dapat
digunakan oleh berbagai mesin pencari saat mengindeks halaman
web Anda untuk tujuan pencarian.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
<meta name = "description" content = "Learning about
Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Tanggal Revisi Dokumen
Anda dapat menggunakan tag <meta> untuk memberikan
informasi kapan terakhir kali dokumen diperbarui. Informasi ini
dapat digunakan oleh berbagai browser web sambil menyegarkan
halaman web Anda.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
Meta Tags." />
<meta name = "revised" content = "Tutorialspoint,
3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Penyegaran Dokumen
Tag <meta> dapat digunakan untuk menentukan durasi setelah
halaman web Anda akan terus disegarkan secara otomatis.
Contoh
Jika Anda ingin halaman Anda tetap disegarkan setiap 5 detik,
gunakan sintaks berikut.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
Meta Tags." />
3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Pengalihan Halaman
Anda dapat menggunakan tag <meta> untuk mengarahkan
halaman Anda ke halaman web lain. Anda juga dapat menentukan
durasi jika ingin mengalihkan halaman setelah beberapa detik
tertentu.
Contoh
Berikut adalah contoh pengalihan halaman saat ini ke halaman lain
setelah 5 detik. Jika Anda ingin segera mengalihkan halaman,
jangan tentukan atribut konten .
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
Meta Tags." />
3/7/2014" />
<meta http-equiv = "refresh" content = "5; url =
http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Mengatur Cookie
Cookies adalah data yang disimpan dalam file teks kecil di
komputer Anda dan dipertukarkan antara browser web dan server
web untuk melacak berbagai informasi berdasarkan kebutuhan
aplikasi web Anda.
Anda dapat menggunakan tag <meta> untuk menyimpan cookie di
sisi klien dan nantinya informasi ini dapat digunakan oleh Server
Web untuk melacak pengunjung situs.
Contoh
Berikut adalah contoh pengalihan halaman saat ini ke halaman lain
setelah 5 detik. Jika Anda ingin segera mengalihkan halaman,
jangan tentukan atribut konten .
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Jika Anda tidak mencantumkan tanggal dan waktu kedaluwarsa,
cookie dianggap sebagai cookie sesi dan akan dihapus saat
pengguna keluar dari browser.
Note - Anda dapat memeriksa tutorial PHP dan Cookies untuk detail
lengkap tentang Cookies.
Mengatur Nama Penulis
Anda dapat mengatur nama penulis di halaman web menggunakan
meta tag. Lihat contoh di bawah -
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim"
/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Tentukan Kumpulan Karakter
Anda dapat menggunakan tag <meta> untuk menentukan
kumpulan karakter yang digunakan dalam halaman web.
Contoh
Secara default, server Web dan browser Web menggunakan
pengkodean ISO-8859-1 (Latin1) untuk memproses halaman
Web. Berikut adalah contoh untuk menyetel pengkodean UTF-8 -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
Meta Tags." />
/>
<meta http-equiv = "Content-Type" content =
"text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Untuk menyajikan halaman statis dengan karakter Cina tradisional,
halaman web harus berisi tag <meta> untuk mengatur pengkodean
Big5 -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
Metadata" />
Meta Tags." />
/>
<meta http-equiv = "Content-Type" content =
"text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
HTML - Komentar
Komentar adalah sepotong kode yang diabaikan oleh browser web

mana pun. Merupakan praktik yang baik untuk menambahkan
komentar ke dalam kode HTML Anda, terutama pada dokumen
yang kompleks, untuk menunjukkan bagian dokumen, dan catatan
lain kepada siapa pun yang melihat kode tersebut. Komentar
membantu Anda dan orang lain memahami kode Anda dan
meningkatkan keterbacaan kode.
Komentar HTML ditempatkan di antara tag  . Jadi, konten
apa pun yang ditempatkan di dalam tag  akan dianggap
sebagai komentar dan akan diabaikan sepenuhnya oleh browser.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
</body>
</html>
Ini akan menghasilkan hasil berikut tanpa menampilkan konten
yang diberikan sebagai bagian dari komentar -
Object 38
Komentar Valid vs Tidak Valid
Komentar tidak bertumpuk yang berarti suatu komentar tidak dapat
dimasukkan ke dalam komentar lain. Kedua, urutan tanda hubung
ganda "--" mungkin tidak muncul di dalam komentar kecuali
sebagai bagian dari tag penutup ->. Anda juga harus memastikan
bahwa tidak ada spasi di awal string komentar.
Contoh
Di sini, komentar yang diberikan adalah komentar yang valid dan
akan dihapus oleh browser.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>

</body>
</html>
Object 39
Namun, baris berikut bukanlah komentar yang valid dan akan

ditampilkan oleh browser. Sebab, ada spasi di antara tanda kurung
siku kiri dan tanda seru.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
</body>
</html>
Object 40
Komentar Multibaris
Sejauh ini kita telah melihat komentar satu baris, tetapi HTML juga
mendukung komentar multi-baris.
Anda dapat mengomentari beberapa baris dengan tag awal khusus
 ditempatkan sebelum baris pertama dan
akhir baris terakhir seperti yang ditunjukkan pada contoh di bawah
ini.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>

</body>
</html>
Object 41
Komentar Bersyarat
Komentar bersyarat hanya berfungsi di Internet Explorer (IE) pada
Windows tetapi diabaikan oleh browser lain. Mereka didukung mulai
dari Explorer 5 dan seterusnya, dan Anda dapat menggunakannya
untuk memberikan instruksi bersyarat ke versi IE yang berbeda.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>

</head>
<body>
</body>
</html>
Anda akan menemukan situasi di mana Anda perlu menerapkan
style sheet yang berbeda berdasarkan versi Internet Explorer yang
berbeda, dalam situasi seperti itu, komentar bersyarat akan sangat
membantu.
Menggunakan Tag Komentar
Ada beberapa browser yang mendukung tag <comment> untuk
mengomentari bagian kode HTML.
Note - Tag <comment> tidak digunakan lagi di
HTML5. Jangan gunakan elemen ini.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet
Explorer.</p>
</body>
</html>
Jika Anda menggunakan IE, maka akan menghasilkan hasil sebagai
berikut -
Object 42
Namun jika Anda tidak menggunakan IE, maka akan menghasilkan

hasil sebagai berikut -
Object 43
Mengomentari Kode Skrip

Meskipun Anda akan mempelajari JavaScript dengan HTML, dalam
tutorial terpisah, tetapi di sini Anda harus membuat catatan bahwa
jika Anda menggunakan Java Script atau VB Script dalam kode
HTML Anda maka disarankan untuk meletakkan kode skrip tersebut
di dalam komentar HTML yang tepat sehingga lama browser dapat
bekerja dengan baik.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>

</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
Object 44
Mengomentari Style Sheet

Meskipun Anda akan belajar menggunakan style sheet dengan
HTML dalam tutorial terpisah, namun di sini Anda harus membuat
catatan bahwa jika Anda menggunakan Cascading Style Sheet
(CSS) dalam kode HTML Anda maka disarankan untuk meletakkan
kode style sheet tersebut di dalam komentar HTML yang tepat. agar
browser lama dapat bekerja dengan baik.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>

</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>
HTML - Gambar
Gambar sangat penting untuk mempercantik serta menggambarkan
banyak konsep kompleks dengan cara sederhana di halaman web
Anda. Tutorial ini akan membawa Anda melalui langkah-langkah
sederhana untuk menggunakan gambar di halaman web Anda.
Sisipkan Gambar
Anda dapat menyisipkan gambar apa pun di halaman web Anda
dengan menggunakan tag <img> . Berikut ini adalah sintaks
sederhana untuk menggunakan tag ini.
<img src = "Image URL" ... attributes-list/>
Tag <img> merupakan tag kosong, artinya hanya berisi daftar
atribut dan tidak memiliki tag penutup.
Contoh
Untuk mencoba contoh berikut, simpan file HTML test.htm dan file
gambar test.png di direktori yang sama -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test
Image" />
</body>
</html>
Object 45
Anda dapat menggunakan file gambar PNG, JPEG atau GIF

berdasarkan kenyamanan Anda, tetapi pastikan Anda menentukan
nama file gambar yang benar di atribut src . Nama gambar selalu
peka huruf besar-kecil.
Atribut alt adalah atribut wajib yang menentukan teks alternatif
untuk suatu gambar, jika gambar tidak dapat ditampilkan.
Tetapkan Lokasi Gambar
Biasanya kami menyimpan semua gambar dalam direktori
terpisah. Jadi mari kita simpan file HTML test.htm di direktori home
kita dan buat subdirektori images di dalam direktori home dimana
kita akan menyimpan gambar test.png kita.
Contoh
Dengan asumsi lokasi gambar kita adalah "image/test.png", coba
contoh berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
Image" />
</body>
</html>
Object 46
Atur Lebar/Tinggi Gambar

Anda dapat mengatur lebar dan tinggi gambar berdasarkan
kebutuhan Anda menggunakan atribut lebar dan tinggi . Anda dapat
menentukan lebar dan tinggi gambar dalam piksel atau persentase
dari ukuran sebenarnya.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
Image" width = "150" height = "100"/>
</body>
</html>
Object 47
Atur Batas Gambar

Secara default, gambar akan memiliki batas di sekelilingnya, Anda
dapat menentukan ketebalan batas dalam satuan piksel
menggunakan atribut perbatasan. Ketebalan 0 berarti tidak ada
batas di sekeliling gambar.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
Image" border = "3"/>
</body>
</html>
Object 48
Atur Perataan Gambar

Secara default, gambar akan disejajarkan di sisi kiri halaman,
namun Anda dapat menggunakan atribut align untuk mengaturnya
di tengah atau kanan.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
Image" border = "3" align = "right"/>
</body>
</html>
Object 49
Grafik Web Gratis

Untuk Grafik Web Gratis termasuk polanya, Anda dapat
melihat Grafik Web Gratis
HTML - Tabel
Tabel HTML memungkinkan penulis web untuk mengatur data

seperti teks, gambar, link, tabel lain, dll. ke dalam baris dan kolom
sel.
Tabel HTML dibuat menggunakan tag <table> dimana
tag <tr> digunakan untuk membuat baris tabel dan
tag <td> digunakan untuk membuat sel data. Elemen di bawah
<td> teratur dan rata kiri secara default
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Object 50
Di sini, perbatasan adalah atribut dari tag <table> dan digunakan

untuk memberi batas di semua sel. Jika Anda tidak membutuhkan
border, maka Anda bisa menggunakan border = "0".
Heading Tabel
Heading tabel dapat ditentukan menggunakan tag <th> . Tag ini
akan menggantikan tag <td> yang digunakan untuk mewakili sel
data sebenarnya. Biasanya Anda akan menempatkan baris teratas
sebagai Heading tabel seperti yang ditunjukkan di bawah ini, jika
tidak, Anda dapat menggunakan elemen <th> di baris mana
pun. Heading, yang ditentukan dalam tag <th>, ditempatkan di
tengah dan dicetak tebal secara default.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Object 51
Atribut Cellpadding dan Cellspacing

Ada dua atribut yang disebut cellpadding dan Cellspacing yang akan
Anda gunakan untuk mengatur spasi di sel tabel Anda. Atribut
cellpacing mendefinisikan jarak antar sel tabel, sedangkan
cellpadding mewakili jarak antara batas sel dan konten di dalam
sel.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing =
"5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>5000</td>
</tr>
<tr>
<td>7000</td>
</tr>
</table>
</body>
</html>
Object 52
Atribut Colspan dan Rowspan

Anda akan menggunakan atribut colspan jika Anda ingin
menggabungkan dua kolom atau lebih menjadi satu kolom. Cara
serupa Anda akan menggunakan rowpan jika Anda ingin
menggabungkan dua baris atau lebih.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Object 53
Latar Belakang Tabel

Anda dapat mengatur latar belakang tabel menggunakan salah satu
dari dua cara berikut -
•bgcolor atribut - Anda dapat mengatur warna latar belakang
untuk seluruh tabel atau hanya untuk satu sel.
•background atribut - Anda dapat mengatur gambar latar
belakang untuk seluruh tabel atau hanya untuk satu sel.
Anda juga dapat mengatur warna batas menggunakan
atribut bordercolor .
Note - Atribut bgcolor , background , dan bordercolor tidak
digunakan lagi di HTML5. Jangan gunakan atribut ini.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor =
"yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Object 54
Berikut adalah contoh penggunaan atribut background . Di sini kita

akan menggunakan gambar yang tersedia di direktori /images.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background
= "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut. Di sini gambar latar
belakang tidak berlaku untuk header tabel.
Object 55
Tinggi dan Lebar Meja

Anda dapat mengatur lebar dan tinggi tabel menggunakan
atribut lebar dan tinggi . Anda dapat menentukan lebar atau tinggi
tabel dalam piksel atau persentase area layar yang tersedia.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Object 56
Keterangan Tabel
Tag caption akan berfungsi sebagai Heading atau penjelasan tabel
dan muncul di bagian atas tabel. Tag ini tidak digunakan lagi di
versi HTML/XHTML yang lebih baru.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn
2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn
2</td>
</tr>
</table>
</body>
</html>
Object 57
Header Tabel, Badan, dan Footer

Tabel dapat dibagi menjadi tiga bagian − header, badan, dan
kaki. head dan kaki agak mirip dengan header dan footer dalam
dokumen olahan kata yang tetap sama untuk setiap halaman,
sedangkan badan adalah pemegang konten utama tabel.
Tiga elemen untuk memisahkan head, badan, dan kaki meja adalah
−
•<thead> - untuk membuat header tabel terpisah.
•<tbody> − untuk menunjukkan bagian utama tabel.
•<tfoot> − untuk membuat footer tabel terpisah.
Sebuah tabel mungkin berisi beberapa elemen <tbody> untuk
menunjukkan halaman atau grup data yang berbeda. Namun perlu
diperhatikan bahwa tag <thead> dan <tfoot> harus muncul
sebelum <tbody>
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<thead>
<tr>
<td colspan = "4">This is the head of the
table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the
table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Object 58
Tabel Bersarang
Anda dapat menggunakan satu tabel di dalam tabel lain. Tidak
hanya tabel Anda dapat menggunakan hampir semua tag di dalam
tag data tabel <td>.
Contoh
Berikut adalah contoh penggunaan tabel lain dan tag lain di dalam
sel tabel.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<tr>
<td>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>5000</td>
</tr>
<tr>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
HTML - Daftar
HTML menawarkan penulis web tiga cara untuk menentukan daftar

informasi. Semua daftar harus berisi satu atau lebih elemen
daftar. Daftar mungkin berisi -
•<ul> − Daftar tidak berurutan. Ini akan mencantumkan item
menggunakan poin biasa.
•<ol> − Daftar yang diurutkan. Ini akan menggunakan skema
angka yang berbeda untuk mencantumkan item Anda.
•<dl> - Daftar definisi. Ini mengatur item Anda dengan cara
yang sama seperti yang disusun dalam kamus.
Daftar Tidak Berurutan HTML
Daftar tak berurutan adalah kumpulan item terkait yang tidak
memiliki urutan atau urutan khusus. Daftar ini dibuat dengan
menggunakan tag HTML <ul> . Setiap item dalam daftar ditandai
dengan poin.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 59
Jenis Atribut
Anda dapat menggunakan atribut type untuk tag <ul> untuk
menentukan jenis poin yang Anda suka. Secara default, ini adalah
disk. Berikut adalah opsi yang memungkinkan -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Contoh
Berikut adalah contoh dimana kita menggunakan <ul type =
"square">
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 60
Contoh
Berikut adalah contoh penggunaan <ul type = "disc"> −
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 61
Contoh
Berikut adalah contoh penggunaan <ul type = "circle"> −
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 62
Daftar Urutan HTML

Jika Anda diminta untuk meletakkan item Anda dalam daftar
bernomor, bukan berpoin, maka daftar urutan HTML akan
digunakan. Daftar ini dibuat dengan menggunakan
tag <ol> . Penomoran dimulai dari satu dan bertambah satu untuk
setiap elemen daftar berurutan yang diberi tag <li>.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 63
Jenis Atribut
Anda dapat menggunakan atribut type untuk tag <ol> untuk
menentukan jenis penomoran yang Anda suka. Secara default, ini
adalah angka. Berikut adalah opsi yang memungkinkan -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Contoh
Berikut adalah contoh dimana kita menggunakan <ol type = "1">
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 64
Contoh
Berikut adalah contoh dimana kita menggunakan <ol type = "I">
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 65
Contoh
Berikut adalah contoh dimana kita menggunakan <ol type = "i">
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 66
Contoh
Berikut adalah contoh dimana kita menggunakan <ol type = "A" >
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 67
Contoh
Berikut adalah contoh dimana kita menggunakan <ol type = "a">
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 68
Atribut awal
Anda dapat menggunakan atribut start untuk tag <ol> untuk
menentukan titik awal penomoran yang Anda perlukan. Berikut
adalah opsi yang memungkinkan -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Contoh
Berikut adalah contoh dimana kita menggunakan <ol type = "i"
start = "4" >
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 69
Daftar Definisi HTML

HTML dan XHTML mendukung Style daftar yang disebut daftar
definisi di mana entri dicantumkan seperti dalam kamus atau
ensiklopedia. Daftar definisi adalah cara ideal untuk menyajikan
glosarium, daftar istilah, atau daftar nama/nilai lainnya.
Daftar Definisi menggunakan tiga tag berikut.
•<dl> - Mendefinisikan awal daftar
•<dt> − Sebuah istilah
•<dd> - Definisi istilah
•</dl> − Mendefinisikan akhir daftar
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body>
</html>
HTML - Tautan Teks
Sebuah halaman web dapat berisi berbagai link yang membawa

Anda langsung ke halaman lain dan bahkan bagian tertentu dari
halaman tertentu. Tautan ini dikenal sebagai hyperlink.
Hyperlink memungkinkan pengunjung untuk bernavigasi antar situs
Web dengan mengklik kata, frasa, dan gambar. Dengan demikian
Anda dapat membuat hyperlink menggunakan teks atau gambar
yang tersedia di halaman web.
Note- Saya menyarankan Anda untuk mengikuti tutorial singkat
tentang Memahami URL
Menghubungkan Dokumen
Tautan ditentukan menggunakan tag HTML <a>. Tag ini disebut tag
jangkar dan apa pun di antara tag <a> pembuka dan tag </a>
penutup menjadi bagian dari tautan dan pengguna dapat mengeklik
bagian tersebut untuk membuka dokumen tertaut. Berikut adalah
sintaks sederhana untuk menggunakan tag <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>
Contoh
Mari kita coba contoh berikut yang menghubungkan
http://www.tutorialspoint.com di halaman Anda -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target =
"_self">Tutorials Point</a>
</body>
</html>
Ini akan menghasilkan hasil berikut, di mana Anda dapat mengklik
link yang dihasilkan untuk mencapai halaman beranda Tutorials
Point (dalam contoh ini).
Object 70
Atribut target
Kita telah menggunakan atribut target pada contoh
sebelumnya. Atribut ini digunakan untuk menentukan lokasi dimana
dokumen tertaut dibuka. Berikut adalah opsi yang memungkinkan -
Sr.Tidak Opsi & Deskripsi
_kosong
1
Membuka dokumen tertaut di jendela atau tab baru.
_diri sendiri
2
Membuka dokumen tertaut dalam bingkai yang sama.
_induk
3
Membuka dokumen tertaut di bingkai induk.
_atas
4
Membuka dokumen tertaut di seluruh isi jendela.
bingkai target
5 Membuka dokumen tertaut dalam targetframe bernama
.
Contoh
Coba contoh berikut untuk memahami perbedaan mendasar dalam
beberapa opsi yang diberikan untuk atribut target.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens
in New</a> |
<a href = "/html/index.htm" target = "_self">Opens
in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens
in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in
Body</a>
</body>
</html>
link yang berbeda untuk memahami perbedaan antara berbagai
opsi yang diberikan untuk atribut target.
Object 71
Penggunaan Jalur Dasar

Saat Anda menautkan dokumen HTML yang terkait dengan situs
web yang sama, Anda tidak perlu memberikan URL lengkap untuk
setiap tautan. Anda dapat menghilangkannya jika Anda
menggunakan tag <base> di header dokumen HTML Anda. Tag ini
digunakan untuk memberikan jalur dasar untuk semua tautan. Jadi
browser Anda akan menggabungkan jalur relatif tertentu ke jalur
dasar ini dan akan membuat URL lengkap.
Contoh
Contoh berikut menggunakan tag <base> untuk menentukan URL
dasar dan nantinya kita dapat menggunakan jalur relatif ke semua
tautan alih-alih memberikan URL lengkap untuk setiap tautan.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href = "/html/index.htm" target = "_blank">HTML
Tutorial</a>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat
mengklik link Tutorial HTML yang dihasilkan untuk membuka
tutorial HTML.
Sekarang URL yang diberikan <a href = "/html/index.htm"
dianggap sebagai <ahref =
"http://www.tutorialspoint.com/html/index.htm"
Object 72
Menautkan ke Bagian Halaman

Anda dapat membuat link ke bagian tertentu dari halaman web
tertentu dengan menggunakan atribut nama . Ini adalah proses dua
langkah.
Note - Atribut nama tidak digunakan lagi di HTML5. Jangan
gunakan atribut ini. Gunakan atribut id dan title sebagai
gantinya.
Pertama buat tautan ke tempat yang ingin Anda tuju di dalam
halaman web dan beri nama menggunakan tag <a...> sebagai
berikut -
<h1>HTML Text Links <a name = "top"></a></h1>
Langkah kedua adalah membuat hyperlink untuk menghubungkan
dokumen dan tempat yang ingin Anda jangkau -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
Ini akan menghasilkan tautan berikut, di mana Anda dapat
mengklik tautan yang dihasilkan Go to the Top untuk mencapai
bagian atas tutorial Tautan Teks HTML.
Go to the Top
Mengatur Warna Tautan
Anda dapat mengatur warna tautan, tautan aktif, dan tautan yang
dikunjungi menggunakan atribut link , alink dan vlink dari tag
<body>.
Contoh
Simpan yang berikut ini di test.htm dan buka di browser web apa
pun untuk melihat cara kerja atribut link , alink dan vlink .
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body alink = "#54A250" link = "#040404" vlink =
"#F40633">
<a href = "/html/index.htm" target = "_blank" >HTML
Tutorial</a>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut. Cukup periksa warna
link sebelum mengkliknya, selanjutnya periksa warnanya saat Anda
mengaktifkannya dan kapan link tersebut telah dikunjungi.
Object 73
Tautan Unduhan
Anda dapat membuat tautan teks agar file PDF, atau DOC, atau ZIP
Anda dapat diunduh. Ini sangat sederhana; Anda hanya perlu
memberikan URL lengkap dari file yang dapat diunduh sebagai
berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href =
"https://www.tutorialspoint.com/page.pdf">Download PDF
File</a>
</body>
</html>
Ini akan menghasilkan tautan berikut dan akan digunakan untuk
mengunduh file.
Object 74
Kotak Dialog Pengunduhan File

Terkadang Anda ingin memberikan opsi di mana pengguna akan
mengeklik tautan dan kotak "Unduh File" akan muncul kepada
pengguna alih-alih menampilkan konten sebenarnya. Ini sangat
mudah dan dapat dicapai dengan menggunakan header HTTP
dalam respons HTTP Anda.
Misalnya, jika Anda ingin membuat file Nama File dapat diunduh dari
tautan tertentu maka sintaksnya adalah sebagai berikut.
#!/usr/bin/perl
# Additional HTTP Header

print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){

print("$buffer");
}
Note - Untuk detail lebih lanjut tentang program PERL CGI, lihat
tutorial PERL dan CGI .
HTML - Tautan Gambar
Kita telah melihat cara membuat link hypertext menggunakan teks
dan kita juga belajar cara menggunakan gambar di halaman web
kita. Sekarang, kita akan mempelajari cara menggunakan gambar
untuk membuat hyperlink.
Contoh
Sangat mudah untuk menggunakan gambar sebagai hyperlink. Kita
hanya perlu menggunakan gambar di dalam hyperlink sebagai
pengganti teks seperti yang ditunjukkan di bawah ini -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com" target =
"_self">
<img src = "/images/logo.png" alt = "Tutorials
Point" border = "0"/>
</a>
</body>
</html>
gambar untuk mencapai halaman beranda Tutorials Point.
Object 75
Ini adalah cara paling sederhana untuk membuat hyperlink

menggunakan gambar. Selanjutnya kita akan melihat bagaimana
kita dapat membuat Tautan Gambar yang Sensitif terhadap Mouse.
Gambar yang Sensitif terhadap Mouse
Standar HTML dan XHTML menyediakan fitur yang memungkinkan
Anda menyematkan banyak tautan berbeda di dalam satu
gambar. Anda dapat membuat tautan berbeda pada satu gambar
berdasarkan koordinat berbeda yang tersedia pada gambar. Setelah
tautan berbeda dilampirkan ke koordinat berbeda, kita dapat
mengeklik bagian gambar berbeda untuk membuka dokumen
target. Gambar yang sensitif terhadap mouse dikenal sebagai peta
gambar.
Ada dua cara untuk membuat peta gambar -
•Peta gambar sisi server - Ini diaktifkan oleh atribut ismap dari tag
<img> dan memerlukan akses ke server dan aplikasi
pemrosesan peta gambar terkait.
•Client-side image map - Ini dibuat dengan atribut usemap dari tag
<img>, bersama dengan tag <map> dan <area> yang sesuai.
Peta Gambar Sisi Server
Di sini Anda cukup meletakkan gambar Anda di dalam hyper link
dan menggunakan atribut ismap yang menjadikannya gambar
khusus dan ketika pengguna mengklik suatu tempat di dalam
gambar, browser meneruskan koordinat penunjuk tetikus bersama
dengan URL yang ditentukan dalam tag <a> ke server web. Server
menggunakan koordinat penunjuk tetikus untuk menentukan
dokumen mana yang akan dikirim kembali ke browser.
Ketika ismap digunakan, atribut href dari tag <a> yang memuatnya
harus berisi URL aplikasi server seperti cgi atau skrip PHP dll. untuk
memproses permintaan masuk berdasarkan koordinat yang
diteruskan.
Koordinat posisi mouse adalah piksel layar yang dihitung dari pojok
kiri atas gambar, dimulai dengan (0,0). Koordinat, diawali dengan
tanda tanya, ditambahkan di akhir URL.
Misalnya, jika pengguna mengklik 20 piksel ke atas dan 30 piksel
ke bawah dari sudut kiri atas gambar berikut -
Yang telah dihasilkan oleh cuplikan kode berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt =
"Tutorials Point" border = "0"/>
</a>
</body>
</html>
Object 76
Kemudian browser mengirimkan parameter pencarian berikut ke

server web yang dapat diproses dengan skrip ismap.cgi atau file
peta dan Anda dapat menautkan dokumen apa pun yang Anda suka
ke koordinat ini -
/cgi-bin/ismap.cgi?20,30
Dengan cara ini Anda dapat menetapkan tautan berbeda ke
koordinat gambar yang berbeda dan ketika koordinat tersebut
diklik, Anda dapat membuka dokumen tertaut terkait. Untuk
mempelajari lebih lanjut tentang atribut ismap , Anda dapat
memeriksa Bagaimana cara menggunakan Gambar ismap?
Note - Anda akan mempelajari pemrograman CGI saat Anda
mempelajari pemrograman Perl. Anda dapat menulis skrip
Anda untuk memproses koordinat yang diteruskan ini
menggunakan PHP atau skrip lainnya juga. Untuk saat ini,
mari berkonsentrasi mempelajari HTML dan nanti Anda
dapat mengunjungi kembali bagian ini.
Peta Gambar Sisi Klien
Peta gambar sisi klien diaktifkan oleh atribut usemap dari tag
<img /> dan ditentukan oleh tag ekstensi <map> dan <area>
khusus.
Gambar yang akan membentuk peta disisipkan ke dalam halaman
menggunakan tag <img /> seperti gambar biasa, hanya saja
gambar tersebut membawa atribut tambahan yang
disebut usemap . Nilai atribut usemap adalah nilai yang akan
digunakan dalam tag <map> untuk menghubungkan tag peta dan
gambar. Tag <map> dan <area> menentukan semua koordinat
gambar dan tautan terkait.
Tag <area> di dalam tag peta, menentukan bentuk dan koordinat
untuk menentukan batas setiap hotspot yang dapat diklik yang
tersedia pada gambar. Berikut ini contoh dari peta gambar -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border
= "0" usemap = "#html"/>

<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target
= "_self" />
<area shape = "rect" coords = "5,5,40,40" alt =
"jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>
Object 77
Sistem koordinasi
Nilai sebenarnya dari coords sepenuhnya bergantung pada bentuk
yang dimaksud. Berikut ini ringkasannya, diikuti dengan contoh
detailnya -
•persegi = x 1 , y 1 , x 2 , y 2
x 1 dan y 1 adalah koordinat sudut kiri atas persegi
panjang; x 2 dan y 2 adalah koordinat pojok kanan bawah.
•lingkaran = x c , y c , jari-jari
x c dan y c adalah koordinat pusat lingkaran, dan jari-jari
adalah jari-jari lingkaran. Sebuah lingkaran berpusat pada
200,50 dengan jari-jari 25 mempunyai atribut coords =
"200,50,25"
•poli = x 1 , y 1 , x 2 , y 2 , x 3 , y 3 , ... x n , yn
Berbagai pasangan xy menentukan simpul (titik) poligon,
dengan "garis" yang ditarik dari satu titik ke titik
berikutnya. Poligon berbentuk berlian dengan titik puncaknya
pada 20,20 dan 40 piksel pada titik terlebarnya akan memiliki
atribut coords = "20,20,40,40,20,60,0,40" .
Semua koordinat relatif terhadap sudut kiri atas gambar
(0,0). Setiap bentuk memiliki URL terkait. Anda dapat
menggunakan perangkat lunak gambar apa pun untuk mengetahui
koordinat posisi yang berbeda.
HTML - Tautan Email
Tidak sulit untuk memasang link email HTML di halaman web Anda,
namun hal ini dapat menyebabkan masalah spam yang tidak perlu
pada akun email Anda. Ada orang yang dapat menjalankan
program untuk memanen email jenis ini dan kemudian
menggunakannya untuk mengirim spam dengan berbagai cara.
Anda dapat memiliki opsi lain untuk memfasilitasi orang mengirimi
Anda email. Salah satu pilihannya adalah menggunakan formulir
HTML untuk mengumpulkan data pengguna dan kemudian
menggunakan skrip PHP atau CGI untuk mengirim email.
Contoh sederhananya, periksa Formulir Hubungi Kami . Kami
menerima umpan balik pengguna menggunakan formulir ini dan
kemudian kami menggunakan satu program CGI yang
mengumpulkan informasi ini dan mengirimkan email kepada kami
ke ID email yang diberikan.
Note - Anda akan belajar tentang Formulir HTML dalam Formulir
HTML dan Anda akan belajar tentang CGI di tutorial kami yang
lain Pemrograman Perl CGI .
Tag Email HTML
Tag HTML <a> memberi Anda opsi untuk menentukan alamat email
untuk mengirim email. Saat menggunakan tag <a> sebagai tag
email, Anda akan menggunakan mailto: alamat email bersama dengan
atribut href . Berikut ini adalah sintaks penggunaan mailto daripada
menggunakan http.
<a href = "mailto: abc@example.com">Send Email</a>
Kode ini akan menghasilkan tautan berikut yang dapat Anda
gunakan untuk mengirim email.
Send Email
Sekarang, jika pengguna mengeklik tautan ini, ia akan
meluncurkan satu Klien Email (seperti Lotus Notes, Outlook
Express, dll.) yang terinstal di komputer pengguna Anda. Ada risiko
lain dalam menggunakan opsi ini untuk mengirim email karena jika
pengguna tidak menginstal klien email di komputernya maka
pengiriman email tidak dapat dilakukan.
Pengaturan Bawaan
Anda dapat menentukan subjek email default dan isi email beserta
alamat email Anda. Berikut adalah contoh penggunaan subjek dan
isi default.
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>
Kode ini akan menghasilkan tautan berikut yang dapat Anda
gunakan untuk mengirim email.
Send Feedback
HTML - Bingkai
Bingkai HTML digunakan untuk membagi jendela browser Anda

menjadi beberapa bagian di mana setiap bagian dapat memuat
dokumen HTML terpisah. Kumpulan frame di jendela browser
disebut frameset. Jendela dibagi menjadi beberapa bingkai dengan
cara yang sama seperti tabel disusun: menjadi baris dan kolom.
Kekurangan Bingkai
Ada beberapa kelemahan dalam penggunaan bingkai, jadi tidak
disarankan menggunakan bingkai di laman web Anda -
•Beberapa perangkat yang lebih kecil sering kali tidak dapat
menangani frame karena layarnya tidak cukup besar untuk
dibagi.
•Terkadang halaman Anda akan ditampilkan secara berbeda di
komputer yang berbeda karena resolusi layar yang berbeda.
•Tombol kembali pada browser mungkin tidak berfungsi sesuai
harapan pengguna.
•Masih sedikit browser yang tidak mendukung teknologi frame.
Membuat Bingkai
Untuk menggunakan frame pada halaman kita menggunakan tag
<frameset> dan bukan tag <body>. Tag <frameset> menjelaskan
cara membagi jendela menjadi beberapa bingkai. Atribut baris pada
tag <frameset> mendefinisikan bingkai horizontal dan
atribut cols mendefinisikan bingkai vertikal. Setiap frame ditandai
dengan tag <frame> dan ini menentukan dokumen HTML mana
yang akan dibuka ke dalam frame.
Note - Tag <frame> tidak digunakan lagi di HTML5. Jangan
gunakan elemen ini.
Contoh
Berikut adalah contoh untuk membuat tiga bingkai horizontal -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src =
"/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Object 78
Contoh
Mari kita letakkan contoh di atas sebagai berikut, di sini kita
mengganti atribut baris dengan kolom dan mengubah lebarnya. Ini
akan membuat ketiga bingkai secara vertikal -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm"
/>
<frame name = "right" src = "/html/bottom_frame.htm"
/>
<noframes>
</noframes>
</frameset>
</html>
Object 79
Atribut Tag <frameset>

Berikut adalah atribut penting dari tag <frameset> -
kol
Menentukan berapa banyak kolom yang terdapat dalam frameset dan ukuran setiap
kolom. Anda dapat menentukan lebar setiap kolom dengan salah satu dari empat
cara -
Nilai absolut dalam piksel. Misalnya, untuk membuat tiga bingkai vertikal,
gunakan cols = "100, 500, 100" .
Persentase jendela browser. Misalnya, untuk membuat tiga bingkai vertikal,
1 gunakan cols = "10%, 80%, 10%" .
Menggunakan simbol wildcard. Misalnya, untuk membuat tiga bingkai vertikal,
gunakan cols = "10%, *, 10%" . Dalam hal ini wildcard mengambil sisa jendela.
Sebagai lebar relatif dari jendela browser. Misalnya, untuk membuat tiga bingkai
vertikal, gunakan cols = "3*, 2*, 1*" . Ini adalah alternatif dari persentase. Anda
dapat menggunakan lebar relatif dari jendela browser. Di sini jendela dibagi menjadi
enam: kolom pertama menempati separuh jendela, kolom kedua menempati
sepertiga, dan kolom ketiga menempati seperenam.
baris
Atribut ini berfungsi seperti atribut cols dan mengambil nilai yang sama, namun
2 digunakan untuk menentukan baris dalam frameset. Misalnya, untuk membuat dua
bingkai horizontal, gunakan row = "10%, 90%" . Anda dapat menentukan tinggi
setiap baris dengan cara yang sama seperti dijelaskan di atas untuk kolom.
berbatasan
3 Atribut ini menentukan lebar batas setiap frame dalam piksel. Misalnya, batas =
"5". Nilai nol berarti tidak ada batas.
4 batas bingkai
Atribut ini menentukan apakah batas tiga dimensi harus ditampilkan di antara
bingkai. Atribut ini bernilai 1 (ya) atau 0 (tidak). Misalnya frameborder = "0" tidak
menentukan batas.
jarak bingkai
Atribut ini menentukan jumlah ruang antar frame dalam sebuah frameset. Ini dapat
5
mengambil nilai integer apa pun. Misalnya framepacing = "10" berarti harus ada
jarak 10 piksel antara setiap frame.
Atribut Tag <frame>

Berikut adalah atribut penting dari tag <frame> -
src
Atribut ini digunakan untuk memberi nama file yang harus dimuat dalam
1
frame. Nilainya bisa berupa URL apa pun. Misalnya, src = "/html/top_frame.htm"
akan memuat file HTML yang tersedia di direktori html.
nama
Atribut ini memungkinkan Anda memberi nama pada sebuah frame. Ini digunakan
untuk menunjukkan di bingkai mana dokumen harus dimuat. Hal ini sangat penting
2
ketika Anda ingin membuat link dalam satu frame yang memuat halaman ke dalam
frame lain, dalam hal ini frame kedua memerlukan nama untuk mengidentifikasi
dirinya sebagai target link.
batas bingkai
Atribut ini menentukan apakah batas bingkai tersebut ditampilkan atau tidak; itu
3
menggantikan nilai yang diberikan dalam atribut frameborder pada tag <frameset>
jika diberikan, dan ini dapat mengambil nilai 1 (ya) atau 0 (tidak).
lebar margin
Atribut ini memungkinkan Anda menentukan lebar ruang antara kiri dan kanan batas
4
bingkai serta konten bingkai. Nilai diberikan dalam piksel. Misalnya marginwidth =
"10".
marginheight
Atribut ini memungkinkan Anda menentukan ketinggian ruang antara bagian atas
5
dan bawah batas bingkai serta isinya. Nilai diberikan dalam piksel. Misalnya
marginheight = "10".
ukuran kecil
Secara default, Anda dapat mengubah ukuran bingkai apa pun dengan mengeklik dan
6
menyeret tepi bingkai. Atribut noresize mencegah pengguna mengubah ukuran
frame. Misalnya noresize = "noresize".
bergulir
Atribut ini mengontrol tampilan scrollbar yang muncul pada frame. Ini mengambil
7
nilai "ya", "tidak" atau "otomatis". Misalnya scrolling = "no" artinya tidak boleh ada
scroll bar.
8 longdesc
Atribut ini memungkinkan Anda untuk memberikan link ke halaman lain yang berisi
deskripsi panjang tentang isi frame. Misalnya longdesc = "framedescription.htm"
Dukungan Browser untuk Bingkai

Jika pengguna menggunakan browser lama atau browser apa pun,
yang tidak mendukung frame maka elemen <noframes> harus
ditampilkan kepada pengguna.
Jadi, Anda harus menempatkan elemen <body> di dalam elemen
<noframes> karena elemen <frameset> seharusnya menggantikan
elemen <body>, tetapi jika browser tidak memahami elemen
<frameset> maka browser harus memahami apa yang ada di
dalam elemen tersebut. elemen <body> yang terkandung dalam
elemen <noframes>.
Anda dapat menyampaikan pesan bagus untuk pengguna Anda
yang memiliki browser lama. Misalnya, Maaf!! browser Anda tidak
mendukung bingkai. seperti yang ditunjukkan pada contoh di atas.
Nama bingkai dan atribut target
Salah satu kegunaan bingkai yang paling populer adalah
menempatkan bilah navigasi dalam satu bingkai dan kemudian
memuat halaman utama ke dalam bingkai terpisah.
Mari kita lihat contoh berikut di mana file test.htm memiliki kode
berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
</noframes>
</frameset>
</html>
Di sini, kami telah membuat dua kolom untuk diisi dengan dua
bingkai. Bingkai pertama lebarnya 200 piksel dan akan berisi bilah
menu navigasi yang diimplementasikan oleh file menu.htm . Kolom
kedua mengisi ruang yang tersisa dan akan berisi bagian utama
halaman dan diimplementasikan oleh file main.htm . Untuk ketiga
tautan yang tersedia di bilah menu, kami telah menyebutkan
bingkai target sebagai main_page , jadi setiap kali Anda mengklik
salah satu tautan di bilah menu, tautan yang tersedia akan terbuka
di halaman utama.
Berikut isi file menu.htm
Demo Langsung
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target =
"main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target =
"main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target =
"main_page">BBC News</a>
</body>
</html>
Berikut adalah isi file main.htm -
Demo Langsung
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will
be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
Saat kami memuat file test.htm , hasilnya adalah sebagai berikut -
Object 80
Sekarang Anda bisa mencoba mengklik link yang tersedia di panel

kiri dan lihat hasilnya. Atribut target juga dapat mengambil salah
satu dari nilai berikut -
Sr.Tidak Opsi & Deskripsi
_diri sendiri
1
Memuat halaman ke dalam frame saat ini.
_kosong
2
Memuat halaman ke dalam jendela browser baru. Membuka jendela baru.
_induk
3 Memuat halaman ke dalam jendela induk, yang dalam kasus satu frameset adalah
jendela browser utama.
_atas
4
Memuat halaman ke dalam jendela browser, menggantikan frame apa pun saat ini.
bingkai target
5
Memuat halaman ke dalam bingkai target bernama.
HTML - Iframe
Anda dapat menentukan bingkai sebaris dengan tag

HTML <iframe> . Tag <iframe> tidak terkait dengan tag <frameset>,
melainkan dapat muncul di mana saja di dokumen Anda. Tag
<iframe> mendefinisikan wilayah persegi panjang dalam dokumen
di mana browser dapat menampilkan dokumen terpisah, termasuk
scrollbar dan batas. Bingkai sebaris digunakan untuk menyematkan
dokumen lain ke dalam dokumen HTML saat ini.
Atribut src digunakan untuk menentukan URL dokumen yang
menempati bingkai sebaris.
Contoh
Berikut adalah contoh untuk menunjukkan cara menggunakan
<iframe> −
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height
= "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
Object 81
Atribut Tag <Iframe>

Sebagian besar atribut tag <iframe>, termasuk nama, class,
frameborder, id, longdesc, marginheight, marginwidth, name,
scrolling, style, dan title berperilaku persis seperti atribut yang
sesuai untuk tag <frame>.
Note -
Atribut frameborder , marginwidth , longdesc , scrolling ,
marginheight tidak digunakan lagi di HTML5. Jangan
gunakan atribut ini.
src
Atribut ini digunakan untuk memberi nama file yang harus dimuat dalam
1
frame. Nilainya bisa berupa URL apa pun. Misalnya, src = "/html/top_frame.htm"
akan memuat file HTML yang tersedia di direktori html.
nama
Atribut ini memungkinkan Anda memberi nama pada sebuah frame. Ini digunakan
untuk menunjukkan di bingkai mana dokumen harus dimuat. Hal ini sangat penting
2
ketika Anda ingin membuat link dalam satu frame yang memuat halaman ke dalam
frame lain, dalam hal ini frame kedua memerlukan nama untuk mengidentifikasi
dirinya sebagai target link.
batas bingkai
Atribut ini menentukan apakah batas bingkai tersebut ditampilkan atau tidak; itu
3
menggantikan nilai yang diberikan dalam atribut frameborder pada tag <frameset>
jika diberikan, dan ini dapat mengambil nilai 1 (ya) atau 0 (tidak).
lebar margin
Atribut ini memungkinkan Anda menentukan lebar ruang antara kiri dan kanan batas
4
bingkai serta konten bingkai. Nilai diberikan dalam piksel. Misalnya marginwidth =
"10".
marginheight
Atribut ini memungkinkan Anda menentukan ketinggian ruang antara bagian atas
5
dan bawah batas bingkai serta isinya. Nilai diberikan dalam piksel. Misalnya
marginheight = "10".
tinggi
6
Atribut ini menentukan tinggi <iframe>.
bergulir
Atribut ini mengontrol tampilan scrollbar yang muncul pada frame. Ini mengambil
7
nilai "ya", "tidak" atau "otomatis". Misalnya scrolling = "no" artinya tidak boleh ada
scroll bar.
longdesc
8 Atribut ini memungkinkan Anda untuk memberikan link ke halaman lain yang berisi
deskripsi panjang tentang isi frame. Misalnya longdesc = "framedescription.htm"
lebar
9
Atribut ini menentukan lebar <iframe>.
Mulailah
HTML - Blok
Semua elemen HTML dapat dikategorikan ke dalam dua

kategori (a) Elemen Tingkat Blok (b) Elemen Inline.
Elemen Blok
Elemen blok muncul di layar seolah-olah ada jeda baris sebelum
dan sesudahnya. Misalnya, <p>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, elemen
<blockquote>, dan <address> semuanya merupakan elemen level
blok. Mereka semua memulai pada baris barunya masing-masing,
dan apa pun yang mengikutinya akan muncul pada baris barunya
sendiri.
Elemen Sebaris
Sebaliknya, elemen sebaris dapat muncul di dalam kalimat dan
tidak harus muncul di baris barunya sendiri. <b>, <i>, <u>,
<em>, <strong>, <sup>, <sub>, <besar>, <kecil>, <li>, <ins>,
<del>, < elemen code>, <cite>, <dfn>, <kbd>, dan <var>
semuanya merupakan elemen inline.
Mengelompokkan Elemen HTML
Ada dua tag penting yang sangat sering kita gunakan untuk
mengelompokkan berbagai tag HTML lainnya (i) tag <div> dan (ii)
tag <span>
Tag <div>
Ini adalah tag tingkat blok yang sangat penting yang memainkan
peran besar dalam mengelompokkan berbagai tag HTML lainnya
dan menerapkan CSS pada kelompok elemen. Bahkan sekarang tag
<div> dapat digunakan untuk membuat tata letak halaman web di
mana kita mendefinisikan bagian-bagian berbeda (Kiri, Kanan,
Atas, dll.) halaman menggunakan tag <div>. Tag ini tidak
memberikan perubahan visual apa pun pada bloknya tetapi ini lebih
bermakna bila digunakan dengan CSS.
Contoh
Berikut adalah contoh sederhana dari tag <div>. Kita akan
mempelajari Cascading Style Sheet (CSS) di bab terpisah tetapi
kami menggunakannya di sini untuk menunjukkan penggunaan tag
<div> -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>

<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
Object 82
Tag <span>
HTML <span> adalah elemen sebaris dan dapat digunakan untuk
mengelompokkan elemen sebaris dalam dokumen HTML. Tag ini
juga tidak memberikan perubahan visual apa pun pada bloknya,
namun lebih bermakna jika digunakan dengan CSS.
Perbedaan antara tag <span> dan tag <div> adalah tag <span>
digunakan dengan elemen inline sedangkan tag <div> digunakan
dengan elemen tingkat blok.
Contoh
Berikut adalah contoh sederhana dari tag <span>. Kita akan
mempelajari Cascading Style Sheet (CSS) di bab terpisah tetapi
kami menggunakannya di sini untuk menunjukkan penggunaan tag
<span> -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and
this is
<span style = "color:green">green</span></p>
</body>
</html>
HTML - Latar Belakang
Secara default, latar belakang halaman web Anda berwarna

putih. Anda mungkin tidak menyukainya, tapi jangan
khawatir. HTML memberi Anda dua cara bagus berikut untuk
mendekorasi latar belakang halaman web Anda.
•Latar Belakang HTML dengan Warna
•Latar Belakang HTML dengan Gambar
Sekarang mari kita lihat kedua pendekatan tersebut satu per satu
dengan menggunakan contoh yang sesuai.
Latar Belakang Html dengan Warna
Atribut bgcolor digunakan untuk mengontrol latar belakang elemen
HTML, khususnya latar belakang badan halaman dan tabel.
Note - Atribut bgcolor tidak digunakan lagi di
HTML5. Jangan gunakan atribut ini.
Berikut ini adalah sintaks untuk menggunakan atribut bgcolor
dengan tag HTML apa pun.
<tagname bgcolor = "color_value"...>
Nilai_warna ini dapat diberikan dalam salah satu format berikut -

<table bgcolor = "lime" >


<table bgcolor = "#f1f1f1" >


<table bgcolor = "rgb(0,0,120)" >
Contoh
Berikut adalah contoh untuk menyetel latar belakang tag HTML -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>

<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>

<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>

<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
Object 83
Latar Belakang Html dengan Gambar
Atribut background juga dapat digunakan untuk mengontrol latar
belakang elemen HTML, khususnya latar belakang badan halaman
dan tabel. Anda dapat menentukan gambar untuk mengatur latar
belakang halaman atau tabel HTML Anda.
Note - Atribut latar belakang tidak digunakan lagi di
Berikut ini adalah sintaks untuk menggunakan atribut background
dengan tag HTML apa pun.
Note - Atribut background tidak digunakan lagi dan
disarankan untuk menggunakan Style Sheet untuk
pengaturan latar belakang.
<tagname background = "Image URL"...>
Format gambar yang paling sering digunakan adalah gambar JPEG,
GIF dan PNG.
Contoh
Berikut adalah contoh untuk mengatur gambar latar belakang
sebuah tabel.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<table background = "/images/html.gif" width =
"100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
Object 84
Latar Belakang Bermotif & Transparan

Anda mungkin pernah melihat banyak pola atau latar belakang
transparan di berbagai situs web. Hal ini dapat dicapai secara
sederhana dengan menggunakan gambar berpola atau gambar
transparan di latar belakang.
Disarankan saat membuat pola atau gambar GIF atau PNG
transparan, gunakan dimensi sekecil mungkin bahkan sekecil 1x1
untuk menghindari pemuatan yang lambat.
Contoh
Berikut adalah contoh untuk mengatur pola latar belakang tabel -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<table background = "/images/pattern1.gif" width =
"100%" height = "100">
<tr>
<td>
This background is filled up with a pattern
image.
</td>
</tr>
</table>

<table background = "/images/pattern2.gif" width =
"100%" height = "100">
<tr>
<td>
This background is filled up with a pattern
image.
</td>
</tr>
</table>
</body>
</html>
HTML - Warna
Warna sangat penting untuk memberikan tampilan dan nuansa

yang bagus pada situs web Anda. Anda dapat menentukan warna
pada tingkat halaman menggunakan tag <body> atau Anda dapat
mengatur warna untuk masing-masing tag menggunakan
atribut bgcolor .
Tag <body> memiliki atribut berikut yang dapat digunakan untuk
mengatur warna berbeda -
•bgcolor - mengatur warna latar belakang halaman.
•text - mengatur warna untuk teks isi.
•alink - mengatur warna untuk tautan aktif atau tautan yang
dipilih.
•link - menetapkan warna untuk teks tertaut.
•vlink − menetapkan warna untuk tautan yang dikunjungi −
yaitu, untuk teks tertaut yang telah Anda klik.
Metode Pengkodean Warna HTML
Ada tiga metode berbeda berikut untuk mengatur warna di
halaman web Anda -
•Color Names- Anda dapat menentukan nama warna secara
langsung seperti hijau, biru, atau merah.
•Hex code - Kode enam digit yang mewakili jumlah warna
merah, hijau, dan biru yang membentuk warna.
•Nilai desimal warna atau persentase - Nilai ini ditentukan
menggunakan properti rgb( ).
Sekarang kita akan melihat skema pewarnaan ini satu per satu.
Warna HTML - Nama Warna
Anda dapat menentukan langsung nama warna untuk mengatur
warna teks atau latar belakang. W3C telah mencantumkan 16
nama warna dasar yang akan divalidasi dengan validator HTML
tetapi ada lebih dari 200 nama warna berbeda yang didukung oleh
browser utama.
Note - Periksa daftar lengkap Nama Warna HTML.
Standar W3C 16 Warna
Berikut daftar nama W3C Standard 16 Colors dan disarankan untuk
menggunakannya.
Hita Abu-
Perak Putih
m abu
Kuni jeruk fuchsi

air
ng nipis a
Mera
Hijau Biru Ungu
h
Mera Angkat
Zaitun teal
h tua an laut
Contoh
Berikut adalah contoh untuk menyetel latar belakang tag HTML
berdasarkan nama warna -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table
and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear
white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
Warna HTML - Kode Hex
Heksadesimal adalah representasi 6 digit suatu warna. Dua digit
pertama (RR) mewakili nilai merah, dua digit berikutnya adalah
nilai hijau (GG), dan yang terakhir adalah nilai biru (BB).
Nilai heksadesimal dapat diambil dari perangkat lunak grafis apa
pun seperti Adobe Photoshop, Paintshop Pro, atau MS Paint.
Setiap kode heksadesimal akan diawali dengan tanda pagar atau
tanda pagar #. Berikut adalah daftar beberapa warna
menggunakan notasi heksadesimal.
Warna Warna HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Contoh
Berikut adalah contoh untuk mengatur latar belakang tag HTML
dengan kode warna dalam heksadesimal -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear
white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
Warna HTML - Nilai RGB
Nilai warna ini ditentukan menggunakan properti rgb( ) . Properti ini
mengambil tiga nilai, masing-masing satu untuk merah, hijau, dan
biru. Nilainya bisa berupa bilangan bulat antara 0 dan 255 atau
persentase.
Note - Semua browser tidak mendukung properti warna
rgb() jadi disarankan untuk tidak menggunakannya.
Berikut ini adalah daftar untuk menampilkan beberapa warna
menggunakan nilai RGB.
Warna Warna RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255.255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192.192.19
2)
rgb(255.255.25
5)
Contoh
Berikut adalah contoh untuk menyetel latar belakang tag HTML
dengan kode warna menggunakan nilai rgb() −
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text
will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
Warna Aman Browser
Berikut adalah daftar 216 warna yang dianggap paling aman dan
tidak bergantung pada komputer. Warna-warna ini mulai dari kode
hexa 000000 hingga FFFFFF dan akan didukung oleh semua
komputer yang memiliki 256 palet warna.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC0 00CC3 00CC6 00CC9 00CCC 00CCF

0 3 6 9 C F
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF

0 3 6 9 C F
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF

0 3 6 9 C F
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF

0 3 6 9 C F
CC000 CC003 CC006 CC009 CC00C CC00F

0 3 6 9 C F

0 3 6 9 C F

0 3 6 9 C F

0 3 6 9 C F
CCCC0 CCCC CCCC CCCC CCCCC CCCCF

0 33 66 99 C F
CCFF0 CCFF3 CCFF6 CCFF9 CCFFC CCFFF

0 3 6 9 C F
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FFCC0 FFCC3 FFCC6 FFCC9 FFCCC FFCCF

0 3 6 9 C F
FFFF0 FFFF3 FFFF6 FFFF9 FFFFC

FFFFFF
0 3 6 9 C
HTML - Font
Font memainkan peran yang sangat penting dalam membuat situs

web lebih ramah pengguna dan meningkatkan keterbacaan
konten. Tampilan dan warna font bergantung sepenuhnya pada
komputer dan browser yang digunakan untuk melihat halaman
Anda, tetapi Anda dapat menggunakan tag HTML <font> untuk
menambahkan Style, ukuran, dan warna pada teks di situs web
Anda. Anda dapat menggunakan tag <basefont> untuk mengatur
semua teks Anda ke ukuran, tampilan, dan warna yang sama.
Tag font memiliki tiga atribut yang disebut size, color , dan face untuk
menyesuaikan font Anda. Untuk mengubah atribut font apa pun
kapan saja di halaman web Anda, cukup gunakan tag <font>. Teks
berikutnya akan tetap berubah sampai Anda menutupnya dengan
tag </font>. Anda dapat mengubah satu atau semua atribut font
dalam satu tag <font>.
Note −Tag font dan basefont tidak digunakan lagi dan
seharusnya dihapus di versi HTML yang akan datang. Jadi
mereka sebaiknya tidak digunakan, disarankan untuk
menggunakan Style CSS untuk memanipulasi font
Anda. Namun tetap untuk tujuan pembelajaran, bab ini
akan menjelaskan tag font dan basefont secara detail.
Atur Ukuran Font
Anda dapat mengatur ukuran font konten menggunakan
atribut size . Kisaran nilai yang diterima adalah dari 1 (terkecil)
hingga 7 (terbesar). Ukuran default font adalah 3.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
Object 85
Ukuran Font Relatif

Anda dapat menentukan berapa ukuran lebih besar atau berapa
ukuran lebih kecil dari ukuran font yang telah ditetapkan
sebelumnya. Anda dapat menentukannya seperti <font size =
"+n"> atau <font size = "−n">
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>
Object 86
Mengatur Wajah Font

Anda dapat mengatur tampilan font menggunakan
atribut face namun perlu diketahui bahwa jika pengguna yang
melihat halaman tersebut tidak menginstal font, mereka tidak akan
dapat melihatnya. Sebaliknya pengguna akan melihat tampilan font
default yang berlaku pada komputer pengguna.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br
/>
<font face = "Comic sans MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest" size =
"5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br
/>
</body>
</html>
Object 87
Tentukan tampilan font alternatif

Pengunjung hanya akan dapat melihat font Anda jika mereka
menginstal font tersebut di komputer mereka. Jadi, dimungkinkan
untuk menentukan dua atau lebih alternatif tampilan font dengan
mencantumkan nama tampilan font, dipisahkan dengan koma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
Saat halaman Anda dimuat, browser mereka akan menampilkan
font pertama yang tersedia. Jika tidak ada font yang diberikan yang
diinstal, maka akan menampilkan font default Times New Roman .
Note - Periksa daftar lengkap Font Standar HTML .
Mengatur Warna Font
Anda dapat mengatur warna font apa pun yang Anda suka
menggunakan atribut warna . Anda dapat menentukan warna yang
Anda inginkan dengan nama warna atau kode heksadesimal untuk
warna tersebut.
Note- Anda dapat memeriksa daftar lengkap Nama Warna HTML
dengan Kode .
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in
pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>
Object 88
Elemen <basefont>
Elemen <basefont> seharusnya mengatur ukuran font, warna, dan
jenis huruf default untuk setiap bagian dokumen yang tidak
terdapat dalam tag <font>. Anda dapat menggunakan elemen
<font> untuk mengganti pengaturan <basefont>.
Tag <basefont> juga mengambil atribut warna, ukuran, dan wajah
dan akan mendukung pengaturan font relatif dengan memberi
ukuran nilai +1 untuk ukuran lebih besar atau −2 untuk dua ukuran
lebih kecil.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size =
"2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color =
"#000000">
It is a courier font, a size smaller and black
in color.
</font>
</p>
</body>
</html>
HTML - Formulir
Formulir HTML diperlukan, ketika Anda ingin mengumpulkan

beberapa data dari pengunjung situs. Misalnya, saat pendaftaran
pengguna Anda ingin mengumpulkan informasi seperti nama,
alamat email, kartu kredit, dll.
Formulir akan mengambil masukan dari pengunjung situs dan
kemudian mempostingnya ke aplikasi back-end seperti CGI, skrip
ASP atau skrip PHP dll. Aplikasi back-end akan melakukan
pemrosesan yang diperlukan pada data yang diteruskan
berdasarkan logika bisnis yang ditentukan di dalamnya aplikasi.
Ada berbagai elemen formulir yang tersedia seperti bidang teks,
bidang teks, menu tarik-turun, tombol radio, kotak centang, dll.
Tag HTML <form> digunakan untuk membuat formulir HTML dan
memiliki sintaks berikut -
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
Atribut Formulir
Selain atribut umum, berikut adalah daftar atribut formulir yang
paling sering digunakan -
tindakan
1
Skrip backend siap memproses data yang Anda kirimkan.
metode
2 Metode yang akan digunakan untuk mengunggah data. Yang paling sering digunakan
adalah metode GET dan POST.
target
3 Tentukan jendela atau bingkai target dimana hasil skrip akan
ditampilkan. Dibutuhkan nilai seperti _blank, _self, _parent dll.
enctype
Anda dapat menggunakan atribut enctype untuk menentukan bagaimana browser
mengkodekan data sebelum mengirimkannya ke server. Nilai yang mungkin adalah -
4 application/x-www-form-urlencoded - Ini adalah metode standar yang digunakan
sebagian besar formulir dalam skenario sederhana.
mutlipart/form-data - Ini digunakan ketika Anda ingin mengunggah data biner
dalam bentuk file seperti gambar, file word, dll.
Note - Anda dapat merujuk ke Perl & CGI untuk detail tentang cara
kerja pengunggahan data formulir.
Kontrol Formulir HTML
Ada berbagai jenis kontrol formulir yang dapat Anda gunakan untuk
mengumpulkan data menggunakan formulir HTML -
•Kontrol Input Teks
•Kontrol Kotak Centang
•Kontrol Kotak Radio
•Pilih Kontrol Kotak
•Kotak Pilih File
•Kontrol Tersembunyi
•Tombol yang Dapat Diklik
•Tombol Kirim dan Reset
Kontrol Input Teks
Ada tiga jenis input teks yang digunakan pada formulir -
•Kontrol input teks satu baris - Kontrol ini digunakan untuk item
yang hanya memerlukan satu baris input pengguna, seperti
kotak pencarian atau nama. Mereka dibuat menggunakan tag
HTML <input> .
•Kontrol input kata sandi - Ini juga merupakan input teks satu
baris tetapi menyembunyikan karakter segera setelah
pengguna memasukkannya. Mereka juga dibuat menggunakan
tag HTML <input>.
•Kontrol input teks multi-baris - Ini digunakan ketika pengguna
diminta untuk memberikan detail yang mungkin lebih panjang
dari satu kalimat. Kontrol masukan multi-baris dibuat
menggunakan tag HTML <textarea> .
Kontrol input teks satu baris
Kontrol ini digunakan untuk item yang hanya memerlukan satu
baris input pengguna, seperti kotak pencarian atau nama. Mereka
dibuat menggunakan tag HTML <input>.
Contoh
Berikut adalah contoh dasar input teks satu baris yang digunakan
untuk mengambil nama depan dan nama belakang −
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name =
"first_name" />
<br>
Last name: <input type = "text" name = "last_name"
/>
</form>
</body>
</html>
Object 89
Atribut
Berikut adalah daftar atribut tag <input> untuk membuat kolom
teks.
jenis
1
Menunjukkan jenis kontrol input dan untuk kontrol input teks akan disetel ke text .
nama
2 Digunakan untuk memberi nama pada kontrol yang dikirimkan ke server agar
dikenali dan diambil nilainya.
nilai
3
Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.
ukuran
4
Memungkinkan untuk menentukan lebar kontrol input teks dalam bentuk karakter.
panjang maksimal
5 Memungkinkan untuk menentukan jumlah maksimum karakter yang dapat
dimasukkan pengguna ke dalam kotak teks.
Kontrol masukan kata sandi

Ini juga merupakan input teks satu baris tetapi menyembunyikan
karakter segera setelah pengguna memasukkannya. Mereka juga
dibuat menggunakan tag <input> HTML tetapi atribut type disetel
ke password .
Contoh
Berikut adalah contoh dasar input kata sandi satu baris yang
digunakan untuk mengambil kata sandi pengguna -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name =
"password" />
</form>
</body>
</html>
Object 90
Atribut
Berikut adalah daftar atribut tag <input> untuk membuat field kata
sandi.
jenis
1 Menunjukkan jenis kontrol input dan untuk kontrol input kata sandi akan disetel
ke password .
nama
nilai
3
Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.
ukuran
4
Memungkinkan untuk menentukan lebar kontrol input teks dalam bentuk karakter.
panjang maksimal
5 Memungkinkan untuk menentukan jumlah maksimum karakter yang dapat
dimasukkan pengguna ke dalam kotak teks.
Kontrol Input Teks Beberapa Baris

Ini digunakan ketika pengguna diminta untuk memberikan rincian
yang mungkin lebih panjang dari satu kalimat. Kontrol masukan
multi-baris dibuat menggunakan tag HTML <textarea>.
Contoh
Berikut adalah contoh dasar input teks multi-baris yang digunakan
untuk mengambil deskripsi item -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name =
"description">
Enter description here...
</textarea>
</form>
</body>
</html>
Object 91
Atribut
Berikut adalah daftar atribut pada tag <textarea>.
nama
baris
2
Menunjukkan jumlah baris kotak area teks.
kol
3
Menunjukkan jumlah kolom kotak area teks
Kontrol Kotak Centang

Kotak centang digunakan ketika lebih dari satu opsi diperlukan
untuk dipilih. Mereka juga dibuat menggunakan tag HTML <input>
tetapi atribut type disetel ke kotak centang. .
Contoh
Berikut adalah contoh kode HTML untuk formulir dengan dua kotak
centang -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value =
"on"> Maths
<input type = "checkbox" name = "physics" value =
"on"> Physics
</form>
</body>
</html>
Object 92
Atribut
Berikut adalah daftar atribut untuk tag <checkbox>.
jenis
1 Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kotak centang akan
disetel ke kotak centang. .
nama
nilai
3
Nilai yang akan digunakan jika kotak centang dipilih.
diperiksa
4
Atur ke dicentang jika Anda ingin memilihnya secara default.
Kontrol Tombol Radio

Tombol radio digunakan ketika dari banyak pilihan, hanya satu
pilihan yang diperlukan untuk dipilih. Mereka juga dibuat
menggunakan tag HTML <input> tetapi atribut type disetel
ke radio .
Contoh
Berikut ini contoh kode HTML untuk formulir dengan dua tombol
radio -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value =
"maths"> Maths
<input type = "radio" name = "subject" value =
"physics"> Physics
</form>
</body>
</html>
Object 93
Atribut
Berikut adalah daftar atribut untuk tombol radio.
jenis
1 Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kotak centang, ini
akan disetel ke radio.
nama
nilai
3
Nilai yang akan digunakan jika radio box dipilih.
diperiksa
4
Atur ke dicentang jika Anda ingin memilihnya secara default.
Pilih Kontrol Kotak

Kotak pilih, disebut juga kotak tarik-turun yang menyediakan opsi
untuk mencantumkan berbagai opsi dalam bentuk daftar drop-
down, dari mana pengguna dapat memilih satu atau lebih opsi.
Contoh
Berikut adalah contoh kode HTML untuk formulir dengan satu kotak
drop down
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Object 94
Atribut
Berikut adalah daftar atribut penting dari tag <select> -
nama
ukuran
2
Ini dapat digunakan untuk menampilkan kotak daftar bergulir.
banyak
3 Jika disetel ke "beberapa" maka memungkinkan pengguna untuk memilih beberapa
item dari menu.
Berikut adalah daftar atribut penting dari tag <option> −
nilai
1
Nilai yang akan digunakan jika suatu opsi pada kotak select box dipilih.
terpilih
2 Menentukan bahwa opsi ini harus menjadi nilai yang dipilih pertama kali saat
halaman dimuat.
label
3
Cara alternatif untuk memberi label opsi
Kotak Unggah File
Jika Anda ingin mengizinkan pengguna mengunggah file ke situs
web Anda, Anda perlu menggunakan kotak unggah file, yang juga
dikenal sebagai kotak pilih file. Ini juga dibuat menggunakan
elemen <input> tetapi atribut type disetel ke file .
Contoh
Berikut contoh kode HTML untuk formulir dengan satu kotak
unggah file -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept =
"image/*" />
</form>
</body>
</html>
Object 95
Atribut
Berikut adalah daftar atribut penting kotak unggah file -
nama
menerima
2
Menentukan jenis file yang diterima server.
Kontrol Tombol
Ada berbagai cara dalam HTML untuk membuat tombol yang dapat
diklik. Anda juga dapat membuat tombol yang dapat diklik
menggunakan tag <input> dengan mengatur atribut type
ke button . Atribut type dapat mengambil nilai berikut -
Sr.Tidak Jenis & Deskripsi
kirim
1
Ini menciptakan tombol yang secara otomatis mengirimkan formulir.
mengatur ulang
2 Ini membuat tombol yang secara otomatis mengatur ulang kontrol formulir ke nilai
awalnya.
tombol
3 Ini menciptakan tombol yang digunakan untuk memicu skrip sisi klien ketika
pengguna mengklik tombol itu.
gambar
4 Ini menciptakan tombol yang dapat diklik tetapi kita dapat menggunakan gambar
sebagai latar belakang tombol tersebut.
Contoh
Berikut contoh kode HTML untuk formulir dengan tiga jenis tombol
-
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type = "submit" name = "submit" value =
"Submit" />
<input type = "reset" name = "reset" value =
"Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
"/html/images/logo.png" />
</form>
</body>
</html>
Object 96
Kontrol Formulir Tersembunyi

Kontrol formulir tersembunyi digunakan untuk menyembunyikan
data di dalam halaman yang nantinya dapat dikirim ke
server. Kontrol ini bersembunyi di dalam kode dan tidak muncul di
halaman sebenarnya. Misalnya, formulir tersembunyi berikut
digunakan untuk menyimpan nomor halaman saat ini. Ketika
pengguna mengklik halaman berikutnya maka nilai kontrol
tersembunyi akan dikirim ke server web dan di sana akan
diputuskan halaman mana yang akan ditampilkan berikutnya
berdasarkan halaman saat ini yang dilewati.
Contoh
Berikut adalah contoh kode HTML untuk menunjukkan penggunaan
kontrol tersembunyi -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value =
"10" />
<input type = "submit" name = "submit" value =
"Submit" />
<input type = "reset" name = "reset" value =
"Reset" />
</form>
</body>
</html>
HTML - Sematkan Multimedia
Terkadang Anda perlu menambahkan musik atau video ke halaman

web Anda. Cara termudah untuk menambahkan video atau suara
ke situs web Anda adalah dengan menyertakan tag HTML khusus
yang disebut <embed> . Tag ini menyebabkan browser itu sendiri
menyertakan kontrol untuk multimedia secara otomatis asalkan
browser mendukung tag <embed> dan jenis media tertentu.
Anda juga dapat menyertakan tag <noembed> untuk browser yang
tidak mengenali tag <embed>. Anda dapat, misalnya,
menggunakan <embed> untuk menampilkan film pilihan Anda,
dan <noembed> untuk menampilkan satu gambar JPG jika browser
tidak mendukung tag <embed>.
Contoh
Berikut adalah contoh sederhana untuk memutar file midi yang
disematkan -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%"
height = "60" >
<noembed><img src = "yourimage.gif" alt =
"Alternative Media" ></noembed>
</embed>
</body>
</html>
Atribut Tag <embed>
Berikut adalah daftar atribut penting yang dapat digunakan dengan
tag <embed>.
Note − Atribut align dan autostart tidak digunakan lagi di
meluruskan
1
Menentukan cara menyelaraskan objek. Itu dapat diatur ke tengah, kiri atau kanan .
mulai otomatis
2 Atribut boolean ini menunjukkan apakah media harus dimulai secara otomatis. Anda
dapat mengaturnya menjadi benar atau salah.
lingkaran
3 Menentukan apakah suara harus diputar terus menerus (atur loop ke true), beberapa
kali (nilai positif) atau tidak dimainkan sama sekali (false)
jumlah permainan
4 Menentukan berapa kali memutar suara. Ini adalah opsi alternatif untuk loop jika
Anda menggunakan IE.
tersembunyi
5 Menentukan apakah objek multimedia harus ditampilkan pada halaman. Nilai yang
salah berarti tidak dan nilai yang benar berarti ya.
lebar
6
Lebar objek dalam piksel
tinggi
7
Tinggi objek dalam piksel
nama
8
Nama yang digunakan untuk mereferensikan objek.
src
9
URL objek yang akan disematkan.
volume
10
Mengontrol volume suara. Bisa dari 0 (mati) hingga 100 (volume penuh).
Jenis Video yang Didukung

Anda dapat menggunakan berbagai jenis media seperti film Flash
(.swf), jenis file AVI (.avi), dan MOV (.mov) di dalam tag semat.
•.swf files - adalah jenis file yang dibuat oleh program Flash
Macromedia.
•.wmv files - adalah jenis file Media Video Microsoft Window.
•.mov files - adalah format Film Waktu Cepat Apple.
•.mpeg files - adalah file film yang dibuat oleh Moving Pictures
Expert Group.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200"
height = "200" >
<noembed><img src = "yourimage.gif" alt =
"Alternative Media" ></noembed>
</embed>
</body>
</html>
Object 97
Audio Latar Belakang

Anda dapat menggunakan tag HTML <bgsound> untuk memutar
soundtrack di latar belakang halaman web Anda. Tag ini hanya
didukung oleh Internet Explorer dan sebagian besar browser lain
mengabaikan tag ini. Ini mengunduh dan memutar file audio ketika
dokumen host pertama kali diunduh oleh pengguna dan
ditampilkan. File suara latar belakang juga akan diputar ulang
setiap kali pengguna menyegarkan browser.
Note - Tag bgsound sudah tidak digunakan lagi dan seharusnya
dihapus di versi HTML yang akan datang. Jadi sebaiknya tidak
digunakan, disarankan untuk menggunakan audio tag HTML5 untuk
menambahkan suara. Namun tetap untuk tujuan pembelajaran,
bab ini akan menjelaskan tag bgsound secara detail.
Tag ini hanya memiliki dua atribut loop dan src . Kedua atribut ini
memiliki arti yang sama seperti yang dijelaskan di atas.
Berikut adalah contoh sederhana untuk memutar file midi kecil -
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>
Ini akan menghasilkan layar kosong. Tag ini tidak menampilkan
komponen apa pun dan tetap tersembunyi.
Internet Explorer juga hanya dapat menangani tiga file format
suara yang berbeda − wav, format asli untuk PC; au, format asli
untuk sebagian besar workstation Unix; dan MIDI, skema
pengkodean musik universal.
Tag Objek HTML
HTML 4 memperkenalkan elemen <object> , yang menawarkan solusi
serba guna untuk penyertaan objek
umum. Elemen <object> memungkinkan penulis HTML untuk
menentukan segala sesuatu yang diperlukan oleh suatu objek
untuk presentasinya oleh agen pengguna.
Berikut beberapa contohnya -
Contoh 1
Anda dapat menyematkan dokumen HTML ke dalam dokumen
HTML itu sendiri sebagai berikut -
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>
Di sini atribut alt akan muncul jika browser tidak mendukung
tag objek .
Contoh - 2
Anda dapat menyematkan dokumen PDF ke dalam dokumen HTML
sebagai berikut -
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>
Contoh - 3
Anda dapat menentukan beberapa parameter terkait dokumen
dengan tag <param> . Berikut adalah contoh untuk menyematkan
file wav -
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>
Contoh - 4
Anda dapat menambahkan dokumen flash sebagai berikut -
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />

<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>
Contoh - 5
Anda dapat menambahkan applet Java ke dalam dokumen HTML
sebagai berikut -
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>
Atribut classid mengidentifikasi versi Plug-in Java mana yang akan
digunakan. Anda dapat menggunakan atribut basis
kode opsional untuk menentukan apakah dan bagaimana
mengunduh JRE.
HTML - Tenda
Tenda HTML adalah bagian teks bergulir yang ditampilkan secara

horizontal atau vertikal ke bawah halaman web Anda, bergantung
pada pengaturannya. Ini dibuat dengan menggunakan tag HTML
<marquees>.
Note - Tag <marquee> tidak digunakan lagi di
HTML5. Jangan gunakan elemen ini, sebagai gantinya Anda
dapat menggunakan JavaScript dan CSS untuk membuat
efek tersebut.
Sintaksis
Sintaks sederhana untuk menggunakan tag HTML <marquee>
adalah sebagai berikut -
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>
Atribut Tag <marquee>
Berikut adalah daftar atribut penting yang dapat digunakan dengan
tag <marquee>.
lebar
1
Ini menentukan lebar tenda. Ini bisa berupa nilai seperti 10 atau 20% dll.
tinggi
2
Ini menentukan ketinggian tenda. Ini bisa berupa nilai seperti 10 atau 20% dll.
arah
3 Ini menentukan arah di mana tenda harus digulir. Ini bisa berupa nilai seperti atas,
bawah, kiri, atau kanan .
perilaku
4 Ini menentukan jenis pengguliran tenda. Ini dapat memiliki nilai seperti scroll,
slide dan Alternative .
penundaan gulir
5 Ini menentukan berapa lama waktu tunda antara setiap lompatan. Ini akan memiliki
nilai seperti 10 dll.
jumlah gulir
6
Ini menentukan kecepatan teks tenda. Ini dapat memiliki nilai seperti 10 dll.
lingkaran
7 Ini menentukan berapa kali untuk mengulang. Nilai defaultnya adalah INFINITE,
yang berarti marquee berputar tanpa henti.
bgcolor
8
Ini menentukan warna latar belakang dalam hal nama warna atau nilai hex warna.
ruang
9 Ini menentukan ruang horizontal di sekitar tenda. Ini bisa berupa nilai seperti 10 atau
20% dll.
10 vspace
Ini menentukan ruang vertikal di sekitar tenda. Ini bisa berupa nilai seperti 10 atau
20% dll.
Berikut adalah beberapa contoh untuk menunjukkan penggunaan
tag marquee.
Contoh - 1
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
Object 98
Contoh - 2
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee width = "50%">This example will take only
50% width</marquee>
</body>
</html>
Object 99
Contoh - 3
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee direction = "right">This text will scroll
from left to right</marquee>
</body>
</html>
Object 100
Contoh - 4
Demo Langsung
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee direction = "up">This text will scroll from
bottom to up</marquee>
</body>
</html>
HTML - Tajuk
Kita telah mempelajari bahwa dokumen HTML pada umumnya
memiliki struktur berikut -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Bab ini akan memberikan sedikit lebih detail tentang bagian header
yang diwakili oleh tag HTML <head>. Tag <head> merupakan
wadah dari berbagai tag penting seperti tag <title>, <meta>,
<link>, <base>, <style>, <script>, dan <noscript>.
Tag <Heading> HTML
Tag HTML <title> digunakan untuk menentukan Heading dokumen
HTML. Berikut adalah contoh pemberian Heading pada dokumen
HTML -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Object 101
Tag <meta> HTML
Tag HTML <meta> digunakan untuk memberikan metadata tentang
dokumen HTML yang mencakup informasi tentang kedaluwarsa
halaman, penulis halaman, daftar kata kunci, deskripsi halaman,
dll.
Berikut adalah beberapa penggunaan penting tag <meta> di dalam
dokumen HTML -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>

<meta name = "keywords" content = "C, C++, Java,
PHP, Perl, Python">

<meta name = "description" content = "Simply Easy
Learning by Tutorials Point">

<meta name = "author" content = "Tutorials Point">

<meta http-equiv = "content-type" content =
"text/html; charset = UTF-8">

<meta http-equiv = "refresh" content = "30">

<meta http-equiv = "expires" content = "Wed, 21 June
2006 14:25:27 GMT">

<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
</body>
</html>
Object 102
Tag HTML <basis>

Tag HTML <base> digunakan untuk menentukan URL dasar untuk
semua URL relatif di halaman, yang berarti semua URL lainnya akan
digabungkan menjadi URL dasar saat mencari item tertentu.
Misalnya, semua halaman dan gambar tertentu akan dicari setelah
mengawali URL yang diberikan dengan URL dasar direktori
http://www.tutorialspoint.com/ -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML
Tutorial"/>HTML Tutorial</a>
</body>
</html>
Object 103
Tetapi jika Anda mengubah URL dasar ke yang lain, misalnya jika
URL dasar adalah http://www.tutorialspoint.com/home maka
gambar dan tautan lain yang diberikan akan menjadi seperti
http://www.tutorialspoint.com/home/images /logo.png dan
http://www.tutorialspoint.com/html/index.htm
Tag <tautan> HTML
Tag HTML <link> digunakan untuk menentukan hubungan antara
dokumen saat ini dan sumber daya eksternal. Berikut adalah
contoh untuk menautkan file style sheet eksternal yang tersedia
di subdirektori css dalam root web -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<link rel = "stylesheet" type = "text/css" href =
"/css/style.css">
</head>
<body>
</body>
</html>
Object 104
Tag HTML <Style>

Tag HTML <style> digunakan untuk menentukan style sheet untuk
dokumen HTML saat ini. Berikut adalah contoh untuk
mendefinisikan beberapa aturan style sheet di dalam tag <style> −
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
Object 105
Note - Untuk mempelajari cara kerja Cascading Style Sheet, silakan

lihat tutorial terpisah yang tersedia di css
Tag <skrip> HTML
Tag HTML <script> digunakan untuk menyertakan file skrip
eksternal atau untuk menentukan skrip internal untuk dokumen
HTML. Berikut adalah contoh di mana kita menggunakan JavaScript
untuk mendefinisikan fungsi JavaScript sederhana -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name =
"ok" value = "OK" />
</body>
</html>
Ini akan menghasilkan hasil berikut, di mana Anda dapat mencoba
mengklik tombol yang diberikan -
Object 106
Note - Untuk mempelajari cara kerja JavaScript, silakan lihat tutorial

terpisah yang tersedia di javascrip
HTML - Lembar Style
Cascading Style Sheets (CSS) mendeskripsikan bagaimana

dokumen ditampilkan di layar, di media cetak, atau mungkin cara
pengucapannya. W3C telah secara aktif mempromosikan
penggunaan style sheet di Web sejak konsorsium ini didirikan pada
tahun 1994.
Cascading Style Sheets (CSS) memberikan alternatif yang mudah
dan efektif untuk menentukan berbagai atribut untuk tag
HTML. Dengan menggunakan CSS, Anda dapat menentukan
sejumlah properti Style untuk elemen HTML tertentu. Setiap
properti memiliki nama dan nilai, dipisahkan dengan titik dua
(:). Setiap deklarasi properti dipisahkan dengan titik koma (;).
Contoh
Pertama mari kita pertimbangkan contoh dokumen HTML yang
menggunakan tag <font> dan atribut terkait untuk menentukan
warna teks dan ukuran font -
Note - Tag font tidak digunakan lagi dan seharusnya
dihapus di versi HTML yang akan datang. Jadi mereka
sebaiknya tidak digunakan, disarankan untuk
menggunakan Style CSS untuk memanipulasi font
Anda. Namun tetap untuk tujuan pembelajaran, bab ini
akan bekerja dengan contoh penggunaan tag font.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello,
World!</font></p>
</body>
</html>
Kita dapat menulis ulang contoh di atas dengan bantuan Style
Sheet sebagai berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello,
World!</p>
</body>
</html>
Object 107
Anda dapat menggunakan CSS dalam tiga cara di dokumen HTML

Anda -
•External Style Sheet - Tentukan aturan style sheet dalam file .css
terpisah dan kemudian sertakan file tersebut dalam dokumen
HTML Anda menggunakan tag <link> HTML.
•Internal Style Sheet - Tentukan aturan style sheet di bagian
header dokumen HTML menggunakan tag <style>.
•Inline Style Sheet - Tentukan aturan style sheet secara langsung
bersama dengan elemen HTML menggunakan atribut style .
Mari kita lihat ketiga kasus tersebut satu per satu dengan bantuan
contoh yang sesuai.
Lembar Style Eksternal
Jika Anda perlu menggunakan style sheet Anda ke berbagai
halaman, maka selalu disarankan untuk mendefinisikan style sheet
umum dalam file terpisah. File cascading style sheet akan memiliki
ekstensi .css dan akan disertakan dalam file HTML menggunakan tag
<link>.
Contoh
Anggaplah kita mendefinisikan file style sheet style.css yang memiliki
aturan berikut -
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Di sini kami mendefinisikan tiga aturan CSS yang akan berlaku
untuk tiga class berbeda yang ditentukan untuk tag HTML. Saya
sarankan Anda tidak perlu memikirkan bagaimana aturan-aturan ini
didefinisikan karena Anda akan mempelajarinya sambil mempelajari
CSS. Sekarang mari kita gunakan file CSS eksternal di atas dalam
dokumen HTML berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href =
"/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Object 108
Lembar Style Internal

Jika Anda ingin menerapkan aturan Style Sheet pada satu dokumen
saja, maka Anda dapat menyertakan aturan tersebut di bagian
header dokumen HTML menggunakan tag <style>.
Aturan yang ditentukan dalam style sheet internal akan
menggantikan aturan yang ditentukan dalam file CSS eksternal.
Contoh
Mari kita tulis ulang contoh di atas sekali lagi, tetapi di sini kita
akan menulis aturan style sheet dalam dokumen HTML yang sama
menggunakan tag <style> -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Object 109
Lembar Style Sebaris

Anda dapat menerapkan aturan style sheet secara langsung ke
elemen HTML apa pun menggunakan atribut style dari tag yang
relevan. Ini harus dilakukan hanya jika Anda tertarik untuk
membuat perubahan tertentu pada elemen HTML saja.
Aturan yang didefinisikan sejajar dengan elemen akan
menggantikan aturan yang ditentukan dalam file CSS eksternal
serta aturan yang ditentukan dalam elemen <style>.
Contoh
Mari kita tulis ulang contoh di atas sekali lagi, tetapi di sini kita
akan menulis aturan style sheet beserta elemen HTML
menggunakan atribut style dari elemen tersebut.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is
thick and green</p>
</body>
</html>
HTML-JavaScript
Skrip adalah bagian kecil dari program yang dapat menambah

interaktivitas ke situs web Anda . Misalnya, skrip dapat
menghasilkan pesan kotak peringatan pop-up, atau menyediakan
menu dropdown. Skrip ini dapat ditulis menggunakan JavaScript
atau VBScript.
Anda dapat menulis berbagai fungsi kecil, yang disebut event
handler menggunakan bahasa skrip apa pun dan kemudian Anda
dapat memicu fungsi tersebut menggunakan atribut HTML.
Saat ini, hanya JavaScript dan kerangka terkait yang digunakan oleh
sebagian besar pengembang web, VBScript bahkan tidak didukung
oleh berbagai browser utama.
Anda dapat menyimpan kode JavaScript dalam file terpisah dan
kemudian memasukkannya di mana pun diperlukan, atau Anda
dapat menentukan fungsionalitas di dalam dokumen HTML itu
sendiri. Mari kita lihat kedua kasus tersebut satu per satu dengan
contoh yang sesuai.
JavaScript Eksternal
Jika Anda akan menentukan fungsi yang akan digunakan dalam
berbagai dokumen HTML maka lebih baik menyimpan fungsi
tersebut dalam file JavaScript terpisah dan kemudian menyertakan
file tersebut dalam dokumen HTML Anda. File JavaScript akan
memiliki ekstensi .js dan akan disertakan dalam file HTML
menggunakan tag <script>.
Contoh
Anggaplah kita mendefinisikan fungsi kecil menggunakan JavaScript
di script.js yang memiliki kode berikut -
function Hello() {
}
Sekarang mari kita gunakan file JavaScript eksternal di atas dalam
dokumen HTML berikut -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type =
"text/javascript"/></script>
</head>
<body>
"ok" value = "Click Me" />
</body>
</html>
Object 110
Skrip Internal
Anda dapat menulis kode skrip Anda langsung ke dalam dokumen
HTML Anda. Biasanya kami menyimpan kode skrip di header
dokumen menggunakan tag <script>, jika tidak, tidak ada batasan
dan Anda dapat meletakkan kode sumber Anda di mana saja di
dokumen tetapi di dalam tag <script>.
Contoh
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
function Hello() {
}
</script>
</head>
<body>
"ok" value = "Click Me" />
</body>
</html>
Object 111
Penangan Acara
Penangan peristiwa tidak lain hanyalah fungsi yang didefinisikan
secara sederhana yang dapat dipanggil terhadap peristiwa mouse
atau keyboard apa pun. Anda dapat menentukan logika bisnis Anda
di dalam pengendali peristiwa yang dapat bervariasi dari satu
hingga 1000 kode baris.
Contoh berikut menjelaskan cara menulis event handler. Mari kita
tulis satu fungsi sederhana EventHandler() di header
dokumen. Kami akan memanggil fungsi ini ketika ada pengguna
yang mengarahkan mouse ke suatu paragraf.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse
here to see an alert</p>
</body>
</html>
Sekarang Ini akan menghasilkan hasil sebagai berikut. Arahkan
mouse Anda ke baris ini dan lihat hasilnya -
Object 112
Sembunyikan Skrip dari Browser Lama

Meskipun sebagian besar (jika tidak semua) browser saat ini
mendukung JavaScript, namun masih ada beberapa browser lama
yang tidak mendukungnya. Jika browser tidak mendukung
JavaScript, alih-alih menjalankan skrip Anda, browser akan
menampilkan kode tersebut kepada pengguna. Untuk mencegah
hal ini, Anda cukup menempatkan komentar HTML di sekitar skrip
seperti yang ditunjukkan di bawah ini.
JavaScript Example:

</script>
VBScript Example:
<script type = "text/vbscript">

</script>
Elemen <noscript>
Anda juga dapat memberikan info alternatif kepada pengguna yang
browsernya tidak mendukung skrip dan bagi pengguna yang telah
menonaktifkan opsi skrip di browsernya. Anda dapat melakukannya
menggunakan tag <noscript> .
JavaScript Example:

</script>
<noscript>Your browser does not support JavaScript!
</noscript>
VBScript Example:
<script type = "text/vbscript">

</script>
<noscript>Your browser does not support
VBScript!</noscript>
Bahasa Skrip Default
Mungkin ada situasi ketika Anda akan memasukkan beberapa file
skrip dan akhirnya menggunakan beberapa tag <script>. Anda
dapat menentukan bahasa skrip default untuk semua
tag skrip Anda . Ini menyelamatkan Anda dari menentukan bahasa
setiap kali Anda menggunakan tag skrip dalam halaman. Di bawah
ini contohnya -
<meta http-equiv = "Content-Script-Type" content =
"text/JavaScript" />
Perhatikan bahwa Anda masih dapat mengganti default dengan
menentukan bahasa dalam tag skrip.
HTML - Tata Letak
Tata letak halaman web sangat penting untuk memberikan tampilan

yang lebih baik pada situs web Anda. Dibutuhkan banyak waktu
untuk merancang tata letak situs web dengan tampilan dan nuansa
yang bagus.
Saat ini, semua situs web modern menggunakan kerangka kerja
berbasis CSS dan JavaScript untuk menghasilkan situs web yang
responsif dan dinamis, tetapi Anda dapat membuat tata letak yang
baik menggunakan tabel HTML sederhana atau tag pembagian yang
dikombinasikan dengan tag pemformatan lainnya. Bab ini akan
memberi Anda beberapa contoh tentang cara membuat tata letak
yang sederhana namun berfungsi untuk laman web Anda
menggunakan HTML murni dan atributnya.
Tata Letak HTML - Menggunakan Tabel
Cara paling sederhana dan populer untuk membuat layout adalah
menggunakan tag HTML <table>. Tabel ini disusun dalam kolom
dan baris, sehingga Anda dapat memanfaatkan baris dan kolom ini
sesuka Anda.
Contoh
Misalnya, contoh tata letak HTML berikut dicapai menggunakan
tabel dengan 3 baris dan 2 kolom tetapi kolom header dan footer
mencakup kedua kolom menggunakan atribut colspan -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height =
"200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>
Object 113
Tata Letak Beberapa Kolom - Menggunakan Tabel

Anda dapat mendesain halaman web Anda untuk menempatkan
konten web Anda di beberapa halaman. Anda dapat menyimpan
konten Anda di kolom tengah dan Anda dapat menggunakan kolom
kiri untuk menggunakan menu dan kolom kanan dapat digunakan
untuk memasang iklan atau hal lainnya. Tata letak ini akan sangat
mirip dengan apa yang kita miliki di situs web kita
tutorialspoint.com.
Contoh
Berikut adalah contoh untuk membuat tata letak tiga kolom -
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width =
"60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>
Object 114
Tata Letak HTML - Menggunakan DIV, SPAN
Elemen <div> adalah elemen tingkat blok yang digunakan untuk
mengelompokkan elemen HTML. Meskipun tag <div> adalah
elemen tingkat blok, elemen HTML <span> digunakan untuk
mengelompokkan elemen pada tingkat sebaris.
Meskipun kita dapat mencapai tata letak yang cukup bagus dengan
tabel HTML, namun tabel tidak benar-benar dirancang sebagai alat
tata letak. Tabel lebih cocok untuk menyajikan data berbentuk
tabel.
Note - Contoh ini menggunakan Cascading Style Sheet (CSS), jadi
sebelum memahami contoh ini Anda perlu memiliki pemahaman
yang lebih baik tentang cara kerja CSS.
Contoh
Di sini kita akan mencoba untuk mencapai hasil yang sama dengan
menggunakan tag <div> bersama dengan CSS, apa pun yang telah
Anda capai menggunakan tag <table> pada contoh sebelumnya.
Demo Langsung
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3;
width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px;
width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px;
width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px;
width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3;
clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>
Object 115
Anda dapat membuat tata letak yang lebih baik menggunakan DIV,
SPAN, dan CSS. Untuk informasi lebih lanjut tentang CSS, silakan
lihat Tutorial CSS.

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial HTML

HTML adalah singkatan dari Hyper Text Markup Language , yang

Coba gunakan kode yang sama tanpa menyimpannya di

<p> Ini adalah isi paragraf. </p>

Ini adalah Heading

Ini adalah konten

Kita telah melihat beberapa tag HTML dan penggunaannya seperti

Sekarang coba arahkan kursor Anda ke "Contoh Tag Heading

ltr Kiri ke kanan (nilai default)

Ketika atribut dir digunakan dalam tag <html>, atribut ini

meluruskan kanan, kiri, tengah Meratakan tag secara horizontal

latar Menempatkan gambar latar belakang di belakang

Memberi nama elemen untuk digunakan dengan

Mengklasifikasikan elemen untuk digunakan dengan

Heading Ditetapkan pengguna Heading elemen "Pop-up".

Jika Anda menggunakan pengolah kata, Anda pasti sudah familiar

Teks yang digarisbawahi

Font Berspasi Tunggal

Teks yang Disisipkan

Teks Lebih Besar

Teks Lebih Kecil

Sebaliknya, elemen <span> dapat digunakan untuk

Tag ini biasanya digunakan dengan CSS untuk memungkinkan Anda

HTML - Tag Frasa

Tag frase telah dihilangkan warnanya untuk tujuan tertentu,

Teks yang Ditandai

Teks yang Kuat

Teks Papan Ketik

HTML memungkinkan Anda menentukan metadata - informasi

Menentukan Kata Kunci

Komentar adalah sepotong kode yang diabaikan oleh browser web

Namun, baris berikut bukanlah komentar yang valid dan akan

Namun jika Anda tidak menggunakan IE, maka akan menghasilkan

Mengomentari Kode Skrip

Mengomentari Style Sheet

Anda dapat menggunakan file gambar PNG, JPEG atau GIF

Atur Lebar/Tinggi Gambar

Atur Batas Gambar

Atur Perataan Gambar

Grafik Web Gratis

Tabel HTML memungkinkan penulis web untuk mengatur data

Di sini, perbatasan adalah atribut dari tag <table> dan digunakan

Atribut Cellpadding dan Cellspacing

Atribut Colspan dan Rowspan

Latar Belakang Tabel

Berikut adalah contoh penggunaan atribut background . Di sini kita

Tinggi dan Lebar Meja

Header Tabel, Badan, dan Footer

HTML menawarkan penulis web tiga cara untuk menentukan daftar

Daftar Urutan HTML

Daftar Definisi HTML

Sebuah halaman web dapat berisi berbagai link yang membawa

Penggunaan Jalur Dasar

Menautkan ke Bagian Halaman

Kotak Dialog Pengunduhan File

# Additional HTTP Header

while(read(FILE, $buffer, 100)){

Ini adalah cara paling sederhana untuk membuat hyperlink

Kemudian browser mengirimkan parameter pencarian berikut ke

Bingkai HTML digunakan untuk membagi jendela browser Anda

Atribut Tag <frameset>

Atribut Tag <frame>

Dukungan Browser untuk Bingkai

Sekarang Anda bisa mencoba mengklik link yang tersedia di panel