Dasar Pemrograman HTML
Diunggah oleh
chandnggangguDasar Pemrograman HTML
Diunggah oleh
chandnggangguPEMROGRAMAN DASAR HTML 2015
DASAR PEMROGRAMAN HTML
A. PERSIAPAN
Sebelum kita mempelajari HTML, ada beberapa hal yang harus dilakukan yaitu menginstall
aplikasi-aplikasi pendukung yang digunakan dalam pembelajaran HTML.
1. Web Browser
Web browser adalah aplikasi yang digunakan untuk menampilkan halaman website. Karena
HTML merupakan salah satu bahasa pemrograman yang digunakan untuk membangun
website, maka kita perlu menginstall web browser yang akan digunakan untuk menampilkan
hasil latihan. Berikut beberapa web browser yang dapat Anda gunakan untuk menampilkan
hasil latihan HTML.
a. Mozilla Firefox
Gambar 1 Mozilla firefox
PEMROGRAMAN DASAR HTML 2015
b. Google Chrome
Gambar 2 Google Chrome
c. Safari
Gambar 3 Safari
PEMROGRAMAN DASAR HTML 2015
d. Internet Explorer
Gambar 4 Internet Explorer
2. Text Editor
Text editor merupakan software yang digunakan untuk mengetikkan bahasa pemrograman
web, salah satunya HTML. Dalam pembelajaran HTML, text editor digunakan untuk
mengetikkan skrip HTML. Anda dapat menggunakan text editor bawaan Windows yaitu
Notepad. Namun, bagi yang masih baru belajar HTML saya sarankan menggunkan text editor
yang lebih baik, misalnya Notepad++. Software ini kaya akan fitur yang memudahkan dalam
pembelajaran HTML. Setiap bagian dalam skrip akan memiliki warna yang berbeda-beda
sehingga akan sangat memudahkan dalam pembelajarn. Berikut tampilan Notepad++:
Gambar 5 Notepad++
PEMROGRAMAN DASAR HTML 2015
B. Dasar HTML
1. Pengertian HTML
HTML singkatan dari Hypertext Markup Language merupakan bahasa skrip yang digunakan
untuk membuat struktur dasar halaman website. Semua website-website yang Anda temui di
internet seperti google, facebook, twitter dan sebagainya menggunakan HTML. Jadi dapat
dikatakan HTML adalah bahasa dasar untuk menampilkan halaman web pada web browser.
2. Unsur HTML
HTML terdiri dari beberapa unsur yaitu:
a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah
tag dengan nama body.Tag harus ditulis secara berpasangan, yang terdiri atas tag pembuka
dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini
adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen
HTML. Sebagian tag ada yang tidak memiliki tag penutup.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
c. Atribut
Atribut mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai.
Setiap tag memiliki atribut yang berbeda-beda. Atribut bisa dituliskan semuanya, dituliskan
sebagian, atau tidak menggunakan atribut sama sekali. Atribut tidak harus ditulis urut. Contoh
Atribut:
<body background=”red”></body>
Pada contoh di atas, body adalah nama tag, background adalah nama atribut, sedangkan red
adalah nilai dari atribut tersebut.
3. Struktur Dasar HTML
Dalam penulisan HTML ada beberapa tag yang wajib dituliskan dengan struktur yang sudah
ditentukan. Struktur penulisan tag tersebut yang dimaksud Struktur Dasar HTML. Struktur
dasart penulisan HTML yaitu sebagai berikut:
<!DOCTYPE HTML>
Adalah tag awal dari setiap dokumen HTML yang berfungsi untuk menginformasikan pada
PEMROGRAMAN DASAR HTML 2015
<html> ... </html>
Setiap dokumen HTML dituliskan di dalam tag ini.
<head> ... </head>
Tag ini digunakan untuk menyimpan berbagai informasi tentang dokumen HTML. Apa yang
terdapat di dalam tag ini tidak akan ditampilkan di browser.
<title> ... </title>
Tag ini digunakan untuk membuat judul HTML. Apa yang dituliskan di dalam tag ini akan
muncul di title bar browser.
<body> ... </body>
Apa yang akan ditampilkan pada halaman browser dituliskan di dalam tag ini.
C. PEMFORMATAN TEXT
Ada beberapa jenis pemformatan text dalam HTML, yaitu sebagai berikut:
1. Pemformatan paragraf
Untuk membuat paragraf dalam dokumen HTML menggunakan tag <p> ... </p>. Atribut yang
sering digunakan dalam tag ini adalah align. Atribut ini digunakan untuk mengatur perataan
paragraf. Nilai yang dapat diberikan pada atribut align adalah left, center, right dan justify.
Perhatikan contoh berikut:
PEMROGRAMAN DASAR HTML 2015
Gambar 6 Hasil pemformatan paragraf
2. Pemformatan judul
Ada 6 style judul yang dapat dibuat menggunakan HTML yaitu <h1> sampai <h6>. <h1>
menghasilkan judul dengan ukuran huruf paling besar sedangkan <h6> akan menghasilkan
judul dengan ukuran palin kecil.
PEMROGRAMAN DASAR HTML 2015
Gambar 7 Hasil pemformatan judul
3. Style huruf
Text yang dibuat dengan HTML dapat dibuat tebal, miring, bergaris bawah dan bergaris tengah.
Untuk membuat text tebal menggunakan tag <b> ... </b>, untuk membuat text miring
menggunakan tag <i> ... </i>, untuk menjadikan text bergaris bawah menggunakan tag <u> ...
</u>, dan untuk membuat tag bergaris tengah menggunakan tag <strike></strike>.
PEMROGRAMAN DASAR HTML 2015
Gambar 8 Huruf tebal, miring, bergaris bawah dan bergaris tengah
4. Subscript dan superscript
Dalam penulisan rumus matematika, kita sering menemui penulisan huruf yang ditulis lebih
kecil dan posisinya di sebelah atas atau bawah yang biasanya disebut superscript dan subscript.
Untuk membuat superscript menggunakan tag <sup> sedangkan untuk membuat subscript
menggunakan tag <sub>.
Gambar 9 Hasil superscript dan subscript
5. Simbol-simbol khusus
Setiap simbol memiliki kode nama dan kode nomor. Untuk menambahkan simbol-simbol
tertentu dapa dilakukan dengan menuliskan kode nama atau kode nomor dari simbol tersebut.
Berikut daftar kode nama dan kode nomor simbol dalam HTML.
Kode Nomor Kode Nama
Simbol/Karakter Deskripsi
HTML HTML
PEMROGRAMAN DASAR HTML 2015
4 Empat 4
5 Lima 5
6 Enam 6
7 Tujuh 7
8 Delapan 8
9 Sembilan 9
Tanda kanan ke kiri ‏ ‏
Tanda kiri ke kanan ‎ ‎
Tanda penghubung halus ­ ­
Zero width joiner ‍ ‍
Zero width non-joiner ‌ ‌
' Kutip satu '
- Tanda kurang -
− − −
– Garis en – –
— Garis em — —
Spasi en    
Spasi em    
Spasi tipis    
! Tanda seru !
" Kutip ganda " "
# Simbol pagar #
$ Simbol dollar $
% Simbol persen %
& Simbol dan & &
( Kurung buka (
) Kurung tutup )
* Tanda bintang *
, Tanda koma ,
. Tanda titik .
/ Garis miring /
: Titik dua :
; Titik koma ;
? Tanda tanya ?
@ Simbol [at] @
[ Kurung siku buka [
Garis miring
\ \
terbalik/backslash
] Kurung siku tutup ]
^ Tanda sisipan/sirkumfleksa ^
ˆ ˆ ˆ
_ Garis bawah _
PEMROGRAMAN DASAR HTML 2015
~ Simbol ekuivalen ~
¡ Tanda seru terbalik ¡ ¡
¦ Garis tegak terputus ¦ ¦
Titik dua di atas huruf
¨ ¨ ¨
vokal
¯ Garis atas ¯ ¯
´ Aksen akut ´ ´
¸ Spasi cedilla ¸ ¸
¿ Tanda tanya terbalik ¿ ¿
˜ ˜ ˜
‘ Kutip kiri tunggal ‘ ‘
’ Kutip kanan tunggal ’ ’
‚ Kutip rendah tunggal ‚ ‚
“ Kutip kiri ganda “ “
” Kutip kanan ganda ” ”
„ Kutip rendah ganda „ „
′ Menit ′ ′
″ Detik ″ ″
‹ Panah kiri tunggal ‹ ‹
› Panah kanan tunggal › ›
‾ Garis atas ‾ ‾
¢ Simbol sen ¢ ¢
£ Simbol pondsterling £ £
¤ Simbol mata uang ¤ ¤
¥ Simbol yen ¥ ¥
€ Simbol Euro € €
+ Tanda tambah +
⊕ ⊕ ⊕
⊗ ⊗ ⊗
∗ ∗ ∗
< Kurang dari < <
= Sama dengan =
≠ ≠ ≠
> Lebih dari > >
± Simbol lebih kurang ± ±
« Panah kiri ganda « «
» Panah kanan ganda » »
× Simbol perkalian × ×
∀
÷
∂
Simbol pembagian ÷
∀
∂
÷
∀
∂
∃ ∃ ∃
∅ ∅ ∅
PEMROGRAMAN DASAR HTML 2015
∋ ∋ ∋
∏ ∏ ∏
∑ ∑ ∑
√ √ √
∝ ∝ ∝
∧
∠
∨
∠
∧
∨
∠
∧
∨
∪
∩ ∩
∪
∩
∪
∴
∫
∼
∫
∴
∼
∫
∴
∼
≅ ≅ ≅
≈ ≈ ≈
≡ ≡ ≡
≤ ≤ ≤
≥ ≥ ≥
⊂ ⊂ ⊂
⊄ ⊄ ⊄
⊃ ⊃ ⊃
⊆ ⊆ ⊆
⊥
⊇
⋅
⊇
⊥
⋅
⊇
⊥
⋅
⌈ ⌈ ⌈
⌉ ⌉ ⌉
⌊ ⌊ ⌊
⌋ ⌋ ⌋
◊ ◊ ◊
↑ Panah atas ↑ ↑
→ Panah kanan → →
↓ Panah bawah ↓ ↓
← Panah kiri ← ←
Simbol Enter/Carriage
↵ ↵ ↵
return
↔ Panah kiri kanan ↔ ↔
§ Simbol bagian/seksi § §
Simbol hak cipta
© © ©
(Copyright)
¬ Simbol bukan ¬ ¬
Simbol merek dagang
® terdaftar (Registered ® ®
PEMROGRAMAN DASAR HTML 2015
Simbol pilcrow, simbol
¶ ¶ ¶
paragraf
· Titik tengah, koma Georgia · ·
… Ellipsis horisontal … …
♠ ♠ ♠
♣ ♣ ♣
♥ ♥ ♥
♦ ♦ ♦
† Salib † †
‡ Salib ganda ‡ ‡
• Peluru • •
‰ Per mil ‰ ‰
¼ Satu per empat ¼ ¼
½ Satu per dua, setengah ½ ½
¾ Tiga per empat ¾ ¾
¹ Pangkat satu ¹ ¹
Pangkat dua, kuadrat,
² ² ²
persegi
³ Pangkat tiga, kubik ³ ³
∞ ∞ ∞
A A
a a
ª Indikator ordinal feminin ª ª
Á Á Á
á á á
À À À
à à à
  Â
â â â
Ä Ä Ä
ä ä ä
à à Ã
ã ã ã
Å Å Å
å å å
Æ Æ Æ
æ æ æ
B B
b b
C C
c c
Ç Ç Ç
ç ç ç
PEMROGRAMAN DASAR HTML 2015
ð ð ð
e e
E E
É É É
é é é
È È È
è è è
Ê Ê Ê
ê ê ê
Ë Ë Ë
ë ë ë
f f
F F
ƒ ƒ ƒ
g g
G G
h h
H H
i i
I I
Í Í Í
í í í
Ì Ì Ì
ì ì ì
Î Î Î
î î î
Ï Ï Ï
ï ï ï
j j
J J
k k
K K
l l
L L
m m
M M
n n
N N
Ñ Ñ Ñ
ñ ñ ñ
o o
O O
PEMROGRAMAN DASAR HTML 2015
ò ò ò
Ô Ô Ô
ô ô ô
Ö Ö Ö
ö ö ö
Õ Õ Õ
õ õ õ
Ø Ø Ø
ø ø ø
Œ Œ Œ
œ œ œ
p p
P P
q q
Q Q
r r
R R
s s
S S
Š Š Š
š š š
ß ß ß
t t
T T
Þ Þ Þ
þ þ þ
™ Merek dagang ™ ™
u u
U U
Ú Ú Ú
ú ú ú
Ù Ù Ù
ù ù ù
Û Û Û
û û û
Ü Ü Ü
ü ü ü
v v
V V
w w
W W
x x
PEMROGRAMAN DASAR HTML 2015
ý ý ý
ÿ ÿ ÿ
Ÿ Ÿ Ÿ
z z
Z Z
Α Alpha Α Α
α alpha α α
Β Beta Β Β
β beta β β
Γ Gamma Γ Γ
γ gamma γ γ
Δ Delta Δ Δ
δ delta δ δ
Ε Epsilon Ε Ε
ε epsilon ε ε
Ζ Zeta Ζ Ζ
ζ zeta ζ ζ
Η Eta Η Η
η eta η η
Θ Theta Θ Θ
θ theta θ θ
ϑ Simbol theta ϑ ϑ
Ι Iota Ι Ι
ι iota ι ι
Κ Kappa Κ Κ
κ kappa κ κ
Λ Lambda Λ Λ
λ lambda λ λ
Μ Mu Μ Μ
μ mu μ μ
Ν Nu Ν Ν
ν nu ν ν
Ξ Xi Ξ Ξ
ξ xi ξ ξ
Ο Omicron Ο Ο
ο omicron ο ο
Π Pi Π Π
π pi π π
ϖ Simbol pi ϖ ϖ
Ρ Rho Ρ Ρ
ρ rho ρ ρ
Σ Sigma Σ Σ
PEMROGRAMAN DASAR HTML 2015
Υ Upsilon Υ Υ
υ upsilon υ υ
ϒ Simbol upsilon ϒ ϒ
Φ Phi Φ Φ
φ phi φ φ
Χ Chi Χ Χ
χ chi χ χ
Ψ Psi Ψ Ψ
ψ psi ψ ψ
Ω Omega Ω Ω
ω omega ω ω
Non-breaking space  
Spasi  
Gambar 10 Simbol khusu dalam HTML
6. Text komentar
Komentar adalah baris text yang tidak ditampilkan dalam halaman website. Fungsi komentar
adalah untuk memberi keterangan pada skrip. Untuk menandai sebuah komentar
menggunakan tag <!-- ... /-->.
PEMROGRAMAN DASAR HTML 2015
Gambar 11 Komentar dalam HTML
D. LIST
Ada dua jenis list yaitu list berurutan (ordered list) dan list tidak berurutan (unordered list).
Untuk membuat list berurutan menggunakan tag <ol> ... </ol>. Tag ini memiliki atribut type
yang menunjukkan jenis penomoran dan dapat diberi nilai 1, a, A, i. Untuk membuat list tidak
berurutan menggunakan tag <ul> ... </ul>. Atribut ini juga memiliki atribut type, tetapi nilainya
berbeda, yaitu round dan square. Untuk membuat item list pada tiap baris list menggunakan
tag <li> ... </li>.
PEMROGRAMAN DASAR HTML 2015
E. TABLE
1. Tabel dasar
Untuk membuat tabel pada HTML menggunakan tag <table> ... </table>. Isi dalam tabel dibagi
menjadi dua bagian yaitu header tabel ditunjukkan dengan tag <thead> ... </thead> dan body
tabel ditunjukkan dengan tag <tbody> ... </tbody>. Untuk menambah baris pada tabel
menggunakan tag <tr> ... </tr>. Untuk menambahkan data, jika berupa data header
menggunakan tag <th> ... </th> sedangkan pada body tabel menggunakan tag <td> ... </td>.
Format penulisan tabel secara umum adalah sebagai berikut:
<table>
<thead>
<tr>
<th> ...... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ...... </td>
</tr>
</tbody>
</table>
Tag table memiliki beberapa atribut diantaranya:
∑ Cellspacing : menentukan jarak antar sel
∑ Cellpadding : menentukan jarak isi cel dengan bordernya
∑ Width : menentukan lebar tabel
∑ Height : menentukan tingi tabel
∑ Bgcolor : memberi warna background pada tabel
∑ Align : menentukan perataan tabel
∑ Border : menentukan tebal border tabel
Atribut juga dapat diberikan pada sel tabel yait pada tag <td>. Atribut yang dapat diberikan
pada tag <td> diantaranya:
∑ Align : menentukan perataan text pada isi sel
∑ Valign : menentukan perataan text secara vertikal
∑ Width : menentukan lebar sel
∑ Height : menentukan tinggi tabel
∑ Bgcolor : memberi warna background pada sel
PEMROGRAMAN DASAR HTML 2015
Gambar 13 Tabel pada HTML
2. Tabel dengan span
Dalam membuat tabel sering kali kita menggabungkan beberapa sel menjadi satu sel. Dalam
HTML, penggabungan sel dikenal dengan istilah span. Untuk menggabungkan beberapa sel di
dalam HTML menggunakan atribut colspan dan rowspan. Colspan digunakan untuk
menggabungkan beberapa kolom, sedangkan rowspan digunakan untuk menggabungkan
beberapa baris.
PEMROGRAMAN DASAR HTML 2015
Gambar 13 Tabel dengan span
F. MENAMBAH GAMBAR
Tag yang digunakan untuk menambahkan gambar di dalam HTML adalah tag <img>. Tag ini
tidak memeliki tag penutup. Atribut yang dapat diberikan ke dalam tag ini diantaranya:
∑ Src : menentukan sumber dan nama gambar
∑ Width : menentukan lebar gambar
∑ Height : menentukan tinggi gambar
∑ Alt : memberi text alternatif yang ditampilkan jika gambar tidak dapat ditampilkan
∑ Title : membuat text yang tampil ketika mouse di atas gambar
Jika gambar tidak ditentukan tinggi dan lebarnya, maka ukuran gambar sesuai dengan gambar
aslinya. Namun, jika gambar ditentukan tinggi dan lebarnya sekaligus, ukuran gambar menjadi
PEMROGRAMAN DASAR HTML 2015
Format gambar yang didukung oleh tag <img> adalah jpg, png dan gif. Nama dan format
gambar harus dituliskan dengan lengkap pada atribut src. Penulisan nama dan letak gambar
ada beberapa kemungkinan yaitu sebagai berikut:
∑ Jika gambar satu folder dengan file HTML, maka penulisanya src=”nama_gambar.jpg”.
∑ Jika gambar terletak di dalam folder yang berada di folder yang sama dengan file HTML,
maka penulisanya menjadi src=”nama_folder/nama_gambar.jpg”.
∑ Jika gambar terletak di folder yang berbeda dengan folder HTML, namun kedua folder
tersebut berada di folder yang sama, maka penulisanya menjadi
src=”../nama_folder/nama_gambar.jpg”. Tanda ../ artinya keluar dari folder yang berisi file
HTML.
Gambar 14 manambahkan gambar
G. VIDEO DAN AUDIO
Pada HTML ada tag tambahan yang dapat menampilkan video atau audio di dalam browser.
Tag yang digunakan untuk menampilkan video yaitu <video> ... </video>. Adapun tag yang
digunakan untuk menampilkan audio yaitu <audio> ... </audio>. Kedua tag ini memiliki
kesamaan dalam atributnya yaitu sebagai berikut:
∑ Src : menentukan nama file dan sumber/letak video atau audio
∑ Width : menentukan lebar video atau audio control
∑ Height : menentukan lebar video, hanya dipakai pada tag <video>
∑ Controls : pilihan untuk menampilkan tombol kontrol atau tidak.
∑ Autoplay : pilihan untuk langsung dimainkan atau tidak
PEMROGRAMAN DASAR HTML 2015
Gambar 15 menampilkan video dan audio
H. MEMBUAT LINK
Link merupakan tulisan yang memiliki reaksi tertentu ketika diklik, misalnya untuk menuju
halaman website lain atau mendownload file. Link juga biasanya digunakan untuk membuat
menu website. Tag yang digunakan untuk membuat link adalah tag <a> ... </a>. Tag ini
memiliki beberapa atribut diantaranya:
∑ Href : menentukan tujuan dari link ketika diklik
∑ Target : menentukan target yang dituju saat diklik apakah di tab yang sama atau tab
lain.
∑ Title : menentukan tulisan yang tampil saat mouse memasuki area link
Penilisan nilai atribut href memiliki beberapa cara tergantung dari fungsi link yaitu sebagai
berikut:
∑ Jika link digunakan untuk membuka file cara penulisanya href=”galeri.html”. Jika format
file dapat dibuka di browser seperti html, txt, jpg, png atau gif, maka file akan dibuka. Jika
format file tidak dapat dibuka oleh browser seperti docx, xlsx, zip, rar, dan sebagainya,
maka file akan didownload.
∑ Jika link digunakan untuk menuju bagian lain dalam satu halaman website maka
penulisanya menjadi href=”#bawah”. Agar link tersebut berfungsi, maka harus ada tag <a>
yang diberi atribut id=”bawah”
PEMROGRAMAN DASAR HTML 2015
∑ Jika link digunakan untuk mengirim email maka penulisanya menjadi href=”mailto:
nama_email”
Gambar 15 berbagai jenis link
I. IFRAME
Iframe digunakan untuk meampilkan suatu halaman website dalam suatu kotak yang
ditentukan. Tag yang digunakan yaitu <iframe> ... </iframe>. Tag ini biasanya digunakan untuk
membuat widget pada blogspot. Atribut yang bisa digunakan yaitu:
∑ Src : menentukan sumber website yang ingin ditampilkan
∑ Width : menentukan lebar kotakan
∑ Height : menentukan tinggi kotakan
PEMROGRAMAN DASAR HTML 2015
Gambar 16 menampilkan file html dengan iframe
J. FORM
Tag <form> ... </form> digunakan untuk membuat formulir, yaitu sebuah tampilan pada
halaman website yang digunakan untuk mengimputkan data. Tag ini memiliki beberapa atribut
yaitu:
∑ Action : menentukan nama file yang akan memproses data yang dikirim
∑ Method : mengatur metode pengiriman data bisa diisi get atau post
∑ Name : mengatur nama form
Perbedaan antara get dan post yaitu sebagai berikut:
GET:
∑ Untuk mengirim data dalam ukuran kecil
∑ Data ditampilkan pada address bar
POST:
∑ Dapat mengirim data dalam ukuran besar
∑ Data tidak ditampilkan pada address bar
Di dalam tag <form> ... </form> ada beberapa tag yang digunakan untuk membuat alat imput
data yaitu:
1. Tag <label> ... </label>
Tag <label> digunakan untuk membuat label dari sebuat alat imputan. Tag ini biasanya ditulis
sebelum tag <input>. Atribut yang biasanya digunakan dalam tag ini adalah for yang diisi
dengan nama id dari alat imputan yang diberi label.
2. Tag <input>
Tag <input> digunakan untuk membuat inputan dengan berbagai macam tipe. Atribut yang
dapat digunakan pada tag ini yaitu:
∑ Name : memberi nama data yang akan di kirim
∑ Value : memberi nilai/isi data yang akan dikirim
Size mengatur lebar inputan
PEMROGRAMAN DASAR HTML 2015
Ada berbagai macam tipe inputan yang bisa diberikan pada atribut type, yaitu:
∑ Text : inputan untuk memasukan text biasa
∑ Hidden : inputan yang disembunyikan
∑ Password : inputan untuk memasukan password
∑ Radio : inputan berupa lingkaran yang bisa dipilih salah Satu
∑ Checkbox : inputan berupa kotak pilihan yang dapat dicentang
∑ Submit : inputan berupa tombol untuk mengirim data
∑ Reset : inputan berupa tombol untuk mengosongkan formulir
∑ Button : inputan berupa tombol biasa untuk fungsi lain
Khusus Radio memiliki atribut selected, dan checkbox memiliki atribut checked.
Pada HTML5 ada penambahan tipe inputan, tetapi belum semua browser support. Tipe inputan
yang ditambahkan pada HTML 5 adalah sebagai berikut:
∑ Color : inputan untuk memilih warna
∑ Time : inputan untuk memilih jam
∑ Number : inputan untuk memasukkan angka
∑ Range : inputan berupa slider untuk menghasilkan angka
∑ Date : inputan untuk memasukkan tanggal
∑ Email : inputan untuk memasukkan email
∑ Url : inputan untuk memasukkan url (alamat website)
PEMROGRAMAN DASAR HTML 2015
Tag <select> ... </select> digunakan untuk membuat inputan berupa pilihan seperti agama,
pekerjaan, jurusan, dsb. Atribut yang bisa digunakan yaitu:
∑ Name : memberi nama data yang dikirim
∑ Size : mengatur banyaknya data yang ditampilkan tanpa scroll
∑ Multiple : mengatur dapat memilih lebih dari satu atau tidak
Untuk menambahkan pilihan menggunakan tag <option> ... <option>.
Gambar 18 Pilihan pada form
4. Tag <textarea> ... </textarea>
Tag <textarea> ... </textarea> digunakan untuk membuat inputan yang dapat diisi dengan text
dalam jumlah banyak dan lebih dari satu baris, misalnya untuk input pesan, komentar, berita,
dll. Atribut yang dapat digunakan yaitu:
∑ Name : memberi nama data yang akan dikirim
∑ Cols : mengatur jumlah huruf yang bisa diinputkan dalam 1 baris
∑ Rows : mengatur jumlah baris
PEMROGRAMAN DASAR HTML 2015
Gambar 19 Textarea
PEMROGRAMAN DASAR HTML 2015
BUKU-BUKU KARYA PENULIS
Judul : Beatiful Animation with CSS3
Ukuran/Halaman : 16 x 23 cm / 122 halaman
Penerbit : Andi Publisher
Tahun Terbit : 2014
Keterangan : Membahas 40+ tutorial animasi
Singkat dengan CSS3 yang sering
digunakan pada desain website
,diantaranya: manipulasi
background, menu, tab, accordion,
image viewer, image slider, social
button, dsb.
Judul : Be Creative with HTML5 Canvas
Ukuran/Halaman : 14 x 21 cm / 204 halaman
Penerbit : Elex Media Komputindo
Tahun Terbit : 2014
Keterangan : Membahas penggunaan HTML5
Singkat Canvas mulai dari bentuk dasar,
animasi, video, audio, menangani
event, penerapan sifat-sifat fisika,
hingga tutorial membuat jam
analog, diagram (chart), aplikasi
painting, graphic editor dan photo
editor.
Judul : Smart Trik JQuery without
Ukuran/Halaman Plugin
: 14 x 21 cm / 248 halaman
Penerbit
: Andi Publisher
Tahun Terbit
: 2015
Keterangan
Singkat : Membahas 60+ tutorial jQuery
tanpa menggunakan plugin,
diantaranya : manipulasi gambar,
tabel, tanggal & waktu, teks,
PEMROGRAMAN DASAR HTML 2015
Judul : Web Programming Is Easy
Ukuran/Halaman : 14 x 21 cm / 224 halaman
Penerbit : Elex Media Komputindo
Tahun Terbit : 2015
Keterangan : Membahas panduan mudah
Singkat membuat website bagi pemula
mulai dari membuat halaman
admin, halaman front-end, trik
pengembangan website,
menggunakan jQuery, desain
responsive dengan Bootstrap,
konversi ke mysqli, hingga upload
ke hosting.
Judul : Super Dahsyar Responsive Web
Design dengan Foundation 5
Halaman : 192 halaman
Penerbit : Asfa Solution
Tahun Terbit : 2015
Keterangan : Membahas panduan membuat
Singkat website responsive dengan
foundation 5 mulai dari dasar-
dasar foundation hingga
penerapanya pada desain website
baik halaman administrator
maupun halaman pengunjung.
Judul : Trik Rahasia Menjadi Master
Worpress Handal
Halaman : 180 halaman
Penerbit : Asfa Solution
Tahun Terbit : 2015
Keterangan : Membahas pemrograman pada
Singkat wordpress mulai dari dasar
PEMROGRAMAN DASAR HTML 2015
widget, hingga membuat plugin
sendiri.
Judul : Easy & Simple Web Programming
Halaman : 228 halaman
Penerbit : Elex Media Komputindo
Tahun Terbit : 2016
Keterangan : Edisi kedua dari buku "Web
Singkat Programming Is Easy" dengan
penambahan 2 bab yaitu mengatasi
error pada PHP dan menggunakan
widget dari internet seperti google
map, komentar facebook, tweet
pada twitter, statistik pengunjung,
polling, dan sebagainya.
Anda mungkin juga menyukai
- MATERI PEMROGRAMAN DASAR - Unknown - UnknownBelum ada peringkatMATERI PEMROGRAMAN DASAR - Unknown - Unknown12 halaman
- Modul Interaksi Manusia Dan KomputerBelum ada peringkatModul Interaksi Manusia Dan Komputer49 halaman
- Modul 2 Menerapkan Format Pada Teks Pada Halaman Web PDFBelum ada peringkatModul 2 Menerapkan Format Pada Teks Pada Halaman Web PDF3 halaman
- Makalah Tes Tutor - Syiffa Putri MeillaniBelum ada peringkatMakalah Tes Tutor - Syiffa Putri Meillani23 halaman
- 22SIF0033_HYPERTEXT MARKUP LANGUAGE (HTML)_Part2Belum ada peringkat22SIF0033_HYPERTEXT MARKUP LANGUAGE (HTML)_Part217 halaman
- Pemrograman Berorientasi Objek dengan Visual C#Dari EverandPemrograman Berorientasi Objek dengan Visual C#
- Modul 2 Menerapkan Format Pada Teks Pada Halaman Web PDFModul 2 Menerapkan Format Pada Teks Pada Halaman Web PDF