Home › Programmer

Belajar HTML dan CSS Dasar Cara Membuat Template Website

"Belajar HTML dan CSS, Konsep dasar template website dan belajar web design, halaman website statis dan dinamis, Buku HTML dan lengkap"

36 min read

Belajar HTML dan CSS dan cara membuat template website. Puji Tuhan, setelah merangkum semua materi dan belajar pemrograman web dan blog di Google selama beberapa Minggu, akhirnya buku yang berisi panduan belajar HTML dan CSS ini selesai ditulis.

HTML dan CSS adalah bahasa yang wajib dikuasai oleh seorang programmer web, terutama yang bergerak di bidang design web dan template. Dan bagi yang tahu HTML dan CSS, paling tidak sudah bisa redesign template blog atau websitenya sendiri sesuai dengan keinginan.

Sebagai bonus, dalam buku ini juga saya memberikan tutorial membuat template toko online sederhana dengan HTML dan CSS. Selamat belajar dan semoga sukses. Untuk mendapatkan bukunya dalam bentuk PDF, lihat di halaman akhir artikel ini.

Belajar HTML dan CSS, Cara Membuat Template Website

Kata Pengantar

Puji syukur kepada Tuhan Yang Maha Esa atas kasih dan rahmat-Nya, penulis dapat menyelesaikan buku ini. Buku ini berisi informasi dan tutorial tentang ilmu dasar website untuk pemula yang berkaitan dengan pembuatan template website statis dengan HTML dan CSS.

Kunci untuk menjadi seorang web developer adalah menguasai HTML dan CSS. Dan bisa dikatakan kedua materi ini merupakan langkah yang paling dasar yang harus dilalui bagi seorang pengembang web. Paling tidak, setelah mempelajari buku ini, programmer diharapkan mampu merancang halaman statis web dengan HTML dan CSS atau sekurang-kurangnya dapat meredesign template open source yang sudah ada agar memiliki tampilan yang lebih menarik dan sesuai dengan kebutuhan.

Dalam buku ini juga, kita akan belajar merancang dan membuat suatu halaman statis, sebuah template toko online sederhana dari HTML dan CSS. Pastinya, template tersebut hanya sebuah tampilan berupa homepage dan landing page yang sederhana.

Akhir kata, penulis menyadari bahwa dalam penyusunan buku ini, masih terdapat kekurangan dan kelemahan yang luput dari pandangan penulis. Oleh karena itu, kritik dan saran dari pembaca sangat dibutuhkan untuk edisi yang lebih baik. Semoga buku ini dapat menjadi salah satu panduan bagi yang ingin belajar pemrograman web dengan tujuan menjadi web developer atau pun web designer.

Luwu Utara, 24 Desember 2018

Penulis

Daftar Isi

SAMPUL Kata Pengantar i
Daftar Isi ii
BAB 1 Pengertian Website 1
BAB 2 Halaman Statis dan Halaman Dinamis 2
BAB 3 Design Web 3 BAB 4 Template Web 4
BAB 5 HTML (Hypertext Markup Language) 6
1. Struktur Dasar HTML 6
2. Tag-tag HTML Dasar 7
3. Tag Heading 9
4. Format Teks 9
5. Membuat List 10
6. Link 11
7. Menyisipkan Image 11
8. Membuat Tabel 12
9. Membuat Form 14
10. Font 16
11. Iframe 16
12. Membuat Animasi HTML 16
BAB 6 CSS (Cascade Style Sheet) 18
1. Struktur Dasar CSS 18
2. Penulisan Kode CSS 20
3. Cara Menulis Komentar CSS 22
4. Kumpulan Kode CSS 23
BAB 7 Cara Membuat Template Toko Online 27
Daftar Pustaka 38
Tentang Penulis 39

BAB 1 Pengertian Website

Website adalah sebuah halaman yang dibangun dari kumpulan bahasa pemrograman yang kompleks. Pada umumnya, suatu website terdiri dari halaman utama homepage yang merupakan tampilan pertama dari suatu website dan tampilan landing page untuk isi atau konten.

Contohnya, website https://www.duniailkom.com merupakan tampilan homepage dan https://www.duniailkom.com/tutorial-belajar-html-dan-index-artikel-html merupakan tampilan landing page yang berisi konten website. Namun tidak menutup kemungkinan sebuah website hanya terdiri dari homepage yang dapat berfungsi juga sebagai landing page. Biasanya website seperti ini identik dengan halaman website statis.

Dalam perkembangannya, sebuah website memiliki fungsi untuk tujuan seperti website untuk pribadi, blog dan untuk tujuan e-commerce seperti toko online.

Melihat perkembangan dunia web saat ini, menjadi tugas berat bagi seorang web developer dalam membangun suatu web. Banyak faktor kompleks yang harus menjadi pertimbangan dalam merancang suatu website yang professional.

Namun sebelum berpikir jauh untuk membuat sebuah website, dibutuhkan kemampuan dasar dalam bidang HTML dan CSS. HTML yang adalah struktur dasar yang menjadi landasan website dan CSS yang bisa dikatakan sebagai bungkus untuk mempercantik halaman suatu website. Memahami konsep bahasa ini sangat penting untuk seorang web developer atau pengembang website.

Sebelum membuat website yang kompleks, seorang web developer harus mampu memahami konsep template terlebih dahulu. Karena template ini adalah tampilan dari suatu situs web yang terlihat di internet sehingga minimal seorang web developer harus bisa mendesain template dan menjadi seorang web designer.

Bagi seorang web designer, mengenal HTML dan CSS merupakan suatu kebutuhan utama dalam membangun sebuah template website atau blog. Karena itu, dalam buku ini, saya akan menjelaskan tentang dasar-dasar website, secara khusus pembuatan template website atau blog yang paling dasar yang cocok untuk pemula.

Juga saya akan membahas tentang studi kasus pembuatan template halaman statis berupa toko online sederhana dengan menggunakan bahasa HTML dan CSS.

Selamat belajar dan menjadi seorang web developer yang dimulai dari menjadi web designer. Sebelum membuat website yang kompleks harus mampu membuat template website statis. Semuanya akan dijelaskan secara terperinci dalam buku ini.

BAB 2 Halaman Statis dan Halaman Dinamis

Website atau situs web sendiri terdiri dari 2 jenis, yaitu website statis dan website dinamis. Baik website dinamis maupun statis, keduanya pada dasarnya dibangun menggunakan bahasa markup HTML. Perbedaan kedua jenis halaman web ini hanya terletak pada cara admin dalam mengelola konten di dalam website.

Website dinamis sendiri lebih populer digunakan, terutama di kalangan para blogger. Keuntungan menggunakan web dinamis adalah mudahnya mengelola konten dalam suatu website. Hal ini dikarenakan adanya halaman khusus yang dapat digunakan oleh admin untuk mengelola konten di websitenya.

Hal ini biasa disebut CMS (Content Management System). Beberapa contoh CMS yang banyak digunakan hari ini adalah Wordpress, Blogger, Drupal, Joomla, dan lain-lain. Bahkan yang lebih menguntungkan lagi, website dinamis ini dapat digunakan untuk membangun situs blog yang dapat dijadikan sebagai toko online.

Hal ini didukung dengan tersedianya ribuan template gratis maupun premium sesuai dengan platform CMS yang digunakan. Website dinamis juga lebih interaktif karena sudah dibangun dengan bahasa pemrograman seperti JavaScript dan lain-lain.

Berbeda dengan halaman dinamis, halaman statis webnya dibuat dari yang paling dasar, bahkan dari tahap perancangan tampilan hingga koding program. Dan untuk update konten dalam web statis harus mengedit script dasar dari halaman web statis tersebut.

Tahap pengeditan ini akan melalui tahap koding. Mengapa harus belajar membuat website statis? Saya tahu bahwa hari ini kita dapat dengan mudah membuat suatu website dengan tampilan yang menarik dengan sangat cepat dan praktis. Tapi jika tertarik untuk menjadi programmer website (Web Developer) yang profesional, Anda harus belajar membuat website statis sendiri.

