HTML dan CSS for web design.pdf - Google Drive

Pengantar Website – Muatan Lokal Kelas XII

i

Kata Pengantar Puji dan sukur kami panjatkan kehadirat Allah SWT karena atas berkah, rahmat dan kuasanyalah buku Muatan Lokal SMA Budhi Warman II ini dapat diselesaikan. Buku ini disusun sebagai salah satu bahan ajar dalam pelaksanaan kegiatan belajar mengajar mata pelajaran Muatan Lokal SMA Budhi Warman II, Jakarta Dalam buku ini, disajikan materi pembelajaran Muatan Lokal secara sederhana, efektif dan mudah dimengerti. Symbol, gambar, diagram dan grafik disajikan untuk mempermudah peserta didik mengerti materi yang sedang dipelajari. Disusun sesuai dengan standard kompetensi dan kompetensi dasar mata pelajaran Muatan Lokal, peserta didik diharapkan bisa menggunakan buku ini sebagai panduan dalam mengerjakan tugas-tugas yang diberikan oleh guru pembimbing. Akhirnya, kami menyampaikan terimakasih kepada semua pihak yang telah membantu sekolah menerbitkan buku ini.

Jakarta, Agustus 2012

Yogi Adi Nugroho, S.Kom Pengantar Website – Muatan Lokal Kelas XII

i

Daftar Isi Kata Pengantar…………………………………………………….. i Daftar Isi…………………………………………………………… ii Bab 1 Pengantar Website...………………………………………... 1 1.1 Dasar Pengembangan Website…………………………. 2 1.2 Batasan-batasan desain halaman website……………….6 1.3 Pemilihan bahasa situs…………………………………. 7 Bab 2 Dasar HTML…….…………………………………………. 9 2.1. Struktur HTML……………………..…………………. 11 2.2 Aturan Penulisan HTML……………………………….. 13 2.3 Tag HTML……...……………………………………… 14 2.4 Penambahan Objek..…………………………………… 20 2.5 Tabel……..……...……………………………………… 21 2.6 Link antar dokumen….………………………………… 25 Bab 3 Pengantar CSS..……………………………………………. 27 3.1 Struktur CSS…………………………………………… 28 3.2 Aturan penulisan CSS…………………..……………… 29 3.3 Selector Class dan ID…………………..……………… 31 Bab 4 Identifikasi Dreamweaver.…………………………………. 33 4.1 Membuka Dreamweaver CS 3………………………… 34 4.2 Mengenal area kerja Dreamweaver..…………………… 36 4.3 Pengaturan penyimpanan website..…………………….. 38 4.4 Membuat dan menyimpan dokumen HTML.………….. 41 4.5 Menutup dan membuka kembali halaman website..…… 46

Bab 5 Membangun Website..………………………………………48 5.1 Pembuatan Table……………..………………………… 49 5.2 Desain tampilan Layout………………...……………… 52 5.3 Memasukan elemen website…………………………… 61 Pengantar Website – Muatan Lokal Kelas XII

ii


iii

BAB 1 PENGANTAR WEBSITE

 Dasar Pengembangan Website

 Pengantar website


1

1.1. Dasar pengembangan Website Desain halaman web ditujukan kepada kebutuhan untuk memberikan

informasi

kepada

pembaca/pengunjung

situs

berdasarkan kriteria-kriteria dan batasan-batasan media halaman web. Dua diantara batasan halaman web yang dimaksud pertama adalah bahwa halaman web disajikan di sebuah monitor komputer yang merupakan media elektronis yang menghasilkan radiasi elektromagnetis dengan luas tampilan yang terbatas yang dijalankan disebuah platform komputer dengan dukungan perangkat lunak browser tertentu. Kriteria kedua yang perlu diperhatikan adalah akses kepada situs untuk sebagian besar pengunjung membutuhkan biaya akses internet yang relatif masih cukup mahal untuk kebanyakan orang Indonesia dan berjalan dengan kecepatan yang lambat.

Dua kriteria atau batasan media halaman web menyebabkan proses desain halaman web ditujukan kepada kemudahan mengakses informasi dan daya tarik untuk setiap unsur situs. Faktor kemudahan mengakses informasi yang sesuai bagi pengunjung untuk menuju informasi yang dibutuhkan serta tidak membutuhkan waktu yang lama, sedangkan faktor daya tarik ditujukan agar pengunjung bersedia meluangkan waktu untuk membaca informasi yang disediakan situs. Apabila suatu situs tidak memiliki dua faktor diatas, dapat dipastikan situs menjadi membosankan dan tidak banyak pengunjung yang mau mengakses Pengantar Website – Muatan Lokal Kelas XII

2

situs tersebut.

Sebuah halaman web dapat dikategorikan menjadi halaman web statis atau halaman web dinamis. Halaman web statis adalah halaman web yang tidak mengalami perubahan isi dari waktu ke waktu. Jenis ini adalah halaman situs yang sesuai untuk memberi informasi yang tetap, seperti peraturan atau pengumuman lainnya. Halaman web dinamis adalah halaman yang mengalami perubahan dari waktu ke waktu, baik sekedar bentuk penampilan atau perubahan isi dari halaman web tersebut.

Untuk membuat halaman web statis, kita dapat sepenuhnya mengandalkan kepada HTML(HyperText Marking Language), dan agar lebih menarik dapat disertai dengan sejumlah gambar. Sedangkan untuk halaman web dinamis, kita tidak cukup mengandalkan HTML, tetapi harus didukung dengan bahasa pemrograman dan basis data untuk web. Tentu saja mengembangkan web dinamis, jauh lebih komplek dibanding mengembangkan halaman web statis. Untuk mengembangkan sebuah halaman web sederhana

