Ringakasan HTML 1-11

BAB 1
HTML DASAR
Pada Bab pertama ini, bab awal untuk mempelajari HTML. Pembahasan pada bab ini adalah
contoh HTML dasar.
Dokumen HTML
Semua Dokumen HTML harus dimulai dengan deklarasi tipe dokumen: <!DOCTYPE html>
Dokumen HTML dimulai dengan <html> dan diakhiri dengan </html>. Bagian yang terlihat
dari dokumen HTML adalah antara <body>dan </body>.
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>Judul Pertama Saya </h1>

<p>Paragraf Pertama Saya.</p>
</body>
</html>
Hasil
Deklarasi <!DOCTYPE>
Deklarasi <!DOCTYPE> mewakili jenis dokumen, dan membantu browser untuk menampilkan
halaman web dengan benar. Itu hanya boleh muncul sekali, di bagian atas halaman (sebelum tag
HTML apa pun).
Deklarasi <!DOCTYPE> tidak peka huruf besar/kecil.

Deklarasi <!DOCTYPE>untuk HTML5 adalah:
<!DOCTYPE html>
Headings HTML
Judul HTML didefinisikan dengan tag <h1> hingga <h6>. <h1> mendefinisikan judul besar. <h6>
mendefinisikan sub-sub judul:
Contoh
<h1> Ini Judul 1</h1>
Hasil
Paragraf HTML
Paragraf HTML didefinisikan dengan tag <p>:
Contoh
<p>Ini adalah Paragraf</p>

<p>Ini adalag Paragraf
lainnya.</p>
Hasil
Link HTML
Paragraf HTML didefinisikan dengan tag <a>
Contoh:
<a href="https://www.w3schools.com"> Ini
adalah tautan </a>
Hasil
Tujuan tautan ditentukan dalam atribut href.

Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML.
Gambar HTML
Gambar HTML didefinisikan dengan <img>. File sumber (src), teks alternatif (alt), lebar, dan
tinggi disediakan sebagai atribut:
Contoh
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Hasil
Lihat Kode Sumber HTML:

Klik kanan di halaman HTML dan pilih "Lihat Sumber Halaman" (di Chrome) atau "Lihat
Sumber" (di Edge), atau yang serupa di browser lain. Ini akan membuka jendela yang berisi kode
sumber HTML halaman.
Periksa Elemen HTML:

Klik kanan pada elemen (atau area kosong), dan pilih "Periksa" atau "Periksa Elemen" untuk
melihat elemen apa yang dibuat (Anda akan melihat HTML dan CSS). Anda juga dapat
mengedit HTML atau CSS dengan cepat di panel Elemen atau Gaya yang terbuka.
BAB 2
ELEMEN HTML
Elemen HTML didefinisikan oleh tag awal, beberapa isi, dan tag akhir.
Elemen HTML
Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:
<tagname>Isi disini..</tagname>
Contoh beberapa elemen HTML:

<h1>Judul Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
Tag awal Isi elemen Tag akhir

<h1> Judul Pertama Saya </h1>
<p> Paragraf pertama saya </p>
<br> Tidak ada Tidak ada
Catatan: Beberapa elemen HTML tidak memiliki konten (seperti elemen <br>). Elemen-elemen
ini disebut elemen kosong. Elemen kosong tidak memiliki tag penutup.
Elemen HTML Bersarang

Elemen HTML dapat bersarang (ini berarti elemen dapat berisi elemen lain). Semua dokumen
HTML terdiri dari elemen HTML bersarang. Contoh berikut berisi empat elemen HTML
(<html>, <body>, <h1> dan <p>):
Contoh
<!DOCTYPE html>
<html>
<body>
<h1>Judul Pertama Saya</h1>

<p>Paragraf Pertama Saya</p>
</body>
</html>
Hasil
Penjelasan Contoh
Elemen <html> adalah elemen root dan mendefinisikan seluruh dokumen HTML. Ini memiliki
tag awal <html> dan tag akhir </html>
Kemudian, di dalam elemen <html> ada elemen <body>:
<body>

