MENGENAL HTML Introduksi World Wide Web adalah layanan

MENGENAL HTML

Introduksi � World Wide Web adalah layanan internet yang paling populer saat ini � Internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW � WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi 2

� WWW berjalan dengan protokol Hyper. Text Transfer Protokol (HTTP) � Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan Internet Browser � Sintaks HTML mampu memuat konten text, gambar, audio, video dan animasi 3

Internet Web Browsers � Browser adalah sebuah program aplikasi atau software yang me-request dokumen-dokumen dari komputer yg terkoneksi internet (server) di seluruh dunia, dan menampilkan informasi dari dokumen tersebut pd window browser. � Browser menampilkan sesuai instruksi (format) HTML yg dibuat pd dokumen tsb. 4

Sejarah World Wide Web � hypertext [Bush 1945, Nelson 1960’s] � Awal 90’-an, Tim Berners-Lee, sarjana fisika pd riset Nuklir Swiss (CERN) menciptakan Hyper. Text Markup Language (HTML) dan � Browser teks pertama: Lynx � Berners-Lee saat ini memimpin WWW Consorsium (W 3 C) lembaga yang menyusun standarisasi HTML dan dokumen web. 5

� 1993: Browser grafis pertama: Mosaic dibuat oleh Andressen dan Eric Bina (mhs University of Illinois) � 1994: Andressen kemudian bekerja untuk Netscape, dan membuat Netscape Navigator, browser grafis populer pertama � 1995: Microsoft membuat Internet Explorer � Browser saat ini: Mozilla Fire. Fox, Opera, dll 6

Trend : Fakta � Browsing / Surfing sudah merupakan aktifitas rutin sehari-hari � Internet menjadi sumber informasi yang tak terhingga! (apalagi dengan adanya Om Yahoo! dan Mas Google) � Jutaan halaman web baru bermunculan setiap hari � Konten web semakin bervariasi dan dapat dikontribusi oleh siapa saja dimana saja 7

Trend: Killer Application Internet: � Email � Online Games � Chat (m. IRC, Yahoo Messenger) � Google Earth Web based: � Search Engine (Yahoo!, Google) � Web Blog � Web Komunitas: Facebook, Twitter, My. Space, Multiply, Hi 5, koprol, You. Tube 8

Web growth Dates Stats from � Internet Valley, Inc. Hosts Domains � Web Sites/ Hosts July 01 126, 000 30, 000 28, 200, 000 22. 381% July 98 37, 000 4, 300, 000 4, 270, 000 12. 000% July 97 19, 540, 000 1, 301, 000 1, 200, 000 6. 200% July 96 12, 881, 000 488, 000 300, 000 2. 300% IE Netscape July 95 6, 642, 000 120, 000 25, 000 0. 400% July 94 3, 212, 000 46, 000 3, 000 0. 100% Mosaic July 93 1, 776, 000 26, 000 150 0. 010% July 92 992, 000 16, 300 50 0. 005% July 89 130, 000 3, 900 July 81 210 1969 4 recent estimates suggest 40 -50 M Web sites, with 4 -5 B 9

Kategori Web Berdasarkan keter-update-an isi web: 1. Web Statis : website yang isi tampilannya selalu sama dan tidak akan pernah berubah kapan pun kita melihatnya. (jika tidak diupdate) 2. Web Dinamis: website yang isi tampilannya tidak statis 10

1. 2. � � � Web Statis HTML (only) Web Dinamis HTML plus + Pemrograman Web (Scripting) + Animasi Interaktif (Mis: Flash, Java Applet) 11

HTML & XHTML � HTML juga mengalami perkembangan � Versi terakhir: HTML 4. 1 � XHTML adalah standar baru untuk HTML yang bertujuan: � memungkinkan sebuah dokumen web dapat dibaca oleh divais baru seperti PDA, ponsel, dll � Crossbrowser: ditampilkan sama untuk semua jenis browser � Versi terakhir: XHTML 1. 1 12

HTML � Walaupun membuat website sangat mudah dengan menggunakan tools, tetapi sintaks HTML harus dikuasai dengan baik. � Membantu dalam mengembangkan fitur yang dinamis: script, applet, konten multimedia, dll. � may want low-level control � may care about size/readability of pages � may want to "steal" page components and integrate into existing pages 13

