HTML, CSS, Javascript

Pemrograman Web
DENGAN APLIKASI WEB CODEPEN

AFIEF YONA RAMADHANA
HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII
agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang
dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal
sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML mempunyai fungsi yang sangat penting di dalam sebuah website. Semua website yang
diakses melalui browser akan menghasilkan halaman HTML yang nantinya dapat
diterjemahkan oleh browser menjadi tampilan yang rapi tersusun dengan baik. HTML
dokumen mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan
bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu.
Misalkan saja, sebuah teks biasa ingin dibuat agar menjadi cetak tebal, maka teks tersebut
bisa diapit dengan TAG <b>.
<b>cetak tebal</b>
tag <b> merupakan tag buka, sedangkan tag tutup selalu diawali dengan slash/garis miring
disetiap tagnya </b>. Ada banyak fungsi dari penggunaan HTML sebagai halaman website,
diantaranya yaitu :
Mengintegerasikan gambar dengan tulisan.

Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif
Halaman HTML ditulis dengan diawali tag <html> dan diakhiri dengan tag </html>. Berikut
ini merupakan contoh halaman dasar HTML
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
Pemrograman Web|Dengan Aplikasi Web Codepen
</html>
Pada halaman tersebut, dapat dilihat bahwa HTML dibagi menjadi dua bagian. Y000110aitu
bagian head dan bagian body. Bagian head yang diapit dengan tag <head> dan </head>
berisi perintah atau tag yang dikhususkan untuk mengatur informasi meta atau meletakkan
judul, memberikan alamat script, maupun style css.
Tag - tag yang dapat diletakkan di bagian head yaitu <title>, <style>, <meta>, <link>,
<script>, <noscript>, dan <base>.
Bagian body merupakan bagian penting yang memuat seluruh isi dari halaman yang akan
ditampilkan. Hampir semua elemen dapat diletakkan di dalam bagian body ini.
ELEMEN ELEMEN HTML
Elemen HTML adalah semua hal yang dimulai dengan tag buka dan tag tutup. Seperti pada
contoh sebelumnya, body merupakan elemen yang di dalamnya terdapat banyak sekali
elemen. Di dalam elemen body, terdapat elemen p
<p>Hello World!</p>
p merupakan elemen paragraf yang berfungsi untuk membuat sebuah kalimat menjadi 1
paragraf khusus. Elemen tersebut dimulai dengan tag buka <p> dan diakhiri dengan tag
tutup </p>. Setiap elemen memiliki nilai / konten, konten pada elemen contoh tersebut
adalah Hello World.
Elemen body berisi beberapa elemen lain yang akan ditampilkan ke halaman web. Sebuah
elemen yang didalamnya terdapat elemen lain disebut dengan nested element. Contoh lain
mengenai nested element :
<div class=kotak>
<img src=http://google.com/favicon.png />
</div>
Pada contoh diatas, elemen div memiliki child element yaitu img. Berbeda dengan elemen
elemen sebelumnya, elemen img tidak memiliki konten, sehingga tidak memiliki tag tutup.
Elemen img hanya memuat atribut yang berisi nilai dari elemen tersebut. Element yang tidak
memiliki konten disebut empty HTML element. Elemen ini tidak memiliki tag tutup, namun
memiliki slash (/) di akhir element. <img />.
Contoh lain empty element yaitu <br />, <link /> <meta />, dll.
Element di dalam HTML jumlahnya cukup banyak, ditambah dengan versi sekarang yaitu
HTML5. Perbedaan antara HTML dengan HTML5 adalah jumlah element yang dapat
dijalankan. HTML5 memiliki tambahan elemen yang dapat berfungsi untuk memutar suara,
video, animasi, dsb.
Berikut merupakan daftar element HTML beserta keterangan elemen tersebut.
Tag
Deskripsi
<a>
Mendefinisikan hyperlink
<abbr>
Mendefinisikan sebuah singkatan
<acronym>
Tidak didukung di HTML5. Mendefinisikan akronim
<address>
Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
<applet>
Tidak didukung di HTML5. Usang dalam HTML 4.01. Mendefinisikan

