HTML BASIC.

Transkripsi

1 HTML BASIC

2 Yang Harus Di Kuasai HTML Basic HTML Introduction HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Styles HTML Links HTML Images HTML Tables HTML Lists HTML Forms HTML Colors HTML Colornames HTML Colorvalues HTML Quick List HTML BASIC - Halaman 2

3 HTML BASIC Pendahuluan Dengan HTML Anda dapat membuat situs Web Anda sendiri. Materi ini mengajarkan Anda segala sesuatu tentang HTML. HTML mudah dipelajari - Anda akan menikmatinya. Apakah HTML? HTML adalah bahasa untuk mendeskripsikan halaman web. * HTML singkatan Hyper Teks Markup Language * HTML bukan bahasa pemrograman, ini adalah bahasa markup * Sebuah bahasa markup adalah serangkaian tag markup * HTML menggunakan tag markup untuk menjelaskan halaman web Tag HTML Markup tag HTML biasanya disebut tag HTML * HTML tag adalah kata kunci dikelilingi oleh sudut kurung seperti <html> * HTML tags biasanya datang dalam pasangan seperti <b> dan </ b> * Tag yang pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir * Mulai dan akhiri tag juga disebut tag membuka dan menutup tag Dokumen HTML = Web Pages * Menggambarkan dokumen HTML halaman web * Dokumen HTML berisi tag HTML dan teks biasa * Dokumen HTML juga disebut halaman web * Disimpan dengan tipe file.html atau.htm Tujuan dari sebuah web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web. HTML BASIC - Halaman 3

4 Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi dari halaman: <html> <title>html Pertama Ku</title> <body> <h1> Judul Pertama Saya </ h1> <p> paragraf pertama saya </ p> </ body> </ html> Penjelasan: * Teks antara <html> dan </ html> menjelaskan halaman web * Teks antara <title> dan </title> menjelaskan title halaman web * Teks antara <body> dan </ body> adalah halaman yang terlihat konten * Teks antara <h1> dan </ h1> ditampilkan sebagai judul * Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraph Persiapan apa yang butuhkan? * Anda tidak perlu web server * Anda tidak perlu situs web HTML Editing Dalam materi ini menggunakan editor teks biasa (seperti Notepad) untuk mengedit HTML Namun, pengembang web profesional sering lebih memilih editor HTML seperti FrontPage, Dreamweaver dan lain sebagainya. Jangan khawatir jika contoh menggunakan tag Anda belum pelajari. Anda akan belajar tentang HTML dalam bab-bab berikutnya. Headings HTML Judul HTML didefinisikan dengan tag <h1> untuk <h6>. Contoh: <h1> Ini adalah heading </h1> <h2> Ini adalah heading </h2> <h3> Ini adalah heading </h3> HTML BASIC - Halaman 4

5 Paragraf HTML HTML paragraf didefinisikan dengan tag <p>. Contoh: <p> Ini adalah sebuah paragraf </p> <p> Ini adalah paragraf yang lain </p> Format HTML Tag HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti tebal atau miring teks. Tag HTML ini dinamakan tag format. Lihat bagian bawah halaman ini untuk referensi yang lengkap. Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Deskripsi Mendefinisikan teks tebal Mendefinisikan teks besar Mendefinisikan teks italic Mendefinisikan teks kecil Mendefinisikan teks kecil Mendefinisikan teks kuat tebal Mendefinisikan teks subscript Mendefinisikan teks yang dimasukkan Mendefinisikan teks yang dimasukkan dihapus teks Deprecated. Gunakan bukannya <del> Deprecated. Gunakan bukannya <del> Teks garis bawah Output Komputer Tag <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp> Deskripsi Mendefinisikan teks kode komputer Mendefinisikan teks keyboard Mendefinisikan kode komputer sampel Mendefinisikan teks teletype Mendefinisikan variabel teks terformat Gunakan <pre> sebaliknya Gunakan <pre> sebaliknya Gunakan <pre> sebaliknya HTML BASIC - Halaman 5

6 Kutipan, dan Definisi Tag Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Deskripsi Mendefinisikan singkatan Mendefinisikan akronim Mendefinisikan elemen alamat arah teks Mendefinisikan kutipan panjang Mendefinisikan kutipan pendek Mendefinisikan kutipan Mendefinisikan sebuah istilah definisi Teks format Contoh ini menunjukkan bagaimana Anda dapat memformat teks dalam dokumen HTML <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>the pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> HTML Styles HTML Style Attribute Tujuan dari atribut gaya adalah: Untuk menyediakan cara yang umum untuk gaya semua elemen HTML. Styles diperkenalkan dengan HTML 4, sebagai cara yang baru dan lebih suka untuk gaya elemen HTML. Dengan gaya HTML, gaya dapat ditambahkan pada elemen HTML secara langsung dengan menggunakan atribut gaya, atau tidak langsung dalam terpisah style sheet (CSS file). Anda dapat mempelajari segala sesuatu tentang gaya dan CSS pada tutorial CSS kita. HTML BASIC - Halaman 6