<p> Paragraf Pertama Saya </p>
</body
Elemen <body> mendefinisikan isi dokumen.

Ini memiliki tag awal <body> dan tag akhir </body>.
Kemudian, di dalam elemen <body> ada dua elemen lainnya: <h1> dan <p>:
<p> Paragraf Pertama Saya </p>
Elemen <h1> mendefinisikan heading.
Ini memiliki tag awal <h1> dan tag akhir </h1>
<h1 Judul Pertama Saya </h1>
Elemen <p> mendefinisikan sebuah paragraf.

Ini memiliki tag awal <p>dan tag akhir </p>:
Jangan Lewati Tag Akhir

Beberapa elemen HTML akan ditampilkan dengan benar, bahkan jika lupa tag akhir:
Contoh:
<html>
<body>
<p> Ini adalah paragraf

<p> Ini adalah paragraf
</body>
</html>
Hasil:
Namun, jangan pernah melakukan ini! Hasil dan kesalahan yang tidak terduga dapat
terjadi jika lupa tag akhir.
Elemen HTML Kosong
Elemen HTML tanpa isi disebut elemen kosong.
Tag <br> mendefinisikan jeda baris, dan merupakan elemen kosong tanpa tag penutup:
Contoh:
<p> Ini adalah <br> paragraf dengan jeda
baris </p>
Hasil:
HTML Sensitif Huruf Besar-kecil

Tag HTML sensitif huruf besar/kecil: <P> artinya sama dengan <p>.
Stagr HTML tidak memerlukan tag huruf kecil, tetapi kami merekomendasikan huruf kecil
dalam HTML, dan menuntut huruf kecil untuk jenis dokumen yang lebih erat seperti XHTML
Referensi Tag HTML

Referensi tag berisi informasi tambahan tentang tag ini dan atributnya.
Tag Deskripsi
<html> Mendefinisikan akar dari dokumen
HTML
<body> Mendefinisikan isi dokumen
<h1> hingga <h6> Mendefinisikan heading HTML
BAB 3
ATRIBUT HTML
Atribut HTML memberikan informasi tambahan tentang elemen HTML.

Atribut HTML
 Semua elemen HTML dapat memiliki atribut
 Atribut memberikan informasi tambahan tentang elemen
 Atribut selalu ditentukan di tag awal
 Atribut biasanya datang dalam pasangan nama/nilai seperti: nama="nilai"
Atribut href
Tag <a> mendefinisikan hyperlink. Atribut href menentukan URL halaman yang dituju
tautan:
Contoh:
<a href="https://
www.w3schools.com">Kunjungi W3Schools</a>
Hasil:
Atribut src
Atribut src Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src
menentukan jalur ke gambar yang akan ditampilkan:
Contoh
<img src="img_girl.jpg">
Hasil
Ada dua cara untuk menentukan URL di atribut src:
1. URL Absolut - Tautan ke gambar eksternal yang dihosting di situs web lain. Contoh:
src="https://www.w3schools.com/images/img_girl.jpg".
Catatan: Gambar eksternal mungkin berada di bawah hak cipta. Jika Anda tidak mendapatkan
izin untuk menggunakannya, Anda mungkin melanggar undang-undang hak cipta. Selain itu,
Anda tidak dapat mengontrol gambar eksternal; itu bisa tiba-tiba dihapus atau diubah.
2. URL Relatif - Tautan ke gambar yang di-host di dalam situs web. Di sini, URL tidak
menyertakan nama domain. Jika URL dimulai tanpa garis miring, itu akan relatif terhadap
halaman saat ini. Contoh: src="img_girl.jpg". Jika URL dimulai dengan garis miring, itu akan
menjadi relatif terhadap domain. Contoh: src="/images/img_girl.jpg".
Atribut lebar dan tinggi