Pemrograman Web Client Side Script : � Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client. � Javascript, VBScript Server Side Script: � Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client. � ASP/ASP. Net, PHP, CGI, JSP, dll 14

CSS (Cascading stylesheet) � CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. � Kita dapat mengontrol isi (konten) dan tampilan secara terpisah. � Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya. 15

CSS � Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel. � Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. � Satu file CSS (*. css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS 16

Penggunaan CSS saat ini � Kontrol aspek visual keseluruhan halaman website � Membuat Layout yang standart (kolaborasi dengan XHTML) Teknik membuat layout HTML: � Frame cara lama, jarang digunakan � Tabel disukai oleh designer � CSS metode baru, menjadi standar 17

Teknologi & Aplikasi Web Active. X adalah sebuah teknologi integrasi bukan sebuah bahasa pemrograman. � Active. X dapat disebut sebagai lem yang menyatukan berbagai macam kode bahasa pemrograman sehingga dapat bekerja sama menjadi sebuah aplikasi Internet. � Active. X mirip dengan OLE (Object Linking and Embedding). � Ditandai dengan tag <OBJECT> pada html ◦ Java Applet ◦ Flash (Shockwafe) ◦ Komponen Active. X (develop dg VBScript) ◦ dll � 18

Aplikasi berbasis Web �E-Commerce: describes the concept of conducting transactions between a buyer and a seller over an electronic network (Internet) �E-Business: describes all aspects of doing business on/with/through the Internet. EBusiness includes all aspects of Ecommerce �E-Learning, E-Government, dan �E-E yang lainnya … 19

Web Developer � 1. 2. 3. Secara garis besar dapat dipisahkan: Web Designer: membuat disain web Web Programmer: membuat script untuk halaman web Web Administrator: sebagai administrator web 20

Tahapan Pengembangan Website � 1. 2. Sebuah website dikembangkan dalam 2 proses besar: Web Designing: proses hingga jadi halaman-halaman web secara lengkap dan siap tayang Web Deploying: proses untuk membuat website terpasang pada server internet dan dapat diakses orang lain 21

Peluang � Hadirnya internet dan layanan WWW memberikan sejumlah peluang bagi kita, sebagai: � Developer Web � Content Updater/Kontributor � Network/Web Administrator � E-Commerce / Online Business � Interaksi Bisnis � dll 22

Cara Kerja Web 23

Konsep Dasar Web Design � Perencanaan website Proses ini merupakan awal dalam merencanakan halaman web. Dimulai dengan mengumpulkan seluruh data serta informasi kemudian hasil akhirnya adalah sebuah “site map” lalu dimulai dengan merancang tata letak (Lay. Out) halaman, biasanya dilakukan mendesain tata letak halaman depan dan halaman kedua. Dalam mendesain halaman ini beberapa komponen penting biasanya masuk adalah content, rencana letak image, copyright/hak cipta (bagian footer), serta komponen website dan hal lain yang dianggap perlu (animasi, video, musik, dll). NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

HTML singkatan dari Hyper. Text Markup Language � menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: � � � Text editor sederhana. Contoh: Windows: Notepad Linux: Bluefish, g. Edit, mcedit, pico, dll Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror.

Istilah-istilah dalam HTML : � Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir). Tag kontainer: <namatag>. . . </namatag> � Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan. � Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.

Tag Utama dalam struktur dokumen HTML: <html> <!– untuk menyatakan suatu dokumen HTML --> <head> <!-- memberikan informasi mengenai dokumen HTML > <!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META > </head> <body> <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML > </body> </html>

Contoh HTML sederhana : <html> <head> <title> HTML </title> </head> <body> Kami sedang mulai belajar HTML </body> </html>

Penggunaan Komentar Format: <! -- > Fungsi: � Memberi nama aplikasi � Mendeskripsikan tujuan pengkodean tertentu di dalam file � Memberi nama pengarang � Memberi tanggal pembuatan � Memberi nomer versi � Memberi informasi hak cipta

Tag Heading � Untuk judul atau sub judul dalam dokumen HTML <h 1 [align=”left”|”center”|”right”]>. . . </h 1> <h 2 [align=”left”|”center”|”right”]>. . . </h 2>. . <h 6 [align=”left”|”center”|”right”]>. . . </h 6>