Langkah awal untuk menjadi seorang web developer adalah belajar mendesain tampilan halaman web atau yang lebih dikenal dengan template. Setelah memiliki kemampuan edit template, akan lebih mudah untuk membangun struktur template sendiri. Untuk itu, pengenalan bahasa HTML dan CSS sangat krusial dan wajib dikuasai oleh seorang designer website.

BAB 3 Design Web

Orang yang bekerja di belakang halaman suatu website dapat dibedakan menjadi 2 jenis, yaitu back-end programmer dan front-end programmer. Back-end programmer biasa disebut sebagai full website developer.

Hal ini sesuai dengan pekerjaannya yang dapat mengelola dan mengendalikan semua isi website. Tugas seorang back-end programmer adalah merancang sebuah website bukan hanya tampilan tema tetapi juga database website. Database suatu website adalah sekumpulan script yang berisi berbagai bahasa pemrograman yang disimpan di web server, yaitu komputer yang menjadi media penyimpanan dokumen web. Contohnya Apache, Xitami, dan lain-lain.

Sedangkan front-end programmer adalah orang yang bekerja pada lapisan teratas halaman suatu website yang berhubungan dengan tampilan website. Inilah yang menjadikan seorang front-end programmer biasanya lebih dikenal sebagai designer web.

Bagi seorang web designer, membuat template blog atau website, baik itu template halaman statis maupun halaman dinamis suatu CMS, mereka harus memiliki kemampuan dasar editing template, yaitu HTML, CSS, dan Javascript.

Dalam membuat sebuah template, sebenarnya tidak ada aturan baku atau khusus. Yang penting adalah kenyamanan dari pembuat template itu sendiri, baik dari segi tampilan layout maupun pemilihan warna. Tapi untuk kepentingan komersil dan kenyamanan pengakses website atau blog moneysite, template yang dibuat harus dapat memenuhi keinginan visitor.

Kompiajaib, Mas Sugeng, Arlina Design adalah beberapa contoh web designer terkenal di Indonesia yang memiliki banyak template gratis dan premium untuk platform Blogger hasil buatan sendiri.

Bukan hanya berpatokan pada tampilan desain halaman blog, tapi template mereka juga memenuhi kriteria template SEO Friendly.

BAB 4 Template Web

Ketika Anda mengunjungi suatu blog atau situs web di internet, tampilan yang Anda lihat itulah yang dinamakan template. Dalam suatu situs web atau blog, selain konten yang tidak kalah penting adalah tampilan dari sebuah website.

Bagi seorang web designer, sangat penting untuk mengetahui dan memahami cara mendesain tampilan situs di internet agar dapat menarik perhatian pengunjung saat situs tersebut dikunjungi. Untuk itu, saya akan memberikan beberapa tips penting yang harus dipahami oleh seorang web designer atau pembuat template dalam membuat template yang berkualitas.

Template berkualitas pada dasarnya mengandung kriteria SEO Friendly. SEO (Search Engine Optimation) merupakan suatu teknik dalam mengoptimasi suatu website atau blog agar dapat tampil di halaman pertama mesin pencari, terutama Google Search Engine yang paling populer digunakan saat ini. Bagi seorang internet marketer, pemilihan template berkualitas merupakan salah satu hal dari sekian teknik SEO suatu website.

Berikut beberapa tips penting memilih template SEO untuk situs web, terutama untuk pembuat template yang ingin rancangan serta desainnya laris di pasaran.

1. Tampilan menarik sesuai dengan niche

Niche merupakan tema dari suatu website. Dan tampilan template sudah seharusnya sesuai dengan tema yang diusungnya. Tentu saja, template web toko online berbeda dengan template web pribadi yang umumnya hanya berisi konten biasa.

Oleh karena itu, pemilihan warna tampilan dan desain suatu situs di internet harus sesuai dengan target visitor yang ingin dicapai.

2. Kecepatan blog ringan

Di era yang serba cepat dan instan ini, umumnya orang sudah tidak sabar dalam menunggu. Termasuk menunggu loading website yang lama. Blog yang ringan akan membuat pengunjung senang.

Banyak pendapat di luar sana yang mengatakan bahwa website yang berat bisa disebabkan oleh web server atau hosting yang lambat atau pun trafik lalulintas terhadap website tersebut tinggi. Dan itu benar sekali.

Bagi pengguna Wordpress, pemilihan web hosting yang kurang tepat dapat berakibat buruk di masa depan. Banyak website yang down saat sudah memiliki ribuan trafik perharinya. Berbeda dengan platform blogger yang dihosting langsung oleh Google, trafik puluhan ribu pun tidak akan masalah.

Namun yang harus diperhatikan juga adalah template situs web itu sendiri. Bukan hanya faktor web hosting tapi juga masalah di template itu sendiri yang membuat kecepatan loadingnya berat.

Oleh karena itu, sangat penting untuk mengoptimasi halaman suatu website dari segi tampilannya. Seperti mengkompres gambar sebelum diupload. mengkompres script file template seperti kode CSS, terutama yang paling penting adalah mengkompres kode javascript yang sering menjadi penyebab situs web menjadi lambat.

Untuk mengukur kecepatan loading suatu website, bisa menggunakan tools gratis seperti PageSpeed Insights dari Google Developer atau pun dari GTMetrics.

3. User experience navigasi

Faktor User Experience (UX) menjadi faktor utama dalam template SEO. Kenyamanan pengakses website merupakan hal yang sangat penting. Kenyamanan ini bukan hanya dari loading web yang ringan tapi juga dari sistem navigasi dalam suatu website.

Sebuah template seharusnya dapat memudahkan pengakses situs untuk melakukan apa yang mereka inginkan. Seperti tersedianya halaman statis berupa kontak dan tentang website tersebut dan lain-lain.

4. Responsive tampilan mobile dan desktop

Website yang dapat menyesuaikan tampilannya sesuai dengan device yang digunakan sangat penting untuk memberikan kesan ramah terhadap pengunjung. Baik itu tampilan website di smartphone, tablet, desktop, harus bisa otomatis menyesuaikan lebar layar jika ingin membuat template yang SEO Friendly.

Untuk membuat website yang responsive, banyak yang menggunakan Bootstrap. Bootstrap adalah front-end framework CSS yang dibangun untuk memudahkan pendesain template web dalam membuat template website yang responsive.

Dan teknologi terbaru yang mendukung SEO mobile adalah hadirnya template AMP (Accelerated Mobile Page) yang memiliki loading cepat dan responsive untuk pengguna mobile.

Melihat pengakses internet yang belakangan ini populer menggunakan perangkat smartphone maka seorang pembuat template harus benar-benar membuat template yang dapat support tampilan responsive pada device smartphone.

Dalam pembuatan sebuah template website, kemampuan dasar yang harus dimiliki minimal HTML dan CSS untuk pembuatan website statis. Untuk halaman website dinamis yang menggunakan CMS seperti Blogger dan Wordpress sudah dibangun dari bahasa pemrograman seperti HTML, CSS, JavaScript, PHP.

BAB 5 HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) adalah sebuah dokumen yang dibangun dari kode berupa tag-tag khusus beserta atribut dan nilainya serta tidak bersifta case sensitive. HTML adalah dasar dari sebuah halaman web di internet. Karena itu, untuk mendesain sebuah halaman web, kita akan menggunakan tag-tag HTML sebagai struktur dasar tampilan sebuah web.

HTML sendiri terdiri dari elemen-elemen berupa tag pembuka dan tag penutup. Namun ada beberapa tag HTML yang tidak memerlukan tag penutup.

Untuk membuat sebuah dokumen HTML, kita hanya membutuhkan aplikasi text editor seperti Notepad atau Notepad++. Dan sebuah dokumen HTML berekstensi html atau htm yang dapat ditampilkan dengan web browser seperti Google Chrome atau Mozilla Firefox.

1. Struktur Dasar HTML

<html>
<head>
<title>Struktur html</title>
</head>
<body>
Contoh HTML
</body>
</html>

- Kode <html> adalah sebuah tag dasar yang menandakan bahwa dokumen ini adalah dokumen HTML.

