Tutorial Web Desain

Langkah-Langkah Merancang Website
Author : Andreas Sahabat Lumban Batu, S.Kom., M.Kom.

Writed at Jakarta, Wednesday,10 Jan’2024.
Tools
Untuk merancang sebuah website diperlukan beberapa tools, yaitu :
1.Sublime text atau visual studio code
2.Xampp
Sublime text
Sublime digunakan untuk menulis code
Anda bisa mendownloadnya disini https://www.sublimetext.com/3 ,lalu pilih Windows 64 bit ,dan instal pada
computer/laptop Anda.
Xampp
Xampp digunakan sebagai web server
Anda bisa mendownloadnya disini https://www.apachefriends.org/download.html ,lalu pilih 8.0.30 / PHP 8.0.30
,dan instal pada computer/laptop Anda.
Website
Website adalah kumpulan halaman situs yang terdapat dalam sebuah domain atau subdomain pada jaringan
World Wide Web (WWW) di Internet.
Di era digital saat ini, internet merupakan salah satu sarana yang banyak digunakan untuk memudahkan
berbagai kegiatan.
Setiap orang dapat mengakses informasi terbaru dari manapun melalui website dengan menggunakan berbagai
perangkat mulai smartphone, tablet, laptop hingga PC hanya dengan menggunakan koneksi internet.
Website merupakan salah salah satu platform yang paling sering di akses untuk mencari berbagai informasi dan
sarana komunikasi. Terlebih saat ini sudah banyak aplikasi dan tutorial cara membuat website sendiri dari nol
tanpa coding yang membuat proses pembuatan web semakin mudah dan pertumbuhan jumlah website selalu
meningkat di Indonesia.
Penyebaran informasi yang cepat, dan efisien inilah yang menjadi alasan utama mengapa website akan selalu
menjadi sarana penting untuk mendapatkan dan mengelola informasi.
Tim Berners-Lee membuat website dengan tujuan untuk memudahkan para peneliti untuk bertukar informasi di
tempat kerjanya. Sebelum tahun 1990, Tim Berners-Lee menuliskan tentang tiga teknologi dasar website yaitu:
• HTML (Hyper Text Markup Language) yang merupakan bahasa markup atau format untuk halaman web.
• URI (Uniform Resource Identifier) merupakan sebuah alamat unik untuk membuka halaman situs. URI ini
berfungsi untuk mengidentifikasi sumber daya yang ada pada web. URI saat ini sering di sebut dengan URL
(Uniform Resource Locator)
• HTTP (Hyper Text Transfer Protocol) yang memungkinkan seseorang untuk mengambil kembali sumber daya
yang terkoneksi dengan semua situs web.
Pada tanggal 30 april 1993, CERN yang adalah laboratorium fisika di Swiss, dengan resmi menyatakan perilisan
website secara gratis.
Jenis-Jenis Website
Terdapat tiga jenis website yang dibagi berdasarkan sifat, tujuan dan bahasa pemrograman, anatara lain:
Jenis website berdasarkan sifat
• Website Dinamis adalah sebuah website yang berisi konten yang selalu berubah setiap saat, contohnya website
toko online, website internet banking, dll.
• Website Statis merupakan website yang kontennya sangat jarang diubah, contohnya website landing page.
Jenis website berdasarkan tujuan
• Personal Website adalah situs web yang berisi informasi pribadi seseorang.
• Corporate web, website yang dimiliki oleh perusahaan
• Portal Website adalah website yang memiliki banyak layanan berita, email dan jasa-jasa lainnya.
• Website Media Sharing, web yang bertujuan untuk berbagi media antar pengguna seperti gambar, video,
musik. Contohnya: Flickr, Youtube, Soundcloud.
• Forum Website adalah website yang digunakan sebagai sarana diskusi pengunjungnya
• Selain ini terdapat ula beberapa website lain seperti website pemerintah, e-banking, e-payment, e-procurement
dan sebagainya.
Jenis website berdasarkan bahasa pemrograman
• Server side adalah web yang menggunakan bahasa pemrograman yang tergantung pada tersedianya server
seperti PHP, ASP dan sebagainya. Jika tidak ada server, maka website yang dibangun menggunakan bahasa
pemrograman tidak dapat berfungsi sebagaimana mestinya.
• Client side adalah website yang tidak membutuhkan server dalam menjalankannya, website ini cukp di akses
melalui browser.
Fungsi Website
Fungsi utama dari website adalah untuk menyampaikan informasi. Dijaman modern ini website bisa digunakan
sebagai platform pemasaran oleh pihak bisnis dengan menjangkau pelanggan yang lebih luas di Internet. Bagi
orang pribadi, website sering dijadikan sebagai sarana komunikasi, penyebaran informasi, dan juga bisnis
online. Adapun beberapa fungsi lain dari website adalah:
1. Komunikasi
Komunikasi dapat dilakukan dengan mudah melalui platform media sosial melalui website. Contohnya
Facebook, WhatsApp, Twitter, Instagram dan lain sebagainya.
2. Informasi
Website berfungsi sebagai media informasi terbaru dan menarik untuk dibaca oleh pengguna internet. Selain
website juga dijadikan sebagai sarana edukasi seperti tutorial, tips dan trik dan lain-lain.
3. Hiburan
Terdapat banyak sekali situs game online, film, musik dan sebagainya dalam website yang dapat menjadi
hiburan bagi pengguna internet.
4. Transaksi Jual beli Online

