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)

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

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:

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

Akhirnya, Bagian Menyenangkan

Sekarang, mari tambahkan sedikit konten pertama kita ke halaman kita. Bagaimana dengan heading tebal yang besar?

This is a big bold heading

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

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:

    
Milk
    
Bread
    
Eggs

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 _

  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:

  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

  
  
  
  
      
  
          
          
  
      
  
      
  
          
  This is a big bold heading
  
          
  
              
  Milk
              
  Bread
              
  Eggs
          
  
      
  
  

  _

  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 membuat dan menyimpan dokumen HTML?

  Editor HTML .

  Langkah 1. Buka Notepad (PC) Windows 8 atau yang lebih baru. .

  Langkah 1. Buka TextEdit (Mac) Buka Finder > Applications > TextEdit. .

  Langkah 2. Tulis Beberapa HTML. Tulis atau salin kode HTML berikut ke Notepad. .

  Langkah 3. Simpan Halaman HTML. Simpan file di komputer Anda. .

  Langkah 4. Lihat Halaman HTML di Browser Anda

  Bagaimana cara membuat file HTML di Windows?

  Di jendela desktop PC Anda, buat folder baru (dengan nama apa saja) klik dua kali pada folder untuk masuk, lalu klik kanan dan buat file txt baru . Setelah membuat file txt, klik kanan padanya, lalu pilih ganti nama dan ubah. txt ke. html untuk membuatnya menjadi file HTML.

  Bagaimana cara menyimpan file HTML sebagai situs web?

  Menyimpan dokumen sebagai halaman web .

  Klik File > Simpan Sebagai dan pilih lokasi tempat Anda ingin menyimpan dokumen

  Beri nama file Anda

  Di daftar Simpan sebagai tipe, pilih Halaman Web, Difilter

  Bagaimana cara membuat file HTML di Chrome?

  Dengan asumsi Google Chrome disetel sebagai program default Anda, cukup ketuk dua kali dokumen HTML dan itu akan terbuka secara alami di Chrome.