- Kode <head> merupakan kepala dari dokumen HTML. Dari tag pembuka <head> sampai tag penutup </head> dinamakan satu elemen yang didalamnya dapat disisipi informasi dokumen, termasuk informasi judul dengan tag title yang akan ditampilkan di tab web browser. Di tag head ini hanya berfungsi untuk mendefinisikan suatu kode CSS atau Javascript yang dapat dipanggil untuk ditampilkan dalam tag body. Dan informasi yang ditulis di tag head tidak akan ditampilkan di halaman website.

- Semua yang ada dalam tag pembuka <body> sampai tag penutup </body> merupakan satu elemen yang akan menampilkan informasi dalam suatu website. Di dalam elemen body inilah akan dipanggil kode CSS yang telah didefinisikan di tag head menggunakan tag HTML. Jadi, semua informasi yang tampil di situs web di internet ditulis di elemen body.

Itulah struktur dasar bahasa HTML. Sebenarnya konsepnya hanya sederhana, yaitu elemen head untuk mendefinisikan kode CSS dan semua informasi dalam suatu web dan elemen body untuk menampilkan semua informasi dalam suatu halaman web. Di bawah ini, saya akan menjelaskan tentang tag-tag HTML dasar dan cara penggunaannya.

Selain elemen dan tag, HTML sering juga dilengkapi dengan atribut. Atribut ini adalah suatu informasi tambahan yang dapat memberikan efek tertentu pada tampilan web sesuai dengan nilai (Value) yang diberikan. Suatu tag HTML yang memiliki atribut terdiri dari nama atribut kemudian diikuti oleh nilai atribut dengan nilai atribut selalu diapit oleh tanda petik dua ("). Contoh atribut HTML adalah dekorasi teks dan nilainya adalah warna huruf, ukuran, posisi dan lain-lain.

2. Tag-tag HTML Dasar

Tag-tag HTML dasar ini sangat cocok untuk memahami cara kerja sebuah tag HTML. Jika Anda perhatikan dengan seksama struktur HTML dasar di atas, maka bisa dilihat bahwa penulisan tag dalam kode HTML tidak bisa tumpang tindih. Untuk lebih jelasnya, lihat contoh-contoh pembuatan tag dalam HTML di halaman-halaman berikutnya.

- Tag Paragraf

Untuk membuat paragraf baru digunakan tag paragraf. Buka notepad dan tulis kode berikut.

<html>
<head>
<title>Membuat paragraf baru</title>
</head>
<body>
<p>Belajar HTML Untuk Pemula</p>
</body>
</html>

Save as dengan ekstensi file html dengan type all files. Contohnya paragraf.html

Belajar HTML dan CSS untuk pemula lengkap

Kemudian buka dengan aplikasi web browser seperti Google Chrome. Maka tampilannya akan seperti di bawah ini!

Ini merupakan contoh penggunakan tag HTML <p> untuk membuat paragraf baru.

- Tag Break

Tag break <br> ataupun <br/> merupakan tag HTML untuk membuat baris baru. Tag br ini tidak dilengkapi dengan atribut apapun dan juga tanpa perlu tag penutup.

<html>
<head>
<title>Membuat baris baru</title>
</head>
<body>
<br>Belajar HTML Untuk Pemula
</body>
</html>

- Tag Horizantal Rule

Tag hr merupakan tag untuk membuat garis horizontal.

<html>
<head>
<title>Membuat garis horizontal</title>
</head>
<body>
<p>Belajar HTML Untuk Pemula</p>
<hr>
<br/>
<hr align="center" color="red" width="3px">
</body>
</html>

Pada tag hr di atas, kita membuat 2 garis horizontal, yaitu yang pertama tanpa atribut dan yang kedua dengan atribut align dengan value center. Berikut beberapa atribut dan value untuk tag-tag dasar HTML seperti tag <hr> ini.

- Align dengan value left, center, dan right untuk tata letak garis horizontal.
- Width dengan value 3px dengan angka 3 menunjukkan ketebalan garis
- Color dengan value green, red, blue, dan lain-lain untuk warna garis.

Perlu diketahui bahwa penulisan atribut wajib untuk memberikan value atau nilai. Dan tidak semua tag HTML dapat diberikan atribut yang sama. Ada beberapa tag HTML khusus yang memiliki atribut khusus dan tidak dapat digunakan di tag HTML lainnya.

3. Tag Heading

Sama seperti dokumen Microsoft Office atau pun dokumen lainnya, sebuah halaman web juga sebaiknya memiliki tag headuing. Tag heading ini biasa digunakan untuk judul website dan subjudul dalam suatu website.

<html>
<head>
<title>Membuat heading</title>
</head>
<body>
<p>Belajar HTML Untuk Pemula</p>
<h1>Judul website</h1>
<h2>Judul konten</h2>
<h3>Subjudul untuk konten</h3>
<h4>Heading 4 biasanya untuk informasi seperti tulisan artikel terkait, dll.</h4>
<h5>Jarang digunakan</h5>
<h6>Ini juga jarang digunakan</h6>
</body>
</html>

Tag heading ini juga dapat disertai atribut sesuai dengan kebutuhan, misalnya warna, jenis tulisan, dan lain-lain.

4. Format teks

Beberapa tag HTML yang paling dasar yang digunakan sebagai penanda khusus terhadap karakter tertentu dalam isi dokumen. Berikut beberapa contoh penggunaan tag tersebut.

<html>
<head>
<title>Formating Text HTML</title>
</head>
<body>
<p>Belajar HTML Untuk Pemula</p>
<br>
<b>Menebalkan teks (Bold)</b>
<br/>
<i>Memiringkan tulisan (Italic)</i>
<br/>
<u>Membuat tulisan bergaris bawah (Underline)</u>
<br/>
<del>Format tulisan coret</del>
<br/>
<mark>Menandai teks</mark>
</body>
</html>

- Tag <b> berfungsi untuk menebalkan cetakan huruf.
- Tag <i> berfungsi untuk membuat tulisan teks miring.
- Tag <u> berfungsi untuk membuat tulisan bergaris bawah.
- Tag <del> berfungsi untuk membuat tulisan dicoret.
- Tag <mark> digunakan untuk menandai teks tertentu.

5. Membuat List

List atau daftar dalam suatu dokumen termasuk dokumen website, dapat ditulis dalam 2 bentuk, yaitu angka atau pun bullet. Dalam HTML sendiri, ada 2 tag dasar yang digunakan untuk membuat daftar, yaitu tag ol dan tag ul. Dan item atau daftar tersebut semuanya menggunakan tag <li>.

- Tag <ol>

Tag ol (Ordered List) secara default membuat daftar item dalam bentuk angka 1, 2, dan seterusnya.

- Tag <ul>

Tag ul (Unordered List) secara default membuat daftar item dalam bentuk bullet atau lingkaran berwarna hitam.

Baik tag ol maupun ul, keduanya dapat menggunakan atribut khusus seperti contoh di bawah ini.

<html>
<head>
<title>Membuat list HTML</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Tag ol default tanpa atribut</p>
<ol>
<li>Web designer</li>
<li>Web developer</li>
</ol>
<p>Tag ol type A</p>
<ol type="A">
<li>Web designer</li>
<li>Web developer</li>
</ol>
<p>Tag untuk membuat daftar di dalam daftar</p>
<ol type="I">
<li>Web designer</li>
<li>Web developer</li>
<ol>
<li>Web designer</li>
<li>Web developer</li>
</ol>
<li>Web designer</li>
<li>Web developer</li>
</ol>
<p>Tag ul tanpa atribut</p>
<ul>
<li>Web designer</li>
<li>Web developer</li>
</ul>
<p>Tag ul type kotak</p>
<ul type="box">
<li>Web designer</li>
<li>Web developer</li>
</ul>
</body>
</html>

Contoh lain value untuk atribut ol adalah a dan i. Sedangkan contoh atribut untuk tag ul adalah square, circle, dan lain-lain.

6. Link HTML

Dalam membuat link ke suatu halaman lain, baik itu internal link yang menuju ke halaman berbeda dalam website yang sama maupun eksternal link yang menuju ke situs web lain di internet, kita menggunakan tag <a> atau anchor.

Dalam praktek SEO (Search Engine Optimation), link building juga dapat memperkuat posisi website di halaman depan mesin pencari. Berikut cara membuat link ke halaman lain di dalam website.

<html>
<head>
<title>Membuat link ke halaman lain</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Membuat link</p>
<a href="https://www.facebook.com">Masuk ke Facebook</a>
<p>Link terbuka di tab baru</p>
<a target="_blank" href="https://www.simentik.eu.org">Situs pribadi</a>
</body>
</html>

Dalam contoh di atas, tag a menggunakan atribut href dengan value link yang akan dituju. Selain atribut href, juga terdapat atribut _blank yang berfungsi untuk membuka link yang dituju di tab baru web browser atau open in new tab.

7. Menyisipkan Image

Untuk menyisipkan gambar ke dalam website menggunakan HTML, maka kita dapat menggunakan tag img. Berikut cara menyisipkan gambar ke dalam halaman website.

<html>
<head>
<title>Menyisipkan gambar</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Menyisipkan gambar</p>
<img src="https://www.simentik.eu.org/gambar.jpg" />
<p>Menyisipkan gambar dengan atribut</a>
<img src="https://www.simentik.eu.org/gambar.jpg" width="90px" height="200px" />
<p>Membuat link tujuan dari gambar</p>
<a target="_blank" href="https://www.simentik.eu.org"><img src="https://www.simentik.eu.org/gambar.jpg" />
</body>
</html>

Berikut beberapa atribut dan value untuk tag img.
- Atribut src dengan value link gambar yang akan ditampilkan.
- Atribut align untuk menentukan posisi gambar dengan value left, center, dan right.
- Atribut width dan height untuk ukuran gambar dengan value bisa px ataupun %.
- Atribut border untuk tebal garis tepi gambar.
Sekali lagi, yang perlu diperhatikan dalam penulisan nilai atribut adalah diapit oleh tanda petik dua.

8. Membuat Table

Untuk membuat tabel di dalam website menggunakan script HTML, kita dapat menggunakan tag table. Di dalam elemen table ini, terdapat tag-tag khusus tabel seperti tag tr, tag th, dan tag td.

<html>
<head>
<title>Membuat tabel HTML</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Membuat tabel HTML</p>
<table border="2">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Simon</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Taufik</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>

- Tag table adalah tag untuk membuat tabel HTML. Pada contoh di atas, kita menggunakan atribut border dengan nilai 2 yang menunjukkan ketebalan garis.
- Tag th merupakan singkatan dari table head untuk tampilan header tabel.
- Tag tr merupakan table row yang digunakan untuk membuat baris tabel baru.
- Tag td merupakan table data yang digunakan sebagai isian dari tabel HTML. Umumnya diisi sesuai dengan keterangan di tag th.

Dalam contoh di atas, kita menggunakan atribut border yang menunjukkan batas baris dan kolom tabel. Selain atribut tersebut, masih banyak atribut untuk membuat tampilan tabel lebih keren seperti atribut bgcolor dan lain-lain.

- Menggabungkan kolom dan baris dalam tabel HTML

Untuk menggabungkan baris HTML, kita menggunakan atribut rowspan dan untuk menggabungkan kolom HTML, kita menggunakan atribut colspan.

<html>
<head>
<title>Membuat tabel HTML</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Menggabungkan baris dan kolom tabel HTML</p>
<table border="2">
<tr>
<th rowspan="2">NO URUT</th>
<th colspan="2">IDENTITAS</th>
<th rowspan="2">GOLONGAN</th>
<th rowspan="2">GAJI POKOK/JAM</th>
<th rowspan="2">TAHUN MASUK</th>
<th colspan="2">ESTIMASI JAM KERJA</th>
<th rowspan="2">TOTAL GAJI</th>
<th rowspan="2">PPN</th>
<th rowspan="2">TOTAL DIBAYARKAN</th>
</tr>
<tr>
<th>NIM</th>
<th>NAMA KARYAWAN</th>
<th>JAM KERJA</th>
<th>BONUS JAM</th>
</tr>
</table>
</body>
</html>

9. Membuat Form

Form sesuai dengan namanya digunakan untuk menerima input atau masukan dari pengguna website. Inputan tersebut nantinya akan diproses dengan bahasa pemrograman seperti PHP dan JavaScript yang akan disimpan di dalam database.

Dalam pembuatan form HTML, kita menggunakan tag form. Umumnya dalam elemen Form, terdapat tag input dengan berbagai type atribut. Untuk lebih jelasnya, saya akan memberikan contoh form HTML lengkap dengan penjelasannya.

<html>
<head>
<title>Form HTML</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Membuat Form HTML</p>
<form action="proses.php" method="post">
First Name : <input type="text" name="firstname" value="Nama Depan">
Last Name : <input type="text" name="lastname" value="Nama Belakang">
<br/>
Jenis Kelamin :
<input type="radio" name="jeniskelamin"/> Pria
<input type="radio" name="jeniskelamin"/> Wanita
<br/>
Hobi :
<input type="checkbox" checked />Menulis
<input type="checkbox" />Koding
<input type="checkbox" />Membaca
<br/>
Alamat :
<select>
<option>Jakarta</option>
<option>Medan</option>
<option>Makassar</option>
</select>
<br/>
Pesan Anda :
<br/>
<textarea rows="3" cols"7"></textarea>
<br/>
<input type="button" name="go" value="Kirim Data" />
</form>
</body>
</html>

- Tag <form> di atas memiliki 2 atribut yang umum digunakan, yaitu atribut action dan method.

- Nilai atribut action biasanya mengarah ke halaman PHP yang berfungsi untuk memproses data yang telah diisi dalam form HTML.

- Nilai dari atribut method ada 2, yaitu get dan post. Get biasanya digunakan pada form pencarian di mana data yang diisi akan disisipkan dan terlihat di URL ketika dieksekusi. Berbeda dengan method post yang biasanya digunakan untuk form pendaftaran yang biasanya membutuhkan username dan password.

- Tag <input> terletak di dalam tag form dengan berbagai type atribut dan value.

- Atribut name dengan value firstname akan menampilkan nama yang pernah diinput sebelumnya pada form text. Untuk nama belakang, kita bisa mengisi nilai atribut name dengan lastname form nama belakang. Value name untuk atribut name juga bisa berupa email dan password.

- Atribut value akan menampilkan input secara otomatis dalam form. Contohnya pada type=”text”.

- Atribut cheked akan mencentang otomatis pilihan yang ada pada form type checkbox dan radio.

- Atribut type akan menampilkan jenis form sesuai dengan nilai atribut yang digunakan. Berikut beberapa atribut type dalam tag input.

- Type text akan mengijinkan pengguna form untuk menginput karakter berupa teks atau angka. Seperti nama depan dan nama belakang di atas.

- Type checkbox mengijinkan pengguna form untuk mencentang beberapa pilihan yang ada. Contohnya form hobi.

- Type radio mengijinkan pengguna form untuk memilih hanya satu dari semua pilihan yang ada. Contohnya jenis kelamin. Yang perlu diperhatikan dalam membuat type radio adalah selalu menggunakan atribut name dengan value yang sama. Perhatikan lagi contoh form di atas pada type=”radio”.

- Type password akan membuat hasil inputan pengguna form berupa password.

- Type button umumnnya terletak dibagian terakhir form dan berfungsi sebagai tombol untuk memproses data yang diisi pada form. Selain type button, juga terdapat type submit yang yang fungsinya juga untuk menampilkan tombol untuk melanjutkan proses data yang diisi pada form.

- Tag <select> hanya mengijinkan pengguna form untuk memilih satu dari beberapa pilihan yang tersedia. Di dalam elemen select terdapat tag <option> yang berisi daftar item yang tersedia untuk dipilih. Pada pengguaannya, biasa digunakan pada form alamat.

- Tag <textarea> akan mengijinkan pengguna form untuk menginput karakter dalam jumlah yang banyak. Dan memiliki atribut rows dan cols. Dalam penggunaanya, textarea default dapat ditarik atau diperkecil saat tampil di web browser. Contohnya pada kolom komentar pada website.

10. Font HTML

Font atau huruf dalam suatu website umumnya lebih sering memakai kode CSS. Namun inti dari pemakaian tag font dalam HTML adalah menentukan jenis huruf (font face), ukuran huruf (font size) dan juga warna font (font color).

<html>
<head>
<title>Font HTML</title>
</head>
<body>
<Belajar HTML Pemula</p>
<font face="arial" size="12" color="green">Font jenis arial ukuran 12 warna hijau
</font>
</body>
</html>

11. Membuat Iframe

Iframe adalah tag HTML untuk menampilkan halaman suatu situs internet di dalam suatu website yang berbeda. Bahasa sederhananya adalah menampilkan website lain di dalam website. Yang paling sering terlihat didalam suatu website atau blog adalah tampilan di halaman fanspage Facebook.

<html>
<head>
<title>Membuat Iframe</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<iframe width="350" height="125" src="https://facebook.com/resepta"></iframe>
</body>
</html>

Penjelasan:
- Atribut width untuk mengatur lebar.
- Atribut height untuk mengatur tinggi.
- Atribut SRC diisi URL situs yang ingin ditampilkan di website.

12. Membuat animasi HTML

Animasi dalam suatu template website yang paling sederhana umumnya menggunakan tag marquee.

<html>
<head>
<title>Membuat Animasi Sederhana HTML</title>
</head>
<body>
<Belajar HTML Pemula</p>
<marquee>Animasi bergerak dari kanan ke kiri</marquee>
<marquee behavior="alternate">Animasi bergerak terpantul setelah menyentuh sisi website</marquee>
<marquee direction="up" scrollamount="20">Animasi bergerak dari bawah ke atas dengan kecepatan 20px</marquee>
<p>Membuat animasi bergerak dengan gambar</p>
<marquee><img src="https://www.simentik.eu.org/gambar2.jpg" /></marquee>
</body>
</html>

Penjelasan:

- Tag <marquee> digunakan untuk membuat animasi sederhana dengan HTML.

- Atribut behavior juga dapat berisi nilai slide untuk bergerak dan berhenti dan scroll untuk animasi bergerak.

- Atribut scrollamount berfungsi untuk mengatur kecepatan gerak animasi. Semakin besar nilai angka yang diberikan maka akan semakin cepat kecepatan animasi dalam bergerak.

Demikianlah materi tentang HTML dasar. Agar lebih cepat memahami, sebaiknya gunakan Notepad++ dalam melakukan koding. Kesimpulan yang dapat diambil adalah sebuah elemen dalam HTML dapat berisi tag-tag. Dan dalam suatu tag HTML, bisa dilengkapi dengan atribut yang value atau nilai dari atribut tersebut harus diapit oleh tanda petik dua.

BAB 6 CSS (Cascade Style Sheet)

CSS adalah bahasa pemrograman yang khusus untuk digunakan dalam mendesain tampilan website lebih menarik. Jika dilihat dari cara penggunaan CSS, bisa diketahui bahwa kode CSS dapat mengefisienkan penggunaan kode HTML. Sederhananya, jika HTML adalah struktur dasar yang membangun tampilan website maka CSS adalah kode untuk mempercantik kemasan dari website.

Memahami CSS memang sedikit lebih rumit dari HTML. Tapi kalau tahu struktur dasarnya, mendesain tampilan web menjadi lebih menarik cukup mudah dilakukan. Intinya adalah mendefinisikan kode CSS dan bagaimana memanggil kode CSS yang sudah didefinisikan.

1. Struktur Dasar CSS

Kode CSS terdiri dari 2 bagian utama, yaitu selector dan property.

- Selector

Selector adalah bagian utama yang akan dideklarasikan dan kemudian dipanggil untuk ditampilkan. Selektor dapat berupa tag atau elemen HTML yang diberikan property. Berdasarkan jenisnya, selector dapat dibedakan menjadi 3 jenis, yaitu sebagai berikut.

- Selector bebas

Keunggulan dari kode CSS adalah selain bisa memberikan efek khusus pada tag HTML, kita juga bisa membuat dekorasi sendiri dengan membuat tag baru khusus. Artinya bahwa penulisan selector CSS tidak harus menggunakan tag HTML. Karena tag HTML digunakan hanya untuk mempermudah mengingat kode CSS yang akan dipanggil ke dalam dokumen HTML.

<html>
<head>
<title>Selector bebas</title>
<style type="text/css">
teksmerah{
color:red;
text-align:center;
}
</style>
</head>
<body>
<teksmerah>Ini adalah contoh penulisan kode CSS internal dengan menggunakan selector bebas.</teksmerah>
</body>
</html>

- Selector class

Selector class lebih banyak digunakan dalam postingan website. Hal ini karena selector class dapat digunakan pada beberapa tag HTML dan dapat dipanggil berulang kali sesuai dengan kebutuhan.

<html>
<head>
<title>Selector class</title>
<style type="text/css">
.teksheading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h2 class="teksheading">Contoh peggunaan selector class pada tag h2</h2>
<p class="teksheading">Contoh peggunaan selector class pada tag h2</p>
</body>
</html>

Penjelasan:

- .teksheading merupakan nama selector class yang dapat digunakan pada beberapa tag HTML yang diinginkan.

- Penulisan nama selector class selalu diawali dengan tanda titik (.)

- Pada bagian body, kita menampilkan pada website judul dengan heading 2 (h2) dan tag p untuk paragraf.

- class="teksheading" menandakan bahwa setiap tag HTML yang menggunakan selector ini akan ditampilkan sesuai dengan atribut dan value pada selector tersebut.

- Selector ID

Selector ID hanya digunakan sekali dan pada satu tag HTML. Namun dalam penggunaannya, selector ID pada CSS tetap bisa dipanggil secara berulang-ulang pada tag HTML. Umumnya, selector ID digunakan pada elemen HTML utama yang membangun struktur website dari segi layout (Tata letak).

<html>
<head>
<title>Selector ID</title>
<style type="text/css">
#bodyutama{
background:yellow;
color:black;
font-family:arial;
}
</style>
</head>
<body id="bodyutama">
<p>Ini adalah contoh penggunaan selector ID.
</body>
</html>