sebuah applet tertanam
<area>
Mendefinisikan daerah dalam peta gambar
<article>Baru
Mendefinisikan sebuah artikel
<aside>Baru
Mendefinisikan konten selain dari konten halaman
<audio>Baru
Mendefinisikan konten suara
<b>
Mendefinisikan teks tebal
<base>
Menentukan URL dasar / target untuk semua URL relatif dalam

dokumen
<basefont>
Tidak didukung di HTML5. Usang dalam HTML 4.01. Menentukan

warna standar, ukuran, dan font untuk semua teks dalam dokumen
<bdi>Baru
Mengisolasi bagian dari teks yang dapat diformat dalam arah yang
berbeda dari teks lain di luar itu
<bdo>
Menimpa arah teks saat
<big>
Tidak didukung di HTML5. Mendefinisikan teks besar
<blockquote>
Mendefinisikan bagian yang dikutip dari sumber lain
<body>
Mendefinisikan tubuh dokumen
<br>
Mendefinisikan istirahat baris
<button>
Mendefinisikan sebuah tombol diklik
<canvas>Baru
Digunakan untuk menggambar grafik, on the fly, melalui scripting

JavaScript
<caption>
Mendefinisikan sebuah judul tabel
<center>

teks berpusat
<cite>
Mendefinisikan judul karya
<code>
Mendefinisikan potongan kode komputer
<col>
Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup>
Menentukan sekelompok dari satu atau lebih kolom dalam sebuah tabel
<command>Baru
Mendefinisikan tombol untuk memanggil perintah di javascript.
<datalist>Baru
Menentukan input dari daftar yang telah ditampilkan
<dd>
Mendefinisikan deskripsi dari item dalam daftar definisi

<del>
Mendefinisikan teks yang telah dihapus dari dokumen
<details>Baru
Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau

menyembunyikan
<dfn>
Mendefinisikan sebuah istilah definisi
<dir>

sebuah daftar direktori
<div>
Mendefinisikan bagian dalam dokumen
<dl>
Mendefinisikan sebuah daftar definisi
<dt>
Mendefinisikan sebuah istilah (item) dalam daftar definisi
<em>
Mendefinisikan teks miring untuk penekanan kalimat
<embed>Baru
Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML)
<fieldset>
Grup terkait unsur-unsur dalam bentuk
<figcaption>Baru
Mendefinisikan sebuah caption untuk elemen <figure>
<figure>Baru
Menentukan konten mandiri
<font>

font, warna, dan ukuran untuk teks
<footer>Baru
Mendefinisikan sebuah footer untuk dokumen atau bagian bawah

halaman
<form>
Mendefinisikan sebuah form HTML untuk input pengguna
<frame>
Tidak didukung di HTML5. Mendefinisikan jendela (frame) dalam

sebuah frameset
<frameset>
Tidak didukung di HTML5. Mendefinisikan satu set frame
<h1> ke <h6>
Mendefinisikan judul HTML
<head>
Mendefinisikan informasi tentang dokumen
<header>Baru
Mendefinisikan sebuah header untuk dokumen atau bagian atas

halaman
<hgroup>Baru
Kumpulan dari header, di dalamnya bisa memuat elemen <h1> hingga

<h6>
<hr>
Mendefinisikan perubahan tematik dalam konten yang ditandai dengan

garis horisontal
<html>
Mendefinisikan akar dari sebuah dokumen HTML
<i>
Mendefinisikan teks miring
<iframe>
Mendefinisikan frame inline untuk halaman HTML di dalam HTML
<img>
Mendefinisikan gambar
<input>
Mendefinisikan kontrol input
<ins>
Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
<kbd>
Mendefinisikan input keyboard
<keygen>Baru
Mendefinisikan sebuah bidang kunci-pair generator (untuk formulir)
<label>
Mendefinisikan sebuah label untuk sebuah elemen <input>
<legend>
Mendefinisikan sebuah caption untuk sebuah <fieldset>, <Angka>, atau

elemen <details>
<li>
Mendefinisikan sebuah item daftar
<link>
Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

(paling sering digunakan untuk link ke style sheet)

