Selasa, 28 Mei 2013

Membuat Frame




Frameset adalah serangkaian instruksi untuk membagi halaman browser menjadi beberapa halaman. Setiap halaman disebut frame. Frameset menentukan letak setiap frame, propertis-propertisnya, dan nama file yang ditampilkan bersama. Untuk mendefinisikan frameset, digunakan tag <frameset> diikuti dengan tag <frame> untuk menentukan file HTML yang akan dijadikan frame.
Atribut yang digunakan di dalam tag <frameset> diantaranya:
  1. cols, untuk menentukan jumlah kolom dari frameset yang dibuat. Jumlah kolom ditentukan oleh jumlah koma diantara lebar tiap frame. Misal bila kita ingin membuat 2 kolom, dimana kolom pertama berukuran 150 dan kolom kedua lebar selebihnya, penulisan kodenya:
    cols="150,*"
    Bila ingin membuat frame dengan jumlah kolom 3, dimana kolom pertama berukuran 150, kolom kedua lebar selebihnya, dan kolom ketiga lebarnya 150, penulisan kodenya:
    cols="150,*,150"
  2. rows, untuk menentukan jumlah baris dari frameset yang dibuat. Jumlah baris ditentukan oleh jumlah koma diantara lebar tiap frame. Misal bila kita ingin membuat 2 baris, dimana baris pertama berukuran 150 dan baris kedua lebar selebihnya, penulisan kodenya:
    rows="150,*"
    Bila ingin frame dengan jumlah baris 3, dimana baris pertama berukuran 150, baris kedua lebar selebihnya, dan baris ketiga lebarnya 150, penulisan kodenya:
    rows="150,*,150"
  3. frameborder, untuk menentukan ada tidaknya pembatas diantara frame. Valuenya "yes" bila ada pembatas, "no" bila tidak perlu ada pembatas.
  4. border, untuk menentukan ketebalan pembatas apabila ada pembatas.
  5. bordercolor, untuk menentukan warna pembatasnya.
Contoh penulisan kode HTML untuk membuat frame HTML sebanyak 2 kolom dengan pembatas:
Kode HTML:
Langkah 1 buat kode dibawah ini tuliskan didalam notepad, simpan dengan nama: index.html
Langkah 2 buat kode dibawah ini tuliskan didalam notepad, simpan dengan nama: kiri.html
Langkah 3 buat kode dibawah ini tuliskan didalam notepad, simpan dengan nama: kanan.html
Simpan ketiga halaman web yang sudah kita buat kedalam 1 folder.”nama folder boleh apa saja”
Untuk melihat hasilnya klik index.html ,

Latihan 1.
Selanjutnya, kita akan membuat frame seperti dibawah ini
Sama halnya seperti  yang sebelumnya kita harus memiliki beberapa halaman web dan 4 data gambar dan disimpan dalam 1 folder.
Langkah 1 ubah 4 gambar yang sudah kita siabkan dengan cara, rename setiap gambar menjadi “picture1.jpg,picture2.jpg,koala.jpg,pinguin.jpg”.
Langkah 2 tuliskan kode dibawah ini, simpan dengan nama index.html
Langkah 3 tuliskan kode dibawah ini, simpan dengan nama induk.html
Untuk yang diberi kotak merah adalah alamat penyimpanan data”folder yang telah dibuat dan disimpan”
Cara menuliskannya,buka folder yang telah kita buat,hingga semua data yang telah kita buat tadi muncul. Kemudian  copy dan paste ke dalam notepad alamatnya. Seperti contoh dibawah.
Untuk melihat hasilnya. Klik induk dan pilih index.html,...selamat mencoba!
Diposting oleh di Tidak ada komentar:

Pengenalan HTML




Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Elemen dasar HTML
 
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari file HTML)
 
Judul
<TITLE></TITLE>
(harus selalu terdapat pada mukadimah)
 
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum, seperti judul dsb.)
 
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)

Contoh
<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>

Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai
Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Format Font HTML
Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS.
Untuk mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>
Hasil:
Tulisan dengan font-family Georgia
Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk membuat tulisan miring digunakan properti font-style:
<p style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat tulisan miring
Untuk membuat tulisan tebal digunakan properti font-weight:
<p style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat tulisan tebal
Untuk mengatur ukuran font digunakan properti font-size:
<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan dengan ukuran font 16px
Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.
<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan dengan ukuran 16px
Tulisan dengan ukuran 100%
Tulisan dengan ukuran 1em
Tulisan dengan ukuran 12pt
Untuk membuat warna font digunakan properti color:
<p style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini akan berwarna biru
Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.
<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat warna tulisan dengan Nilai RGB
Membuat warna tulisan dengan Kode Hexadecimal
Membuat warna tulisan dengan Nama Warna
Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.
<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
Contoh tulisan dengan font-family, font-size dan font-weight.
Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.
<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>
Hasil:
Contoh tulisan dengan properti font.

ini yang komplit

<p style="font-style:italic; font-size:30px; verdana; color:red">Contoh tulisan dengan properti font.</p>

Hasilnya
Contoh tulisan dengan properti font.
Diposting oleh di Tidak ada komentar:

Senin, 27 Mei 2013

Baiklah teman-teman sekalian, saya akan mencoba memberikan postingan tentang pengenalan html yang bisa teman-teman download di sini:

Download Button
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)