Scribd
Unggah
316 tayangan

Modul Pemrograman Dasar Web Dan Internet

Dokumen ini memberikan penjelasan tentang materi pembelajaran Dasar Pemrograman Web dan Internet pada pertemuan pertama. Materi yang dibahas adalah penggunaan HTML di Adobe Dreamweaver CS. Tujuannya adalah agar siswa memahami perintah dasar HTML, dapat membuat tabel dan membuat beberapa halaman website sederhana. Dokumen ini juga memberikan contoh koding HTML dasar dan langkah-langkah pembuatan dokumen HTML menggunakan Dreamweaver.

Diunggah oleh

FAHMI TAUFIQ ZAIN, ST
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
316 tayangan

Modul Pemrograman Dasar Web Dan Internet

Dokumen ini memberikan penjelasan tentang materi pembelajaran Dasar Pemrograman Web dan Internet pada pertemuan pertama. Materi yang dibahas adalah penggunaan HTML di Adobe Dreamweaver CS. Tujuannya adalah agar siswa memahami perintah dasar HTML, dapat membuat tabel dan membuat beberapa halaman website sederhana. Dokumen ini juga memberikan contoh koding HTML dasar dan langkah-langkah pembuatan dokumen HTML menggunakan Dreamweaver.

Diunggah oleh

FAHMI TAUFIQ ZAIN, ST
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

MATA KULIAH : DASAR PEMROGRAMAN WEB DAN INTERNET Pertemuan ke-1 Materi : Menggunakan HTML di Adobe Dreamweaver CS

Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya

Indikator Keberhasilan: 1. Siswa dapat membuat beberapa halaman website sederhana 2. Siswa dapat membuat tabel dan pengaturannya 3. Siswa dapat membuat beberapa halaman website yang dilengkapi dengan hyperlink, image dan link-image

I.

Teori dasar

1.1. Hypertext Markup Language (HTML) Adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah Web Browser. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). HTML berupa kode-kode tag yang menginstruksikan web browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

Bentuk umum: <html> <head> <title> Letakkan judul situs di sini </title> </head> <body> Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. </body> </html>

Secara garis besar, terdapat 4 jenis elemen dari HTML: 1. Structural Tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan "Golf" sebagai teks tebal besar yang menunjukkan sebagai Heading 1 2. Presentational. Tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks. 3. Hypertext tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/">Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu), 4. Elemen widget, yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).
Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

1.2. Membuat dokumen HTML di dreamweaver Langkah-langkah : 1. Buka Dreamweaver CS 5. Akan Muncul Tampilan seperti dibawah ini

Gambar 1.1. Tampilan Awal ketika membuka adobe dreamweaver CS 5

2. Pilih File => New,

Gambar 1.2. membuat file baru di dreamweaver CS 5

Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

Gambar 1.3. Gambar 1 yang diperbesar

3. Pilih page Type HTML dengan Layout <none> kemudian tekan create, maka akan muncul tampilan seperti di bawah ini :

Gambar 1.4. Editor HTML 4. Masukan koding HTML pada layar utama sesuai dengan desain yang kita inginkan

Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

5. Setelah selesai memasukan koding, kita simpan file dengan cara memilih File => Save As

Gambar 1.5. Save As

6. Berinama file dengan diakhiri dengan ekstensi .HTML

Gambar 1.5. Ekstensi file .HTML

Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

3. Tag-tag dasar HTML

Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

II. PRAKTIKUM LANGKAH-LANGKAH PRAKTIKUM Latihan 1 1. Buka HTML di dreamweaver CS 2. Masukan koding di bawah ini
<html> <head> <title> Latihan Pertamaku </title> </head> <body bg color="#000000"> <p align="left"> Paragraf ini akan rata kiri<br> Paragraf ini akan rata kiri<br> <p> br digunakan untuk ganti baris <br><br> <b>Kalimat ini akan dicetak Bold </b> <br> <i>Kalimat ini akan dicetak Italic </i> <br> <b><i>Kalimat ini akan dicetak Bold dan Italic</i></b> <hr width="1000"><br> Perintah hr digunakan untuk membuat garis </body> </html>

3. Simpan dengan nama latihan1.html 4. Buka di browser anda.

Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

Latihan 2
<html> <head> <title> Latihan Pertemuan 2 </title> </head> <body bgcolor="#000000" text="yello"> <table border="1" align="center" width="80%"> <tr> <td colspan="2" align="center" height="100" bgcolor="#3A2BD1"> <font size="16" face="Arial">SITUSKU.COM </font><br> <hr width="500"> <br> <marquee direction="right">Terdepan Dalam Berita dan Gosip</marquee> </td> </tr> <tr valign="top"> <td width="200" height="450" bgcolor="green">Home</td> <td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br> Situsku.Com akan selalu konsisten dengan berita-berita terbaru darisegala penjuru Indonesia.<br><br> Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip artis dan kuliner di Indonesia. </td> </tr> </table> </body> </html>

Praktikum Dasar Pemrograman web dan internet

Fahmi, TZ,ST

Anda mungkin juga menyukai