Penjelasan:

- #bodyutama adalah nama selector ID yang hanya dapat digunakan sekali dan satu tag HTML.

- Penulisan nama selector ID selalu diawali dengan tanda #.

- Pemanggilan selector ID ke dalam HTML dengan <body id="bodyutama"> kemudian ditutup sesuai dengan tag HTML pembuka, yaitu </body>.

- Property

Property adalah atribut dan nilai dari selector yang ditulis dalam blok deklarasi. Jadi, property terdiri dari atribut dan nilainya. Dan setiap property dipisahkan dengan tanda titik dua (;).

- Contoh Struktur Dasar CSS

p{
color:green;
font-size:14px;
}

Keterangan:

- p adalah tag HTML yang dideklarasikan

- {…} adalah blok selector

- color dan font-size adalah atribut

- green dan 14px adalah nilai atau value dari atribut

2. Penulisan Kode CSS

Kode CSS tidak bersifat case sensitive (Tidak membedakan penulisan huruf kapital dan kecil). Berdasarkan letak kode CSS dalam script HTML dan cara pemanggilannya, aturan penulisan kode CSS dibedakan atas 3 jenis, yaitu external, internal, dan inline.

- Inline Style Sheet

Penulisan kode CSS dengan inline digunakan saat mendefinisikan tag HTML satu persatu secara khusus. Biasanya penulisan dengan metode inline ini sangat bermanfaat dalam membuat efek khusus yang berbeda dari tag yang sudah didefinisikan di elemen head pada metode penulisan CSS internal maupun eksternal. Berikut contoh penulisannya.

