Dasar-dasar HTMLSebuah halaman web adalah sebuah "Dokumen HTML". Ini adalah format file yang biasanya menggunakan ekstensi ". Html" atau "Htm.". Sebagai contoh, jika Anda menggunakan Microsoft Word, Anda biasanya akan menyimpan file dengan ekstensi "doc.". Namun Anda juga dapat menyimpan file Anda dengan ekstensi lainnya seperti, "wps." Dll Di antara pilihan adalah "html." "Txt.".
Dokumen HTML sebenarnya hanya teks biasa, tetapi berisi potongan kode yang membawa informasi penting tentang bagaimana halaman harus ditampilkan. Anda dapat membuat semacam dokumen menggunakan editor teks apapun - bahkan yang sangat sederhana seperti Windows Notepad. Bahkan banyak web designer lebih suka menggunakan editor teks sederhana.
Ini adalah apa yang sebuah dokumen HTML yang sangat sederhana terlihat seperti:
<html>
<head>
<title> Sebuah Halaman Web Sederhana </ title>
</ Head>
<body>
Ini adalah tentang yang sederhana seperti halaman web bisa mendapatkan.
</ Body></ Html>Untuk melihat dokumen HTML, Anda harus menggunakan browser (atau perangkat lunak yang serupa). Browser membuka dokumen HTML di latar belakang dan "decode" sebelum menunjukkan kepada Anda. Apa yang Anda lihat adalah interpretasi browser anda tentang bagaimana halaman web harus terlihat (catatan: ini sebenarnya sebuah titik penting - itu mengapa Anda harus menguji situs Anda dengan menggunakan berbagai browser).Tag dan Struktur Halaman
HTML menggunakan sistem "tag" untuk merekam instruksi tentang bagaimana halaman harus ditampilkan. Tag adalah ditempatkan di dalam kurung sudut seperti: <instruction>Tags sering ada dalam pasangan: The "tag awal" menentukan instruksi dan ditempatkan di mana Anda ingin instruksi untuk memulai. "Akhir tag" ditempatkan di mana Anda ingin instruksi untuk mengakhiri, dan diidentifikasi dengan dimasukkannya garis miring seperti: </ instruksi>. Instruksi diterapkan pada segala yang ada antara dua tag.
Tag yang paling penting adalah <html> dan </ html> - seluruh dokumen terkandung dalam dua tag. Instruksi di sini hanya "Ini adalah dokumen HTML".
Dalam dokumen, ada dua bagian: "kepala" dan "tubuh". Kepala terkandung dalam <head> tag dan </ head>, tubuh yang terkandung dalam <body> tag dan </ body>. Kepala mencakup informasi tentang dokumen tersebut, dan tidak ditampilkan oleh browser. Tubuh berisi semua isi untuk halaman, dan browser akan menampilkan apa.
Catatan: spesifikasi asli untuk HTML memungkinkan Anda untuk menggunakan atas atau huruf kecil dalam tag. Meskipun hal ini masih berlaku, spesifikasi terbaru mengatakan Anda harus menggunakan huruf kecil saja.
Bingung belum? Tidak apa, itu menjadi jelas segera ...
Mari kita melihat lagi dokumen HTML kita contoh. Untuk membuat hal lebih mudah untuk melihat bahwa kita telah mewarnai tag HTML biru dan memisahkan kepala dan tubuh dengan baris kosong (ruang kosong antara tag diabaikan). Tag juga tidak harus berada di baris baru, pada kenyataannya seluruh dokumen semua bisa berada pada satu baris - itu akan tetap ditampilkan sama.
<html>
<head>
<title> Sebuah Halaman Web Sederhana </ title>
</ Head>
<body>Ini adalah tentang yang sederhana seperti halaman web bisa mendapatkan.</ Body>
</ Html>
Tag pertama dan terakhir mengidentifikasi ini sebagai sebuah dokumen HTML, sehingga browser Anda atau perangkat lunak lain tahu apa yang harus dilakukan dengan itu. Kepala berisi "judul" tag yang mengidentifikasi nama dari dokumen ini (kita akan berbicara lebih banyak tentang itu nanti). Tubuh berisi satu baris teks, yang adalah apa yang Anda lihat ketika Anda membuka dokumen ini dalam browser. Untuk melihat apa dokumen ini misalnya tampak seperti, klik di sini, kemudian klik tombol back di browser anda untuk kembali dan melanjutkan.Lebih Tag
Meskipun contoh di atas adalah halaman web yang valid, itu tidak sangat menarik. Untuk membuat halaman lebih menarik perlu diformat. Untuk mengatur teks dan elemen lain di halaman Anda, ada sebuah array dari tag HTML yang tersedia. Sisa dari halaman ini mencakup melihat sekilas pada beberapa tag penting, maka kita akan mendapatkan ke detail lebih lanjut pada halaman berikut. Berikut adalah beberapa untuk memulai:
</ p>: Awal dan akhir paragraf (menempatkan spasi antara paragraf).
<br>: istirahat baris tunggal.
<b> </ b>: teks Bold.
<i> </ i>: Cetak miring.
<center> </ center>: Pusat segala sesuatu di antara tag ini (perhatikan ejaan Amerika).
<hr>: baris horisontal.
Mari kita lihat contoh yang sedikit lebih maju (klik di sini untuk melihat bagaimana dokumen ini terlihat):
<html>
<head><title> Sebuah Halaman Web Sederhana </ title></ Head>
<body><center><p> <b> Sebuah Halaman Web Sederhana </ b> </ p><i> <p> ini masih sebuah halaman web sederhana, tetapi memiliki sedikit lebih dari itu </ i>. </ p></ Center></ Body>
</ Html>Hyperlink
Ada satu tag yang sangat penting yang Anda perlukan untuk menjadi akrab dengan: tag hyperlink. Ini terlihat seperti ini:
href="mypage.html"> <a Klik di sini </ a>
Contoh ini menciptakan sebuah hyperlink ke sebuah file yang bernama "halamanku.html". Teks di dalam tag adalah bagian yang menjadi hyperlink diklik.Gambar
Berikut adalah hal yang sangat penting untuk memahami: HTML tidak benar-benar berisi konten grafis. Sebaliknya, file grafis yang dibuat dan disimpan secara terpisah (kami akan menjelaskan lebih kemudian). Tag gambar terlihat seperti ini:
<img src="myimage.jpg">
Catatan: File gambar harus dalam salah satu dari dua format: "gif." Atau "jpg.".Ringkasan
Untuk menyelesaikan bagian ini, mari kita lihat contoh yang menggunakan semua tag kita sudah dibahas di (klik di sini untuk melihat bagaimana ini terlihat):
<html>
<head><title> Sebuah Halaman Web Sederhana </ title></ Head>
<body><center><p> Sangat menyenangkan untuk dapat menambahkan teks tebal </ b> dan <i> miring </ i>. </ p>href="webdesign04.html"> <a Klik di sini </ a> untuk kembali ke tutorial. <br><img src="logo.gif"></ Center><hr></ Body>
</ Html>
Sekarang inilah kabar baiknya: Jika Anda dapat memahami contoh diatas, Anda telah menguasai konsep membuat website. Segala sesuatu yang lain hanya dibangun di atas sistem ini. Bahkan jika Anda tidak pernah secara manual menulis satu baris dari HTML, pengetahuan tentang cara kerjanya akan sangat berharga.
Sebelum kita melanjutkan, inilah trik: Browser memiliki fungsi yang memungkinkan Anda untuk melihat sumber HTML dari setiap halaman yang Anda kunjungi. Dari menu browser Anda pilih "Lihat" kemudian "Sumber" (pilihan ini mungkin memiliki nama yang sedikit berbeda tergantung pada browser Anda). Voila! Kode HTML yang membentuk halaman reve
Sebuah Halaman Web Sederhana </ title><br /> </ Head><br /> <body><br /> Ini adalah tentang yang sederhana seperti halaman web bisa mendapatkan.<br /> </ Body><br /> </ Html><br /> <br /> Untuk melihat dokumen HTML, Anda harus menggunakan browser (atau perangkat lunak yang serupa). Browser membuka dokumen HTML di latar belakang dan "decode" sebelum menunjukkan kepada Anda. Apa yang Anda lihat adalah interpretasi browser anda tentang bagaimana halaman web harus terlihat (catatan: ini sebenarnya sebuah titik penting - itu mengapa Anda harus menguji situs Anda dengan menggunakan berbagai browser).<br /> Tag dan Struktur Halaman<br /> <br /> HTML menggunakan sistem "tag" untuk merekam instruksi tentang bagaimana halaman harus ditampilkan. Tag adalah ditempatkan di dalam kurung sudut seperti: <instruction><br /> Tags sering ada dalam pasangan: The "tag awal" menentukan instruksi dan ditempatkan di mana Anda ingin instruksi untuk memulai. "Akhir tag" ditempatkan di mana Anda ingin instruksi untuk mengakhiri, dan diidentifikasi dengan dimasukkannya garis miring seperti: </ instruksi>. Instruksi diterapkan pada segala yang ada antara dua tag.<br /> <br /> Tag yang paling penting adalah <html> dan </ html> - seluruh dokumen terkandung dalam dua tag. Instruksi di sini hanya "Ini adalah dokumen HTML".<br /> <br /> Dalam dokumen, ada dua bagian: "kepala" dan "tubuh". Kepala terkandung dalam <head> tag dan </ head>, tubuh yang terkandung dalam <body> tag dan </ body>. Kepala mencakup informasi tentang dokumen tersebut, dan tidak ditampilkan oleh browser. Tubuh berisi semua isi untuk halaman, dan browser akan menampilkan apa.<br /> <br /> Catatan: spesifikasi asli untuk HTML memungkinkan Anda untuk menggunakan atas atau huruf kecil dalam tag. Meskipun hal ini masih berlaku, spesifikasi terbaru mengatakan Anda harus menggunakan huruf kecil saja.<br /> <br /> Bingung belum? Tidak apa, itu menjadi jelas segera ...<br /> <br /> Mari kita melihat lagi dokumen HTML kita contoh. Untuk membuat hal lebih mudah untuk melihat bahwa kita telah mewarnai tag HTML biru dan memisahkan kepala dan tubuh dengan baris kosong (ruang kosong antara tag diabaikan). Tag juga tidak harus berada di baris baru, pada kenyataannya seluruh dokumen semua bisa berada pada satu baris - itu akan tetap ditampilkan sama.<br /> <br /> <html><br /> <br /> <head><br /> <title> Sebuah Halaman Web Sederhana </ title><br /> </ Head><br /> <br /> <body><br /> Ini adalah tentang yang sederhana seperti halaman web bisa mendapatkan.<br /> </ Body><br /> <br /> </ Html><br /> <br /> Tag pertama dan terakhir mengidentifikasi ini sebagai sebuah dokumen HTML, sehingga browser Anda atau perangkat lunak lain tahu apa yang harus dilakukan dengan itu. Kepala berisi "judul" tag yang mengidentifikasi nama dari dokumen ini (kita akan berbicara lebih banyak tentang itu nanti). Tubuh berisi satu baris teks, yang adalah apa yang Anda lihat ketika Anda membuka dokumen ini dalam browser. Untuk melihat apa dokumen ini misalnya tampak seperti, klik di sini, kemudian klik tombol back di browser anda untuk kembali dan melanjutkan.<br /> Lebih Tag<br /> <br /> Meskipun contoh di atas adalah halaman web yang valid, itu tidak sangat menarik. Untuk membuat halaman lebih menarik perlu diformat. Untuk mengatur teks dan elemen lain di halaman Anda, ada sebuah array dari tag HTML yang tersedia. Sisa dari halaman ini mencakup melihat sekilas pada beberapa tag penting, maka kita akan mendapatkan ke detail lebih lanjut pada halaman berikut. Berikut adalah beberapa untuk memulai:<br /> <br /> </ p>: Awal dan akhir paragraf (menempatkan spasi antara paragraf).<br /> <br>: istirahat baris tunggal.<br /> <b> </ b>: teks Bold.<br /> <i> </ i>: Cetak miring.<br /> <center> </ center>: Pusat segala sesuatu di antara tag ini (perhatikan ejaan Amerika).<br /> <hr>: baris horisontal.<br /> <br /> Mari kita lihat contoh yang sedikit lebih maju (klik di sini untuk melihat bagaimana dokumen ini terlihat):<br /> <br /> <html><br /> <br /> <head><br /> <title> Sebuah Halaman Web Sederhana </ title><br /> </ Head><br /> <br /> <body><br /> <center><br /> <p><b> Sebuah Halaman Web Sederhana </ b> </ p><br /> <i> <p>ini masih sebuah halaman web sederhana, tetapi memiliki sedikit lebih dari itu </ i>. </ p><br /> </ Center><br /> </ Body><br /> <br /> </ Html><br /> Hyperlink<br /> <br /> Ada satu tag yang sangat penting yang Anda perlukan untuk menjadi akrab dengan: tag hyperlink. Ini terlihat seperti ini:<br /> <br /> href="mypage.html"> <a Klik di sini </ a><br /> <br /> Contoh ini menciptakan sebuah hyperlink ke sebuah file yang bernama "halamanku.html". Teks di dalam tag adalah bagian yang menjadi hyperlink diklik.<br /> Gambar<br /> <br /> Berikut adalah hal yang sangat penting untuk memahami: HTML tidak benar-benar berisi konten grafis. Sebaliknya, file grafis yang dibuat dan disimpan secara terpisah (kami akan menjelaskan lebih kemudian). Tag gambar terlihat seperti ini:<br /> <br /> <img src="myimage.jpg"><br /> <br /> Catatan: File gambar harus dalam salah satu dari dua format: "gif." Atau "jpg.".<br /> Ringkasan<br /> <br /> Untuk menyelesaikan bagian ini, mari kita lihat contoh yang menggunakan semua tag kita sudah dibahas di (klik di sini untuk melihat bagaimana ini terlihat):<br /> <br /> <html><br /> <br /> <head><br /> <title> Sebuah Halaman Web Sederhana </ title><br /> </ Head><br /> <br /> <body><br /> <center><br /> <p>Sangat menyenangkan untuk dapat menambahkan teks tebal </ b> dan <i> miring </ i>. </ p><br /> href="webdesign04.html"> <a Klik di sini </ a> untuk kembali ke tutorial. <br><br /> <img src="logo.gif"><br /> </ Center><br /> <hr></ Body><br /> <br /> </ Html><br /> <br /> Sekarang inilah kabar baiknya: Jika Anda dapat memahami contoh diatas, Anda telah menguasai konsep membuat website. Segala sesuatu yang lain hanya dibangun di atas sistem ini. Bahkan jika Anda tidak pernah secara manual menulis satu baris dari HTML, pengetahuan tentang cara kerjanya akan sangat berharga.<br /> <br /> Sebelum kita melanjutkan, inilah trik: Browser memiliki fungsi yang memungkinkan Anda untuk melihat sumber HTML dari setiap halaman yang Anda kunjungi. Dari menu browser Anda pilih "Lihat" kemudian "Sumber" (pilihan ini mungkin memiliki nama yang sedikit berbeda tergantung pada browser Anda). Voila! Kode HTML yang membentuk halaman reve
Post a Comment
Belajar video editing
Note: Only a member of this blog may post a comment.