Script: <html> <head> <title> Heading </title> </head> <body> <h 1 align="center">Heading <h 2 align="center">Heading <h 3 align="center">Heading <h 4 align="center">Heading <h 5 align="center">Heading <h 6 align="center">Heading </body> </html> 1: 2: 3: 4: 5: 6: HTML</h 1> HTML</h 2> HTML</h 3> HTML</h 4> HTML</h 5> HTML</h 6>

Tag Paragraf � Paragraf yang dapat diatur perataannya (kiri, tengah, kanan): <p [align=”left”|”center”|”right”]>. . . </p> Script: <html> <head> <title> Paragraf </title> </head> <body> <h 2 align="center">Materi HTML</h 2> <p align="right">Kami sedang mulai belajar HTML </p> <p align="left">Saat ini membahas materi Dasar-dasar HTML </p> </body> </html>

Tag Memformat Dokumen Script: <html> <head> <title> Format Dokumen </title> </head> <body> <p>Contoh <b>Teks Bold</b></p> <p>Contoh <i>Teks Italic</i></p> <p>Contoh ^{Teks superscripted}</p> <p>Contoh _{Teks subscripted}</p> <p>Contoh <del>Teks struckthrough</del></p> <p>Contoh <code>Teks Computer Code</code></p> </body> </html>

Tag Pre-format Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: <pre>. . . </pre> Script: <html> <head> <title>Pre-Format</title> </head> <body> <pre> Saya sedang Bel ajar HTML Untuk mem buat aplikasi berbasis web </pre> </body> </html> �

Untuk menulis teks pada baris berikutnya: Script: <html> <head> <title>Mengganti Baris</title> </head> <body> Muhammad Yusuf<br/> Jurusan Teknik Informatika<br/> Fakultas Teknik<br/> Universitas Trunojoyo <br/> </body> </html> � Tag Break

Tag Garis Pemisah Horisontal � Garis horisontal untuk memisahkan teks dengan teks lain. <hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> </hr> Script: <html> <head> <title>Membuat Garis Horisontal</title> </head> <body> Berikut ini penggunaan satu garis horisontal: <hr/> dan penggunaan dua garis horisontal: <hr/> <hr /> </body> </html>

Tag Font � � � Ukuran font: <font size=“n”>. . . </font> Jenis font: <font size=“n” face=“jenis_font”>. . . </font> Warna font <font size=“n” face=“jenis_font” color=“warna”>. . . </font> Script: <html> <head> <title>Memformat Font</title> </head> <body> <font size=5 color="#FF 00 FF"> Teks berwarna hexcolor #FF 00 FF </font><br/> <font color="red">Teks berwarna merah</font> </body> </html>

Tag Hypertext Link Format: <a href=”address” >. . . </a> Link ke dokumen lain <a href=”nama_dokumen” >. . . </a> � Link ke bagian tertentu dalam dokumen yang sama <a href=”#target” >. . . </a> <a href=”target” >. . . </a> � Link ke alamat URL atau Web. Site <a href=”alamat_URL” >. . . </a> � Link ke alamat Email <a href=”mailto: alamat_email” >. . . </a> � Link File yang akan didownload <a href=”nama_file” >. . . </a> �

Tag Hypertext Link (2) Script: <html> <head> <title>Membuat link</title> <head> <body> <p>Silahkan download <i>handout</i> perkuliahan di <A href=" http: //zheira 83. wordpress. com"> blog </A></p> </body> </html>

Tag Memuat Gambar Memuat gambar ke dalam halaman Web <img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] /> Relative Path: � � File gambar ada dalam direktori yg sama: . / File gambar ada dalam direktori sebelumnya: . . / Script: <html> <head> <title> Insert Gambar</title> </head> <body> <img src=". /penguins. jpg"></br> <b> Penguins</b> </body> </html>

Warna Background Menggunakan warna <body bgcolor=#nnnnnn>. . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Warna </title> </head> <body bgcolor="pink"> Kami sedang mulai belajar HTML </body> </html>

