Membuat website Menggunakan Notepad

membuat website 1

Dalam tutorial ini Anda akan belajar bagaimana membuat website dasar dari awal menggunakan Notepad. Jika Anda menggunakan Mac, Anda perlu menggunakan TextEdit. Ada editor kode profesional lain yang dapat Anda gunakan untuk mengedit kode seperti html

  • NotePad++ (Windows)
  • Adobe Brackets (Windows/Mac)
  • Sublime Text (Windows/Mac)

Apa itu Notepad?

Notepad adalah editor teks umum yang disertakan dengan semua versi Microsoft Windows yang memungkinkan Anda membuat, membuka, dan membaca file teks biasa. Jika file berisi format khusus atau bukan file teks biasa, itu tidak dapat dibaca di Microsoft Notepad. Gambar tersebut adalah contoh kecil dari tampilan Microsoft Notepad saat dijalankan.

Jika Anda menggunakan Mac dan menginginkan sesuatu yang lebih baik daripada TextEdit, Anda dapat mengunduh Adobe Brackets yang berfungsi baik di Mac & Windows, Pada Windows menggunakan Notepad versi dasar. Kode dalam tutorial ini berfungsi di editor mana pun jadi pilih saja editor yang Anda suka.

Mari kita mulai membuat website.

Windows

Untuk membuka Notepad di Windows 7 atau sebelumnya, klik Start -> All Programs -> Accessories -> Notepad. Anda juga dapat mengklik Start dan mencari “Notepad”.

Mac

Buka TextEdit dan pastikan editor teks disetel ke teks biasa dengan membuka Preferensi> Dokumen Baru> pilih teks biasa. Selanjutnya pastikan untuk mencentang “Tampilkan file html sebagai kode html” dan “Tampilkan file RTF sebagai kode RTF” di bawah “Buka dan Simpan”.

Untuk kali ini Anda menggunakan pemerograman dan harus belajar tentang pemerograman terlebih dahulu. Untuk pemerograman sendiri menggunakan bahasa javascript, Apa itu javascript? JavaScript awalnya dibuat untuk “membuat halaman web hidup”. Program dalam bahasa ini disebut skrip. Mereka dapat ditulis langsung di HTML halaman web dan berjalan secara otomatis saat halaman dimuat. Skrip disediakan dan dijalankan sebagai teks biasa. Mereka tidak memerlukan persiapan atau kompilasi khusus untuk dijalankan. Tentunya pada aspek ini maka tergolong juga JavaScript sangat berbeda dengan bahasa lain Java. Di bawah ini merupakan tutorialnya:

Membuat website : code

membuat website 2

Selanjutnya terdapat kode sederhana membuat website menggunakan notepad salin dan tempel kode berikut ke editor:

<! DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p> My first paragraph. </p>

</ Body>

</html>

Menyimpan File HTML

Simpan file sebagai “belajar.html” dengan ekstensi HTML. Ini sangat penting jika Anda tidak menambahkan .html di akhir nama, ini tidak akan berfungsi. Catatan: Meskipun .html lebih disukai, Anda juga dapat menggunakan .htm tanpa “L”.

Membuka File HTML di Browser

Selanjutnya, buka folder tempat Anda menyimpan file dan buka di browser Anda. Dalam contoh ini kami menggunakan internet explore , tetapi browser modern apa pun seharusnya berfungsi.

CATATAN: Jika Anda mengalami masalah saat membuka file, pastikan Anda telah menyimpannya sebagai .html.

Untuk Melihat hasilnya cukup klik pada file maka akan muncul tampilan beriukt:

Memusatkan Teks

Sekarang setelah Anda memahami dasar-dasar membuat file html, mari pelajari cara memusatkan teks Masuk ke file html yang telah Anda buat dan tambahkan.

<center> </center> tags around “My First Heading”  seperti itu  <center><h1>My First Heading</h1></center>

hapus <p>My first paragraph.</p> .

Simpan File dan buka kembali di browser. Jika jendela browser Anda masih terbuka, Anda cukup mengklik segarkan untuk memuat ulang halaman.Teks tajuk sekarang harus berada di tengah tengah halaman web.

Menambahkan video Youtube ke Situs Web Anda

