Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tugas Desain Web

    Diunggah oleh

    Mufi
    7 tayangan6 halaman

    Judul Asli

    tugas desain web.docx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan6 halaman

    Tugas Desain Web

    Diunggah oleh

    Mufi

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    TUGAS : DESAIN WEB

    KELOMPOK 1.

    - Dede Wahyudin ( 21501053022)


    - Dwi Rudi Hermanto (21501053009)
    - M. Andhika Alfriansah (21501053043)

    Bagaimana mengerjakan list program menggunakan HTML dan menggunakan CSS??

    Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list
    (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered
    listdengan bulatan atau kotak.
    Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk
    list sendiri menggunakan tag <li>.

    <!DOCTYPE html>

    <html>

    <head>

    <title>penggunaan tag list </title>

    </head>

    <body>

    <h1>daftar belanjaan</h1>

    <ol>

    <li>minyak goreng</li>

    <li>sabun mandi</li>

    <li>deterjen</li>

    <li>shampoo</li>

    <li>obat nyamuk</li>

    </ol>

    </body>

    </html>
    Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

    <!DOCTYPE html>

    <html>

    <head>

    <title>penggunaan tag list </title>

    </head>

    <body>

    <h1>daftar belanjaan</h1>

    <ul>

    <li>minyak goreng</li>

    <li>sabun mandi</li>

    <li>deterjen</li>

    <li>shampoo</li>

    <li>obat nyamuk</li>

    </ul>

    </body>

    </html>
    Kemudian dengan menggunakan CSS kode CSS langsung ke dalam tag HTML dengan
    menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Contoh Inline Style CSS</title>

    </head>

    <body>

    <h2 style="background-color:black; color:white" >

    Text ini akan bewarna putih dan background warna hitam

    </h2>

    </body>

    </html>

    Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari
    atribut style ini adalah kode CSS yang ingin diterapkan.
    Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena kode CSS
    langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain
    terpisah dengan konten.

    - Metode Internal Style Sheets

    Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk
    memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML.
    Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag
    <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
    h2 {
    background-color:black;
    color:white;
    }
    </style>
    </head>
    <body>
    <h2>
    Text ini akan bewarna putih dan background warna hitam
    </h2>
    </body>
    </html>

    - Metode External Style Sheets

    Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa
    halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.
    Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah
    file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang
    membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
    Masih menggunakan contoh yang sama dengan internal style sheets, tahap pertama kita akan
    pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar. css
    Isi dari file belajar.css :

    h2 {
    background-color:black;
    color:white;
    }

    Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali ini, savelah
    pada folder yang sama dengan halaman HTML kita.
    Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke
    halaman HTML, yang pertama adalah menggunakan @import
    Contoh penggunaan @import CSS:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
    @import url(belajar.css);
    </style>
    </head>
    <body>
    <h2>
    Text ini akan bewarna putih dan background warna hitam
    </h2>
    </body>
    </html>

    Untuk metode @import external style sheets ini, kita menyisipkan @import
    url(belajar.css); pada tag <style>. Alamat pada bagian url bisa berupa alaman relatif (seperti:
    folderku/belajar.css) maupun absolut (seperti www.duniailkom.com/belajar.css).
    Cara input kedua external style sheets, adalah menggunakan tag <link>. Berikut contohnya:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Contoh Inline Style CSS</title>
    <link rel="stylesheet" type="text/css" href="belajar.css">
    </head>
    <body>
    <h2>
    Text ini akan bewarna putih dan background warna hitam
    </h2>
    </body>
    </html>

    Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang
    akan berisi alamat dari halaman CSS, dalam hal ini belajar.css
    Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling
    direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun
    dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman
    web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan
    halaman website, kita hanya butuh mengubah 1 file CSS saja.

    Anda mungkin juga menyukai