Story of Netherlands

pray......

what u see???

HTML

Pengenalan WWW dan HTML

World Wide Web (WWW)

Salah satu layanan yang tersedia di Internet Berawal pada tahun 1989 di CERN (Consei Europeen pou la Reserche Nucleaire/Pusat Riset Nuklir Eropa), Jenewa, Swiss oleh Tim Berners-LeeMenawarkan informasi melimpah dalam berbagai bentuk dengan keterkaitan dokumen hypertext dan multimedia Menggunakan protokol HTTP (Hypertext Transfer Protocol).

Istilah Penting dalam WWW

Page/Web Page

HTML (Hypertext Markup Language)

• Website

Web Server

Browser/Web Browser

Webmaster/Web Manager

Surfer

Hyperlink/Link

Hypertext

URL (Uniform Resource Locator).

Hypertext

Teks dalam dokumen yang saling terhubung dengan teks lain dalam cara yang nonlinear Halaman web yang memiliki link ke halaman lain.

Browser

Mengirim pesan permintaan ke web server

Menerima file-file hasil permintaan dari web server

Me-render kode HTML dari halaman web dan menampilkan hasilnya

Menggunakan browser:

Masukkan URL website yang hendak dikunjungi

Dapatkan informasi dan ikuti setiap link yang dibutuhkan

Contoh browser:

Mozilla

Microsoft Internet Explorer

Opera

Konqueror

Netscape Navigator

Safari

Uniform Resource Locator (URL)

Dalam mengakses halaman web, browser harus mengetahui:

Bagaimana mengakses halaman, di mana halaman dapat diambil Apa nama file untuk halaman yang bersesuaian URL didesain untuk menjawab pertanyaan di atas dalam bentuk how://where/what URL

yang multiprotokol membuat dokumen hypertext bisa mengakses aplikasi Internet lain.

Pengembangan Web

Web Design vs Web Programming

Web Design:

Berkaitan dengan masalah layout, grafik, dan media lainnya yang dipakai dalam menampilkan isi web Memerlukan keterampilan seni Meliputi:

HTML (Hypertext Markup Language), CSS (Cascaded Style Sheet), XML (Extensible Markup Language), XHTML (Extensible Hypertext Markup Language), grafik web, animasi web

Web Programming:

Berkaitan dengan penambahan sifat interaktif dan dinamis ke web

Memerlukan keahlian pemrograman

Meliputi: JavaScript, VBScript, SSI (Server Side Include), CGI (Common Gateway Interface), ASP (Active Server Pages), PHP (Personal HomePage: Hypertext Preprocessor), JSP (Java Server Pages), CFML (ColdFusion Markup Language), Java Applet.

Pengenalan HTML

Hyper Text Markup Language

Bahasa yang digunakan dalam penayangan isi web bukan merupakan bahasa pemrograman  bahasa markup untuk melakukan penandaan terhadap sebuah dokumen teks File HTML:

file teks yang berisi tag-tag markup  harus berakhiran (berekstensi) htm atau html Tag markup memberitahukan web browser untuk menampilkan halamanDapat dibuat menggunakan teks editor sederhana.

Pengenalan HTML (cont.)

Standar HTML dikembangkan oleh W3C (World Wide Web Consortium) Standar, spesifikasi, dan rancangannya http://www.w3.org

Spesifikasi HTML terbaru  HTML 4.0.1 Saat ini terdapat spesifikasi baru pengganti HTML XHTML versi terakhir: 2.0

Milestone HTML

Pengembangan dari standar pemformatan dokumen teks SGML (Standard Generalized Markup Language)

HTML 1.0  1990

HTML+ 1993

HTML 2.0  Nopember 1995 (IETF)

HTML 3.0  1995

HTML 3.2  Januari 1997 (W3C’s HTML Working Group)

HTML 4.0  18 Desember 1997

HTML 4.0.1  24 April 1998

Elemen HTML

Dokumen HTML merupakan file teks yang dibentuk oleh elemen-elemen HTML Elemen HTML  didefinisikan menggunakan tag-tag HTML

Tag HTML

Digunakan untuk menandai elemen HTML diapit oleh dua karakter (< dan >)biasanya berpasangan  contoh: <b> dan </b>

Tag pertama dalam pasangan  tag awal

Tag kedua dalam pasangan  tag akhir

Teks di antara tag awal dan akhir  isi elemen

Tidak case sensitive  <b> tidak berbeda dengan <B>

Bentuk umum tag HTML:

<nama_tag> <br>, <hr>

<nama_tag>…</nama tag>  <p>...</p>, <h1>...</h1>

Elemen dan Tag HTML

Atribut Tag HTML

Tag HTML dapat memiliki atribut

Atribut menyediakan informasi tambahan pada sebuah elemen HTML

Didefinisikan pada tag awal dari sebuah elemen HTML

Dapat diberi nilai ataupun tidak bernilai

