Cara Menulis Halaman HTML (dengan Gambar) - Kiat

Video: HTML Dasar dengan NOTEPAD 1 HOME PAGE

Isi

Langkah
Bagian 1: Bagaimana saya menemukan HTML
Nasihat
Peringatan
Apa yang kau butuhkan

HTML (HyperText Markup Language) adalah bahasa dasar untuk membangun halaman web. Itu dibuat sebagai bahasa pengkodean yang mudah dan fleksibel. Hampir setiap situs web di Internet dikembangkan dengan beberapa bentuk kode ini (ColdFusion, XML, XSLT). HTML mudah dipahami, tetapi Anda dapat terus mempelajarinya untuk waktu yang lama jika Anda tertarik dengan fungsionalitasnya yang komprehensif. Untuk menambahkan warna dan kesenangan ke situs web Anda, Anda dapat mempelajari CSS dasar segera setelah Anda terbiasa dengan halaman HTML dasar.

Langkah

Bagian 1 dari 4: Membuat Dokumen

Buka editor teks sederhana. NotePad adalah pilihan yang bagus dan dapat diunduh secara gratis. Anda dapat menulis HTML dengan sebagian besar editor teks, tetapi perangkat lunak yang lebih kompleks dengan kemampuan pemformatan otomatis dapat menyulitkan pengaturan halaman HTML Anda.
- Jangan gunakan TextEdit, karena ini biasanya menyimpan file dalam format yang mungkin tidak dikenali browser Anda sebagai HTML.
- Anda juga dapat menggunakan editor HTML online. Program pengeditan HTML khusus tidak disarankan untuk pemula.
Simpan file sebagai halaman web. Pilih File → Save As pada menu di bagian atas. Ubah format file menjadi "Halaman Web", ".html" atau ".htm". Simpan file di tempat yang mudah ditemukan.
- Tidak ada perbedaan antara ketiga opsi ini.
Buka file di browser. Klik dua kali file tersebut, dan secara otomatis akan terbuka sebagai halaman web kosong di browser Anda. Alternatifnya, Anda dapat membuka browser, seperti Firefox atau Internet Explorer, lalu menggunakan File → Open File untuk memilih dokumen.
- Situs web ini tidak online. Ini hanya dapat dilihat di komputer Anda.
Segarkan halaman web dan lihat perubahan yang dilakukan. Ketik berikut ini ke dalam dokumen kosong Anda: Halo. Simpan dokumennya. Segarkan halaman web kosong di browser Anda, dan Anda akan melihat kata "Halo" dalam huruf tebal muncul di bagian atas halaman. Kapanpun Anda ingin menguji HTML baru Anda selama tutorial ini, simpan dokumen .htm, lalu segarkan jendela browser Anda untuk melihat bagaimana HTML dikompilasi.
- Jika Anda melihat kata-kata ""dan"'' Muncul di browser Anda, file belum dikompilasi dengan benar dalam HTML. Coba editor teks lain atau browser lain.
Pelajari tagnya. Perintah HTML ditulis dalam "tag" yang memberi tahu browser cara menyusun dan menampilkan halaman web Anda. Mereka selalu ditulis dalam tanda kutip tunggal
, dan tidak ditampilkan di halaman web seperti yang Anda gunakan pada contoh di atas:
- adalah "kartu awal" atau "kartu pembuka". Apa pun yang ditulis setelah tag ini akan ditetapkan sebagai "tebal" (cetak tebal di halaman web).
- adalah "tag akhir" atau "tag penutup", yang dapat Anda bedakan dengan simbol / tanda. Ini menunjukkan akhir dari teks tebal. Sebagian besar (tidak semua) tag memerlukan tag akhir agar berfungsi, jadi pastikan untuk menyertakannya.
Buat dokumen Anda. Hapus semua yang ada di dokumen HTML Anda. Mulailah dengan teks berikut, persis seperti yang tertulis (minus poin-poin). Kode HTML ini memberi tahu browser jenis HTML yang Anda gunakan, dan bahwa semua HTML Anda akan ditempatkan di dalam tag. dan .
Tambahkan tag kepala (kepala) dan tubuh. Dokumen HTML dibagi menjadi dua bagian. Bagian "atas" adalah untuk informasi khusus, seperti judul halaman. Bagian "body" berisi konten utama halaman. Tambahkan kedua bagian ini ke dokumen Anda, dan ingatlah untuk menyertakan tag akhir. Teks yang baru ditambahkan dicetak tebal:
Beri judul halaman Anda. Sebagian besar kartu di bagian kepala tidak penting untuk dipelajari dengan pemula. Tag judul mudah digunakan, dan akan menentukan apa yang muncul sebagai nama jendela browser atau pada tab browser. Tempatkan tag awal dan akhir judul Anda di dalam tag kepala, dan tulis header apa pun yang Anda suka di antara tag tersebut:
- Halaman HTML pertama saya.
iklan

