By: Arif Basofi, S.Kom PENS-ITS

Internet Application:

Internet Application:

Pengenalan

Pengenalan

HTML

HTML

PENS-ITS

Objective

Tujuan:

- Mengenal arsitektur WWW

- Mengenal struktur & tag dasar dokumen

HTML

- Memahami format dan entitas karakter

HTML

Lessons

1. World Wide Web

2. Elemen Dokumen HTML

3. Basic Tag HTML

4. Format HTML

5. Entiti HTML

6. Links HTML

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 alamat

dalam internet.

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,

World Wide Web (WWW)

• Untuk dapat mengakses (menjelajahi) alamat-alamat web site di

internet, 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 dan

ditampilkan menjadi sebuah informasi yang dapat dibaca oleh

user

.

Contoh: Internet Explorer (IE), Netscape Navigator, Modzilla, dll.

•

Web Developer:

software yang digunakan dalam membangun

dokumen web.

Contoh: Macromedia Dreamweaver, Microsoft FrontPage, notepad,

dll.

World Wide Web (WWW)

Lessons

1. World Wide Web

2. Elemen Dokumen HTML

3. Basic Tag HTML

4. Format HTML

5. Entiti HTML

6. Links HTML

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, dan

ƒ Sebuah kurung sudut kanan (>, tanda lebih kecil) Syntax: < nama_tag >

Dokumen HTML

• Tag, umumnya berpasangan, yang terdiri atas tag awal dan tag akhir.

Tag akhir sebagai pasangannya biasanya diawali dengan tanda (/,garis miring)

• 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>)

Lessons

1. World Wide Web

2. Elemen Dokumen HTML

3. Basic Tag HTML

4. Format HTML

5. Entiti HTML

6. Links HTML

Basic Tag HTML

• Beberapa bentuk Tag dasar HTML:

• Untuk mencoba pertama kali dokumen web, buka Notepad, lalu ketik scritp HTML berikut:

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>………

Basic Tag HTML : Paragraf <P> & Line Break <BR>

Basic Tag HTML : Paragraf <P> & Line Break <BR>

Basic Tag HTML : Heading <H1…H6>

• Teks dalam dokumen web umumnya memiliki judul

topik, yang disebut

heading

.

•

Heading

text ditampilkan dengan huruf besar atau tebal

(

bold

).

• Format

heading

text digunakan sebagai kebutuhan dan

pentingnya text

atau

informasi

yang ditampilkan dengan

prioritas

tertentu.

• Terdapat

6 tingkatan

tag

heading

, dengan tag

heading 1

merupakan heading yang

terbesar

dan dianggap paling

Basic Tag HTML : Heading <H1…H6>

Syntax heading:

<h

_n

> t e x t </h

_n

>

, dengan

n

: nomor heading

1…6

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>

Basic Tag HTML : Horizontal Rule <HR>

•

Horizontal Rule

(garis mendatar) dapat disisipkan pada dokumen

web sebagai

pemisah

antar suatu bagian/paragraf.

•

Syntax Horizontal Rule:

<hr> ….

Basic Tag HTML : Komentar

•

Komentar

dalam script dokumen web, digunakan sebagai catatan

atau 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>

Lessons

1. World Wide Web

2. Elemen Dokumen HTML

3. Basic Tag HTML

4. Format HTML

5. Entiti HTML

6. Links HTML

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 : ^…

; Subscript : _…

; Dll

Format HTML : Format Teks

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.

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_emp BEFORE INSERT ON employees

BEGIN

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 table

EMPLOYEES hanya diperbolehkan selama jam kerja'); END IF; END; / </pre> <body> </html>

Format HTML : Teks Preformat

Format HTML : Teks Preformat

Format HTML : Address

• Tag

Address

digunakan dalam menampilkan

alamat

.

•

Syntax Address

:

<address> … </address>

Lessons

1. World Wide Web

2. Elemen Dokumen HTML

3. Basic Tag HTML

4. Format HTML

5. Entiti HTML

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 harus

menyisipkan

entitas karakter

kedalam source

HTML.

•

Entitas karakter

memiliki 3 bagian:

1. Sebuah

ampersand (&)

2. Sebuah

nama entitas

atau sebuah

# dan nomor entitas

3. Sebuah

tanda titik koma (; / semicolon)

Entity Karakter HTML

Entity Karakter HTML

•

Beberapa entitas karakter yang sering digunakan:

Hasil Keterangan Nama Entitas Nomor Entitas

© Copyright &copy; &#169;

® registered trademark &reg; &#174;

™ trademark &#8482; non_breaking space &nbsp; &#161;

& ampersand &amp; &#38;

<< angle quote mark (left) &laquo; &#171;

>> angle quote mark (right) &raquo; &#187;

" tanda kutip &quot; &#34;

< lebih kecil &lt; &#60;

> lebih besar &gt; &#61;

x tanda kali &times; &#215;

Lessons

1. World Wide Web

2. Elemen Dokumen HTML

3. Basic Tag HTML

4. Format HTML

5. Entiti HTML

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 sebagai

link dengan

warna

atau

garis bawah

.

•

Tag

link

yang digunakan adalah tag

anchor

:

<a>

dan

atribut href sebagai definisi lokasi link.

•

Syntax tah link:

<a href=“”> …text link… </a>

•

Ada 3 (tiga) jenis link:

1. Link relatif 2. Link absolut

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:

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 bagian tersebut

2. Sisipkan nama bagian tersebut dengan tag:

<a name=“nama_bagian”>

• Untuk membuat link pada bagian lain pada dokumen web yang sama, tambahkan tanda # :

Links

Contoh: <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>

Links

Lessons