HTML Introduction and Formatting Session 06 & 07 Subject : L0182 / Web & Animation Design Year : 2009 HTML Introduction and Formatting Session 06 & 07
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Mengetahui sintaks-sintaks dasar pada HTML Create the simple Web using HTML formatting Bina Nusantara
Course Outlines HTML HTML Tags HTML Tag Attributes Text Formatting Tags Changing the Font HTML Background HTML Images Embedding Multimedia HTML Colors Lists Bina Nusantara
HTML HyperText Markup Language (HTML) adalah bahasa markup yang digunakan untuk menstrukturkan text dan dokumen multimedia dan untuk mengatur hypertext links antar dokumen, sangat banyak digunakan pada World Wide Web Halaman Web dibangun dengan HTML tags (codes) yang disatukan dalam text HTML mendefinisikan tampilan halaman, tulisan dan elemen grafis Untuk membuat suatu halaman interaktif, programming code disatukan dalam suatu halaman HTML. Contoh : JavaScript dan VBScript Bina Nusantara
HTML Tags HTML Tags adalah perintah yang ditulis diantar tanda lebih kecil (<) dan lebih besar (>), yang juga dikernal sebagai angle brackets, yang mengindikasikan bagaimana browser akan menampilkan text Bina Nusantara
Basic HTML Tags Tag Description <html> </html> Defines an HTML document <body> </body> Defines the document's body <h1> </h1> to <h6> </h6> Defines header 1 to header 6 <p> </p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!-- --> Defines a comment Catatan : browser akan mengenali HTML code walaupun ditulis dengan huruf kapital atau huruf kecil atau campuran keduanya. Bina Nusantara
Basic HTML Tags (cont..) Headings Paragraphs Line breaks <h1>This is a heading</h1> Paragraphs <p>This is a paragraph</p> Line breaks <p>This<br>is a paragraph<br>with line breaks</p> <!-- This is a comment --> Bina Nusantara
HTML Tag Attributes Attributes menyediakan informasi tambahan untuk suatu elemen HTML. Attributes selalu dispesifikasikan pada tag awal dari suatu elemen HTML. Nilai Attribute selalu ditampilkan dalam quotes. Double style quotes adalah yang paling umum, tetapi single style quotes juga diperbolehkan. Contoh: name="value". Contoh : <h1 align="center"> has additional information about the alignment.</h1> <body bgcolor="yellow"> has additional information about the background color.</body> <table border="1"> has additional information about the border around the table.</table> Bina Nusantara
Nesting Tags Dalam beberapa kasus, memungkinkan untuk memodifikasi isi halaman dengan lebih dari satu tag. Ada dua hal yang perlu diingat : Tidak semua tag dapat mengandung jenis tag yang lain. Urutan adalah penting. Kapanpun suatu tag penutup digunakan harus berkorespondensi pada tag pembuka terakhir. Contoh: <H1>Web<I>Animation</I></H1> correct <H1>Web<I>Animation</H1></I> incorrect Bina Nusantara
Simple HTML Code Bina Nusantara
Text Formatting Tags Tag Deskripsi <b> </b> Mendefinisikan text tebal (bold) <big> </big> Mendefinisikan text besar <em> </em> Mendefinisikan text yang di-emphasize <i> </i> Mendefinisikan text miring (italic) <small> </small> Mendefinisikan text kecil <strong> </strong> Mendefinisikan strong text <sub> </sub> Mendefinisikan subscripted text <sup> </sup> Mendefinisikan superscripted text Bina Nusantara
Text Formatting Tags (cont..) Bina Nusantara
Mengubah Font Untuk menentukan font gunakan <font face=“fontname1, fontname2”>, dimana fontname2 adalah alternatif font, jika font pada fontname1 tidak terdapat/terinstall pada komputer user. Ukuran =“n”, dimana n adalah angka dari 1 sampai 7. Ukuran default adalah 3. Nilai 1 sampai 7 merepresentasikan ukuran 8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt pada font umumnya. Bina Nusantara
HTML Background Tag <body> memiliki dua attribute yang dapat digunakan untuk menspesifikasikan background. Background dapat berupa warna atau image. Bgcolor Attribute bgcolor menspesifikasikan suatu warna background untuk suatu halaman HTML. Background Attribute background menspesifikasikan suatu image background untuk suatu halaman HTML. Jika image yang digunakan lebih kecil dari browser window, gambar akan ditampilkan secara berulang untuk memenuhi browser window. Bina Nusantara
HTML Images Dalam HTML, images didefinisikan dengan tag <img>. Untuk menampilkan suatu image di sebuah halaman, dapat digunakan attribute src. Nilai dari attribute src ini adalah URL dari image yang akan ditampilkan di halaman. Attribute “alt” digunakan untuk mendefinisikan suatu "alternate text" untuk suatu image. Attribute "alt" menampilkan tulisan sebagai pengganti image jika image tidak dapat ditampilkan oleh browser si user. Bina Nusantara
HTML Images (cont..) <html> <body> <p> <img src="hackanm.gif“ width="20" height="20"> </p> <img src="hackanm.gif“ width="45" height="45"> <img src="hackanm.gif“ width="70" height="70"> </body> </html> Bina Nusantara
Menambahkan Multimedia Satu hal yang membuat Web semakin populer adalah fakta bahwa di halaman Web dapat ditambahkan grafis, suara, animasi dan movie. Bina Nusantara
Warna HTML Warna HTML dapat didefinisikan sebagai suatu notasi hexadecimal yang merupakan kombinasi dari warna Merah (Red), Hijau (Green), dan Biru (Blue) atau disebut juga RGB. Nilai terendah yang dapat digunakan adalah 0 (hex #00) dan nilai tertinggi adalah 255 (hex #FF) Bina Nusantara
Lists Unordered List (List tak berurut): data dari list ditandai dengan bullets (biasanya berupa lingkaran hitam kecil). Suatu unordered list dimulai dengan tag <ul>. Setiap data list dimulai dengan tag <li>. Ordered List (List terurut): Data list ditandai dengan angka. Suatu ordered list dimulai dengan tag <ol>. Setiap data list diawali dengan tag <li>. Bina Nusantara
Lists (cont..) Definition List : Adalah list yang berisi istilah dan penjelasannya. Suatu definition list dimulai dengan tag <dl>. Setiap istilah definition-list dimulai dengan tag <dt>. Setiap penjelasan definition-list dimulai dengan tag <dd>. Dalam suatu unordered list, ordered list, dan penjelasan pada definition-list dapat diberikan paragraf, line breaks, images, links, lists yang lain, dll. Bina Nusantara
Tipe – Tipe Ordered & Unordered List Ordered Lists <ol> <ol type="A"> <ol type="a"> <ol type="I"> <ol type="i"> Unordered Lists <ul type="disc"> <ul type="circle"> <ul type="square"> 1. Text A. Text a. Text I. Text i. Text Text Bina Nusantara
Nested List Bina Nusantara