2. Tujuan: memungkinkan kita menjelajah internet dan melihat halaman web yang menarik.

Transkripsi

1 HTML 1. Definisi: Hypertext Markup Language a. Merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita 2. Tujuan: memungkinkan kita menjelajah internet dan melihat halaman web yang menarik. 3. Software untuk membuat HTML = Macromedia Dreamweaver, Adobe GoLive, MS FrontPage <html> <head> 4. Struktur dasar HTML 5. HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda / ). 6. Sebuah halaman web minimal mempunyai empat buat tag, yaitu : 7. a. <HTML> Sebagai tanda awal dokumen HTML. b. <HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tagtag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. c. <TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). 8. Contoh format 9. <TITLE> isi judul 10. <BODY> Di dalam tag ini bisa diletakkan attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain. a. Atribut : BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN. 11. Contoh format : <title>disini titel website</title> </head> <body> Disini adalah konten yang tampil di browser

2 </body> </html> 12. Contoh format HTML yang saya buat da ada attribute warna 13. beberapa tag HTML oleh ( Tag HTML Fungsi <! > Mendefinisikan komentar HTML <!DOCTYPE> Mendefinisikan tipe dokumen <a> Mendefinisikan anchor link <abbr> Mendefinisikan sebuah singkatan <acronym> Mendefinisikan akronim <address> Mendefiniskan informasi kontak untuk pemiliki / penulis dokumen <applet> Ditinggalkan. Medefinisikan applet <area /> Mendefinisikan arae di dalam image-map <b> Mendefinisikan tulisan tebal Mendefinisikan URL utama/target <base /> untuk semua URL alternatif di dalam dokumen Ditinggalkan.bbsp;Merincikan dari <basefont /> warna, ukuran dan font default dari semua tulisan yang ada di dalam dokumen. <bdo> Menggantikan arah tulisan <big> Mendefinisikan tulisan besar <blockquote> Mendefinisikan kutipan yang panjang <body> Mendefinisikan badan dokumen <br /> Mendefinisikan satu baris baru <button> Mendefinisikan tombol yang bisa di-klik <caption> Mendefinisikan judul dari tabel <center> Ditinggalkan. Mendefinisikan tulisan agar ditengah <cite> Mendefinisikan kutipan <code> Mendefinisikan kode komputer <col /> Mendefinisikan nilai atribut dari satu atau lebih kolom pada tabel Merincikan sebuah grup atau lebih <colgroup> dari kolom-kolom dalam tabel untuk di format <dd> Mendefinisikan deskripsi dari sebuah item di daftar definisi <del> Defines text that has been deleted from a document <dfn> Mendefinisikan ketentuan definisi

3 <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame /> Ditinggalkan. Mendefinisikan daftar direktori Mendefinisikan sebuah bagian di dalam sebuah dokumen Mendefinisikan daftar definisi Mendefinisikan ketentuan (dari sebuah item) di dalam daftar definisi Mendefinisikan tulisan emphasized Menggabungkan elemen-elemen yang saling berhubungan di dalam form Ditinggalkan, mendefinisikan font, warna, dan ukuran dari tulisan Defines an HTML form for user input Defines a window (a frame) in a frameset Tag diatas bisa dimasukkan kedalam pembuatan HTML sesuai dengan fungsinya masing-masing Tutorial membuat tabel di HTML oleh ( Cara membuat tabel. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom. <table border="1"> <tr> <td>cell 1 - Baris 1 Kolom 1</td> <td>cell 2 - Baris 1 Kolom 2</td> </tr> <tr> <td>cell 3 - Baris 2 Kolom 1</td> <td>cell 4 - Baris 2 Kolom 2</td> </tr> <tr> <td>cell 5 - Baris 3 Kolom 1</td> <td>cell 6 - Baris 3 Kolom 2</td> </tr> </table> Cell 1 Baris 1 Kolom 1 Cell 2 Baris 1 Kolom 2 Cell 3 Baris 2 Kolom 1 Cell 4 Baris 2 Kolom 2 Cell 5 Baris 3 Kolom 1 Cell 6 Baris 3 Kolom 2 Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>. Mengatur lebar dan tinggi tabel. Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height. Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px. <table border="1" width="75%"> <tr> <td style="width:50%;height:40px;">baris 1 Kolom 1</td> <td>baris 1 Kolom 1</td> </tr> <tr> <td>baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> <tr> <td>baris 3 Kolom 1</td> <td>baris 3 Kolom 2</td> </tr> </table>

4 Baris 1 Kolom 1 Baris 1 Kolom 1 Baris 3 Kolom 1 Baris 3 Kolom 2 Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolomkolom berikutnya akan mengikuti pengaturan tersebut. Menggabungkan kolom pada tabel Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom dalam tabel digunakan atribut colspan. <table border="1" width="75%"> <tr> <td colspan="2">gabungan Kolom 1&2 pada Baris 1</td> </tr> <tr> <td style="width:50%">baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> <tr> <td>baris 3 Kolom 1</td> <td>baris 3 Kolom 2</td> </tr> </table> Gabungan Kolom 1&2 pada Baris 1 Baris 3 Kolom 1 Baris 3 Kolom 2 Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan. <table border="1" width="75%"> <tr> <td style="width:50%" rowspan="2">gabungan Baris 1&2 pada Kolom 1</td> <td>baris 1 Kolom 2</td> </tr> <tr> <td>baris 2 Kolom 2</td> </tr> <tr> <td>baris 3 Kolom 1</td> <td>baris 3 Kolom 2</td> </tr> </table> Gabungan Baris 1&2 pada Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 2 Baris 3 Kolom 1 Baris 3 Kolom 2 Mengatur jarak kolom pada tabel Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell. <table border="1" width="75%" cellpadding="8"> <tr> <td style="width:50%;">baris 1 Kolom 1</td> <td>baris 1 Kolom 2</td> </tr> <tr> <td>baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> </table> Baris 1 Kolom 1 Baris 1 Kolom 2 Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell. <table border="1" width="75%" cellspacing="8"> <tr> <td style="width:50%">baris 1 Kolom 1</td> <td>baris 1 Kolom 2</td> </tr> <tr> <td>baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> </table>

5 Baris 1 Kolom 1 Baris 1 Kolom 2 Membuat titel pada tabel. Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading)sebagai titel dari baris maupun kolom. Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal. <table border="1" width="75%"> <caption>disini adalah titel tabel ini</caption> <tr> <th style="width:50%;">header Kolom 1</th> <th>header Kolom 2</th> </tr> <tr> <td>baris 1 Kolom 1</td> <td>baris 1 Kolom 2</td> </tr> <tr> <td>baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> </table> Disini adalah titel tabel ini Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Membuat background pada tabel Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah. <table style="background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">header Kolom 1</th> <th style="background:red;">header Kolom 2</th> </tr> <tr> <td>baris 1 Kolom 1</td> <td>baris 1 Kolom 2</td> </tr> <tr> <td>baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> </table> Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px. Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masingmasing 1px. Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0. <table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">... </table> Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse. <table style="border-collapse:collapse;background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">header Kolom 1</th> <th style="background:red;">header Kolom 2</th> </tr> <tr> <td>baris 1 Kolom 1</td> <td>baris 1 Kolom 2</td> </tr> <tr> <td>baris 2 Kolom 1</td> <td>baris 2 Kolom 2</td> </tr> </table> Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2

6 Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS. CSS 1. Definisi : content management system a. Perangkat lunak yang memungkinkan orang mengubah isi dari suatu web b. Fungsinya untuk memperindah c. Contoh: wordpress, joomla 2. Cara kerjanya: perangkat lunak ini menyediakan template yang bisa di customize sesuai selera 3. Tidak perlu membuat web secara manual, cukup gunakan perangkat lunak ini dan isi sesuka hati 4. Keuntungan: a. Mudah digunakan b. Ada yang gratis c. Berguna bagi pengusaha agar perlu sulit-sulit membuat website 5. Materi css by ( Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga

7 bisa disebabkan karena setiap browser memilliki dukungan bahasa(css) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS. Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu: 1. Metode Table 2. Metode Div Manfaat dari CSS: 1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur, 2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat, 3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, 4. Dapat berkolaborasi dengan JavaScript. 5. Digunakan dalam hampir semua web browser. Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu: Header > berisi tema web/ judul Menu > menu link web Content > isi dari web Footer > identitas/ copyright Atribut ID Ada dua cara penempatan elemen dalam web dengan CSS yaitu: 1. Position (Posisi) Mengunakan properti position terdapat 4 cara: Static > posisi normal (default). Relative > posisi elemen tergantung dari elemen yang lain. Absolute > posisi elemen berpatokan pada jendela browser. Fixed > posisi elemen tetap walaupun digeser. 2. Float (Nempel) Menggunakan properti float atau clear: Float:left > elemen akan menempel pada sebelah kiri elemen induk. Float:right > elemen akan menempel pada sebelah kanan elemen induk. Clear:left > elemen akan menempel pada sebelah kiri dan berada di bawah. Clear:right > elemen akan menempel pada sebelah kanan dan berada dibawah Clear:both > elemen akan berada pada posisi bawah elemen diatasnya.

8 Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css: Margin > jarak/batas elemen dengan elemen lain Border > border/gari tepi elemen Padding > jarak elemen dengan isi elemen (elemen anak) Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS: contoh penulisan css : <html> <head> <style type = "text/css"> #header { width:900px; border: 1px solid #640404; #headerleft { width:400px; background-color:#cccccc; float:left; text-align:center; #headerright { width:450px; background-color:#999999; float:right; text-align:center; </style> </head> <body> <h1>sample</h1>

9 <div id = "header"> <div id="headerleft">header Left</div> <div id="headerright">header Right</div> </div> </body> </html> Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: 1. External Style Sheet (file CSS berbeda dari file HTML), 2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) 3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini: Penempatan CSS dalam HTML Internal CSS Metode penulisan kode CSS langsung dalam file HTML. contoh: <html> <head> <style type = "text/css">.header { width:900px; border: 1px solid #640404;.headerLeft { width:400px; background-color:#cccccc; float:left; text-align:center;.headerright { width:450px; background-color:#999999; float:right; text-align:center; </style> </head> <body> Eksternal CSS file CSS terpisah dengan HTML. Buat file dengan ekstention.css. contoh: <html> <head> <link rel= stylesheet type= text/css href= public.css /> </head> <body> </body> </html> Inline CSS Penulisan kode CSS dalam tag HTML. contoh:

10 <html> <head> </head> <div style="background-color:#999999; text-align:center;">inline CSS</div> </body> </html> Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag<head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian<body> saja bagian yang didalam <head> tidak usah diapa-apakan. Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS. CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja. Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut: <h1 style="font-family: 'Times New Roman', Times, serif">serif font</h1> Link Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya. Coba kode CSS berikut: a.link1:link { color: #C87C28; font-family: Times New Roman; text-decoration: none; a.link1:visited { color: #CC6600; font-family: Times New Roman; text-decoration: none;

11 a.link1:hover { color: #C87C28; font-family: Times New Roman; text-decoration: underline a.link1:active { color: #C87C28; font-family: Times New Roman; text-decoration: none; a.link2:link { color: #663300; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; a.link2:visited { color: #800000; font-family: Arial, Helvetica, sans-serif; text-decoration: none; a.link2:hover { color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline overline; a.link2:active { color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; SUMBER: wino25.wordpress.com