Sajikan satu dokumen HTML dengan Content-Type: text/html; charset=utf-8, judul dan deskripsinya di bagian head dokumen, serta konten yang dapat dibaca di bagian body. Panduan Mac ini membuat halaman sintetis dan memeriksa bahwa satu respons memuat ketiganya.

Tugasnya adalah menyiapkan dokumen publik yang dapat dibaca browser, menggunakan pratinjau lokal sebelum memindahkan struktur yang sama ke sistem penerbitan. Contoh ini hanya berisi teks rekaan tentang bentuk kertas dan tidak memerlukan aset eksternal.

Apa yang termasuk dalam satu respons HTTP bertipe?

“Bertipe” berarti respons menyatakan jenis medianya. Kolom Content-Type memberi tahu penerima format representasi dan pemrosesan yang dimaksud. Dalam hal ini, formatnya adalah HTML. Kolom ini tidak menyediakan skema aplikasi per kolom. RFC 9110, bagian 8.3

Respons HTTP/1.1 memiliki baris status, kolom header, baris kosong, dan body opsional. Karena itu, Anda dapat mengirim metadata transportasi di header dan dokumen lengkap di body tanpa membuat permintaan metadata terpisah. RFC 9112, bagian 2.1

Untuk tugas penerbitan ini, gunakan panduan penempatan berikut. Panduan ini memisahkan informasi yang menjelaskan representasi HTTP dari informasi yang menjelaskan halaman.

Informasi Lokasi Contoh
Format dan pengodean representasi Header HTTP Content-Type: text/html; charset=utf-8
Judul dokumen Head HTML <title>Paper Shapes: Circle and Square</title>
Ringkasan halaman Head HTML <meta name="description" content="A short guide to arranging paper circles and squares.">
Konten yang ditujukan kepada pembaca Body HTML Judul, pengantar, dan petunjuk penyusunan

WHATWG mendefinisikan elemen title sebagai judul atau nama dokumen, dan nilai metadata description sebagai deskripsi halaman. Gunakan satu judul dan paling banyak satu deklarasi description. Penempatannya di dalam dokumen HTML membuat konten dan metadata deskriptif dikirim bersama. HTML Standard: Metadata dokumen

Bagaimana cara membuat pratinjau yang berfungsi di Mac?

Buka Terminal dan periksa perintah yang tersedia:

python3 --version
curl --version

Program di bawah ini memerlukan Python 3.7 atau yang lebih baru dan hanya menggunakan pustaka standarnya. Jika python3 tidak tersedia, ikuti petunjuk instalasi macOS resmi, lalu buka kembali Terminal. Dokumentasi Python menjelaskan penginstal dan cara menjalankan python3 dari terminal. Menggunakan Python di macOS

Tempel seluruh blok di bawah ini ke Terminal, termasuk perintah pembuka dan baris PY terakhir. Ini menjalankan program secara langsung; tidak membuat atau menimpa file. Biarkan jendela terminal ini tetap berjalan saat memeriksa halaman.

python3 - <<'PY'
from html import escape
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer

TITLE = "Paper Shapes: Circle and Square"
SUMMARY = "A short guide to arranging paper circles and squares."
PAGE = f"""<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{escape(TITLE)}</title>
<meta name="description" content="{escape(SUMMARY, quote=True)}">
</head>
<body>
<main>
<h1>{escape(TITLE)}</h1>
<p>{escape(SUMMARY)}</p>
<h2>Try a simple arrangement</h2>
<p>Place one paper circle beside one paper square.</p>
<p>Switch their positions — then compare the two arrangements.</p>
</main>
</body>
</html>
""".encode("utf-8")

class Handler(BaseHTTPRequestHandler):
    protocol_version = "HTTP/1.1"

    def respond(self, include_body):
        if self.path != "/paper-shapes":
            self.send_error(404, "Page not found")
            return
        self.send_response(200)
        self.send_header("Content-Type", "text/html; charset=utf-8")
        self.send_header("Content-Length", str(len(PAGE)))
        self.end_headers()
        if include_body:
            self.wfile.write(PAGE)

    def do_GET(self):
        self.respond(True)

    def do_HEAD(self):
        self.respond(False)

if __name__ == "__main__":
    with ThreadingHTTPServer(("127.0.0.1", 8000), Handler) as server:
        print("Preview: http://127.0.0.1:8000/paper-shapes", flush=True)
        try:
            server.serve_forever()
        except KeyboardInterrupt:
            pass
PY

Handler ini menggunakan metode respons Python yang terdokumentasi: send_response() memulai respons, send_header() menambahkan kolom, dan end_headers() melengkapi bagian header sebelum byte body ditulis. Dokumentasi server HTTP Python

Contoh ini sengaja mendefinisikan TITLE dan SUMMARY sekali saja. Nilai tersebut digunakan untuk metadata dan teks yang terlihat, sehingga dokumen kecil ini lebih mudah direvisi secara konsisten. Untuk halaman yang lebih panjang, deskripsinya dapat berbeda dari paragraf pembuka selama tetap merangkum topik yang sama dengan akurat.

Halaman ini dikodekan sebelum panjangnya dihitung. HTTP mendefinisikan Content-Length dalam oktet, atau byte; menghitung karakter akan menghasilkan nilai yang salah karena tanda pisah panjang dalam contoh ini. RFC 9110, bagian 8.6

Bagaimana cara memastikan konten dan metadata diterima bersama?

Buka jendela Terminal kedua dan jalankan perintah ini. Perintah ini membuat permintaan dokumen biasa dan menampilkan header respons serta kontennya:

curl -i --max-time 10 http://127.0.0.1:8000/paper-shapes