<map>
Mendefinisikan sebuah client-side gambar peta
<mark>Baru
Mendefinisikan teks yang ditandai / disorot
<menu>
Mendefinisikan daftar / menu perintah
<meta>
Mendefinisikan metadata tentang dokumen HTML
<meter>Baru
Mendefinisikan pengukuran skalar dalam kisaran dikenal (alat ukur)
<nav>Baru
Mendefinisikan navigasi Link
<noframes>
Tidak didukung di HTML5. Mendefinisikan sebuah konten alternatif

bagi pengguna yang tidak mendukung frame
<noscript>
Mendefinisikan sebuah konten alternatif bagi pengguna yang tidak

mendukung client-side script
<object>
Mendefinisikan sebuah objek tertanam
<ol>
Mendefinisikan ordered list
<optgroup>
Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar

drop-down
<option>
Mendefinisikan pilihan dalam daftar drop-down
<output>Baru
Mendefinisikan hasil penghitungan
<p>
Mendefinisikan paragraf
<param>
Mendefinisikan sebuah parameter untuk objek
<pre>
Mendefinisikan teks terformat
<progress>Baru
Merupakan kemajuan tugas
<q>
Mendefinisikan kutipan pendek
<rp>Baru
Mendefinisikan apa yang harus ditampilkan di browser yang tidak

mendukung penjelasan ruby
<rt>Baru
Mendefinisikan penjelasan / pengucapan karakter (tipografi untuk Asia

Timur)
<ruby>Baru
Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<S>
Mendefinisikan teks yang tidak lagi benar
<samp>
Mendefinisikan contoh keluaran dari program komputer
<script>
Mendefinisikan script sisi klien
<section>Baru
<select>
Mendefinisikan sebuah daftar drop-down
<small>
Mendefinisikan teks kecil
<source>Baru
Mendefinisikan beberapa sumber daya media untuk elemen media

(<video> dan <audio>)
<span>
<strike>

teks strikethrough
<strong>
Mendefinisikan teks penting
<style>
Mendefinisikan informasi style untuk dokumen
<sub>
Mendefinisikan teks subscript
<summary>Baru
Mendefinisikan sebuah judul terlihat untuk elemen <details>
<sup>
Mendefinisikan teks superscripted

<table>
Mendefinisikan tabel
<tbody>
Grup isi tubuh dalam tabel
<td>
Mendefinisikan sebuah sel dalam tabel
<textarea>
Mendefinisikan sebuah kontrol input multiline (area teks)
<tfoot>
Grup isi footer dalam sebuah tabel
<th>
Mendefinisikan sebuah sel header dalam tabel
<thead>
Grup isi header dalam sebuah tabel
<time>Baru
Mendefinisikan tanggal / waktu
<title>
Mendefinisikan judul untuk dokumen
<tr>
Mendefinisikan baris dalam sebuah tabel
<track>Baru
Mendefinisikan trek teks untuk elemen media (<video> dan <audio>)
<tt>
Tidak didukung di HTML5. Mendefinisikan teks teletype
<u>
Mendefinisikan teks yang harus Gaya yang berbeda dari teks biasa
<ul>
Mendefinisikan daftar unordered
<var>
Mendefinisikan variabel
<video>Baru
Mendefinisikan sebuah video atau film
<wbr>Baru
Mendefinisikan garis baru
ATRIBUT ELEMEN HTML

Atribut merupakan properti yang ada di dalam element. Setiap atribut di dalam elemen
memuliki nilai atau informasi tambahan yang dapat membedakan suatu elemen dengan
elemen lain yang sama. Atribut selalu diletakkan di dalam tag buka setelah mendefinisikan
nama tagnya. Misalkan, di dalam elemen <div>, terdapat atribut id yang merupakan
identitas dari elemen tersebut, atribut id memiliki nilai yang sekaligus menjadi nilai identitas
dari elemen itu.
<div id=kolom>
</div>
Nilai atribut lebih sering diapit dengan tanda petik setelah diikuti tanda sama dengan (=).
Formatnya nama_atribut=nilai_atribut.
Berikut merupakan global atribut yang dapat dipakai pada semua elemen HTML
Atribut
Deskripsi
accesskey
Menspesifikasikan tombol shortcut untuk elemen tersebut
class
Memberikan nama class pada elemen.
contenteditable
Membuat konten pada elemen tersebut dapat di edit / ubah
contextmenu
Menspesifikasikan konteks menu pada elemen. Kontek menu

