Setelah sebelumnya telah mempelajari tentang apa itu elemen dalam layout html, jika belum silakan kunjungi artikel Elemen Dalam Layout Halaman Web mari kita memulai praktek cara membuat halaman web sederhana di komputer kita.
Cara membuat halaman web sederhana sangatlah mudah, dikarenakan perangkat membuat web sangat mudah ditemui di internet dan rata-rata program tersebut gratis. Dalam tutorial kali ini perangkat yang dibutuhkan antara lain:
- Notepad, atau anda bisa mencoba notepad ++ yang mana dalam program ini tersedia fitur yang lebih baik ketimbang notepad bawaan windows.
- Browser sebagai program penampil halaman web. Jika anda pengguna windows, biasanya browser IE(Internet Explorer) akan terinstall otomatis. Anda juga bisa menggunakan browser dari google, yaitu Chrome.
yang pertama, buka program notepad dari komputer anda dengan cara:
- Mengeklik tombol windows
- Setelah itu klik tulisan All Program
- Maka akan muncul berbagai folder dan pilih folder yang bernama Accessories
- Klik folder Accessories, setelah muncul berbagai program dalam folder tersebut, klik program notepad.
Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini.
Pada gambar diatas terdapat dua blok, blok pertama yang bewarna hijau adalah tempat tombol Windows, dan yang kedua blok yang bewarna merah muda adalah tempat program Notepad.
Setelah program Notepad terbuka, silahkan ketikkan skrip dibawah ini atau jika ingin cepat anda bisa langsung mengkopi dan mempaste di notepad anda.
<html> <head> <title> Ini Adalah Title </title> </head> <body> <h1>Ini adalah Main Heading</h1> <p>Isi dari Main Heading, bisa berupa kata pembuka atau penjelas dari Main Heading, jika penjelasan terlalu panjang maka akan di bagi menjadi beberapa Sub-Heading.<p> <h2>Ini Adalah Sub-Heading</h2> <p>Kebanyakan artikel yang panjang memiliki sub-headings untuk membantu Anda mengikuti struktur apa yang sedang ditulis. Bahkan mungkin sub-sub-headings (atau tingkat yang lebih rendah Dari headings). </p> <h2> Sub-Heading Tambahan</h2> <p>Disini anda dapat melihat sub-heading tambahan.</p> </body> </html>
Setelah anda mengetik skrip diatas silahkan anda save dengan cara klik file dan save, ketika muncul halaman save ketikkan nama file ” index.html ” atau terserah anda, yang terpenting adalah nama file diakhiri .html
.
Setelah itu lihat kolom dibawah file name, disitu terdapat kolom Save as Type dan pilih All Files. Langkah selanjutnya tinggal klik tombol Save. Untuk lebih jelas silahkan lihat gambar dibawah ini.
Pada gambar diatas terdapat area yang diblok dengan warna hijau, diarea tersebut terdapat tulisan save, dengan mengeklik tulisan ini maka akan muncul halaman Save seperti gambar dibawah ini:
Perhatikan gambar diatas, terdapat dua area yang diblok. Pada area yang diblok dengan warna hijau adalah tempat untuk memberi nama file dan pastikan nama file berakhiran .html
. sedangkan area yang diblok bewarna merah muda adalah dropdown untuk memilih jenis file yang akan disimpan, pastikan pilihan berisi All files.
Setelah file html terbentuk dan tersimpan (dalam tutorial ini file disimpan dalam folder yang bernama ” new folder “) maka buka file tersebut dengan cara mengeklik dua kali, setelah itu akan ada browser yang menampilkan halaman web yang telah kita buat. Halaman web tersebut akan terlihat seperti gambar dibawah ini:
Pada gambar diatas terdapat dua area yang diblok, yang diblok dengan warna hijau adalah letak tulisan yang di ketik dalam Tag Title sedangkan yang bewarna merah muda adalah letak tulisan yang diketik didalam Tag Body.
Tutorial diatas adalah cara bagaimana membuat halaman web yang sederhana, belum menyentuh kearah pengaturan layout. Pengaturan layout akan melibatkan banyak elemen dan tentunya skrip CSS akan berperan penuh, untuk pembahasan lebih lanjut tentang layout akan dibahas dalam kategori belajar CSS pada kesempatan berikutnya.
Dalam tutorial ini hanya melibatkan skrip HTML, jika anda ingin membuat website sederhana yang melibatkan skrip CSS, anda bisa mengunjungi artikel ” Cara Membuat Website Sederhana dengan HTML 5 “.
Happy Nyekrip!
terima kasih informasinya, banyak ilmu yang saya dapatkan apalagi sebagai blog pemula.
sama-sama semoga bisa menambah wawasan.
makasih infonya gan, sangat berguna buat newbie kayak saya, ditunggu artikel berikutnya
Detail sekali tutorialnya, memudahkan saya yang baru belajar, thanks postingannya
sama-sama gan :)
thanks… tapi masih belum mudeng, maklum newbe :-)
tinggal kopas aja gan… pasti agan bisa… :)
Gan gimana cara bikin perintah “ketika diklik maka akan tampil ke tab baru”
klik new tab?
target=”_blank”
gan gmna cara bikin tata letaknya ya, maklum newbe hehe?
wahh baru taau nie.. nyimak aja.. masih belajar
Thanks For Tutor nya Gan :)
wah menarik ni gan , tutorialnya gak ribet
Pingback: Tahapan Desain dan Membuat Web | dzulfahmi96
Gan Kalau Mau Buat Articel Gimana ?
ini pelajaran dasar gan, masih jauh itu.. :)
kalo kita buat script nya di hape android , kira-kira bisa gak mas..
terimakasih
bisa aja gan… :)
Pingback: Pengertian CSS dan Cara penggunaannya | rafirizalfauzi
makasih ya min, maklum masih newbie
thanks min!
Gan kalo saya menambahKan halaman website dinamis langsung dari cPanelnya gan
Ga pake2 notepad lagi
Tapi saya tetap bersykur bisa baca postinganya Agan
Thanks gan buat triknya :)
thank you gan..bisa bermanfaat buat pemula yang baru belajar html dasar.
Pingback: Cara Membuat Website Sederhana dengan HTML 5 | hacobtewur
tutorial yang bagus.
Makasih tutorialnya ya kk sangat membantu banget buat saya terima kasih
Terimakasih tutorial bermanfaat banget,
TErima kasih untuk informasi nya gan..
bagaimana untuk meningkatkan trafik ke blog kita ?
Makasih sebelumnya
buatlah artikel yang bermanfaat, tetapi jarang atau belum ada yang share.. :)
Min, post dong cara buat script panel Instagram, belum paham ni susah kalau gak ada gamabarnnya ??
panel instagram? wah. belum pernah bikin.. dicoba dulu :)
keren gan sangat bermanfaat
senang bisa membantu :)
Thx banget gan. Dah nguplek kemana2 bru kali ni dpt pelajaran dasar yg ga bikin mumet. Apalagi buat aq, ibu yg punya anak 6 n mau buat usaha tambahan melalui sistem online. Klo ga keberatan aq mau jadi follower tetap ya gan ?
Tuhan berkati gan.
thanks doanya.. :)
mas saya pasang di blogspot kok gak bisa ya?
apa perlu coding tambahan?
yap betul… :)
Terima kasih gan, artikel & tutorialnya sangat-sangat membantu :)
Gan gimana caranya buat new tab?
pakai target=”_blank” contoh Visit Nyekrip
Ini bisa ditambah fungsi search ga mas?
terimahkasih dan saya tunggu artikel lainnya
mau nanya, biar tampilannya seo friendly gimana ya ?
cari artikelnya disini gan..
min cemana caranya menggabungkan file notepad yg berisi kode html dan css menjadi satu exsitensi web
Waw lengkap sekali mas. Pasti sangat bermanfaat terutama bagi para pemula. Sukses selalu.
Salam kenal.
kenapa jadi word?
gan, gimana caranya ya buat halaman di web offline ?
thanks ilmunya gan..sangat bermanfaat…kali2 mampir ke web ane gan www barayablacxbordir com
Bermanfaat banget artkelnya
Ini Adalah Title
Ini adalah Main Heading
Isi dari Main Heading, bisa berupa kata pembuka atau
penjelas dari Main Heading, jika penjelasan terlalu panjang maka
akan di bagi menjadi beberapa Sub-Heading.
Ini Adalah Sub-Heading
Kebanyakan artikel yang panjang memiliki sub-headings untuk
membantu Anda mengikuti struktur apa yang sedang ditulis.
Bahkan mungkin sub-sub-headings
(atau tingkat yang lebih rendah Dari headings).
Sub-Heading Tambahan
Disini anda dapat melihat sub-heading tambahan.
Gan jika pake ini webnya ap akn mengikuti gambar diatas?
Mantappp bro.
Detail dan sangat bermanfaat.
terimakasih atas artikelnya, sangat membantu..
Mas Admin…. Gimana caranya buat WebPage gini
Contoh Link Donwload :
hxxp: // dl . meownime . com /? url= aHR0cHM6Ly91c2Vyc2Nsb3VkLmNvbS9hZjN1bDFtN3owNm8=
Gimana ya cara buat Halaman Tersebut.
Mohon Bantuannya.
Mohon cepat dibalas ya >.<
wah saya kurang tahu kalau yang itu, mungki pakai api facebook..
Mantap gan artikelnya sangat membantu, jangan liupa mampir ke web kami untuk informasi pembuatan website :) Thanks
makasih tutorial nya ya..makin ngerti
btw saya send 1 pertanyaan via email tentang install xampp
thanks
R
trimakasih infonya, bermanfaat sekali
terima kasih sangat bermanfaas sekali
terima kasih sangat bermanfaat sekali
terimakasih…
cara mengatur ukuran tampilan ?
ukuran tampilan bisa diatur dengan css
disini dijelasin mana yang harus di tulis di title n body nya,jdi lebih tau,trimaksih infonya Gan,,,,,
ada gak gan tutor buat halaman web buat php
pertahankan website nyekrip gan sangat membantu buat pemula bagi saya.