<p style="color: green; font-size: 12px">
Belajar HTML dan CSS Dasar Untuk Pemula</p>

Penjelasan:

- <p adalah tag pembuka untuk paragraf.

- style adalah atribut untuk mendeklarasikan kode CSS yang ditulis langsung dalam tag HTML.

- "color: green; font-size: 12px" adalah atribut dan value dari tag p

- </p> adalah tag penutup yang menandakan akhir dari deklarasi khusus

- Internal Style Sheet

Internal style sheet adalah metode penulisan kode CSS dengan mendeklarasikan tag HTML dengan CSS yang diletakkan di dalam elemen head (<head>…</head>). Berikut contoh penulisan kode CSS dengan internal style sheet.

<html>
<head>
<title>Metode Penulisan Kode CSS Internal Style Sheet</title>
<style type="text/css">
h1{
color:red;
text-align:center;
}
h2 {
color:green;
}
</style>
</head>
<body>
<h1>Ini adalah contoh penulisan kode CSS internal</h1>
<h2>Ini juga contoh penulisan kode CSS internal</h2>
</body>
</html>

Penjelasan:

- Script di atas adalah script HTML dan CSS.

- Penulisan CSS dengan metode internal diletakkan di dalam elemen head HTML.

- Kode <style type="text/css">…</style> digunakan untuk meletakkan semua kode CSS dalam suatu template yang ditulis dengan internal style sheet.