Website juga dapat dijadikan sarana transaksi bisnis berupa barang, jasa dan sebagainya. Fungsi Transaksi ini
juga dapat menghubungkan perusahaan, konsumen dan komunitas tertentu.
HTML
HyperText Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang untuk
ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS)
dan bahasa skrip lainnya seperti JavaScript, VBScript, dan PHP.
Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal
dan membuat dokumen menjadi halaman web multimedia. HTML menggambarkan struktur halaman
web secara semantik dan isyarat awal yang disertakan untuk penampilan dokumen.
Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung siku. Tag
seperti <img /> dan <input /> langsung perkenalkan konten ke dalam halaman. Tag lain
seperti <p> mengelilingi dan memberikan informasi tentang teks dokumen dan mungkin menyertakan tag lain
sebagai sub-elemen. Peramban tidak menampilkan tag HTML, tetapi menggunakannya untuk menafsirkan
konten halaman.
HTML dapat menyematkan program yang ditulis dalam bahasa skrip seperti JavaScript, yang memengaruhi
perilaku dan konten halaman web. Dimasukkannya CSS mendefinisikan tampilan dan tata letak konten. World
Wide Web Consortium (W3C), mantan pengelola HTML dan pemelihara standar CSS saat ini, telah mendorong
penggunaan CSS pada HTML presentasi eksplisit sejak 1997.
Sejarah
Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor di CERN (Organisasi Eropa
untuk Riset Nuklir) mengusulkan dan menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam
membagi dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis
internet. Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir 1990.
Pada tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam
sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di catatan pribadinya sejak
1990 dia mendaftar "beberapa dari banyak daerah yang menggunakan hypertext" dan pertama-tama
menempatkan sebuah ensiklopedia.
Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah dokumen yang disebut "Tanda HTML",
pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991. Tanda ini menggambarkan 18
elemen awal mula, versi sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi oleh
SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN.
Sebelas elemen ini masih ada di HTML 4.
HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis teks, gambar dan
bahan lainnya ke dalam halaman web secara visual maupun suara. Karakteristik dasar untuk setiap item dari
markah HTML didefinisikan di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan
menggunakan tambahan halaman web desainer CSS. Banyak elemen teks ditemukan di laporan teknis ISO pada
tahun 1988 TR 9537 Teknik untuk menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks
awal seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi:
perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik untuk memformat dokumen
CTSS secara manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur daripada hanya
efek cetak, dengan pemisahan struktur dan markah juga; HTML telah semakin bergerak ke arah ini dengan CSS.
Sejarah versi HTML

24 November 1995
HTML 2.0 dipublikasikan sebagai IETF RFC 1866. Penambahan RFC memperbanyak kemampuan
untuk:
 November 25, 1995: RFC 1867 (mengunggah file berdasarkan bentuk)

 Mei 1996: RFC 1942 (tabel)
 Agustus 1996: RFC 1980 (peta gambar berbasis klien)
 Januari 1997: RFC 2070 (internasionalisasi)
14 Januari 1997
HTML 3.2 dipublikasikan sebagai Konsorsium World Wide Web. Versi ini merupakan versi pertama
yang dikembangkan dan distandardisasi secara khusus oleh Konsorsium World Wide Web,
sebagaimana IETF sudah menutup kelompok kerja HTMLnya pada 12 September, 1996.
Pada awalnya disebut "Wilbur",HTML 3.2 menghilangkan rumus matematika sama sekali yang sedang
berkonsiliasi atas kasus tumpang tindih antara berbagai kepemilikan dan mengadopsi sebagian besar
tanda markah visual dari Netscape. Elemen kedip dari Netscape dan elemen marquee besutan
Microsoft dihilangkan karena kesepakatan bersama antara kedua perusahaan. Sebuah markup untuk
rumus matematika serupa dengan yang ada dalam HTML tidak memiliki standar sampai 14 bulan
kemudian di MathML.
18 December 1997
HTML 4.0 dipublikasikan sebagai rekomendasi W3C. Versi ini memiliki 3 variasi, yaitu:
 Ketat, di mana elemen terdeprekasi dilarang.

 Transisional, di mana elemen terdeprekasi diperbolehkan.
 Frameset, di mana sebagian besar hanya elemen yang berkaitan dengan frame
diperbolehkan.
Dulunya memiliki kode nama "Cougar", HTML 4.0 mengadopsi banyak tipe elemen dan atribut yang
spesifik untuk peramban.HTML 4 adalah sebuah aplikasi SGML sesuai dengan ISO 8879 – SGML.
 HTML 2.0 Diarsipkan 2005-03-05 di Wayback Machine.—(RFC 1866)

disetujui sebagai standar 22 September 1995,
 HTML 3.2 Diarsipkan 2010-06-19 di Wayback Machine.—14
Januari 1996,
 HTML 4.0 Diarsipkan 2011-06-06 di Wayback Machine.—18
Desember 1997,
 HTML 4.01 Diarsipkan 2005-03-06 di Wayback Machine. (minor fixes)—
24 Desember 1999,
 ISO/IEC 15445:2000[pranala nonaktif permanen] ("ISO HTML", berdasar pada
HTML 4.01 Strict)—15 Mei 2000.
 HTML 5 Diarsipkan 2012-06-06 di Wayback Machine. (stabil)
rekomendasi W3C—28 Oktober 2014.
Kegunaan
Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini
sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal
dengan tag tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi
tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>
TAMPIL TEBAL</b> . Tanda <b> digunakan untuk mengaktifkan instruksi cetak
tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk
menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran
komponen-komponen struktur dan format di dalam halaman web daripada menentukan
penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan
susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan,
tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan
halaman web. Salah satu hal Penting tentang eksistensi HTML adalah
tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan
berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana
tampilan yang terlihat dalam PC berbasis Windows. Pengguna Microsoft Windows pun
tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada
pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian
pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan
berisi Grafika dan Pranala.
Kegunaan lain
 Mengintegrasikan gambar dengan tulisan.

 Membuat pranala.
 Mengintegerasikan berkas suara dan rekaman gambar hidup.
 Membuat form interaktif.