yang

sepenuhnya

berbasis

HTML,

kita

cukup

menggunakan program editor teks sederhana seperti notepad. Namun beberapa perangkat lunak terintegrasi telah dikembangkan untuk membuat halaman web atau mengembangkan sebuah situs yang jauh lebih kompleks. Dua diantaranya yang paling populer adalah Macromedia Dreamweaver.


3

Gambar 1.1 Aplikasi Notepad dan Dreamweaver Selain

HTML,

terdapat

beberapa

standar,

bahasa

pemrograman dan basis data untuk mengembangkan halaman web. Standar yang dimaksud diantaranya adalah CSS(Cascading Style Sheet) yang digunakan untuk standarisasi atribut htm! agar tampilan web lebih menarik dan XML( extended Markup Language) standar untuk mengelola data internet. Seluruh file, kode prorgram, basis data serta unsur-unsur lain sebuah web disimpan di sebuah web server, yaitu komputer server yang memiliki alamat tertentu pada sebuah jaringan atau internet. Pengantar Website – Muatan Lokal Kelas XII

4

Web Client, komputer pengguna yang akan mengakses halaman web, melalui web browser akan memanggil alamat web server untuk menampilkan isi dari web.

Bahasa pemrograman yang khusus atau populer dalam pengembangan web adalah PHP, ASP, Java, atau pemrograman script seperti Javascript dan VBScript. PHP dan ASP adalah contoh jenis bahasa pemrograman web sisi server(server-side programming}. Sedangkan Javascript dan VBScript adalah contoh jenis bahasa pemrograman sisi k!ien(Client-Side Programming). Server Side Progsmming melakukan proses di server dan server hanya mengirimkan hasil akhir dalam bentuk html ke web client(web browser). Sedangkan client side programming mengharuskan web server mengirimkan seluruh kode program ke web client. Selanjutnya Web browser akan menerjemahkan program yang dikirimkan server dan menampilkan hasil akhirnya di layar. Server side programming memiliki fasilitas dan kemampuan yang jauh lebih baik ketimbang client side programming. Bahasa pemrograman PHP, beserta basis data MySQL dan Apache web server adalah pasangan

pengembangan

yang

paling

popuper.

Ketiganya

merupakan aket yan bersifat open source dan gratis. Untuk lingkungan Windows, ketiganya disatukan ke dalam paket Apache XAMPP.


5

1.2. Batasan-Batasan Desain Halaman Web Kreativitas desain web dihasilkan dari kemampuan desainer mengatasi batasan-batasan halaman web. Pemahaman batasanbatasan web dalam berkreasi akan menghasilkan haiaman web yang menjadikan mengakses halaman web adalah sesuatu hal yang mudah dan menyenangkan. Batasan-batasan tersebut misalnya: Platform user yang beragam: •

Komputer Macintosh menampilkan huruf lebih kecil dari PC

•

PC mempunyai font default yang berbeda denga Macintosh

•

Unix dengan X windowsnya tidak mempunyai font default.

Browser user yang beragam: •

Netscape menguasai JavaScript, Microsoft selalu satu langkah tertinggal.

•

Microsoft

mempunyai

Jscript

dan

VBScript

dan

ActiveX, semuanya tidak berjalan di Netscape •

Tidak ada browser satu pun yang menguasai Java

•

Microsoft tidak mengharuskan menggunakan penutup pada kebanyakan tag HTML. Netscape mengharuskannya.

•

Browser memiliki versi, versi yang lebih baru mendukung teknologi yang lebih baru.

•

Tidak setiap teknologi web didukung oleh seiuruh browser.

Untuk mengatasi batasan-batasan diatas, desainer biasa memilih satu dari dua buah solusi. a. Membuat sesederhana

halaman

web

dengan

teknologi

yang

mungkin, sehingga dapat diakses oleh


6

pengunjung dari berbagai platform dan browser. Konsekuensi dari pilihan ini adalah halaman web yang dihasilkan dari sisi tapilan tidak terlalu menarik. b. Dengan dukungan web programming, buat beberapa versi halaman web untuk beberapa variasi teknologi, platform dan browser. Konsekuensi dari pilihan ini adalah pengembangan menjadi jauh lebih kompleks.

1.3. Pemilihan Bahasa Situs Faktor yang harus diperhatikan juga adalah pemilihan bahasa dalam situs. Meledaknya jumlah situs di internet dan masih mahalnya biaya akses internet menyebabkan pengunjung situs tidak akan berlama-lama membaca setiap tulisan yang ada di situs. Bahasa yang tidak baik akan memberikan opini kepada pengunjung bahwa situs tersebut tidak banyak memberi manfaat dan segera beralih ke situs lain, oleh sebab itu bahasa yang digunakan dalam situs sebaiknya memenuhi kriteria-kriteria sebagai berikut : 1. Singkat, memilih kalimat yang langsung kepada pokok permasalahan dan menghindari penjelasan bertele-tele. 2. Padat,

memberikan

informasi

yang

lengkap,

tidak

menggantung, menerapkan 5 W(what, when, why, where, who, how) dan membuang kata-kata mubazir. 3. Sederhana, demngam kalimat tunggal dan sederhana mudah dipahami, bukan kalimat majemuk yang panjang, rumit dan kompleks dan sulit dipahami.


7

4. Lugasm mampu menyampaikan pengertian atau makna informasi secara langsung dengan menghindari bahasa yang berbunga-bunga. 5. Menarik, menggunakan pilihan kata yang masih hidup, tumbuh, dan berkembang, menghindari kata-kata yang sudah mati. 6. Jelas, informasi yang disampaikan dengan mudah dapat dipahami

oleh

khalayak

umum(pengunjung).