7 Dalam HTML tutorial kita menggunakan atribut style untuk memperkenalkan Anda ke gaya HTML Contoh Style HTML style = "background-color: yellow" style = "font-size: 10px" style = "font-family: Times" style = "text-align: center" Tag dan Atribut Dalam HTML 4, beberapa tag dan atribut didefinisikan sebagai usang. Berarti bahwa tidak akan didukung dalam versi HTML dan XHTML. Pesannya adalah jelas: Hindari penggunaan tag dan atribut usang. Tag dan atribut ini harus dihindari: Tags <center> <font> and <basefont> <s> and <strike> <u> Attributes align bgcolor color Description konten berpusat tengah HTML fonts teks Coret Mendefinisikan teks bergaris Atribut Keterangan penyelarasan teks bgcolor warna latar belakang warna warna teks Warna Latar <body style="background-color:yellow"> Atribut gaya mendefinisikan style untuk elemen <body>. <html> <body style="background-color:yellow"> <h2>look: Colored Background!</h2> </body> </html> Atribut bgcolor gaya lama <html> <body bgcolor="yellow"> <h2>look: Colored Background!</h2> <p>for future proof HTML, use HTML styles instead:</p> <p>style="background-color:yellow"</p> </body> </html> HTML BASIC - Halaman 7

8 Jenis Huruf, Warna dan Ukauran <body style="background-color:yellow"> Atribut gaya mendefinisikan style untuk elemen <p>. <html> <body> <h1 style="font-family:verdana">a heading</h1> <p style="font-family:courier new; color:red; font-size:20px;">a paragraph</p> </body> </html> Atribut membuat tag <font> gaya lama <html> <body> <p><font size="2" face="verdana"> This is a paragraph. </font></p> <p><font size="5" face="times" color="red"> This is another paragraph. </font></p> </body> </html> Teks Alignment <h1 style="text-align:center"> Atribut gaya mendefinisikan style untuk elemen <h1>. Link HTML Link HTML didefinisikan dengan tag <a>. Contoh: <a href=" Ini adalah link </ a> Catatan: alamat link disediakan sebagai sebuah atribut. Images HTML Gambar HTML didefinisikan dengan tag <img>. Contoh: <img src="ewawan.jpg" width="104" height="142" /> HTML BASIC - Halaman 8

9 Catatan: Nama dan ukuran gambar disediakan sebagai atribut. Elements HTML Dokumen HTML didefinisikan oleh elemen HTML. Elemen HTML muali dari tag awal sampai akhir tag: TAG AWAL * ISI TAG AKHIR * <p> Ini adalah sebuah paragraf </p> <a href="default.htm" > Ini adalah link </a> <br /> * Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup. Sintaks HTML * Sebuah elemen HTML dimulai dengan tag awal / pembuka tag * Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup * Unsur konten adalah segalanya antara awal dan akhir tag * Beberapa elemen HTML memiliki konten kosong * Empty elemen ditutup pada awal tag * Sebagian besar elemen HTML dapat memiliki atribut Contoh Dokumen HTML: <html> <title> Latihan paragraf pertama</title> <body> <p> Ini adalah paragraf pertama </p> </body> </html> *Contoh di atas berisi 3 elemen HTML. Penjelasan : elemen <p>: <p> Ini adalah paragraf pertama </ p> Elemen yang <p> mendefinisikan sebuah paragraf di dokumen HTML Unsur memiliki start tag <p> dan end tag </ p> Konten elemen adalah: Ini adalah ayat pertama. Elemen<body> : <body> <p> Ini adalah paragraf pertama </p> </body> HTML BASIC - Halaman 9

10 Tabel HTML Tabel didefinisikan dengan tag <table>. Sebuah meja dibagi ke dalam baris (dengan tag <tr>), dan setiap baris data dibagi ke dalam sel (dengan tag <td>). Surat-surat td singkatan dari "data tabel", yang merupakan isi sel data. Sebuah sel data dapat berisi teks, gambar, daftar, paragraf, form, aturan horisontal, meja, dll. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Tampilannya dalam browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tabel dan Atribut Jika Anda tidak menentukan atribut border tabel akan ditampilkan tanpa batas. Kadang-kadang hal ini dapat berguna, tetapi sebagian besar waktu, Anda ingin perbatasan untuk menunjukkan. Untuk menampilkan tabel dengan batas-batas, Anda harus menggunakan atribut border: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> HTML BASIC - Halaman 10

