Cara membuat halaman HTML

Pengarang: Florence Bailey
Tanggal Pembuatan: 20 Berbaris 2021
Tanggal Pembaruan: 1 Juli 2024
Anonim
Tutorial Membuat Website Sederhana dengan HTML dan CSS. Lengkap dan Mudah bagi Pemula
Video: Tutorial Membuat Website Sederhana dengan HTML dan CSS. Lengkap dan Mudah bagi Pemula

Isi

HTML (Hypertext Markup Language) adalah bahasa pemrograman utama untuk mengembangkan halaman web. Dibuat sebagai bahasa pemrograman yang sederhana dan nyaman. Sebagian besar halaman di Internet telah dikembangkan menggunakan salah satu bentuk bahasa ini (ColdFusion, XML, XSLT). Setelah membaca artikel ini, Anda dapat melanjutkan pelatihan Anda menggunakan sumber lain di Internet. Coba cari di internet untuk artikel lain yang berhubungan dengan topik ini.

Langkah

Metode 1 dari 1: Menulis Halaman HTML

  1. 1 Sebelum Anda mulai membiasakan diri dengan salah satu langkah yang disajikan di sini, lihat bagian “Apa yang Anda Butuhkan”.
  2. 2 Apa yang harus Anda ketahui sebelum Anda mulai memahami masalah ini:
  3. 3 Dasar. Pernahkah Anda mendengar tentang tag? Tag dikelilingi oleh kurung sudut, dengan kata di dalamnya. Tag akhir ditulis dalam bentuk yang sama, tetapi dengan penambahan garis miring setelah kurung sudut pertama. Atribut adalah kata opsional dalam tag yang digunakan untuk menambahkan detail ke tag.
  4. 4 Awal dokumen. Di editor teks apa pun yang Anda gunakan, rekatkan berikut ini:
    html> kepala> judul> wikiHow / judul> / kepala> badan> Hello World / badan> / html> besar> / besar>
    Tag harus ditutup dengan tag yang sama, tetapi dengan garis miring setelah kurung sudut pertama. Ada pengecualian seperti tag META atau DOCTYPE.
  5. 5 DOCTYPE
    • Biasanya, sebagian besar halaman web disetel DOKTIPE”. Ini membantu menentukan pengkodean serta bagaimana hal itu akan dirasakan oleh browser web. Sebagian besar halaman akan berfungsi tanpanya, “tetapi ini perlu jika Anda ingin mencocokkan (Mereka mengatur jenis pengkodean di Internet dan bagaimana penggunaannya)... DOCTYPE untuk HTML 4.01 disajikan di bawah ini:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Ini salah satunya yang paling umum DOCTYPE digunakan pada halaman di seluruh internet.Pertama, ini menunjuk ke jenis halaman yang menjelaskan 'html', kemudian menyoroti jenis pengkodean, dan akhirnya, lokasi DOCTYPE, yang sebagai hasilnya, menjelaskan halaman untuk browser web.
    • Ada berbagai jenis HTML (versi berbeda yang dikembangkan selama bertahun-tahun), misalnya menggunakan tag baru, atau tag tertentu. Beberapa tag tidak digunakan lagi (sebagai gantinya digunakan tag lain yang lebih berguna).
    • b> dan saya> - inilah yang saat ini dikenakan pada tag, karena digunakan untuk mengubah teks, tetapi bukan spesifikasi, akibatnya, tag lain datang untuk menggantikannya. Menandai kuat> adalah pengganti b>, dan em>, pengganti saya>.
    • Penting bahwa tag sebelumnya diganti dengan tag yang lebih dari sekadar pemformatan. Jika teks diterjemahkan, maka tidak hanya formatnya, tetapi juga artinya tetap sama. Ini secara semantik benar.
    • Dalam XHTML versi 2.0, b> dan saya> tidak digunakan, seperti di HTML versi 3+.
  6. 6 HTML "Aturan Enkapsulasi".
    • Mari kita lihat tag yang lebih penting yang saat ini digunakan. Selama pembuatan halaman, struktur sederhana digunakan. Jika tag dibuka, maka sebagai hasilnya, itu harus ditutup... Ini berlaku untuk seluruh struktur. Berikut adalah contoh yang valid dari struktur tata letak XHTML:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Ketat // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • kepala>
    • meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
    • judul> Halo Dunia! / judul>
    • / kepala>
    • tubuh>
    • h1> Halo Dunia! / h1>
    • / tubuh>
    • /html>
    • Contoh kode yang mengeluarkan pesan Halo Dunia... Ini disebut ujian Halo Dunia.
  7. 7 Menuju
    • Judul halaman web adalah konten di antara tag kepala>... Konten ini tidak dapat dilihat oleh pengguna (hanya judul yang ditampilkan di judul halaman). Informasi antar tag kepala>, dapat menyertakan tag lain, seperti:

      • Tag META digunakan untuk informasi yang berguna untuk mesin pencari dan utilitas lainnya.
      • Tag LINK yang membuat link antar dokumen, misalnya untuk Styles (CSS).
      • Tag SCRIPT, ini mencakup hampir semua pengkodean web, dengan kemampuan untuk mengakses dari jarak jauh (dari dokumen lain).
      • Tag STYLE, yang pada dasarnya adalah gaya yang dapat diterapkan ke halaman.
      • Tag TITLE adalah judul yang muncul sebagai judul halaman di browser web Anda.
    • Mari kita lihat demo beberapa di antaranya dalam contoh tajuk yang diambil dari situs web ini (telah disingkat):
      • kepala>
      • judul> ... / judul>
      • meta name = "deskripsi" konten = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />
      • tipe gaya = "teks / css" media = "semua"> ... / gaya>
      • jenis skrip = "teks / javascript" src = "..."> / skrip>
      • / kepala>

        Jika Anda belum menyadarinya, masing-masing tag telah disorot, dengan informasi yang sebenarnya dihapus. Contohnya agak pendek, menunjukkan hampir setiap tag yang dapat ditemukan di kepala>kecuali untuk komentar HTML (Kita akan membicarakan ini dalam tag sederhana).
  8. 8 Tag sederhana di mana-mana
    • Mari kita lanjutkan dan lihat tag lainnya. Hati-hati dengan penandaan Anda dan ingat aturan praktis, "Enkapsulasi."

      • kuat> Menekankan teks penting.
      • kecil> Membuat teks lebih kecil. Ukuran font diukur dalam satuan standar dari 1 hingga 7, 3 adalah ukuran teks default. ...
      • pre> Mendefinisikan blok teks kaya. Seperti yang benar, teks tersebut diketik dalam font dengan ukuran yang sama dan dengan semua spasi di antara kata-kata.
      • em> Menampilkan teks sebagai frasa.
      • del> Mencoret teks.
      • ins> Mendefinisikan teks yang telah dimasukkan ke dalam dokumen.
      • h1> Salah satu dari banyak tag heading. Tag semacam ini dimulai dengan 'h', dengan perbedaan nomor. Pastikan untuk menutup tag dengan nomor yang sama.
      • p> Mendefinisikan sebuah paragraf.
      • !-----> Tidak seperti tag lainnya, komentar harus berada di dalam tag itu sendiri. Informasi ini hanya terlihat ketika kode dilihat.
      • blockquote> Menampilkan kutipan, dapat digunakan dengan tag cite>.
      • Beberapa contoh di atas bukanlah daftar lengkap dari tag yang ada. Untuk mengetahui tentang orang lain, kunjungi.
  9. 9 Membuat struktur yang jelas
    • Halaman dirancang untuk menyimpan data dalam kumpulan tag sederhana sehingga kami dapat menguraikan informasi ke dalam paragraf. Komputer mengenali data; tidak tahu tentang konteks atau koneksi konseptual. Kita harus membuat halaman HTML yang ramah komputer. Ini dicapai dengan menggunakan tag div. Ini membantu untuk membuat sejumlah besar halaman. Itu dapat ditata dengan CSS dan lebih mudah daripada membuat tabel kode besar untuk tata letak.
      • div> Tag ini istimewa karena dapat ditata dan menggunakan blok informasi terpisah yang dapat dipahami oleh pengguna dan komputer.
    • Mari kita lihat tata letak HTML sederhana yang menggunakan tag div.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Ketat // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • kepala>
      • meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      • judul> Halo Dunia! / judul>
      • / kepala>
      • tubuh>
      • h1> Halo Dunia! / h1>
      • div id = "contentOne">
      • p> Ini adalah beberapa teks di div # contentOne. / p>
      • div>
      • p> Sebuah paragraf dalam sub-bagian dari div # contentOne / p>
      • / div>
      • / div>
      • / tubuh>
      • /html>
    • Menggunakan tag div> membantu menemukan dan memodifikasi gaya saat bekerja dengan CSS dan Javascript. HTML akan menggunakan penyandian berbeda untuk bekerja dengan gaya CSS dan Javascript untuk menciptakan pengalaman pengguna yang lebih baik dan lebih responsif.