Menyunting format tulisan
HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang
akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam
menentukan format berkas adalah:
 Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat

digunakan untuk judul, heading dan sebagainya.
 Menampilkan tulisan dalam bentuk cetakan tebal
 Menampilkan sekelompok kata dalam bentuk miring
 Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan
mesin ketik
 Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
Markah
Secara garis besar, terdapat 4 jenis elemen dari HTML:
 Struktural. Tanda yang menentukan level atau tingkatan dari sebuah

tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk
menampilkan
Golf
sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1)
 Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak

peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan
menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan
oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
 Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen
tersebut atau pranala ke dokumen lain (contoh, <a
href="http://www.wikipedia.org/"> Wikipedia</a> akan
menampilkan Wikipedia Diarsipkan 2001-07-27 di Wayback Machine.
sebagai sebuah hyperlink ke URL tertentu),
 Elemen widget yang membuat objek-objek lain seperti tombol
( <button> ), daftar ( <li> ), dan garis horizontal ( <hr> ). Konsep hiperteks
pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata
atau frasa untuk menuju ke bagian manapun dalam World Wide Web,
Ada tiga macam pranala (link) yang dapat digunakan:
 Pranala menuju bagian lain dari page.

 Pranala menuju page lain dalam satu web site.
 Pranala menuju resource atau web site yang berbeda.
Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan
dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan
tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya
digunakan Cascading Style Sheets.
Contoh dokumen HTML sederhana

Rekomendasi W3C untuk HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wikipedia bahasa Indonesia, ensiklopedia bebas</title>
</head>
<body>
<p>Hallo, Dunia!</p>
</body>
</html>
Head
Dokumen HTML diapit oleh tag <head> . Di dalam bagian ini biasanya dimuat
tag <title> yang menampilkan judul halaman pada titlenya browser. Selain
itu bookmark juga menggunakan tag <title> untuk memberi mark suatu web site.
Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian
(searching) biasanya title digunakan sebagai keyword. Header juga memuat
tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu
mengenai dokumen HTML. Pengguna bisa menentukan author name, keywords, dan
lainnya pada tag META.
Contoh:
<meta name="author" content="ubuntu-online">
Body
Bagian "body", yang dinyatakan dengan tag <body> , merupakan tubuh atau isi dari
dokumen HTML di mana pengguna meletakkan informasi yang akan ditampilkan pada
browser.
Tag
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu
elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag
tersebut. Tag ini dinyatakan dengan tanda kurung sudut (< dan >).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
 Tag awal, dinyatakan dalam bentuk <nama tag>

 Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di
browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
Atribut
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag
tersebut. Misalnya, <p style="text-align:left;"> digunakan untuk membuat rata kiri
suatu paragraf. Tag yang digunakan adalah <p> dan atribut yang menyertainya adalah
"style" dengan nilai "text-align:left". Nilai atribut "style" ditulis dalam CSS.
CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style,
misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat
dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada 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. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format
yang berbeda.
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang
kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan
sebuah teknologi internet yang direkomendasikan oleh World Wide Web
Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet
Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati
dengan standar CSS.[3]
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada
pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen
agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak
hal dalam desain website. CSS3 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada
tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang ketiga diharapkan lebih baik dari
versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada halaman website, di antaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan
dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background,
border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.[4]
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de;
}
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang
terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1,
sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu:
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan
menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang
bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body>
<p id="cth1">
Ini adalah contoh tag P tanpa diformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">

Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">

Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
CSS didefinisikan terlebih dahulu dalam tag <style> ...</style> di atas tag <body>. Pada pendefinisian ini
disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan
oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet adalah sebagai berikut :[6]
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {
background: #0000FF;
color: #FFFF00;
margin-left: 0.5in;
}
h1 {
font-size: 18pt;
color: #FF0000;
}
p{
font-size: 12pt;
font-family: arial;
text-indent: 0.5in;
}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi
0.5 inch
</p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan
warna
background biru</p>
</body>
</html>
External CSS[sunting | sunting sumber]

CSS didefinisikan dengan disimpan di berkas yang berbeda. Ini dapat mempermudah dalam perawatan dan
dapat digunakan di semua berkas HTML sehingga memudahkan seorang pengembang web untuk
mengembangkan situs web miliknya. Untuk menautkan berkas CSS ke suatu berkas HTML kita hanya perlu
menggunakan kode
<link href="lokasiberkas.css" rel="stylesheet">