Struktur

kalimatnya tidak menimbulkan penyimpangan/pengertian makna yang berbeda, menghindari ungkapan bersayap atau bermakna ganda(ambigu). Menggunakan kata-kata yang bermakna denotatif. 7. Hal lain yang perlu diperhatikan adalah penentuan ragam berdasar situasi. Ragam bahasa disesuaikan dengan sifat situs dan target pengunjung situs. Situs pemerintah tentu saja menggunakan ragam bahasa formal, sebaliknya situs "anak gaul" menggunakan ragam bahasa non formal. Satu jenis ragam yang lain adalah ragam semiformal atau yang dikenal dengan istilah ragam populer, yaitu ragam


8

BAB 2 Dasar HTML


 Dasar HTML


9

Gambar 2.1 Langkah membuat website sederhana Gambar diatas menunjukkan pada kalian bagaimana membuat halaman web sederhana. Halaman web yang kalian buat ini menggunakan bahasa yang disebut HTML (Hypertext Markup Language). HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser disimpan dalam ekstensi .htm atau .html. Untuk menulis HTML tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan text editor sederhana seperti Notepad (pada Microsoft Windows). Beberapa editor menyediakan fitur-fitur tambahan seperti syntax coloring (memberi warna pada kode-kode HTML) dan code completion (melengkapi secara otomatis Pengantar Website – Muatan Lokal Kelas XII

10

kode yang akan dituliskan). Saat ini telah banyak perangkat lunak berbasis GUI yang sangat membantu dalam pembuatan halaman-halaman HTML. Macromedia Dreamweaver dan Microsoft Frontpage merupakan dua nama yang cukup populer di platform Microsoft Windows.

2.1.

Struktur HTML HTML adalah bahasa yang disisipkan (embedded language) pada

dokumen dengan memberi tanda tertentu yang disebut tag. Tag merupakan aturan penulisan kode yang ditulis dengan diawali tanda lebih kecil dan di akhiri dengan tanda lebih besar (). Browser akan menentukan tampilan teks atau dokumen berdasarkan tag yang digunakan. Dokumen HTML secara umum akan terdiri dari dua bagian yaitu Header dan Body

Gambar 2.3 Dengan tag

a) Header Header biasanya berisi berbagai macam keterangan tentang dokumen seperti title (judul dokumen), posisinya dalam sekumpulan halaman web dan hubungannya dengan dokumen lain. Bagian ini ditandai dengan tag …. . Tag ini tidak memiliki Pengantar Website – Muatan Lokal Kelas XII

11

atribut. Didalam tag head kita dapat meletakkan beberapa tag lain seperti tag title dan tag link.

Gambar 2.2 Tanpa tag

Gambar 2.2Dengan tag b) Body Body adalah bagian dari dokumen HTML tempat dimana kita meletakkan isi dari dokumen. Bagian ini ditandai dengan tag dan diakhiri dengan . Apapun yang berada diantara dua tanda ini disebut sebagai body content. Dokumen HTML yang paling sederhana mungkin hanya berisi sebaris atau dua baris teks saja tanpa format apapun). Pada dokumen yang lebih kompleks, body content bisa berisi teks yang terformat, gambar, tabel atau bahkan animasi yang rumit. Pengantar Website – Muatan Lokal Kelas XII

12

Gambar 2.4 Penggunaan tag

2.2.

Aturan Penulisan HTML Penulisan tag HTML mengikuti aturan-aturan umum berikut ini: a) Setiap tag memiliki nama yang spesifik, terkadang diikuti opsi-opsi yang disebut atribut. Baik nama maupun opsi harus berada dalam tanda < >. Contoh :

Home

Pada contoh diatas, tag yang digunakan adalah sedangkan atribut untuk tag adalah href dan title. Baik nama tag ataupun atributnya harus berada di dalam tanda < >, ditulis setelah tag a seperti pada contoh diatas.

b) Sebagian besar tag berpasangan. Contoh penulisan untuk tag yang

berpasangan

adalah

sebagai

berikut

:

…. Contoh : Paragraf ---- tag “title” berpasangan Cetak Tebal ---- tag “b” berpasangan


13

Pada tag yang berpasangan seperti pada contoh diatas, adalah tag awal dan adalah tag akhir. Perhatikan tanda / pada tag akhir.

c) Nama tag dan atribut-nya tidak bersifat case sensitive. Penulisan Cetak Tebal memberikan hasil yang sama dengan Cetak Tebal.

d) Penulisan atribut suatu tag diletakkan setelah nama tag. Jika ada lebih dari satu atribut maka digunakan spasi untuk memisahkannya. Nilai dari atribut ditulis setelah tanda sama Contoh : (=). dengan Teks Baru Teks Baru

Pada contoh diatas, terlihat bahwa atribut size dari tag font memiliki nilai 5 sedangkan atribut face memiliki nilai “verdana”.

2.3.

Tag HTML Ada banyak sekali Tag HTML yang tersedia, baik itu

berhubungan dengan deskripsi dokumen atau yang berhubungan dengan format tampilan dokumen. Tidak semuanya akan dibahas dalam modul ini. Berikut ini akan dibahas beberapa tag yang biasa dipakai dalam format tampilan dokumen. a) Heading  ………. Heading adalah sekumpulan kata yang menjadi judul atau Pengantar Website – Muatan Lokal Kelas XII

14

subjudul dalam sebuah dokumen HTML. HTML menyediakan enam tingkatan heading, dimana heading level 1 () a dalah yang terbesar dan heading level 6 () adalah yang terkecil. Perhatikan gambar dibawah ini :