Opsi -i menyertakan header respons dalam aliran keluaran yang sama dengan body. Batas waktu membatasi transfer hingga sepuluh detik. Opsi ini didokumentasikan dalam panduan baris perintah curl.

Periksa keluaran secara berurutan:

  1. Baris status harus menampilkan 200 OK.
  2. Satu kolom Content-Type harus menyatakan text/html; charset=utf-8.
  3. Setelah baris kosong yang mengakhiri bagian header, HTML harus memuat judul dan deskripsi.
  4. Body yang sama harus memuat petunjuk tentang bentuk kertas.
  5. Tanda pisah panjang harus muncul dengan benar dalam teks yang telah didekodekan.

Selanjutnya, masukkan http://127.0.0.1:8000/paper-shapes di bilah alamat Safari. Halaman yang terlihat harus menampilkan judul, ringkasan, dan petunjuknya. Deklarasi description adalah metadata; keberadaannya diperiksa dalam markup yang dikembalikan, bukan disimpulkan dari tampilan halaman.

Anda juga dapat memeriksa jalur yang hanya mengambil header:

curl -I --max-time 10 http://127.0.0.1:8000/paper-shapes

Perintah ini mengirim HEAD, sehingga tidak dapat memastikan bahwa body memuat judul atau deskripsi. Respons HEAD tidak menyertakan konten, tetapi menjelaskan representasi yang sesuai; gunakan pemeriksaan GET sebelumnya untuk memeriksa dokumen sebenarnya. RFC 9110, bagian 8.2

Jika pratinjau tidak berfungsi, pilih tindakan berikutnya berdasarkan gejalanya:

Gejala Tindakan berikutnya
Saat mulai, muncul pesan bahwa alamat sedang digunakan Ubah 8000 menjadi 8001 di dalam program, jalankan ulang, dan gunakan 8001 di setiap perintah pratinjau.
Permintaan gagal tersambung Pastikan terminal pertama masih menampilkan pratinjau yang sedang berjalan dan port-nya cocok.
Responsnya adalah 404 Gunakan tepat /paper-shapes; contoh ini tidak menerima garis miring di akhir atau string kueri.
Browser masih menampilkan versi sebelumnya Hentikan program dengan Control-C, jalankan ulang blok yang telah diedit, lalu muat ulang halaman.
Judul terlihat benar, tetapi metadata tidak ada Periksa keluaran GET dan pastikan deklarasinya berada di dalam head dokumen.

Informasi apa dari respons ini yang dapat digunakan Google Search?

Judul yang deskriptif, deskripsi yang akurat, dan teks yang terlihat dan berguna memberi Google masukan terdokumentasi untuk menyajikan halaman. Google mencantumkan elemen title, judul visual utama, elemen heading, dan sumber lain sebagai masukan untuk membuat tautan judul secara otomatis. Pastikan sinyal-sinyal tersebut konsisten dengan topik dokumen. Memengaruhi tautan judul di hasil penelusuran

Google terutama membuat cuplikan dari konten halaman dan terkadang menggunakan meta description jika isinya lebih akurat dalam mendeskripsikan halaman. Penelusuran yang berbeda dapat menghasilkan cuplikan yang berbeda. Perlakukan deskripsi sebagai ringkasan yang berguna, bukan keterangan tetap untuk hasil penelusuran. Mengontrol cuplikan di hasil penelusuran

Untuk contoh sintetis ini, deskripsinya menjanjikan panduan penyusunan singkat, dan body menyediakan panduan tersebut. Saat mengganti teks contoh, periksa hubungan ini secara langsung: seseorang yang hanya membaca deskripsi harus memperoleh gambaran halaman yang akurat.

Menambahkan nama metadata khusus tidak membuatnya otomatis didukung. Google menyatakan bahwa meta tag yang tidak didukung akan diabaikan. Gunakan kolom terdokumentasi Google untuk metadata yang ditujukan ke penelusuran; kolom yang dibuat untuk aplikasi Anda sendiri memerlukan konsumen yang didefinisikan secara terpisah. Meta tag dan atribut yang didukung Google

Bagaimana pratinjau menjadi pola penerbitan publik?

Alamat lokal dalam panduan ini adalah pratinjau desktop, bukan halaman yang diterbitkan. Python juga mendokumentasikan bahwa http.server tidak disarankan untuk penggunaan produksi. Pindahkan struktur HTML dan persyaratan respons ke sistem penerbitan Anda, alih-alih menggunakan demonstrasi ini sebagai layanan hosting publik. Dokumentasi server HTTP Python

Jika menggunakan sistem manajemen konten, cari kontrol judul halaman dan meta description yang terdokumentasi. Google mencatat bahwa CMS mungkin menyediakan setelan penelusuran alih-alih penyuntingan HTML secara langsung. Petakan kontrol tersebut ke kolom yang ditunjukkan di sini, lalu periksa respons dokumen yang dihasilkan. Panduan Google untuk menambahkan meta description

HTTP mendukung representasi multipart, tetapi itu merupakan pilihan pengemasan yang berbeda. Untuk tugas dokumen yang dapat dibaca browser ini, struktur HTML yang didukung sudah memuat konten dan metadata dokumen dalam satu representasi. Memilih multipart akan menambah persyaratan pemrosesan bagi konsumen yang tidak dibutuhkan oleh panduan ini. RFC 9110, bagian 8.3.3

Pemeriksaan penyelesaian Anda jelas: satu permintaan dokumen yang berhasil mengembalikan jenis media yang benar, body HTML lengkap, judul dan deskripsi yang akurat, serta teks yang dicari pembaca. Terapkan pemeriksaan itu pada respons publik nantinya maupun pratinjau lokal, agar keluaran sistem penerbitan sesuai dengan dokumen yang telah disiapkan.

Sumber