Ubah juga beberapa preferensi agar aplikasi menyimpan file dengan benar. Di Preferensi > Format > pilih "Teks Biasa"
Kemudian di bawah "Buka dan Simpan", centang kotak yang bertuliskan "Tampilkan file HTML sebagai kode HTML alih-alih teks berformat"
Kemudian buka dokumen baru untuk menempatkan kode
Langkah 2. Tulis Beberapa HTML
Tulis atau salin kode HTML berikut ke Notepad
Paragraf pertama saya
Langkah 3. Simpan Halaman HTML
Simpan file di komputer Anda. Pilih File > Simpan sebagai di menu Notepad
Beri nama file "index. htm" dan setel penyandian ke UTF-8 (yang merupakan penyandian yang lebih disukai untuk file HTML)
Tip. Anda dapat menggunakan keduanya. htm atau. html sebagai ekstensi file. Tidak ada perbedaan;
Langkah 4. Lihat Halaman HTML di Browser Anda
Buka file HTML yang disimpan di browser favorit Anda (klik dua kali pada file tersebut, atau klik kanan - dan pilih "Buka dengan")
Hasilnya akan terlihat seperti ini
Editor Online W3Schools - "Coba Sendiri"
Dengan editor online gratis kami, Anda dapat mengedit kode HTML dan melihat hasilnya di browser Anda
Ini adalah alat yang sempurna ketika Anda ingin menguji kode dengan cepat. Ini juga memiliki kode warna dan kemampuan untuk menyimpan dan berbagi kode dengan orang lain
Contoh
Ini adalah Tajuk
Ini adalah sebuah paragraf
Klik tombol "Coba Sendiri" untuk melihat cara kerjanya
Ruang W3Schools
Jika Anda ingin membuat situs web sendiri dan menyimpan kode secara online, coba pembuat situs web kami, yang disebut W3schools Spaces
Saatnya mengotori tangan Anda dan menulis file HTML pertama Anda. Mari kita mulai dengan membuka program pengeditan teks. Jika Anda menggunakan PC Microsoft Windows, buka program bernama Notepad (lihat di Start Menu Anda untuk itu, atau cukup tahan Tombol Windows di keyboard Anda dan tekan R, lalu ketik "notepad" ke dalam run command prompt dan tekan enter). Jika Anda menggunakan komputer Macintosh, luncurkan aplikasi bernama "TextEdit" (yang dapat ditemukan di folder Aplikasi Anda)
Sebagai pembuat kode, adalah tugas kami untuk mengubah kanvas kosong dokumen ini menjadi mahakarya HTML. Mari kita mulai dengan memasukkan kode berikut ke dalam dokumen teks kosong kita, (atau gunakan fungsi salin dan tempel komputer Anda dan angkat langsung dari bawah)
<!DOCTYPE html>Kode ini memberi tahu browser web bahasa komputer apa yang kita gunakan (HTML). Anda akan memulai setiap halaman web yang pernah Anda buat dengan kode ini
Menulis HTML Seperti Membuat Sandwich
Kami sekarang siap untuk memulai struktur halaman kami yang sebenarnya. Mulailah dengan menambahkan kode berikut ke dokumen Anda, tepat di bawah kode terakhir kita
<html> </html>_The start-tag tells the web browser that we want to begin our document; similarly the end-tag tells the browser we want to end our document. If our page is a sandwich, the start and end tags are the slabs of bread.
Before we can add any exciting content to our page, there is one more element we must add. Insert the following code directly beneath the start tag:
<body> </body>The element signifies the portion of our document that will house our actual content (paragraphs, images, etc…). You may be thinking “But I thought that’s what the tags did?” In fact, the element houses everything, both our actual content (which goes inside the element) and more complex elements that we will learn about in future lessons. For now, just know that the element goes inside the element.
Seperti inilah tampilan dokumen Anda sejauh ini
<!DOCTYPE html> <html> <body> </body> </html>Akhirnya, Bagian Menyenangkan
Sekarang, mari tambahkan sedikit konten pertama kita ke halaman kita. Bagaimana dengan heading tebal yang besar?
<h1>This is a big bold heading</h1>_Kode ini menimbulkan pertanyaan bagus untuk pembuat kode pemula. “Bagaimana saya bisa tahu elemen apa yang digunakan?
We decided to use the
element to describe our heading because this is the most important (and only) heading on our page. In future lessons we will create pages with multiple headings and utilize , , and tags to create a hierarchy of importance for our content.
Boneka Susun Rusia
, and tags to create a hierarchy of importance for our content.
Boneka Susun Rusia
Boneka Susun Rusia
At this point, it is helpful to think of HTML as a set of Russian stacking dolls. Smaller elements fit inside larger elements, which fit inside even larger elements, etc… Our header rests inside our element, which rests inside our element. To fully illustrate this point, let’s add a bulleted list to our page. Add the following code directly beneath your end tag:
<ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul>The
- element is code for “Unordered List” and the
- element is code for “list item.” Just like your grocery list on a scrap of paper, a list is made up of multiple list items. This is reflected in our code; our many list items are nested inside our single unordered list.
Menyimpan Dokumen Anda
Sekarang adalah saat yang tepat untuk menyimpan dokumen kita dan kemudian melihat tampilannya di browser web kita. Dari dalam program pengeditan teks Anda, klik File, lalu Simpan. Agar kita berada di halaman yang sama, mari setuju untuk memberi nama file "test. html”. Sangat penting bahwa file kita diakhiri dengan “. html”. Ini memberi tahu komputer kita jenis file apa dokumen kita (tentu saja halaman web. ).
Jika Anda menggunakan PC Windows, pastikan untuk mengklik kotak tarik-turun di bawah input nama file, berlabel “Simpan sebagai tipe. ” dan pilih opsi “Semua file”. Ini akan memastikan dokumen Anda disimpan dalam format yang benar. Lanjutkan dan simpan dokumen Anda.Melihat File Anda Di Browser Web
Sekarang arahkan ke mana pun Anda memilih untuk menyimpan file Anda (saya sarankan membuat folder baru di desktop Anda untuk menyimpan semua file pembelajaran Anda) dan klik dua kali "test. html. ” Ini akan membuka halaman kami di browser web dan Anda akan disambut oleh tajuk yang tampak agak sederhana yang berbunyi "Ini adalah tajuk tebal besar" diikuti dengan daftar item belanjaan berpoin
Memberi Judul Halaman Anda
Anda mungkin memperhatikan bahwa halaman kami tidak memiliki judul (biasanya ditampilkan di bilah judul browser web kami). Judul halaman web adalah kebutuhan mutlak, karena mereka memainkan peran besar dalam mesin pencari untuk dapat menemukan halaman Anda. Sekarang setelah Anda sedikit lebih paham dengan sintaks HTML, mari lanjutkan dan beri judul pada halaman kita
The element should be stored in a new section of the page named . In future lessons you will learn more about the element, but for now just know that it is used to hold our page’s title. Add the following code directly below our start tag:
<head> <title>My First Page</title> </head>_Dari dalam program pengeditan teks Anda, simpan dokumen Anda, lalu alihkan ke jendela browser web Anda dan segarkan halaman (menekan Control + R menyegarkan di PC Windows, dan Cmd + R menyegarkan di komputer Macintosh). Perhatikan bahwa halaman kita sekarang memiliki judul di bilah judul browser web
Hanya Satu Langkah Terakhir
Before we finish this lesson, let us add a bit more code that will help all web browsers better understand our code. Insert the following line of code directly below the start tag:
<meta charset="utf-8">Ini menandai pertama kalinya Anda melihat tanda sama dengan atau tanda kutip di dalam elemen HTML. Anda akan belajar tentang sintaks baru ini di pelajaran berikutnya (Atribut dan Nilai HTML), tetapi untuk saat ini cukup puas dengan menyalin dan menempelkan kode ini dan mengetahui bahwa itu membuat halaman Anda lengkap. Anda baru saja menulis halaman web yang 100% valid dari awal. Dengan tangan. Itu lebih dari yang bisa dikatakan oleh beberapa pengembang web profesional
Ingat, tidak ada yang pernah berjanji bahwa halaman web pertama Anda akan indah. Yang penting adalah Anda sekarang tahu cara menulis kode HTML Anda sendiri dan membuat halaman web dasar. Anda mungkin berpikir “Ya, tapi saya tidak tahu semua kode elemennya. Tanpa seseorang memberi tahu saya elemen mana yang digunakan untuk mendeskripsikan suatu konten, saya akan tersesat. Izinkan saya menawarkan beberapa kata penghiburan. Anda sudah tahu lebih dari yang Anda sadari. Saya memperkirakan bahwa 95% situs web menggunakan kumpulan dasar elemen HTML yang sama yang dapat dikuasai oleh pemula dengan cepat dan mudah. Ikuti sisa pelajaran saya dan Anda akan benar-benar mahir dalam menulis HTML dalam waktu singkat
Untuk referensi Anda, berikut adalah kode yang baru saja kami kumpulkan, secara keseluruhan
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First Page</title> </head> <body> <h1>This is a big bold heading</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </body> </html>_Jika Anda lebih suka menonton pelajaran video daripada membaca pelajaran tertulis, lihat kursus video 8 jam saya dan pelajari HTML tingkat profesional, CSS, dan desain responsif
Bagaimana cara menyimpan file HTML sebagai file teks?
Pilih File > Simpan sebagai di menu Notepad . Beri nama file "index. htm" dan setel penyandian ke UTF-8 (yang merupakan penyandian yang lebih disukai untuk file HTML). Tip. Anda dapat menggunakan keduanya. htm atau. html sebagai ekstensi file. Tidak ada perbedaan; .Bagaimana cara menyimpan file HTML dari situs web?
Cara menyimpan halaman web dalam format HTML .Arahkan ke halaman web, klik kanan pada halaman dan pilih Simpan sebagaiPilih atau buat folder baru untuk menyimpan file, gambar, dan item terkait dari halaman webMasukkan nama file dan pilih Halaman Web, Lengkap (*. htm;*html) untuk tipe Simpan sebagaiKlik tombol SimpanBagaimana cara menyimpan file HTML di Chrome?
Anda harus online untuk menyimpan halaman. .Di komputer Anda, buka ChromeBuka halaman yang ingin Anda simpanDi kanan atas, klik Lainnya Alat Lainnya. Simpan halaman sebagaiPilih tempat Anda ingin menyimpan halamanKlik SimpanBagaimana cara menyimpan file HTML di Windows 10?
Anda perlu membuka notepad di PC Anda dan menulis kode HTML Anda. Kemudian masuk 'File', 'Save as', tulis nama file dengan. html contoh. nama. html.