Tag <img> juga harus berisi atribut lebar dan tinggi, yang menentukan lebar dan tinggi gambar
(dalam piksel):
Contoh
<img src="img_girl.jpg" width="500" height="600">
Hasil
Atribut alt
Atribut alt yang diperlukan untuk tag <img> menentukan teks alternatif untuk gambar, jika
gambar karena alasan tertentu tidak dapat ditampilkan. Hal ini dapat disebabkan oleh koneksi
yang lambat, atau kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar.
Contoh
<img src="img_girl.jpg" alt="Gadis berjaket">
Hasil
Lihat apa yang terjadi jika menampilkan gambar yang tidak ada:
Contoh
<img src="img_typo.jpg" alt="Gadis berjaket">
Hasil
Gaya Atribut
Atribut style digunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan
lainnya.
Contoh:
<p style="color:red;">This is a red paragraph.</p>
Hasil:
Atribut lang
Atribut lang ini harus selalu ada di dalam tag <html>, untuk mendeklarasikan bahasa halaman
Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.
Contoh berikut menentukan bahasa Inggris sebagai bahasa:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Kode negara juga dapat ditambahkan ke kode bahasa di atribut lang. Jadi, dua karakter pertama
menentukan bahasa halaman HTML, dan dua karakter terakhir menentukan negara.
Contoh berikut menentukan bahasa Inggris sebagai bahasa dan Amerika Serikat sebagai negara:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Judul Atribut
Atribut title mendefinisikan beberapa informasi tambahan tentang suatu elemen.
Nilai judul atribut akan ditampilkan sebagai keterangan alat saat mengarahkan mouse ke elemen:
Contoh:
<p title="I'm a tooltip">Ini paragraf.</p>
Hasil:
Catatan saran:
Selalu Gunakan Atribut Huruf Kecil Standar HTML tidak memerlukan nama atribut huruf
kecil.Atribut judul (dan semua atribut lainnya) dapat ditulis dengan huruf besar atau kecil seperti
judul atau TITLE.
Selalu Kutip Nilai Atribut Standar HTML tidak memerlukan tanda kutip di sekitar nilai atribut.
Benar:
<a href="https://www.w3schools.com/html/"> Kunjungi tutorial HTML kami</a>
Salah:
<a href=https://www.w3schools.com/html/> Kunjungi tutorial HTML kami </a>
Contoh
<p title=About HTML>
Kutipan Tunggal atau Ganda

Tanda kutip ganda di sekitar nilai atribut adalah yang paling umum dalam HTML, tetapi tanda
kutip tunggal juga dapat digunakan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi
tanda kutip ganda, perlu untuk menggunakan tanda kutip tunggal:
<p title='John "ShotGun" Nelson'>
Atau sebaliknya:
<p title="John 'ShotGun' Nelson">
BAB 4
JUDUL HTML
Judul HTML adalah judul atau subjudul yang ingin tampilkan di halaman web.
Contoh
Judul 1
Judul 2
Judul 3
Judul 4
Judul 5
Judul 6
Hasil
Judul Itu Penting

Mesin pencari menggunakan judul untuk mengindeks struktur dan konten halaman web.
Pengguna sering membaca sekilas halaman berdasarkan judulnya. Penting untuk menggunakan
heading untuk menunjukkan struktur dokumen.
Judul <h1> harus digunakan untuk judul utama, diikuti oleh judul <h2>, kemudian <h3> yang
kurang penting, dan seterusnya.
Catatan: Gunakan heading HTML untuk heading saja. Jangan gunakan heading untuk membuat
teks menjadi BESAR atau tebal.
Judul yang lebih besar

Setiap heading HTML memiliki ukuran default. Namun, Anda dapat menentukan ukuran untuk
setiap heading dengan atribut style, menggunakan properti font-size CSS:
Contoh
<h1 style="font-size:60px;">Judul 1</h1>
Hasil
BAB 5
PARAGRAF HTML
Sebuah paragraf selalu dimulai pada baris baru, dan biasanya berupa blok teks.
Elemen HTML <p> mendefinisikan sebuah paragraf.
Sebuah paragraf selalu dimulai pada baris baru, dan browser secara otomatis menambahkan
beberapa spasi (margin) sebelum dan sesudah paragraf.
Contoh
<p> Ini paragraf.</p>
<p> Ini paragraf lainnya.</p>
Hasil
Tampilan HTML
Tampilan HTML tidak dapat dipastikan. Layar besar atau kecil, dan jendela yang diubah
ukurannya akan menghasilkan hasil yang berbeda. Dengan HTML, tidak dapat mengubah
tampilan dengan menambahkan spasi atau baris tambahan dalam kode HTML. Browser akan
secara otomatis menghapus spasi dan garis tambahan saat halaman ditampilkan:
Contoh
<p>
Paragraf ini
mengandung banyak garis
dalam kode sumber,
tapi browsernya
mengabaikannya.
</p>
<p>
Paragraf ini
mengandung banyak spasi
dalam kode sumber,
tapi browsernya
mengabaikannya.
</p>
Hasil
Aturan Horisontal HTML

