Kursor

Cute Happy Ghost

Pages

Rabu, 19 Oktober 2016

HTML

08.58    6 comments

HTML

Pada kesempatan kali ini author akan memperlihatkan Cara membuat "Website Offline" memanfaatkan HTML dengan menggunakan Sublime Text 3

Sublime Text 3.0 64 bit atau 32 bit

Cara Membuat Frame HTML

Sekarang, kita akan membuat halaman web yang memiliki frame dengan tiga bagian (seperti gambar FRAME A2). Pertama, kita perlu membuat file pengisi frame sebanyak 3 buah.
  1. Buatlah file HTML berikut, simpan dengan nama logo.html
    1.<html>
    2.<head>
    3.<title></title>
    4.</head>
    5.<body bgcolor="#006699">
    6.<h2><font color="#FFFFFF">Cara Membuat WEB</font></h2>
    7.</body>
    8.</html>

  2. Selanjutnya, buatlah file yang kedua, simpan dengan nama menu.html
    01.<html>
    02.<head>
    03.<title></title>
    04.</head>
    05.<body bgcolor="#CCCCFF">
    06.<h4>Latihan</h4>
    07.Mencoba latihan membuat Frame HTML
    08.</body>
    09.</html>
     
  3. Buatlah file yang ketiga, simpan dengan nama welcome.html

    01.<html>
    02.<head>
    03.<title></title>
    04.</head>
    05.<body>
    06.<h2>Selamat Datang</h2>
    07.<h4>Anda berada pada halaman latihan Membuat FRAME HTML</h4>
    08.</body>
    09.</html>
     
  4. Yang terakhir adalah kita membuat file pendefinisi frame, simpan dengan nama index.html

    01.<html>
    02.<head>
    03.<title></title>
    04.</head>
    05.<frameset rows="25%,*" border="0">
    06.<frame name="atas" src="logo.html" />
    07.<frameset cols="20%,*">
    08.<frame name="menu" scrolling="no" src="menu.html" />
    09.<frame name="isi" src="welcome.html" />
    10.</frameset>
    11.</frameset>
    12.</html>

Background Image Atau Gambar HTML
 Background pada suatu website dapat dipermanis dengan menggunakan image atau gambar. Syarat utamanya adalah anda harus memiliki image yg ber-ektensi .jpg .gif atau .png setelah itu anda juga harus memasukkan image tersebut kedalam folder file HTML yang anda buat.
Untuk membuat background Image dapat menggunakan tag <body background="nama image.jpg/png/gif">
Contoh :
<html>  <head> <title> Background Image </title> </head> <body background="Jellyfish.jpg">  <p style="font:bold 50px Georgia ;color:green">Selamat datang di Websiteku</p> <hr color="ff0000" size="4"> <p style="font:20px Calibri ;color:white"> Cara membuat latar belakang dengan gambar </p> </html>

Cara Membuat link di HTML

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini
Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti dibawah ini.
Contoh penggunaan tag link <a>:
<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link</h1>
  <p>Saya sedang belajar HTML dari 
  <a href="http://harsuluzyaj.blogspot.co.id">Lab Pik</a></p>
</body>
</html>
 
Berikut Tayangan HTML dari Author setelah dipermanis dengan Background,Hypertext dan Frameset

6 komentar: