Pelajaran 4-Belajar HTML
- Dengan apa yang Anda pelajari di pelajaran sebelumnya, Anda sekarang hanya beberapa menit dari membuat situs web pertama Anda.
Bagaimana.?
Dalam Pelajaran 1 kami melihat apa yang dibutuhkan untuk membuat situs web: browser dan Notepad (atau editor teks serupa). Karena Anda membaca ini, kemungkinan besar Anda sudah membuka peramban. Satu-satunya hal yang perlu Anda lakukan adalah membuka jendela browser tambahan (buka browser sekali lagi) sehingga Anda dapat membaca tutorial ini dan melihat situs web baru Anda pada saat yang bersamaan.
Juga, buka Notepad (dalam Aksesori di bawah Program di menu Mulai):
Sekarang kami siap.!
Sekarang, masuk ke browser:
Sekarang seharusnya mengatakan "Hore! Ini adalah situs web pertamaku." di browser Anda. Selamat!
Jika Anda benar-benar ingin seluruh dunia melihat langsung karya Anda, Anda dapat melompat ke Pelajaran 13 dan belajar cara mengunggah halaman Anda ke Internet. Jika tidak, bersabarlah dan baca terus. Kesenangan baru saja dimulai.
Juga, buka Notepad (dalam Aksesori di bawah Program di menu Mulai):
Sekarang kami siap.!
Apa yang Dapat saya.?
Mari kita mulai dengan sesuatu yang sederhana. Bagaimana dengan halaman yang mengatakan: "Hore! Ini adalah situs web pertamaku." Baca terus dan Anda akan menemukan betapa sederhananya itu.
HTML itu sederhana dan logis. Browser membaca HTML seperti Anda membaca bahasa Inggris: dari atas ke bawah dan dari kiri ke kanan . Dengan demikian, dokumen HTML sederhana dimulai dengan apa yang harus didahulukan dan diakhiri dengan apa yang harus datang terakhir.
Hal pertama yang perlu Anda lakukan adalah memberi tahu browser bahwa Anda akan "berbicara" dengannya dalam bahasa HTML. Ini dilakukan dengan tag <html>(tidak ada kejutan di sana). Jadi sebelum Anda melakukan hal lain ketik " <html>" di baris pertama dokumen Anda di Notepad.
Seperti yang Anda ingat dari pelajaran sebelumnya, <html>adalah tag pembuka dan harus ditutup dengan tag penutup ketika Anda selesai mengetikkan HTML. Jadi untuk memastikan Anda tidak melupakan tag tutup HTML, ketikkan " </html>" beberapa baris ke bawah dan tuliskan sisa dokumen di antara <html>dan </html>.
Hal berikutnya yang dibutuhkan dokumen Anda adalah "kepala", yang memberikan informasi tentang dokumen Anda, dan "badan", yang merupakan isi dokumen. Karena HTML bukan apa-apa jika tidak logis, kepala ( <head>dan </head>) berada di atas tubuh ( <body>dan </body>).
Dokumen Anda seharusnya sekarang terlihat seperti ini:
HTML itu sederhana dan logis. Browser membaca HTML seperti Anda membaca bahasa Inggris: dari atas ke bawah dan dari kiri ke kanan . Dengan demikian, dokumen HTML sederhana dimulai dengan apa yang harus didahulukan dan diakhiri dengan apa yang harus datang terakhir.
Hal pertama yang perlu Anda lakukan adalah memberi tahu browser bahwa Anda akan "berbicara" dengannya dalam bahasa HTML. Ini dilakukan dengan tag <html>(tidak ada kejutan di sana). Jadi sebelum Anda melakukan hal lain ketik " <html>" di baris pertama dokumen Anda di Notepad.
Seperti yang Anda ingat dari pelajaran sebelumnya, <html>adalah tag pembuka dan harus ditutup dengan tag penutup ketika Anda selesai mengetikkan HTML. Jadi untuk memastikan Anda tidak melupakan tag tutup HTML, ketikkan " </html>" beberapa baris ke bawah dan tuliskan sisa dokumen di antara <html>dan </html>.
Hal berikutnya yang dibutuhkan dokumen Anda adalah "kepala", yang memberikan informasi tentang dokumen Anda, dan "badan", yang merupakan isi dokumen. Karena HTML bukan apa-apa jika tidak logis, kepala ( <head>dan </head>) berada di atas tubuh ( <body>dan </body>).
Dokumen Anda seharusnya sekarang terlihat seperti ini:
<html>
<head>
</head>
<body>
</body>
</html>
Perhatikan bagaimana kami menyusun tag dengan baris baru (menggunakan tombol Enter) serta indentasi (menggunakan tombol Tab). Pada prinsipnya, tidak masalah bagaimana Anda menyusun dokumen HTML Anda. Tetapi untuk membantu Anda, dan orang lain membaca pengkodean Anda, untuk membuat ikhtisar, sangat disarankan agar Anda menyusun HTML Anda secara rapi dengan jeda baris dan indentasi , seperti contoh di atas.
Jika dokumen Anda terlihat seperti contoh di atas, Anda telah membuat situs web pertama Anda - situs web yang sangat membosankan dan mungkin bukan apa yang Anda impikan ketika Anda memulai tutorial ini, tetapi masih semacam situs web. Apa yang telah Anda buat akan menjadi template dasar untuk semua dokumen HTML masa depan Anda.
Jika dokumen Anda terlihat seperti contoh di atas, Anda telah membuat situs web pertama Anda - situs web yang sangat membosankan dan mungkin bukan apa yang Anda impikan ketika Anda memulai tutorial ini, tetapi masih semacam situs web. Apa yang telah Anda buat akan menjadi template dasar untuk semua dokumen HTML masa depan Anda.
Sejauh ini sangat bagus, tetapi bagaimana saya menambahkan konten ke situs web saya?
Seperti yang Anda pelajari sebelumnya, dokumen HTML Anda memiliki dua bagian: kepala dan tubuh. Di bagian kepala Anda menulis informasi tentang halaman, sementara badan berisi informasi yang membentuk halaman .
Sebagai contoh, jika Anda ingin memberikan halaman judul yang akan muncul di bar bagian atas browser, itu harus dilakukan di bagian "kepala". Elemen yang digunakan untuk judul adalah title. Yaitu menulis judul halaman antara tag pembuka <title>dan tag penutup </title>:
Sebagai contoh, jika Anda ingin memberikan halaman judul yang akan muncul di bar bagian atas browser, itu harus dilakukan di bagian "kepala". Elemen yang digunakan untuk judul adalah title. Yaitu menulis judul halaman antara tag pembuka <title>dan tag penutup </title>:
<title>My first website</title>
Perhatikan bahwa judul ini tidak akan muncul di halaman itu sendiri. Apa pun yang Anda inginkan untuk muncul di halaman adalah konten dan karenanya harus ditambahkan di antara tag "body".
Seperti yang dijanjikan, kami ingin halaman untuk mengatakan "Hore! Ini adalah situs web pertama saya." Ini adalah teks yang ingin kita komunikasikan dan karena itu termasuk dalam bagian tubuh. Jadi di bagian tubuh, ketik yang berikut:
Seperti yang dijanjikan, kami ingin halaman untuk mengatakan "Hore! Ini adalah situs web pertama saya." Ini adalah teks yang ingin kita komunikasikan dan karena itu termasuk dalam bagian tubuh. Jadi di bagian tubuh, ketik yang berikut:
<p>Hurrah! This is my first website.</p>
P dalam <p>singkatan "paragraf" yang persis seperti itu - paragraf teks.
Dokumen HTML Anda seharusnya sekarang terlihat seperti ini:
Dokumen HTML Anda seharusnya sekarang terlihat seperti ini:
<html>
<head>
<title>My first website </title>
</head>
<body>
<p>Hurrah! This is my website.</p>
</body>
</html>
Selesai! Anda sekarang telah membuat situs web pertama Anda yang sebenarnya!
Selanjutnya yang harus Anda lakukan adalah menyimpannya ke hard drive Anda dan kemudian membukanya di browser Anda:
Selanjutnya yang harus Anda lakukan adalah menyimpannya ke hard drive Anda dan kemudian membukanya di browser Anda:
- Di Notepad pilih "Save as ..." di bawah "File" di menu bagian atas.
- Pilih "Semua File" di kotak "Simpan sebagai tipe". Ini sangat penting - jika tidak, Anda menyimpannya sebagai dokumen teks dan bukan sebagai dokumen HTML.
- Sekarang simpan dokumen Anda sebagai "page1.htm" (akhiran ".htm" menunjukkan bahwa itu adalah dokumen HTML. ".Html" memberikan hasil yang sama. Saya selalu menggunakan ".htm", tetapi Anda dapat memilih yang mana dari keduanya. ekstensi yang Anda inginkan). Tidak masalah di mana Anda menyimpan dokumen di hard drive Anda - selama Anda ingat di mana Anda menyimpannya sehingga Anda dapat menemukannya lagi.
- Di menu atas pilih "Open" di bawah "File" (atau tekan CTRL + O).
- Klik "Jelajahi" di kotak yang muncul.
- Sekarang temukan dokumen HTML Anda dan klik "Buka".
Jika Anda benar-benar ingin seluruh dunia melihat langsung karya Anda, Anda dapat melompat ke Pelajaran 13 dan belajar cara mengunggah halaman Anda ke Internet. Jika tidak, bersabarlah dan baca terus. Kesenangan baru saja dimulai.