- Dengan metode penulisan ini, tag h1 dan h2 yang dideklarasikan di elemen head dapat dipanggil di dalam elemen body untuk ditampilkan di website.

- External Style Sheet

Umumnya metode penulisan kode CSS eksternal ini paling sering digunakan. Sesuai dengan namanya eksternal, penulisan kode CSS terpisah dari kode HTML. Untuk lebih jelasnya, berikut contoh penulisan kode CSS eksternal.

- Buat file css dengan nama buku.css

h1{
color:red;
text-align:center;
}

Buka notepad dan copy paste kode di atas. Simpan dengan nama buku.css dan pada type file pilih all files.

- Buat file HTML

<html>
<head>
<title>Penulisan Kode CSS External</title>
<link rel="stylesheet" type="text/css" href="D:TA HTML/buku.css">
</head>
<body>
<h1>Penulisan Kode CSS External</h1>
</body>
</html>

Penjelasan:

- Tabel pertama adalah script css dan tabel kedua adalah script HTML.

- Tabel pertama dengan nama buku.css merupakan file css yang disimpan diluar script HTML dan dapat dipanggil ke dalam file HTML.

- <link …> merupakan elemen yang berfungsi untuk memanggil file eksternal ke dalam HTML.

- rel="stylesheet" memberikan keterangan bahwa file yang dipanggil adalah file stylesheet.

- type="text/css" mendefinisikan bahwa file yang dipanggil adalah file CSS.

- href="D:TA HTML/buku.css" merupakan alamat dari file CSS yang dipanggil. Dari alamat tersebut dapat diketahui bahwa file CSS tersebut bermana buku.css dan terletak di dalam folder TA HTML pada drive D.

Dalam penggunaannya pada template website, file CSS ini diletakkan di komputer server atau hosting yang dapat dipanggil sewaktu-waktu ketika dibutuhkan.

3. Cara Menulis Komentar CSS

Komentar dalam bahasa pemrograman pada dasarnya digunakan untuk mempermudah programmer dalam mengingat kode yang dibuatnya. Atau pun dapat berfungsi untuk memudahkan programmer lain dalam mengedit sebuah program. Komentar ini tidak akan ditampilkan dan juga tidak akan dieksekusi. Dalam CSS, terdapat 2 cara penulisan komentar.

- Komentar dengan kode /*…*/

Kode ini digunakan jika komentar yang ditulis hanya satu baris.

/*Tempatkan kode iklan Adsense di Header*/

- Komentar dengan kode

Kode ini digunakan lebih umum digunakan jika komentar yang ditulis lebih dari satu paragraf.

4. Kumpulan Kode CSS Lengkap

Inti dari CSS adalah bagaimana memanggil CSS ke dalam dokumen HTML pada elemen body. Berikut beberapa kode CSS yang umum digunakan dalam mendeklarasikan selector pada CSS.

a. Deklarasi background

- Background-image:url("https://www.simentik.eu.org/2018/12/belajar-css.jpg")

Digunakan untuk membuat tampilan background dari gambar. Pada bagian url, dapat diganti dengan alamat gambar di internet.

- Background-repeat:no-repeat

Digunakan untuk menampilkan perulangan gambar. Beberapa nilai untuk atribut background-repeat adalah repeat-x dan repeat-y.

- Background-position:top left

Digunakan untuk menentukan letak posisi background. Nilai lain dari atribut background-position adalah top center, top right, center left, bottom left, bottom center, dan lain-lain.

- Background-attachment:fixed

Berfungsi untuk menentukan bisa tidaknya gambar discroll dengan bersamaan dengan dokumen.

- Background-color:#FFFFFF

Digunakan untuk menentukan warna latar belakang. Untuk kode warna lainnya, bisa menggunakan bahasa Inggris atau kode HTML untuk warna. Dapat ditemukan di internet maupun di aplikasi editing foto seperti Photoshop dan CorelDraw.

b. Deklarasi Font

- Font-family:Arial

Digunakan untuk memilih jenis font atau huruf. Font lainnya untuk nilai atribut font-family dapat ditemukan di software pengolah kata seperti Microsoft Office Word.

Sekedar informasi, font jenis Arial merupakan font yang tepat digunakan sebagai font utama pada postingan karena pada dasarnya font Arial mendukung semua web browser dan perangkat yang digunakan.

- Font-style:italic

Nilai Italic digunakan untuk untuk membuat gaya tulisan miring. Nilai lainnya untuk atribut font-style adalah normal dan oblique.

- Font-weight:bold

Nilai bold digunakan untuk membuat gaya tulisan tebal. Nilai lainnya untuk atribut font-weight adalah 100, 200, dan lain-lain.

- Font-size:14px

Digunakan untuk mengatur ukuran huruf..

c. Deklarasi Text

- Color:#fff000

Untuk menentukan warna huruf. Nilai dari atribut color juga dapat berupa warna dalam bahasa Inggris seperti Grey, Red, Green, dan lain-lain.
- Text-decoration:underline

Underline untuk tulisan bergaris bawah. Nilai lain untuk atribut text-decoration adalah overline, line-trough, blink.

- Text-transform:capitalize

Capitalize akan membuat semua tulisan yang menggunakan selector dari atribut text-transform dengan nilai ini menjadi huruf capital. Adapun nilai lainnya dapat berupa uppercase, lowercase, dan lain-lain.

- Text-align:left

Nilai left akan membuat tulisan rata kiri. Nilai lain dari atribut text-align adalah right, center, dan justify.

d. Deklarasi Border

- Border-color:#FF0000

Digunakan untuk menentukan warna garis. Warna lainnya dapat menggunakan warna dalam bahasa Inggris.

- Border:3px

Digunakan untuk menentukan ketebalan garis. Semakin tinggi angka pixelnya maka akan semakin tebal garisnya.

- Border:dotted

Nilai dotted merupakan jenis atau tipe border. Nilai lainnya adalah solid, dashed, double, groove, ridge, inset, outset, dan lain-lain.

- Border-top:2px

Digunakan untuk menentukan ketebalan garis atas. Atibut lainnya dapat berupa border-right, border-bottom, dan lain-lain.

- Border-radius:10px

Untuk garis melengkung.

- Border-top-left-radius:2em 3em

Atribut ini akan membuat garis lengkung di sisi atas dan sisi kiri. Atribut lainnya bisa border-bottom-right-radius untuk membuat garis melengkung pada sisi bawah dan kanan.

d. Deklarasi Link

- A:link{color:red}

Digunakan untuk tampilan link awal yang belum pernah dikunjungi di web browser.

- A-hover{color:yellow}

Mengubah warna link ketika tersentuh oleh pointer mouse.

- A-active{color:green}

Tampilan link ketika diklik.

- A-visited{color:blue}

