tgs pemrograman berbasis web I


“Pembuatan Website Sederhana Menggunakan
HTML (Hyper Text Markup Language)”


Disini merupakan tutorian sederhana pembuatan website dengan html yang perlu disiapkan adalah notepad pada Windows.
1.      Pertama dalam penyimpanannya bisa menggunakan aplikasi xampp.exe atau dengan wampserver.exe,
2.      Sebelum membuat,bukalah terlebih dahulu notepad pada windows,



1.      Tuliskan perintah ini di dalam notepad:
<html>
<head>
<title>Form Mahasiswa teknik</title>
</head>
    Ini merupakan awal dalam pembuatannya yang diberi nama form Mahasiswa teknik

2.      Kemudian background dapat diberi warna maupun gambar dan juga text bisa diberi warna sesuai yang diinginkan dengan perintah:
Perintah merubah warna text misalkan warna merah
            <body text="red">
Perintah merubah warna background
            <body bgcolor="blue">
Perintah merubah warna background dengan gambar
            <body background="ump.jpg">

3.      Ketikan judul dalam websitenya dengan perintah
<pre>
<form method="post">
<blink><h1><font face="Old English Text MT">Data Mahasiswa Fakultas Teknik</font></h1></blink> <HR WIDTH=500 align=left>

Ø  Untuk perintah merubah tipe text yang inginkan:
            <font face="Old English Text MT">Data Mahasiswa Fakultas Teknik</font>
Ø  Untuk ukuran huruf:
            Ditambahkan               <h1>......</h1>
Karena perintah <h1> huruf paling besar jika semakin kecil gengan h2,h3,h4,h5,dan h6 yang paling kecil dengan diakhiri </h...> 
Ø  Perintah agar huruf berkedip:
<blink>.........
Diakhiri dengan .....</blink>
Ø  Dibawah juduh bisa diberi garis bawah panjang serta ukurannya maupun posisinya dengan ditambahkan,
<HR WIDTH=500 align=left>

4.      Selanjutnya tambahkan dengan perintah,
            <h3><font face="Matura MT Script Capitals">Nama</font>                       : <input type="text" size="25" />
Perntah ini untuk menampilkan seperti ini serta dengan kotak isian yang harus diisi ukuaran huruf akan berbeda,jenis hurufpun berbeda:
Nama         :

1.      Selanjutnya hampir sama perintahnya:
    <font face="Matura MT Script Capitals">NIM</font>                 : <input type="text" size="25" />

<font face="Matura MT Script Capitals">Jenis Kelamin</font>       : <input name="jeniskelamin" value="L" type="radio">Laki-laki
              <input name="jeniskelamin" value="P" type="radio">Perempuan

<font face="Matura MT Script Capitals">Tanggal Lahir</font>       : Tanggal <input type="text" size="10" />

              Bulan   <input type="text" size="10" />

              Tahun   <input type="text" size="10" />                    

<font face="Matura MT Script Capitals">Prodi</font>                    : <input name="favorit" value="ti" type="radio">Teknik Informatika      <input name="favorit" value="tk" type="radio">Teknik Kimia
              <input name="favorit" value="te" type="radio">Teknik Elektro     <input name="favorit" value="ts" type="radio">Teknik Sipil
              
<font face="Matura MT Script Capitals">Alamat</font>                 :
             <textarea rows=3 cols=20 ></textarea>

<font face="Matura MT Script Capitals">Telepon</font>                : <input type="text" size="25" />

<font face="Matura MT Script Capitals">Hobi</font>                     : <input type="checkbox"> Membaca    <input type="checkbox"> Browsing
              <input type="checkbox"> Menulis   <input type="checkbox"> bermusik
              <input type="checkbox"> Menyanyi            <input type="checkbox"> dll
Dengan tampilan seperti ini:

Nama           :  
            NIM           :
            Jenis Kelamin   : Laki-laki
                            Perempuan
            Tanggal Lahir    : Tanggal
                            Bulan  
                            Tahun                    
            Prodi            : Teknik Informatika  Teknik Kimia
                             Teknik Elektro              Teknik Sipil   
            Alamat          :
                            
            Telepon          :
            Hobi             :  Membaca    Browsing
                             Menulis    bermusik
                              Menyanyi   dll

1.      Serta kemudian di ttambah perintah seperti ini:
            <input type= reset value="Simpan"> <input type= reset value="Batal">
    Ini untuk perintah menampilkan kotak yang misal kita mau menimpan dalam data yang telah dibuat,

2.      Setelah selesai notepad langsung save maupun save as dengan format nama file yang akan disimpan kemudian dibelakang ditambahkan dengan .html langsung pilih save, jika menyimpan di xampp, bukalah terlebih dahulu data di C kemudian buka xampp terus file .html disimpan di htdoc, jika di wampsarver sama saja di C buka wamp kemudian simpan file di folder yang telah dibuat.
3.      Kemudian jika memangggil file .html bisa langsung dibuka file tersebut dan juga bisa dipanggil melalui web browser yang ada pada windows yang telah ada sebelumnya dengan menulis di addrees bar yaitu ketik localhost/.......nama file yang telah disimpan kemudian .html lalu enter akan langsung muncul tampilan html yang telah dibuat. Seperti ini:
tgs pemrograman berbasis web I Rating: 4.5 Diposkan Oleh: Unknown

1 comment:

Anonymous said...

like this,,
bsa ne wad sharing :)