Membuat Desain Login Melalui HTML

    Saya dan teman-teman saya memiliki proyek utuk membuat sebuah portal sistem informasi management pendidikan untuk sekolah saya.
Salah satu tugasnya adalah membuat sebuah jaringan wifi sendiri, nah setelah berhasil setting jaringan wifi sebenarnya teman saya sudah membuat desain login hotspot yang memiliki ciri khas dari sekolah saya. Tapi saya juga membuat desain login juga supaya saya dapat membuat desain login sendiri meskipun tidak digunakan (iseng* doang :D)

   Sebelum kita buat desain login-nya kita harus mendownload template login mikrotik ini secara gartis disini. Tetapi pada tutorial kali ini saya akan memberi contoh editing file template login yang sudah berhasil saya buat :

 1. Kita download dulu template yang udah jadi disini. Template yang uda jadi ini memudahkan kita untuk membuat template sesuai dengan ciri khas wifi kita sendiri.

2. Mengganti background template. Pada umumnya dalam sebuah folder template login mikrotik terdapat folder image nya. Jika tidak ada mungkin file gambar backgroundnya ada di dalam folder template login tersebut. nah disitu cara kita ganti background template. Cara paling mudah adalah mengganti ( replace ) gambar asli bawaan saat kita download dengan gambar yang akan kita jadikan backgroundtanpa perlu lagi mengubah file html atau css nya lagi . Yang perlu di perhatikan ekstensi file gambar nya harus sama yaa ( .jpg , .png , jpeg dll ). Kalau belum sama di samakan dulu  yhaa.

3.  Mengganti judul web login mikrotik.

• Kita mulai bermain dengan koding html dan css

• Kita buka file index.html atau login.html yang ada di dalam folder login menggunakkan teks editor, gedit, atau notepad. Nahh di situ koding html nya , Kalau milik saya pada baris ke 5 terdapat perintah untuk membuat judul web login mikrotik :

<title>SMK Kristen 5 Klaten</title>

4. Mengganti tulisan pada header.
Masih pada file login.html atau index.html pada baris ke-n kita ganti tulisan header sesuai dengan yang di inginkan. Karena saya akan membuat desain login maka pada header nya saya kasih nama sekolah saya :

 <h1><b><marquee direction="Left" height="25" scrollamount="2" width="50%" behavior="alternate"> Welcome To Login </marquee> </h1>

Notes :
Perintah <marquee> : perintah membuat efek tulisan berjalan .
Direction : Mengatur arah gerakan teks (left, right, up dan down)
Scrollmount : Mengatur kecepatan gerakan. semakin tinggin nilainya maka semakin cepat
Behavior : Mengatur gerakan teks (scroll, slide, alternate).

4. Mengganti header pada kotak login, Pada tag :

 <h2> SMK Kristen 5 Klaten </h2>

5. Simpan perubahan dan hasil desain login yang saya buat seperti ini
Hanya sedikit perbedaan desain login saya dengan desain login milik teman saya

atau desain login saya yang lain

  Baca juga disini untuk belajar koding html, css, jquery, javascript, php, sql dll. 

Terima Kasih