muncul ketika di klik kanan.

dir
Menentukan arah teks konten pada element tersebut.
draggable
Menspesifikasikan apakah elemen dapat di drag atau tidak
dropzone
Elemen ini berkaitan dengan elemen draggable. Merupakan tempat

diletakkannya elemen drag.
hidden
Menentukan apakah elemen terlihat aktif atau tidak.
id
Menentukan nama identitas elemen
lang
Menspesifikasikan bahasa yang digunakan untuk konten pada

elemen tersebut
spellcheck
Menspesifikasikan apakah elemen tersebut akan di periksa

grammar / spell atau tidak
style
Menspesifikasikan style CSS dengan dituliskannya secara langsung

pada elemen
tabindex
Menentukan apakah elemen tersebut terpengaruh tombol tab atau

tidak
title
Menentukan judul elemen tersebut. Biasanya akan muncul ketika

mouse melewati elemen tersebut
translate
Menentukan apakah elemen tersebut akan ditranslate ke bahasa

lokal ketika browser menterjemahkannya atau tidak.
Atribut yang dicetak tebal merupakan atribut baru yang ada pada HTML5. Sebaiknya update
browser ke versi paling baru untuk dapat melihat perubahan pada atribut tersebut.
Selain atribut global, terdapat juga atribut lokal yang hanya terdapat pada elemen elemen
tertentu saja. Berikut ini merupaka beberapa atribut lokal beserta elemen yang dapat
menggunakan atribut tersebut
Atribut
Elemen
Deskripsi
type
input
menspesifikasikan tipe dari elemen input yang dibuat,

daftar tipe input yang dapat di pakai yaitu :
color, date, datetime, datetime-local, email, month,
number, range, search, tel, time, url, week
value
input,
option
Merupakan nilai dari elemen yang dimaksud. Nilai ini

akan dikirim ke server ketika form tempat elemen ini di
letakkan di submit.
method
form
Merupakan attribut yang berisi nilai dari metode

pengiriman data dari klien ke server. Bisa berisi GET
atau POST.
href
link, a
Atribut href berisi alamat url yang akan digabungkan

