FORMAT STYLE DAN CSS

DISUSUN OLEH:
NAMA : MESYKA DZARWA KARIMA
KELAS : XI RPL A
 KATA PENGANTAR

Puji dan syukur dipanjatkan kehadirat Allah SWT yang telah melimpahkan Rahmat
dan hidayah-Nya. Atas berkat Rahmat dan hidayah-Nya serta berbagai upaya, tugas ini bisa
diselesaikan dengan baik dan tepat waktu.

Dalam penyusunan tugas ini, ditulis berdasarkan buku dan beberapa sumber yang
berkaitan. Penulis menyadari bahwa tugas ini masih kurang sempurna. Untuk itu diharapkan
berbagai masukan yang bersifat membangun demi kesempurnaannya.

Muara panas, 4 Maret 2024

Mesyka Dzarwa Karima

 Bab 1
Pendahuluan
A. Latar Belakang
Dalam era globalisasi, perkembangan teknologi sangatlah meningkat pesat.
Hal ini ditandai seberapa sering dan sebegitu mudah orang-orang dalam mengakses
web smartphone maupun pc mereka. Oleh karena itu, penting dari nya untuk dapat
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. Untuk membuat website yang demikian menarik, cepat
diakses dan responsive kita membutuhkan Bahasa pemrograman CSS (Cascanding
Style Sheets). CSS bukan Bahasa pemograman. Pada umumnya, CSS dipakai untuk
memformat tampilan halaman web yang dibuat dengan bajsa HTML dan XHTML.
CSS dapat juga mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna
tabel dan lain.lain.
Meskipun bukan suatu keharusah dalam membuat web, akan tetapi
menggunakan CSS akan memiliki kelebihan sendiri. Dengan desain halaman web
yang baik dan tepat akan membuat pengunjung (visitor) merasa nyaman dengan
tampilan (layout) halaman web tersebut dan dapat focus pada isi (content). Dalam
makalah ini akan di bahas tentang format style dan CSS.
B. Rumusan Masalah
Berdasarkan latar belakang di atas, dapat dirumuskan rumusan masalah dari
makalah ini sebagai berikut:
1. Apa yang dimaksud dengan CSS?
2. Apa tujuan penggunaan CSS dalam pembuatan web?
3. Bagaimana format style pada halaman web?
4. Apa konsep layout dalam halaman web dan elemen-elemen dasar dari sebuah
web?
5. Bagaimana jenis-jenis layout dalam halaman web?
6. Bagaimana konsep dan penulisan Script Stylesheet?
C. Tujuan Makalah
Makalah ini memiliki tujuan sebagai berikut:
1. Dapat menjelaskan pengertian dari CSS dan kegunaannya dalam pembunaan web.
2. Dapat memahami konsep layout dalam halaman web dan mengetahui elemen-
elemen dasar dari sebuah web.
3. Dapat menjelaskan jenis-jenis layout halaman web.
4. Dapat menjelaskan konsep dan penulisan Script Stylesheet.
 BAB II
Isi
A. Cascading Style Sheet (CSS)
Cascading Style Sheet atau disebut juga CSS sebagai salah satu dokumen website
yang bertujuan untuk mengatur gaya (style tampilan website). CSS merupakan sebuah
teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau
W3C pada tahun 1996. CSS bukanlah sebuah bahasa pemrograman, melainkan
sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan
lebih terstruktur, seragam, dan mudah dalam pengaturan saat pendesain sebuah
halaman web.
CSS dapat mengendalikan ukuran gambar, mengatur warna pada teks, mengatur spasi
antar karakter, memberi warna pada tabel, mengatur ukuran dan warna border, selain
itu CSS juga dapat mengubah huruf besar dan huruf kecil pada sebuah teks.
Penggunaan CSS dalam pembuatan web memberikan beberapa manfaat, diantaranya:
1. Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
2. Kode HTML lebih sederhana dan lebih mudah diatur.
3. Mampu berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
4. Mudah untuk mengubah tampilan hanya dengan mengubah file CSS saja.
5. Bisa digunakan dalam hampir semua jenis web browser.
B. File CSS
Setelah standarisasi CSS, internet explorer dan Netscape merilis browser terbaru yang
mendukung standar CSS. Berikut ini beberapa versi CSS.
a. CSS 1
CSS 1 berfokus pada pengaturan format dokumen HTML, seperti font, warna, text
attributes, posisi, dan pengaturan tepi.
b. CSS 2
CSS 2 berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan
printer, posisi konten, downloadable, font huruf, dan table layout.
c. CSS 3
CSS 3 berfokus pada dukungan tampilan desain website, animasi warna, sampai
animasi 3D. Selain itu CSS menunjang kompabilitas website dengan smartphone,
CSS math, CSS objek model, mendukung fungsi multimedia pada website, dan
transformasi 2D dan 3D.
C. Format Style pada Halaman Web
CSS sebagai sebuah bahasa style sheet yang digunakan dalam mengatur tampilan
dokumen. Dengan adanya CSS maka tampilan halaman yang sama akan memiliki format
yang berbeda. Sama halnya style dalam aplikasi pengolahan kata seperti Microsoft Word
yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images,
dan style lainnya untuk digunakan bersama-sama dalam beberapa berkas (file).
1. Konsep Layout dalam Halaman Web
Setiap halaman web memiliki posisi dan kesamaan tampilan (Layout), yang
berbeda hanya isi (content). Dengan keberadaan layout dan dengan tata letak
yang baik dapat membuat halaman lebih memadai dan seimbang sehingga
 enak dilihat dan mudah dibaca. Pada dasarnya, sebuah dokumen web
