Membuat Desain Halaman Web Berbasis Frame pada HTML ~ Roisa

Membuat desain halaman web berbasis frame atau untuk menampilkan desain halaman web lebih dari satu halam dalam satu waktu yang melibatkan hyperlink dokumen internal, link email, link gambar, dan link halaman web online dengan memanfaatkan atribut link seperti target=”_blank” title=”Title link”> dapat juga menampilkan bentuk form, semuanya dapat dibuat pada HTML.

Printscreen desain:

Kode HTML:

Kode pemersatu frame, binner.com.html

<!DOCTYPE html> <html lang="en"> <head> <title> R-ZHICX Binner official website </title> </head> <frameset Rows="30%, 60%, 10%" Frameborder="no"> <frame SRC="header-binner.html" scrolling="NO" resize="YES"> <frameset Cols="13%,74%,13%"Frameborder="Yes" border=3 bordercolor="LIME"> <frame SRC="left-binner.html" scrolling="NO"> <frame SRC="center-binner.html" scrolling="YES"> <frame SRC="right-binner.html" scrolling="NO"> </frameset> <frame SRC="footer-binner.html" scrolling="NO" resize="YES"> </frameset><noframe></noframe> </html>

Main content, center-binner.html
<!DOCTYPE html> <html lang="en"> <head> <marquee><title>Pengantar Teknologi Informasi</title></marquee> </head> <body background="belajar_html/bgbinner.jpg" repeat="NO"> <p><img src="belajar_html/pinbinner.png" height="200" align="top"></p> <font color="yellow" face="Arial Narrow"><h1 align="right"> Belajar Pemrograman Berbasis Web</h1></font> <hr><hr> <font color="white" size "14" face="Arial"><p><strong>Binner: Bulletin Electrical Engineering</strong></p> PENDAHULUAN <ul> <font color="lime"><li><a href="#latarberlakang">Latar Belakang</a></li> <li><a href="#tujuan">Tujuan</a></li> <li><a href="#target">Target</a></li></font> <h3 id="latarbelakang"><u>Latar Belakang</u></h3> <p>Dewasa ini perkembangan informasi semakin pesat. Banyak berita dan karya muncul dan kesemuannya tercipta karena daya imajinasi, kreatifitas dan intelejen. Hal itu menyebabkan hanya mahasiswa tertentu yang dapat memperoleh informasi. Mahasiswa biasa seharusnya juga dapat memperoleh informasi sebagaimana harapan dan sesuai bidang yang ditekuni. Oleh karena itu, perlu adanya media informasi yang mudah didapat dan diperoleh oleh civitas akademika. Bulletin Electrical Engineering (BINNER) hadir untuk memberikan informasi tidak hanya seputar jurusan, kampus, tetapi juga tips-trik, saran kritik tentang penyelenggaraan kehidupan di lingkup Jurusan Teknik Elektro Fakultas Teknik Universitas Negeri Malang yang diharapkan oleh civitas akademika. </p> <h3 id="tujuan"><u>Tujuan</u></h3> <p> <b>Tujuan Kegiatan</b> <ul> <li>Membantu mahasiswa khususnya Mahasiswa Jurusan Teknik Elektrodalam upaya menimbulkan jiwa kritis Mahasiswa Jurusan Elektro. <li>Menyiapkan dan mengembangkan minat mahasiswa Jurusan Teknik Elektrodalam berbagai bidang khususnya saling bertukar informasi dan pengalaman. <li>Membentuk mahasiswa Jurusan Teknik Elektroyang mempunyai rasa tanggung jawab yang tinggi, disiplin waktu, kerjasama dan kebersamaan, serta menjalin persaudaraan antar mahasiswa Jurusan Teknik Elektro. <li>Memberikan wawasan yang luas dengan adanya partisipasi dalam kegiatan tukar informasi. </ul> <h3 id="target"><u>Target</u></h3> <p> <b>Target Kegiatan</b> <ul> <li>Mempunyai informasi yang mendukung civitas akademika menuju mahasiswa Jurusan Teknik Elektroyang mandiri dan kritis. <li>Mempunyai nilai-nilai positif dalam kegiatan akademik dan kemahasiswaan. <li>Terjalinnya rasa solidaritas, kekeluargaan dan kerjasama antar mahasiswa Jurusan Teknik Elektro pada khususnya dan mahasiswa UM pada umumnya. <li>Mampu menelaah informasi, pendapat, tips-trik, yang diberikan dalam kegiatan Bulletin Electrical Engeenering (BINNER) secara menyeluruh. </ul> </p> </ul> </font> <hr><hr> <form> <pre> <blockquote><font color="white"> Formulir Login belum ada databasenya!<br> Nama :<INPUT type="text" name="Nama"> E-mail :<INPUT TYPE=TEXT NAME="Email" SIZE=20> Telepon :<INPUT TYPE=TEXT NAME="Telepon" SIZE=7> Jenis Kelamin :<label><input type="radio" name="Radio" value="laki-laki"> Laki-laki</label><label><input type="radio" name="Radio" value="perempuan"> Perempuan</label> Hobi :<input type="checkbox" name="main_game"><label>Belajar Web</label><input type="checkbox" name="Belajar Server"><label>Belajar IT</label><input name="Nama" type="checkbox"><label>Lainnya</label> </font></blockquote> <INPUT TYPE=SUBMIT VALUE="OK"> <INPUT TYPE=RESET VALUE="CANCEL"> </PRE> </FORM> <hr color="black" size="2" width="90%" align=left> <a href="http://um.ac.id">UM: The Learning University (official site)</a><br> </font> </body> </html>