Bagian 2 dari 4: Pemformatan Teks

Tambahkan teks ke tubuh Anda. Untuk bagian ini, kami hanya akan bekerja dengan tag badan. Teks lainnya akan tetap ada di dokumen Anda, tetapi kami akan menghemat ruang dengan tidak mengulanginya dalam tutorial ini. Tulis apa pun yang Anda inginkan di antara kartu dan , dan itu akan muncul sebagai konten pertama di halaman Anda. Sebagai contoh:
- Saya mengikuti instruksi wikiHow untuk menulis halaman HTML.
Tambahkan judul untuk teks tersebut. Atur halaman Anda dengan tag heading, yang menginstruksikan browser untuk menampilkan teks di antara mereka dalam ukuran font yang lebih besar. Tag ini juga digunakan oleh mesin telusur dan alat lainnya untuk menentukan tentang apa situs web Anda dan bagaimana pengaturannya.

adalah tajuk terbesar, dan Anda dapat membuat tajuk yang lebih kecil hingga

. Cobalah di halaman Anda:
- Selamat Datang di halamanku.
- Saya mengikuti instruksi wikiHow untuk menulis halaman HTML.
- Tujuan saya hari ini:
- Tujuan yang diselesaikan:
- Pelajari cara menggunakan heading.
- Gol yang belum terselesaikan:
- Pelajari lebih lanjut tag pemformatan teks.
Pelajari lebih lanjut tag pemformatan teks. Anda sudah melihat tag "kuat", tetapi ada banyak cara lain untuk memformat teks Anda. Coba tag ini, atau dengan beberapa tag sekaligus untuk string teks yang sama. Ingatlah untuk menambahkan tag penutup di belakang!
- Teks penting, ditampilkan dengan huruf tebal di browser.
- Teks yang ditekankan, ditampilkan dalam huruf miring di browser.
- Teks sedikit lebih kecil dari biasanya. Teks ini akan secara otomatis berubah ukurannya jika digunakan dalam sebuah judul.
- ~~Teks tidak lagi relevan, ditampilkan dengan tanda hubung tubuh.~~
- Teks disisipkan lebih lambat dari dokumen lain, ditampilkan dengan garis bawah.
Atur teks di halaman Anda. Anda mungkin telah memperhatikan bahwa menekan tombol "enter" saja tidak cukup untuk menampilkan teks di baris lain. Tag ini dapat membantu Anda membuat paragraf dan jeda baris, atau menyusun teks Anda dengan cara lain:
- Kependekan dari "paragraf", tag ini akan menyimpan semua teks di antara tag ini dalam satu paragraf, dan memisahkannya dari teks di atas dan di bawahnya.
- Tag ini akan menghasilkan jeda baris. Jangan menambahkan tag akhir ke dalamnya, karena tidak mengganggu konten lainnya. Gunakan tag ini dalam puisi atau baris alamat, bukan paragraf.
- ```
Jika Anda perlu menampilkan teks dengan sangat akurat, tag ini menyetel teks di dalamnya menjadi font dengan lebar tetap (setiap huruf memiliki lebar yang sama), dan memungkinkan Anda membuat interval Kosong dan jeda baris sesuka Anda untuk pengeditan reguler, bukan tag.
```
- Tag ini mendefinisikan jenis teks yang dikutip dari suatu sumber.
  Anda dapat mendeskripsikan sumbernya nanti dengan kartu kutipan.
