Pertemuan 7(Pemograman Website)

Cara Membuat Form

             Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi, dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau memasukkan gambar, membuat form relatif lebih sulit.

             Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web

Langkah-Langkah Membuat Frame

-Pertama,Buka Notepad/Notepad++/Sublime text

-Kedua, Masukkan Script Berikut

Gambar 7.1 Tampilan Script Form

-Ketiga, Save dengan format .html kemudian buka browser anda

-Keempat, Buka File Anda yang telah anda simpan

-Hasilnya Akan Tampil Seperti Ini

Gambar 7.2 Tampilan Hasil Script Form

Pertemuan 6(Pemograman Website)

Quis kedua

Cara Membuat Frame Pada website HTML

                 Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian ataupun membuat bingkai pada website html. Setiap bagian kita isi dengan sebuah halaman web yang kita inginkan .
Frame dapat digunakan untuk Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya

Langkah-langkah Membuat Frame

1. Membuat Frame Masternya

2.Membuat Web Isi Frame kedua

3.Membuat web yang apabila kita mengklik item di frame kedua akan muncul pada frame ketiga

-Pertama, Buka Notepad atau notepad++

-Kedua, Membuat Web Frame 

 

Tampilan Script Web Frame Utama

 

Tampilan Script Frame 1

 

Tampilan Script Frame 2

 

Tampilan Script Frame 3 

 

Tampilan Hasil Dari Script-Script Diatas

-Ketiga, Membuat Isi Menu Frame 2 yang terdiri dari Halaman Biodata,Jadwal, Dan Absen

 

Tampilan Script Halaman Biodata

 

 Tampilan Hasil Script Halaman Biodata

 

Tampilan Script Halaman Jadwal  

 

Tampilan Hasil Script Halaman Jadwal

 

Tampilan Script Halaman Absen

Note : Script yang saya minimize sama seperti script yang diatas hanya beda namanya saja tetapi formatnya sama 

 

Tampilan Hasil Script Halaman Absen

Pertemuan 5(pemograman website)

Cara Memasukkan Gambar Pada Html

-Pertama,Masukkan Kode Script berikut pada notepad atau notepad ++

 

Gambar 5.1.1 Tampilan Script latihan tag gambar

-Kedua,Save file dengan format .html

-Ketiga,Buka browser dan bukalah file anda

-Keempat,Hasilnya Akan tampil seperti ini

 Gambar 5.1.2 Tampilan Hasil Dari script tag gambar 

Cara Memasukkan Gambar dengan perintah <ALT>

               Atribut alt ( alternative description ) merupakan atribut yang berfungsi sebagai keterangan atau deskripsi dari gambar jika gambar tersebut gagal ditampilkan oleh web browser. Atribut alt juga berperan penting untuk search engine seperti Google yang meng-index seluruh isi situs dengan cara memproses tulisan yang ada. Pentingnya atribut alt untuk sebuah gambar karena google tidak mengerti bentuk dari gambar tanpa menambahkan deskripsi pada sebuah gambar.

-Pertama, Masukkan Script Kode berikut pada notepad atau notepad ++

Gambar 5.2.1 Tampilan Script Tag gambar menggunakan alt

-Kedua,Simpan File dengan Format .html

-Ketiga,Buka browser anda dan buka file anda

-Keempat, hasilnya akan tampil seperti ini

Gambar 5.2.2 Tampilan Hasil Tag gambar menggunakan alt

note : Perintah ALT sebagai keterangan  gambar apabila gambar tidak di deteksi oleh web. Hal ini memang saya sengajai agar kita bisa mengetahui fungsi perintah ALT

Cara Membuat Tabel Pada HTML

  

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.3.1 Tampilan Script pembuatan tabel pada html

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.3.2 Tampilan Hasil Pembuatan tabel pada html

Cara Membuat Tabel Dengan Perintah Align&Valign Pada HTML

  

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.4.1 Tampilan Script Tabel Align&Valign

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.4.2 Tampilan Hasil Tabel Align&Valign

Cara Membuat Tabel Dengan Perintah Cellpadding dan Cellspacing Pada HTML

  

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.5.1 Tampilan Script Tabel dengan Cellpadding&Cellspacing

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.5.2 Tampilan Hasil Tabel dengan Cellpadding&cellspacing

Cara Membuat Tabel Dengan Perintah Rowspan dan Colspan Pada HTML

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.6.1 Tampilan Script Pembuatan tabel dengan rowspan&colspan

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.6.2 Tampilan Hasil Pembuatan tabel dengan rowspan&colspan

Cara Membuat Frame Dengan tambahan hyperlink tulisan berjalan (marquee) dan kedap-kedip (blink)

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.7.1 Tampilan Script

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.7.2 Tampilan Hasil Dari Script diatas

Pertemuan 4(pemograman website)

Quis Pemograman website

