Pendahuluan. Teknik Hypertext. Muatan Lokal Penerapan Komputer Ilmu Komputer. Teknik Hypertext Ilmu Komputer FMIPA IPB

Pendahuluan Teknik Hypertext Muatan Lokal Penerapan Komputer – Ilmu Komputer Teknik Hypertext – Ilmu Komputer FMIPA IPB

ipb.ac.id

View Page Source

Teknik Hypertext – Ilmu Komputer FMIPA IPB

ipb.ac.id


Hypertext • [Etimologi] Hyper – Yunani (di atas, melebihi), padanan di inggris super (tidak linier seperti teks pada umumnya)

• Ted Nelson (Buku Literary Machine 1963), konsep penyimpanan resources satu kali dan pengaksesan dapat dari manapun melalui link • Hypertext adalah suatu teknik menyajikan informasi sebagai sebuah link dari node-node pada jaringan strukutur informasi yang dapat mengkaomodasikan pembaca untuk bebas bernavigasi dalam mode non-linear (http://www.iath.virginia.edu/elab/hfl0037.html )


Mark Up Language • [1980] IBM  Generalized Markup Language (GML) – ide membuat bahasa kode untuk menggabungkan teks dengan perintah pemformatan agar elemen dokumen mudah dikenali. – Bahasa yang menggunakan tanda-tanda ini dinamakan markup language.

• [1986] ISO Standard GML (SGML) • Digunakan pada dunia penerbitan dan percetakan: – korespondesi antara editor dan penulis


HTML • Hypertext Mark Up Language : – Sintaksis SGML yang digunakan untuk menuliskan isi dan formating hypertext bagaimana halaman web ditampilkan di dalam sebuah browser Internet

• Tim Berners-lee dan Robert Caillau (CERN, 1989) akomodasikan sharing dan updating informasi diantara para peneliti (ENQUIRE) • Dipopulerkan oleh browser Mosaic (Netscape) Marc Andersen [1993]


Web Browser • Aplikasi untuk mengakses, menampilkan, dan menghantarkan informasi melalui world wide web – Worldwideweb/ nexus (1990 Tim Berners Lee) – Mosaic/ Netscape (1993 Marc Andersen) – Saat ini: Internet Explorer, Chrome, Firefox, Safari, android, Opera dan lainnya Teknik Hypertext – Ilmu Komputer FMIPA IPB

Worldwideweb dan Mosaic


Penggunaan Web Browser


Webbrowser Usage (W3School)


Desain Dokumen HTML •

Tahapan dalam menentukan desain struktur dokumen HTML: 1. 2. 3. 4.

•

Pendefinisian masalah Desain struktur dan isi situs Implementasi Uji coba

Tahapan-tahapan tersebut sangat membantu dalam pemeliharaan dokumen dan upgrading sistem


Dokumen HTML /Web • Representasi web berisi satu atau lebih halaman web yang berisi teks dan grafis, yang tergabung dengan cara tertentu, sehingga secara keseluruhan mendeskripsikan suatu nilai informasi secara konsisten. • Homepage didefinisikan sebagai suatu halaman web yang berada pada bagian teratas dari hirarki reprentasi web. • Homepage pada umumnya berisi informasi singkat mengenai situs anda, dan jika nilai informasi yang anda sajikan dalam site anda tidak begitu banyak, tidak ada salahnya disatukan menjadi satu halaman saja. Teknik Hypertext – Ilmu Komputer FMIPA IPB

Struktur dokumen HTML • Struktur Hirarki HOME PAGE

Merepresentasikan suatu informasi yg memiliki hirarki tetap Departemen

Perusahaan

.....

Bidang


Departemen

Struktur dokumen HTML • Struktur Linear → mepresentasikan suatu informasi yang memiliki konsep penyajian satu arah. contoh: tutorial program HOME PAGE

Hal. 1

Hal. 2


Hal. 3 .......

Hal. n

Struktur dokumen HTML • Struktur Linear dengan Alternatif → struktur linear, tetapi mengizinkan user “melompat” antar topik HOME PAGE


Struktur dokumen HTML • Struktur Jejaring (Web) → merepresentasi-kan suatu jaringan informasi yang tidak memiliki struktur baku


HOME PAGE

Mekanisme kerja permintaan dokumen HTML Web Server Kode HTML

Permintaan HTTP (nama_file.html)

Tanggapan HTTP browser Teknik Hypertext – Ilmu Komputer FMIPA IPB

Dasar Penulisan Dokumen HTML


Struktur dasar dokumen HTML

• Ditulis dengan menggunakan karakter ASCII • Disimpan: “*.htm” atau “*.html” • Pada beberapa kasus disarankan:  namafile ≤ 8 char, huruf kecil semua  tidak boleh spasi • Editor yang dapat digunakan: Notepad, Macromedia Dreamweaver, Microsoft Front Page • Untuk melihat hasil → web browser (sbg parser) ct:Microsoft Internet Explorer, Netscape Navigator, Mozilla, dll)


Struktur dasar dokumen HTML <--! Comment -->

‘judul

<TITLE> ...

...

‘content

• Penformatan bentuk dokumen pada source HTML tidak mempengaruhi format dari dokumen HTML itu sendiri. Teknik Hypertext – Ilmu Komputer FMIPA IPB

TAG • adl komponen yang diapit tanda “<“ dan “>” • Terdapat 2 jenis TAG: 1. TAG yang berpasangan ct: dengan tanda “/” digunakan untuk “menutup” pasangannya 2. TAG yang tidak berpasangan ct:
,
• Not Case Sensitive Teknik Hypertext – Ilmu Komputer FMIPA IPB

