Anda di halaman 1dari 7

DASAR-DASAR HTML

Diajukan untuk memenuhi Tugas Desain Web Statis dan HTML

Guru Pengajar : M.Nurhamid

NAMA:Puput Dwi Ambarsari KELAS:X RPL 1 PEMERINTAH KABUPATEN JEMBER DINAS PENDIDIKAN SMK NEGERI 1 TANGGUL Jl.PB.Sudirman No.114 Telp.(0336)441347 Tanggul-Jember

HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C, C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode. Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang relevan. Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu. Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan >.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan. Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1. Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java. Struktur Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih baik mempraktekan langsung struktur ini sbg perancangan halaman web kita. Listing 1 menunjukkan struktur suatu halaman HTML sederhana: Listing 1 <! Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser> <HTML> <HEAD> <TITLE> Welcome to HTML </TITLE> </HEAD> <BODY>

<!halaman CONTENT dimulai > <B>Yang ditampilkan di browser, cuma tulisan ini. </BODY> </HTML> Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya? Listing 2 <B>Untuk menampilkan tulisan cetak tebal</B><BR> <I>Untuk menampilkan tulisan cetak miring (italic) </I><BR> <U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR> <BR> digunakan untuk menampilkan baris baru. Listing 3 <Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya. </P> Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan. Listing 4 Bekerja dengan Heading Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah: <H1>Level 1 </H1> <H2>Level 2 </H2> <H3>Level 3 </H3> <H4>Level 4 </H4> <H5>Level 5 </H5> Listing 5 Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML. sebagai berikut o Ordered List o Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet. Cobalah kode di bawah ini: <OL> <LI>Java <LI>C++ </OL> kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL> sebagai di bawah ini: Listing 6 <UL> <LI>Java <LI>C++ </UL> Listing 7 Penerapan Definisi List Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL> dan <DT> seperti ditunjukkan listing 7 dibawah ini. <DL> <DT>Java <DD>Developed by Sun Microsystems Inc <DT>Yang kedua <DD>Developed by saya sendiri </DL> Listing 8 Indenting Text Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara otomatis dari kiri ke kanan. Cobalah contoh berikut : <BLOCKQUOTE> You can use Sound Recorder to record, play, and edit sound files. To use Sound Recorder, you must have a sound card and speakers installed on your computer. If you want to record live sound, you also need a microphone. </BLOCKQUOTE> Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling berhubungan. Sebagai contoh,ketika kita klik suatu link nama About Us, pada browser secara otomatis Kita ke halaman web itu . Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan tag </a> dan itu mewakili anchor. Listing 9 <A href =http://www.rumahweb.com>Rumahweb </A> href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh, kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru ketika seseorang mengklik teks. Listing 10 <A href = http://www.rumahweb.com target = _blank>Rumahweb </A>

Awal Sejarah HTML


Pada awal kemunculannya di penghujung 1990-an, XML (Extensible Markup Languange) kerap dianggap sebagai bahasa markup pengganti HTML (Hypertext Markup Languange). Mungkin karena sama-sama turunan dari SGML (Standard Generalized Markup Languange). Padahal, XML dibuat untuk menjembatani interoperabilitas antar software dari platform yang berbeda. Sebelum membahas lebih jauh apa itu XML dan bagaimana fungsinya, ada baiknya kita memahami betul istilah markup language. Awalnya markup language digunakan oleh para penulis, editor, dan awak percetakan dalam dunia penerbitan, untuk menandai sebuah naskah dipresentasikan. Editor menandai bagian-bagian naskah yang perlu diperbaiki oleh penulis, dengan tandatanda khusus. Editor juga melakukan hal yang sama pada naskah yang akan di-layout oleh desainer (dahulunya merupakan bagian dari awak percetakan), bagian mana yang dicetak miring, tebal, dan lain-lain. Dengan kata lain, markup language adalah gabungan antara naskah dengan informasi tambahan tentang naskah itu sendiri. Contoh markup language yang paling lazim kita temukan saat ini di internet adalah HTML. Sejarah XML XML didesain oleh sebuah kelompok kerja yang terdiri dari sebelas orang. Mereka mendapat dukungan dari 150 orang di luar kelompok tersebut.

