Membuat Halamamn Web menggunakan HTML

Hay Assalamualaikum wr.wb teman-teman.

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 .

Soooo... Let's Go...

Cara membuat Layout

• 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

 Pada langkah ini saya akan membuat bagian Header sebagai Judul Website dan Footer, dengan tulisan warna putih, dengan background warna hitam. 

Sebelumnya saya menambahkan header dan footer  terlebih dahulu pada bagian <style>. Dengan menambahkan padding untuk spasi atau ruang diantara konten dan border. Lalu agar text nya rata tengah, saya menggunakan  text-align : center ; , dan  background dan warna tulisan  saya menggunakan cara sebagai berikut :

 

Untuk headernya saya menggunakn Tag <header> yang digunakan untuk bagian halaman web yang merupakan header dan Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Untuk membuat judul di HTML saya dengan font lebih besar dari isi , saya menggunakan sebuah tag khusus yaitu heading. Heading biasanya digunakan untuk judul dari paragraf atau mengatur ukuran huruf pada header. Saya menggunakan heading 1 <h1>. 

DAN HASILNYA SEPERTI INI

•         Langkah 5

Pada langkah ini kata yang paling akhir pada Judul Website tadi diberi warna dengan menggunakan span. Caranya sama dengan langkah 4, hanya saja pada <header> nya ditambahkan tag <span> pada kata yang ingin diberi warna dengan menambahkan style = “ color :  “  .

DAN HASILNYA SEPERTI INI

 

•          Langkah 6

Pada langkah ke 6 ini saya akan membuat suatu Bagian Navigasi yang terdapat 5 link ke bagian web lain, dengan rata tengah, dan memiliki background tertentu.

Pertama saya akan memberikan backgroundnya terlebih dahulu dengan menggunakan tag <div>, tag <div>  adalah tag yang tidak memiliki makna apa-apa. meskipun tidak bermakna ini malah menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web, terutama tag <div>. Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS. Setelah itu saya menambahkan

atribut  style = “ background-color :    ;color :  ; padding :  ;   “..

Apa kegunaan padding disitu untuk spasi atau ruang diantara konten dan border.

Setelah itu untuk membuat   Bagian Navigasi nya saya menggunakan tag <p> dengan align = “ center ” agar tulisan rata tengah. lalu saya menggunakan tag <a>, tag html yang berfungsi untuk menghubungkan ke internal atau ekserrnal halaman web, dengan atribut href yang di tambahkan kedalam tag a dimana value dari href ini adalah url yang akan kita tuju. 

DAN HASILNYA SEPERTI INI

• Langkah 7

Untuk langkah selanjutnya saya akan membuat Bagian Konten Selamat datang yang memiliki judul dan paragraf isi.

Yang pertama saya akan menambahkan style terlebih dahulu untuk membuat Bagian Konten yang dapat anda lihat seperti dibawah ini, saya menambahkan article untuk mendefinisikan artikel yang akan saya buat, lalu margin-right yang merupakan jarak titik tengah terhadap jarak titik yang berada di sebelah kanan titik tengahnya. Lalu border-right untuk menentukan batas-batas yang berbeda untuk sisi yang berbeda. Padding sebutan untuk spasi atau ruang diantara konten dan border. Dan overflow : hidden ;

Mungkin anda dapat lebih memahaminya melalui gambar berikut :

Lalu untuk di bagian body, saya menggunakan tag <article> guna memanggil isi data yang sudah terdapat pada style tadi, disini saya juga menambahkan tag <marquee> untuk meberikan aksen tulisan tersebut menjadi  bergerak. Dan diakhir kalimat juga. Dengan align dan font style yang dapat anda lihat pada gambar diatas. Lalu untuk judul saya menggunakan heading nomor 2 <h2>, dan untuk isi Bagian Konten saya menggunakan tag <font dengan atribut style = “ font-family : ” >  untuk menentukan  font tulisan yang akan kita buat. Dan tag <pre> yaitu singkatan dari Preformatted Text. Jadi sesuai dengan namanya, tag ini digunakan untuk text yang belum diformat. Jadi text yang akan saya input ke dalam tag <pre>, maka HTML akan menampilkan text tersebut sesuai dengan ‘ apa adanya ’. Artinya text ini akan ditampilkan sesuai bagaimana text tersebut di buat, termasuk spasi yang ada di dalamnya. 

DAN HASILNYA SEPERTI INI

•      Langkah 8

Pada langkah terakhir in saya akan membuat Bagian Sidebar di sebelah kanan Bagian Konten yang terdapat link ke web eksternal , dengan menggunakan background tertentu.

Terlebih dahulu untuk membuat Bagian Konten yang dapat anda lihat seperti dibawah ini, saya menambahkan nav, nav ul, dan nav ul a di style untuk membuat navigasi link yang akan saya buat, pertama untuk membuat Bagian Sidebar nya tadi pada bagian nav tadi saya menambah kan element { float:right; } yang memiliki arti dalam platform Blogspot bahwa suatu widget akan berada pada letak sebelah kanan dalam tampilannya. Lalu saya menambahkan max-width ini hampir sama dengan property width, bedanya fungsi dari max-width hanya mengatur lebar maximal saja. atribut height untuk mengatur tinggi tabel, dan juga mengatur tinggi masing-masing baris. Lalu margin, margin merupakan spasi atau ruang kosong di dalam Box Model. Lalu border-right untuk menentukan batas-batas yang berbeda untuk sisi yang berbeda.

Padding sebutan untuk spasi atau ruang diantara konten dan border. Lalu memberinya background. Dan tata letak text dengan menggunakn text-align.

Terus pada bagian nav ul saya menambahkan list-style-type:    ;  dan padding:   ;    dan pada bagian nav ul a saya menambahkan text-decoration:     ;

Lalu untuk di bagian body, tag <nav> dengan atribut class = “ nav ” guna memanggil isi data yang sudah terdapat pada style tadi, lalu menambahkan tag <ul>  yang digunakan untuk membuat daftar dengan penanda simbol. lalu tag <li> yang digunakan untuk menambah daftar/isi dari tag <ul> tadi dan untuk text nya menggunakan heading nomor 2 <h2>. lalu saya menggunakan tag <a>, tag html yang berfungsi untuk menghubungkan ke internal atau ekserrnal halaman web, dengan atribut href yang di tambahkan kedalam tag a dimana value dari href ini adalah url yang akan kita tuju.

 

 

DAN HASILNYA SEPERTI INI

DAN INI HASIL KESELURUHANNYA SEPERTI INI