Atribut dalam TAG • Setiap TAG memiliki atribut ct:
• Berkaitan dengan format layout dokumen yang spesifik ct: → BGCOLOR, LINK, TEXT


TAG pemformatan dokumen HTML • PENGATURAN TEKS (Logical and Physical Formatting) • LISTS (DAFTAR) • MENYISIPKAN GAMBAR • LINKS • TABEL • FORM • FRAME Teknik Hypertext – Ilmu Komputer FMIPA IPB

PENGATURAN TEKS • HEADING “” → 1 >> 6
Praktikum Teknik Hyperteks

• PARAGRAF “
”, LINE BREAK
dan HORIZONTAL RULE “
” Teknik Hyperteks
Hyperteks memungkinkan teks pendek menjadi acuan untuk membuka dokumen lain
HTML adalah salah satu model representasi dokumen yang bersifat dinamis dan multi dimensi

PENGATURAN TEKS • HORIZONTAL RULE “
”

• FONT “”  SIZE = 1 << 7  FACE = jenis/nama font, maks 3 jenis font, dipisahkan dengan “,”, spasi → “_”  COLOR = warna huruf Teks berwarna merah Roman Teknik Hypertext – Ilmu Komputer FMIPA IPB

Logical Formatting • The citation element is used to indicate the citation of a quotation. Tom Sawyer remains one of the classics of American literature. • The code element is used to indicate a small amount of computer code. One of the first lines that every C programmer learns is: puts("Hello World!"); • The emphasis element is used to indicate a section of text that the author wants to identify as significant. The actual line reads, "Alas, poor Yorick. I knew him, Horatio." • The defining instance element is used to create a sub-definition in a defining list. The aardvark is an ant-eating animal. Teknik Hypertext – Ilmu Komputer FMIPA IPB Logical Formatting • The keyboard element is used to indicate a user entry response. To run the decoder, type Restore followed by your password. • <SAMP> The sample element is used to indicate literal characters. The letters <SAMP>AEIOU are the vowels of the English language. • The strong element is used to emphasize a particularly important section of text. The most important rule to remember is Don't panic! • The variable element is used to indicate a dummy variable name. The sort routine rotates on the Ith element. Teknik Hypertext – Ilmu Komputer FMIPA IPB Contoh output Logical Formatting Teknik Hypertext – Ilmu Komputer FMIPA IPB Physical Formatted • The bold element uses a bold font to display the text. This is in bold text. • The italic element renders text using an italic font. This is in italic text. • The teletype element displays the contents with a monospaced typewriter font. This is in teletype text. • The underline element causes text to be underlined in the viewer. This text is underlined. • <STRIKE> The strikethrough element draws a horizontal line through the middle of the text. This is a <STRIKE>strikethough example. Teknik Hypertext – Ilmu Komputer FMIPA IPB Physical Formatted • The big print element uses a larger font size to display the text. This is big text. • The small print element displays the text in a smaller font size. This is small text. • The subscript element moves the text lower than the surrounding text and (if possible) displays the text in a smaller size font. This is a subscript. • The superscript element moves the text higher than the surrounding text and (if possible) displays the text in a smaller size font. This is a superscript. Teknik Hypertext – Ilmu Komputer FMIPA IPB Contoh Output Physical Formatted Teknik Hypertext – Ilmu Komputer FMIPA IPB PENGATURAN TEKS • TAG lainnya yg berhubungan dengan pengaturan teks: dan → TAG BLOCKQUOTE tidak menambahkan karakter pindah baris dalam teks, membuat kutipan sedikit menjorok ke kanan dan teks bisa mengandung kode HTML. Teknik Hypertext – Ilmu Komputer FMIPA IPB LISTS (DAFTAR) UNORDERED dan ORDERED LIST ‘• (default) Hardisk Floppy Disk Monitor ‘1 (default),A, a, i, I Hardisk Floppy Disk Monitor Teknik Hypertext – Ilmu Komputer FMIPA IPB LISTS (DAFTAR) • DEFINITION LIST “” Item Pertama Definisi tentang Item Pertama Item Kedua Definisi tentang Item Kedua Teknik Hypertext – Ilmu Komputer FMIPA IPB MENYISIPKAN GAMBAR • • Gambar berada pada folder yang sama dengan file dokumen HTML • ALT menyediakan informasi tambahan apabila gambar tidak muncul pada browser (browser tidak mendukung gambar) Teknik Hypertext – Ilmu Komputer FMIPA IPB LINKS • HTML menyediakan tag khusus untuk menghubungkan dokumen web, tag tersebut adalah dan Link ke dokumen praktikum1 link ke site yahoo.com Klik di siniUntuk kirim email ke Ilkom • Perhatikan struktur direktori yg ada Teknik Hypertext – Ilmu Komputer FMIPA IPB LINKS • Link ke suatu lokasi pada halaman yang sama Link ke bagian bawah dokumen ini • Link ke suatu lokasi pada halaman yang berbeda Link ke penanda bagian bawah di halaman2.html • Gambar dapat digunakan sebagai link Teknik Hypertext – Ilmu Komputer FMIPA IPB • Sekian terima kasih Teknik Hypertext – Ilmu Komputer FMIPA IPB

Pendahuluan. Teknik Hypertext. Muatan Lokal Penerapan Komputer Ilmu Komputer. Teknik Hypertext Ilmu Komputer FMIPA IPB

Recommend Documents

Praktikum Teknik Hyperteks