Mengenal Software Web Design II

Mengenal Software Web Design II - Hai Sobat ALAMSYAH029, Pada artikel yang anda baca kali ini dengan judul Mengenal Software Web Design II, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mengenal Software Web Design II
link : Mengenal Software Web Design II

Dasar-dasar HTML

a. Tujuan Kegiatan Pemelajaran

1) Peserta diklat dapat mengenali obyek-obyek web dan tag-tag HTML dalam pembuatan halaman-halaman web.

2) Peserta diklat dapat mengenali fitur-fitur pengelolaan file halaman web.

3) Peserta diklat dapat melakukan kombinasi tag-tag HTML dengan obyek-obyek lain untuk membangun halaman web yang disimpan dalam format HTML.

b. Uraian Materi 2

1) HTML

HTML yang merupakan kepanjangan dari Hyper Text MarkUp Language memiliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). HTML bukan merupakan suatu bahasa pemrograman, karena sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan sebagai program.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standart Generalized Mark-Up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

File-file HTML merupakan dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan maupun editing dokumen HTML dapat menggunakan berbagai macam editor, dalam hal ini digunakan Notepad.

Struktur dasar dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut :

Gambar 3. Struktur Dasar HTML.

Keterangan :

a) <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.

b) <head> </head> : mendefinisikan head dalam sebuah file HTML.

c) <title> </title> : mendefinisikan judul yang hendak ditampilkan pada browser.

d) <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.

2) Format Teks Dasar dalam HTML

a) Heading, HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan dengan font lebih besar dan tebal daripada teks normal.

<h1>heading level 1</h1>, <h2>heading level 2</h2>dst.

Gambar 4. Tag Heading.

b) Paragraf, setiap ada paragraf baru diawali dengan <p>

<p>paragraf satu</p>, dst.

c) List, HTML mendukung daftar (list) tidak bernomor, bernomor dan definisi.

Tidak bernomor (unordered list) :

<ul>

<li>satu

<li>dua

<li>tiga

</ul>

Gambar 5. Tampilan dari Tag Unordered List

· Bernomor (ordered list) :

<ol>

<li>satu

<li>dua

<li>tiga

</ol>

Gambar 6. Tampilan dari Tag Ordered List

Definisi (definition list) :

<dl>

<dt>

<dd>

<dt>

<dd>

</dl>

Gambar 7. Tampilan dari Tag Definition List

d) Performatted Text, dalam HTML, spasi, tab dan baris baru (enter) tidak memiliki pengaruh. Agar format tampilan sesuai dengan sourcenya, maka diperlukan tag <pre>.

<pre>

Nama : Saya

Tanggal : Lahir

</pre>

Gambar 8. Tampilan dari Tag Preformatted Text

e) Extended Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>.

<p>paragraf satu</p>

<p>paragraf masuk ke dalam</p>

</blockquote>

Gambar 9. Tampilan dari Tag Blockquote

f) Ganti baris (line break), untuk menulis alamat surat dengan baris-baris pendek, tidak bagus jika menggunakan tag <p>(spasi terlalu lebar). Maka digunakan tag <br> untuk ganti baris.

Karangmalang.<br>

Yogyakarta.<br>

55281

g) Garis datar (horizontal rule), untuk membuat garis horizontal yang digunakan untuk membatasi bagian-bagian digunakan tag <hr>. Yang dapat diikuti dengan penentuan ukurannya dengan atribut size dan width.

h) Memformat karakter,

<b> atau <strong> untuk membuat teks Bold.

<i> atau <em> untuk membuat teks Italic.

<tt> atau <code> untuk membuat teks typewriter.

Gambar 10. Hasil Format Karakter

3) Dasar Link HTML

1) Relative dan Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat dengan menentukan relative path dari posisi dokumen asal berada. Ini disebut sebagai relative link. Misal :

a href=”Harga/index.html”>Daftar Harga</a>

Alamat (URL) dokumen secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan link, disebut link absolute :

a href=”http://gmail.google.com”>E-mail Google</a>

2) Link ke suatu bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di dua.html, caranya adalah :

Pada dokumen satu.html, dituliskan :

Pada bagian yang dituju, dituliskan :

3) Link ke suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas :

Pada dokumen satu.html, dituliskan :

Pada bagian yang dituju, dituliskan :

4) Mailto, link yang langsung menuju ke alamat e-mail.

Kirim E-mail</a>

4) Menyisipkan Gambar

Atribut ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width.

<img src=”foto.fpg” height=”200” width=”100”.

Pelurusan gambar, posisi gambar terhadap teks sebelum dan sesudahnya bisa fleksibel, misalnya lurus atas :

Teks alternatif untuk gambar, dimaksudkan untuk mengganti gambar apabila browser tidak mampu menampilkan gambar tersebut.

Atribut border dan spasi, jika atribut ini tidak disertakan, maka gambar ditampilkan tanpa garis tepi.

Gambar sebagai hyperlink.

Gambar sebagai background

Background warna

5) Membuat Tabel

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Berikut contoh untuk membuat sebuah tabel yang terdiri dari 2 kolom dan 2 baris.

Gambar 11. Tag HTML untuk Membuat Tabel

Keterangan :

a) <table> </table> : mendefinisikan bahwa teks di dalamnya merupakan tag-tag pembuatan tabel.