Tambahkan teks tak terlihat. Tag komentar tidak ditampilkan di halaman web. Mereka memungkinkan Anda untuk membuat anotasi diri Anda sendiri ke dalam dokumen HTML tanpa mempengaruhi konten. Jangan tambahkan tag akhir.
- Kartu yang berjalan sendiri tanpa tag penutup disebut "tag kosong".
Gabungkan keduanya. Cara terbaik untuk mengingat tag ini adalah dengan menggunakannya di situs web Anda. Berikut adalah contoh penggunaan kartu dalam langkah-langkah yang telah Anda pelajari sejauh ini. Cobalah untuk memprediksi bagaimana mereka akan muncul di browser, lalu salin ke dokumen Anda dan cari tahu.
- Halaman HTML pertama saya.
- Selamat datang di situs web saya.
- Semoga Anda menikmati halaman ini!
  Aku membuatnya hanya untukmu.
- Bagian 1: Bagaimana saya menemukan HTML
- Saya sudah mempelajari HTML di ~~satu~~ duaberjam-jam, jadi sekarang saya seorang ahli.
iklan

Bagian 3 dari 4: Menambahkan Tautan dan Gambar

Pelajari tentang atribut. Tag dapat memiliki informasi tambahan yang tertulis di dalamnya, yang disebut atribut. Atribut ini diwakili oleh kata-kata tambahan di dalam tag itu sendiri, dalam formulir nama properti = "nilai spesifikMisalnya, setiap tag HTML dapat memiliki atribut judul:
- Paragraf pengantar ada di sini.
  Beri judul paragraf "Pendahuluan", yang akan muncul saat Anda mengarahkan kursor ke paragraf di halaman web.
Tautan ke situs web lain. Penggunaan kartu untuk membuat hyperlink ke halaman web lainnya. Masukkan URL halaman web untuk ditautkan menggunakan atribut href. Berikut adalah contoh tautan ke halaman web yang Anda baca:
- Pengunjung situs web Anda dapat mengeklik teks ini untuk mengikuti tautan.
Tambahkan atribut id ke tag. Atribut lain yang dapat digunakan tag HTML adalah elemen "id". Di kartu apa pun, tulis id = "vidu" atau gunakan nama apa pun yang tidak mengandung spasi. Itu tidak menghasilkan efek yang terlihat, tetapi kami akan menggunakannya di langkah berikutnya.
- Misalnya, tambahkan yang berikut ini ke dokumen Anda:
  Paragraf ini digunakan sebagai contoh untuk menjelaskan cara kerja atribut id.
Tautkan ke elemen dengan id tertentu. Sekarang kita bisa menggunakan tag hyperlink, , untuk menautkan ke lokasi lain di halaman yang sama. Alih-alih URL, kita akan menggunakan simbol #, diikuti dengan nilai id yang ingin kita tautkan. Sebagai contoh, Teks ini akan ditautkan ke teks dengan id "vidu."
- Semua nilai HTML peka huruf besar / kecil. "#VIDU" dan "#vidu" akan ditautkan ke lokasi yang sama.
- Jika halaman Anda cukup pendek untuk menampilkan seluruh halaman sekaligus, Anda mungkin tidak akan melihat apa pun yang terjadi saat Anda mengklik link di browser Anda. Ubah ukuran jendela hingga bilah gulir muncul, lalu coba lagi.
Menambahkan foto. Kartu adalah tag kosong, artinya tidak diperlukan tag akhir. Semua informasi yang dibutuhkan browser untuk menampilkan gambar ditambahkan menggunakan atribut. Berikut adalah contoh untuk menampilkan logo wikiHow, dengan deskripsi untuk setiap atribut di belakangnya:
- Properti src = "" memberi tahu browser di mana foto itu berada. (Perhatikan bahwa memposting foto dari situs orang lain dianggap tidak pantas - dan foto akan hilang saat halaman tidak lagi aktif.)
- Properti style = "" Itu dapat melakukan banyak hal, tetapi yang paling penting digunakan untuk mengatur lebar dan tinggi gambar dalam piksel. (Anda juga dapat menggunakan atribut terpisah width = "" dan height = "", tetapi ini dapat menyebabkan masalah pengubahan ukuran yang aneh jika Anda menggunakan CSS.)
- Properti alt = "" adalah deskripsi singkat dari gambar yang akan dilihat pengguna jika gambar gagal dimuat. Ini dianggap sebagai persyaratan, karena digunakan untuk pembaca layar bagi pengunjung situs web yang tunanetra.
iklan

Bagian 4 dari 4: Pelajari Lebih Lanjut Menambah dan Membuat Situs Web Anda Online