Pemimpin bidang teknis tim sebelas, James Clark, menyumbangkan elemen empty , dan nama XML itu sendiri. Nama-nama lain yang sempat diusulkan antara lain MAGMA (Minimal Architecture for Generalized Markup Applications), SLIM (Structured Language for Internet Markup), dan MGML ( Minimal Generalized Markup Language). Pada 10 Februari 1998, XML 1.0 direkomendasikan secara resmi oleh W3C. XML 1.0 merupakan pencapaian tim sebelas dalam mendesain markup language untuk tujuan penggunaan di Internet, yang serba guna, dan kompetibel dengan SGML. Selain itu, XML 1.0 juga mendukung pengembangan software yang memprosesnya, meminimalisasi fitur-fitur opsional, terbaca oleh manusia, singkat, padat, dan mudah untuk ditulis. Sampai artikel ini ditulis, telah dilakukan kali ketiga perbaikan minor pada XML 1.0 perbaikan kedua menghasilkan XML 1.1, yang kini telah menjalani satu kali perbaikan. Pada 16 Agustus 2006 yang lalu, XML 1.0 Fourth Edition, dan XML 1.1 Second Edition dipublikasikan. Keduanya dianggap sebagai versi terakhir XML yang ada sekarang. Kegunaan XML didesain sebagai solusi interoperabilitas antarsoftware dari platform yang berbeda. Misalnya software A berjalan diatas platform Java, ingin berbagi informasi dengan software yang berjalan di atas platform .NET. software A akan membaca request dari software B dalam format XML. Atau bisa jadi software A menyediakan informasi yang sudah dikemas dalam fomat XML, yang dapat dimanfaatkan oleh software B, C, D, dan seterusnya. Untuk mengakses informasi dalam format XML ini, digunakan tool yang bersifat web service. Contoh yang paling sederhana dari interoprabilitas menggunakan XML ini adalah RSS feed dan aggregator. Saat ini banyak website berita dan blog yang menyediakan informasi yang dikemas dalam format XML, atau dikenal dengan nama RSS feed. Website lain atau aplikasi desktop yang disebut dengan aggregator dapat memanfaatkan informasi ini melalui web service, yakni HTTP, untuk membaca file XML, dan menampilkannya. Bagaimana XML, dan web service bekerja sama menciptakan layanan baru yang disebut dengan interoprabilitas ini? Seperti yang dijelaskan di atas, XML merupakan markup langage. Namn, berbeda dengan HTML yang memerintahkan web browser bagaimana menampilkan informasi, XML menandai informasi secara terstruktur sehingga memudahkan aplikasi lain mengekstrak, dan menggunakannya. Seperti halnya HTML, XML juga menggunakan tag-tag. Jika tag-tag pada HTML bersifat baku, tag-tag XML dapat dibuat sendiri, sesuai dengan kebutuhan. Untuk memudahkan aplikasi membaca tag-tag apa saja yang memuat informasi serta struktur hirarkinnya, XML 1.0 dilengkapi dengan DTD ( Document Type Definition) yang terletak pada bagian header file. Untuk menutup kekurangan pada DTD, XML 1.1 mengganti DTD dengan XSD (XML Schema Definition) yang lebih powerful dalam menggambarkan struktur file XML

Ada tiga macam syntax atau perintah dalam HTML: 1. Syntax tunggal contoh: <hr> <br> 2. Syntax ganda contoh: <I>........</I> <b>.......</b> <u>........</u> 3. Syntax berparameter Contoh:<font color="blue">..........</font> <body bgcolor=".....">.......</body>