Dasar-dasar HTML 2015
1
By: Rohi Abdulloh
DASAR-DASAR 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
b. Google Chrome
Dasar-dasar HTML 2015
2
By: Rohi Abdulloh Gambar 2 Google Chrome
c. Safari
Gambar 3 Safari
Dasar-dasar HTML 2015
3
By: Rohi Abdulloh
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++
B. Dasar HTML
1. Pengertian HTML
Dasar-dasar HTML 2015
4
By: Rohi Abdulloh
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 a kgrou d=”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 browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu
dicantumkan pada setiap awal penulisan HTML.
html ... html Setiap dokumen HTML dituliskan di dalam tag ini.
Dasar-dasar HTML 2015
5
By: Rohi Abdulloh
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:
Dasar-dasar HTML 2015
6
By: Rohi Abdulloh 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.
Dasar-dasar HTML 2015
7
By: Rohi Abdulloh Gambar 7 Hasil pemformat
an 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 strikestrike.
Dasar-dasar HTML 2015
8
By: Rohi Abdulloh 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.
SimbolKarakter Deskripsi
Kode Nomor HTML
Kode Nama HTML
Nol 48;
1 Satu
49; 2
Dua 50;
Dasar-dasar HTML 2015
9
By: Rohi Abdulloh 3
Tiga 51;
4 Empat
52; 5
Lima 53;
6 Enam
54; 7
Tujuh 55;
8 Delapan
56; 9
Sembilan 57;
Tanda kanan ke kiri
8207; rlm;
Tanda kiri ke kanan
8206; lrm;
Tanda penghubung halus 173;
shy; Zero width joiner
8205; zwj;
Zero width non-joiner 8204;
zwnj; Kutip satu
39; -
Tanda kurang 45;
− 8722;
minus; –
Garis en 8211;
ndash; —
Garis em 8212;
mdash; Spasi en
8194; ensp;
Spasi em 8195;
emsp;
Spasi tipis 8201;
thinsp; Tanda seru
33; Kutip ganda
34; quot;
Simbol pagar 35;
Simbol dollar 36;
Simbol persen 37;
Simbol dan 38;
amp; Kurung buka
40; Kurung tutup
41; Tanda bintang
42; ,
Tanda koma 44;
. Tanda titik
46; Garis miring
47; :
Titik dua 58;
; Titik koma
59; ?
Tanda tanya 63;
Simbol [at] 64;
[ Kurung siku buka
91; \
Garis miring terbalikbackslash
92; ]
Kurung siku tutup 93;
Tanda sisipansirkumfleksa 94;
ˆ 710;
circ; _
Garis bawah 95;
` Tanda petik
96; {
Kurung kurawal buka 123;
| Garis tegakpipe
124;
Dasar-dasar HTML 2015
10
By: Rohi Abdulloh }
Kurung kurawal tutup 125;
~ Simbol ekuivalen
126; ¡
Tanda seru terbalik 161;
iexcl; ¦
Garis tegak terputus 166;
brvbar; ¨
Titik dua di atas huruf vokal
168; uml;
¯ Garis atas
175; macr;
´ Aksen akut
180; acute;
¸ Spasi cedilla
184; cedil;
¿ Tanda tanya terbalik
191; iquest;
˜ 732;
tilde; Kutip kiri tunggal
8216; lsquo;
Kutip kanan tunggal 8217;
rsquo; ‚
Kutip rendah tunggal 8218;
sbquo; Kutip kiri ganda
8220; ldquo;
Kutip kanan ganda 8221;
rdquo; „
Kutip rendah ganda 8222;
bdquo; Menit
8242; prime;
Detik 8243;
Prime; Panah kiri tunggal
8249; lsaquo;
Panah kanan tunggal 8250;
rsaquo; ‾
Garis atas 8254;
oline; ¢
Simbol sen 162;
cent; £
Simbol pondsterling 163;
pound; ¤
Simbol mata uang 164;
curren; ¥
Simbol yen 165;
yen; €
Simbol Euro 8364;
euro; +
Tanda tambah 43;
⊕ 8853;
oplus; ⊗
8855; otimes;
∗ 8727;
lowast; Kurang dari
60; lt;
= Sama dengan
61; ≠
8800; ne;
Lebih dari 62;
gt; ±
Simbol lebih kurang 177;
plusmn; «
Panah kiri ganda 171;
laquo; »
Panah kanan ganda 187;
raquo; ×
Simbol perkalian 215;
times; ÷
Simbol pembagian 247;
divide; ∀
8704; forall;
∂ 8706;
part; ∃
8707; exist;
∅ 8709;
empty; 8711;
nabla; 8712;
isin;
Dasar-dasar HTML 2015
11
By: Rohi Abdulloh 8713;
notin; ∋
8715; ni;
∏ 8719;
prod; ∑
8721; sum;
√ 8730;
radic; ∝
8733; prop;
∠ 8736;
ang; 8743;
and; 8744;
or; ∩
8745; cap;
∪ 8746;
cup; ∫
8747; int;
∴ 8756;
there4; ∼
8764; sim;
≅ 8773;
cong; ≈
8776; asymp;
≡ 8801;
equiv; 8804;
le; 8805;
ge; 8834;
sub; 8836;
nsub; 8835;
sup; 8838;
sube; 8839;
supe; ⊥
8869; perp;
⋅ 8901;
sdot; 8968;
lceil; 8969;
rceil; 8970;
lfloor; 8971;
rfloor; ◊
9674; loz;
↑ Panah atas
8593; uarr;
→ Panah kanan
8594; rarr;
↓ Panah bawah
8595; darr;
← Panah kiri
8592; larr;
↵ Simbol EnterCarriage
return 8629;
crarr; ↔
Panah kiri kanan 8596;
harr; §
Simbol bagianseksi 167;
sect; ©
Simbol hak cipta Copyright
169; copy;
¬ Simbol bukan
172; not;
® Simbol merek dagang
terdaftar Registered trademark
174; reg;
° Simbol derajat
176; deg;
Dasar-dasar HTML 2015
12
By: Rohi Abdulloh µ
Simbol mikro 181;
micro; ¶
Simbol pilcrow, simbol paragraf
182; para;
· Titik tengah, koma Georgia
183; middot;
… Ellipsis horisontal
8230; hellip;
♠ 9824;
spades; ♣
9827; clubs;
9829; hearts;
9830; diams;
Salib 8224;
dagger; Salib ganda
8225; Dagger;
• Peluru
8226; bull;
‰ Per mil
8240; permil;
¼ Satu per empat
188; frac14;
½ Satu per dua, setengah
189; frac12;
¾ Tiga per empat
190; frac34;
¹ Pangkat satu
185; sup1;
² Pangkat dua, kuadrat,
persegi 178;
sup2; ³
Pangkat tiga, kubik 179;
sup3; ∞
8734; infin;
A 65;
a 97;
ª Indikator ordinal feminin
170; ordf;
Á 193;
Aacute; á
225; aacute;
À 192;
Agrave; à
224; agrave;
 194;
Acirc; â
226; acirc;
Ä 196;
Auml; ä
228; auml;
à 195;
Atilde; ã
227; atilde;
Å 197;
Aring; å
229; aring;
Æ 198;
AElig; æ
230; aelig;
B 66;
b 98;
C 67;
c 99;
Ç 199;
Ccedil; ç
231; ccedil;
d 100;
D 68;
Dasar-dasar HTML 2015
13
By: Rohi Abdulloh Ð
208; ETH;
ð 240;
eth; e
101; E
69; É
201; Eacute;
é 233;
eacute; È
200; Egrave;
è 232;
egrave; Ê
202; Ecirc;
ê 234;
ecirc; Ë
203; Euml;
ë 235;
euml; f
102; F
70; ƒ
402; fnof;
g 103;
G 71;
h 104;
H 72;
i 105;
I 73;
Í 205;
Iacute; í
237; iacute;
Ì 204;
Igrave; ì
236; igrave;
Î 206;
Icirc; î
238; icirc;
Ï 207;
Iuml; ï
239; iuml;
j 106;
J 74;
k 107;
K 75;
l 108;
L 76;
m 109;
M 77;
n 110;
N 78;
Ñ 209;
Ntilde; ñ
241; ntilde;
o 111;
O 79;
º Indikator ordinal maskulin
186; ordm;
Ó 211;
Oacute;
Dasar-dasar HTML 2015
14
By: Rohi Abdulloh ó
243; oacute;
Ò 210;
Ograve; ò
242; ograve;
Ô 212;
Ocirc; ô
244; ocirc;
Ö 214;
Ouml; ö
246; ouml;
Õ 213;
Otilde; õ
245; otilde;
Ø 216;
Oslash; ø
248; oslash;
Π338;
OElig; œ
339; oelig;
p 112;
P 80;
q 113;
Q 81;
r 114;
R 82;
s 115;
S 83;
Š 352;
Scaron; š
353; scaron;
ß 223;
szlig; t
116; T
84; Þ
222; THORN;
þ 254;
thorn; ™
Merek dagang 8482;
trade; u
117; U
85; Ú
218; Uacute;
ú 250;
uacute; Ù
217; Ugrave;
ù 249;
ugrave; Û
219; Ucirc;
û 251;
ucirc; Ü
220; Uuml;
ü 252;
uuml; v
118; V
86; w
119; W
87; x
120; X
88;
Dasar-dasar HTML 2015
15
By: Rohi Abdulloh y
121; Y
89; Ý
221; Yacute;
ý 253;
yacute; ÿ
255; yuml;
Ÿ 376;
Yuml; z
122; Z
90; Α
Alpha 913;
Alpha; α
alpha 945;
alpha; Beta
914; Beta;
β beta
946; beta;
Gamma 915;
Gamma; gamma
947; gamma;
Delta 916;
Delta; delta
948; delta;
Epsilon 917;
Epsilon; epsilon
949; epsilon;
Zeta 918;
Zeta; zeta
950; zeta;
Eta 919;
Eta; eta
951; eta;
Theta 920;
Theta; θ
theta 952;
theta; ϑ
Simbol theta 977;
thetasym; Iota
921; Iota;
ι iota
953; iota;
Kappa 922;
Kappa; kappa
954; kappa;
Lambda 923;
Lambda; lambda
955; lambda;
Mu 924;
Mu; mu
956; mu;
Nu 925;
Nu; nu
957; nu;
Xi 926;
Xi; xi
958; xi;
Omicron 927;
Omicron; ο
omicron 959;
omicron; Pi
928; Pi;
pi 960;
pi; ϖ
Simbol pi 982;
piv; Rho
929; Rho;
rho 961;
rho; Sigma
931; Sigma;
Dasar-dasar HTML 2015
16
By: Rohi Abdulloh sigma
963; sigma;
sigmaf 962;
sigmaf; Tau
932; Tau;
tau 964;
tau; Upsilon
933; Upsilon;
upsilon 965;
upsilon; ϒ
Simbol upsilon 978;
upsih; Phi
934; Phi;
φ phi
966; phi;
Chi 935;
Chi; chi
967; chi;
Psi 936;
Psi; psi
968; psi;
Omega 937;
Omega; omega
969; omega;
Non-breaking space 160;
nbsp; Spasi
32;
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 -- ... --.
Dasar-dasar HTML 2015
17
By: Rohi Abdulloh 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.
Dasar-dasar HTML 2015
18
By: Rohi Abdulloh Gambar 12 list pada HTML
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:
Dasar-dasar HTML 2015
19
By: Rohi Abdulloh
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
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.
Dasar-dasar HTML 2015
20
By: Rohi Abdulloh 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 tidak proporsional. Maka, sebaiknya jika ukuranya ingin diubah, tentukan tinggi atau lebarnya
saja.
Dasar-dasar HTML 2015
21
By: Rohi Abdulloh
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 sr =” a a_ga
ar.jpg”.
Jika gambar terletak di dalam folder yang berada di folder yang sama dengan file HTML, maka penulisanya menjadi
sr =” a a_folder a a_ga ar.jpg”.
Jika gambar terletak di folder yang berbeda dengan folder HTML, namun kedua folder tersebut
berada di
folder yang
sama, maka
penulisanya menjadi
sr =”.. a a_folder a a_ga ar.jpg”. Tanda .. artinya keluar dari folder yang berisi file
HTML.
Gambar 14 manambahkan gambar
G. VIDEO DAN AUDIO
Kategori