umumnya memiliki elemen-elemen berikut.
a. Elemen Header
Elemen ini berisi judul dan penjelasan lain dokumen. Elemen ini biasanya
diisi dengan olgo website, menu-menu global, ataupun nama halaman
yang desang ditampilkan.
b. Elemen Navigation
Elemen ini memberikan akses navigasi ke halaman-halaman lain dalam
web.
c. Elemen Sidebar
Elemen ini sebagai pendukung konten, dapat berupa pembantu navigasi
konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau
menu tambahan. Sidebar dapat berada di kiri atau kanan konten, bahkan
dikiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
d. Elemen Konten
Elemen ini sebagai isi utama dari dokumen. Pengguna biasanya datang ke
web untuk melihat teks yang berada pada bagian ini.
e. Elemen Footer
Elemen ini sebagai bagian penutup dari website, yang dapat berisi
informasi lain tentang website, seperti lisensi penggunaan, sitemap,
ataupun link ke website lain.
2. Jenis-Jenis Layout dalam Halaman Web (Frameset, Table, Div)
Rancangan web design (mockup web design) pada dasarnya menajdi
gamabran keserasian warna dan layout sesuai dengan konsep desin yang
dibayangkan.
a. Tag Frameset dan Atributnya
FRAMESET adalah tag HTML yang digunakan untuk menampilkan
bingkai-bingkai tersendiri pada dokumen HTML yang dapat membagi
halaman dokumen HTML menjadi kolom dan baris.
b. Tag Table dan Atributnya
Tag ini digunakan untuk membuat tabel pada dokumen HTML.
c. Tag Div dan Atributnya
DIV adalah tag HTML yang sebenarnya digunakan untuk memberikan
tanda batas suatu daerah dari sebuah rangkaian HTML (bisa berupa
tulisan, gambar, atau kode alinnya).
d. Model Layout
Model-model layput yang umum digunakan dalam mendesain suatu
halaman web, di antaranya sebagai berikut.
1) Layout Split
Navigasi atau daftar isi berada di bagian kanan dan kiri dari halaman
web.
2) Left Index
Navigasi atau daftar isi berada di bagian kiri halaman web.
3) Top Index
Navigasi atau daftar isi berada di bagian atas dari halaman web.
4) Bottom Index
 Nvigasi atau daftar isi berada di bagian bawah dari halaman web.
5) Alternating Index
Navigasi atau daftar isi berada di bagian kanan dan kiri halaman web
yang menampilkan grafik, foto, dan produk yang disertai dengan teks
berupa keterangan, harga , jumlah, dan lain-lain.
3. Konsep dan Penulisan Script Stylesheet
Berikut ini beberapa hal yang berhubungan dengan konsep dan penulisan
script stylesheet.
a. Style pada teks
Teks pada sebuah halaman web dapat diberikan style dalam kemasan CSS.
Pengaturan style tersebut meliputi properti pada bagian pewarnaan,
pemilihan font, spasi, dan lain-lain.
b. Style pada Multimedia
Secara mendasar, CSS dapat diterapkan pada elemen-elemen HTML
multimedia di antaranya gambar, background, video, dan audio.
c. Style pada Tabel
Beberapa hal yang berhubungan dengan style pada tabel adalah border,
model box, text-align pada tabel, lebar dan tinggi tabel, warna pada tabel,
serta padding tabel.
d. Style pada Formulir
Style CSS dapat digunakan di berbagai komponen input di dalam form.
Tampilan sebuah form akan lebih terlihat menarik apabila diterapkan CSS
di dalamnya. Penggunaan style CSS akan mengurangi beban halaman dan
konsumsi bandwidth.Beberapa hal yang beruhubungan dengan style apda
formular yaitu input text, elemen form, text field, radio button, dan check
box.

4. Penyisipan Stylesheet dalam Script HTML

Secara garis besar, terdapat 3 cara input kode CSS ke dalam HTML, yaitu
a. Metode Inline Style
Metode Inline Style adalah cara menginput kode CSS langsung ke dalam
tag HTML dengan menggunakan atribut style.
b. Metode Internal Style Sheet
Metode Internal Style Sheet (Embedded Style Sheets) digunakan untuk
memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman
HTML. Kekurangannya adalah jika memiliki beberapa halaman dengan
style sheets yang sama, anda harus membuat kode CSS pada masing-
masing halaman tersebut.
c. Metode External Style Sheet
Metode External Style Sheet digunakan untuk mengangkat kode CSS
tersebut ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari
halaman HTML.
 BAB III
PENUTUP
A. Kesimpulan
Tampilan sebuah halaman web akan lebih menarik apabila diterapkan CSS di
dalamnya. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh teks, warna
tabel, ukuran border, dan lain-lain. Setiap halaman web memiliki posisi dan kesamaan
tampilan (layout), yang berbeda hanya isinya (konten).
 DAFTAR PUSTAKA
Patwiyanto, Wahyuni S, Prasetyo SA. 2018. Pemrograman WEB dan Perangkat Bergerak.
Yogyakarta: Andi