Materi TKJ Pengenalan HTML
HTML biasanya kata kata tersebut memiliki berbagai jenis gaya karateristiknya, seperti perbedaan huruf dan warna.Dalam sebuah web manampilkan berbagai gambar atau vidio.Kadang juga bisa memasukan atau mencari informasi, menampilkan web yang terdapat konten yang bergerak dan juga konten yang berubah lainnya.
Berbagai macam teknologi seperti CCs, JavaScript, Flash, AJAX dan JSON dapat digunakan untuk mendefinisikan elemen dari sebuah halama web.HTML (HyperText Markup Language) pada level paling rendah, akan tetapi tanpa HTML maka tidak akan ada halaman web.
Artikel ini berisi pengenalan terhadap Pengenalan HTML. Jika Anda penasaran akan apa yang terjadi dibalik layar browser Anda, maka artikel ini adalah tempat yang tepat untuk mulai mempelajarinya.
H T M L
Sejarah singkat HTML
Pada tahun 1980an, Tim Berners-Lee bekerja seorang physicist di Cern (Sebuah Organisasi untuk research nuklir di eropa). Beliau merancang para scientis untuk berbagi dokumen melalui internet. Invensi ini, komunikasi melalui internet hanya terbatas pada dokumen teks biasa seperti email, FTP (File Transfer Protocol), dan Panel diskusi berbasis Uneset. Invensi dari HTML memanfaatkan model dan konten yang disimpan dalam server pusat yang dapat ditransfer dan ditampilkan pada workstation lokal melalui browser. Invensi ini untuk menampilkan konten yang “kaya” (seperti pemformatan teks yang mutakhir dan menampilkan gambar).
Pengertian HTML
HTML adalah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan “konten” (kata-kata, gambar, audio, video dan lainnya) dari “Penampilan” (Definisi dari tipe konten dan instruksi bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih “tag” yang mengekspresikan konten. Tatag diawali dan diakhiri dengan kurung siku, dan tag “penutup” (tag yang menandakan akhir dari konten) diawali dengan garis miring.
Sebagai contoh, elemen paragraf terdiri dari tag pembuka “<p>” dan tag penutup “</p>”. Contoh berikit menampilkan sebuah paragraf yang terdapat dalam elemen paragraf HTML:
<p>My dog ate all the guacamole.</p>
Ketika konten tersebut ditampilkan dalam web browser, maka akan terlihat seperti berikut:
Browser menggunakan tag sebagai indikator bagaimana konten yang terdapat di dalam tag ditampilkan.
Elemen-element yang memiliki konten biasanya dapat memiliki elemen lainnya. Sebagai contoh, elemen empasis (“<em>”) dapat disertakan di dalam elemen paragraf:
<p>My dog ate <em>all</em> the guacamole.</p>
Ketika ditampilkan, akan terlihat seperti:
Sebagian elemen tidak memiliki konten lainnya di dalamnya. Sebagai contoh, tag image (“<img>”) secara sederhana menspesifikasikan nama file dari konten (sebuah gambar) sebagai sebuah atribut:
<img src=”smileyface.jpg”>
Seringkali sebuah garis miring dituliskan sebelum kurung tutup siku untuk menginditifikasikan akhir dari tag. Hal ini bersifat opsional dalam HTML tapi harus dilakukan dalam XHTML Yakni sebuah skema XML yang mengimplementasikan elemen-elemen HTML).
Elemen — dasar building blocks
HTML terdiri dari sekumpulan elemen-elemen. Elemen-elemen mendefinisikan arti semantik dari content yang bersangkutan. Sebagai contoh, elemen “<p>” mengindikasikan sebuah paragraf; elemen “<img>” mengindikasikan sebuah gambar (image).
Sebagian elemen memiliki makna yang sangat tepat, seperti dalam “ini adalah image”, “ini adalah judul” atau “ini adalah daftar tak berurut.” yang lainnya tidaklah spesifik, “ini adalah bagian dari halaman” atau “ini adalah sebagian dari text.” Pun elemen-elemen lainnya digunakan untuk alasan teknis, seperti “bagian ini mengidentifikasi informasi untuk halaman yang tidak boleh ditampilkan.” Bagaimanapun juga, dalam satu cara atau seluruh elemen-elemenn HTML lainnya memiliki nilai semantik.
Sebuah halaman web sederhana tapi sempurna akan terlihat seperti berikut:
<html>
<body>
Sebagian elemen memiliki makna yang sangat tepat, seperti dalam “ini adalah image”, “ini adalah judul” atau “ini adalah daftar tak berurut.” yang lainnya tidaklah spesifik, “ini adalah bagian dari halaman” atau “ini adalah sebagian dari text.” Pun elemen-elemen lainnya digunakan untuk alasan teknis, seperti “bagian ini mengidentifikasi informasi untuk halaman yang tidak boleh ditampilkan.” Bagaimanapun juga, dalam satu cara atau seluruh elemen-elemenn HTML lainnya memiliki nilai semantik.
Sebuah halaman web sederhana tapi sempurna akan terlihat seperti berikut:
<html>
<body>
<p>My dog ate all the guacamole.</p>
</body>
</html>
</html>
Seperti yang anda lihat, elemen <html> menampung dokumen di dalamnya, dan elemen <body> menampung konten dari halaman web. Struktur ini sering diibaratkan sebagai pohon yang memiliki cabang-cabang (dalam kasus ini elemen <body> dan <p>) yang tumbuh dari batang (<html>). Struktur Hierarki ini disebut dengan DOM: Document Object Model.
Tag
Dokumen HTML ditulis dalam teks biasa, bisa juga ditulis menggunakan teks editor apapun, meski sebagian besar penulis HTML menganjurkan untuk menggunakan editor spesial yang memiliki syntax highligting dan menampilkan DOM. Nama tag bisa ditulis dengan huruf kecil atau huruf kapital. Akan tetapi, W3C (Konsorsium global yang mengurus standarisasi HTML) menganjurkan untuk menggunakan huruf kecil (dan XHTML mengharuskan menggunakan huruf kecil).
HTML menempelkan makna spesial terhadap apa saja yang diawali dengan tanda lebih kecil dari (“<“) dan diakhiri dengan tanda lebih besar dari (“>”). Markup tersebut disebut dengan tag. Pastikan untuk menutup tag, seperti halnya sebagian tag ditutup secara bawaan, dan yang lainnya mungkin menghasilkan error yang tidak diinginkan jika anda lupa menutup tag.
Berikut ini adalah contoh sederhananya:
HTML menempelkan makna spesial terhadap apa saja yang diawali dengan tanda lebih kecil dari (“<“) dan diakhiri dengan tanda lebih besar dari (“>”). Markup tersebut disebut dengan tag. Pastikan untuk menutup tag, seperti halnya sebagian tag ditutup secara bawaan, dan yang lainnya mungkin menghasilkan error yang tidak diinginkan jika anda lupa menutup tag.
Berikut ini adalah contoh sederhananya:
<p>This is text within a paragaraph.</p>
Dalam contoh di atas terdapat tag pembuka dan tag penutup. Tag penutup sama hanya dengan tag pembuka tapi memiliki tanda garis miring (forward slash /) sebelumnama tag atau sesudah tanda lebih kecil dari. Tag pembuka dan penutup harus disarangkan secara benar, yaknik tag penutup harus dituliskan sebagai kebalikan dari tag pembuka. Hal ini merupakan suatu aturan yang harus dipatuhi untuk penulisan kode yang valid
Berikut ini adalah contoh kode yang valid:
Berikut ini adalah contoh kode yang valid:
<em>I <strong>really</strong> mean that</em>
Dan berikut ini adalah contoh kode yang tidak valid:
Invalid: <em>I <strong>really</em> mean that</strong>.
Atribut
Tag pembukan dapat memiliki informasi tambahan, seperti halnya dalam contoh sebelumnya. Informasi tersebut disebut dengan atribut. Atribut biasanya terdiri dari 2 bagian:
Nama Atribut
Nilai Atribut.
Sebagian kecil atribut hanya bisa menampung satu nilai. Atribut-atribut tersebut adalah atribut Boolean dan dapat disingkat dengan hanya menuliskan nama atribut atau membiarkan nilai atribut kosong. Ketiga contoh berikut memiliki arti yang sama:
Tag pembukan dapat memiliki informasi tambahan, seperti halnya dalam contoh sebelumnya. Informasi tersebut disebut dengan atribut. Atribut biasanya terdiri dari 2 bagian:
Nama Atribut
Nilai Atribut.
Sebagian kecil atribut hanya bisa menampung satu nilai. Atribut-atribut tersebut adalah atribut Boolean dan dapat disingkat dengan hanya menuliskan nama atribut atau membiarkan nilai atribut kosong. Ketiga contoh berikut memiliki arti yang sama:
<input required=”required”>
<input required=” “>
<input required>
Nilai atribut yang terdiri dari satu kata atau nomor dapat dituliskan langsung, tetapi jika terdari dari dua atau lebih maka harus dituliskan dalam tanda kutip. Baik tanda kutip satu (‘) atau dua (“) diperbolehkan.Kebanyakan untuk selalu menggunakan tanda kutip agar kode yang ditulis tidak ambigu bagi mata dan untuk menghindari kesalahan-kesalahan. Berikut ini adalah contoh kesalahan:
<p class=foo bar> (beware, this probably does not mean what you think it mean. )
Dalam contoh ini, nilai atribut seharusnya ditulis “foo bar” namun karena dituliskan tanpa tanda kutip maka kode tersebut diterjemahkan seperti berikut :
<p class=foo bar> (beware, this probably does not mean what you think it mean. )
Dalam contoh ini, nilai atribut seharusnya ditulis “foo bar” namun karena dituliskan tanpa tanda kutip maka kode tersebut diterjemahkan seperti berikut :
<p class=”foo” bar=” “>
Named character references
Named character references sering disebut juga entities digunakan untuk mencetak karakter yang memiliki makna dalam HTML. Sebagai contoh, HTML menerjemahkan tanda lebih kecil dari dan lebih besar dari sebagai pemisah tag. Anda bisa menggunakan named character reference. Ada empat named character references yang harus anda ketahui:
• > menandakan lebih besar dari (>)
• < menandakan lebih kecil dari (<)
• & menandakan ampersand (&)
• " menandakan tanda kutip dua (“)
Ada banyak many more entities , tapi keempat entiti tersebut adalah yang paling penting karena semuanya menandakan karakter yang memiliki arti spesial bagi HTML.
Doctype dan Komentar
Sebagai tambahan dari tag, konten teks dan entitas-entitas, sebuah dokumen HTML harus memiliki deklarasi doctype yang terdapat dibaris pertama.Doctype adalah instruksi untuk web browser tentang versi keberapa dokumen HTML ditulis.
Dalam HTML 4.01, doctype mengaju kepada DTD (Document Type Definition) sebagaimana HTML ini berbasis SGML. Ada tiga deklarasi doctypedalam HTML 4.01.
HTML 4.01 Strict
DTD ini berisi seluruh elemen dan atribut HTML, tetapi TIDAK MENYERTAKAN presentasional atau element-element usang (seperti font). Framesets tidak diizinkan.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN>
HTML 4.01 Transitional
DTD ini menampung seluruh elemen dan atribut HTML, TERMASUK element yang bersifat presentasi dan elemn yang usang. Framesets tidak diizinkan.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN>
HTML 4.01 Frameset
DTD ini sama halnya dengan HTML 4.01 Transitional, namun mengizinkan penggunakan Framesets.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Framest//EN>
Dalam HTML 5, hanya terdapat satu deklarasi dan deklarasi ini ditulis seperti berikut:
<!DOCTYPE html>
Doctype adalah doctype memberitahu browser untuk menerjemahkan kode HTML dan CSS sesuai dengan standar W3C dan tidak berpura-pura untuk berlaku sebagai Internet Explorer yang berasal dari tahun 90an.HTML memiliki mekanisme untuk penyertaan komentar yang tidak ditampilkan ketika halaman diproses dalam browser. Komentar ini berguna untuk menjelaskan beberapa bagian dalam markup, atau meninggalkan catatan untuk orang lain. Komentar HTML dibuat dengan menyertakan simbol seperti berikut:
<!–This is comment text –>
Nah sementara cukup itu saja Materi TKJ kali ini yaitu Materi TKJ Pengenalan HTML jika ada kesalahan dalam pemjelasan materi mohon dimaklumi saya hanya manusia biasa dan anda bisa tinggalkan komentar sebagai bentuk peduli anda untuk perkembanngan blog ini lebih lanjut kedepan, semoga bisa bermanfaat dan membantu anda semuanya, terimakasih.
EmoticonEmoticon