Penulisan tag yang memiliki atribut:

<nama_tag atribut1=”nilai” [atribut2=”nilai” atribut3=”nilai” ...]>

Contoh:

<hr align=”right”>

<hr align=”left” noshade>

<img src=”images/foto.jpg” alt=”” height=”400” width=”300”>

<nama_tag atribut=”nilai” [atribut2=”nilai” atribut3=”nilai” ...]>     

... </nama_tag>

Contoh:

<font face=”Arial” size=”5” color=”#CCCCCC”>...</font>

Struktur Dasar HTML

Bagian head umumnya berisi informasi mengenai dokumen tersebut, misalnya judul dokumen, versi HTML yang digunakan, dan lain-lain

Bagian body berisi layout atau desain halaman web

Tag-Tag Dasar HTML

Penulisan HTML

Browser HTML menginterpretasikan satu atau beberapa spasi yang berdekatan sebagai sebuah spasi Browser HTML menginterpretasikan Carriage Return (Enter) dan indentasi (Tab) sebagai sebuah spasi Ada beberapa karakter khusus yang dapat direpresentasikan dengan kode tertentu  entitas karakter.

Tag Dasar

<html>...</html>: menandai awal dan akhir dokumen HTML

<head>...</head>: menandai bagian header dokumen HTML

<body>...</body>: menandai awal dan akhir isi dokumen HTML

Bagian Head

Tidak harus ada pada dokumen HTML  pemakaian yang benar meningkatkan kegunaan dokumen HTML Isi bagian head (kecuali judul dokumen) tidak akan terlihat oleh pembaca dokumen Tugas-tugas elemen pada bagian head:

Menyediakan judul dokumen Menjembatani hubungan antardokumen

Memberitahukan browser untuk membuat form pencarian Menyediakan metoda untuk mengirim pesan ke tipe browser tertentu.

Bagian Head (cont.)

Elemen/tag pada bagian head:

Tag <title>...</title>: memberi judul dokumen

Tag <base>: menentukan basis URL sebuah dokumen

Tag <link>: menunjukkan relasi antar dokumen HTML

Tag <meta>: mendefinisikan informasi-informasi di luar HTML

Bagian Body

Isi dari dokumen HTML Semua informasi yang akan ditampilkan seperti teks, gambar, suara, dan sebagainya akan ditempatkan di bagian ini

Tag <body> mempunyai beberapa atribut yang digunakan untuk mengatur penampilan dokumen HTML

HTML

Pengenalan WWW dan HTML

World Wide Web (WWW)

Salah satu layanan yang tersedia di Internet Berawal pada tahun 1989 di CERN (Consei Europeen pou la Reserche Nucleaire/Pusat Riset Nuklir Eropa), Jenewa, Swiss oleh Tim Berners-LeeMenawarkan informasi melimpah dalam berbagai bentuk dengan keterkaitan dokumen hypertext dan multimedia Menggunakan protokol HTTP (Hypertext Transfer Protocol).

Istilah Penting dalam WWW

Page/Web Page

HTML (Hypertext Markup Language)

• Website

Web Server

Browser/Web Browser

Webmaster/Web Manager

Surfer

Hyperlink/Link

Hypertext

URL (Uniform Resource Locator).

Hypertext

Teks dalam dokumen yang saling terhubung dengan teks lain dalam cara yang nonlinear Halaman web yang memiliki link ke halaman lain.

Browser

Mengirim pesan permintaan ke web server

Menerima file-file hasil permintaan dari web server

Me-render kode HTML dari halaman web dan menampilkan hasilnya

Menggunakan browser:

Masukkan URL website yang hendak dikunjungi

Dapatkan informasi dan ikuti setiap link yang dibutuhkan

Contoh browser:

Mozilla

Microsoft Internet Explorer

Opera

Konqueror

Netscape Navigator

Safari

Uniform Resource Locator (URL)

Dalam mengakses halaman web, browser harus mengetahui:

Bagaimana mengakses halaman, di mana halaman dapat diambil Apa nama file untuk halaman yang bersesuaian URL didesain untuk menjawab pertanyaan di atas dalam bentuk how://where/what URL

yang multiprotokol membuat dokumen hypertext bisa mengakses aplikasi Internet lain.

Pengembangan Web

Web Design vs Web Programming

Web Design:

Berkaitan dengan masalah layout, grafik, dan media lainnya yang dipakai dalam menampilkan isi web Memerlukan keterampilan seni Meliputi:

HTML (Hypertext Markup Language), CSS (Cascaded Style Sheet), XML (Extensible Markup Language), XHTML (Extensible Hypertext Markup Language), grafik web, animasi web

Web Programming:

Berkaitan dengan penambahan sifat interaktif dan dinamis ke web

Memerlukan keahlian pemrograman