Shorthand CSS[sunting | sunting sumber]
Ada beberapa properti CSS yang dapat disingkat, biasanya dipanggil dengan Shorthand CSS. Teknik shorthand
adalah cara mempersingkat penulisan kode CSS yang memungkinkan untuk menetapkan nilai
beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, menghemat energi, dan tentu saja
menghemat waktu. Kode jadi terlihat lebih rapi, efisien, dan sering kali lebih mudah dibaca.
Dalam CSS, adalah wajar jika satu property memiliki banyak elemen. Misalnya dalam kode margin memiliki
4 property untuk setiap sisi elemen.
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
Jika menggunakan teknik shorthand CSS, maka penulisan semua property bisa disatukan demi terciptanya kode
yang lebih ringkas. Urutan penulisan syntax pada teknik shorthandharus benar agar sesuai dengan style yang
diinginkan.
Untuk saat ini metode penulisan shorthand CSS tersedia untuk beberapa property berikut:
1. Margin
2. Padding
3. Font
4. Background
5. Border
6. List
Margin[
margin: 3px 5px 7px 10px;
Artinya:
margin-top: 3px;
margin-right: 5px;
margin-bottom: 7px;
margin-left: 10px;
Padding
padding: 3px 5px 7px 10px;
Artinya:
padding-top: 3px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 10px;
Font
font: italic bold 14px/30px Arial;
Artinya:
font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 30px;
font-family: Arial;
Background
background: #cc0000 url('igniel.jpg') no-repeat top center;
Artinya:
background-color: #cc0000;
background-image: url('igniel.jpg');
background-repeat: no-repeat;
background-position: top center;
Border
border: 3px solid #0000cc;
Artinya:
border-width: 5px;
border-style: solid;
border-color: #0000cc;
List
list-style: disc inside url('dot.gif');
Artinya:
list-style-type: disc;
list-style-position: inside;
list-style-image: url('dot.gif');
Penulisan komentar pada CSS
h1 {
/* ini adalah komentar untuk satu baris */
color: red;
}
p{
/*
ini juga adalah komentar untuk dua baris atau lebih.
seluruh teks yang berada pada pembuka dan penutup sebuah komentar
akan diabaikan oleh browser sebagai compiler.
*/
color: red;
}
CSS Selector
Universal Selector
Universal selector digunakan untuk diterapkan pada seluruh elemen.
/* diterapkan pada seluruh elemen */

*{
color: green;
}
Type Selector
Type selector merupakan cara penulisan CSS dengan nama elemen sebagai target untuk diterapkannya rule.
Ketika menggunakan selector ini, maka rule akan diterapkan pada seluruh elemen target yang ada pada
dokumen HTML.
/* akan diterapkan pada seluruh elemen <a>*/

a{
color: blue;
}
ID Selector
ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan pada elemennya. Agar
elemen dapat terpilih, maka atribut id pada elemen harus sama persis dengan yang ada di selector.[9] Contohnya
adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#contoh {
border: black 1px solid;
border-radius: 16px;
}
</style>
</head>
<body>

<p id="contoh">ini adalah contoh kalimat.</p>
</body>
</html>
Class Selector[sunting | sunting sumber]

Class selector menetapkan target elemen berdasarkan nilai atribut class yang diterapkan pada elemennya. Mirip
seperti ID Selector, untuk menerapkan class selector maka atribut class pada elemen harus sesuai dengan yang
ada di selector.[10] Contohnya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.contoh {
border: black 1px solid;
border-radius: 16px;
}
</style>
</head>
<body>

<p class="contoh">ini adalah contoh kalimat.</p>
</body>
</html>
Grouping Selector pada CSS

Grouping selector pada CSS merupakan cara penulisan CSS yang mana ketika selector CSS
memiliki property yang sama dapat dikelompokkan dengan selector lainnya. Contohnya adalah sebagai berikut:
h1 {
color: red;
}
h2{
color: red;
}
p{
color: red;
}
/* ini adalah class selector */

.text{
color: red;
}
Kode CSS di atas akan lebih baik dikelompokkan seperti di bawah ini, dengan tujuan untuk meminimalisasi
penulisan kode yang sama berulang.[11]
h1, h2, p, .text {

color: red;
}
Dukungan dari peramban web

Masing-masing peramban web menggunakan mesin tata letak yang berbeda. Contohnya Firefox
menggunakan Gecko sebagai mesin tata letaknya dan Chromium menggunakan Blink sebagai mesin tata
letaknya. Dukungan untuk fitur CSS dari setiap mesin tata letak terkadang sering tidak konsisten. Beberapa
teknik pun bermunculan untuk menggunakan suatu fitur CSS ke peramban web yang tidak mendukung fitur
tersebut (biasa disebut CSS hack). Adopsi fitur CSS baru dapat terhambat oleh kurangnya dukungan dari
peramban-peramban web besar. Contohnya fitur cross-fade() telah didukung oleh Chrome dan Safari namun
sampai tahun 2021 masih belum didukung oleh Firefox.[12]
Beberapa pengembang web biasanya memeriksa terlebih dahulu dukungan untuk suatu fitur CSS, terutama
untuk fitur CSS baru. Beberapa situs web berikut dapat membantu seperti CanIUse dan Mozilla Developer
Network. CSS 3 memiliki fitur kueri, yang memberikan arahan @supports yang akan memungkinkan
pengembang menargetkan peramban web dengan dukungan untuk fungsionalitas tertentu langsung di dalam
CSS mereka.[13] CSS yang tidak didukung oleh suatu peramban web kadang-kadang bisa ditambal
menggunakan polyfill, yang merupakan potongan kode JavaScript yang dirancang untuk memberikan dukungan
untuk peramban web terhadap suatu fitur yang sebelumnya tidak didukung. Solusi ini dapat menambah
kerumitan pada proyek pengembangan, dan akibatnya, perusahaan sering kali menentukan daftar versi
peramban web yang akan dan tidak akan mereka dukung.
Penggunaan CSS dalam perangkat lunak lain

CSS dahulunya dibuat hanya untuk mempercantik halaman web. Namun, seiring perkembangan waktu CSS
mulai diadopsi oleh perangkat lunak lain.
GTK adalah peralatan gawit lintas platform yang menggunakan CSS untuk memberi gaya pada setiap widget.
GTK sering digunakan untuk membuat program Linux. GTK memperkenalkan API Tema baru dengan
menggunakan CSS pada pembaharuan besar GTK versi 3.
Qt merupakan toolkit widget dan biasa dipakai untuk membuat aplikasi lintas platform. Qt juga menggunakan
CSS untuk mengkonfigurasi tema.
Fakta-Fakta menggunakan CSS

