TAG 10/2/2011. Pengenalan HTML. Pengantar Bahasa HTML (Menuliskan Kode HTML) Pengantar Bahasa HTML. Pengantar Bahasa HTML (Membuat Dasar Tag)

Ukuran: px

Mulai penontonan dengan halaman:

Download "TAG 10/2/2011. Pengenalan HTML. Pengantar Bahasa HTML (Menuliskan Kode HTML) Pengantar Bahasa HTML. Pengantar Bahasa HTML (Membuat Dasar Tag)"

Benny Hadi Oesman
6 tahun lalu
Tontonan:

1 Perancangan & Pemprograman WEB Pertemuan 2 Pengenalan HTML, TAG, list, dan Hyperlink Pengenalan HTML Apakah file HTML itu? HTML singkatan dari Hyper Text Markup Language. Merupakan suatu bahasa pemorgraman untuk membuat sebuah halaman web. Suatu file HTML sebetulnya adalah file teks biasa (yang bisa diedit oleh Notepad)- namun mengandung berbagai tag markup. File HTML biasanya diberi ekstension htm atau html. Beberapa contoh elemen adalah : head, body, table, paragraph dan list. Pengantar Bahasa HTML (Menuliskan Kode HTML) Pengantar Bahasa HTML (Menuliskan Kode HTML) Pasangan tag dan menandakan kode HTML yang diterjemahkan ke dalam dokumen HTML Bagian kepala adalah tag dan, sedangkan judul ditulis dengan tag <title> dan </title>. Bagian badan adalah tag dan. Bentuk / kerangka penulisan HTML : <title>.</title> Pengantar Bahasa HTML (Membuat Dasar Tag) Pengantar TAG Contoh : <title>contoh Satu</title> Selamat Datang di dunia HTML Sewaktu browser menampilkan suatu web page, browser tersebut akan membaca teks-teks pada dokumen HTML, dan mencari suatu kode khusus yang disebut Tag. TAG Dinyatakan dengan tanda (<) dan (>) Biasanya merupakan suatu pasangan (tag awal dan tag akhir) Tag awal dinyatakan dengan <nama tag>, tag akhir dengan </nama tag> 1

2 Tag pada Head Tag pada Body Tag<link> Tag<title> Tag<base> Tag<meta> Bagian Body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound dan lain-lain akan ditempatkan dibagian ini. Bagian body diawali dengan tag dan ditutup dengan tag. Atribut pada tag Fungsinya Leftmargin Vlink Background Bgcolor Text Link Bgproperties Tomargin Alink Leftmargin menentukan batas kiri dokumen dalam pixel Background Merujuk pada URL atau direktori dari file gambar yang digunakan sebagai latar belakang. Bgcolor Menentukan warna latar belakang dokumen. Topmargin Menentukan batas atas dokumen dalam pixel. Fungsinya Tag pemformatan Dokumen HTML Vlink Menentukan warna link yang telah dikunjungi. Text Menentukan warna teks. Link Menentukan warna dari link yang belum dikunjungi. Alink Menentukan warna dari link aktif. Bgproperties Jika nilai atribut ini diisi fixed, maka gambar latar belakang tidak ikut tergulung. Dalam HTML terdapat beberapa tag yang dapat digunakan untuk pemformatan dokumen.tag-tag tersebut antara lain adalah : Tag <br> Blockquate Tag<align> Divider Tag <p> Address Tag <hr> Acronym Tag <hn> Karakter Special Tag <pre> 2

3 List List Tanpa Nomor List merupakan bentuk umum yang digunakan untuk membuat daftar dengan nomor, tanpa nomor, definisi. List dengan nomor adalah daftar setiap itemnya diberi nomor. List definisi adalah membuat list yang memberi uraian terhadap suatu item dalam daftar. Untuk menampilkan daftar urutan tanpa nomor kita bisa menggunakan Tag <ul> Penulisannya : <ul> Teknik Informatika<br> Sistem Informasi<br> Manajemen Informatika<br> Komputerisasi Akuntansi<br> Teknik Informatika<br> </ul> List Dengan Simbol Ada tiga macam bentuk bullet yang bisa kita tampilkan dengan menggunakan tag <li> ini yaitu CIRCLE, DISC, SQUARE. Kita bisa menggunakan Tag <li> Penulisan kode HTML dibawah ini maka yang akan tampil adalah type DISC. List Dengan Simbol... <ul> <li>sistem Informasi<br> <li>manajemen Informatika<br> <li>komputerisasi Akuntansi<br> </ul> 3

