Buat file baru untuk uji coba pertama di editor pilihan Anda. Jika Anda menggunakan Editor Windows, buka melalui Start>Semua Program>Aksesori>Editor.
Pilih kemudian File>Simpan Sebagai. Hal yang penting adalah bidang Jenis File.
Di sini sangat penting untuk mengatur Semua File. Di dalam bidang Nama File, masukkan index.htm. Sekarang Anda dapat menyimpan file di lokasi yang diinginkan. Inilah file yang akan Anda kerjakan, file HTML pertama Anda, walaupun saat ini masih kosong. Hal ini akan segera berubah.
Jika Anda menggunakan Dreamweaver, sebaiknya atur segera saat memulai program bahwa Anda ingin membuat file HTML.
Kerangka Dasar HTML
Sebelum memulai kerangka dasar HTML, ada petunjuk penting tentang semantik yang digunakan di dalam seri ini - dan juga dalam dunia HTML -. Karena Anda akan terus-menerus menemui istilah Tag dan Elemen, yang sayangnya sering salah diinterpretasikan. Sebagai contoh:
<a href="news.htm">Ke Berita Terbaru</a>
Sintaks ini menunjukkan sebuah elemen a, yaitu <a href="news.htm">Ke Berita Terbaru</a>. Elemen ini terdiri dari sebuah tag pembukaan a, yaitu <a> atau lengkapnya <a href="news.htm">, isi elemen Ke Berita Terbaru, dan tag penutup a </a>. Selain itu, elemen a memiliki atribut href dengan nilai atribut news.htm.
Contoh sebelumnya menunjukkan definisi hyperlink dalam HTML melalui elemen a. Elemen a ini ditandai dengan tag pembukaan <a> dan tag penutup </a>. Jadi, Anda melihat bahwa sebenarnya tidak sulit untuk menggunakan istilah Elemen dan Tag dengan benar.
Sekarang saatnya. Buka file HTML yang telah disimpan sebelumnya di editor Anda. Setiap dokumen HTML memiliki kerangka dasar tertentu.
Ini adalah kerangka yang dimaksud dalam kejayaannya:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Apa arti dari entri masing-masing? Mulai dengan deklarasi tipe dokumen yang disebut DOCTYPE.
<!DOCTYPE html>
Melalui deklarasi tipe dokumen seperti itu, Anda memberi tahu peramban di mana situs web Anda akan ditampilkan nantinya, standar HTML apa yang Anda gunakan. Dalam kasus ini, kita menggunakan HTML5. Jika Anda menggunakan HTML 4.01, deklarasi DOCTYPE akan terlihat seperti ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Hal yang sering disebut Deklarasi Tipe Dokumen seringkali membuat bingung bagi pemula HTML, karena terdapat berbagai varian. Namun, pada dasarnya, ini cukup sederhana: Bayangkan deklarasi tipe dokumen sebagai petunjuk konstruksi, di mana dijelaskan elemen-elemen apa saja yang boleh ada dalam suatu dokumen.
Saya menyarankan Anda untuk menggunakan deklarasi HTML5 yang singkat.
<!DOCTYPE html>
Peramban modern mendeteksinya dan menampilkan halaman menggunakan mode standar di mana digunakan. Namun, sebaiknya Anda benar-benar hanya mendefinisikan elemen HTML yang diperbolehkan dalam HTML5. Lebih lanjut mengenai hal ini akan dibahas nanti.
Selanjutnya adalah elemen html.
<html lang="de"> … </html>
Elemen ini mengelilingi dokumen. Perhatikan atribut lang. Melalui atribut tersebut, bahasa yang digunakan dalam dokumen ditentukan. Berikut adalah beberapa singkatan lang untuk area berbahasa Jerman.
• de – Jerman (Standar)
• de-ch – Jerman (Swiss)
• de-at – Jerman (Austria)
• de-lu – Jerman (Luxembourg)
• de-li – Jerman (Liechtenstein)
Ada lebih banyak singkatan lang yang berbeda untuk bahasa Inggris.
• en-us – Inggris (AS)
• en-gb – Inggris (Inggris Raya)
• en-au – Inggris (Australia)
• en-ca – Inggris (Kanada)
• en-nz – Inggris (Selandia Baru)
• en-ie – Inggris (Irlandia)
• en-z – Inggris (Afrika Selatan)
• en-jm – Inggris (Jamaika)
• en – Inggris (Kepulauan Karibia)
Apakah Anda menggunakan singkatan dua huruf de, gb, dll. atau lebih suka menggunakan singkatan gabungan seperti yang ditunjukkan sebelumnya, pada akhirnya terserah Anda. Saya lebih memfavoritkan singkatan dua huruf.
Dalam elemen head diharapkan data kepala dokumen.
<head> … </head>
Data kepala terdengar agak kaku, tetapi dapat dijelaskan dengan cepat. Di sini, antara lain, informasi tentang dokumen dimasukkan, seperti judul dan jenis huruf yang digunakan. Skrip dan stylesheet juga dapat dimasukkan di sini dan metadata umum dapat ditentukan. Namun, detailnya akan dijelaskan nanti.
Yang paling penting adalah elemen title.
<title>Tutorial untuk Pengeditan Gambar dengan Photoshop, Desain Web & Fotografi - PSD-Tutorials.de </title>
Dengan ini, judul yang diperlukan di berbagai tempat ditetapkan.
• Di baris judul browser.
• Ketika bookmark ditetapkan di browser.
• Dan tentu saja, judul memainkan peran penting dalam optimisasi mesin telusur.
Jadi, kamu bisa melihat seberapa pentingnya judul. Pilih judul yang singkat dan padat.
Untuk deskripsi halaman yang lengkap, Anda dapat menggunakan meta tag. Informasi lebih lanjut akan menyusul.
Selanjutnya adalah jenis huruf yang digunakan.
<meta charset="UTF-8" />
Informasi ini penting untuk browser. Karena hanya dengan begitu mereka tahu bagaimana karakter harus dienkoding sehingga dapat ditampilkan dengan benar. Hanya dengan memberikan jenis huruf yang benar, karakter khusus dan umlaut, misalnya, dapat ditampilkan dengan benar. Biasanya, di sini Anda menentukan UTF-8.
Sekarang kita masuk ke konten sebenarnya dari halaman web, yaitu apa yang sebenarnya dilihat oleh pengunjung. Semua itu didefinisikan dalam elemen body.
<body> … </body>
Demikianlah, untuk tujuan demonstrasi, masukkan sesuatu di antara tag <body> yang terbuka dan ditutup:
<h1>PSD-Tutorials.de</h1>
Dokumen harus terlihat seperti ini setelahnya:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Contoh Kerangka Dasar HTML5 - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Simpan perubahan dan buka file dalam browser.
Seperti yang terlihat, PSD-Tutorials.de sekarang benar-benar terlihat. Kamu telah membuat dokumen HTML pertamamu sendiri.