Gambar 2.5 Penggunaan tag heading b) Paragraph 
……….
Paragraf dalam HTML dibuat dengan tag
. Tag ini akan membuat baris baru dengan menyisipi satu baris kosong. Penulisan isi paragraf diapit oleh
….
. Pengaturan posisi paragraf dapat dilakukan dengan atribut align yang diikuti dengan posisi yang diinginkan, yaitu left untuk rata kiri, center untuk rata tengah dan right untuk rata kanan.

Gambar 2.6 Penggunaan tag Paragraph Pengantar Website – Muatan Lokal Kelas XII

15

c) Line Break (Enter) 
……. Line break digunakan untuk menuliskan teks pada baris berikutnya. Line break dibuat dengan tag tunggal
. Tag ini akan membuat baris baru tanpa memberi baris kosong sebagaimana pada tag

Gambar 2.7 Penggunaan tag Line Break
d) List HTML menyediakan 3 cara untuk membuat daftar atau list, yaitu 

Ordered list 
…..
Ordered list digunakan untuk membuat daftar dimana setiap bagian memiliki nomor secara berurutan. Ordered list dimulai dengan tag dan diakhiri dengan tag , sedangkan setiap bagiannya digunakan tag
tanpa tag penutup. Secara default, tag ini menggunakan angka sebagai pengurut listing, namun kalian bisa mengubahnya dengan merubah nilai atribut type. Nilai-nilai atribut yang diijinkan dapat dilihat pada Tabel dibawah ini :


16

Gambar 2.8 Penggunaan tag Ordered List


Unordered list 
……….
Unordered list digunakan untuk membuat daftar yang disajikan tanpa nomor urut, melainkan dengan secara default dengan tanda bulatan utuh (bullet). Tanda ini bisa dirubah dengan merubah nilai atribut type untuk unordered list. Nilainilai atribut yang diijinkan dapat dilihat pada tabel 13.1. Unordered list dimulai dengan tag
dan diakhiri dengan tag
, sedangkan setiap bagiannya digunakan tag
tanpa tag penutup.


17

Gambar 2.9 Penggunaan tag Unordered List



Definition list  ……… Definition list membuat daftar definisi mirip seperti tampilan pada kamus, dengan definisi suatu istilah agak menjorok ke kanan. Tiga buah pasang tag yang terkait dengan definition list adalah: -

... untuk menyatakan tempat bagi daftar definisi.

-

... untuk menyatakan tempat bagi istilah yang akan didefinisikan.

-

... untuk menyatakan tempat bagi definisi dari istilah.

Gambar 2.10 Penggunaan tag Definition List Pengantar Website – Muatan Lokal Kelas XII

18

e) Font  ………. HTML menyediakan fasilitas pengaturan huruf yang akan ditampilkan dalam dokumen. Pengaturan ini dilakukan dengan tag berpasangan dan . Tag ini memiliki beberapa atribut untuk mengatur ukuran, jenis dan warna huruf yang digunakan. 

Atribut size untuk mengatur ukuran huruf, dimana nilai 1 untuk huruf terkecil dan nilai 7 untuk huruf terbesar.



Atribut face untuk mengatur jenis huruf yang diinginkan, dimana nilainya berupa string nama font seperti Arial, Tahoma dan sebagainya.



Atribut color untuk mengatur warna teks yang dikehendaki, dimana nilainya dapat diisi dengan dua cara dengan menyebut nama warna dalam bahasa Inggris seperti red, blue dan green atau dengan menggunakan nilai RGB (Red Green Blue) seperti FF000 untuk merah.

Gambar 2.11 Penggunaan tag Font


19

2.4.

Penambahan Objek

a) Horizontal Ruler  Untuk mempercantik tampilan halaman HTML, kita dapat menambahkan garis horizontal dengan tag . Tag mempunyai atribut size untuk menentukan ketebalan garis, atribut width untuk menentukan lebar garis, Atribut align untuk menentukan letak teks dalam garis, dan atribut noshade untuk mengatur agar garis tidak disertai bayangan.

Gambar 2.12 Penggunaan tag horizontal Ruler b) Image  Dokumen HTML dapat diperindah dengan menyertakan gambar pada halaman web yang dibuat. Tag dapat digunakan untuk memanggil dan menampilkan gambar pada halaman web. Sintaks penulisan tag adalah: Atribut src digunakan untuk menentukan sumber file gambar yang akan ditampilkan. Atribut alt berfungsi untuk memberi tulisan pengganti apabila gambar tidak dapat ditampilkan. Pengantar Website – Muatan Lokal Kelas XII

20

Untuk pengaturan gambar yang lebih baik, tag img menyediakan beberapa atribut, antara lain: 

Atribut align untuk mengatur penempatan teks pada gambar.



Atribut border untuk memberi bingkai pada gambar.



Atribut height dan width untuk mengatur tinggi dan lebar gambar.

Contoh dibawah

ini memperlihatkan penggunaan atribut-atribut

tersebut.

Gambar 2.13 Penggunaan tag Image

2.5.

Tabel 

……….
Tabel dalam HTML dibuat dengan menggunakan tag awal

dan tag penutup . Tag ini memiliki beberapa bagian penting, seperti dapat dilihat pada keterangan dibawah ini. Tag …………… …………… ……………

Fungsi Membuat judul table Membuat judul kolom Membuat baris pada suatu table


21

……………

Membuat sebuah sel data

