HTML: BASIC
advertisement
TUJUAN INSTRUKSIONAL KHUSUS Setelah mengikuti perkuliahan ini mahasiswa dapat: a. Menulis coding HTML sederhana b. Membangun sebuah website yang lengkap dengan element-elemet sbg: Formatting tags Ordered and unordered lists Images Tables Hyperlinks Definisi HTML HTML merupakan singkatan dari HyperText Markup Language. HTML digunakan untuk membangun suatu halaman web. HTML bukan sebagai bahasa pemrograman, karena seperti tercermin dari namanya, HTML adalah suatu bahasa mark up. HTML digunakan untuk melakukan mark up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untuk menentukan format atau style dari teks yang ditandai. Sebagai contoh, jika Anda menginginkan suatu teks akan dicetak tebal, maka teks tersebut akan ditandai seperti contoh di bawah ini: ^BTeks ini akan dicetak tebal^B Definisi HTML (Lanjutan) Jika teks tersebut dicetak, maka tanda ^B yang pertama maka akan menyebabkan teks tersebut dicetak tebal sampai ditemui lagi tanda Tanda ^B sendiri tidak akan tercetak, tanda itu hanyalah sebuah mark up saja. Simbol mark up yang digunakan oleh HTML ditandai dengan tanda lebih kecil (<) dan tanda lebih besar (>) dan disebut dengan tag. Misalnya hendak ditampilkan teks yang tercetak tebal seperti contoh diatas, maka mark up yang digunakan adalah sebagai berikut: <B>Teks ini akan tercetak tebal</B> Perhatikan bahwa tag yang digunakan sebagai tanda penutup akan diberi karakter garis miring (/). Bahasa HTML beberapa kali mengalami perbaikan dan pengembangan. Versi terbaru hingga buku ini ditulis adalah versi 5.0. Editing HTML • Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. • Karena merupakan file teks, maka HTML dapat dibuat dengan teks editor yang sederhana, misalnya Notepad, Textpad maupun Wordpad. • Dapat juga menggunakan HTML editor yang bersifat visual misalnya Microsoft Frontpage, Macromedia Dreamweaver, Macromedia Flash, dan lain-lain. (di D.2.G menggunakan…??????) • Meskipun dapat digunakan untuk mendesain halaman web tanpa harus mengenal tag HTML, namun biasanya tetap menyediakan fasilitas untuk menuliskan tag HTML secara manual. • HTML files disimpan dengan “.htm” or “.html” extension. Struktur Dasar Penulisan HTML Contoh: <HTML> <HEAD> -------------------------</HEAD> <BODY> -------------------------</BODY> </HTML> html> <head> <title> Document Title Goes Here </title> </head> <body> document body goes here </body> </html> Struktur Dasar Penulisan HTML (Lanjutan) Dimana : Tag <HTML> tersebut harus diletakan pada bagian paling awal (pembuka) dan tag </HTML> harus diletakan pada bagian paling akhir (penutup) Tag <HEAD> umumnya berisi informasi mengenai dokumen tersebut, misalnya judul dokumen, versi HTML yang digunakan dan lain-lain. Tag <BODY> berisi layout atau desain halaman web. Atau dengan kata lain tempat untuk mendesain halaman web Tag HTML tidak bersifat case sensitive, jadi <HTML> akan sama dengan <html>. Penulisan tag dengan huruf kapital hanya untuk mempermudah menemukan perbedaan antara teks biasa dengan tag. Atribut HTML Membuat Dokumen HTML Jalankan program untuk menulis kode-kode HTML berupa text editor (Notepad, Textpad, Wordpad, mcedit, dan sebagainya) Ketikkan dokumen HTML sebagai berikut: <HTML> <HEAD> <TITLE>Dokumen Sederhana</TITLE> </HEAD> <BODY> <h1 align="center"><i>Halaman Web Sederhana</i></h1> </BODY> </HTML> Membuat Dokumen HTML (Lanjutan) Simpan file dalam format teks (file ASCII) dengan nama “.htm” atau “.html”, jika Anda menggunakan Notepad perhatikan bahwa pada kotak dialog Save As, bagian Save As Type terlebih dahulu harus diubah menjadi all files. Jalankan web browser Anda Buka file xxxx.html menggunakan Menu File | Open … dari web browser Anda Membuat Dokumen HTML (Lanjutan) Structure Tag Tag <HTML>…</HTML> Nama :Keterangan HTML : tag pembuka dan penutup dokumen HTML. Tag ini memberitahukan kepada browser bahwa isi file tersebut adalah dokumen HTML. <HEAD>…</HEAD> Header : Informasi yang Anda tambahkan ke tag ini tidak akan ditampilkan di layar browser, tetapi akan digunakan sebagai indeks oleh search engine (www.google.com dsb). Tag <HEAD>…</HEAD> ditulis setelah tag <HTML> dan sebelum tag <BODY>. <BODY>…</BODY> Body : merupakan tubuh utama dari dokumen HTML dimana tag-tag yang berada di dalamnya akan ditampilkan hasilnya di layar browser. Atribut-atribut <BODY> ALINK Menentukan warna link yang sedang aktif BACKGROUND Menentukan gambar yang akan digunakan sebagai latar belakang dokumen HTML. BGCOLOR Menentukan warna latar belakang dokumen BGPROPERTIES=FIXED Gambar latar belakang tidak akan digulung LEFTMARGIN Menentukan batas kiri dokumen LINK Menentukan warna link dalam dokumen TEXT Menentukan warna tulisan yang ditampilkan TOPMARGIN Menentukan batas atas dokumen VLINK Menentukan warna link yang sudah pernah diklik/dikunjungi <!--…--> Comment : Tag ini digunakan untuk menuliskan pesan atau komentar dalam dokumen HTML yang tidak akan ditampilkan di layar browser Descriptive Tag Tag <TITLE>…</TITLE> <META>…</META> Name Content Nama : Keterangan Title : tag ini akan menampilkan judul dokumen Anda pada Title bar layar browser Meta : Search engine dapat menggunakan meta tag untuk mencari dan mengindeks web page. Anda juga dapat menggunakan tag ini untuk menjelaskan software yang digunakan untuk menghasilkan dokumen HTML atau meyediakan informasi-informasi khusus. Atribut-atribut <META> Atribut yang digunakan untuk memberitahukan kepada program-program yang membaca web page tentang kegunaan/tujuan dari meta tag tersebut. Name dapat berisi “author”, “description” atau ketentuan lainnya. Content ditulis setelah atribut Name dan berisi teks yang berkaitan dengan meta tag tersebut <HEAD> <META NAME=”description” CONTENT=”Puisi Cinta”></META></HEAD> Formatting Tag Tag Nama: Keterangan <B>…</B> Bold : tag ini akan membuat tebal teks yang berada di dalam tag ini. <BR> Break : tag ini digunakan untuk pindah baris <CENTER>…</CENTER> Center : tag ini akan menengahkan teks di tengah-tengah layar browser <H1>…</H1> Heading : H1 akan membuat teks judul dengan huruf terbesar dan H6 membuat teks judul terkecil s/d <H6>…</H6> <HR> Horizontal rule : tag ini akan membuat garis horizontal. Sering digunakan untuk memisahkan bagianbagian yang berbeda dalam satu page Contoh : <HR size=2 width=40%> <I>…</I> Italic : Menampilkan teks dalam bentuk huruf miring <P> Paragraph : Tag ini akan membentuk sebuah paragraph dari teks, dengan memberikan spasi diantara paragraph. Tag ini tidak membutuhkan tag penutup. <STRONG>…</STRONG> Strong : menampilkan teks dalam huruf tebal <U>…</U> Underline : menampilkan teks dalam huruf bergaris bawah. Berhati-hatilah dalam menggunakan tag ini. Karena link juga bergaris bawah, ini akan membingungkan pembaca web page Anda. Headings Paragraph Summary HTML elements are used t XX o describe the structure of the page (e.g. headings, subheadings, paragraphs). They also provide semantic information (e.g. here emphasis should be placed, the definition of any acronyms used, when given text is a quotation).
