PWDPB BAB 4

-

 BAB 4 - STYLE PADA HALAMAN WEB

A. STYLE PADA HALAMAN WEB

CSS adalah sebagai sebuah bahasa style sheet yang digunakan dalam mengarur tampilan dokumen

1. Konsep layout pada halaman web

    Fungsi memiliki desain layout yang tepat, yaitu memudahkan pengunjung Web berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah, dan informatif. Sehingga pengnjung Web merasa bahwa setiap halaman yang ia kunjungi merupakan satu kesatuan. 
    
    Desain layout pada suatu halaman web meliputi pembagian tempat pada halaman yaitu pengaturan jarak spasi, pengelompokan teks dan grafik, serta penekanan pada suatu bagian tertentu. Jadi pada dasarnya sebuah web memiliki element element sebagai berikut: 
  •  Element header, element jenis ini berisi judul dan penjelasan lain dokumen.
  •  Element navigation, element jenis ini memberikan navigasi ke halaman-halaman lain dalam web.
  •  Element sidebar, element jenis ini dapat berupa pembantu navigasi konten, daftar konten lain, iklan, atau menu tambahan.
  •  Element konten, element jenis ini sebagai isi utama dari dokumen web.
  •  Element footer, element jenis ini sebagai penutup dari website seperti informasi penggunaan, sitemap, ataupun link ke website lain.

2.  Jenis-jenis Layout dalam halaman web 

    a. Tag frameset dan atributnya

    b. Tag table dan atributnya 

    c. Tag Div dan atributnya 

    d. Model layout          

    pengertian model layout adalah model yang umum digunakan dalam mendesain            suatu halaman web diantaranya 

    • Layout Split 

    • Left index 

    • Top index 

    • Bottom index 

    • Alternating inde

3. Konsep dan Penulisan Script Stylesheet

a. Style pada Teks

b. Style pada multimedia

c. Styel pada Tabel.

d. Style pada Formulir

4. Penyisipan Stylesheet dalam Script HTML


 Metode Inline Style

 Adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style. 

Metode Internal Style Sheets

 Digunakan untuk memisahkan kode CSS dari tag HTML, namun tetap dalam satu halaman HTML.

Metode External Style Sheets

Digunakan untuk mengangkat kode CSS ke dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML.

5. File CSS


CSS 1

Berfokus pada pengaturan format dokumen HTML, seperti cont, warna, text attributes, posisi, dan pengaturan tepi.

CSS 2

Berfokus pada pengaturan format dokumen untuk kebutuhan cetak dengan printer, posisi konten, downloadable, dont huruf, dan table layout. 

CSS 3

Berfokus pada dukungan tampilan desain web, animasi warna, sampai animasi 3D.

6. Penyisipan Stylesheet dalam Script HTML

     Secara garis besar, terdapat 3 cara input kode CSS ke dalam HTML, yaitu metode inline style, internal stylesheet,dan external stylesheet. Dari ketiga cara tersebut, yang sering digunakan adalah metode External Stylesheets dengan menggunakan @import/<link>.

a. Metode Inline Style
        Metode Inline Style adalah cara menginput kode CSS langsung kedalam tag HTML dengan menggunakan atribut Style. Berikut ini contoh penggunaan Metode Inline Style CSS

<!DOCTYPE html>
<html>
<head>
            <title>Implementasi Inline Style CSS</title>
</head>
<body>
    <h2 style="background-color: red ; color:blue">
    Text ini akan berwarna biru dan bacground berwrna merah
    </h2>
</body>
</html>

b. Metode Internal Style
        Metode Internal Style digunakan untuk memisahkan kode CSS dari tag HTML, Namun tetap di halaman HTML.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Website Maskapai Penerbangan

-
Gambar
        Halo teman-teman! Kali ini saya akan sharing langkah-langkah membuat web store E-tiket pesawat menggunakan PHP native. Semoga blog ini dapat menjadi referensi untuk saya dan juga kalian. Oke langsung saja masuk ke tutorial nya: Link Bootstrap <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> 1. Membuat DataBase di bawah ini adalah gambaran ERD (Entity Relationship Diagram) yang menyambungkan ketiga buah tabel:  "tb_penerbangan", "tb_order", dan "tb_user".    a. Tabel "tb_penerbangan"     T
Baca selengkapnya

PWdPB bab 3

-
Gambar
BAB 3  APERSEPSI  Di dalam situs web biasanya akan terlihat teks yang wamanya berbeda, bergaris bawah, atau berada dalam kotak (tombol). Inilah yang disebut hyperlink atau link. Jika bagian ini diklik, Anda akan dibawa lainnya. Anda akan mengetahui bahwa teks tersebut aktif (link) karena jika melewatkan pointer mouse di atasnya, pointer itu berubah menjadi pointing finger. Pranala atau hipertaut (Inggris: hyperlink) adalah sebuah acuan dalam dokumen hiperteks(hypertext) ke dokumen yang lain atau sumber lain, seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan. 1. Konsep Hyperlink dalam HTML  Link berguna untuk menghubungkan antardokumen HTML. Link merupakan singkatan dari hyperlink, yang identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersa
Baca selengkapnya

PWDPB Part2

-
Gambar
  Tugas membuat tabel dengan menggunakan variabel php. Untuk menyimpan suatu data ke dalam variabel  harus memberikan nilai ke variabel Contoh Penulisan Script/Syntax seperti dibawah ini : $nama_variabel = nilai_variabel; Contoh Variabel ny: <?php $nama = "Muhammad ikhwan fadillah" ; $kelas = "XI-RPL" ; $alamat = "Jakarta Utara" ; $tanggallahir = "25-12-05" ; $tempatlahir = "Jakarta" ; $hobi = "Mendengarkan Musik, Bermain Badminton,berenang,voli,bermain game" ; $Jurusan = "Rekayasa Perangkat Lunak" ? > Dan ini jika gabungkan dengan codingan tabel nya: <?php $nama = "Muhammad ikhwan fadillah" ; $kelas = "XI-RPL" ; $alamat = "Jakarta Utara" ; $tanggallahir = "25-12-05" ; $tempatlahir = "Jakarta" ; $hobi = "Mendengarkan Musik, Bermain Badminton,berenang,voli,bermain game" ; $Jurusan = "Rekayasa Perangkat Lunak" ? > < table
Baca selengkapnya