dengan halaman html yang kita miliki. Pada elemen link,
biasanya berisi alamat url file css, pada elemen a
biasanya berisi alamat tujuan ketika elemen a di klik.
Masih banyak tentunya atribut HTML yang belum ditulis dalam tulisan ini, atribut atibut
tersebut dapat dipelajari lebih banyak melalui website w3schools.com.
CSS
Konsep dari CSS adalah menyeleksi elemen yang terdapat pada HTML, lalu mengubah
stylenya. Elemen elemen dalam HTML diseleksi dengan selector, lalu setiap stylenya ditulis
di dalam tanda buka kurung kurawal hingga tanda tutup kurung kurawal di sebelah kanan
selector tersebut.
CSS adalah singkatan dari Cascading Style Sheets. Jika dibaca di kamus, cascading itu
artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode
lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan
kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu
halaman HTML.
MELETAKKAN STYLE CSS PADA HALAMAN HTML
Style CSS sebaiknya diletakkan di dalam elemen <head> di halaman html. Style CSS
didefinisikan di dalam elemen <style type=text/css></style>. Seperti pada contoh
penempatan style CSS pada halaman html di bawah ini :
<html>
<head>
<style type="text/css">
body {
background-color: red;
}
</style>
</head>
<body>
isi halaman
</body>
</html>
Contoh diatas akan membuat background halaman HTML menjadi berwarna merah. Style
CSS yang berada di dalam elemen head menentukan/menyeleksi elemen body, kemudian
memberikan style pada body berupa background-color dengan nilai red.
CSS SELECTOR
CSS selector menentukan elemen mana pada halaman HTML yang akan diseleksi dan
kemudian diberikan style sesuai dengan yang didefinisikan. Penulisan selector diikuti dengan
tanda kurung kurawal buka, yang kemudian berisi style yang akan diaplikasikan pada elemen
pada selector dan diakhiri dengan kurung kurawal tutup.
selector {
style : nilai;
style : nilai;
}
Selector dapat memanggil elemen tertentu yang terdapat pada halaman HTML. Berikut ini
merupakan daftar selector yang umum digunakan :
1. Selector class
Selector class akan menyeleksi elemen elemen dengan nilai atribut class tertentu.
Misalkan terdapat elemen html seperti pada baris kode berikut ini
<div id=data>
<img class=gambar src=gambar1.jpg alt=keterangan />
</div>
Untuk menyeleksi semua elemen img dengan selector class, maka pada bagian css, kita
masukkan baris kode
.gambar {
visibility: hidden;
}
Baris CSS diatas akan membuat elemen elemen dengan class gambar menjadi tidak
terlihat.
2. Selector id
Hampir sama dengan selector class, yang membedakan adalah jika pada selector class
menggunakan titik (.) sebelum menuliskan nama classnya di CSS, pada selector id
menggunakan tanda pagar (#) diikuti dengan nilai dari atribut id pada elemen yang
dimaksud. Pada baris HTML yang sama misalkan, untuk menyeleksi elemen div dengan
nilai atribut id yaitu data, maka baris kode CSSnya adalah sebagai berikut :
#data {
position: absolute;
}
Dengan baris kode css diatas, maka elemen div akan menjadi absolute, posisinya tidak
akan terpengaruh dengan posisi elemen elemen lain.
3. Selector element
Berbeda dengan 2 selector sebelumnya, selector elemen akan langsung menyeleksi
elemen dengan tag tertentu. Misalkan pada baris HTML sebelumnya, kita akan
menyeleksi semua elemen img, maka kita hanya perlu mengetikkan nama elemennya
tanpa diawali dengan tanda titik atau pagar.
img {
margin: 10px;
}
Baris kode di atas akan membuat elemen elemen img memiliki jarak 10 piksel
terhadap elemen elemen yang ada di sekitarnya.
Ada banyak selector - selector lain yang terdapat pada CSS. Hal tersebut dapat dipelajari
lebih lanjut dan lebih dalam pada di http://www.w3schools.com/cssref/css_selectors.asp.
STYLE CSS SEBAGAI ATRIBUT ELEMEN HTML
Selain penulisannya dapat diletakkan di dalam elemen head, kita juga dapat meletakkan style
css pada atribut style di dalam elemen HTML. Atribut style merpakan atribut global yang ada
di semua elemen HTML.
Contoh dari penggunaan style CSS yang dimasukkan ke dalam atribut style adalah sebagai
berikut :
<div id=data style=background-color: red; margin: 10px;>
</div>
Elemen div dengan atribut id bernilai data, diberikan style dengan nilai background-color
merah, dan margin 10 piksel.
DAFTAR STYLE CSS

Berikut ini merupakan properti style CSS yang sering digunakan beserta fungsinya.
Atribut
Deskripsi
background
Mengatur tampilan background element, ada beberapa properti

bawahan di dalam properti ini, seperti
background-color untuk menentukan warna background
background-image untuk menentukan gambar background
background-position untuk menentukan posisi background
border
Mengatur garis tepi dari background yang dimaksud, contoh nilai

dari properti ini yaitu :
solid 1px black;
yang artinya garis tepi bersifat garis berwarna solid setebal 1 piksel
dengan warna hitam.
margin
Mengatur jarak elemen dengan elemen yang ada disekitarnya
padding
Mengatur isi konten elemen terhadap sisi - sisi terluar dari elemen.
position
Mengatur posisi element. Dapat berupa relative, absolute, fixed,

atau static;
width
Mengatur panjang elemen

height
Mengatur lebar elemen
rotation
Mengatur rotasi elemen
float
Mengatur penempatan elemen terhadap elemen elemen yang

didefinisikan sebelumnya. Dapat diberi nilai left, right, none, atau
inherit;
Masih banyak properti dari style css yang dapat dipelajari, properti properti tersebut dapat
dipelajari di halaman http://www.w3schools.com/cssref/
JAVASCRIPT
Javascript merupakan bahasa pemograman sisi klien yang dijalankan oleh web browser agar
halaman web menjadi lebih interaktif.
Javascript dapat diletakkan di dalam elemen <script type=text/javascript></script>.
Karna sifat dari javascript yang berorientasi objek, maka ada banyak objek yang telah
didefinisikan oleh javascript dan siap untuk digunakan. Salah satu objek yang sangat sering
digunakan adalah document. document merupakan objek yang dapat mengatur seluruh
isi dan perintah perintah di dalam javascript yang berkaitan dengan halaman HTML.
Contoh javascript dapat mencetak sebuah teks ke dalam tampilan HTML