Menggunakan gambar Warna Background (2) <body background=“nama_file_gambar”>. . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Gambar </title> </head> <body background=". /Desert. jpg"> <p><h 2 align="center">Kami sedang mulai belajar HTML</h 2></p> </body> </html>

� <ul> bullet Tag List - unordered list (daftar tdk bernomor); <ul [type=“disc”|”square”|”circle”] >. . . </ul> � <ol> - ordered list; nomor <ol [type=“ 1”|”a”|”A”|”I”|”i"] [start=“n”] >. . . </ol> � <dl> - definition list; dictionary <dl>. . . </dl> <dt>. . . </dt> <dd>. . . [</dd>]

Script: <html> <head> <title>Penggunaan List</title> </head> <body> <h 4>Istilah-istilah dalam HTML: </h 4> <ol> <li><i>Tag</i></li> <li><i>Element</i></li> <li><i>Attribute</i></li> </ol> <h 4>Contoh <i>tag</i>: </h 4> <ul type="square"> <li><i>Tag heading</i></li> <li><i>Tag list</i></li> </ul> </body> </html> Tag List (2)

TABEL Fungsi: � Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca � Mengatur tampilan homepage agar lebih menarik

� Tag yang diperlukan: <table> � Atribut-atribut:

� Tag Membuat Tabel Sederhana yang diperlukan: - Membuat baris: <tr> (table row) - Membuat kolom: <td> (table data) Contoh: <table border="1"> <tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> <tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> </table>

� Judul Menambahkan Judul Tabel tabel: <caption> � Judul baris/kolom: <th> (table header) Contoh: <table border="1"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td>1</td><td>06. 100. 001</td><td>Amin A. Angkasa</td></tr> <tr><td>2</td><td>06. 100. 002</td><td>Beni B. Bernardi</td></tr> </table>

Mengatur Lebar & Tinggi Tabel Atribut: width dan height Nilai: � ukuran % (max 100%) � ukuran pixel Contoh: <table border="1" width=“ 50%”> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th> <th>NPM</th> <th>Nama</th></tr> <tr><td width=“ 20”>1. </td> <td width=“ 80” height=“ 50“>06. 100. 001</td> <td width=“ 180” height=“ 50”>Amin A. Angkasa</td></tr> <tr><td width=“ 20”>2. </td> <td width=“ 80” height=“ 70”>06. 100. 002</td> <td width=“ 180” height=“ 70”>Beni B. Bernardi</td></tr> </table>

Perataan dalam tabel � � horisontal: atribut align -> utk <caption>, <tr>, <td> dan <th> vertikal: atribut valign -> utk <tr>, <td> dan <th> Contoh: <table border="1" align="center"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td align="center" width="20">1. </td> <td align="center" valign="middle" width="80" height="50">06. 100. 001</td> <td align="right" valign="top" width="180" height="50">Amin A. Angkasa</td></tr> <tr><td width="20">2. </td> <td align="left" valign="top" width="80" height="70">06. 100. 002</td> <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi</td></tr> </table>

� Atribut: bgcolor Membuat warna pada tabel Contoh: <body bgcolor="purple"> <font size="3" face="arial" color="yellow"> <table border="2" bgcolor="white" align="center"> <caption align="bottom"> <b> Tabel Daftar Mahasiswa </b> </caption> <tr bgcolor="yellow"> <th>No</th><th>NPM</th><th>Nama</th></tr> <tr bgcolor="cyan"><td align="center" width="20">1. </td> <td align="left" valign="middle“ width="80" height="40">06. 100. 001</td> <td align="left" valign="middle“ width="180" height="40">Amin A. Angkasa</td></tr> <tr><td bgcolor="blue" width="20">2. </td> <td bgcolor="red" align="left" valign="middle" width="80" height="40">06. 100. 002</td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td></tr> </table> </body>

Penggabungan baris/kolom � Menggabungkan bbrp kolom menjadi 1: atribut colspan � Menggabungkan bbrp baris menjadi 1: atribut rowspan

Script HTML: <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">No</th> <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th> </tr> <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> <tr><td align="center" width="20">1. </td> <td align="left" valign="middle" width="80" height="40">06. 100. 001</td> <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> <tr><td width="20">2. </td> <td align="left" valign="middle" width="80" height="40">06. 100. 002</td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> </table>