Tips

  • Setelah membaca artikel ini, jangan berhenti dan berpikir bahwa Anda telah mempelajari semua yang perlu Anda ketahui. Selalu ada sesuatu untuk dipelajari, terutama dalam teknologi ini.
  • Pelajari, pahami, dan tulis kode.
  • Perhatikan bahwa beberapa tag hanya menggunakan>. Para dan br adalah beberapa contohnya. Tag lain yang dibuka dengan> perlu ditutup lebih lanjut. Misalnya, "div> / div>".
  • Orang mengharapkan penemuan baru, jadi temukan kembali, desain, atau kode.
  • Setelah Anda belajar banyak, cobalah belajar pemrograman server.
  • Belajar bekerja dengan CSS serta Javascript.

Peringatan

  • Ingat, HTML adalah semua tentang mengedit konten. Ini berarti bahwa HTML hanya digunakan untuk menyimpan konten dalam format yang dikenali. Perubahan lain harus dilakukan dengan menggunakan teknologi lain, seperti CSS. Ini juga berarti melakukan "Semantik benar"bahkan jika orang lain tidak mengakuinya. Bahasa pemrograman lain membantu membangun halaman web (CSS, Javascript, dan XML). HTML adalah konstruktor konten.

Apa yang kamu butuhkan

  • Editor teks yang mendukung pengkodean ANSI
  • Peramban web seperti Internet Explorer atau Mozilla Firefox
  • (Opsional) editor HTML wysiwyg atau wykiwyg seperti Adobe Dreamweaver, Aptana Studio, atau Microsoft Expression Web