<body>
isi halaman
<script type="text/javascript" >
document.write('dari javascript');
</script>
</body>
Baris kode HTML di atas akan menghasilkan tampilan pada browser berupa teks
isi halaman dari javascript
teks isi halaman akan tercetak apa adanya. Ketika HTML membaca elemen script, maka
content dari elemen tersebut akan terbaca sebagai javascript dan kemudian menjalankan
setiap perintah di dalam baris kode javascript.
Baris document.write('dari javascript'); akan mencetak teks dari javascript ke dalam

tampilan website.
MENGAKSES ELEMEN HTML DENGAN JAVASCRIPT
Sama seperti fungsi selector pada CSS, javascript juga mempunyai fungsi tersendiri untuk
mengakses setiap elemen elemen di dalam HTML. Ada beberapa fungsi yang digunakan
untuk mengakses elemen elemen pada HTML.
GET ELEMENT BY ID
Fungsi perintah getElementById digunakan untuk mendapatkan 1 elemen berdasarkan id
tertentu pada elemen. Setelah elemen tersebut di dapatkan, kita dapat mengubah isi dari
elemen yang telah diambil. Misalkan contoh
<body>
<div id="konten">
Konten yang seharusnya
</div>
document.getElementById('konten').innerHTML = 'konten dari javascript';
</script>
</body>
Tampilan dari dijalankannya baris kode diatas di dalam web browser adalah seperti berikut
ini :
Yang tampil pada halaman browser adalah teks yang ada di dalam perintah innerHTML.
innerHTML digunakan untuk memasukkan/mengganti konten ke dalam elemen yang
sebelumnya telah diseleksi melalui perintah getElementById.
GET ELEMENT BY CLASS NAME
Selain memilih elemen dengan menggunakan id dari elemen tersebut, kita juga dapat
memilih elemen berdasarkan kelas yang ada pada elemen tersebut. Kita dapat menggunakan
perintah getElementsByClassName. Perintah tersebut bernilai array atau daftar elemen
yang memuat class tertentu.
Perhatikan contoh di bawah ini :
<body>
<div id="konten">
<a class="pranala" href="html1.html">Link</a> <br />
<a class="pranala" href="html2.html">Link kedua</a><br />
<a class="kembali" href="html10.html">Kembali</a>
</div>
document.getElementsByClassName('pranala')[0].style.fontSize = '30px';
</script>
</body>
Baris kode diatas akan mengubah elemen pertama dengan nama class pranala. Elemen
tersebut akan diubah ukuran hurufnya menjadi 30 piksel.
Berbeda dengan getElementById, fungsi ini menghasilkan banyak elemen, sehingga untuk
memilih satu elemen, terdapat indeks yang harus ditentukan. Di dalam contoh tersebut,
indeks array bernilai 0, artinya bahwa elemen paling pertama yang akan diubah stylenya
(indeks array dimulai dari 0).
document.getElementsByClassName('pranala')[0]
MENGANTI STYLE DENGAN JAVASCRIPT

Selain menggunakan CSS, Javascritp juga dapat mengganti style dari elemen secara dinamis.
Fungsi awalnya hampir sama dengan penjelasan sebelumnya. Kita harus menentukan /
menyeleksi elemen yang akan diubah stylenya. Kemudian berikan perintah style, diikuti
dengan style yang akan di ubah. Perhatikan contoh di bawah ini !
<body>
<div id="konten">
Konten yang seharusnya
</div>
document.getElementById('konten').style.backgroundColor = "red";
</script>
</body>
Di dalam baris javascript terdapat perintah style.backgroundColor untuk mengubah