11 Judul dalam tabel Judul dalam tabel didefinisikan dengan tag <th>. <table border="1"> <tr> <th>heading</th> <th>another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Tampilannya dalam browser: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Lists HTML HTML mendukung perintahkan teratur dan daftar. List adalah daftar item. Daftar Item yang ditandai dengan peluru (biasanya lingkaran hitam kecil). Daftar <ul> dimulai dengan tag. Masing item daftar <li> dimulai dengan tag. <ul> <li>kopi</li> <li>teh</li> <li>susu</li> </ul> Tampilannya dalam browser: Kopi Teh Susu Di dalam list item Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll. HTML BASIC - Halaman 11

12 List Item Daftar item. Daftar Item yang ditandai dengan angka. Ordered list dimulai dengan tag <ol>. Masing item daftar <li> dimulai dengan <ol> <li>kopi</li> <li>susu</li> </ol> Berikut adalah tampilannya dalam browser: 1. Kopi 2. Susu Di dalam daftar item Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll Daftar Definisi Sebuah daftar definisi bukan daftar item tunggal. Ini adalah daftar item (istilah), dengan deskripsi setiap item (istilah). Sebuah daftar definisi dimulai dengan tag <dl> (daftar definisi). Tiap hal diawali dengan sebuah tag <dt> (definisi istilah). Setiap deskripsi dimulai dengan tag <dd> (definisi deskripsi). <dl> <dt>coffee</dt> <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl> Berikut adalah tampilannya dalam browser: Coffee Black hot drink Milk White cold drink Di dalam tag <dd> Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll HTML BASIC - Halaman 12

13 HTML Forms dan Input Formulir HTML digunakan untuk memilih berbagai jenis input pengguna. Form Suatu bentuk adalah daerah yang dapat berisi elemen form. Bentuk elemen elemen yang memungkinkan user untuk memasukkan informasi (seperti text field, textarea fields, drop-down, radio button, checkbox, dll) dalam bentuk. Suatu bentuk didefinisikan dengan tag <form>. <form>. input elements. </form> Input Bentuk yang paling umum digunakan <input> tag adalah tag. Jenis input ditentukan dengan atribut jenis. Yang paling umum digunakan masukan jenis dijelaskan di bawah ini. Text Fields Text field yang digunakan ketika Anda menginginkan para pengguna untuk mengetik huruf, angka, dll dalam formulir. <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> Tampilannya dalam browser: First name: Last name: Perhatikan bahwa bentuk itu sendiri tidak terlihat. Juga mencatat bahwa dalam kebanyakan browser, lebar dari text field adalah 20 karakter secara default. HTML BASIC - Halaman 13

14 Radio Buttons Radio Buttons digunakan ketika Anda menginginkan para pengguna untuk memilih salah satu dari sejumlah pilihan. <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> Tampilannya dalam browser: Male Female Catatan bahwa hanya satu pilihan yang dapat dipilih. Checkboxes Kotak centang yang digunakan saat Anda ingin pengguna untuk memilih satu atau lebih pilihan dari sejumlah pilihan. <form> Aku punya sepeda: <input type="checkbox" name="vehicle" value=" sepeda " /> <br /> Aku punya mobil: <input type="checkbox" name="vehicle" value="mobil" /> <br /> Aku punya pesawat terbang: <input type="checkbox" name="vehicle" value="pesawat Terbang" /> </ form> Tampilannya dalam browser: Aku punya sepeda: Aku punya mobil: Aku punya pesawat terbang: HTML BASIC - Halaman 14

15 Form Atribut dan Submit Button Ketika pengguna mengklik pada tombol "Submit", isi formulir dikirim ke server. Bentuk tindakan atribut mendefinisikan nama file untuk mengirim konten ke. File didefinisikan dalam atribut action biasanya melakukan sesuatu dengan input yang diterima. <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="submit" /> </form> Tampilannya dalam browser: Username: Submit Jika Anda mengetik beberapa karakter dalam kolom teks di atas, dan klik tombol "Submit", browser akan mengirimkan masukan Anda ke halaman yang disebut "html_form_submit.asp". Halaman akan memperlihatkan kepada anda menerima masukan. Warna HTML Ditampilkan memadukan warna RED, GREEN, dan BLUE cahaya. Nilai Warna Warna HTML didefinisikan menggunakan hexadecimal (hex) notasi kombinasi Merah, Hijau, dan nilainilai warna Biru (RGB). Nilai terendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0 (hex 00). Nilai tertinggi adalah 255 (hex FF). Nilai hex ditulis sebagai 3 dua digit angka, dimulai dengan tanda #. HTML BASIC - Halaman 15

16 Nilai Warna Color Color HEX Color RGB # rgb(0,0,0) #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255) 16 Juta Warna Berbeda Kombinasi Merah, Hijau dan Biru nilai memberikan total lebih dari 16 juta warna yang berbeda untuk bermain dengan (256 x 256 x 256). Monitor modern mampu menampilkan setidaknya warna yang berbeda. ****Selanjutnya Lihat Di Materi Warna-Warna Web**** HTML BASIC - Halaman 16