Sistem Informasi Fasilkom: Pemrograman Web Part2

Haiii Assalamualaikum wr.wb teman-teman ketemu lagi deh....

Nah kali ini saya akan menerangkan dan menjelaskan gimana cara membuat web dengan menggunakan aplikasi sublime text. Bagi teman-teman yang belum mempunyai aplikasinya, bisa di download terlebih dahulu aplikasi sublime text.

https://www.sublimetext.com/download .

let's goo......

Langkah 1

Buka aplikasi Sublime Text 3. Maka akan muncul tampilan awal seperti gambar di bawah ini.

Langkah 2

Tuliskan tag html pada kotak isian. Jika ingin lebih cepat menuliskannya, cukup dengan menulis html dan tekan TAB di keyboard. Maka secara otomatis tag html akan muncul.

· Langkah 3

Untuk menambahkan title pada web saya, saya bisa langsung mengetiknya di sebelah tag <title> menambahkan title </title>. Title ini berfungsi untuk membuat judul untuk

dokumen HTML.

· Langkah 4

Disini saya menggunakan "line break" / “enter” yang hanya perlu menambahkan tag yang sangat sederhana yaitu <br /> . Yang dimana <br/> difungsikan untuk memberi baris baru/pindah baris

· Langkah 5

Untuk menambahkan background dengan warna tertentu di html saya, disini saya menambahkan tag <body style="background-color:lightblue"> untuk menginginkan background yang bewarna. Jadi background color dari html ini sangat banyak dan bermacam-macam yang memiliki warna tertentu dan kode tertentu, yang bisa menjadi referensi melalui web ini : http://www.infoindong.com/2013/01/kode-warna-html.html

· Langkah 6

Untuk step berikut ini saya akan membuat sebuah judl tulisan dengan warna tertentu menggunakan HEX . Yang dimana HEX itu merupakan warna yang terdiri dari 6 digit kode warna HTML. bisa menjadi referensi di web ini juga: http://www.infoindong.com/2013/01/kode-warna-html.html .

Hasil gambar untuk penjelasan hex pada html

Lalu saya menggunakan heading judul nomor 1 <h1>, dengan text-align: center,dan paragraf <p font style="font-family: snap itc; “>

· Langkah 7

Lalu menambahkan sebuah gambar yang dimana bagian dari gambar tersebut dapat di klik, dan jika di klik akan membuka situs tertentu pada halaman baru.

Jadi disini saya menambahkan tag <img> dengan atribut <src> yang digunakan untuk menentukan sumber file, lokasi dimana file disimpan. Untuk menampilkan gambar tersebut terlebih dahulu saya mencari nya melalui google image, setelah itu saya mengklik kanan dan memilih “copy image location” contohnyo : https://www.google.co.id/webhp?hl=id&sa=X&ved=0ahUKEwj9tMTO3s3RAhVBLo8KHbrbBvUQPAgD . Setelah itu saya copy paste pada <img src = “ “ >saya. Untuk membuat agar 2 gambar tersebut saya menggunakan aplikasi GIMP2 untuk mengukur bagian mana yang dapat di klik, dan kalian bisa menjadi referensi cara mebuatnya melalui website ini : https://www.youtube.com/watch?v=vDwDtp4fCkU&t=310s . Kalau menggunakan aplikasi ini saat ya membuka file yg telah di edit tadi ke dalam notepad+ semua keterangan rinciannya sudah ada baik itu width=" ", height=" ", border=" " , usemap=" " , <map name=" ">, <area shape=" " coords=" x ,y ,z " href=" " ..

· Langkah 8

Pada step ini saya menambahkan sebuah tabel untuk diisikan sebuah paragraf yang akan saya tulis. Dengan menggunakan <table> denganatribut border yang digunakan untuk memberikan nilai garis tepi dari tabel.pada paragraf ini saya menggunakan heading nomor 2 <h3>, dengan text-align: left, namun disini saya menggunakan style color berupa HEX, saya juga menambahkan style font saya style="font-family: tekton pro; , dengan " text-indent="40px", dan untuk huruf pertama setiap paragraf dibikin dengan huruf kapital dan font berukuran lebih besar menggunakan dan font style="font-size: 150%" . Dan menambahkan   di depan kalian sebagai tab paragraf.

Dan saya juga gunakan ke-10 element berikut di dalam tulisan saya:

<b> berfungsi sebagai elemen mendefinisikan tebal teks, tanpa pentingnya tambahan.
<em> berfungsi untuk membuat teks tebal.
<i> berfungsi sebagai elemen yang mendefinisikan italic text/text miring
<small> berfungsi untuk membuat teks tebal.
<strong> berfungsi sebagai elemen mendefinisikan tebal teks, tanpa pentingnya tambahan.
<sub> berfungsi untuk memberikan efek subscript pada text.
<sup> berfungsi untuk memberikan efek superscript pada text.
<ins> berfungsi untuk membuat teks bergaris bawah.
<del> berfungsi untuk memberi garis tengah pada teks/mencoret text.
<mark> berfungsi untuk menandai suatu teks.