warna background dari elemen yang telah dipilih.
MENGUBAH NILAI ATRIBUT DARI ELEMEN
Sama seperti sebelumnya, kita harus memilih elemen yang akan diubah atribut elemennya.
Perintah yang digunakan yaitu setAttribute. Perhatikan contoh berikut ini :
<body>
<div id="konten">
<a id="pertama" href="html1.html">Link</a> <br />
<a id="kedua" href="html2.html">Link kedua</a><br />
<a class="kembali" href="html10.html">Kembali</a>
</div>
document.getElementById('kedua').setAttribute('href', 'google.com');
</script>
</body>
Terdapat baris
document.getElementById('kedua').setAttribute('href', 'google.com');
baris tersebut akan mengubah atribut href pada elemen dengan id kedua yang tadinya
bernilai html2.html menjadi google.com.

HTML, CSS, Javascript

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, CSS, Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Web

DENGAN APLIKASI WEB CODEPEN

Mengintegerasikan gambar dengan tulisan.

Mendefinisikan sebuah singkatan

Tidak didukung di HTML5. Mendefinisikan akronim

Mendefinisikan informasi kontak untuk penulis / pemilik dokumen

Tidak didukung di HTML5. Usang dalam HTML 4.01. Mendefinisikan

Mendefinisikan daerah dalam peta gambar

Mendefinisikan sebuah artikel

Mendefinisikan konten selain dari konten halaman

Mendefinisikan konten suara

Mendefinisikan teks tebal

Menentukan URL dasar / target untuk semua URL relatif dalam

Tidak didukung di HTML5. Usang dalam HTML 4.01. Menentukan

Menimpa arah teks saat

Tidak didukung di HTML5. Mendefinisikan teks besar

Mendefinisikan bagian yang dikutip dari sumber lain

Mendefinisikan tubuh dokumen

Mendefinisikan istirahat baris

Mendefinisikan sebuah tombol diklik

Digunakan untuk menggambar grafik, on the fly, melalui scripting

Mendefinisikan sebuah judul tabel

Tidak didukung di HTML5. Usang dalam HTML 4.01. Mendefinisikan

Mendefinisikan judul karya

Mendefinisikan potongan kode komputer

Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>

Mendefinisikan tombol untuk memanggil perintah di javascript.

Menentukan input dari daftar yang telah ditampilkan

Mendefinisikan deskripsi dari item dalam daftar definisi

Mendefinisikan teks yang telah dihapus dari dokumen

Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau

Mendefinisikan sebuah istilah definisi

Tidak didukung di HTML5. Usang dalam HTML 4.01. Mendefinisikan

Mendefinisikan bagian dalam dokumen

Mendefinisikan sebuah daftar definisi

Mendefinisikan sebuah istilah (item) dalam daftar definisi

Mendefinisikan teks miring untuk penekanan kalimat

Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML)

Grup terkait unsur-unsur dalam bentuk

Mendefinisikan sebuah caption untuk elemen <figure>

Menentukan konten mandiri

Tidak didukung di HTML5. Usang dalam HTML 4.01. Mendefinisikan

Mendefinisikan sebuah footer untuk dokumen atau bagian bawah

Mendefinisikan sebuah form HTML untuk input pengguna

Tidak didukung di HTML5. Mendefinisikan jendela (frame) dalam

Tidak didukung di HTML5. Mendefinisikan satu set frame

Mendefinisikan judul HTML

Mendefinisikan informasi tentang dokumen

Mendefinisikan sebuah header untuk dokumen atau bagian atas

Kumpulan dari header, di dalamnya bisa memuat elemen <h1> hingga

Mendefinisikan perubahan tematik dalam konten yang ditandai dengan

Mendefinisikan akar dari sebuah dokumen HTML

Mendefinisikan teks miring

Mendefinisikan frame inline untuk halaman HTML di dalam HTML

Mendefinisikan kontrol input

Mendefinisikan teks yang telah dimasukkan ke dalam dokumen

Mendefinisikan input keyboard

Mendefinisikan sebuah bidang kunci-pair generator (untuk formulir)

Mendefinisikan sebuah label untuk sebuah elemen <input>

Mendefinisikan sebuah caption untuk sebuah <fieldset>, <Angka>, atau

Mendefinisikan sebuah item daftar

Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

(paling sering digunakan untuk link ke style sheet)

Mendefinisikan sebuah client-side gambar peta