b) <table border=2> : mendefinisikan penentuan ada atau tidaknya serta ukuran border pada tabel.

c) <tr> </tr> : table row, mendefinisikan bahwa teks di dalamnya akan berada dalam satu baris. Banyaknya tag <tr></tr> menunjukkan banyaknya baris pada suatu tabel.

d) <td> </td> : table division, mendefinisikan isi dari suatu kolom, tag ini selalu berada di dalam tag <tr></tr>. Banyaknya tag <td></td> diantara tag </tr></tr> menunjukkan banyaknya kolom dalam suatu baris.

Gambar 12. Hasil Pembuatan Tabel

6) Membuat Frame

Frame HTML digunakan untuk membuat tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya merupakan satu halaman HTML yang terpisah. Frame bernmanfaat saat suatu halaman HTML pada suatu bagiannya gerganti-ganti isi, sedangkan pada bagian lainnya relatif tetap, sehingga lebih menghemat bandwidth internet.

Berikut contoh pembuatan frame :

Gambar 13. Tag HTML untuk Membuat Frame

Keterangan :

a) Menentukan banyaknya baris dan tinggi masing-masing frame. Di sini dibuat dua baris dengan tinggi 80 pixel untuk baris pertama, dan tinggi baris kedua memanfaatkan sisa ruang pada web browser (dinyatakan dengan tanda *).

b) Memberikan nama pada frame pertama yang telah dibuat dan menentukan nama file yang akan ditampilkan dalam frame tersebut.

c) Membagi baris kedua menjadi 2 kolom dengan ukuran kolom kiri 150 pixel dan kolom kanan memanfaatkan sisanya.

d) Memberikan nama frame paling kiri pada baris kedua dengan nama left_menu dan menentukan file menu.html menjadi isi pada frame ini. Frame sebelah kanan dinamai main_page dengan file isi.html sebagai isinya.

e) Mengakhiri pembuatan frame.

Gambar 14. Tampilan Halaman Web dengan Frame

7) Membuat Form

Form merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna. Macam-macam form :

a) Input, dengan tipe : text, password, checkbox, radio button, reset, submit dan hidden.

b) Textarea.

c) Select.

Berikut ini contoh tag pembuatan form :

Gambar 15. Tag HTML untuk Pembuatan Form

Gambar 16. Tampilan Macam-Macam Form

c. Rangkuman 2

1) Pengenalan terhadap tag-tag HTML belum memerlukan web editor (software web design) seperti Macromedia Dreamweaver, MX tetapi cukup menggunakan teks editor (misalkan : Notepad).

2) Dasar-dasar HTML mencakup struktur dasar dokumen HTML dan format teks dasar HTML.

d. Tugas 2

1) Ketiklah lagi tag-tag HTML pada masing-masing contoh pada uraian materi di atas dengan menggunakan Notepad. Kemudian simpan menjadi file HTML (dengan ekstensi *.html) dan taruh di dalam folder yang sama. Jalankan dokumen – dokumen HTML tersebut pada browser dan amati!

2) Cari sumber bacaan maupun buku referensi yang menjelaskan secara detail tentang dasar-dasar HTML.

e. Tes Formatif 2

1) Apa yang anda ketahui tentang HTML dan web editor?

2)
Buatlah halaman HTML untuk menampilkan formulir isian biodata anggota, seperti gambar 17 menggunakan editor Notepad.

Gambar 17. Form Isian Biodata Anggota

f. Kunci Jawaban Formatif 2

1) HTML adalah Hyper Text MarkUp Language, yang berfungsi memformat dokumen teks biasa untuk bisa digunakan pada WWW.

Web editor dapat diartikan sama dengan pengertian dari software web design, yaitu sebuah perangkat lunak yang berguna untuk membangun/membuat/mendisain dan mengedit halaman-halaman web, baik yang bersifat statis maupun dinamis.

2) Dokumen HTML-nya :

Gambar 18. Tag-tag HTML Halaman Isian Biodata

g. Lembar Kerja 2

Alat dan Bahan

PC (Personal Computer) yang telah dilengkapi dengan web browser dan editor teks Notepad.

Kesehatan dan Keselamatan Kerja

1) Berdo’alah sebelum memulai kegiatan belajar.

2) Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar.

3) Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar.

4) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik di dekat komputer (magnet, handphone, dan sebagainya).

5) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain game.

6) Setelah selesai, matikan komputer sesuai prosedur yang aman!

Langkah Kerja

1) Siapkanlah semua peralatan yang akan digunakan!

2) Periksa semua kabel penghubung pada PC.

3) Nyalakan PC dan jalankan program editor notepad dan web browser Internet Explorer.

4) Kerjakan Tugas 2 dan Tes Formatif 2 di atas.

5) Apabila menemui kesulitan dalam memahami materi yang ada, segera tanyakan denga instruktur.

6) Setelah selesai, matikan komputer dan rapikan seperti semula.

Demikianlah postingan Mengenal Software Web Design II kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. Oke, See you di postingan berikutnya.

Anda telah membaca Mengenal Software Web Design II dari link https://alamsyah029.blogspot.com/2011/09/mengenal-software-web-design-ii.html
Baca Juga :