Frame HTML PDF

emperjelas penyajian informasi, dengan menu sajian selalu
ditampilkan.
Sintaks:
<FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,...]]}>
<FRAME SRC=url NAME=nama frame>
</FRAMESET>
Target Frame
Nama frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan
target penampilan dari suatu link.
Nama Frame
_self
_top
parent
Nama Frame
_blank
Kegunaan
Digunakan apabila target frame adalah frame tempat link berada
Digunakan apabila target frame adalah windows tempat frame
berada. Denganmenggunakan _top sebagai target maka definisi
frame yang ada pada windos
browser akan hilang, diganti dengan definisi frame yang baru jika
ada.
_ Target frame adalah setingkat di atas frame link berada. Akibat
dari target frame_parent akan sama jika tempat frame link berada
hanya satu level di bawah
definisi frame windows.
Kegunaan
Target _blank digunakan untuk membuka windows baru.
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap
kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom
menunjukkan kelompok data dalam satu kesatuan. Tabel sangat penting artinya dalam desain
web. Karena dengan tag table dapat dibuat halaman web yang terbagi pada beberapa kolom
dan baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan tabel yaitu,
<table>, <tr> dan <td>. Yang perlu diingat yaitu bahwa tag <tr> dan <td> harus terletak
diantara tag <table> dan </table>
Windows dalam browser yang dibagi menjadi beberapa windows disebut Frame. Model ini
sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu
ditampilkan.
Sintaks: <FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,...]]}>
<FRAME SRC=url NAME=nama frame> </FRAMESET>
LISTING PROGRAM
web1.html
<html>
<head>
<title> taeyeon.com</title>
</head>
<body>
<h1 style=text-align:center;font-family:fantasy;color:white;backgroundcolor:black>Taeyeons World</h1>
<img src=taeng.jpg alt=Taeyeon />
<marquee align=center direction=right scrollamount=2 > Taeyeon Official Website
</marquee>
<p style=font-family:times;color:white;background-color:black;>
<a href=http://www.taeyeon.com” target=_blank>
|HOME|</a>
<a href=http://www.taeyeon.com/profil” target=_blank>
|PROFIL|</a>
<a href=http://www.taeyeon.com/music” target=_blank>
|MUSIC|</a>
<a href=http://www.taeyeon.com/video” target=_blank>
|VIDEO|</a>
<a href=http://www.taeyeon.com/about” target=_blank>
|ABOUT|</a></p>
<h4><img src=taeng2.jpg width=86 height=88 alt=KimTaeyeon /> Profile
<u>Taeyeon :</u></h4>
<ol type = circle>
<li>Stage Name: Tae Yeon</li>
<li>Real Name: Kim Tae Yeon</li>
<li>Nicknames: Taeng, Umma, Ajumma, Kid Leader</li>
<li>Birthday: March 9, 1989</li>
<li>Age:19</li>
<li>Height:1.62m</li>
<li>Weight: 44kg</li>
<li>Blood Type: O</li>
<li>Group: So Nyuh Shi Dae / Girls Generation</li>
<li>Position: Leader, Main Vocalist</li>
<li>Specialty: Chinese, Swimming</li>
<li>Homeplace: Jeonrado Jeonju</li>
<li>School: Jeonju Art High School, Graduated</li>
</ol>
<a href=web2.html>Next>>></a>
</body>
</html>
web2.html
<html>
<head>
<title>SNSD</title>
<link rel=stylesheet type=text/css href=web2.css/>
</head>
<body>
<center>
<h1>So Nyeo Shi Dae</h1>
<table border=4 id=tabel>
<tr><td width=10%>No</td><td width=60%>Nama</td><td
width=30%>Posisi</td></tr>
<tr><td>1</td><td>Taeyeon</td><td>Leader,Lead Vocalist</td></tr>
<tr><td>2</td><td>Jessica</td><td>Main Vocalist</td></tr>
<tr><td>3</td><td>Sunny</td><td>Sub Vocalist</td></tr>
<tr><td>4</td><td>Tiffany</td><td>Sub Vocalist</td></tr>
<tr><td>5</td><td>Hyoyeon</td><td>Sub Vocalist,Lead Dancer</td></tr>
<tr><td>6</td><td>Yuri</td><td>Sub Vocalist,Main Dancer</td></tr>
<tr><td>7</td><td>Sooyoung</td><td>Sub Vocalist,Main Dancer</td></tr>
<tr><td>8</td><td>Yoona</td><td>Sub Vocalist,Main Dancer</td></tr>
<tr><td>9</td><td>Seohyun</td><td>Main Vocalist</td></tr>
</table>
<div id=style>
<p>SM Entertainment</p>
<p>2011</p>
</div>
</center>
</body>
</html>
web2.css
#tabel{
width: 480px;
border-color: black;
border-style: solid;
background-color: #E6E6E6;
}
#style{
font: bold;
font-size: large;
}
web2(frame).html
<html >
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 />
<title>Test Frame</title>
</head>
<frameset rows=* cols=*,640 framespacing=0 frameborder=no border=1>
<frame src=web1.html name=leftFrame id=" title=/>
<frame src=web2.html name=rightFrame id=" title=/>
</frameset>
<body>
</body>
</html>
PENJELASAN PROGRAM
Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan
naskah judul di antara tag <TITLE> dan </TITLE>. Judul ini akan ditampilkan pada title
bar web browserPada file web1.html dibuat sebuah page dengan judul taeyeon.com. Untuk
mendefinisikan head, kita dapat menambahkan tag <HEAD> dan </HEAD> setelah
penggunaan tag <HTML>. Sedangkan bagian body adalah tempat dimana kita dapat
menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada
web page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan </BODY>
di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag </HEAD>. Tag
<h1> digunakan untuk memberikan ukuran font level 1 (paling besar). Tag <img> digunakan
untuk menambahkan gambar, diikuti dengan src untuk menunjukkan sumber gambar,
sedangkan alt digunakan untuk menampilkan teks jika gambar tidak muncul di halaman web.
Untuk mengatur tinggi dan lebar gambar bisa menggunakan perintah height untuk panjang
gambar, dan width untuk lebar gambarnya. Tag <marquee> digunakan untuk membuat teks
berjalan. Tag ini memiliki beberapa atribut, yaitu direction untuk mengatur arah gerakan
teks (dari kiri ke kanan/sebaliknya), scrollamount untuk mengatur kecepatan gerakan
dalam satuan pixel. Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga
untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag
khusus yakni <p>. Selanjutnya, tag <a href> digunakan untuk membuat link ke halaman lain
atau ke bagian lain dari halaman tersebut. Disini terdapat 5 link yang masing-masing menuju
ke linknya masing-masing. Tag<u> digunakan untuk membuat teks bergaris bawah. Tag <ol>
digunakan untuk membuat Ordered List atau list yang disusun beraturan. Di dalam tag <ol>
ini terdapat item-item yang dimaksud dimana penulisan list item tersebut menggunakan tag
<li>. Tag <a href=web2.html>Next>>></a> digunakan untuk membuat link ke file
web2.html yang berisi tabel.
Pada file web2.html terdapat tag link yang berfungsi menghubungkan file html
dengan file css. Tag <centre> agar semua isi halaman web berada di tengah. Selanjutnya
dibuat heading dengan menggunakan tag <h1></h1>. Lalu dibuat tabel yang terdiri dari 3
kolom dan 6 baris, dengan ketentuan tabel memiliki border dengan ketebalan 4px dan pada
tabel tersebut terdapat id yang berisi variabel dari file css, sehingga nantinya tabel tersebut
akan meload pengaturan pada file css tersebut. Untuk kolom pertama, lebar kolom 10% dari
lebar kesuluruhan tabel. Untuk kolom kedua, lebar kolom 60% dari lebar kesuluruhan tabel.
Untuk kolom ketiga, lebar kolom 30% dari lebar kesuluruhan tabel. Selanjunya digunakan tag
<div> yang berisi id dengan variabel style. Diantara tag <div> dan </div> tersebut terdapat 2
buah paragraf.
Dalam file web2.css terdapat pengaturan pada id dengan variabel tabel, lebar tabel
keseluruhan adalah 480px dengan warna border hitam. Style border adalah solid dan warna
background tabel adalah abu-abu muda. Untuk pengaturan id dengan variabel style adalah
font akan dicetak tebal dengan ukuran font besar.
Terakhir dalam file web2(frame).html, tag frame <frameset rows=* cols=*,640
framespacing=0 frameborder=no border=1> berfungsi sebagai tag pembuka untuk
membuat frame dan digunakan untuk mengatur tampilan frame itu sendiri. Kemudian tag
<frame src=web1.html name=leftFrame id=" title=" /> digunakan sebagai frame
bagian kiri dan pada frame ini memanggil file web1.HTML untuk ditampilkan pada bagian
kiri frame. kemudian <frame src=web2.html name=rightFrame id=" title=" />
digunakan sebagai frame bagian kanan dan pada frame ini memanggil file web2.HTML
untuk ditampilkan pada bagian kiri frame. lalu tutup dengan tag </frameset>.
OUTPUT PROGRAM
web1.html
web2.html
web2(frame).html
Nama file: latihan8_2.html

<html>
<head>
<title>Latihan8-2</title>
</head>
<frameset cols="40%,*" border="10" bordercolor="red">
<frame src="left.html">
<frame src="right.html">
</frameset>
<body>
</body>
</html>
Latihan 3:
Dari latihan 2, tambahkan pada frame dokumen right.html dengan margin 50pixel.
Nama file: latihan8_3.html
<html>
<head>
<title>Latihan8-3</title>
</head>
<frameset cols="40%,*" border="10" bordercolor="red">
<frame src="left.html">
<frame src="right.html" marginheight="50" marginwidth="50">
</frameset>
<body></body>
</html>

Frame HTML PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Frame HTML PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

emperjelas penyajian informasi, dengan menu sajian selalu

Nama file: latihan8_2.html

Anda mungkin juga menyukai