Right Side, right-binner.html

<!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <body bgcolor="black"> <blink> <br><font color="white"><p align="center">What is Binner?<font size="2" color="lime">?</font><br><blink> Binner Edisi 2</blink><br><a href="binner.com.html" target="_blank" title="klik to back HOME" border="no"><img src="belajar_html/binner_2nd.jpg" width="100" height="150" border="2"></a></font> </body> </html>

Left Side, left-binner.html

<!DOCTYPE html> <html lang="en"> <head> <title></title> </head> <body bgcolor="black"><br> <font color="white"><p align="center"> What is Binner?<font size="2" color="lime">?</font><br> <blink>Binner Edisi 1<br><a href="binner.com.html" target="_blank" title="klik to back HOME" border="no"><img src="belajar_html/binner_1st.jpg" width="100" height="150" border="2"><br><br> </font> </body> </html>

Footer Area, footer-binner.html
<!DOCTYPE html> <html lang="en"> <head> <title>hemm</title> </head> <body bgcolor="black"> <p align="center"><font color="lime">Roisatul Azizah® | 109533414524 | S1 PTI 2009 Offering A <br></font> <a href="http://binnerrs.co.cc" target="_blank"> <font color="#ccffcc">http://binnerrs.co.cc</font></a></p> </body> </html>

Penjelasan Singkat:

Untuk menampilkan lebih dari satu halaman dokumen dalam satu waktu dapat menggunakan frame, frame berbeda dengan table, tiap-tiap frame mencerminkan halam yang independen. Tag pembuatan frame diawali dengan <frameset cols=”ukuran1”,”ukuran2”> untuk membentuk frame colom sebanyak 2 halaman. Dilanjutkan dengan <frame src=”header_frame”/> untuk mencari letak frame yang sudah dibuat agar dapat ditampilkan dalam kesatuan halaman web. Untuk lebih mudah, dapat diilustrasikan sebagai berikut:

Artikel Lainnya

3 comment:

Anonim mengatakan...: Kode header-binner.html nya kok gak ada yah ?; 2 Juli 2012 pukul 04.13
Unknown mengatakan...: untuk header, langsung bisa panggil gambar headernya (ukuran dapat disesuaikan) pake perintah img src biasa :)

semoga bermanfaat; 6 Juli 2012 pukul 16.52
EghyR01 mengatakan...: Terima Kasih Atas tutorialnya ..
artikel yang sangat bagus ..; 20 Februari 2013 pukul 21.42

Posting Komentar

Informasi Pilihan Identitas:
Google/Blogger : Account special blogger
Another : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan). salam hangat, Roisa :)

Categories

Blog Archive

Escape View