Cara Membuat Desain Website Berbasis Html Dengan Notepad ++

Cara Membuat Desain Website Berbasis Html Dengan Notepad ++

Langkah 2 - Membuat Dokumen HTML Baru

Setelah Notepad terbuka, pertama-tama, kamu harus membuat dokumen HTML baru. Kamu cukup mengetik di baris pertama. Ini adalah deklarasi yang memberitahu browser bahwa ini adalah dokumen HTML5.

Langkah 3: Menyimpan dan Membuka Halaman Web

Setelah kamu menambahkan sejumlah konten, simpan file dan buka dengan browser web. Kamu sekarang harus melihat konten yang kamu buat tadi.

Cara Membuat Website dengan HTML

Setelah mengetahui pengertian dan fungsi dari bahasa HTML dan juga CSS, sekarang Anda dapat mulai mencoba membuat website. Lakukan tahapan-tahapan di bawah ini:

Tahap pertama Anda perlu menginstal aplikasi Text Editor. Selain Notepad yang memang jadi bawaan Windows, ada banyak pilihan tools untuk Text Editor.

Seperti Visual Studio Code atau VSCode, Sublime Text, Vim, Komodo edit, dan Notepad ++.

Ketika memilih Text Editor pastikan dulu spesifikasi komputer Anda. Misalnya berapa besaran RAM komputer Anda. Hal ini dikarenakan bahwa untuk beberapa aplikasi Text Editor bisa dijalankan dengan baik pada komputer dengan spesifikasi tertentu. Serta pilih aplikasi yang tidak berbayar.

Karena Anda sedang belajar membuat website, sebagai pemula Anda dapat memilih Notepad ++. Aplikasi ini berbeda dengan Notepad sebelumnya karena menyediakan berbagai fitur pendukung.

Notepad ++ juga termasuk Text Editor gratis yang bisa dipakai untuk komputer dengan spesifikasi ram 2GB.

Selain Notepad ++ ada juga Text editor lain yang masih buatan Microsoft, yaitu VSCode. Meski begitu tools ini juga tersedia untuk sistem operasi Mac Os dan Linux.

Anda dapat menggunakan VSCode untuk membuat website dengan HTML dan CSS.

Setelah memilih aplikasi Text Editor, langkah selanjutnya adalah membuat file HTML untuk mulai menyusun tag. Misalnya buatlah file index.html. Pada file ini Anda akan merangkai struktur halaman website.

Secara garis besar, dalam setiap halaman tersusun atas 4 bagian yaitu:

Sehingga rangkaian tag yang Anda buat pada Text Editor, dimulai dengan mencantumkan tag DTD lalu tag HTML.

Setelah itu Anda menyusun bagian tag head untuk mengisi informasi mengenai meta tag charset, title, dan link dari file CSS yang nantinya akan dibahas lebih lanjut. Contoh penulisannya seperti ini:

Personal Blog

Baru kemudian lanjut ke tag body, untuk mengatur homepage website. Di mana biasanya berisi navigation bar, text container, paragraph, sampai bagian footer.

Selain itu jangan lupa menambahkan gambar yang sesuai. Sebelum itu pastikan Anda sudah mengumpulkan semua foto, gambar dan aset untuk membuat website dalam satu folder agar lebih mudah.

Berikut contoh penulisan pada bagian body untuk personal blog:

 

       

     

       

Hello,

       

I’M IndonesianWriter.com

       

A ONE STOP CONTENT MARKETING SOLUTION FOR YOUR BUSINESS’ GROWTH

       

Ready to get your content enhance with IndonesianWriter?

             
 

   

You can reach me on

   
                           

Cara membuat website dengan HTML Selanjutnya adalah dengan membuat file CSS untuk memberikan tampilan website yang lebih menarik. Pada text editor buat file dengan extension CSS misalnya style.css.

Kemudian mulailah memasukkan kode untuk menambahkan elemen pada halaman web. CSS ini akan sangat membantu karena bahasa HTML sendiri terbatas dan fokusnya lebih ke struktur isi website.

