Scribd
Unggah
8 tayangan21 halaman

Ringkasan HTML Mapel PWD

Dokumen ini menjelaskan dasar-dasar HTML, termasuk struktur, tag, dan atribut yang digunakan untuk membuat halaman web. Selain itu, dokumen ini memberikan panduan langkah-demi-langkah untuk membuat halaman web sederhana dengan 'Hello World' dan menjelaskan penggunaan elemen seperti gambar, hyperlink, dan gaya CSS. Terdapat juga penjelasan tentang elemen div dan cara mengatur tata letak menggunakan CSS.

Diunggah oleh

Daniel Gaming
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
8 tayangan21 halaman

Ringkasan HTML Mapel PWD

Dokumen ini menjelaskan dasar-dasar HTML, termasuk struktur, tag, dan atribut yang digunakan untuk membuat halaman web. Selain itu, dokumen ini memberikan panduan langkah-demi-langkah untuk membuat halaman web sederhana dengan 'Hello World' dan menjelaskan penggunaan elemen seperti gambar, hyperlink, dan gaya CSS. Terdapat juga penjelasan tentang elemen div dan cara mengatur tata letak menggunakan CSS.

Diunggah oleh

Daniel Gaming
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Ringkasan HTML

Pendahuluan HTML
<HTML> adalah hypertext markup language. Pencipta dari HTML adalah Tim
Berners-Lee selain HTML ia juga menemukan HTTP, WWW , Web Browser, Web
Server, Web Page.
W3C adalah organisasi yang tugasnya adalah untuk membuat standar-standar
segala sesuatu yang ada di web.
Kegiatan utama dari W3c adalah untuk mengembangkan protokol dan panduan
yang akan memastikan perkembangan daari web dalam jangka panjang.
W3c berada pada Cambridge, Massachusetts (AS), Sophia Antipolis (Prancis),
Tokyo (Jepang), dan Beijing (Tiongkok). Selain itu, W3C diwakili oleh Penginjil
W3C di berbagai lokasi.
Di web evolutionoftheweb kita dapat melihat perkembangan dari para browser.
Dalam HTML ada CSS dan JavaScrip
-Html itu sebagai kerangka.
-CSS itu sebagai penghias dsri kerangka web.
-Javascript sebagai interaktivitas atau sesuatu yang dapat kita interaktif.

Hello World
Selamat datang di seri HTML untuk channel web programming Unpas bersama
saya, Sandi Kagali. Pada video ini, kita akan membuat web sederhana yang
menampilkan "Hello World". Kita akan menggunakan Notepad sebagai editor.
Langkah-langkah:
1. Buat Folder:
o Buat folder baru di desktop dengan nama "html".
o Di dalamnya, buat folder "latihan1" untuk menyimpan file latihan.
2. Menulis Kode HTML:
o Buka Notepad dan tulis kode sederhana berikut:
html
Salin kode
<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Web 1</title>
</head>
<body>
<p>Hello World</p>
<p>Selamat datang di kuliah pemrograman web 1</p>
</body>
</html>
o Simpan file dengan nama "halaman1.html" dan tipe "All Files".
3. Menjalankan di Browser:
o Buka file "halaman1.html" menggunakan browser (misalnya, Google
Chrome).
o Anda akan melihat "Hello World" dan "Selamat datang di kuliah
pemrograman web 1" ditampilkan di halaman.
Penjelasan:
 <!DOCTYPE html>: Menentukan bahwa ini adalah dokumen HTML5.
 <html>, <head>, <body>: Tag dasar HTML.
 <title>: Menentukan judul halaman yang muncul di tab browser.
 <p>: Tag untuk membuat paragraf.
Selamat, Anda telah membuat halaman web sederhana pertama Anda! Pada video
berikutnya, kita akan membahas lebih lanjut tentang tag HTML lainnya dan
atributnya.

HTML id Attribute
Atribut HTML id digunakan untuk menentukan id unik untuk elemen HTML.
Anda tidak boleh memiliki lebih dari satu elemen dengan id yang sama dalam
dokumen HTML.

Tag HTML
Tag yang dapat dapat ditempatkan di head:
1. <title></title> adalah judul halam
2. <style></style> adalah CSS
3. <script></script> adalah javascript
4. <meta></meta> adalah metadata: <meta name=”nama” content=”nama
konten”>

Tag yang dapat dapat ditempatkan di body:


