Style halaman web dan Client side scripting

 

BAB 4 
STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING


A. 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.

1. Konsep Layout dalam Halaman Web

        Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik,mudah,dan informatif sehingga pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Pada dasarnya,sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut.

a. Elemen Header

b. Elemen Navigation

c. Elemen Sidebar

d. Elemen Konten

e. Elemen Footer


2. Jenis-Jenis layout dalam halaman web ( frameset,table,div)

    a. Tag Frameset dan Atributnya

    Frameset adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai tersendiri pada dokumen HTML.

    b. Tag Table 

    Tag ini digunakan untuk membuat tabel pada dokumen HTML.

    c. Tag Div 

     Tag Div tidak dapat berdiri sendiri dalam penggunaannya,Tag Div harus disandingkan dengan css supaya dapat menghasilkan bentuk design layout yang lebih menarik. Div adalah tag HTML yang sebenarnya digunakan untuk memberikan tanda batas suatu daerah dari sebuah rangkaian HTML ( tulisan,gambar,atau kode lainnya).

    d. Model Layout

    Model-model layout yang umum digunakan dalam mendesain suatu halaman web,diantaranya sebagai berikut.

        - Layout Split

        - Left Index

        - Top Index

        - Bottom Inex

        - Alternating Index


3. Penyisipan Script Client Side dalam HTML

    Dengan menambahkan atau menyisipkan javascript pada sebuah halaman HTML,halaman bisa menjadi lebih dinamis dan interaktif. Berikut ini beberapa perintah yang digunakan untuk penyisipan javascript dalam HTML.

    a. Tag <script>

        Digunakan untuk mendefinisikan sebuah client-side script.

    b. Tag <nonscript>

        Digunakan untuk alternatif jika javascript yang dibuat tidak bisa ditampilkan, misalnya karena browser yang digunakan tidak mendukung.


B. Client Side Scripting dalam Pemrograman Web

     CSS adalah salah satu dokumen website yang bertujuan untuk mengatur gaya(style) tampilan website. CSS sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur,seragam dan mudah dalam pengaturan saat pensdesain sebuah halaman web. 


C. Client Side Scripting pada Halaman Web Interaktif

     Bahasa pemrograman client side adalah bahasa yang berjalan pada client atau komputer user sendiri,dimana sebuah website bahasa client side akan berjalan di browser masing-masing komputer.

    a. Perintah - perintah dasar dalam aplikasi client side perogramming

        - Penulisan kode javascript dengan embed

        - Penulisan kode javascript inline

        - Penulisan kode javascript external 


4. Macam-macam Aplikasi Client Side Programming

    a. Javascript

    b. VBScript


5. File CSS

        Setelah standarisasi CSS, Internet Explore dan Netscape merilis browser terbaru yang mendukung standar CSS. Berikut ini beberapa versi CSS :

a. CSS 1 (berfokus pada pengaturan format HTML, seperti fint, warna, teks atribut, posisi, dan pengaturan tepi)

b. CSS 2 (berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan printer, posisi konten, downloadable, font huruf, dan table layout)

c. CSS 3 (mendukung penuh CSS 2 dengan beberapa penambahan tanpa adanya pengurangan)


D. Penyisipan Stylesheet dalam script HTML

       Secara garis besar, terdapat 3 cara input kode CSS kedalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.    

      a. Metode Inline Style

          Metode Inline adalah cara menginput kode CSS langung ke dalam tag HTML dengan menggunakan atribute style.

      b. Metode Internal Style Sheets

          Metode Internal Style Sheets digunan untuk memisahkan kode CSS dari tag HTML, namun tetap dalamsatu halaman HTML, Tag style ini harus berada pada bagian <head> dan halaman HTML.

       c. Metode External Style Sheets

           Metode External Style Sheets digunakan untuk mengangkat kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepnuhnya dari halaman HTML.


E. Sintaks CSS

       Sintaks CSS dituliskan dengan : Selector {properti: value}. Selector merupakan nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal maupun style eksternal, bagian elemen HTML yang akan ditunjuk untuk mengatur style, dan dapat berupa class dan ID.

      a. Pengaturan bentuk teks (decoration)

          Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengatur dekorasi teks adalah selector {text-decoration:nilai text-decoration}. Nilai dari text-decoration dapat berupa overline, line trough, underline, dan none yang berarti tanpa dekorasi.

     b. Pengaturan spasi antarkata (word-spacing)

         Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkata. Sintaks CSS nya; selector{word-spacing:nilai spasi;}. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.

     c. Pengubahan huruf besar dan huruf kecil dari sebuah teks (text-transform)

      Digunakan untuk menetukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text-indent adalah: Selector{text-transform:nilai text transform}.

     d. Pengaturan warna pada teks(color)

         CSS dapat menggunakan nilai warna sebagai berikut:
  • Nilai HEX, misalnya "#ff0000"
  • Nilai RGB, misalnya "rgb(255,0,0)"
  • Nama dari warna tersebut, misalnya "red"
     e. Pengaturan spasi antarkarakter (letter-spacing)

        Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antarkarakter atau huruf. Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Format penulisan CSS untuk pengaturan jarak (spasi) antarkarakter atau huruf adalah: Selector{letter-spacing:nilai spasi;}.





 

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Tampilan Seperti Telegram Dengan HTML & CSS

Gambar
 Membuat Tampilan Seperti Telegram Dengan HTML & CSS 1. Membuat Halaman Index             Dengan Source Code Seperti Dibawah ini :               <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TELEGRAM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="header"> <img src="assets/list.svg" alt="menu" class="menu"> <input type="text" name="search" placeholder="Search"> </div> <div class="content"> <div class="card"> <img src="assets/person-circle.svg" alt="person" class="profile"> <h4>Jonathan</h4...
Baca selengkapnya