Tag <hr> mendefinisikan jeda tematik di halaman HTML, dan paling sering ditampilkan
sebagai aturan horizontal. Elemen <hr> digunakan untuk memisahkan konten (atau menentukan
perubahan) di halaman HTML:
Contoh
<h1>Ini Judul 1</h1>
<p> Ini beberapa teks.</p>
<hr>
<h2>Ini Judul 2</h2>
<p> Ini beberapa teks.</p>
<hr>
Hasil
Tag <hr>adalah tag kosong, yang berarti tidak memiliki tag akhir.
Pemisahan Baris HTML
Elemen HTML <br> mendefinisikan jeda baris. Gunakan <br> jika Anda ingin jeda baris
(baris baru) tanpa memulai paragraf baru:
Contoh:
<p>Ini<br>paragraf<br>dengan jarak baris.</p>
Hasil:
Masalah sajak
sajak ini akan ditampilkan dalam satu baris:
Contoh
<p>
Bonnie saya terletak di atas lautan.
Bonnie saya terletak di atas laut.
Oh, kembalikan Bonnie-ku padaku..

</p>
Solution - The HTML <pre> Element
Elemen HTML <pre> mendefinisikan teks yang telah diformat sebelumnya. Teks di dalam
elemen <pre>ditampilkan dalam font dengan lebar tetap (biasanya Courier), dan
mempertahankan spasi dan jeda baris:
Contoh
<p>
Bonnie saya terletak di atas laut.
Oh, kembalikan Bonnie-ku padaku..
</p>
Hasil:
BAB 6
GAYA HTML
Atribut gaya HTML digunakan untuk menambahkan gaya ke elemen, seperti warna, font,
ukuran, dan lainnya.
Contoh:
saya merah
saya biru
saya besar
Hasil:
Atribut Gaya HTML

Pengaturan style suatu elemen HTML, dapat dilakukan dengan atribut style.
Atribut gaya HTML memiliki sintaks berikut:
<tagname style="property:value;">
Properti adalah properti CSS. Nilainya adalah nilai CSS.
Warna latar belakang

Contoh
<body style="background-color:powderblue;">
<h1> Ini judul </h1>
<p> Ini paragraf.</p>
</body>
Hasil
Contoh
Atur warna latar belakang untuk dua elemen berbeda:
<body>
<h1 style="background-color:powderblue;">Ini judul</h1>
<p style="background-color:tomato;">Ini paragraf.</p>
</body>
Hasil
Warna teks
Contoh
<h1 style="color:blue;"> Ini Judul </h1>
<p style="color:red;"> Ini Paragraf </p>
Hasil:
Font
<h1 style="font-family:verdana;"> Ini Judul </h1>
<p style="font-family:courier;"> Ini Paragraf</p>
Ukuran teks
Contoh
<h1 style="font-size:300%;"> Ini Judul </h1>
<p style="font-size:160%;"> Ini Paragraf.</p>
Hasil
Perataan Teks
Contoh
<h1 style="text-align:center;"> Judul tengah </h1>
<p style="text-align:center;"> Paragraf tengah.</p>
Hasil
BAB 7
FORMAT HTML
HTML berisi beberapa elemen untuk mendefinisikan teks dengan arti khusus.
Contoh
Teks ini dicetak tebal
This text is italic
Ini tulisan di bawah garis dan yang ditulis di atas
Hasil:
Elemen Pemformatan HTML

 <b> - Teks tebal
 <strong> - Teks penting
 <i> - Teks miring
 <em> - Teks yang ditegaskan
 <mark> - Teks yang ditandai
 <small> - Teks lebih kecil
 <del> - Teks yang dihapus
 <ins> - Teks yang disisipkan
 <sub> - Teks subskrip
 <sup> - Teks superskrip