1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, ... h adalah heading dan angka
dibelakangnya menunjukkan ukuran mereka dari yang terbesar(1) sampai yang
terkecil(6). P adalah paragraph sebagai tempat untuk menulis text.
2. <br>, <hr>, <em>, <strong> br untuk menambahkan garis baru. hr untuk
menambahkan garis horizontal. em untuk memiringkan text dan strong untuk
menebalkan text.
3. <img> untuk menambah gambar
4. <a> untuk menambahkan link
5. <ul>, <ol>, <li>, <dl>, <dt>, <dd> adalah list item
6. <table>, <thead>, <tbody>, … untuk menyimpan table
7. <form>, <input>, <select>, <button>, …
8. <script>
9. <object> untuk menympan sesuatu
10. <div>, <span> untuk mengelompokkan tag dan atau paragraph
11. <!—kata kata komentar. --> adalah tag untuk komentar

Struktur tag html


<nametag atribut=”nilai”>

Penanda elemen
-Accesskey = untuk menentukan siapa saja yang dapat mengakses
-Class dan id = untuk memberi suatu elemen
-Dir = adalah arah tulisan
-Lang = untuk Bahasa
-Style = untuk memasukkan inline css
-Tabindex = untuk menunjukkan urutan
-Title = untuk memberi judul

Paragraph HTML
1. Pembahasan tag paragraf pada html:
<p></p>= untuk membuat paragraf
Jika ingin membuat jarak pada paragraf, kita harus menambahkan tag bantuan
yaitu <br>&<hr>
<br></br>=untuk membuat baris baru di dalam paragraf.
<hr></hr>=untuk membuat garis horizontal .

2. Pembahasan tag ke-2 yaitu, <b></b>, <i></i>, <u></u>:


<b></b>=untuk menebalkan tulisan (Bold)
<i></i>=untuk memiringkan tulisan (italic)
<u></u>=untuk menggaris bawahi tulisan (under line)
Jika ingin membuat paragraf yang memiliki makna seperti ada penekanan atau
penting kita harus menggunakan tag <strong></strong> & <em></em> :
<em></em>=untuk memberikan penekanan pada sebuah teks (emphasis)
<strong></strong>=untuk memberikan penekanan yang lebih kuat dari
<em></em>.Hasilnya <em></em> membuat kaliamat menjadi miring dan
<strong></strong> membuat kaliamat tetap tebal.Fungsi dari <strong></strong> &
<em></em> sebenarnya sama seperti <b></b> & <i></i> tetapi <strong></strong>
& <em></em> lebih memiliki makna.
Jangan lupa juga untuk memberi komentar seperti, <!—contoh tag p, br dan hr --
>.Jika ingin lebih cepat bisa menggunakan ctrl+slas, jika ingin mengubah paragraf
menjadi komentar juga bisa menggunakan ctrl+slas.

Image
<img src="pic_trulli.jpg" alt="Italian Trulli">
Untuk file gambar yang dapat di masukkan ke dalam tag image adalah internal
resource seperti logo.png, background.jpg. yang kedua adalah external resouce
seperti hotlink yaitu https://www.google.com/image/srpr/logo11w.png
*ATRIBUT yang dimiliki oleh tag IMG adalah src, alt, title, width, height.
-Untuk alt itu merupakan tag di img untuk alternatif dari gambar yang tidak
muncul.
-Untuk width itu adalah lebar dari gambarnya .
-Untuk height itu adalah tinggi dari gambar.
-Title di gunakan untuk memberikan judul pada gamabar.

Cara menyimpan Gambar


1.Cara menyimpan gambar dalam dokumen kita
Tag yang akan kita gunakan untuk menyimpan gambar dalam dokumen kita adalah
dengan menggunakan <img>
Tag yang di funakan dalam img adalah;
<img src=” ”>
Src=Source
File gambar yang dapat kita masukkan ada 2 yaitu:
 Internal Resource atau gambar yang kita miliki sendiri: logo.png,
Background,jpg,dll
Untuk menggunakan logo.png file harus ada di folder yang sama
 External Resource atau yang biasa disebut hotlink yang menggunakan
website.

 Atribut yang dimilki oleh image:


Src:untuk menguploud gambar ke dokumen
Alt:untuk memberikan alternatif teks pada gambar
Title:untuk memberikan judul pada gambar
Width:untuk mengatur lebar pada gambar
Height:untuk mengatur tinggi pada gambar
Jika ingin mengatur bentuk gambar disarankan menggunakan salah satu dari Width
atau pun Height, karena jika memakai kedua nya sekaligus itu harus membuat
ukuran yang sama persis dan akan memakan banyak waktu.
 Cara menggabungkan hyperlink+image