Soal
 Buatlah tampilan menu utama dengan melakukan link ke beberapa file, dengan ketentuan sebagai berikut:
          Buatlah Folder dengan Nama Nim Anda
          Contoh:21615012, kemudian isi File Terdiri dari
          A. File Master MEREK
          B. File TELEVISI
          C. File KOMPUTER
          D. File AC.
 
Jawab
  
A. Membuat Website File Master Merek

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html

Gambar 4.1 Tampilan Script Menu Utama(file master merek)

          Output(Hasil) Akan tampil seperti ini

 

Gambar 4.2 Tampilan Hasil File Master Merek 

B. Membuat Website Televisi

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html 

Gambar 4.3 Tampilan Script Website televisi

          Output(Hasil) Akan tampil seperti ini

Gambar 4.4 Tampilan Hasil Script website televisi

C. Membuat Website Komputer

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html 

 

Gambar 4.5 Tampilan Script website komputer 

          Output(Hasil) Akan tampil seperti ini

 

Gambar 4.6 Tampilan Hasil Script website komputer

 

 D. Membuat Website AC

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html 

.

 

Gambar 4.7 Tampilan Script website AC

 

          Output(Hasil) Akan tampil seperti ini

 

  

Gambar 4.8 Tampilan Hasil Script website AC

Pertemuan 3(Pemograman Website)

Cara Membuat Hyperlink

Latihan 3.1 Membuat Halaman Utama

-Pertama, Buka Notepad atau Notepad++

-Kedua,Ketik Script Berikut Ini dan save dengan format .html

Gambar 3.1 Tampilan Script Halaman Utama

-Ketiga, Buka Browser Anda dan buka file anda

-Hasilnya Akan Tampil Seperti Ini

Gambar 3.2 Tampilan Hasil Halaman Utama

Latihan 3.2 Membuat Halaman Website Visi-Misi

-Pertama, Buka Notepad atau Notepad++

-Kedua, Ketik Script Berikut Ini dan save dengan format .html

<html>

<head>

<title>STMIK Ichsan Gorontalo</title>

</head>

<body background="2.jpg" text="black">

<h1><p align="center">STMIK Ichsan Gorontalo</h1>

<ol type="I">

<li><b>Visi-Misi STMIK Ichsan Gorontalo</b>

<ul>

<li><b> Visi : </b><br>

menjadikan progrm studi unggul dalam bidang sistem informasi diindonesia bagian timur serta mampu menghasilkan lulusan yang jujur, bertanggung jawab, berkualitas dan bekerjasama

<br>

<li><b>Misi :</b><br>

<ol type="1">

<li>Menyelenggarakan pendidikan, penelitian dan pengabdian kepada masyarakat dalam bidang sistem informasi.

<li>Menciptakan pelayanan kegiatan akademik, administrasi dan kemahasiswaan yang efektif dan efisien dengan menggunakan teknologi informasi dan komputer.

<li>Menyenggalarakan kegiatan pengawasan, pengendalian, pembinaan kepada seluruh agar dapat beradaptasi dengan dunia kerja yang baik negeri maupun swasta

</ol>

</ul>

<li><b>Visi-Misi Program Studi</b>

<ol type="A">

<li><b>Komputer Akuntansi</b>

<ul>

<li><b>Visi</b><br>

Terwujudnya perguruan tinggi berkualitas , berkarakter dan berdaya saing nasional

<li><b>Misi</b>

<ol type="1">

<li>Mendidik dan mengembangkan sumber daya insani pada strata D3 K.A dengan dilandasi ilmu-ilmu berbasis teknologi dan akuntansi dengan pencapaian standar profesionalisme yang tinggi

<li>Menerapkan teknologi ilmu komputer  dan akuntansi untuk menghasilkan lulusan yang cerdas serta bermoral dan beretika

<li>Melakukan kegiatan yang bermanfaat bagi kesejahteraan masyarakat luas sebagai bentuk nyata kepedulian sekolah tinggi komputerisasi akuntansi

<li>Mengembangkan metode  dan gagasan inovatif dibanding komputerisasi akuntansi dalam penyelenggaraan pendidikan, penelitian  dan pengabdian masyarakat

<li>Menyelenggarakan pendidikan berbasis kompetensi  untuk menghasilkan lulusan unggul

</ol></ul>

<li><b>Sistem Informasi</b>

<ul>

<li><b>Visi</b><br>

Terwujudnya perguruan tinggi berkualitas , berkarakter dan berdaya saing nasional

<li><b>Misi</b>

<ol type="1">

<li>Mendidik dan mengembangkan sumber daya insani pada strata D3 K.A dengan dilandasi ilmu-ilmu berbasis teknologi dan akuntansi dengan pencapaian standar profesionalisme yang tinggi

<li>Menerapkan teknologi ilmu komputer  dan akuntansi untuk menghasilkan lulusan yang cerdas serta bermoral dan beretika

<li>Melakukan kegiatan yang bermanfaat bagi kesejahteraan masyarakat luas sebagai bentuk nyata kepedulian sekolah tinggi komputerisasi akuntansi