Fakta Menggunakan CSS di antaranya:
 Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index
untuk menempatkan objek dalam posisi yang sama.
 Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas
dan kecepatan pengunduhan.
 Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan
sesudahnya.
Contoh Berkas CSS
/* Kode berikut didedikasikan ke ruang publik (public domain)

Silahkan untuk menggunakan, mensalin, dan mendistribusikan kode berikut */
body {
background-color: yellow;
}
p{
color: red;
}
Kode diatas akan mengganti warna halaman menjadi kuning dan membuat warna paragraf menjadi berwarna
merah.
CSS Preprocessor
Artikel utama: CSS Preprocessor
CSS preprocessor (pra pengolahan) adalah bahasa script atau program yang memungkinkan pengguna menulis
kode CSS sesuai dengan sintaksis (syntax) prepocessor itu sendiri.
Ada banyak jenis CSS prepocessor yang dapat digunakan, namun sebagain besar CSS prepocessor memiliki
beberapa fitur yangt tidak ada di vanilla CSS (CSS polos atau murni). Beberapa fitur tersebut di antaranya yaitu
penulisan variabel, nesting, mixins, extends, color operations, if/else statement, loops, dan lain sebagainya.
Fitur-fitur tersebut membuat penulisan kode CSS menjadi lebih mudah dibaca dan lebih mudah dirawat,
Berikut adalah beberapa CSS preprocessor popular dan sering digunakan, di antaranya yaitu :
 Sass
 LESS
 Stylus
 PostCSS
Variabel
Salah satu fitur yang dimiliki CSS preprocessor dan sering digunakan yaitu penulisan variabel. Dengan
menuliskan variabel, kode yang dituliskan dapat digunakan digunakan kembali (reusable). Sehingga proses
pengembangan suatu web dapat lebih cepat dan mudah.
Berikut adalah contoh penulisan variabel dalam CSS preprocessor:
Sass/SCSS
// Penulisan SCSS preprocessor

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.box {
border: 1px solid $border-dark;
}
Less CSS
// Penulisan Less preprocessor

@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
Stylus
// Penulisan STYLUS preprocessor

font-size = 1em
div
font-size font-size
Nesting
Dengan menggunakan fitur nesting, pengguna dapat menuliskan selector di dalam selector (bersarang). Contoh
penulisannya adalah sebagai berikut:
Sass/SCSS
// Penulisan SCSS preprocessor

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Less CSS
// Penulisan Less preprocessor

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
}
a{
display: block;
padding: 6px 12px;
}
}
Stylus
nav
ul
margin: 0;
padding: 0;
list-style: none;
li
a
display: block;
padding: 6px 12px;
CSS
/* Apabila ditulis dengan kode vanilla CSS atau CSS polos, maka hasilnya adalah sebagai berikut */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
}
nav a {
display: block;
padding: 6px 12px;
}
Source code :
Silahkan buat sebuah folder bernama gambar, lalu buat beberapa file lalu copykan code ini ke masing-masing
html dan css sesuai nama filenya.
1.home.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="gambar/logo.png" sizes="16x16">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<font size="10">
<img id="myImg" src="gambar/logo.png" width="120" height="80">
Santi Rama</font>
</div>
</header>
<nav>
<ul>
<li><a href="home.html">Beranda</a></li>
<li><a href="profil.html">Profil</a></li>
<li><a href="kontak.html">Kontak Kami</a></li>
<li><a href="logout.html">Logout</a></li>
</ul>
</nav>


<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal

span.onclick = function() {
modal.style.display = "none";
}
</script>
<article>

<div class="konten">
<a href="artikel1.html" target="_blank"><img src="gambar/1.jpeg" ></a>
<div class="judul">
<a href="artikel1.html" target="_blank">Foto-foto perayaan hari kemerdekaan </a>
</div>
<p>Yayasan Santi Rama merayakan hari kemerdekaan...<br>
<center><a class="btn btn-info" href="artikel1.html">Read More</a></center></p>
</div>


<a href="artikel2.html"><img src="gambar/2.jpeg" ></a>
<div class="judul">
<a href="artikel2.html">Foto-foto perayaan hari guru</a>
</div>
<p>Yayasan Santi Rama merayakan hari guru ...
<center><a class="btn btn-warning" href="artikel2.html">Read More</a></center></p>
</div>

<div class="judul">
<a href="artikel3.html">Foto-foto perayaan hari pendidikan</a>
</div>
<p>Yayasan Santi Rama merayakan hari pendidikan ...
<center><a class="btn btn-danger" href="artikel3.html">Read More</a></center></p>
</div>

<div class="judul">
<a href="artikel4.html">Foto-foto perayaan hari pahlawan</a>
</div>
<p>Yayasan Santi Rama merayakan hari pendidikan...
<center><a class="btn btn-success" href="artikel4.html">Read More</a></center></p>
</div>

<div class="judul">
<a href="artikel5.html">Foto-foto perayaan hari disabilitas</a>
</div>
<p>Yayasan Santi Rama merayakan hari disabilitas ...
<center><a class="btn btn-info" href="artikel5.html">Read More</a></center></p>
</div>

<div class="judul">
<a href="artikel6.html">Foto-foto perayaan hari sumpah pemuda</a>
</div>
<p>Yayasan Santi Rama merayakan hari sumpah pemuda ...
<center><a class="btn btn-warning" href="artikel6.html">Read More</a></center></p>
</div>