4 List Dengan Simbol Untuk type simbol lainnya.... <ul> <li type = "circle">sistem Informasi<br> <li type = "square">teknik Informatika<br> <li type = "disk">manajemen Informatika<br> <li type = "circle">komputerisasi Akuntansi<br> <li type = "square">teknik Informatika<br> </ul> List Dengan Nomor Untuk pemberian nomor secara otomatis tanpa harus menuliskan secara ekplisit. Kita bisa menggunakan Tag <ol>. <ol> <li>sistem Informasi<br> <li>manajemen Informatika<br> <li>komputerisasi Akuntansi<br> </ol>. List Dengan Nomor acak Kita juga bisa menampilkan List dengan nomor yang acak / tidak berurutan. Nomor yang tidak berurutan <ol> <li value = "1">Satu<br> <li value = "5">Lima<br> <li value = "8">Delapan<br> <li value = "10">Sepuluh<br> <li value = "16">Enam belas<br> </ol> 4

5 List Simbol Lainnya Untuk menampilkan urutan angka dalam daftar urutan. Selain itu ada atribut lain untuk menampilkan daftar urutan ini, yaitu : I i A a Angka romawi besar Angka romawi kecil Huruf besar Huruf kecil List Simbol Lainnya <ol type = "I"> <li>sistem Informasi<br> <li>manajemen Informatika<br> <li>komputerisasi Akuntansi<br> </ol> List Defenisi Untuk tampilan definisi, yaitu tampilan mirip kamus, terdapat tiga buah pasang tag yang berpasangan yaitu : <dl>..</dl> <dt>..</dt> <dd>..</dd> Daftar definisi Istilah definisi Definisi dari daftar istilah List Defenisi <dl> <dt>stmik</dt> <dd>sekolah Tinggi Manajemen Informatika dan Komputer</dd> </dl>.. 5

TABEL dibuat untuk menyediakan data dalam bentuk baris dan kolom. Setiap kolom menyediakan data yang sejenis, setiap baris yang terdiri atas kolom-kolom menunjukkan data dalam satu kesatuan.

6 TABEL dibuat untuk menyediakan data dalam bentuk baris dan kolom. Setiap kolom menyediakan data yang sejenis, setiap baris yang terdiri atas kolom-kolom menunjukkan data dalam satu kesatuan. Tag untuk membuat tabel adalah : <table> <caption> </caption > <tr> </tr> <th> </th> Pembuka dan penutup table Judul Table Membuat baris dalam sebuah table Membuat judul dalam table Andri <td> </td> Wijaya, S.kom.,M.T.I Membuat data dalam table Cara Penulisannya <table> <caption>stmik Multi Data Palembang</caption> <tr><th>jurusan</th><th>keterangan</th></tr> <tr><td>ti</td><td>teknik Informatika</td> <tr><td>si</td><td>sistem Informasi</td> <tr><td>mi</td><td>manajemen Informatika</td> <tr><td>ka</td><td>komputerisasi Akuntansi</td> <tr><td>tk</td><td>teknik Komputer</td> Untuk membuat garis serta ketebalan garis pada tabel Cara penulisan : <table border = "5"> <caption>stmik Multi Data Palembang</caption> <tr><th>jurusan</th><th>keterangan</th></tr> <tr><td>ti</td><td>teknik Informatika</td> <tr><td>si</td><td>sistem Informasi</td> <tr><td>mi</td><td>manajemen Informatika</td> <tr><td>ka</td><td>komputerisasi Akuntansi</td> <tr><td>tk</td><td>teknik Komputer</td>.. 6

