Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By:...
Transcript of Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By:...
![Page 1: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/1.jpg)
Internet Application:Internet Application:PengenalanPengenalan HTMLHTML
PENS-ITS
By: Arif Basofi, S.Kom
![Page 2: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/2.jpg)
Objective
Tujuan:- Mengenal arsitektur WWW- Mengenal struktur & tag dasar dokumenHTML
- Memahami format dan entitas karakterHTML
![Page 3: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/3.jpg)
Lessons
1. World Wide Web2. Elemen Dokumen HTML3. Basic Tag HTML4. Format HTML5. Entiti HTML6. Links HTML
![Page 4: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/4.jpg)
World Wide Web (WWW)
• Internet: jaringan global yang menghubungkan suatu network dengan network lainnya diseluruh dunia melalui suatu protokol yang disebut TCP/IP.
• World Wide Web (WWW): bagian dari internet yang berkembang sangat pesat dan paling populer hingga saat ini.
WWW bekerja berdasarkan pada 3 (tiga) mekanisme dasar, yaitu:1. Protocol: standar aturan yang digunakan dalam
berkomunikasi antar jaringan komputer. HyperText Transfer Protocol (HTTP) adalah protocol yang digunakan untuk WWW.
2. Address: alamat web yang diatur melalui URL (Uniform Resource Locator), yang digunakan sebagai standar alamatdalam internet.
3. HTML: dokumen web yang diakses melalui internet.
![Page 5: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/5.jpg)
World Wide Web (WWW)
• HTML: adalah bahasa standar yang digunakan untuk menampilkan dokumen di web
• Dengan HTML, anda dapat:– Mengontrol tampilan dari web page beserta contentnya.– Mempublikasikan document secara online pada server, sehingga bisa
di akses oleh client.– Membuat online form yang bisa digunakan untuk menangani berbagai
proses aplikasi seperti pendaftaran ataupun transaksi secara online.– Menambahkan object-object (rich-content) lain seperti image, audio,
video dan juga java applet dalam document HTML.
![Page 6: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/6.jpg)
World Wide Web (WWW)
• Untuk dapat mengakses (menjelajahi) alamat-alamat web site diinternet, dibutuhkan suatu aplikasi yaitu web browser (browser).
• Browser: software yang di-install pada komputer (client) yang berfungsi sebagai media untuk menampilkan dokumen web yang tersimpan pada komputer server. Dengan browser, perintah-perintah (tag-tag) dalam dokumen web akan diterjemahkan danditampilkan menjadi sebuah informasi yang dapat dibaca oleh user.Contoh: Internet Explorer (IE), Netscape Navigator, Modzilla, dll.
• Web Developer: software yang digunakan dalam membangundokumen web.Contoh: Macromedia Dreamweaver, Microsoft FrontPage, notepad, dll.
![Page 7: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/7.jpg)
World Wide Web (WWW)
• Bagaimana WWW Bekerja:
![Page 8: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/8.jpg)
Lessons
1. World Wide Web2. Elemen Dokumen HTML3. Basic Tag HTML4. Format HTML5. Entiti HTML6. Links HTML
![Page 9: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/9.jpg)
Dokumen HTML
• HTML : HyperText Markup Language• Dokumen HTML (disebut dokumen web) adalah file teks murni yang
dapat dibuat dengan berbagai editor teks.• Ada dua cara pembuatan sebuah web page: dengan editor HTML atau
dengan editor teks biasa (Notepad)• Penamaan file dokumen HTML: dengan memberikan ekstensi “.htm”
atau “.html”.• Dokumen HTML terdiri atas berbagai tag, sebagai penanda berbagai
elemen dalam dokumen HTML.• Tag HTML terdiri atas:
Sebuah kurung sudut kiri (<, tanda lebih kecil)Sebuah nama tag, danSebuah kurung sudut kanan (>, tanda lebih kecil)
Syntax: < nama_tag >• Contoh Tag : <html>, <head>,<body>, .. dst.
![Page 10: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/10.jpg)
Dokumen HTML
• Tag, umumnya berpasangan, yang terdiri atas tag awal dan tag akhir. Tag akhir sebagai pasangannya biasanya diawali dengan tanda (/,garismiring)
• Contoh: <H1> … </H1>, <title> … </title>• Ada beberapa elemen tag yang tidak diharuskan untuk berpasangan,
diantaranya:Paragraf dengan tag <p>Ganti baris (break line, <br>)Garis datar (horizontal rule, <hr>)List item dengan tag <li>
![Page 11: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/11.jpg)
Lessons
1. World Wide Web2. Elemen Dokumen HTML3. Basic Tag HTML4. Format HTML5. Entiti HTML6. Links HTML
![Page 12: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/12.jpg)
Basic Tag HTML
• Beberapa bentuk Tag dasar HTML:
• Untuk mencoba pertama kali dokumen web, buka Notepad, lalu ketikscritp HTML berikut:
Simpan file dengan nama dan ekstensi: WebPertamaku.html
![Page 13: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/13.jpg)
Basic Tag HTML : Paragraf <P> & Line Break <BR>
Paragraf:• Satu pikiran utama dalam dokumen HTML, disimpan dalam satu
paragraf.• Tag paragraf dapat didefinisikan dengan memberi awalan tag <p>,
diakhir paragraf tidak diharuskan menggunakan akhiran tag </p>.• Syntax: <p> … </p> atau <p>…
Line Break:• Line Break digunakan sebagi ganti baris pada dokumen web dengan
menggunakan tag <br>• Ganti baris <br> berarti menyajikan informasi pada baris tersendiri
tanpa berganti paragraf.• Syntax: …….… <br> atau <br>………
……………… ………….
![Page 14: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/14.jpg)
Basic Tag HTML : Paragraf <P> & Line Break <BR>
Contoh:
![Page 15: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/15.jpg)
Basic Tag HTML : Paragraf <P> & Line Break <BR>
Contoh: Tampilan
![Page 16: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/16.jpg)
Basic Tag HTML : Heading <H1…H6>
• Teks dalam dokumen web umumnya memiliki judultopik, yang disebut heading.
• Heading text ditampilkan dengan huruf besar atau tebal(bold).
• Format heading text digunakan sebagai kebutuhan danpentingnya text atau informasi yang ditampilkan denganprioritas tertentu.
• Terdapat 6 tingkatan tag heading, dengan tag heading 1merupakan heading yang terbesar dan dianggap paling penting (informasi).
![Page 17: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/17.jpg)
Basic Tag HTML : Heading <H1…H6>
Syntax heading:<hn> t e x t </hn>, dengan n : nomor heading 1…6
Contoh heading:
![Page 18: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/18.jpg)
Basic Tag HTML : Heading <H1…H6>
Format Letak Heading:Format penempatan heading diatur dalam align:
Kiri (left) : <h1 align=“left”> Heading 1 Left </h1>Tengah (center): <h1 align=“center”> Heading 1 Center </h1>Kanan (right) : <h1 align=“right”> Heading 1 Right </h1>
• Contoh letak heading:
![Page 19: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/19.jpg)
Basic Tag HTML : Horizontal Rule <HR>
• Horizontal Rule (garis mendatar) dapat disisipkan pada dokumenweb sebagai pemisah antar suatu bagian/paragraf.
• Syntax Horizontal Rule: <hr> ….• Contoh:
![Page 20: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/20.jpg)
Basic Tag HTML : Komentar
• Komentar dalam script dokumen web, digunakan sebagai catatanatau komentar tentang dokumen itu sendiri dan tidak ditampilkan.
• Syntax komentar: <!-- …isi komentar… -->• Contoh:
<html>
<head>
<title>Horizontal Rule</title><head>
<body><!-- Komentar ini tidak akan ditampilkan --><p>Ini normal paragraf
<body></html>
![Page 21: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/21.jpg)
Lessons
1. World Wide Web2. Elemen Dokumen HTML3. Basic Tag HTML4. Format HTML5. Entiti HTML6. Links HTML
![Page 22: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/22.jpg)
Format HTML : Format Teks
Pemformatan Teks:• Pemformatan teks dalam dokumen HTML (web) dapat
berupa: Huruf tebal (bold) : <b> … </b>Huruf miring (italic) : <i> … </i>Garis bawah : <u> … </u>Pemberian tekanan pada teks (emphasize) : <em>…</em>Mengecilkan huruf (small) : <small> … </small>Superscript : <sup> … </sup>Subscript : <sub> … </sub>Dll…
![Page 23: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/23.jpg)
Format HTML : Format Teks
Contoh:
![Page 24: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/24.jpg)
Format HTML : Teks Preformat
Teks Preformat:• Teks preformat adalah susunan teks yang ditampilkan sesuai
dengan dokumen web tersebut dalam editor.• Teks preformat digunakan : menampilkan source code
program• Syntax tag preformat : <pre> … </pre>• Dengan tag preformat, akan menjaga spasi, baris baru, dan tab
sesuai dengan aslinya saat ditampilkan.
![Page 25: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/25.jpg)
Format HTML : Teks Preformat
Contoh Teks Preformat:<html><head><title>Teks Preformat</title><head><body><h2> Trigger secure_emp </h2><hr><pre>CREATE OR REPLACE TRIGGER secure_empBEFORE INSERT ON employeesBEGIN
IF (TO_CHAR(SYSDATE,'DY') IN ('SAT','SUN')) OR(TO_CHAR(SYSDATE,'HH24:MI') NOT BETWEEN '08:00' AND '18:00')
THEN RAISE_APPLICATION_ERROR (-20500,'Penyisipan data pada tableEMPLOYEES hanya diperbolehkan selama jam kerja');
END IF;END;/</pre><body></html>
![Page 26: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/26.jpg)
Format HTML : Teks Preformat
Contoh Teks Preformat:
![Page 27: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/27.jpg)
Format HTML : Teks Preformat
Tampilan Teks Preformat:
![Page 28: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/28.jpg)
Format HTML : Address
• Tag Address digunakan dalam menampilkan alamat.• Syntax Address: <address> … </address>• Contoh :
![Page 29: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/29.jpg)
Lessons
1. World Wide Web2. Elemen Dokumen HTML3. Basic Tag HTML4. Format HTML5. Entiti HTML6. Links HTML
![Page 30: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/30.jpg)
Entity Karakter HTML
• Beberapa karakter memiliki arti khusus dalam tag HTML, seperti tanda tag awal (<) dan tag akhir (>).
• Jika browser ingin menampilkan karakter dari tag-tag dokumen web tersebut, maka harusmenyisipkan entitas karakter kedalam source HTML.
• Entitas karakter memiliki 3 bagian: 1. Sebuah ampersand (&)2. Sebuah nama entitas atau sebuah # dan nomor entitas3. Sebuah tanda titik koma (; / semicolon)
• Entitas karakter HTML memilikisifat case-sensitive
![Page 31: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/31.jpg)
Entity Karakter HTML
• Contoh:
![Page 32: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/32.jpg)
Entity Karakter HTML
• Beberapa entitas karakter yang sering digunakan:Hasil Keterangan Nama Entitas Nomor Entitas
© Copyright © ©
® registered trademark ® ®
™ trademark ™
non_breaking space ¡
& ampersand & &
<< angle quote mark (left) « «
>> angle quote mark (right) » »
" tanda kutip " "
< lebih kecil < <
> lebih besar > =
x tanda kali × ×
÷ tanda bagi ÷ ÷
![Page 33: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/33.jpg)
Lessons
1. World Wide Web2. Elemen Dokumen HTML3. Basic Tag HTML4. Format HTML5. Entiti HTML6. Links HTML
![Page 34: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/34.jpg)
Links
• Untuk menghubungkan antar dokumen web digunakan link.• Link (hypertext link atau hyperlink) pada dokumen web
dapat berupa teks atau gambar, browser akan menyorot(highlight) teks atau gambar yang diidentifikasi sebagailink dengan warna atau garis bawah.
• Tag link yang digunakan adalah tag anchor : <a> danatribut href sebagai definisi lokasi link.
• Syntax tah link: <a href=“”> …text link… </a>• Ada 3 (tiga) jenis link:
1. Link relatif2. Link absolut3. Link dalam dokumen yang sama
![Page 35: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/35.jpg)
Links
Link Relatif• Link relatif dibuat dengan penempatan dokumen web pada
direktori yang sama.• Contoh: <a href=“page-2.html”>Halaman kedua</a>
Link Absolut• Link absolut dibuat dengan mengarahkan link pada dokumen web
site lain di internet, dalam hal ini menuliskan suatu alamat internet secara lengkap.
• Contoh:<a href=http://www.google.com>Search engine Google</a>
![Page 36: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/36.jpg)
Links
Link ke Bagian Lain dalam Dokumen• Link jenis ini dibuat jika dokuemn web terlalu panjang,sehingga user
harus merlakukan scroll layar berulang-ulang.• Navigasi penelusuran dokumen dapat dibuat mudah per-antar bagian
dengan memberikan penanda pada setiap bagian.• Biasanya digunakan untuk index, daftar isi, link ke gambar, link ke
bagian top (atas), dll.• Cara pemberian tanda / nama pada bagian dokumen:
1. Letakkan cursor pada baris atau teks yang menjadi awal dari bagiantersebut
2. Sisipkan nama bagian tersebut dengan tag: <a name=“nama_bagian”>
• Untuk membuat link pada bagian lain pada dokumen web yang sama, tambahkan tanda # : <a href=#nama_bagian>Bagian tentang link</a>
![Page 37: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/37.jpg)
LinksContoh:<html><head><title>Coba Link</title><head><body><a name="top"><a href="#B3"> Lihat Bab 3 </a></a><p><h2> Bab 1 </h2>Making a link requires have two HTML pages. So make two and name them "page1.html" and "page2.html" (make sure you save them in the same folder). The link tag, a is often called an anchor tag, we'll talk more about anchors later. In "page1.html" put the following someplace between your body and /body tags. </p><p><h2> Bab 2 </h2>Link to page 2.The page2.html means to make a link to page2.html when you click on the information following it. The /a part of the link tells the browser to stop the link continue with regular text. The link you just made should look something like the following: </p><a name="B3"><h2> Bab 3 </h2><p>Try it and see if the link goes to the other HTML file. There are a couple different kinds of links, relative and absolute. Most of the links you make, like the one we just made, will be relative. Relative pathnames point to files based on their locations relative to the current file, while absolute pathnames point to files based on their absolute location on the file system. We could make our link absolute by changing it to </p><a href="#top"> Kembali ke atas </a><body></html>
![Page 38: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/38.jpg)
Links
Contoh:
![Page 39: Internet Application: Pengenalan HTML€¦ · Internet Application: Pengenalan HTML PENS-ITS By: Arif Basofi, S.Kom. Objective Tujuan:-Mengenal arsitektur struktur & tag dasar dokumen](https://reader034.fdocuments.us/reader034/viewer/2022051322/600c10f7549bab2f3e3b8759/html5/thumbnails/39.jpg)
Lessons
LATIHAN