<div class="judul">
<a href="artikel7.html">Foto-foto perayaan hari buruh</a>
</div>
<p>Yayasan Santi Rama merayakan hari buruh ...
<center><a class="btn btn-danger" href="artikel7.html">Read More</a></center></p>
</div>

<div class="judul">
<a href="artikel8.html">Foto-foto perayaan hari kesaktian pancasila</a>
</div>
<p>Yayasan Santi Rama merayakan hari buruh ...
<center><a class="btn btn-success" href="artikel8.html">Read More</a></center></p>
</div>
</article>

<footer>
Copyright 2023 Santi Rama All Right Reserved
</footer>
</div>
</body>
</html>
2.index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Santi Rama</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">

<source src="gambar/video3.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>Login Form</h1>

<form id="form" action="home.html" >

<label>Nama Lengkap: </label>
<input type="text" name="nama" required>
<br>
<button class="btn btn-primary">Masuk</button>
<br><br>
</form>
</div>
<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>
3.kontak.html
<!DOCTYPE html>
<html>
<head>
<title>Bukutamu</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<font size="10">
Santi Rama</font>
</div>
</header>
<nav>
<ul>
</ul>
</nav>


</div>
<script>
// Get the modal
}


}
</script>
<kiri>
<div class="kontenkiri">
<div class="judulkiri">
<strong><h2>Bukutamu</h2></strong>
</div>
<hr>
<form id="form">
<label>Nama Lengkap: </label>
<input type="text" name="nama" class="form-control" placeholder="Nama Kamu">
<br>
<label >Email : </label>
<input type="text" name="email" class="form-control" placeholder="Email Kamu">
<br>
<label >No.Hp : </label>
<input type="text" name="no_hp" class="form-control" placeholder="No.Hp">
<br>
<label >Saran : </label>
<textarea cols="40" rows="5" name="pesan" class="form-control" placeholder="Pesan"></textarea>
<br>
<center><button type="submit" class="btn btn-primary">Kirim</button></center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br>
</form>
</div>
</kiri>
<kanan>
<div class="kontenkanan">
<ul>
<div class="judulkanan">
Artikel List
</div>
<li><a href="artikel1.html">Foto-foto perayaan hari guru</a></li>
<li><a href="artikel2.html">Foto-foto perayaan hari nasional</a></li>
<li><a href="artikel3.html">Foto-foto perayaan hari pancasila</a></li>
<li><a href="artikel4.html">Foto-foto perayaan hari disabilitas</a></li>
<li><a href="artikel5.html">Foto-foto perayaan hari buruh</a></li>
</ul>
</div>
Gallery Foto
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="gambar/1.jpeg" alt="Los Angeles" width="270" height="240">
</div>
<div class="item">
<img src="gambar/2.jpeg" alt="Chicago" width="270" height="240">
</div>
<div class="item">
<img src="gambar/3.jpeg" alt="New york" width="270" height="240">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Gallery Video
</div>
<div id="myCarousels" class="carousel slide" data-ride="carousel">
<li data-target="#myCarousels" data-slide-to="0" class="active"></li>
<li data-target="#myCarousels" data-slide-to="1"></li>
</ol>
<video width="270" height="240" controls>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div class="item">
</video>
</div>
<div class="item">
</video>
</div>
</div>
<a class="left carousel-control" href="#myCarousels" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCarousels" data-slide="next">
</a>
</div>
</div>
Lokasi
</div>
<center >
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.9047274547456!
2d106.79527447482961!3d-6.276255893712525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x2e69f1991fa48337%3A0x6d09a9cdc5ef1d7c!2sSLB%20Santi%20Rama!5e0!3m2!1sid!2sid!4v1701323197136!
5m2!1sid!2sid" width="270" height="240" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</center>
</div>
Youtube Channel
</div>
<center >
<iframe width="270" height="240" src="https://www.youtube.com/embed/HXbgP-pqt2A?
si=q1_h0bkYWj7c8zsy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</center>
</div>
</kanan>

<footer>
</footer>
</div>
</body>
</html>
4.profil.html
<!DOCTYPE html>
<html>
<head>
<title>Profil</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<font size="10">
Santi Rama</font>
</div>
</header>
<nav>
<ul>
</ul>
</nav>