HTML <b> and <strong> Elements

Elemen HTML <b> mendefinisikan teks tebal, tanpa kepentingan ekstra.
Contoh
<b> Teks ini dicetak tebal </b>
Hasil:
Elemen HTML <strong> mendefinisikan teks dengan kepentingan yang kuat. Konten di
dalamnya biasanya ditampilkan dalam huruf tebal.
Contoh
<strong> Teks penting!</strong>
Hasil
HTML <i> and <em> Elements

Elemen HTML <i> mendefinisikan bagian teks dalam suara atau suasana hati alternatif. Konten
di dalamnya biasanya ditampilkan dalam huruf miring.
Catatan: Tag <i> sering digunakan untuk menunjukkan istilah teknis, frasa dari bahasa lain,
pemikiran, nama kapal, dll.
Contoh
<i>Teks ini dicetak miring</i>
Hasil
Elemen HTML <em> mendefinisikan teks yang ditekankan. Konten di dalamnya biasanya
ditampilkan dalam huruf miring.
Catatan: Pembaca layar akan mengucapkan kata dalam <em> dengan penekanan, menggunakan
tekanan verbal.
Contoh
<em> Teks ini ditegaskan </em>
Hasil
Elemen HTML <kecil>

Contoh
<small> Ini adalah beberapa teks yang lebih kecil.</small>
Hasil
Elemen <mark> HTML

Elemen HTML <mark> mendefinisikan teks yang harus ditandai atau disorot:
Contoh
<p> Jangan lupa beli <mark> susu </mark> hari ini </p>
Hasil
Elemen HTML <del>
Elemen HTML <del> mendefinisikan teks yang telah dihapus dari dokumen. Browser biasanya
akan menyerang garis melalui teks yang dihapus
Contoh
<p> Warna kesukaanku adalah <del>biru</del> merah.</p>
Hasil
Elemen HTML <ins>

Elemen HTML <ins> mendefinisikan teks yang telah dimasukkan ke dalam dokumen. Browser
biasanya akan menggarisbawahi teks yang disisipkan:
Contoh
<p Warna kesukaanku adalah <del> biru </del> <ins> merah </ins>.</p>
Hasil
Elemen HTML <sub>

Elemen HTML <sub> mendefinisikan teks subskrip. Teks subskrip muncul setengah karakter di
bawah garis normal, dan terkadang ditampilkan dalam font yang lebih kecil. Teks subscript dapat
digunakan untuk rumus kimia, seperti H2O:
Contoh
<p> Ini <sub>tulisan dibawah garis</sub> teks.</p>
Hasil
Elemen <sup> HTML
Elemen HTML <sup> mendefinisikan teks superscript. Teks superskrip muncul setengah
karakter di atas garis normal, dan terkadang ditampilkan dalam font yang lebih kecil. Teks
superskrip dapat digunakan untuk catatan kaki, seperti WWW[1]:
Contoh
<p> Ini <sup> yang ditulis di atas </sup> teks.</p>
Hasil
BAB 8
KUTIPAN HTML
Elemen Kutipan dan Kutipan HTML

Dalam bab ini kita akan membahas elemen HTML <blockquote>, <q>, <abbr>,
<address>, <cite>, dan <bdo>.
Contoh
Berikut kutipan dari situs WWF:
Selama hampir 60 tahun, WWF telah melindungi masa depan alam. Organisasi konservasi
terkemuka dunia, WWF bekerja di 100 negara dan didukung oleh lebih dari satu juta anggota di
Amerika Serikat dan hampir lima juta di seluruh dunia.
Hasil
HTML <blockquote> untuk Kutipan