Konfirmasikan HTML Anda. Validasi HTML memeriksa kesalahan dalam kode Anda. Jika situs Anda tidak ditampilkan dengan benar, validasi dapat membantu Anda menemukan kesalahan yang menyebabkan masalah. Ini juga dapat mengajarkan Anda lebih banyak tentang HTML dengan menentukan bahwa kode terlihat bagus pada tampilan, tetapi tidak lagi disarankan karena pembaruan baru dalam standar HTML. Menggunakan HTML yang tidak valid tidak membuat situs Anda tidak berguna, tetapi dapat menyebabkan masalah atau tampilan tidak stabil di browser yang berbeda.
- Coba layanan validasi online gratis dari W3C, atau cari alat validasi HTML 5 online lainnya.
Pelajari lebih lanjut tentang tag dan atribut. Ada banyak tag dan atribut HTML lainnya, dan banyak tempat untuk mempelajarinya:
- Coba w3schools dan HTML Dog untuk tutorial lainnya dan daftar lengkap tag.
- Temukan halaman web yang Anda sukai dengan tampilannya, kemudian gunakan fungsi "Lihat Sumber Halaman" browser Anda untuk mendapatkan kode HTML Anda sendiri. Salin ke dalam dokumen Anda dan pelajari cara kerjanya.
- Baca artikel lain dan pelajari tentang cara membuat tabel dalam HTML, menggunakan tag meta untuk meningkatkan peluang Anda menemukannya melalui mesin telusur, atau menggunakan divisi. menetapkan area pada halaman) dan span (digunakan untuk menentukan gaya elemen teks) untuk membantu gaya melalui CSS.
Jadikan situs web Anda online. Pilih layanan untuk menginangi situs web Anda, dan kemudian Anda dapat mengunggah laman HTML sebanyak yang Anda inginkan ke domain web pribadi Anda. Untuk melakukan ini, Anda perlu menggunakan perangkat lunak unggah FTP, tetapi banyak layanan persewaan web yang menawarkan layanan ini juga.
- Saat menautkan ke halaman atau gambar yang langsung ada di situs Anda, Anda perlu menggunakan alamat lengkap. Misalnya, jika nama domain Anda adalah www.chuyengiahtmlsieudang.com, maka teks ada di tag ini akan ditautkan ke "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Tambahkan gaya dengan CSS. Jika halaman HTML Anda terlihat agak monoton, coba pelajari dasar-dasar CSS untuk menambahkan warna, font berbeda, dan kontrol yang lebih baik atas tempat elemen ditempatkan. Menautkan "stylesheet" CSS ke halaman HTML akan memungkinkan Anda membuat perubahan hebat dengan cepat, secara otomatis menyesuaikan gaya semua teks dalam tag tertentu. Anda dapat sedikit bermain-main dengan lapisan pemformatan dasar di sini, atau menyelami tutorial yang lebih mendetail di Tutorial CSS Anjing HTML.
Tambahkan JavaScript ke situs web Anda. JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan banyak fungsi ke halaman HTML Anda. Perintah JavaScript disisipkan di antara tag awal dan akhir , dan dapat digunakan untuk menambahkan tombol interaktif, menghitung soal matematika, dan lainnya. Cari tahu lebih lanjut di contoh w3c. iklan

Nasihat

Deklarasi doctype (Deklarasi Tipe Dokumen yang digunakan) yang digunakan dalam tutorial ini adalah "transisi HTML 4.0.1 longgar" (HTML 4.0.1 bukan transisi ketat), format yang mudah. untuk digunakan pemula. Gunakan () alternatif untuk browser untuk mengkompilasinya dalam format HTML 5 yang ketat, yang merupakan gaya standar yang disarankan (meskipun jarang digunakan).

Peringatan

Tujuan HTML adalah untuk menyimpan konten dalam format global. Itu tidak memiliki kendali atas presentasi situs web Anda, seperti warna latar belakang dan penempatan elemen yang tepat. Meskipun masih ada tag yang memungkinkan Anda melakukan ini, sebaiknya gunakan CSS untuk membuat situs web yang lebih terkontrol dan konsisten.

Apa yang kau butuhkan

Editor teks sederhana, seperti NotePad atau TextEdit
Browser web, misalnya Internet Explorer atau Mozilla Firefox
(Opsional) Editor HTML seperti Adobe Dreamweaver, Aptana Studio, atau Microsoft Expression Web