Contoh:
<a href=” ”>
<img src=” ”>
</a>
Akan membuat gambar menjadi sebuah link.

Heading
H1 hingga H6 adalah tag HTML yang digunakan untuk menentukan judul atau
heading pada sebuah halaman web. Berikut adalah penjelasan singkat tentang
masing-masing tag:
 H1: Digunakan untuk judul utama dan biasanya hanya digunakan sekali per
halaman.
 H2: Subjudul utama, dapat digunakan beberapa kali untuk mendefinisikan
bagian besar dari konten.
 H3: Subjudul dari H2, digunakan untuk bagian dalam subjudul utama.
 H4: Subjudul dari H3.
 H5: Subjudul dari H4.
 H6: Subjudul dari H5, yang paling rendah dalam hierarki heading.

Heading ada 6 yaitu:


<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<h1> adalah elemen/judul paling penting dalam artikel.


<p></p> untuk mengisi artikel.
Di google kita dpt menginspect elemen untuk melihat coding di artikel.
Heading 1 lebih penting dari heading dibawah nya.

Hyperlink
<img src=””>
File yang bisa disimpan ada 2:
1. internal resource(logo.png, background.jpg, yang ada di folder). Jika
difolder masukkan saja <img src=”nama file”> jika diluar masukkan <img
scr=”Nama folder/ nama file”> atau jika diluar masukkan <img src=”../nama
folder/nama file”>
2. eksternal(link)
atribut img
1. src, untuk menentukan file tersebut akan diambil dari mana(wajib ada)
2. alt, untuk memberikan alternatif teks <img src=”file name” alt=”isi teks”>
jika teks tidak muncul biasa karena tempat tidak cukup untuk teks jd
menambahkan width=”ukuran font” diakhir perintah sebelum >
3. title, untuk memberikan judul(perintahnya seperti alt hanya saja alt diganti
title)
4. width, untuk mengatur lebar gambar(perintah sama seperti alt hanya saja alt
diganti width dan pada “” berisi ukuran, jila hanya angka akan termasuk px dan
jika diberi % maka akan memenuhi halaman sesuai dengan jumlah % yang kita
isi).
5. height, untuk mengatur tinggi gambar(perintah sama seperti alt hanya saja
alt diganti height dan pada “” berisi ukuran, jila hanya angka akan termasuk px dan
jika diberi % maka akan memenuhi halaman sesuai dengan jumlah % yang kita
isi).
Menggabungkan gambar dan hyperlink
Berikan perintah
<a href=”alamat link”>
<img src=”nama file>
</a>
dengan begitu jika kita mengeklik gambar maka gambar tersebut akan membawa
kita ke Alamat link tersebut

Style HTML
Atribut HTML styledigunakan untuk menambahkan gaya ke suatu elemen,
seperti warna, font, ukuran, dan lainnya.
*Atribut Style HTML
Mengatur gaya suatu elemen HTML, dapat dilakukan dengan styleatribut.
Atribut HTML style memiliki sintaks berikut:
<tagname style="property:value;">
Properti tersebut adalah properti CSS. Nilainya adalah nilai CSS.

-Warna latar belakang


Properti CSS background-colormendefinisikan warna latar belakang untuk elemen
HTML.
Contoh
Atur warna latar belakang halaman menjadi biru bubuk:
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
-Warna teks
Properti CSS colormendefinisikan warna teks untuk elemen HTML:
Contoh
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
-font
Properti CSS font-familymendefinisikan font yang akan digunakan untuk elemen
HTML:
Contoh
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
-Ukuran teks
Properti CSS font-sizemendefinisikan ukuran teks untuk elemen HTML:
Contoh
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
-Perataan Teks
Properti CSS text-alignmendefinisikan perataan teks horizontal untuk elemen
HTML:
Contoh
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Ringkasan dari atas:
 Gunakan styleatribut untuk menata elemen HTML
 Gunakan background-color untuk warna latar belakang
 Gunakan color untuk warna teks
 Gunakan font-family untuk font teks
 Gunakan font-size untuk ukuran teks
 Gunakan text-align untuk perataan teks

 Elemen Div HTML


 Elemen tersebut <div>digunakan sebagai wadah untuk elemen HTML
lainnya.

 Elemen <div>
 Elemen ini <div>secara default adalah elemen blok, artinya elemen ini