CSS terdiri dari 3 jenis jika melihat dari penempatan kode. Yaitu CSS Inline, Internal, serta External. Untuk Inline, kode CSS dicantumkan di bagian body dalam file HTML. Kode ini hanya memberikan perubahan pada satu baris saja.

Sedangkan Internal kode-kodenya diletakkan di bagian header pada file HTML. Berfungsi menentukan tampilan satu halaman website.

Terakhir ada External yaitu, kode CSS yang ditaruh di luar file HTML dalam bentuk file.css. Fungsinya yaitu mengatur tampilan untuk semua halaman website.

Sehingga bisa digunakan untuk menata beberapa halaman web sekaligus apa saja yang bisa diatur oleh CSS? Ada banyak, diantaranya yaitu menentukan bagaimana format paragraph, font, dan warna tulisan.

Kemudian membuat kotak teks, tombol link, mengubah warna link dan juga mengatur warna yang bisa berubah ketika diarahkan oleh kursor. Semua detail desain tersebut bisa dilakukan dengan menggunakan bahasa CSS.

Contoh penulisan kode CSS kurang lebih akan seperti ini:

@charset “utf-8”; /* CSS Document*/ body{ background-color:#a11111; margin:0px; padding:0px; }

ul{ list-style:none; }

a{ text-decoration:none; }

section{ width:100%; height:95vh; position: relative; }

nav{ display: flex; justify-content: space-between; align-items:center; height:60px; background-color:#FFFFFF; box-shadow:2px 2px 12px rgba(0,0,0,0.2); padding:0px 5%;

} nav ul{ display: flex; }

nav ul li a{ margin:30px; font-family:myriad pro regular; color:#505050; font-size: 15px; font-weight:700; }

.logo{ font-family:RoadTest; color:#000000; font-size: 22px; font-weight: bold; }

.active{ color:#2d2a2a; font-weight:bold; }

.text-container p:nth-child(1){ font-family: calibri; font-weight: bold; color: #ffffff; font-size: 22px; }

.text-container p:nth-child(2){ font-family: calibri; font-weight: bold; letter-spacing: 2px; color: #ffffff; font-size: 60px; }

.text-container p:nth-child(3){ font-family: myriad pro regular; color: #ffffff; font-size: 30px; line-height: 30px; }

.text-container p:nth-child(4){ font-family: calibri; color: #ffffff; font-size: 17px; margin-top: 10px; line-height: 30px; }

.text-container p{ line-height: 0px; margin: 55px 0px 25px; }

.text-container{ position: absolute; left: 13%; top: 42%; transform: translate(-13%, -42%); }

.text-container button{ width: 130px; height: 42px; border-radius: 10px; font-family: calibri; font-weight: bold; font-size: 14px; outline: none; margin: 0px 10px; }

.hire-btn{ border: 2px solid #373636; color: #373636; }

button:active{ transform: scale(1.1); }

.model{ height: 560px; position: absolute; bottom: 60px; left: 80%; transform: translateX(-70%); }

footer p{ font-family: calibri; }

footer p:nth-child(1){ font-size: 30px; font-weight:bold; color:#FFFFFF; line-height:10px; }

footer p:nth-child(2){ font-size: 16px; color:#7e7d7d; width:600px; text-align: center; }

footer{ height:300px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background-color: #191919; }

.social-icons a{ width:40px; height:40px; display: flex; justify-content: center; align-items: center; background-color:#e6e3e3; margin:20px 10px; border-radius:50%; }

.social-icons{ display: flex;

.social-icons i,.social i{ color:#000000; }

.social-icons a:hover{ background-color:#000000; box-shadow:2px 2px 12px rgba(0,0,0,0.2); transition:all ease 0.5s; }

.social-icons a:hover i, .social a:hover i{ color:#FFFFFF; transition:all ease 0.5s; }

.copyright{ color:#565555; font-size: 15px; position: absolute; left:50%; bottom:10px; transform: translateX(-50%); }

Setelah Anda membuat file HTML dan file CSS lengkap dengan tag dan kode yang sudah disusun, maka selanjutnya adalah menghubungkan kedua file tersebut.

Caranya cukup mudah. Anda tinggal memasukkan kode pada bagian head di file index.html. Dengan begitu kedua file akan langsung terintegrasi. Contohnya seperti ini:

Tahapan berikutnya Adalah membuka website Anda melalui web browser. Pada langkah ini bukan berarti halaman website sudah selesai.

Karena fungsi dari tahapan ini yaitu agar proses membuat website dengan HTML dan CSS bisa berjalan lebih efektif.

Buka kedua file bersamaan. Ketika Anda melakukan penambahan elemen baik pada file HTML dan juga CSS, perubahannya bisa langsung terlihat di web browser.

Namun sebelumnya Anda perlu memuat ulang halaman, setiap kali ada perubahan. Dengan begitu proses mengembangkan website jadi lebih mudah dan cepat.

Berikut ini merupakan hasil dari cara membuat website dengan HTML dan CSS secara sederhana.

Langkah 4 - Membuka Dokumen HTML di Browser

Setelah disimpan, kamu dapat membuka file HTML dalam browser. Kamu cukup mengklik ganda file tersebut dan file akan otomatis terbuka di browser komputer.

Memang mungkin memakan waktu untuk benar-benar menguasai HTML dan web desain, tetapi dengan banyak praktek dan kesabaran, kamu akan dapat membuat halaman web yang menarik dan fungsional. Selamat mencoba! Jangan lupa untuk selalu berlatih dan belajar setiap hari untuk meningkatkan keterampilan coding mu.

Tertarik belajar membuat website? Anda bisa memulainya dengan mempelajari cara membuat website dengan HTML.

Dengan teknik ini Anda dapat bereksperimen membuat website dari nol. Dari halaman yang masih kosong sampai berisi layout website dengan desain dan teks yang Anda inginkan

Dalam artikel ini akan dijelaskan tahapan-tahapan dalam membuat website dengan HTML dan juga CSS. Hingga akhirnya menghasilkan website yang sederhana.

Mengetahui cara membuat website dengan HTML dapat membantu Anda memahami komponen-komponen dasar pada website.

Menambahkan Fitur Interaktif dengan JavaScript

Jika kamu ingin menambahkan fitur interaktif, seperti tombol yang berubah warna saat dihover, kamu bisa menggunakan JavaScript. Ini bisa membuat website semakin menarik dan fungsional.

document.querySelector(‘button’).addEventListener(‘click’, function() {

alert(‘Tombol diklik!’);

Fitur seperti ini akan memberikan pengalaman pengguna yang lebih menyenangkan dan interaktif.

Membuat website sekolah dengan HTML memang cukup sederhana jika kamu mengikuti langkah-langkah di atas. Dari mulai struktur dasar HTML, menambahkan konten penting, hingga memberikan sentuhan desain dengan CSS, semuanya bisa dilakukan dengan mudah. Jadi, jangan ragu untuk mencoba membuat website sekolah yang keren dan informatif!

Jika kamu tertarik dengan dunia teknologi, khususnya dalam bidang web development, mengapa tidak mempertimbangkan untuk kuliah di Universitas Maha Karya Asia? Di sana, kamu akan mendapatkan pendidikan yang berkualitas, terutama dalam bidang IT yang sangat relevan dengan dunia teknologi saat ini. Kunjungi website PMB Unmaha untuk mengetahui lebih lanjut tentang program yang ditawarkan. Jangan lewatkan kesempatan untuk belajar di kampus yang memiliki fasilitas lengkap dan pengajaran dari dosen berpengalaman!***

Editor: Mahfida Ustadhatul Umma

Langkah 3 - Menyimpan Dokumen HTML

Setelah kamu puas dengan halaman HTML, sekarang waktunya menyimpannya. Klik ‘File’ lalu pilih ‘Save As’. Kemudian, di kotak ‘Save as type’, pilih ‘All Files’. Masukkan nama file dengan ekstensi .html, seperti belajar.html, lalu klik ‘Save’.

Menambahkan Konten yang Relevan

Setelah menyiapkan struktur dasar, saatnya untuk mengisi konten. Di dalam website sekolah, biasanya ada beberapa informasi yang perlu kamu tampilkan, seperti:

Kamu bisa mengisinya langsung di dalam tag

yang sudah ada pada struktur HTML tadi.

Selain teks, foto juga sangat penting untuk membuat website sekolah lebih menarik. Kamu bisa menambahkan gambar sekolah dengan menggunakan tag seperti ini:

”Sekolah

Pastikan untuk mengganti sekolah.jpg dengan nama file gambar yang sesuai, dan pastikan gambar tersebut sudah ada di dalam folder yang benar.

Jangan lupa untuk menambahkan tautan ke media sosial sekolah, agar pengunjung bisa lebih mudah mengikuti kegiatan sekolah. Misalnya, jika sekolah kamu memiliki akun Instagram atau Facebook, tambahkan link berikut ini:

Instagram

Dengan begini, pengunjung dapat langsung mengakses halaman media sosial sekolah.

Baca Juga: Jangan Terlewat, 12 Fitur yang Harus Ada di Website Sekolah

Sublangkah a. Menambahkan Tag Pembuka dan Penutup

Selanjutnya, kamu perlu menambahkan tag pembuka dan tag penutup .

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan dan ditutup dengan dimana x adalah perintah dari apa yang kita inginkan.

My First HTML Project

WELCOME TO MY WEBSITE

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

Gambar 1.  Judul Tab Halaman

Tag P, Br dan Hr

Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga.

Ini adalah paragraf kerdua, yang berisi garis horizontal

 Ini adalah garis horizontal.

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

Gambar 2. Mengatur Paragraf

Tag Heading

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

Gambar 3.  Ukuran Huruf

format tulisan</titele></p><p><small> teks small </small><br></p><p><big> teks big</big><br></p><p><b> teks tebal </b><br></p><p><i> teks miring </i><br></p><p><u> teks bergaris bawah </u><br></p><p>Contoh superscript : x <sup>2</sup><br></p><p>Contoh subscript : H<sub>2</sub>O<br></p><p><strike> Ini teks tercoret </strike><br></p><p><font size = 5 face = verdana></p><p><body BGCOLOR =”#00FF00″></p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:</p><p>Gambar 4. Format tulisan</p><p><title> From komentar

 

Silahkan Berkomentar :

Komentar

:

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:

Gambar 5. From komentar

warna-warna

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:

Judul tab

Ini hyperlink ke wordpress

WordPress


Klik dan masuk ke yahoo Yahoo


Masuk ke facebook anda

Facebook

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:

Gambar 7 link halaman web lain

Judul tab

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:

Gambar 8. Link Antar Bagian Dalam Web

login web

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)

warna-warna HijauKuningMerah Abu-abuBiruOrangeCokelatBiru mudaMerah muda




http://MP3/Greenday%20-%20I%20walk%20Alone.swf

….. Dalam penggisiannya harus jujur yaa, jangan bo’onk  🙂 ……

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:

Gambar 9. Halaman login

      ~ Selamat datang di website pertama saya ~

     

~Dasar-dasar Membuat Website Berbasis HTML~

Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.



tag <>

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.

Tag container adalah tag yang berisi text yang akan ditampilkan

setelah tag ditutup. Contoh: <td> text yang ditampilkan

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: <td> </td>

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

LANGKAH 1

  • MEMBUKA NOTEPAD.

    • LANGKAH 2

  • MENGETIKKAN SINTAK/SYNTAX.

    • Berikut ini adalah syntax dasar yang membentuk suatu HTML.

    pertama, ketikkan
    <html>

    tekan enter, kemudian ketik
    <head>
    Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
    Sekarang ketikkan sintak title tadi, jadi seperti ini:
    <head> <title> judul halaman web </title> </head>

    Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
    Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

    <html>
    <head>
    <title> Judul Halaman Web </title>

    </body>
    ?


    Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
    <body>
    Contoh text yang ditampilin di halaman web, By: Rian Hidayat
    </body>
    terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
    <html>
    <head>

    <title> Judul Halaman Web </title>

    </head>
    <body>
    Contoh text yang ditampilkan di halaman web, By: Rian Hidayat

    kalo udah, sekarang save dengan nama dasarHTML.

    kalo udah disave, buka data yang tadi di save.
    ?
    Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
    Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.