Tampilan link yang pernah dikunjungi sebelumnya pada web browser yang sama dan masih menyimpan cache atau riwayat browsing. Untuk lebih jelasnya, berikut contoh penggunaan link CSS dan cara memanggilnya ke dalam dokumen HTML.

<html>
<head>
<title>Penggunaan Link Dalam CSS</a>
A:link{color:red}
A-hover{color:yellow}
A-active{color:green}
A-visited{color:blue}
</head>
<body>
<a href="https://www.simentik.eu.org">Simentik.eu.org</a>
</body>
</html>

Selain atribut color, atribut lainnya untuk untuk selector a dan tipenya adalah text-decoration, font-weight, background-color, dan lain-lain.

e. Deklarasi Position

- Position:static

Posisi default suatu elemen.

- Postion:relative

Posisi dapat ditentukan dengan bantuan property top, center dan lain-lain.

- Position:absolute

Obyek akan mengikuti posisi induk elemen atau elemen pertama.

- Position:fixed

Digunakan agar posisi obyek tetap pada posisinya meskipun browser di scroll.

- Position:inherit

Posisi mengikuti elemen induk.

f. Deklarasi Margin dan Padding

Dalam mendesain tampilan website, margin dan padding merupakan property yang paling sering digunakan. Margin adalah batas luar sedangkan padding adalah batas dalam. Berikut beberapa cara deklarasi margin dan padding.

- Margin:2px 3px 2px 3px

Artinya batas luar sisi atas adalah 2, batas luar sisi kanan 3, batas luar sisi bawah 2, dan batas luar sisi kiri 3.

- Margin-top:3px

Batas luar sisi atas.

- Margin-bottom:3em

Batas luar sisi bawah.

- Margin-right:3px

Batas luar sisi kanan.

- Margin-left:3px

Batas luar sisi kiri.

- Padding:2px 3px 2px 3px

Sama halnya dengan margin, atribut padding juga dapat berupa padding-top, padding-right, padding-top, dan padding, left.

Demikianlah materi tentang CSS. Pada dasarnya, semua materi di atas merupakan materi umum yang harus dipahami untuk dapat mempercantik tampilan website. Inti dari CSS adalah selector dan property (Atribut dan nilai) dan bagaimana memanggil selector yang telah dideklarasikan ke dalam dokumen HTML.

BAB 7 Cara Membuat Template Website Toko Online

Dengan pemahaman HTML dan CSS di materi-materi sebelumnnya, paling tidak kita sudah mampu redesign template situs web yang sudah ada sesuai dengan selera sendiri. Tapi untuk menjadi seorang web designer terlebih web developer, mau tidak mau kita harus belajar tentang ilmu website yang lebih komplit.

Namun sebelum lebih jauh, kita akan belajar membuat template sederhana dengan tema jual beli baju toko online. Berikut tutorial membuat template toko online sederhana dengan HTML dan CSS.

1. Komponen Utama Template Website

Pada umumnya, tampilan website atau biasa disebut tema atau template terdiri atas 2 bagian utama, yaitu tampilan postingan dan tampilan konten. Tampilan postingan berisi beberapa konten terbaru yang dibaru dibuat dan tampilan konten berisi informasi lengkap tentang satu konten atau postingan yang telah dibuat.

Dalam membuat sebuah template blog atau website, kita harus membuat konsep dasar tentang tampilan tata letak (Layout) template menggunakan kode HTML. Umumnya tampilan suatu halaman website telah dibagi dalam beberapa bagian utama, yaitu sebagai berikut.

- Header

Header biasanya digunakan untuk meletakkan judul website dan deskripsi utama website dan terletak pada bagian atas. Selain itu, juga digunakan untuk meletakkan menu navigasi seperti contact, about us, privacy policy, disclaimer, sitemap, dan lain-lain.

- Konten

Tampilan konten biasanya diletakkan di posisi tengah template. Pada tampilan postingan, tampilan konten terdiri dari beberapa konten yang diberikan deskripsi secara singkat. Dan pada tampilan landing page, konten berisi informasi lengkap satu konten.

- Sidebar

Bagian sidebar umumnya terletak dibagian sisi kanan. Biasanya digunakan untuk meletakkan iklan, postingan terpopuler, dan informasi lainnya sesuai dengan keinginan pemilik website.

- Footer

Sesuai dengan namanya, footer terletak pada bagian terbawah website dan biasanya berisi informasi pengembang website maupun pembuat template.

Sekali lagi, tidak ada aturan baku dalam hal tampilan website. Semua komponen yang disebutkan di atas merupakan bagian yang umumnya terdapat dalam sebuah template website. Dan yang paling penting adalah bagaimana setiap komponen yang ditampilkan di website dapat memudahkan orang yang mengakses website untuk mencari informasi dapat dengan mudah menemukan sesuatu yang mereka cari.

2. Alat dan Bahan Membuat Template Web

Dalam pembuatan template toko online dengan bahasa HTML dan CSS, kita hanya membutuhkan Notepad atau aplikasi text editor lainnya dan aplikasi web browser seperti Google Chrome atau Mozilla Firefox untuk melihat hasil koding template toko online.

3. Langkah kerja

Berikut cara membuat template website statis dengan HTML dan CSS sederhana untuk bahan belajar pemula.

- Buat folder baru

Dalam contoh ini, saya membuat folder baru di drive D dengan folder TA HTML. Di dalam D:\TA HTML ini, terdapat beberapa file untuk bahan percobaan, yaitu gambar baju format jpg dengan nama 1, 2, 3, sampai 10, terdapat 2 file HTML untuk template toko online dan satu file CSS untuk mempercantik tampilan template. Langsung saja, berikut langkah-langkah membuatnya.

- Buat file gaya.css

Buka notepad dan klik file dan pilih save as. Pada file name, isi dengan gaya.css dan pada type files pilih all files. Kemudian copy dan paste kode di bawah ini ke Notepad.

Body{
background:yellow;
color:black;
font-family:arial;
}

header{
text-align:center;
color:red;
font-weight:bold;
font-size:20pt;
}

.deskripsi{
color:yellow;
font-weight:bold;
font-size:15pt;
}

h1{
color:red;text-align:center;
}

h2,h3,h4,h5,h6{
color:red;
}

footer{
text-align:right;
color:red;
font-weight:bold;
font-size:10pt;
}


td.kiri{
padding-right:0.2cm;
padding-left:0.2cm;
padding-bottom:0.2cm;
padding-top:0.2cm;
background-color:black;
}

img.gambarpost{
width:224px;height:200px; auto
}

img.gambaratas{
width:1000px;height:175px; auto;
}

img.gambarjalan
{
width:350px;height:175px; auto;
border:2px solid black;
}

img.gambarlandingpage{
width:350px;height:300px; auto;
}

<!—Tombol beli -->
a.beli{
display:block;
margin:10px 0px;
color:blue;
border-top:2px solid red;
border-left:2px solid red;
border-bottom:2px solid red;
border-right:2px solid red;
padding:4px 4px;
background:yellow;
text-align:center;
font-weight:bold;
}

<!—Harga Barang-->
.harga{
color:red;
background-color:yellow;
text-align:center;
font-weight:bold;
position:absolute;
}

.wrap{
position:center;
width:100%;max-width:1000px;
margin:0 auto;
padding-top:1px;
background:black;
}

.wrap1{
position:relative;
width:100%;max-width:1000px;
background:orange;
}

.postingan{
position:relative;
width:100%;max-width:1000px;
background:white;
}

nav.menu ul li{
float:left;
}

nav.menu ul{
display:block;
list-style-type:none;
float:left;
margin:0;
box-shadow:1px 1px 1px 1px;
background:yellow;
padding:1px 1px;
}

nav.menu ul li a{
margin:2px 2px;
color:blue;
float:left;
border:2px solid red;
padding:5px;
display:block;
font-weight:bold;
font-size:10px;
text-decoration:none;
}

#container{
background:yellow;
padding:20px;
}


.pagination{
display:inline-block;
padding:5px 9px;
margin-right:4px;
border-radius:3px;
border: solid 1px red;
font-weight:bold;
background:yellow;
}