Meliputi: JavaScript, VBScript, SSI (Server Side Include), CGI (Common Gateway Interface), ASP (Active Server Pages), PHP (Personal HomePage: Hypertext Preprocessor), JSP (Java Server Pages), CFML (ColdFusion Markup Language), Java Applet.

Pengenalan HTML

Hyper Text Markup Language

Bahasa yang digunakan dalam penayangan isi web bukan merupakan bahasa pemrograman  bahasa markup untuk melakukan penandaan terhadap sebuah dokumen teks File HTML:

file teks yang berisi tag-tag markup  harus berakhiran (berekstensi) htm atau html Tag markup memberitahukan web browser untuk menampilkan halamanDapat dibuat menggunakan teks editor sederhana.

Pengenalan HTML (cont.)

Standar HTML dikembangkan oleh W3C (World Wide Web Consortium) Standar, spesifikasi, dan rancangannya http://www.w3.org

Spesifikasi HTML terbaru  HTML 4.0.1 Saat ini terdapat spesifikasi baru pengganti HTML XHTML versi terakhir: 2.0

Milestone HTML

Pengembangan dari standar pemformatan dokumen teks SGML (Standard Generalized Markup Language)

HTML 1.0  1990

HTML+ 1993

HTML 2.0  Nopember 1995 (IETF)

HTML 3.0  1995

HTML 3.2  Januari 1997 (W3C’s HTML Working Group)

HTML 4.0  18 Desember 1997

HTML 4.0.1  24 April 1998

Elemen HTML

Dokumen HTML merupakan file teks yang dibentuk oleh elemen-elemen HTML Elemen HTML  didefinisikan menggunakan tag-tag HTML

Tag HTML

Digunakan untuk menandai elemen HTML diapit oleh dua karakter (< dan >)biasanya berpasangan  contoh: <b> dan </b>

Tag pertama dalam pasangan  tag awal

Tag kedua dalam pasangan  tag akhir

Teks di antara tag awal dan akhir  isi elemen

Tidak case sensitive  <b> tidak berbeda dengan <B>

Bentuk umum tag HTML:

<nama_tag> <br>, <hr>

<nama_tag>…</nama tag>  <p>...</p>, <h1>...</h1>

Elemen dan Tag HTML

Atribut Tag HTML

Tag HTML dapat memiliki atribut

Atribut menyediakan informasi tambahan pada sebuah elemen HTML

Didefinisikan pada tag awal dari sebuah elemen HTML

Dapat diberi nilai ataupun tidak bernilai

Penulisan tag yang memiliki atribut:

<nama_tag atribut1=”nilai” [atribut2=”nilai” atribut3=”nilai” ...]>

Contoh:

<hr align=”right”>

<hr align=”left” noshade>

<img src=”images/foto.jpg” alt=”” height=”400” width=”300”>

<nama_tag atribut=”nilai” [atribut2=”nilai” atribut3=”nilai” ...]>     

... </nama_tag>

Contoh:

<font face=”Arial” size=”5” color=”#CCCCCC”>...</font>

Struktur Dasar HTML

Bagian head umumnya berisi informasi mengenai dokumen tersebut, misalnya judul dokumen, versi HTML yang digunakan, dan lain-lain

Bagian body berisi layout atau desain halaman web

Tag-Tag Dasar HTML

Penulisan HTML

Browser HTML menginterpretasikan satu atau beberapa spasi yang berdekatan sebagai sebuah spasi Browser HTML menginterpretasikan Carriage Return (Enter) dan indentasi (Tab) sebagai sebuah spasi Ada beberapa karakter khusus yang dapat direpresentasikan dengan kode tertentu  entitas karakter.

Tag Dasar

<html>...</html>: menandai awal dan akhir dokumen HTML

<head>...</head>: menandai bagian header dokumen HTML

<body>...</body>: menandai awal dan akhir isi dokumen HTML

Bagian Head

Tidak harus ada pada dokumen HTML  pemakaian yang benar meningkatkan kegunaan dokumen HTML Isi bagian head (kecuali judul dokumen) tidak akan terlihat oleh pembaca dokumen Tugas-tugas elemen pada bagian head:

Menyediakan judul dokumen Menjembatani hubungan antardokumen

Memberitahukan browser untuk membuat form pencarian Menyediakan metoda untuk mengirim pesan ke tipe browser tertentu.

Bagian Head (cont.)

Elemen/tag pada bagian head:

Tag <title>...</title>: memberi judul dokumen

Tag <base>: menentukan basis URL sebuah dokumen

Tag <link>: menunjukkan relasi antar dokumen HTML

Tag <meta>: mendefinisikan informasi-informasi di luar HTML

Bagian Body

Isi dari dokumen HTML Semua informasi yang akan ditampilkan seperti teks, gambar, suara, dan sebagainya akan ditempatkan di bagian ini

Tag <body> mempunyai beberapa atribut yang digunakan untuk mengatur penampilan dokumen HTML