Elemen HTML <blockquote> mendefinisikan bagian yang dikutip dari sumber lain.
Browser biasanya membuat indentasi elemen <blockquote>.
Contoh
<p> Browser biasanya membuat indentasi elemen blockquote.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
Selama hampir 60 tahun, WWF telah melindungi masa depan alam. Organisasi
konservasi terkemuka dunia, WWF bekerja di 100 negara dan didukung oleh
lebih dari satu juta anggota di Amerika Serikat dan hampir lima juta di
seluruh dunia.
</blockquote>
Hasil
HTML <q> untuk Kutipan Singkat

Tag HTML <q> mendefinisikan kutipan singkat.
Browser biasanya menyisipkan tanda kutip di sekitar kutipan.
Contoh
<p> Tujuan WWF adalah untuk:<q> Bangun masa depan di mana orang hidup
selaras dengan alam.</q></p>
Hasil
HTML <abbr> untuk Singkatan

Tag HTML <abbr> mendefinisikan singkatan atau akronim, seperti "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM". Menandai singkatan dapat memberikan informasi yang berguna bagi
peramban, sistem terjemahan, dan mesin telusur.
Catatan: Gunakan atribut judul global untuk menampilkan deskripsi singkatan/akronim saat
Anda mengarahkan mouse ke elemen.
Contoh
<p><abbr title="World Health Organization">WHO</abbr> didirikan pada
tahun 1948.</p>
Hasil
HTML <address> untuk Informasi Kontak

Tag HTML <address>> mendefinisikan informasi kontak untuk penulis/pemilik dokumen atau
artikel. Informasi kontak dapat berupa alamat email, URL, alamat fisik, nomor telepon,
pegangan media sosial, dll. Teks dalam elemen <address>biasanya dirender dalam huruf
miring, dan browser akan selalu menambahkan jeda baris sebelum dan sesudah elemen
<address>.
Contoh
<address>
Ditulis oleh John Doe.<br>
Kunjungi kami di:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Hasil
HTML <cite> untuk Judul Karya
Tag HTML <cite>mendefinisikan judul karya kreatif (misalnya buku, puisi, lagu, film, lukisan,
patung, dll).
Catatan: Nama seseorang bukanlah gelar sebuah karya.
Teks dalam elemen <cite> biasanya dirender dalam huruf miring.
Contoh
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Hasil
HTML <bdo> untuk Penimpaan Dua Arah

BDO adalah singkatan dari Bi-Directional Override.
Tag HTML <bdo> digunakan untuk mengganti arah teks saat ini:
Contoh
<bdo dir="rtl"> Baris ini akan ditulis dari kanan ke kiri </bdo>
Hasil
BAB 9
KOMENTAR HTML
Komentar HTML tidak ditampilkan di browser, tetapi dapat membantu mendokumentasikan

kode sumber HTML.
Tag Komentar HTML
Dapat menambahkan komentar ke sumber HTML Anda dengan menggunakan sintaks berikut:

Perhatikan bahwa ada tanda seru (!) di tag awal, tetapi tidak di tag akhir.
Catatan: Komentar tidak ditampilkan oleh browser, tetapi dapat membantu mendokumentasikan
kode sumber HTML.
Tambahkan Komentar
Dengan komentar dapat menempatkan pemberitahuan dan pengingat dalam kode HTML:
Contoh
<!—Ini adalah komentar -->
<p> Ini adalah paragraf.</p>
<!—Ingatlah untuk menambahkan lebih banyak informasi di sini -->
Hasil
Sembunyikan Konten
Komentar dapat digunakan untuk menyembunyikan konten.
Yang dapat membantu jika Anda menyembunyikan konten untuk sementara:
Contoh
<p>Ini adalah paragraf.</p>

<p>Ini adalah paragraph juga.</p>
Hasil
Juga dapat menyembunyikan lebih dari satu baris, semua yang berada di antara 
akan disembunyikan dari tampilan.
Contoh