Gambar 2.14 Penggunaan tag Tabel Tabel diatas adalah tabel sederhana dengan dua buah kolom dan 3 buah baris (perhatikan ada 3 buah pasangan tag … . Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut. Kita dapat menambahkan garis dengan menggunakan atribut border pada tabel.

Gambar 2.15 Penggunaan tag Tabel Pengantar Website – Muatan Lokal Kelas XII

22

Pada Gambar diatas, terlihat tabel yang tampilannya lebih baik daripada Gambar sebelumnya. Ada beberapa atribut yang kita tambahkan pada tabel yaitu : 

Atribut width untuk mengatur lebar tabel pada halaman. Kita dapat menggunakan satuan persen (%) atau pixel (px).



Atribut border untuk memberikan garis pada tabel. Nilai untuk atribut ini dari dimulai dari 0 yang berarti tidak ada garis. Semakin besar angka semakin tebal garis.



Atribut bgcolor untuk menambahkan warna latar belakang pada tabel.



Atribut cellpadding untuk menentukan jarak antara teks dan tepi kiri sebuah sel.



Atribut cellspacing untuk menentukan jarak bagian sel terhadap tepi dalam bingkai tabel.

Gambar 2.16 Attribute pada Tabel


23

Seperti halnya perangkat lunak pengolah kata, pada HTML kita dapat menggabungkan dua atau lebih sel menjadi satu buah sel. Untuk menggabung baris dapat digunakan atribut rowspan dan untuk menggabung kolom dapat digunakan atribut colspan. Contoh penggunaannya dapat dilihat pada gambar dibawah ini.

Gambar 2.17 Penggabungan Tabel


24

2.6.

Link antar Dokumen  ………. Link merupakan pautan untuk membuka atau memanggil

halaman web atau file tertentu. Link merupakan tag yang sangat penting dalam penggunaan HTML, karena disinilah letak perbedaan antara dokumen HTML dengan dokumen teks yang lain. Link dapat dibuat dengan memberi perintah tag anchor . Anchor memiliki beberapa atribut, diantaranya HREF yang berfungsi untuk membuat link ke dokumen HTML tertentu dan NAME yang berfungsi untuk memberi tanda/nama titik tertentu pada dokumen HTML yang sama.

Gambar 2.17 Pengguanaan tag Link Atribut href dapat digunakan untuk memanggil halaman web pada sistem yang sama (pada satu komputer). Pada kasus ini kita tinggal menuliskan lokasi dimana halaman yang akan kita panggil berada. href dapat juga kita gunakan untuk memanggil halaman lain diluar sistem kita atau memanggil situs-situs lain di internet. Caranya dengan mengetikkan alamat URL situs yang akan kita panggil. Contoh : Halaman Google Halaman Detik dot com


25

Catatan :


26

BAB 3 PENGANTAR WEBSITE


 Mengenal CSS


27

CSS (Cascading Style Sheet) adalah suatu tag (penanda) yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan CSS ini, kalian dapat dengan mudah mengubah secara keseluruhan warna dan tampilan website kalian.

3.1.

Struktur CSS Tag CSS terdiri dari dua bagian, yakni selector dan declaration.

Selector berfungsi untuk memberi tahu browser bahwa pada elemen html mana aturan CSS akan diterapkan sedangkan declaration marupakan pengaturan CSS yang akan diterapkan, declaration terdiri atas property dan value.

Beberapa contoh sintaks property pada CSS Property background-color

Value / red,

blue,

Fungsi green, Mengubah warna atau

background-image

yellow, dll

border

thin, dotted, double, Membuat garis tepi / dll

gambar background

border


28

font-family

Arial,

comic

sans Mengubah jenis teks

serinf,

times

new yang akan ditampilkan

romans, dll text-align

center,

inherit,

right

3.2.

left, Mengatur posisi

dari

text

Aturan Penulisan CSS

Penulisan tag CSS dapat dilakukan dengan dua cara, yaitu :  Internal Style Sheet (Disatukan dalam dokumen HTML) o Menggunakan tag  External Style Sheet (Terpisah dari dokumen HTML) o Menggunakan tag

1. Internal Style Sheet (Disatukan dalam dokumen HTML)  Cara 1 Bila menggunakan tag , tag CSS diletakan diantara tag dari dokumen HTML. Contoh : Contoh :
Contoh penggunaan CSS dengan Internal CSS


29

 Cara 2 Selain cara diatas, kalian juga dapat menambahkan kode CSS langsung kedalam tag HTML. Contoh : Contoh :
Contoh penggunaan CSS dengan External CSS

2. Menggunakan tag Bila nantinya kalian memiliki banyak halaman web dan ingin menggunakan CSS, tentunya akan sangat merepotkan bila harus menuliskan tag CSS satu persatu di setiap halaman web yang kalian buat. Untuk memudahkan hal ini, kalian dapat menggunakan tag agar kalian tidak perlu lagi mengetik ulang setiap tag CSS untuk diterapkan di setiap halaman. Kalian hanya harus memanggil dokumen yang berektensi .css pada bagian website. Contoh : Contoh :


30

3.3.

Selector Class dan ID CSS dapat menyatukan elemen-elemen style secara bersamaan

dalam sebuah kelas selector untuk kemudian kita panggil pada sintaks HTML dengan menggunakan Class atau ID.  Selector Class Selector Class ditandai dengan tanda

 (titik)

Contoh :
Tulisan ini berwarna merah

Perhatikan tanda

(titik) didepan kata merah dan

penulisan kata class setelah tag paragraph


31

 Selector ID Selector ID ditandai dengan tanda #  (Pagar) Contoh :
Tulisan ini berwarna merah

Perhatikan tanda # (pagar) didepan kata merah dan penulisan kata id setelah tag paragraph


32

BAB 4 Identifikasi Dreamweaver

 Menggunakan Perangkat Lunak Pembuat Website

 Pengenalan Dreamweaver


33

Dreamweaver CS 3 merupakan web editor untuk membuat dan mendesain website dengan mudah dan cepat. Kemampuannya dalam membuat website tanpa menuliskan tag-tag HTML satu-persatu menjadikan program ini merupakan salah satu web editor favorit banyak pengguna web. Dreamweaver menggunakan metode klik dan drag untuk mempermudah kita dalam membuat website dengan cepat, mudah, menarik dan interaktif. Selain

mudah

digunakan

dalam

membuat

dan

mendesain

web,

Dreamweaver CS3 juga telah menambah fleksibilitas-nya terhadap bahasa pemograman web dan dapat berintegrasi pada beberapa software lainnya.

4.1. Membuka Dreamweaver CS 3 Untuk membuka dreamweaver CS 3, lakukan langkah dibawah ini : No 1

Langkah

Keterangan

Click tombol start pada taskbar windows kalian.

2

Klik menu All programs 

Adobe Master Collection CS 3 

Adobe Dreamwaver CS3


34

3

Tampilan awal jendela Dreamweaver akan ditampilkan.

4

Setelah

itu,

click

pilihan HTML pada bagian Create New.

5

Dreamweaver

akan

menampilkan

area

kerja baru.


35

4.2. Mengenal Area Kerja Dreamweaver Tampilan dreamweaver tidak banyak mengalami perubahan dari versi-versi sebelumnya, bila kalian sudah terbiasa menggunakan dreamweaver versi lama, kalian tidak akan mengalami kesulitan untuk beradaptasi dengan tampilan dreamweaver CS 3 ini.

Nama Insert Bar

Keterangan Adalah kumpulan menu yang digunakan untuk me-masukkan sebuah objek atau fungsi lainnya ke

dalam

jendela

dokumen.

Insert

bar

mempunyai tujuh menu di dalamnya yaitu common, layout, forms, data, spry, text, dan favorites.


36

Document Toolbar

Adalah tempat menampilkan file-file dokumen yang Anda buat berupa jendela dokumen (berbentuk

tab).

Document

Toolbar

mempunyai tiga buah tab yang dapat membantu Anda mendesain web dengan mengubah tampilan dari jendela dokumen, yaitu Code, Split dan Design. Panel Groups

Adalah

kumpulan

panel-panel

pelengkap

lainnya dan berfungsi untuk mengorganisir, mengatur serta pelengkap website yang akan Anda buat. Contoh : Panel CSS, berfungsi untuk mempercantik tampilan web yang dibuat Documents Windows Atau biasa disebut jendela dokumen, berfungsi sebagai tempat meletakkan objek-objek atau komponen untuk membuat dan merancang website. Property Inspector

Berfungsi untuk mengetahui serta mengubah properti dari sebuah objek. Contoh : untuk penulisan sebuah teks, anda dapat mengubah jenis font, warna dan ukuran dari teks tersebut.


37

4.3. Pengaturan penyimpanan website Sebelum melangkah lebih jauh, kalian perlu melakukan penyetingan penyimpanan website agar nantinya halaman-halaman website yang kalian buat bisa terorganisir dengan baik. Lakukan langkah dibawah ini.

 Langkah 1, Membuat Folder Penyimpanan No 1

Langkah Buka

Keterangan Windows

Explorer

2

Buat folder baru pada drive

D:\

hardisk

komputer kalian, lalu berikan nama folder tersebut sesuai dengan nama

yang

kalian

inginkan

3

Selesai


38



Langkah 2, Pengaturan Dreamweaver Site

No 1

Langkah

Keterangan

Buka Aplikasi Dreamweaver kalian.

2

Click pilihan Dreamweaver Site

3

Pada jendela site definition, ketikan nama website kalian, setelah itu click next. Kalian tidak perlu mengisi HTTP Address.


39

4

Langkah berikutnya, pilih “No, I don’t want to use a server technology”, lalu click next.

5

Pada langkah berikutnya, setting seperti gambar disamping.

ketikan alamat folder yang telah kalian buat pada langkah 1, membuat folder penyimpanan.

6

Pada pilihan “how do you connect to your remote server ?” pilih pilihan none.

7

Click done


40

4.4. Membuat dan menyimpan dokumen HTML Setelah membuat pengaturan pada dreamweaver site, sekarang kita akan membuat dokumen baru lalu menyimpannya.  Membuat dokumen baru No

Langkah

1

Buka Aplikasi

Keterangan

Dreamweaver kalian. 2

Click HTML pada bagian Create New

3

Jendela dokumen baru akan ditampilkan.

4

Pada document toolbar, click Tab Design

5

Ketik teks

Selamat datang di website saya.

seperti

Saya adalah siswa Budhi Warman 2 Jakarta. Saat ini, saya sedang membuat website dengan software Adobe Dreamweaver CS3, dan ini adalah halaman pertama saya. Dreamweaver mudah untuk digunakan..... Seorang manusia pernah berkata "Barangsiapa yang tidak pernah melakukan kesalahan, maka dia tidak pernah mencoba sesuatu yang baru". (Albert Einstein)

disamping :


41

6

Blok teks “Selamat Datang di website saya”

7

Lihat ke bagian property inspector set bagian format dengan “Heading 3” dan ubah Align menjadi rata kanan.

8

Nantinya, layar akan berubah menjadi seperti disamping ini :


42

9

Lakukan bloking teks dimulai dari “Saya adalah siswa….” Sampai “(Albert Einstein)”.

10 Pada bagian Property Inspector, ubah format menjadi Paragraph, lalu set align dengan rata kanan-kiri . 11

Nantinya, layar akan berubah menjadi seperti disamping ini :

12 Terakhir, blok teks “Barangsiapa yang tidak pernah melakukan kesalahan, maka dia tidak pernah mencoba sesuatu yang baru”.


43

13 Pada bagian Property Inspector, ubah format teks menjadi Italic. 14 Nantinya, layar akan berubah menjadi seperti disamping ini :


44

 Menyimpan dokumen No 1

Langkah

Keterangan

Click File  Save

Atau tekan ctrl + s

2

Click Icon My Computer, pilih driver D:\

lalu klik dua kali pada folder yang kalian buat sebelumnya 3

Pada file name, tuliskan nama kalian. Setelah itu klik

Click Save

tombol save 4

Tekan tombol F12 pada keyboard kalian untuk melihat website yang kalian buat Pengantar Website – Muatan Lokal Kelas XII

45

4.5. Menutup dan Membuka Kembali Halaman Web Setelah kalian membuat halaman baru pada website kalian, sekarang kita akan menutup halaman yang telah kita buat tadi lalu mencoba untuk membukanya kembali untuk di edit. Lakukan hal dibawah ini. No 1

Langkah

Keterangan

Click windows close pada halaman kerja yang akan ditutup.

2

Untuk membuka halaman web yang ingin kalian edit, pada halaman awal Dreamweaver, Click icon folder open pada pilihan Open a Recent Item.


46

3

Pada kotak dialog open, pilih halaman web yang ingin kalian edit, lalu click open.

4

Halaman yang diedit akan ditampilkan


47

BAB 5 Membangun Website


 Membangun Website


48

Pada modul ini, kalian akan membangun sebuah website dengan menggunakan Dreamweaver CS3. Beberapa hal yang akan kalian pelajari pada modul ini yaitu sebagai berikut : -

Pembuatan Tabel

-

Mendesain tampilan layout

-

Memasukan elemen website seperti link, gambar, teks dan hal-hal lainnya.

-

Mengenal panel dreamweaver.

5.1. Pembuatan Tabel Tabel adalah bagian yang cukup penting dalam pembuatan website, karena tabel digunakan untuk tata letak sebuah website. Pada modul sebelumnya, kalian sudah mempelajari cara membuat tabel dengan menggunakan HTML. Sekarang, kalian akan membuat tabel dengan bantuan software Dreamweaver CS3. Untuk membuat tabel dalam Dreamweaver CS3, ikuti langkah dibawah ini : No

Langkah

Keterangan

1

Buatlah sebuah halaman kerja HTML baru.

2

Pada menu insert bar, aktifkan tab Common, lalu klik Tabel untuk menampilkan kotak dialog tabel.


49

3

Pada kotak dialog tabel, isi kotak dialog tersebut dengan settingan Rows : 3, Columns : 2, Table Width : 800 Pixels dan Border Thickness : 1 Pixels.

4

Click Ok.

5

Dremweaver akan membentuk tabel seperti disamping: Untuk memudahkan langkah berikutnya, saya memberikan nomor kolom agar tabel diatas lebih mudah dipahami.

6

Klik kotak TI, lalu pada property tabel, isi property W dengan 200. Hal ini akan membuat lebar kolom T1, T3 dan T5 berukuran 200 pixel.


50

7

Blok kotak T1 dan T2 dengan menekan tombol ctrl (tahan) kemudian klik kotak T1 dan T2, sehingga kotak T1 dan T2 ter-blok.

8

Pilih menu Modify  Table  Marge Cells sehingga tabel T1 dan T2 bisa digabungkan (marge cells).

9

Lakukan hal yang sama pada tabel T5 dan T6, sehingga nantinya tabel akan menjadi seperti gambar dibawah ini.

10

Masuk ke tab code, lalu klik di tag .

11

Ubah property align dengan


51

settingan center. Save halaman kerja yang telah kalian buat dengan nama “index”

12

pada folder yang telah kalian buat

5.2.

Desain Tampilan Layout. Setelah membuat tabel, langkah berikutnya yang akan kita

lakukan yaitu membuat desain untuk tampilan website dari tabel yang telah kita buat pada bagian A modul ini. Tabel yang telah kita buat pada bagian A akan dibagi menjadi beberapa section / bagian, yaitu sebagai berikut : Nama Header

Keterangan Merupakan bagian atas dari website. Pada bagian ini, kita akan meletakan gambar yang merupakan identitas dari website yang akan kita buat, bisa berupa logo ataupun teks yang di ikuti dengan gambar background.

Body

Merupakan bagian yang berisi navigasi dari website yang akan kita buat. Navigasi website standard biasanya berisi Home | Tentang Kami | Hubungi Kami.

Content / Bagian ini adalah bagian utama dari website, karena pada Pengantar Website – Muatan Lokal Kelas XII

52

Isi

bagian inilah kita akan meletakan segala informasi yang akan ditampilkan di website kita.

Footer

Pada bagian ini biasanya berisi Copyright dari website.

Setelah keempat section / bagian website tersebut dimasukan kedalam tabel, tampilannya akan tampak seperti gambar dibawah ini


53

1

Bagian Header Langkah pertama, kita akan membuat header dari website. Header yang akan dibuat terdiri dari warna background dan text. Ikuti langkah dibawah ini :

No 1

Langkah

Keterangan

buka file index.html.

2

Pastikan kalian ada pada tab Design.

3

Klik kotak Header Click kotak Header Pengantar Website – Muatan Lokal Kelas XII

54

4

Ubah settingan property dengan settingan seperti gambar dibawah ini :

5

Ketik teks di bagian header, tulis [nama kalian]. Contoh : “Yogi Adi Nugroho”.

6

Save halaman kalian dengan menekan tombol Ctrl (tahan) + S atau melalui menu File  Save


55

2

Bagian Menu Langkah kedua, kita akan membuat menu / navigasi website.

Menu yang akan kita buat akan berisi link “| Home | Tentang Kami | Hubungi Kami | ”. Ikuti langkah dibawah ini : N

Langkah

Keterangan

o 1

Klik kotak menu Click kotak Menu

2

Ubah settingan property menjadi seperti gambar dibawah ini :

3

Ketik “Home”, “Tentang Kami”, dan “ Hubungi Kami” sehingga nantinya kotak menu akan menjadi seperti gambar dibawah ini.

Tampilannya akan tampak seperti gambar disamping

4



56

3

Bagian Content Setelah membuat header dan menu, sekarang kita akan membuat bagian utama dari website kita, content. Ikuti langkah-langkah dibawah ini :

No 1

Langkah

Keterangan

Klik kotak content /

Click kotak Content

isi website. 2


3

Ketikan teks seperti gambar dibawah ini : Selamat datang di website saya [Tulis kata-kata yang kalian inginkan disini, bebas]


57

5

Tampilan website akan menjadi seperti gambar dibawah ini :

6



58

4

Bagian Footer Terakhir, kitaakan membuat bagian footer website. Ikuti langkah-langkah dibawah ini :

No

Langkah

1

Klik kotak

Keterangan

footer. Click kotak Footer 2


3

Klik menu Insert  HTML  Special Characters  Copyright untuk menuliskan simbol © (copyright) pada bagian footer.


59

4

Tuliskan nama kalian setelah simbol ©.

5

Tampilan website akan menjadi seperti gambar dibawah ini :

6



60

5.3.

Memasukan Elemen Website

Elemen website terdiri dari 3 bagian, yaitu : 1. Format Text 2. Link 3. Objek website

1. Format Text Format text digunakan untuk mengatur tampilan content / berita website. Dalam HTML, terdapat beberapa format yang dapat kita gunakan untuk mengatur tampilan content / berita, diantaranya yaitu : -

Format teks Bold, Italic.

-

Paragraf

-

Blockquote

-

Preformatted

-

Heading

-

Listing

-

Definition List

-

Penyingkatan kata

-

Karakter khusus


61

Untuk mengaktifkan menu format text pada dreamweaver, klik tab text pada insert bar, kemudian pilih tag yang ingin kalian gunakan dengan mengklik icon yang tertera pada tab text.

2. Link Link digunakan untuk mengarahkan pengunjung ke halaman yang telah kita tentukan. Sekarang, kita akan membuat link untuk menu-menu yang telah kita buat pada tahap desain tampilan layout. Lakukan langkah-langkah dibawah ini : N

Langkah

Keterangan

o

Bab 1

Dasar pengembangan website

49

1

buka file index.html

2

Perhatikan pada bagian menu, blok teks Home

Blok menu Home

3

Isi link pada property dengan alamat home.html.

4

Lakukan hal yang sama pada teks Tentang Kami dan Hubungi Kami. Untuk tentang kami, isi link dengan alamat tentang_kami.html dan untuk hubungi kami, isi link dengan alamat hubungi_kami.html.

Bab 1


50

5

Click menu File

 Save As

6

Buka folder tempat kalian menyimpan file index.html, Pada file name, tulis nama home lalu klik tombol Save

Bab 1


51

Simpan di folder yang sama dengan file index.html Simpan dengan nama home

7

Clik kembali menu File  Save As

8

Buka folder tempat kalian menyimpan file index.html, Pada file name, tulis nama tentang_kami lalu klik tombol Save

Bab 1


52

Simpan di folder yang sama dengan file index.html Simpan dengan nama tentang_kami

9

Clik kembali menu File  Save As

10

Buka folder tempat kalian menyimpan file index.html, Pada file name, tulis nama hubungi_kami lalu klik tombol Save

Bab 1


53

Simpan di folder yang sama dengan file index.html Simpan dengan nama hubungi_kami

11

Buka folder kalian menggunakan windows explorer, bila langkah yang lakukan benar, pada folder kalian terdapat tiga (3) file baru, yaitu home.html, tentang_kami.html dan hubungi_kami.html File yang baru dibuat

Bab 1


54

Suggest Documents

Html & Css

Read more

HTML and CSS - Google Sites

Read more

HTML and CSS Web Standards Solutions - Web Standardistas

Read more

879+ Online Read HTML and CSS; Web Design For ... - WordPress.com

Read more

879+ Online Read HTML and CSS; Web Design For ... - WordPress.com

Read more

Free Download HTML and CSS; Web Design For ... - WordPress.com

Read more

[EBOOKS] Web Design with HTML CSS JavaScript and ... - Google Sites

Read more

Read PDF Web Design with HTML, CSS, JavaScript ... - Google Sites

Read more

[Download]PDF Web Design with HTML, CSS ... - Google Sites

Read more

[PDF] Web Design with HTML, CSS, JavaScript and ... - Google Sites

Read more

Download Web Design With HTML, CSS, JavaScript ... - Google Sites

Read more

ePub Download Web Design with HTML, CSS ... - Google Sites

Read more

[PDF] Download Web Design with HTML, CSS ... - Google Sites

Read more


Read more


Read more


Read more

Download [PDF] Web Design with HTML, CSS ... - Google Sites

Read more

PDF Download Web Design with HTML, CSS ... - Google Sites

Read more

Web Design with HTML, CSS, JavaScript and jQuery ... - Google Sites

Read more

PdF Web Design with HTML, CSS, JavaScript and ... - Google Sites

Read more


Read more


Read more

PDF Download Web Design with HTML, CSS ... - Google Sites

Read more

Read Online PDF] Web Design with HTML, CSS ... - Google Sites

Read more

Report "HTML dan CSS for web design.pdf - Google Drive"

Your name

Email

Reason

Description

Copyright © 2025 M.MOAM.INFO. All rights reserved.
| About Us | Privacy Policy | Terms of Service | Help | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close