1 / 29

Web Programming HTML Dasar- lanjut

Web Programming HTML Dasar- lanjut. Rudy Gunawan Powered by www. Red Office.com. Layout Halaman Page Layout. Ada beberapa tag yang berpengaruh terhadap keseluruhan halaman. Menyangkut margin, colom, warna background, dll. Menentukan Margin Halaman. <html> <head>

diella
Download Presentation

Web Programming HTML Dasar- lanjut

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web ProgrammingHTML Dasar- lanjut Rudy Gunawan Powered by www.RedOffice.com

  2. Layout HalamanPage Layout • Ada beberapa tag yang berpengaruh terhadap keseluruhan halaman. • Menyangkut margin, colom, warna background, dll.

  3. Menentukan Margin Halaman <html> <head> <title>Margin - Page Layout</title> </head> <body leftmargin=50 topmargin=50> <h1 align="center">Contoh Margin leftmargin=50 dan Topmargin = 50</h1> <TT> <PRE> $ip_host = "localhost"; $user = "root"; $pass = "iinyayaadit"; $con = mysql_connect($ip_host,$user,$pass); if($con) { mysql_select_db("payroll"); } else { //print "FAIL CONNECT DATABASE"; } </PRE> </TT> </body> </html> • Pada tag <BODY tambahkan LEFTMARGIN=x dan TOPMARGIN=y • Dimana x dan y adalah jumlah pixel

  4. CENTER <html> <head> <title>Margin - Page Layout</title> </head> <body leftmargin=50 topmargin=50> <h1 align="center">Contoh CENTER </h1> <CENTER> Digital Camcorder<br> Rekam setiap momen dengan camcorder Samsung.<br> Detail yang begitu menarik bisa anda dapatkan dengan jajaran camcorder Samsung Full HD built in solid state memory dan satu sentuhan kemudahan membuat setiap momen itu menjadi begitu berkesan.<br> Flash Memory Camcorder Flash memory camcorder terdiri atas bagian-bagian yang tidak bergerak sehingga dapat dipastikan lebih awet dan tahan lama dibandingkan dengan memori hardisk atau DVD. Camcorder ini dapat merekam dan mengakses lebih cepat. </CENTER> </body> </html> • Membuat Element terpusat ditengah halaman. • Menggunakan tag <CENTER> </CENTER>

  5. CENTER

  6. Membuat Indents <html> <head> <title>Margin - Page Layout</title> </head> <body leftmargin=50 topmargin=50> <h1 align="center">Contoh Indent </h1> Digital Camcorder<br> Rekam setiap momen dengan camcorder Samsung<br> Detail yang begitu menarik bisa anda dapatkan dengan jajaran camcorder Samsung Full HD built in solid state memory dan satu sentuhan kemudahan membuat setiap momen itu menjadi begitu berkesan.<br> <ul> * Flash Memory Camcorder Flash memory camcorder terdiri atas bagian-bagian yang tidak bergerak sehingga dapat dipastikan lebih awet dan tahan lama dibandingkan dengan memori hardisk atau DVD. Camcorder ini dapat merekam dan mengakses lebih cepat.</ul> </body> </html> • Menggunakan TAB pada HTML tidak bisa, untuk memberikan efek indent/tab dapat digunakan <SPACER TYPE=y SIZE=n> (netscape only) • Menggunakan <UL> ditutup </UL>

  7. Menggunakan Pixel Shims <html> <head> <title>Margin - Page Layout</title> </head> <body leftmargin=50 topmargin=50> <img src="shims.gif" WIDTH=100 HEIGHT=200 HSPACE=3 ALIGN="left"> <h1 align="center">Contoh Pixel Shims </h1> Digital Camcorder<br> Rekam setiap momen dengan camcorder Samsung<br> Detail yang begitu menarik bisa anda dapatkan dengan jajaran camcorder Samsung Full HD built in solid state memory dan satu sentuhan kemudahan membuat setiap momen itu menjadi begitu berkesan.<br> </body> </html> • Shims seperti potongan kayu yang ditempel. • Buat gambar 1x1 pixel dengan warna yang dikehendaki. • Gunakan perintah <IMG > dengan atribut IMG, WIDTH, HEIGHT, ALIGN.

  8. Background Color dan Gambar • Mewarnai seluruh halaman, dengan dalam tag <BODY tambahkan attribut BGCOLOR=”#rrggbb” atau tuliskan langsung warnanya BGCOLOR=”warna” Contoh: • <BODY BGCOLOR=”#0066FF”> • <BODY BGCOLOR=”YELLOW”> • Memberikan gambar latar belakang dengan menggunakan attribut di tag <BODY background=”namagambar” > Contoh: • <BODY BACKGROUND=””>

  9. Background Color dan Gambar <html> <head> <title>Margin - Page Layout</title> </head> <body leftmargin=50 topmargin=50 bgcolor="#00ff00"> <h1 align="center">Contoh WARNA BACKGROUND </h1> <CENTER> Digital Camcorder<br> Rekam setiap momen dengan camcorder Samsung.<br> </CENTER> </body> </html>

  10. Background Color dan Gambar <html> <head> <title>Margin - Page Layout</title> </head> <body leftmargin=50 topmargin=50 background="bg_1.gif"> <h1 align="center">Contoh GAMBAR BACKGROUND </h1> <CENTER> Digital Camcorder<br> Rekam setiap momen dengan camcorder Samsung.<br> </CENTER> </body> </html> bg_1.gif

  11. Block Quote • Menampilkan format kutipan tulisan <html> <head> <title>Font</title> </head> <body leftmargin=50 topmargin=50> <h1 align="center">Contoh Blockquote</h1> Mandriva Enterprise Server 5.1<br> Mulai text quote <BLOCKQUOTE> * Linux server, web, messaging, files, printing, virtualization and directory services. Mandriva Enterprise Server excels in every fields. It will become the hub of your infrastructure.<br> * Installation and administration made easy thanks to a dedicated wizard. Setting up a server has never been so fast and user-friendly.<br> * Mandriva Directory Server. Handy and full featured, the server administration tool gives you the opportunity to manage efficiently the installed services. </BLOCKQUOTE> Selesai quote, disini </body> </html>

  12. Block Quote

  13. Short Quote • Kutipan singkat akan menambahkan tanda kutip pada kata-kata yang diapit oleh tag <Q Lang=”xx”> </Q> • Sementara xx adalah bahasa “en” untuk inggris <html> <head> <title>Font</title> </head> <body leftmargin=50 topmargin=50> <h1 align="center">Contoh Short Quote</h1> Mandriva Enterprise Server 5.1<br> * Linux server, web, messaging, files, printing, virtualization and directory services. <Q LANG="en"><b>Mandriva Enterprise Server </b></Q>excels in every fields. It will become the hub of your infrastructure.<br> Selesai quote, disini </body> </html>

  14. Short Quote

  15. Mengontrol Line Break • Tag <BR> adalah untuk ganti baris. • Tag <NOBR> </NOBR> kata-kata diantara tag ini jangan dipisahkan barisnya.

  16. Mengontrol Line Break <html> <head> <title>Font</title> </head> <body leftmargin=50 topmargin=50> <h1 align="center">Contoh No Break</h1> Mandriva Enterprise Server 5.1<br> * Linux server, web, messaging, files, printing, virtualization and <b><nobr>directory services</nobr></b>. <Q LANG="en">Mandriva Enterprise Server </Q>excels in every fields. It will become the hub of your infrastructure.<br> Selesai quote, disini </body> </html>

  17. Mengontrol Line Break Browser kita kecilkan

  18. Link • Link adalah menghubungkan page satu dengan page lainnya. • Link terdiri dari 3 bagian: Tujuan, Label dan Target. • Link tujuan dapat dipergunakan untuk menunjukan gambar, memainkan Music, download file, mengirim email, run CGI program. • Link label adalah bagian yang dilihat pemakai untuk diklik. Biasanya berupa text atau gambar. • Link target bagian ini seringkali diabaikan, target menentukan windows-mana tujuan link akan ditampilkan(window baru atau ke frame mana).

  19. LinkKe Halaman Lain • Menggunakan tag • <A HREF=”halamanbaru.html”> Label </A> • Contoh: • <A HREF=”latihan20b.html”>Kelatihan 20 </A> • <A HREF=”latihan20c.html”><IMG SRC=”gambar.jpg”> </A>

  20. LinkKe Halaman Lain <html> <head> <title>Font</title> </head> <body > <h1 align="center">Contoh Link </h1> Mandriva Enterprise Server 5.1<br> * Pelatihan printing, virtualization and <b><nobr>directory services</nobr></b>. .<br><br> <A HREF="latihan20b.html">Kelatihan 20 </A> <br><br> Hubungi kami di call center, Klik pada gambar<br> <A HREF="latihan20c.html"><IMG SRC="gambar.jpg" width="120" height="120"> </A> </body> </html>

  21. LinkKe Halaman Lain

  22. Anchor Link Ke Halaman Yang Sama • Achor adalah membuat user meloncat ke bab tertentu pada halaman yang sama. • Membuat anchor. Pada tempat yang dituju tempatkan anchor dengan menggunakan tag <A> sbb: <A name=”nama anchor”> label nama </A> • Pemanggilnya menggunakan # dengan tag sebagai berikut. <A href=”#nana anchor”> label nama </A>

  23. Anchor Link Ke Halaman Yang Sama <html> ....... <h2>Manfaat Mentimun</h2><br><br> Daftar Isi:<br> <ul> <li><a href="#sariawan"><b> Obat Sariawan </b></a> <li><a href="#kulit"><b> Perawatan kulit dan wajah</b></a><br> <li><a href="#darting"><b> Memperlancar air seni dan menurunkan darah tinggi</b></a><br> <li><a href="#mata"><b> Mata yang sering lelah dan mengantuk</b></a><br> <li><a href="#jerawat"><b> Obat Jerawat</b></a><br> <li><a href="#demam"><b> Obat Demam</b></a><br> </ul> <br> <img src="ketimun-300x300.jpg"><br> <a name="sariawan"><b> Obat Sariawan </b></a><br> Timun ternyata bermanfaat untuk meredakan sariawan atau seriawan. Dengan memakannya setiap ....... <a name="kulit"><b> Perawatan kulit dan wajah</b></a><br> Perawatan dengan buah-buahan selama ini dianggap relatif aman bagi kesehatan kulit wajah dan ........ <a name="darting"><b> Memperlancar air seni dan menurunkan darah tinggi</b></a><br>

  24. Anchor Link Ke Halaman Yang Sama

  25. Frame • Tugas mempelajari frame • Buat website dengan minimum 2 frame,kiri dan kanan. • Sebelah kiri menu dan sebelah kanan target. Contoh: • Desain yg baik akan membuat nilai anda lebih baik.

  26. Thank you !

More Related