mengambil semua lebar yang tersedia, dan dilengkapi dengan jeda baris
sebelum dan sesudahnya.
 Contoh
 Elemen <div> mengambil semua lebar yang tersedia:
 Lorem Ipsum <div>I am a div</div> dolor sit amet.
 Elemen tersebut <div>tidak memiliki atribut yang diperlukan,
tetapi style, classdan idbersifat umum.

 <div> sebagai wadah


 Elemen ini <div>sering digunakan untuk mengelompokkan bagian-bagian
halaman web menjadi satu.
 Contoh
 Elemen <div> dengan elemen HTML:
 <div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
 Ratakan tengah elemen <div>
 Jika Anda memiliki <div>elemen yang lebarnya tidak 100%, dan Anda ingin
meratakannya di tengah, setel marginproperti CSS ke auto.
 Contoh
 <style>
div {
width:300px;
margin:auto;
}
</style>
 Beberapa elemen <div>
 Anda dapat memiliki banyak <div>container di halaman yang sama.
 Contoh
 <div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>

<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
 Mengambang
 Properti CSS floatawalnya tidak dimaksudkan untuk
menyelaraskan <div>elemen secara berdampingan, namun telah digunakan
untuk tujuan ini selama bertahun-tahun.
 Properti CSS floatdigunakan untuk memposisikan dan memformat konten
serta memungkinkan elemen melayang bersebelahan, bukan di atas satu
sama lain.
 Contoh
 Cara menggunakan float untuk menyelaraskan elemen div secara
berdampingan:
 <style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
 Blok sebaris
 Jika Anda mengubah properti <div>elemen displaydari blockmenjadi inline-
block, <div>elemen tidak akan lagi menambahkan jeda baris sebelum dan
sesudahnya, dan akan ditampilkan berdampingan, bukan di atas satu sama
lain.
 Contoh
 Cara menggunakan display: inline-block untuk menyelaraskan elemen div
secara berdampingan:
 <style>
div {
width: 30%;
display: inline-block;
}
</style>
 Melenturkan
 Modul Tata Letak CSS Flexbox diperkenalkan untuk memudahkan
merancang struktur tata letak responsif yang fleksibel tanpa menggunakan
float atau positioning.
 Agar metode fleksibel CSS berfungsi, kelilingi <div>elemen
dengan <div>elemen lain dan berikan status sebagai wadah fleksibel.
 Contoh
 Cara menggunakan flex untuk menyelaraskan elemen div secara
berdampingan:
 <style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
 jaringan
 Modul Tata Letak Grid CSS menawarkan sistem tata letak berbasis grid,
dengan baris dan kolom, sehingga memudahkan mendesain halaman web
tanpa harus menggunakan float dan positioning.
 Kedengarannya hampir sama dengan flex, namun memiliki kemampuan
untuk menentukan lebih dari satu baris dan memposisikan setiap baris secara
individual.
 Metode grid CSS mengharuskan Anda mengelilingi <div>elemen
dengan <div>elemen lain dan memberikan status sebagai wadah grid, dan
Anda harus menentukan lebar setiap kolom.
 Contoh
 Cara menggunakan grid untuk menyelaraskan elemen <div> secara
berdampingan:
 <style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>

Atribut kelas HTML


Menggunakan Atribut kelas
Atribut ini classsering digunakan untuk menunjuk ke nama kelas dalam style
sheet. Itu juga dapat digunakan oleh JavaScript untuk mengakses dan
memanipulasi elemen dengan nama kelas tertentu.
Pada contoh berikut kita memiliki tiga <div>elemen dengan classatribut dengan
nilai "kota". Ketiga <div>elemen tersebut akan diberi gaya yang sama sesuai
dengan .citydefinisi gaya di bagian kepala:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Dalam contoh berikut kita memiliki dua <span>elemen dengan classatribut


dengan nilai "note". Kedua <span>elemen akan diberi gaya yang sama sesuai
dengan .notedefinisi gaya di bagian kepala:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>


<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
Sintaks Untuk Kelas
Untuk membuat kelas; tulis karakter titik (.), diikuti dengan nama kelas. Lalu,
definisikan properti CSS di dalam kurung kurawal {}:
Contoh
Buat kelas bernama "kota":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>
Beberapa Kelas
Elemen HTML dapat dimiliki lebih dari satu kelas.
Untuk mendefinisikan beberapa kelas, pisahkan nama kelas dengan spasi,
misalnya <div class="city main">. Elemen akan ditata sesuai dengan semua
kelas yang ditentukan.
Dalam contoh berikut, <h2>elemen pertama adalah milik kelas citydan juga
milik mainkelas tersebut, dan akan mendapatkan gaya CSS dari kedua kelas:
Contoh
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Elemen Berbeda Dapat Berbagi Kelas yang Sama


