slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web Programming HTML Dasar- lanjut PowerPoint Presentation
Download Presentation
Web Programming HTML Dasar- lanjut

Loading in 2 Seconds...

play fullscreen
1 / 29

Web Programming HTML Dasar- lanjut - PowerPoint PPT Presentation


  • 126 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Programming HTML Dasar- lanjut' - diella


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Web ProgrammingHTML Dasar- lanjut

Rudy Gunawan

Powered by www.RedOffice.com

layout halaman page layout
Layout HalamanPage Layout
  • Ada beberapa tag yang berpengaruh terhadap keseluruhan halaman.
  • Menyangkut margin, colom, warna background, dll.
menentukan margin halaman
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
center
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>
membuat indents
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>
menggunakan pixel shims
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.
background color dan gambar
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=””>
background color dan gambar1
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>

background color dan gambar2
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

block quote
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>

short quote
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>

mengontrol line break
Mengontrol Line Break
  • Tag <BR> adalah untuk ganti baris.
  • Tag <NOBR> </NOBR> kata-kata diantara tag ini jangan dipisahkan barisnya.
mengontrol line break1
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>

mengontrol line break2
Mengontrol Line Break

Browser kita kecilkan

slide21
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).
link ke halaman lain
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>
link ke halaman lain1
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>

anchor link ke halaman yang sama
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>
anchor link ke halaman yang sama1
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>

frame
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.