7 Untuk memberikan warna latar pada tabel. Cara Penulisannya : <table bgcolor = "red" border = "5"> <caption>stmik Multi Data Palembang</caption> <tr><th>jurusan</th><th>keterangan</th></tr> <tr><td>ti</td><td>teknik Informatika</td> <tr><td>si</td><td>sistem Informasi</td> <tr><td>mi</td><td>manajemen Informatika</td> <tr><td>ka</td><td>komputerisasi Akuntansi</td> <tr><td>tk</td><td>teknik Komputer</td> Untuk meggabungkan sejumlah baris dalam tabel Cara Penulisannya :. <table border = "1"> <caption>stmik MULTI DATA PALEMBANG</caption> <tr> <td rowspan = "5">Jurusan Komputer</td> <td>teknik Informatika</td> </tr> <tr><td>sistem Informasi</td></tr> <tr><td>manajemen Informatika</td></tr> <tr><td>komputerisasi Akuntansi</td></tr> <tr><td>teknik Informatika</td><tr> Menggabungkan Sejumlah kolom dalam tabel Cara Penulisannya : <table border = "5"> <caption>stmik MULTI DATA PALEMBANG</caption> <tr><th colspan = "2">Jurusan Komputer</th></tr> <tr><td>ti</td><td>teknik Informatika</td></tr> <tr><td>si</td><td>sistem Informasi</td></tr> <tr><td>mi</td><td>manajemen Informatika</td></tr> <tr><td>ka</td><td>komputerisasi Akuntansi</td></tr> <tr><td>tk</td><td>teknik Informatika</td></tr>. 7

8 Membuat Link Link Pada Halaman Web Dalam HTML, untuk membuat suatu link dipergunakan elemen Anchor yang dinyatakan dengan tag berpasangan <A> </A> Jika kita mengklik teks pada suau link, browser akan membawa pemakai ke path dari link tersebut. Dalam browser biasanya link ditandai dengan teks yang digaris bawahi. Untuk membuat link ke web lain kita gunakan atribut tambahan HREF pada tag <A>: Tag <a href = toc.html >Daftar Isi</a> Berarti bahwa file yang dituju oleh link tersebut adalah toc.html, sedang Daftar Isi adalah teks yang akan ditampilkan browser dengan garis Andribawah Wijaya, S.kom.,M.T.Isebagai penanda suatu link. Contoh Pada HTML <title>penggunaan Link</title> STMIK Multi Data Palembang<br> <a href = teknikinformatika.html>teknik Informatika</a><br> <a href = sisteminformasi.html>sistem Informasi</a><br> <a href = manajemeninformatika.html>manajemen Informatika</a><br> <a href = komputerisasiakuntansi.html>komputerisasi Akuntansi</a><br> <a href = teknikkomputer.html>teknik Komputer</a><br> HASILNYA Link Pada Web Lain <title>penggunaan Link</title> Daftar Web yang bisa di link<br> <a href = Kompas</a><br> <a href = Online</a><br> <a href = HASILNYA 8

9 Tag untuk link dengan gambar HASILNYA <title>tampilan gambar</title> Silahkan klik pada gambar ini <a href =comingsoon.jpg> <img src =comingsoon.jpg></a> Untuk membuka jendela baru, kalau link ini diklik. Tag yang biasa kita gunakan untuk membuka halaman baru ketika kita mengklik suatu link : Tag <a href =. target = _target > Contoh <title>tampilan gambar</title> <br> <a href = teknikinformatika.html target = _target >TI</a><br> <a href = sisteminformasi.html target = _target >SI</a><br> <a href = manajemeninformatika.html target = _target >MI</a><br> <a href = komputerisasiakuntansi.html target = _target >KA</a><br> <a href = teknikkomputer.html target = _target >KA</a><br> 9

dokumen-dokumen yang mirip

MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL

MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL A. MAKSUD DAN TUJUAN 1. MAKSUD a. Merapikan teks yang berupa daftar (list) dan table dengan tag HTML b. Membuat halaman web terhubung dengan halaman