FORM DAN DIV
Form merupakan interface atau penghubung antara aplikasi dengan penggunanya. Demikian pula pada aplikasi berbasis web, terutama pada web dinamis. Oleh karena itu, form harus didesain dengan baik agar tidak terjadi kesalahpahaman ketika pengguna menggunakannya. Untuk membuat form yang menarik dapat digunakan Cascading Style Sheet (CSS).
Tujuan Instruksional Mahasiswa memahami penggunaan tag div dan form, serta elemen yang ada di dalam form.
257
9.1 Form
Form merupakan bagian dari aplikasi web yang digunakan oleh pengguna untuk memberikan informasi ataupun memberikan respon tertentu pengguna kepada website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama pada aplikasi web dinamis. Mengetahui bagaimana membuat form pada HTML dengan benar merupakan merupakan hal penting untuk memastikan tidak terdapat kesalahpahaman pada pengguna ketika menggunakan form yang disediakan.
9.1.1 Praktek Pembuatan Form
1. Praktek bertujuan untuk membuat form dengan mockup berikut.
2. Buka Aplikasi Adobe Dreamweaver
3. Klik menu Klik File New Category : Basic, Basic page : HTML bagian Create. Setelah itu akan tampil lembar kerja document baru.
258 4. Klik menu Insert Form Form.
5. Buat tabel dengan spesifikasi berikut. Width Table : 700 pixels
Column : 3
Rows : 13
6. Ketik teks pada setiap baris, mulai dari Nama sampai dengan Email.
7. Pada baris Nama, masukkan textfield. Pada panel insert, aktifkan tab forms dan klik tools Textfield.
8. Selanjutnya baris Alamat, masukkan elemen textarea.
9. Pada baris Tempat, Tgl. Lahir masukkan textfield, setelah itu untuk tanggal, bulan dan tahun masukkan List/Menu. Bila kotak dialog tampil, klik OK.
10.Tambahkan Textfield untuk Tempat. Kemudian pada baris Tgl. Lahir tanggal, bulan dan tahun tambahkan elemen List/Menu ( ). Bila kotak dialog tampil, klik OK.
259 11.List masih dalam keadaan aktif. Pada properties inspector, klik tombol list values. Lanjutkan dengan pengisian data, seperti berikut.
12.Ketikan Tanggal di bawah Ite Label, kemudian klik tanda ( ) untuk menambah item label, lalu ketik angka 1, klik tanda ( ), ketik angka 2, dan seterusnya sampai dengan angka 31.
13.Lakukan langkah 11 dan 12 untuk membuat pilihan bulan dan tahun.
14.Pada baris Status, tambahkan elemen Radio Group ( ) . Pada kotak dialog Radio Grup ubahlah : Name = Status, pada kolom label Radio = Belum Nikah, Radio = Nikah, value radio=BN, radio=N.
260 Sehingga berubah menjadi :
15.Untuk Hobby tambahkan Checkbox ( ). Pada kotak dialog Input Tag isikan label = Membaca. Buatlah checkbox berikutnya untuk pilihan hobby lainnya.
16.Pada baris Telepon dan Email masukkan textfield.
17.Buat Tombol simpan dengan menggunakan elemen Button. Ketika muncul kotak dialog Input Tag klik OK. Kemudian pada properties inspector ubah Action = Submit form, Value = Simpan, Button name = tbSimpan.
261 18.Lanjutkan dengan memasukkan button kembali pada tempat yang sama. Ubah Action = Reset form, Value = Batal, Button name = tbBatal.
19.Agar tampilan form terlihat bagus, maka lakukan pengaturan teks dan Background.
1. Jenis Font : Comic Sans MS, Chiller 2. Font Color : #FFFFFF
3. Font Size : 14 px
4. Background Color : #6666FF
20.Tekan tombol Ctrl + Shift + S, kemudian simpan nama Form Biodata. Jalankan dengan menekan tombol F12, sehingga dihasilkan halaman web berikut.
262
9.1.2 Tugas Praktek
Buatlah halaman web Form Biodata Donatur dengan bentuk sebagai berikut.
263
9.2 Layer dan Div
Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, dapat dibuat suatu halaman web yang tampilannya lebih fleksibel. Layer digunakan untuk menampilkan objek dengan posisi yang dapat diatur-atur secara bebas, tanpa terbatas pada pandangan baris-demi-baris. Analoginya, layer diumpamakan sebagai plastik transparan yang dapat diletakkan dimana saja di atas kertas.
Antara satu layer dengan layer lainnya dapat saling bertumpuk, selain itu layer dapat diisi dengan text ataupun image. Untuk beberapa browser yang tidak mendukung adanya layer, maka disediakan juga fasilitas untuk menkonversi dari layer menjadi tabel.
9.2.1 Praktek Penggunaan Layer
1. Jalankan Adobe Dreamweaver2. Buka file Form Biodata Donatur yang sudah dibuat pada modul sebelumnya.
3. Pastikan anda memiliki file-file gambar yang akan ditambahkan pada halaman web tersebut.
4. Untuk membuat layer bisa memilih menu : Insert layout object Layer atau dengan cara termudah memanfaatkan insert bar untuk layout :
5. Tambahkan layer pada pada Form Biodata Donatur seperti ditampilkan pada gambar berikut.
264 6. Untuk melihat daftar layer-layer yang telah dibuat, maka bisa dengan membuka layer panel, (jika layer panel belum terlihat, maka bisa dibuka dengan memilih menu Windows | layer atau dengan menekan F2).
7. Prevent overlaps jika dicentang maka akan mencegah layer saling bertumpuk.
8. Pada Properties Inspector perhatikan :
9. Name adalah nama layer, sedangkan z adalah valensi atau tingkatan layer, semakin besar angkanya maka posisinya akan berada di atas yang lain (jika kondisi layer bertumpuk), apabila
265 diinginkan angka ini bisa dirubah urutannya. Bg Image untuk menetapkan gamba ryang akan ditampilkan pada layer.
10.Untuk posisi L = Left, T= Top, untuk : ukuran W=width dan H=height.
9.2.2 Praktek Penggunaan Div
1. Jalankan dreamweaver, kemudian pilih HTML.2. Setelah masuk ke dalam tempat coding, letakkan kursor berada pada sebelah kanan <body>, klik Menu Insert Layout Objects
Div tag. Sehingga tampil kotak dialog Insert Div Tag berikut.
3. Klik tombol New CSS Rule, kemudian ketikan Content sebagai nama selector dan akhiri dengan menekan tombol OK.
266 4. Pada kotak dialog CSS Rule Definition for Content, pada Category : Background diubah jadi warna abu-abu; Positioning : Position=Static, Width=1300, Height=500, kemudian akhiri dengan menekan tombol OK.
267 5. Tekan OK kembali pada kotak berikut.
6. Selanjutnya membuat Div untuk SideBar. Pada bagian Coding tempatkan cursor di depan Div Content.
7. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div SideBar dengan pengaturan pada kotak dialog CSS Rule Definition for SideBar, pada Category : Background diubah jadi warna Kuning (#FF0); Box : Width=200, Height=500, dan Float:Left; kemudian akhiri dengan menekan tombol OK.
Hasil akhirnya :
268 8. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div Header dengan pengaturan pada kotak dialog CSS Rule Definition for Header, pada Category : Background diubah jadi warna Biru (#06F); Positioning : Position=Static, Width=200, dan Height=1300, kemudian akhiri dengan menekan tombol OK.
Hasil akhirnya :
9. Selanjutnya membuat Div untuk Container. Pada bagian Coding tempatkan cursor di depan <Body>.
10.Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div Container dengan pengaturan pada kotak dialog CSS Rule Definition for Container, pada Category : Background diubah jadi warna Hijau (#0C0); Positioning : Position=Static, Width=1300, dan Height=30, kemudian akhiri dengan menekan tombol OK.
269 Hasil akhirnya :
9.2.3 Tugas Praktek
Silakan isi layout yang telah dibuat sesaui dengan tema masing-masing, baik content maupun desainnya.
270
9.3 Rangkuman
Form perlu dibuat sebagai interface antara pengguna dengan aplikasi. Form bisa dibuat dengan menggunakan objek form dan elemennya yang sesuai dengan data yang akan dimasukkan.
Tabel dapat digunakan untuk mengatur tata letak penempatan elemen-elemen form.
Layer digunakan untuk menempatkan objek dalam form secara lebih fleksibel.
Div digunakan untuk membagi-bagi area form menjadi bagian-bagian yang dapat ditempati oleh objek form, sehingga tercipta pengaturan layout yang baik.
271
9.4 Daftar Pustaka
Heffernan, Brandon., Dreamweaver CS5 : Advanced, ACA Edition, Axzo Press, 2011.
Adobe, Using ADOBE® DREAMWEAVER® CS5 & CS5.5, 2011. Adobe, ADOBE® DREAMWEAVER® : Help and tutorials, 2013
California State University, Creating Accessibles Websites Using Dreamweaver CS5.5 and CSULA Web Templates, 2014.
272
CSS (CASCADING STYLE SHEET)
Cascading Style Sheet (CSS) memungkinkan Anda membuat pengaturan secara spesifik bagaimana content seharusnya ditampilkan dalam sebuah halaman web.
Pengaturan secara spesifik dapat dilakukan terhadap properties halaman web, teks, gambar, dan elemen lainnya dalam halaman web.
Tujuan Instruksional Mahasiswa memahami fungsi CSS untuk memformat berbagai macam objek yang diperlukan dalam website.
273
10.1 Cascading Style Sheet (CSS)
Style Sheets merupakan feature yang sangat penting dalam membuat
Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakanya.
Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style
sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan ditampilkan
dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser, karena CSS telah di
standard-kan oleh World Wide Web Consortium (W3C) untuk di
gunakan di web browser.
10.2 Deklarasi dan Aturan Penulisan
Pengaturan tampilan halaman web yang dilakukan melalui CSS (Cascading Style Sheets) sangat tergantung pada kemampuan web
274
browser memiliki kemampuan yang berbeda ketika menerjemahkan script CSS.
Keuntungan dengan menggunakan CSS adalah :
1. Mempersingkat waktu pembuatan web. Salah satu sifat CSS adalah reuseable, yaitu setelah CSS dibuat maka dapat kembali digunakan pada halaman web yang lainnya. Semakin banyak CSS yang dibuat, maka pembuatan web dapat dilakukan dalam waktu yang lebih singkat.
2. Meningkatkan kecepatan akses halaman web. Dengan pengaturan yang dibuat melalui CSS, maka tidak perlu dilakukan pengaturan pada seluruh halaman web, sehingga script/code yang dibuat jauh akan lebih sedikit. Dengan demikian web browser tidak perlu melakukan banyak perintah, akibatnya halaman web dapat diakses dengan cepat.
3. Memepercepat modifikasi source code. Perubahan source code yang bersifat global cukup menggantinya di satu tempat maka akan mempengaruhi semua dokumen HTML.
4. Superior dibanding HTML, yaitu CSS memiliki pilihan yang lebih luas dibandingkan dengan atribut HTML.
5. Standard Global, yaitu saat ini atribut-atribut dalam HTML telah diperkecil fungsinya dan penggunaan CSS sangat dianjurkan.
Sintaks CSS adalah
275 Penulisan CSS dapat dilakukan dengan tiga cara, yaitu :
Terdapat 3 cara untuk memasukkan CSS, yaitu :
1. Inline Style Sheet, yaitu memasukkan CSS dalam attribut elemen
HTML secara langsung. Cara ini dapat digunakan apabila dengan pertimbangan tertentu diperlukan penambahan style pada sebuah element html. Inline Style Sheet dilakukan dengan memasukkan CSS-nya ke dalam attribut CSS, dengan menambahkan attribut 'style'.
Contoh :
2. Internal Style Sheet. Cara ini sebaiknya digunakan apabila
memiliki satu dokumen yang memiliki style yang unik yang artinya tidak terdapat pada dokumen lain. Internal Style Sheet dideklaras ikan pada bagian <head> sebuah dokumen HTML dengan menggunakan tag <style>. Internal Style Sheet akan mempengaruhi semua elemen di bawahnya sesuai dengan isi dari deklarasi style-nya. <!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
276 3. External Style Sheet, yaitu digunakan untuk banyak dokumen atau
dokumen dinamis yang memiliki style yang sama. Dengan demikian, External Style Sheet cukup dengan sekali mengubah maka dapat merubah seluruh halaman web yang memanggil CSS tersebut.
Tag <link> diletakkan di dalam bagian <head> pada dokumen HTML.
Komentar pada CSS dibuat dengan menggunakan tanda /* dan diakhiri dengan */
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
277
10.3 Selector
Terdapat 3 buah Selector, yaitu ID Selector, class Selector dan Tag Selector. ID Selector, semua elemen yang memiliki ID yang sama dengan nama style id yang dideklarasikan, maka akan memiliki style yang sama sesuai dengan id tersebut.
Contoh :
class Selector, digunakan untuk mengspesifikasikan suatu style untuk sebuah grup pada elemen.
Tag HTML Selector, memberikan style langsung pada sebuah tag HTML, caranya cukup dengan menuliskan tag dan CSS-nya saja
Konstekstual, adalah penerapan style yang hanya diterapkan jika suatu kondisi tertentu terpenuhi, contoh
hanya berlaku untuk elemen yang dilingkupi tag <h1> dan <i>, jadi akan terpenuhi jika terdapat 2 kondisi yaitu ada tag <h1> dan <i>.
h1 i {color: navy} p { text-align:center; color:black; font-family:arial; } .center {text-align:center;} #var1 { text-align:center; color:red; }
278
10.4 CSS Styling
CSS yang digunakan untuk mengatur syle tampilan web diantaranya meliputi :
10.4.1 Styling Background
CSS background digunakan untuk mengubah background dari elemen HTML. Properties dari CSS Background : background-color,
background-image, background-repeat, background-attachment, background-position.
Background-Color
background-color merincikan warna background dari sebuah elemen HTML.
Sintaks : h2 {background-color:red;}
Dalam CSS, sebuah warna/color dirincikan dalam bentuk : 1. Nilai HEX, seperti : "#33FF00".
2. Nilai RGB, seperti : "rgb(0,0.255)". 3. Nama warna, seperti : "blue".
279 Contoh :
Background-Image
background-image merincikan gambar sebagai background sebuah elemen HTML. Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen.
body{background-image:url("pattern.gif");} <!DOCTYPE html> <html> <head> <style> h1 { background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; } </style> </head> <body> <h1>CSS background-color example!</h1> <div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p> We are still in the div element.
</div> </body> </html>
280 Contoh :
background-image dapat diulang secara vertikal atau horizontal, dan tidak boleh diulang
10.4.2 Styling Text
Styling Text adalah kegiatan untuk menambahkan suatu style pada
elemen-elemen yang memiliki konten teks. Styling Text terdiri atas beberapa macam manipulasi style seperti Text Color, Text Alignment,
Text Decoration, dan Text Color.
Dalam CSS, sebuah warna/color dirincikan dalam bentuk : 1. Nilai HEX, seperti : "#33FF00".
<!DOCTYPE html> <html> <head> <style> body {background-image:url('paper.gif');} </style> </head> <body> <h1>Hello World!</h1> </body> </html> <!DOCTYPE html> <html> <head> <style> body {background-image:url('paper.gif');} </style> </head> <body> <h1>Hello World!</h1> </body> </html>
281 2. Nilai RGB, seperti : "rgb(0,0.255)".
3. Nama warna, seperti : "blue"
Contoh :
Text Alignment
Text alignment digunakan untuk mensejajarkan barisan teks. Teks di html bisa disejajarkan ke sebelah kanan, tengah maupun kiri. Ketika text-align di set sebagai "justify" maka setiap baris tulisan memiliki lebar yang sama dan margin kanan dan kiri sama-sama lurus (seperti tulisan-tulisan di dalam koran dan majalah). Contohnya :
<!DOCTYPE html> <html> <head> <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body> </html>
282 Text Decoration
Text decoration umumnya digunakan untuk menghilangkan garis bawah pada link-link di dokumen HTML. Contohnya :
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body> </html> <!DOCTYPE html> <html> <head> <style> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>CSS text-align Example</h1>
283
10.4.3 Styling Font
Styling font adalah kegiatan untuk menambahkan style pada konten font disebuah teks.
Font Family
Anda bisa mengubah jenis-jenis font yang ingin anda pakai ketika anda membuat website. Font family sebaiknya mengandung banyak jenis font, hal ini berguna bila browser tidak mendukung font yang pertama maka akan berpindah ke font yang berikutnya secara otomatis. Contohnya : <!DOCTYPE html> <html> <head> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html>
284 Font Style
Properti ini memiliki 3 nilai : 1. Normal 2. Italic 3. Oblique Contohnya: <!DOCTYPE html> <html> <head> <style>
p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;} </style>
</head> <body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body> </html>
285 Font Size
Anda bisa mengatur besar ukuran font di CSS. <!DOCTYPE html> <html> <head> <style> h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p>
<p>Specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera,
and Safari to resize the text.</p>
<p><b>Note:</b> This example does not work in IE, prior version 9.</p> </body> </html> <!DOCTYPE html> <html> <head> <style> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} </style> </head> <body>
<p class="normal">This is a paragraph, normal.</p> <p class="italic">This is a paragraph, italic.</p> <p class="oblique">This is a paragraph, oblique.</p> </body>
286
10.5 Praktek
1. Praktek Format Text
<HTML> <HEAD>
<TITLE>Format Text </TITLE> <STYLE ="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </STYLE> </HEAD> <BODY>
<h1>Header 1,Di tengah</h1> <h2>Header 2 , Di kiri</h2> <h3>Header 3 ,Di kanan</h3> </BODY>
<HTML> <HEAD>
<TITLE>Format Text </TITLE> <STYLE ="text/css">
p {color : green; letter-spacing: 0.5cm} h4 {letter-spacing: -2px}
</STYLE> </HEAD> <BODY>
<p>Pengaturan Spasi Pada Paragraph </p> <h4> Header 4</h4>
</BODY> </HTML>
287 <HTML>
<HEAD>
<TITLE>Format Text </TITLE> <STYLE ="text/css">
p.besar {text-transform: uppercase} p.kecil {text-transform: lowercase} </STYLE>
</HEAD> <BODY>
<p class="besar">
pengubahan kedalam hurup Besar </p>
<p class="kecil">
PENGUBAHAN KEDALAM HURUF KECIL </p>
</BODY> <HTML> <HEAD>
<TITLE>Format Text </TITLE> <STYLE ="text/css"> em {text-decoration : overline} h2 {text-decoration: blink} h3 {text-decoration: underline} a {text-decoration: none} </STYLE> </HEAD> <BODY> <em>Bentuk Overline</em>
<h2>Header 2, Bentuk Line-through</h2> <h3>Header 3,Bentuk Underline</h3>
<p> <a href="http://lecturer.eepis-its.edu/~zenhadi"> Penggunaan Dalam Link,Nilai NONE</a></p>
288 2. Praktek Pengaturan Font
<HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.normal { font-family : verdana ; font-weight: normal; } p.thick { font-family : verdana ; font-weight: bold; } p.thicker { font-family : times ; font-weight: 900; } <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.italic { font-size :200 % ; font-style: italic; } p.normal{ font-family : verdana ; font-style: normal; }
p.oblique {font-style: oblique} </STYLE>
</HEAD> <BODY>
<P class="italic">Menggunakan Style Italic</P> <P class="normal">Menggunakan Style Normal </P> <P class="oblique">Menggunakan Style Oblieque</P> </BODY>
289 3. Praktek Pengaturan Tabel
<HTML> <HEAD>
<TITLE>Pengaturan Padding Table</TITLE> <style type="text/css"> td.kiri{ padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; padding-left: 2cm ; background-color : #F0F8FF; } </style> </HEAD> <BODY> <TABLE BORDER="1"> <TR>
<TD class="kiri">Pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah</TD> <TD>Tanpa jarak </TD> </TR> </TABLE> </BODY> </HTML> </STYLE> </HEAD> <BODY> <p class="normal"> This is a paragraph</p> <p class="thick"> This is a paragraph</p> <p class="thicker"> This is a paragraph</p> </BODY> </HTML>
290
10.5 Rangkuman
Cascading Style Sheet (CSS) dibuat dengan tujuan untuk melakukan
pengaturan tampilan halaman web secara efektif dan efisien dan dapat meningkatkan kulitas halaman web, baik dalam tampilan maupun dalam pengaksesannya. Pengaturan yang dapat dilakukan meliputi : mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
291
10.6 Daftar Pustaka
Duckett, Jon., HTML & CSS : Design and Build Websites, John Wiley & Sons, Inc., 2011.
Henick, Ben., HTML & CSS: The Good Parts, O’Reilly Media, Inc., 2010. Lemay, Laura., Sams Teach Yourself Web Publishing with HTML and
XHTML in 21 Days Fourth Edition, Sams Publishing, 2003. Tutorials Point (I) Pvt. Ltd., Cascading Style Sheet (CSS), 2015.