<p>Ini paragraf juga.</p>
Hasil
Komentar juga bagus untuk men-debug HTML, karena dapat mengomentari baris kode HTML,
satu per satu, untuk mencari kesalahan.
Sembunyikan Konten Sebaris
Komentar dapat digunakan untuk menyembunyikan bagian di tengah kode HTML.
Contoh
<p>Ini <!—teks yang bagus --> adalah sebuah paragraf.</p>
Hasil
BAB 10
WARNA HTML
Warna HTML ditentukan dengan nama warna yang telah ditentukan sebelumnya, atau dengan
nilai RGB, HEX, HSL, RGBA, atau HSLA.
Contoh
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;"> Orange </h1>
<h1 style="background-color:DodgerBlue;"> DodgerBlue </h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen </h1>
<h1 style="background-color:Gray;">Gray </h1>
<h1 style="background-color:SlateBlue;"> SlateBlue </h1>
<h1 style="background-color:Violet;"> Violet </h1>
<h1 style="background-color:LightGray;"> LightGray </h1>
Hasil
Warna latar belakang

Dapat mengatur warna latar belakang untuk elemen HTML:
Contoh
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Hasil
Warna Teks
Dapat mengatur warna teks:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Contoh
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Hasil
Warna Perbatasan
Contoh
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Hasil
Nilai Warna
Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL,
nilai RGBA, dan nilai HSLA.
Tiga elemen <div> berikut memiliki warna latar belakang yang disetel dengan nilai RGB, HEX,
dan HSL
Contoh
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Hasil
BAB 11
CSS HTML
CSS adalah singkatan dari Cascading Style Sheets.

CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web
sekaligus.
Cascading Style Sheets (CSS) digunakan untuk memformat tata letak halaman web. Dengan
CSS, Anda dapat mengontrol warna, font, ukuran teks, jarak antar elemen, bagaimana elemen
diposisikan dan ditata, gambar latar belakang atau warna latar apa yang akan digunakan,
tampilan berbeda untuk perangkat dan ukuran layar yang berbeda, dan lebih banyak!
Catatan: Kata cascading berarti bahwa gaya yang diterapkan ke elemen induk juga akan
diterapkan ke semua elemen turunan di dalam induk. Jadi, jika Anda mengatur warna teks isi ke
"biru", semua judul, paragraf, dan elemen teks lain di dalam badan juga akan mendapatkan
warna yang sama (kecuali menentukan yang lain).
Menggunakan CSS
CSS dapat ditambahkan ke dokumen HTML dengan 3 cara:
 Sebaris - dengan menggunakan atribut style di dalam elemen HTML
 Internal - dengan menggunakan elemen <style> di bagian <head>
 Eksternal - dengan menggunakan elemen <link> untuk menautkan ke file CSS eksternal
Cara paling umum untuk menambahkan CSS, adalah dengan menyimpan gaya di file CSS
eksternal. Namun, dalam tutorial ini kita akan menggunakan gaya inline dan internal, karena ini
lebih mudah untuk didemonstrasikan, dan lebih mudah bagi Anda untuk mencobanya sendiri.
CSS sebaris
CSS sebaris digunakan untuk menerapkan gaya unik ke satu elemen HTML.
CSS sebaris menggunakan style atribut dari elemen HTML.
Contoh berikut menyetel warna teks elemen <h1> menjadi biru, dan warna teks elemen <p>
menjadi merah:
Contoh
<h1 style="color:blue;">Judul biru</h1>
<p style="color:red;">Paragraf merah.</p>
Hasil
CSS internal
CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML. CSS internal
didefinisikan di bagian <head> halaman HTML, di dalam elemen <style>
Contoh berikut menyetel warna teks SEMUA elemen <h1> (pada halaman itu) menjadi biru, dan
warna teks SEMUA elemen <p> menjadi merah. Selain itu, halaman akan ditampilkan dengan
warna latar belakang "biru bubuk":
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Ini adalah judul</h1>

</body>
</html>
Hasil
CSS eksternal
Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.
Untuk menggunakan lembar gaya eksternal, tambahkan tautan ke dalamnya di bagian <head> di
setiap halaman HTML:
Contoh
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Ini adalah judul </h1>