</div>
<script>
// Get the modal
}


}
</script>
<kiri>
<strong>Duke Of Edinburgh International Awards diberikan kepada Siswi dari Santi Rama Fatimah
Rahma di Kedutaan Besar Inggris. Kuningan Jakarta.</strong>
</div>
<hr>
<p>Penghargaan Duke of Edinburgh adalah program penghargaan pemuda yang didirikan di Inggris Raya
pada tahun 1956 oleh Pangeran Philip, Duke of Edinburgh, yang telah berkembang menjadi 144 negara.
Penghargaan ini diberikan kepada remaja dan dewasa muda karena telah menyelesaikan serangkaian latihan
peningkatan diri yang meniru solusi Kurt Hahn untuk “Enam Penurunan Pemuda Modern”.
Di Inggris Raya, program ini dijalankan oleh The Duke of Edinburgh’s Award, sebuah perusahaan piagam
kerajaan. Sebuah entitas terpisah, Yayasan Penghargaan Internasional Duke of Edinburgh, mempromosikan
penghargaan di luar negeri dan bertindak sebagai badan koordinasi untuk sponsor penghargaan di negara lain, yang
diorganisasikan ke dalam 62 Otoritas Penghargaan Nasional dan sejumlah Operator Independen.
diorganisasikan ke dalam 62 Otoritas Penghargaan Nasional dan sejumlah Operator Independen.Di Inggris Raya,
program ini dijalankan oleh The Duke of Edinburgh’s Award, sebuah perusahaan piagam kerajaan. Sebuah entitas
terpisah, Yayasan Penghargaan Internasional Duke of Edinburgh, mempromosikan penghargaan di luar negeri dan
bertindak sebagai badan koordinasi untuk sponsor penghargaan di negara lain, yang diorganisasikan ke dalam 62
Otoritas Penghargaan Nasional dan sejumlah Operator Independen.Di Inggris Raya, program ini dijalankan oleh
The Duke of Edinburgh’s Award, sebuah perusahaan piagam kerajaan. Sebuah entitas terpisah, Yayasan
Penghargaan Internasional Duke of Edinburgh, mempromosikan penghargaan di luar negeri dan bertindak sebagai
badan koordinasi untuk sponsor penghargaan di negara lain, yang diorganisasikan ke dalam 62 Otoritas
Penghargaan Nasional dan sejumlah Operator Independen.Di Inggris Raya, program ini dijalankan oleh The Duke
of Edinburgh’s Award, sebuah perusahaan piagam kerajaan. Sebuah entitas terpisah, Yayasan Penghargaan
Internasional Duke of Edinburgh, mempromosikan penghargaan di luar negeri dan bertindak sebagai badan
koordinasi untuk sponsor penghargaan di negara lain, yang diorganisasikan ke dalam 62 Otoritas Penghargaan
Nasional dan sejumlah Operator Independen.Duke of Edinburgh, mempromosikan penghargaan di luar negeri dan
Nasional dan sejumlah Operator Independen.</p>
</div>
</kiri>
<kanan>
<ul>
Artikel List
</div>
</ul>
</div>
Gallery Foto
</div>
</ol>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</a>
</a>
</div>
</div>
Gallery Video
</div>
</ol>
</video>
</div>
<div class="item">
</video>
</div>
<div class="item">
</video>
</div>
</div>
</a>
</a>
</div>
</div>
Lokasi
</div>
<center >
2d106.79527447482961!3d-6.276255893712525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
</center>
</div>
Youtube Channel
</div>
<center >
</center>
</div>
</kanan>

<footer>
</footer>
</div>
</body>
</html>
5.logout.html
<!DOCTYPE html>
<html>
<head>
<title>Santi Rama</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 220px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">

Your browser does not support HTML5 video.
</video>
<div class="content">
<br>
<br>
<h1>Download sertifikat Web Design </h1>
<img id="myImg" src="gambar/logo.png">
<p>Terimakasih, silahkan download sertifikat kamu.
<a href="gambar/logo.png" target="_blank"><label class="btn btn-info">E-sertificate Kamu Disini</a></label>
</p>
<br>
<br>
Kembali ke <a href="index.html" class="btn btn-primary">login</a>
</div>


</div>
<script>
// Get the modal
}


}
</script>
<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>
6.artikel1.html
<!DOCTYPE html>
<html>
<head>
<title>Profil</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

.modal {
left: 0;
top: 0;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
}
}
@keyframes zoom {
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
cursor: pointer;
}

.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<font size="10">
Santi Rama</font>
</div>
</header>
<nav>
<ul>
</ul>
</nav>


</div>
<script>
// Get the modal
}


}
</script>
<kiri>
<strong>Duke Of Edinburgh International Awards diberikan kepada Siswi dari Santi Rama Fatimah
Rahma di Kedutaan Besar Inggris. Kuningan Jakarta.</strong>
</div>
<hr>
<p>Penghargaan Duke of Edinburgh adalah program penghargaan pemuda yang didirikan di Inggris Raya
pada tahun 1956 oleh Pangeran Philip, Duke of Edinburgh, yang telah berkembang menjadi 144 negara.
Penghargaan ini diberikan kepada remaja dan dewasa muda karena telah menyelesaikan serangkaian latihan
peningkatan diri yang meniru solusi Kurt Hahn untuk “Enam Penurunan Pemuda Modern”.
diorganisasikan ke dalam 62 Otoritas Penghargaan Nasional dan sejumlah Operator Independen.
diorganisasikan ke dalam 62 Otoritas Penghargaan Nasional dan sejumlah Operator Independen.Di Inggris Raya,
program ini dijalankan oleh The Duke of Edinburgh’s Award, sebuah perusahaan piagam kerajaan. Sebuah entitas
terpisah, Yayasan Penghargaan Internasional Duke of Edinburgh, mempromosikan penghargaan di luar negeri dan
Nasional dan sejumlah Operator Independen.<br><br><br><br><br><br><br></p>
</div>

</kiri>
<kanan>
<ul>
Artikel List
</div>
</ul>
</div>
Gallery Foto
</div>
</ol>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</a>
</a>
</div>
</div>
Gallery Video
</div>
</ol>
</video>
</div>
<div class="item">
</video>
</div>
<div class="item">
</video>
</div>
</div>
</a>
</a>
</div>
</div>
Lokasi
</div>
<center >
2d106.79527447482961!3d-6.276255893712525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
</center>
</div>
Youtube Channel
</div>
<center >
</center>
</div>
</kanan>

