Scribd Logo
Unggah

Selamat datang di Scribd!

  • Link Tugas Pertemuan Ke-7 CSS

    Diunggah oleh

    Fahmi Frances
    9 tayangan19 halaman
    19402014 - FAHMI AZI PERMANA - 19402014

    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
    19402014 - FAHMI AZI PERMANA - 19402014

    Hak Cipta:

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

    Link Tugas Pertemuan Ke-7 CSS

    Diunggah oleh

    Fahmi Frances
    19402014 - FAHMI AZI PERMANA - 19402014

    Hak Cipta:

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

    Tugas Pertemuan Ke-7 CSS

    Nama : Fahmi Azi Permana


    Kelas : SI XK 41 / 19
    NPM : 19402014
    1. Langkah Pertama masukan coding pada notepad

    Dokumen yang disematkan file style.css

    • <!DOCTYPE html>

    • <html>

    • <head>

    • <title>HTML dengan CSS</title>

    • <link rel="stylesheet" type="text/css" href="style.css" />

    • </head>

    • <body>

    • <h1>Selamat Datang, Orang Orang terpilih </h1>

    • <p>Selamat Datang di frances company </p>

    • </body>

    • </html>

    Lalu save dalam format .html


    Lalu jika sudah buka file nya , maka hasilnya akan tampak seperti ini
    2. Langkah Pertama masukan coding pada notepad

    Dokumen dengan CSS di dalamnya:

    • <!DOCTYPE html>

    • <html>

    • <head>

    • <title>HTML dengan CSS</title>

    • <style>

    • h1 { text-align: center; color: lightsteelblue; }

    • </style>

    • </head>

    • <body>
    • <h1>Selamat Datang, Mahasiswa PIKSI/h1>

    • <p>Selamat belajar Pemrograman WEB</p>

    • </body>

    • </html>

    <!DOCTYPE html>

    • <html>

    • <head>

    • <title>HTML dengan CSS</title>

    • </head>

    • <body>

    • <h1 style="text-align:center; color:lightsteelblue;">Selamat

    Datang, Mahasiswa PIKSI</h1>

    • <p>Selamat belajar Pemrograman WEB</p>

    • </body>

    • </html>

    2. lau simpan file dengan format .html

    3. lalu jika sudah silahkan bua fila yang sudah di save tadi
    1. pada langkah ini seperti biasa kita harus memasukan coding

    Selector Element

    • <!DOCTYPE html>

    • <html>

    • <head>

    • <title>HTML dengan CSS</title>

    • <style>

    • h1 { color: red; }

    • p { color: blue; }

    • </style>

    • </head>

    • <body>

    • <h1>Welcome</h1>

    • <h1>Selamat Datang, Mahasiswa PIKSI </h1>

    • <p>Selamat belajar Pemrograman WEB</p>

    • </body>

    • </html>

    2.lalu jika sudah silahkan save dengan format ,html


    3. lalu jika sudah hasilnya akan tampak seperti ini
    1. pada langkah pertama silahkan masukan coding di notepad

    Selector class

    • <!DOCTYPE html>

    • <html>

    • <head>

    • <title>HTML dengan CSS</title>

    • <style>

    • .merah { color: red; }


    • </style>

    • </head>

    • <body>

    • <h1>Welcome</h1>

    • <h1 class="merah">Selamat Datang, Mahasiswa PIKSI</h1>

    • <p class="merah">Selamat belajar Pemrograman WEB</p>

    • </body>

    • </html>

    2. pada langkah ke dua silahkan save dalam format .html

    3. disini silahkan buka file yang sudah di save tadi


    1. Pada langkah pertama silahkan buka notepad dan masukan coding nya

    Selector id

    • <!DOCTYPE html>

    • <html>

    • <head>

    • <title>HTML dengan CSS</title>

    • <style>

    • #judul-utama { color:red; }
    • #subjudul { color:blue; }

    • </style>

    • </head>

    • <body>

    • <h1 id="judul-utama">Welcome!</h1>

    • <h2 id="subjudul">Selamat Datang, Mahasiswa PIKSI</h2>

    • <p>Selamat belajar Pemrograman WEB</p>

    • </body>

    • </html>

    2. pada langkah ke dua save dalam format .html


    3. pada langkah ini silahkan buka filenya
    1. pada langkah awal silahkan buka notepad dan masukan coding nya

    Menggabung Selector

    • Kita dapat mengenakan style yang sama kepada berbagai elemen,

    dengan memisah antar selector dengan tanda koma (,).

    • <!DOCTYPE html>

    • <html>

    • <head>
    • <title>HTML dengan CSS</title>

    • <style>

    • h1, p { color:#333; text-align:center; }

    • </style>

    • </head>

    • <body>

    • <h1>Selamat Datang, Mahasiswa PIKSI</h1>

    • <p>Selamat belajar Pemrograman WEB</p>

    • </body>

    • </html>

    2. lalu save dalam format .html


    3. lalu hasilnya akan tampak seperti ini
    TUGAS 2
    1. Pertama-tama membuka Star Window lalu Klik All Program dan Pilih Adobe Dreamwever

    2. Berikut cara singkat Membuat Situs Baru di Adobe Dreamweaver Buka Site -> New Site pada
    dashboard Adobe Dreamweaver CC Anda lalu jendela akan muncul.
    Langkah pertama yang perlu dilakukan adalah menamai website Anda dan menyimpannya dalam satu
    folder. Cara ini dapat membantu Anda untuk mengelola file dan mempermudah Anda untuk melakukan
    proses unggah. Jika Anda ingin memasukkan gambar ke situs Anda, klik Advanced Settings -> Local Info
    untuk melakukannya. Folder gambar akan dibuat dalam folder situs.
    3. Klik Save jika sudah selesai.

    4. Selanjutnya cara membuat Membuat File Home Page di Adobe Dream Weaver - Anda akan
    mendapatkan lembar kerja kosong. Tapi, Anda bisa mendapati file situs di bagian panel kanan atas.
    Sekarang, Anda dapat membuat homepage dari nol. - Buka File -> New lalu pilih New Document. Pilih
    HTML sebagai tipe dokumen lalu klik Create. Anda tidak harus memberi judul dokumen.
    Anda akan diarahkan kembali pada lembar kerja dan lembar kerja ANda akan berwarna putih dengan
    beberapa baris kode HTML. Sebenarnya, lembaran itu merupakan tampilan website Anda secara live.
    Simpanlah file HTML sebagai index.html, dan letakkan dalam folder situs.

    Sekian dari saya , apabila kurang dipahami


    mohon untuk dimaafkan …

    Anda mungkin juga menyukai