<li>Mengembangkan metode  dan gagasan inovatif dibanding komputerisasi akuntansi dalam penyelenggaraan pendidikan, penelitian  dan pengabdian masyarakat

<li>Menyelenggarakan pendidikan berbasis kompetensi  untuk menghasilkan lulusan unggul

</ol></ul>

<li><b>Manajemen Informatika</b>

<ul>

<li><b>Visi</b><br>

Terwujudnya perguruan tinggi berkualitas , berkarakter dan berdaya saing nasional

<li><b>Misi</b>

<ol type="1">

<li>Mendidik dan mengembangkan sumber daya insani pada strata D3 K.A dengan dilandasi ilmu-ilmu berbasis teknologi dan akuntansi dengan pencapaian standar profesionalisme yang tinggi

<li>Menerapkan teknologi ilmu komputer  dan akuntansi untuk menghasilkan lulusan yang cerdas serta bermoral dan beretika

<li>Melakukan kegiatan yang bermanfaat bagi kesejahteraan masyarakat luas sebagai bentuk nyata kepedulian sekolah tinggi komputerisasi akuntansi

<li>Mengembangkan metode  dan gagasan inovatif dibanding komputerisasi akuntansi dalam penyelenggaraan pendidikan, penelitian  dan pengabdian masyarakat

<li>Menyelenggarakan pendidikan berbasis kompetensi  untuk menghasilkan lulusan unggul

</ol></ul>

<h1><a href="utama.html">Kembali ke menu utama</h1>

</body>

</html>

-Ketiga, Buka Browser anda kemudian buka file anda

-Hasilnya Akan Tampil seperti ini

Gambar 3.3 Tampilan Hasil Latihan 3.2

Latihan 3.3 Membuat Halaman Website Matakuliah

-Pertama,Buka Notepad atau Notepad++

-Kedua, Ketik Script Berikut dan save dengan format .html

Gambar 3.4 Tampilan Script Halaman Matakuliah

-Ketiga, Buka Browser anda dan buka file anda

-Hasilnya Akan tampil seperti ini

Gambar 3.5 Tampilan Hasil Latihan 3.3

Latihan 3.4 Membuat Halaman Website Biodata

-Pertama,Buka Notepad atau Notepad++

-Kedua, Ketik Script Berikut dan save dengan format .html

Gambar 3.6 Tampilan Script Halaman Biodata

-Ketiga, Buka Browser anda dan buka file anda

-Hasilnya akan tampil seperti ini

Gambar 3.7 Tampilan Hasil Latihan 3.4

Note : Kalau Ingin pasang gambar background, gambar sama fotonya harus sefolder(ditempatkan pada folder yang sama agar bisa di mengerti oleh website)

Pertemuan 2 (pemograman website)

Latihan 2.1 Membuat Heading Pada Website HTML

 - Pertama, Buka Notepad atau Notepad ++

-     - Kedua, Ketik Script Berikut Ini dan save dengan format .html

Gambar 2.1 Tampilan Script Latihan 2.1

- Ketiga,Buka Browser Anda dan buka file anda

- Hasilnya Akan Tampil Seperti ini

Gambar 2.2 Tampilan Hasil Dari Latihan 2.1

Latihan 2.2 Penataan Paragraf Pada Website HTML

- Pertama, Buka Notepad atau Notepad ++

- Kedua, Ketik Script Berikut Ini dan save dengan format .html

Gambar 2.3 Tampilan Script Latihan 2.2

- Ketiga, Buka Browser Anda dan buka file anda

- Keempat, Tampilannya Akan Muncul Seperti Ini

Gambar 2.4 Tampilan Hasil Dari Latihan 2.2

Latihan 2.3 Pengaturan Font Ditambahkan Heading

- Pertama, Buka Notepad Atau Notepad ++

- Kedua, Ketik Script atau Kode sebagai berikut dan save Dengan format .html

Gambar 2.5 Tampilan Script Pada Latihan 2.3

- Ketiga, Buka Browser anda dan buka file anda yang sudah tersimpan

Gambar 2.6 Tampilan Hasil Latihan 2.3

Latihan 2.4 Subscript Dan Superscript Pada Website Html

-Pertama, Buka Notepad Atau Notepad++

-Kedua, Ketik Script atau Kode berikut dan save dengan format .html

Gambar 2.7 Tampilan Script Pada Latihan 2.4

-Ketiga, Buka Browser anda dan buka file anda yang sudah tersimpan

-Keempat, Hasilnya akan tampil seperti ini

Gambar 2.8 Tampilan Hasil Pada Latihan 5.4

Latihan 2.5 Membuat Bullet And Numbering

-Pertama, Buka Notepad Atau Notepad++

-Kedua, Ketik Script atau Kode berikut dan save dengan format .html

Gambar 2.9 Tampilan Script Latihan 2.5

-Ketiga, Buka Browser anda dan buka file anda yang sudah tersimpan

-Keempat, Hasilnya akan tampil seperti ini

Gambar 3.0 Tampilan Hasil Latihan 2.5