Pemrograman Web I Tugas Pertemuan 7 "Implementasi CSS"

NAMA : FITRI NAJILA
NPM : 19402012
KELAS : SI-XW41/19
PEMROGRAMAN WEB I
TUGAS 1 PERTEMUAN 7 “IMPLEMENTASI CSS”
Berikut Langkah-langkah dalam Mengimplementasikan FORM

1. Pertama-tama membuka NotePad
2. Setelah notepad sudah tersedia lalu kita mula membuat selector element css terlebih
dahulu dengan format Coding di notepad sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML denganCSS</title>
<style>
h1 { color: red; } p { color: blue; }
</style>
</head>
<body>
<h1>Welcome</h1>
<h1>Selamat Datang di Perpustakaan SDN 1 Cihampelas </h1>
<p>Selamat berliterasi</p>
</body>
</html>
Save dengan file name Implementasi css.html dengan Type All Type
Setelah itu klik dua kali html yang telah dibuat maka akan terbuka di browser sebagai berikut
3. Kemudian dengan cara Sector Class dengan coding di notepad sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<style>
.merah{ color: red; }
</style>
</head>
<body>
<h1>WELCOME</h1>
<h1 class="merah"> Perpustakaan SDN 1 Cihampelas </h1>
<p class="merah"> Selamat berliterasi </p>
</body>
</html>
4. Cara Menggabungkan Kolom dalam Tabel dengan coding di notepad sebagai berikut :
 Atribut Colspan