<footer>
</footer>
</div>
</body>
</html>
7.style.css
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background: #077c9c;
padding: 0;
margin:0;
.container{
width: 65%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
}
.logo {
font-size: xx-large;
padding: 30px 0 30px 10px;
color:#fff;
background: #077c9c;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
border: 1px solid gainsboro;
}
nav li {
float: left;
}
nav li a{
color:#444;
text-align: center;
padding: 14px 15px;
}
nav li a:hover {
opacity:0.9;
background-color: #3385ff;
}
kiri p {
line-height: 1.5;
}
kiri .kontenkiri {
width: 70.2%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
border-radius: 3px;
float: left;
}
kiri .konten_detailkiri {
width: 70%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
border-radius: 3px;
float: left;
}
kiri .isikiri {
width: 90%;
height: 20%;
border-radius: 3px;
float: left;
}
kiri .isikiri .judulkiri {
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}
kiri .isikiri .judul_detailkiri {
margin-left: 10px;
margin-top: 10px;
}
kiri .isikiri p {
margin-top: 0;
}
kiri .isikiri img {
float: left;
}
kiri .kontenkiri img {

width: 96.3%;
height: 320px;
}
kiri .kontenkiri:hover {
opacity:0.9;
}
kiri .kontenkiri .judulkiri a {
margin-left: 5px;
font-size:x-large;
color:#000;
}
kiri .kontenkiri a:hover {

opacity:0.9;
}
kanan p {
line-height: 1.5;
}
kanan .kontenkanan {
width: 27.2%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
border-radius: 3px;
float: left;
}
kanan .konten_detailkanan {
width: 70%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
border-radius: 3px;
float: left;
}
kanan .isikanan {
width: 90%;
height: 20%;
border-radius: 3px;
float: left;
}
kanan .isikanan .judulkanan {
margin-left: 10px;
margin-top: 10px;
}
kanan .isikanan .judul_detailkanan {
margin-left: 10px;
margin-top: 10px;
}
kanan .isikanan p {
margin-top: 0;
}
kanan .isikanan img {
float: left;
}
kanan .kontenkanan img {

width: 96.3%;
height: 120px;
}
kanan .kontenkanan:hover {
opacity:0.9;
}
kanan .kontenkanan .judulkanan a {
margin-left: 5px;
font-size:x-large;
color:#000;
}
kanan .kontenkanan a:hover {

opacity:0.9;
}
article {
width: 100%;
height: auto;
border-radius: 3px;
clear: both;
}
article p {
line-height: 1.5;
}
article .konten {
width: 23.4%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
border-radius: 3px;
float: left;
}
article .konten_detail {
width: 100%;
height: auto;
background: white;
margin:auto;
margin-top: 5px;
border-radius: 3px;
float: left;
}
article .isi {
width: 90%;
height: 20%;
border-radius: 3px;
float: left;
}
article .isi .judul {
margin-left: 10px;
margin-top: 10px;
}
article .isi .judul_detail {
margin-left: 10px;
margin-top: 10px;
}
article .isi p {
margin-top: 0;
}
article .isi img {
float: left;
}
article .konten img {

width: 96.3%;
height: 120px;
}
article .konten:hover {
opacity:0.9;
}
article .konten .judul a {
margin-left: 5px;
font-size:x-large;
color:#000;
}
article .konten a:hover {

opacity:0.9;
}
footer {
clear: both;
width: 98.8%;
color:#fff;
height: auto;
background-color: #077c9c;
text-align: center;
border-radius: 3px;
border-bottom: 1px solid gainsboro;
padding-top: 15px;
}
</style>
Output :

Tutorial Web Desain

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Web Desain

Diunggah oleh

Hak Cipta:

Format Tersedia

Langkah-Langkah Merancang Website

Author : Andreas Sahabat Lumban Batu, S.Kom., M.Kom.

Jenis website berdasarkan sifat

Jenis website berdasarkan tujuan

Jenis website berdasarkan bahasa pemrograman

4. Transaksi Jual beli Online

Sejarah versi HTML

 November 25, 1995: RFC 1867 (mengunggah file berdasarkan bentuk)

 Ketat, di mana elemen terdeprekasi dilarang.

 HTML 2.0 Diarsipkan 2005-03-05 di Wayback Machine.—(RFC 1866)

 Mengintegrasikan gambar dengan tulisan.

 Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat

 Struktural. Tanda yang menentukan level atau tingkatan dari sebuah

sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1)

 Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak

 Pranala menuju bagian lain dari page.

Contoh dokumen HTML sederhana

<meta name="author" content="ubuntu-online">

Tag biasanya merupakan suatu pasangan yang disebut dengan:

 Tag awal, dinyatakan dalam bentuk <nama tag>

Selain itu ada tiga metode penulisan CSS atribut, yaitu:

Contoh penulisan CSS dengan metode Inline Style Sheet

<p id="cth2" style="font-size:20pt">

<p id="cth3" style="font-size:14pt; color:red">

External CSS[sunting | sunting sumber]

<link href="lokasiberkas.css" rel="stylesheet">

margin: 3px 5px 7px 10px;

padding: 3px 5px 7px 10px;

font: italic bold 14px/30px Arial;

background: #cc0000 url('igniel.jpg') no-repeat top center;

border: 3px solid #0000cc;

list-style: disc inside url('dot.gif');

Penulisan komentar pada CSS

/* diterapkan pada seluruh elemen */

/* akan diterapkan pada seluruh elemen <a>*/

Class Selector[sunting | sunting sumber]

Grouping Selector pada CSS

/* ini adalah class selector */

h1, h2, p, .text {

Dukungan dari peramban web

Penggunaan CSS dalam perangkat lunak lain

Fakta-Fakta menggunakan CSS

Contoh Berkas CSS

/* Kode berikut didedikasikan ke ruang publik (public domain)

Berikut adalah contoh penulisan variabel dalam CSS preprocessor:

// Penulisan SCSS preprocessor

// Penulisan Less preprocessor

// Penulisan STYLUS preprocessor

// Penulisan SCSS preprocessor

// Penulisan Less preprocessor

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

/* Modal Content (image) */

/* Caption of Modal Image */

/* The Close Button */

/* 100% Image Width on Smaller Screens */

// Get the <span> element that closes the modal

// When the user clicks on <span> (x), close the modal