Pengenalan HTML Pertemuan 1 IT133 Pengembangan Web Frederik Samuel Papilaya

WWW? "distributed heterogeneous collaborative multimedia information system“ W3 is many things: A concept A set of protocols A body of available software A web of information 2 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

www “a concept” “once information is available, it should be accessible from any type of computer, in any country, and an (authorized) person should only have to use one simple program to access it” 3 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

www “a concept” (02) “once information is available, it should be accessible from any type of computer, in any country, and an (authorized) person should only have to use one simple program to access it” = HYPERTEXT 4 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

www “a concept” (03) Hypertext is text with links 5 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

www “a concept” (04) To allow the web to scale, it was designed without any centralized facility. Anyone can publish information, and anyone (authorized) can read it. There is no central control. To publish data you run a server, and to read data you run a client. All the clients and all the servers are connected to each other by the Internet. The W3 protocols and other standard protocols allow all clients to communicate with all servers 6 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

www “a set of protocols” URL HTTP HTML When you are reading a document, behind every link there is the network-wide address of the document to which it refers. The design of these addresses (URLs) is as fundamental to W3 as hypertext itself. The addresses allow any object anywhere on the internet to be described, even though these objects are accessed using a variety of different protocols. This flexibility allows the web to envelop all the existing data in FTP archives, news articles, and WAIS and Gopher servers. 7 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

www “a set of protocols” (02) URL HTTP HTML The web uses a number of protocols, then, but it also has its own Hypertext Transfer Protocol (HTTP). This protocol includes a number of facilities which we needed: it is fast, stateless and extendable. It also allows the web to surmount the problems of different data types using negotiation of the data representation. FTP, WAIS, Gopher, and NNTP (Network News Transfer Protocol) 8 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Web Server 9 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Uniform Resource Locater (URL) URL digunakan client untuk meminta (request) data dari server,berupa nama domain yang unik. Contoh: Protokol yang digunakan (umumnya HTTP) 2.Nama server yang dituju 3.Nomor Port, default value untuk http request adalah 80 (bisa tidak ditulis) 4.Path 5.Nama file yang ingin diakses 10 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Uniform Resource Identifier (URI) Application-level protocol digunakan untuk menggunakan resources di Internet. http: Web server https: secure Web server ftp: file server mailto: sending (SMTP) im: instant messaging news: Usenet newsgroups nntp: Usenet newsgroups imap: accessing mailbox pop: accessing mailbox sip: voice over IP (VoIP) sips: secure voice over IP (VoIP) H323:telephony/videoconferen cing (H.323) ldap: directory request telnet: run applications on server nfs: network file system wais: WAIS server gopher: Gopher server file: local files on the host 11 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Static & Dynamic Web Page 12 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Teknologi Server side Perintah-perintah program dijalankan di server dan dikirimkan ke browser sudah dalam bentuk HTML. Client side Proses dilakukan di web browser. 13 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Server Side Scripting 14 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Selesai Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya 15

HTML dan XHTML 16 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Hyper Text Markup Language Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Hyper Text Markup Language This is bad HTML Bad HTML 18 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Perbedaan HTML & XHTML – Semua rangkaian subrutin elemen harus tersarang dengan baik – Dokumen harus tertata rapi. – Tag harus ditulis dengan huruf kecil. – Semua elemen perintah harus ditutup. Elemen Tunggal harus diakhiri dengan /> 19 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Penulisan Syntax XHTML Semua nama atribut harus dalam huruf kecil Value atribut harus diberi tanda petik Atribut harus ditulis secara lengkap Penggunaan name pada atribut digantikan oleh id Wajib memiliki deklarasi DOCTYPE 20 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Nama Atribut Salah: Benar: Value Atribut Salah: Benar: 21 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Ditulis Lengkap 22 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

DTD Jenis Document Type Definitions (DTD) Sampai saat ini ada 3 STRICT TRANSITIONAL FRAMESET 23 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Struktur HTML Tag Element Attribute 24 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Tag Adalah teks khusus (markup) berupa dua karakter " ", sebagai contoh adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter " ini adalah tag pembuka isi dokumen HTML, dan ini adalah tag penutup isi dokumen HTML. 25 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title: FTI UKSW</title ini adalah tag pembuka judul dokumen HTML Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML ini adalah tag penutup judul dokumen HTML 26 Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya

Attribute Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut: Pertemuan 1 - IT133 Pengembangan Web Frederik Samuel Papilaya