- Buat file HTML dengan nama post.html

Buka Notepad, klik kanan dan pilih save as. Pada file name isi dengan post.html dan pada type files pilih all files. Kemudian copy dan paste kode HTML di bawah ini ke Notepad!

<html>
<head>
<title>Rumah Baju Murah</title>
<link rel="stylesheet" type="text/css" href="D:TA HTML/gaya.css"></link>
</head>
<body>
<div class="wrap">
<header>
<p>RUMAH BAJU MURAH</p>
<p class="deskripsi">Baju Murah Kualitas Premium! Stok Terbatas!</p>
</header>
<img class="gambaratas"src="D:TA HTML/1.jpg"/>
<div class="wrap1">
<nav class="menu"><ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PRIVACY POLICY</a></li>
<li><a href="#">DISCLAIMER</a></li>
<li><marquee scrollamount="5"><a href="">PROMO TERBATAS! Beli Sekarang Dapat Diskon 50%!</a></marquee></li>
</ul>
</nav>
<marquee behavior="alternate" scrollamount="5"><img class="gambarjalan"src="D:TA HTML/2.jpg"/> <img class="gambarjalan"src="D:TA HTML/3.jpg"/> <img class="gambarjalan"src="D:TA HTML/4.jpg"/></marquee>
<a class="beli" href="#">TERLARIS MINGGU INI!</a>
<table border="2">
<tr>
<td class="kiri">
<div class="harga">Rp75.000</div>
<img class="gambarpost"src="D:TA HTML/5.jpg"/>
</br>
<a class="beli" href="D:TA HTMLlanding page.html">BELI</a>
</td>
<td class="kiri">
<div class="harga">Rp75.000</div>
<img class="gambarpost"src="D:TA HTML/6.jpg"/>
</br>
<a class="beli" href="#">BELI</a>
</td>
<td class="kiri">
<div class="harga">Rp65.000</div>
<img class="gambarpost"src="D:TA HTML/7.jpg"/>
</br>
<a class="beli" href="#">BELI</a>
</td>
<td class="kiri">
<div class="harga">Rp85.000</div>
<img class="gambarpost"src="D:TA HTML/8.jpg"/>
</br><a class="beli" href="#">BELI</a>
</td>
</tr>
<tr>
<td class="kiri">
<div class="harga">Rp95.000</div>
<img class="gambarpost"src="D:TA HTML/9.jpg"/>
</br>
<a class="beli" href="#">BELI</a>
</td>
<td class="kiri">
<div class="harga">Rp95.000</div>
<img class="gambarpost"src="D:TA HTML/10.jpg"/>
</br>
<a class="beli" href="#">BELI</a>
</td>
<td class="kiri">
<div class="harga">Rp175.000</div>
<img class="gambarpost"src="D:TA HTML/1.jpg"/>
</br><a class="beli" href="#">BELI</a>
</td>
<td class="kiri">
<div class="harga">Rp75.000</div>
<img class="gambarpost"src="D:TA HTML/2.jpg"/>
</br>
<a class="beli" href="#">BELI</a>
</td>
</tr>
</table>
</div>
<div id="container">
<div class="pagination">
<a href="#"class="pagination">First</a>
<a href="#"class="pagination">1</a>
<a href="#"class="pagination">2</a>
<a href="#"class="pagination">3</a>
<a href="#"class="pagination">4</a>
<a href="#"class="pagination"> ... </a>
<a href="#"class="pagination">Last</a>
</div></div>
<img class="gambaratas"src="D:TA HTML/3.jpg"/>
<footer align="right">Tugas Pemrograman HTML</footer>
</body>
</html>

Berikut tampilan postingan sesuai dengan template di atas.

Belajar HTML dan CSS, Cara Membuat Template Blog

- Buat file HTML dengan nama landing page.html

Buka Notepad dan klik file kemudian save as dengan nama landing page.html. Copy kode HTML di bawah ini dan pastekan di Notepad.

<html>
<head>
<title>Beli Baju Di Rumah Baju Murah</title>
<link rel="stylesheet" type="text/css" href="D:TA HTML/gaya.css"></link>
</head>
<body>
<div class="wrap">
<header>
<p>RUMAH BAJU MURAH</p>
<p class="deskripsi">Baju Murah Kualitas Premium! Stok Terbatas!</p>
</header>
<img class="gambaratas"src="D:TA HTML/1.jpg"/>
<div class="wrap1">
<nav class="menu"><ul>
<li><a href="D:TA HTMLpost.html">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PRIVACY POLICY</a></li>
<li><a href="#">DISCLAIMER</a></li>
<li><marquee scrollamount="5"><a href="">PROMO TERBATAS! Beli Sekarang Dapat Diskon 50%!</a></marquee></li>
</ul>
</nav>
<marquee behavior="alternate" scrollamount="5"><img class="gambarjalan"src="D:TA HTML/2.jpg"/> <img class="gambarjalan"src="D:TA HTML/3.jpg"/> <img class="gambarjalan"src="D:TA HTML/4.jpg"/></marquee>
<a class="beli" href="#">TERLARIS MINGGU INI!</a>
<div class="postingan">
<h2>Beli Baju Murah Gratis Ongkir Se Indonesia</h2>
<div class="harga">Rp75.000</div>
<center><img src="D:TA HTML/5.jpg"/ width="300px" height="350px"></center>
<h3>Bahan</h3>
<p>Baju ini dibuat dari bahan yang nyaman digunakan serta menyerap keringat. Cocok untuk olahraga maupun travelling. Cocok untuk generasi milenials yang ingin tampil trendy dan bergaya.
<h3>Harga Promo</h3>
<p>Tunggu apa lagi? Segera order dan rasakan kualitasnya! Percaya diri akan meningkat!
<a class="beli" href="#">BELI</a>
</div></div>
<center><div id="container">
< div class="pagination">
<a href="#"class="pagination">Previous</a>
<a href="#"class="pagination">Next</a>
</div></div>
<img class="gambaratas"src="D:TA HTML/6.jpg"/>
<footer align="right">Tugas Pemrograman HTML</footer></div>
</body>
</html>

Berikut tampilan landing page yang berisi informasi tentang produk ketika tombol beli diklik.

Belajar HTML dan CSS, Cara Membuat Template Website Toko Online

Keterangan:

- Tanda # diganti dengan link tujuan ketika diklik.
- Tombol beli pada tampilan postingan menuju ke tampilan landing page yang berisi informasi produk.
- Tombol beli pada tampilan landing page diisi dengan link yang menuju ke sistem pembelian dan cara pembayaran produk.

Berbeda dengan tampilan website yang hanya menyuguhkan artikel berupa tulisan dan gambar dalam kontennya, toko online sedikit istimewa. Beberapa hal yang wajib ada adalah tombol untuk membeli produk dan metode pembayarannya. Untuk toko online yang sudah lengkap, selain terdapat menu untuk membayar secara otomatis produk yang dipesan melalui transfer bank atau virtual account, juga tidak sedikit toko online besar yang menggunakan fasilitas top up saldo bagi para membernya, seperti Tokopedia dan lain-lain.

Daftar Pustaka

1. https://www.duniailkom.com
2. Syafriadi, S.Kom., M.Kom., Praktikum PEMROGRAMAN HTML LABORATORIUM KOMPUTER Universitas Cokroaminoto Palopo 2018
3. https://www.simentik.eu.org/

Untuk mendapatkan buku Belajar HTML dan CSS, Konsep Dasar Membuat Template Website dalam bentuk file digital PDF, silahkan hubungi Lara4store@gmail.com.

Untuk Kamu yang mau download file PDF-nya silahkan download di bawah ini!

Download HTML dan CSS Membuat Template Toko Online .pdf

Demikianlah buku yang cocok untuk yang baru belajar design website. Sebuah buku yang berisi materi lengkap belajar HTML dan CSS untuk pemula yang sangat dasar. Dan sesuai janji, juga terdapat tutorial membuat template website dan blog sendiri di dalamya. See you next time!