<p> Ini adalah paragraf.</p>
</body>
</html>
Hasil
Lembar gaya eksternal dapat ditulis dalam editor teks apa pun. File tidak boleh berisi kode
HTML apa pun, dan harus disimpan dengan ekstensi .css.
Berikut adalah tampilan file "styles.css":
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Warna, Font, dan Ukuran CSS
Di sini, kami akan mendemonstrasikan beberapa properti CSS yang umum digunakan. Anda
akan belajar lebih banyak tentang mereka nanti.
 Properti warna CSS mendefinisikan warna teks yang akan digunakan.

 Properti font-family CSS mendefinisikan font yang akan digunakan.
 Properti ukuran font CSS menentukan ukuran teks yang akan digunakan.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Ini adalah judul</h1>

</body>
</html>
Hasil
Perbatasan CSS
Properti perbatasan CSS mendefinisikan perbatasan di sekitar elemen HTML.
Catatan: Anda dapat menentukan batas untuk hampir semua elemen HTML.
Contoh
p {
border: 2px solid powderblue;
}
Hasil
Lapisan CSS
Properti padding CSS mendefinisikan padding (spasi) antara teks dan perbatasan.
Contoh
p {
padding: 30px;
}
Hasil
Batas CSS
Properti margin CSS mendefinisikan margin (spasi) di luar perbatasan.
Contoh
p {
margin: 50px;
}
Hasil
Tautan ke CSS Eksternal

Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke
halaman web saat ini.
Contoh
Contoh ini menggunakan URL lengkap untuk menautkan ke lembar gaya:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Hasil
Contoh ini menautkan ke lembar gaya yang terletak di folder html di situs web saat ini:
<link rel="stylesheet" href="styles.css">
Hasil

Ringakasan HTML 1-11

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

Ringakasan HTML 1-11

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 1

<h1>Judul Pertama Saya </h1>

Deklarasi <!DOCTYPE> tidak peka huruf besar/kecil.

<p>Ini adalah Paragraf</p>

Tujuan tautan ditentukan dalam atribut href.

Lihat Kode Sumber HTML:

Periksa Elemen HTML:

Contoh beberapa elemen HTML:

Tag awal Isi elemen Tag akhir

Elemen HTML Bersarang

<h1>Judul Pertama Saya</h1>

<h1> Judul Pertama Saya </h1>

Elemen <body> mendefinisikan isi dokumen.

Elemen <p> mendefinisikan sebuah paragraf.

Jangan Lewati Tag Akhir

<p> Ini adalah paragraf

HTML Sensitif Huruf Besar-kecil

Referensi Tag HTML

Atribut HTML memberikan informasi tambahan tentang elemen HTML.

Ada dua cara untuk menentukan URL di atribut src:

Atribut lebar dan tinggi

Kutipan Tunggal atau Ganda

Judul Itu Penting

Judul yang lebih besar

Aturan Horisontal HTML

Bonnie saya terletak di atas laut.

Bonnie saya terletak di atas lautan.

Oh, kembalikan Bonnie-ku padaku..

Atribut Gaya HTML

Properti adalah properti CSS. Nilainya adalah nilai CSS.

Warna latar belakang

Elemen Pemformatan HTML

HTML <b> and <strong> Elements

HTML <i> and <em> Elements

Elemen HTML <kecil>

Elemen <mark> HTML

Elemen HTML <ins>

Elemen HTML <sub>

Elemen Kutipan dan Kutipan HTML

HTML <blockquote> untuk Kutipan

HTML <q> untuk Kutipan Singkat

HTML <abbr> untuk Singkatan

HTML <address> untuk Informasi Kontak

HTML <bdo> untuk Penimpaan Dua Arah

Komentar HTML tidak ditampilkan di browser, tetapi dapat membantu mendokumentasikan

Warna latar belakang

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

CSS adalah singkatan dari Cascading Style Sheets.

<h1>Ini adalah judul</h1>

<h1> Ini adalah judul </h1>

 Properti warna CSS mendefinisikan warna teks yang akan digunakan.

<h1>Ini adalah judul</h1>

Tautan ke CSS Eksternal

Anda mungkin juga menyukai