<!DOCTYPE html>
<html>
<head>
<style>
#judul-utama{ color:red; } #subjudul{ color:blue; }
</style>
</head>
<body>
<h1 id="judul-utama">WELCOME!</h1>
<h2 id="subjudul">Perpustakaan SDN 1 Cihampelas </h2>
<p>Selamat berliterasi </p>
</body>
</html>
5. Cara Menggabungkan Selector dengan coding dinotepad sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<style>
h1, p { color:#333; text-align:center; }
</style>
</head>
<body>
<h1>Selamat Datang di Perpustakaan SDN 1 Cihampelas </h1>
<p>Selamat berliterasi</p>
</body>
</html>
TUGAS 2 PERTEMUAN 7 “ADOBE DREAMWEAVER”
1. Create New
Membuat new project, dengan membuat new project, maka kamu bisa
membuat website dengan lebih lancar.
2. Masukkan nama website yang diinginkan
Setelah membuat new project, sekarang saatnya kamu memilih nama website yang

paling cocok untuk kamu. Untuk website bersifat profesional, lebih baik tentukan lebih
awal sebelum membuat website di Dreamweaver karena pada dasarnya,
nama website akan menjadi representasi dari halaman yang kamu ciptakan sendiri.
Untuk nama yang hanya dipakai sebagai bahan lucu-lucuan atau lelucon saja sebaiknya
dihindari karena malah memberikan kesan tidak profesional. Pilih nama website yang bisa
kamu pertanggungjawabkan serta memiliki arti yang jelas sekaligus mendalam bagi kamu
sendiri. Dengan melakukan hal itu, maka website yang dibuat dari Dreamweaver akan lahir
secara baik dan layak untuk dilihat oleh masyarakat luas pengguna internet.
3. Jangan lupa untuk save project
Setelah memilih nama, kamu jangan lupa loh untuk melakukan save project secara
berkala. Mengapa demikian? Supaya project website terbaru kamu ini tidak hilang atau
malah tidak tersimpan karena kamu lupa melakukan salah satu langkah paling penting di
dalam membuat project website. Ingat, daripada menyesal lebih baik sibuk di awal.
4. Membuat table
Sebelum melanjutkan ke langkah berikutnya, kita perlu membuat tabel terlebih dahulu.
Kamu bisa mencari menu Insert. Di dalam menu insert itu, ada option Table. Dan kamu
harus mengisi Rows = 1 dan Columns = 1. Jangan lupa untuk mengisi bagian Table Width =
100%.
Setelah tabel sudah ada di layar komputer kamu, kamu bisa masuk ke dalam tabel itu
dan membuat tabel kedua. Kegunaan dari tabel kedua adalah untuk membuat layout
website yang nantinya akan kamu miliki. Kamu juga harus melakukan hal yang sama seperti
tabel pertama. Masukkan Rows = 4 dan Columns = 2. Untuk Table Width = 900 pixel.
Setelah kedua tabel ini sudah selesai, maka sudah tercipta layout website milik kamu
sendiri. Sekarang saatnya berurusan dengan halaman pertama, header, background, menu
dan yang lainnya.
5. Buat halaman baru
Sudah save project dan membuat tabel? Berarti sekarang saatnya membuat halaman
pertama dari website kamu. Untuk membuat halaman pertama ini, coba pikirkan terlebih
dahulu desain yang ingin dipakai. Kamu bisa cek beberapa referensi di internet. Bisa dari
artikel-artikel yang membahas desain website hingga referensi dari website-website yang
kamu sukai.
Kamu juga bisa memasukkan beberapa desain grafis di dalam halaman
utama website kamu sehingga memberikan kesan yang mendalam bagi yang melihatnya
secara langsung ketika website sudah jadi dan diluncurkan di dunia maya.
6. Buat background website
Setelah membuat halaman pertama, pastinya kamu perlu memiliki background website.
Untuk background website ini, lebih baik memiliki desain yang sama untuk semua halaman
sehingga kamu tidak perlu bersusah payah dalam mengaturnya serta bisa memberikan
tema yang sama untuk website kamu.
7. Buat menu website
Jika background website sudah jadi, sekarang masuk ke menu website. Untuk
menu website, ini menjadi bagian yang sangat penting dari keberhasilan
sebuah website agar bisa diterima oleh para pengunjung. Sebelum kamu membuat menu,
sebaiknya tentukan terlebih dahulu menu-menu apa saja yang mau kamu masukkan di
dalamnya sehingga kamu tidak perlu kebingungan lagi untuk menentukan mana yang
paling tepat serta bisa menjadi persembahan yang bagus untuk pengunjung website kamu
nantinya.
Untuk melakukannya, pilih menu Insert lagi dan klik Spry. Setelah itu ada menu Spry
Menu Bar. Kamu bisa menyesuaikannya seperti ingin menu dengan bentuk horizontal
(mendatar) atau vertical (menurun). Kalau melihat website kebanyakan, lebih banyak yang
menggunakan menu bentuk horizontal.
8. Sesuaikan dengan keinginan kamu
Sekarang giliran membuat berbagai ornamen penting seperti
memasukkan copywriting hingga gambar-gambar yang bisa menunjang
keindahan website kamu. Di dalam Adobe Dreamweaver sendiri ada beberapa aplikasi
tambahan yang bisa kamu maksimalkan seperti Extract (mengubah desain website dari
Photoshop menjadi kode web), Full Support HTML5 (untuk penggunaan HTML seperti
video, audio dan yang lainnya), CSS Designer (visual editing untuk memperindah website)
dan Live View (untuk penambahan menu yang lebih beragam).

Pemrograman Web I Tugas Pertemuan 7 "Implementasi CSS"

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemrograman Web I Tugas Pertemuan 7 "Implementasi CSS"

Diunggah oleh

Hak Cipta:

Format Tersedia

NAMA : FITRI NAJILA

TUGAS 1 PERTEMUAN 7 “IMPLEMENTASI CSS”

Berikut Langkah-langkah dalam Mengimplementasikan FORM

.merah{ color: red; }

<h1 class="merah"> Perpustakaan SDN 1 Cihampelas </h1>

<p class="merah"> Selamat berliterasi </p>

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

<h1>Selamat Datang di Perpustakaan SDN 1 Cihampelas </h1>

Setelah membuat new project, sekarang saatnya kamu memilih nama website yang

Anda mungkin juga menyukai