Untuk menambahkan video youtube ke situs web Anda: Buka Youtube dan temukan video yang ingin Anda tambahkan ke situs web Anda. “Klik Kanan” pada video dan “Salin Kode Sematan”.

Tempel kode sematan ke Notepad Kode sematan akan terlihat seperti ini:

<iframe width = “854” height = “480” src = “https://www.youtube.com/embed/Q8AZ16uBhr8” frameborder = “0” allowfullscreen> </iframe>

Anda dapat mengubah lebar dan tinggi sesuai keinginan Anda. Ubah saja angka-angka itu dalam kode dan biarkan yang lainnya tidak berubah. Dalam contoh ini kita akan menggunakan width = “427” dan height = “240”. Anda dapat mengatur milik Anda ke apa pun yang Anda inginkan.

Pusatkan Video dengan meletakkan <center> </center> tag di sekitar Kode Sematan yang Anda salin dari YouTube.Selain itu, mari ubah judul di antara tag <h1>My First Heading</h1>menjadi “Situs Saya”.

Membuat Halaman ke-2 untuk Situs Web Anda

Sekarang, kita akan membuat halaman kedua untuk situs Anda dan menyebutnya halaman2.html. Dengan cara ini Anda dapat membuat tautan ke bagian lain situs web Anda alih-alih menautkan ke Google seperti yang kami lakukan sebelumnya. Buat file html baru dan tambahkan kode di bawah ini ke dalamnya. Simpan dan sebut saja page2.html

<!DOCTYPE html>

<html>

<body>

<h1>Page 2</h1>

<p>This is my 2nd page.</p>

</body>

</html>

Situs web Anda sekarang akan memiliki halaman kedua yang dapat kami tautkan dari halaman pertama.

membuat website

Menambahkan gaya keren (style) dengan CSS pada saat membuat website

Kita sekarang akan memberi style pada link ke halaman2 menggunakan CSS sehingga terlihat seperti tombol. CSS digunakan untuk mengontrol tata letak situs Anda. Salin dan tempel kode berikut di bagian atas halaman belajar.html tepat di bawah tag <body>. Saat menempel jangan menimpa kode lain.

<head>

<style media=”screen” type=”text/css”>

a {

display: inline-block;

width: 100px;

height: 30px;

line-height: 30px;

padding: 10px;

background-color: #00AEEF;

color: #ffffff;

border-radius: 10px;

}

</style>

</head>

Apa yang pada dasarnya dilakukan potongan kode ini adalah memberi tahu browser untuk menambahkan warna latar belakang dan tinggi ke tautan yang kita buat sebelumnya. Kami juga membuat sudut sedikit membulat dengan menambahkan radius batas 10px. Ada banyak tutorial online gratis di mana Anda dapat mempelajari lebih lanjut tentang CSS untuk membuat website Anda terlihat sangat bagus.

Goto online

Setelah membuat website tampak bagus sesuai keinginan kalian baik itu style, penulisan, maupun penambahan gambar, langkah selanjutnya kita harus online kan web kita dengan cara meletakan web kita kedalam hosting agar semua orang bisa mengunjungi web anda.

Agar dunia dapat melihat situs web Anda, situs web harus diunggah ke server web yang tetap terhubung ke internet 24/7. Sekarang, kami tidak menyarankan menyiapkan server Anda sendiri. Jauh lebih mudah untuk membayar $ 3 atau $ 5 sebulan kepada penyedia webhosting profesional untuk melakukan ini untuk Anda.

Saya merekomendasikan menggunakan BlueHost dan mendaftar ke Plus Planto mereka, luncurkan situs web Anda dan dapatkan nama domain GRATIS – situs web ini dihosting di BlueHost dan kami menyukainya. Mereka cepat, aman, dan memiliki layanan pelanggan yang hebat.

membuat website 3

Sekian penjelasan tentang pembuatan website menggunakan notepad, sangat mudah bukan? Untuk pemula memang sangat cocok menggunakan notepad, tapi jika ingin lebih dalam lagi membuat website profesional anda bisa menggunakan sublim karena banyak fitur yang ditawarkan untuk kebutuhan anda.

 

Leave a Reply

Your email address will not be published. Required fields are marked *