Elemen HTML yang berbeda dapat menunjuk ke nama kelas yang sama.
Dalam contoh berikut, keduanya <h2>menunjuk <p>ke kelas "kota" dan akan
berbagi gaya yang sama:
Contoh
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Penggunaan Atribut kelas dalam JavaScript


Nama kelas juga dapat digunakan oleh JavaScript untuk melakukan tugas
tertentu untuk elemen tertentu.
JavaScript dapat mengakses elemen dengan nama kelas tertentu
dengan getElementsByClassName()metode:
Contoh
Klik pada tombol untuk menyembunyikan semua elemen dengan nama kelas
"kota":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>

Ringkasan
 Atribut HTML classmenentukan satu atau lebih nama kelas untuk suatu
elemen
 Kelas digunakan oleh CSS dan JavaScript untuk memilih dan mengakses
elemen tertentu
 Atribut ini classdapat digunakan pada elemen HTML apa pun
 Nama kelas peka huruf besar-kecil
 Elemen HTML yang berbeda dapat menunjuk ke nama kelas yang sama
 JavaScript dapat mengakses elemen dengan nama kelas tertentu
dengan getElementsByClassName()metode tersebut

Atribut ID HTML
Menggunakan Atribut id
Atribut idmenentukan id unik untuk elemen HTML. Nilai atribut idharus unik
dalam dokumen HTML.
Atribut iddigunakan untuk menunjuk ke deklarasi gaya tertentu dalam style sheet.
Itu juga digunakan oleh JavaScript untuk mengakses dan memanipulasi elemen
dengan id tertentu.
Sintaks untuk id adalah: tulis karakter hash (#), diikuti dengan nama id. Lalu,
definisikan properti CSS di dalam kurung kurawal {}.
Dalam contoh berikut kita memiliki <h1>elemen yang menunjuk ke nama id
"myHeader". Elemen ini <h1>akan ditata sesuai dengan #myHeaderdefinisi gaya
di bagian kepala:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Perbedaan Antara Kelas dan ID


Nama kelas dapat digunakan oleh beberapa elemen HTML, sedangkan nama id
hanya boleh digunakan oleh satu elemen HTML dalam halaman:
Contoh
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */


.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<!-- An element with a unique id -->


<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->


<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Bookmark HTML dengan ID dan Tautan


Bookmark HTML digunakan untuk memungkinkan pembaca melompat ke bagian
tertentu dari halaman web.
Bookmark dapat berguna jika halaman Anda sangat panjang.
Untuk menggunakan bookmark, Anda harus membuatnya terlebih dahulu, lalu
menambahkan link ke bookmark tersebut.
Kemudian, ketika link tersebut diklik, halaman tersebut akan bergulir ke lokasi
yang diberi bookmark.
Contoh
Pertama, buat bookmark dengan idatribut:
<h2 id="C4">Chapter 4</h2>
Kemudian, tambahkan link ke bookmark ("Lompat ke Bab 4"), dari dalam halaman
yang sama:
Contoh
<a href="#C4">Jump to Chapter 4</a>
Atau, tambahkan link ke bookmark ("Lompat ke Bab 4"), dari halaman lain:
<a href="html_demo.html#C4">Jump to Chapter 4</a>

Menggunakan Atribut id dalam JavaScript


Atribut idjuga dapat digunakan oleh JavaScript untuk melakukan beberapa tugas
untuk elemen tertentu.
JavaScript dapat mengakses elemen dengan id tertentu
dengan getElementById()metode:
Contoh
Gunakan idatribut untuk memanipulasi teks dengan JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Ringkasan
 Atribut iddigunakan untuk menentukan id unik untuk elemen HTML
 Nilai atribut idharus unik dalam dokumen HTML
 Atribut ini iddigunakan oleh CSS dan JavaScript untuk menata/memilih
elemen tertentu
 Nilai atribut idpeka huruf besar-kecil
 Atribut ini idjuga digunakan untuk membuat bookmark HTML
 JavaScript dapat mengakses elemen dengan id tertentu
dengan getElementById()metode ini

Anda mungkin juga menyukai