Pengantar HTML

Pengantar HTMLPengantar HTML

22

ObjectivesObjectives

Setelah menyelesaikan bab ini,Setelah menyelesaikan bab ini,anda diharapkan dapat:anda diharapkan dapat: Memahami konstruksi dasar halaman web.Memahami konstruksi dasar halaman web. Mengerti tentang WWWMengerti tentang WWW Mengerti tag-tag dasar HTMLMengerti tag-tag dasar HTML Membuat halaman web dengan HTML Membuat halaman web dengan HTML

sederhana.sederhana.

33

World Wide Web (WWW)World Wide Web (WWW)

Internet merupakan jaringan global yang Internet merupakan jaringan global yang menghubungkan suatu network dengan menghubungkan suatu network dengan network lainya di seluruh dunia.network lainya di seluruh dunia.

TCP/IP menjadi protocol penghubung TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.seluruh dunia untuk dapat berkomunikasi.

World Wide Web (WWW) merupakan World Wide Web (WWW) merupakan bagian dari internet yang paling cepat bagian dari internet yang paling cepat berkembang dan paling populer. berkembang dan paling populer.

44

WWW - WWW - continuedcontinued

WWW bekerja merdasarkan pada tiga WWW bekerja merdasarkan pada tiga mekanisme berikut:mekanisme berikut:• ProtocolProtocol standard aturan yang di gunakan standard aturan yang di gunakan

untuk berkomunikasi pada computer untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.adalah protocol untuk WWW.

• AddressAddress WWW memiliki aturan penamaan WWW memiliki aturan penamaan alamat web yaitu: URL(Uniform Resource alamat web yaitu: URL(Uniform Resource Locator) yang di gunakan sebagai standard Locator) yang di gunakan sebagai standard alamat internet.alamat internet.

• HTMLHTML digunakan untuk membuat document digunakan untuk membuat document yang bisa di akses melalui web.yang bisa di akses melalui web.

httphttp://://www.detik.comwww.detik.com//index.htmlindex.html

55

HyperText Markup Language (HTML)HyperText Markup Language (HTML)

HTML HTML standard bahasa yang digunakan standard bahasa yang digunakan untuk menampilkan document web.untuk menampilkan document web.• Mengontrol tampilan dari web page dan Mengontrol tampilan dari web page dan

contentnya.contentnya.• Mempublikasikan document secara online Mempublikasikan document secara online

sehingga bisa di akses.sehingga bisa di akses.• Membuat online form yang bisa di gunakan Membuat online form yang bisa di gunakan

untuk menangani pendaftaran, transaksi untuk menangani pendaftaran, transaksi secara online.secara online.

• Menambahkan object-object seperti image, Menambahkan object-object seperti image, audio, video dan juga java applet dalam audio, video dan juga java applet dalam document HTML.document HTML.

66

Browser dan EditorBrowser dan Editor

Browser: Browser: Browser merupakan software yang di Browser merupakan software yang di install di mesin client yang berfungsi untuk install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Internet Explorer, Netscape Navigator, Opera, Mozilla dan masih banyak yang lainya.Mozilla dan masih banyak yang lainya.

Editor: Editor: Program yang di gunakan untuk Program yang di gunakan untuk membuat document HTML, ada banyak HTML membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: editor yang bisa anda gunakan diantaranya: Notepad, Microsoft FrontPage, Macromedia Notepad, Microsoft FrontPage, Macromedia Dreamweaver, dan lain-lain.Dreamweaver, dan lain-lain.

77

Tag-tag HTMLTag-tag HTML

Bila pada bahasa pemrograman kita Bila pada bahasa pemrograman kita mengenal mengenal codecode, maka pada HTML kita , maka pada HTML kita mengenal yang namanya mengenal yang namanya tagtag..

Contoh tag html adalah Contoh tag html adalah <head><head>, , <title><title>, , <body><body>, , <html><html>, , <img><img>, dan lain-lain., dan lain-lain.

Tag html tidak bersifat case sensitive Tag html tidak bersifat case sensitive <body> <body> sama dengan sama dengan <BODY><BODY>

88

Tag-tag HTML - Tag-tag HTML - continuedcontinued

Bentuk umum penulisan tag html Bentuk umum penulisan tag html adalah:adalah:<<ELEMENTELEMENT ATTRIBUTEATTRIBUTE = = valuevalue>>

Dimana:Dimana:• ElementElement - nama tag- nama tag• Attribute Attribute - atribut dari tag- atribut dari tag• ValueValue - nilai dari atribut.- nilai dari atribut.

Contoh:Contoh:<BODY BGCOLOR=lavender><BODY BGCOLOR=lavender>

99

Struktur HTML documentStruktur HTML document

Document HTML bisa di bagi mejadi tiga bagian Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.utama: html, head, dan body.

<html><html><head><head>

</head></head>

<body><body>

</body></body></html></html>

1010

Susunan HTMLSusunan HTML

Homepage

Kepala<head>

Tubuh<body>

<Head> <Title>

Judul Homepage</Title>

</Head>

<Body>Isi…TeksIsi…Tabel.Isi…Audio, Video, dll.

</Body>

1111

<html><html>

Setiap document HTML harus di awali Setiap document HTML harus di awali dan di tutup dengan tag HTML dan di tutup dengan tag HTML <html> …… </html><html> …… </html>

Tag <html> memberi tahu browser Tag <html> memberi tahu browser bahwa yang di dalam kedua tag bahwa yang di dalam kedua tag tersebut adalah document HTML.tersebut adalah document HTML.

1212

<head><head> Bagian header dari document HTML di apit oleh tag Bagian header dari document HTML di apit oleh tag

<head></head>.<head></head>. Di dalam bagian ini biasanya dimuat tag <tittle> yang Di dalam bagian ini biasanya dimuat tag <tittle> yang

menampilkan judul dari halaman web.menampilkan judul dari halaman web.<head><head>

<title>Welcome to eepis-its</title><title>Welcome to eepis-its</title>

</head></head>

1313

<body><body> Tag <body> di gunakan untuk menampilkan text, Tag <body> di gunakan untuk menampilkan text,

image link dan semua yang akan di tampilkan image link dan semua yang akan di tampilkan pada web page.pada web page.

<html><html><head><head><title>Welcome to eepis-its</title><title>Welcome to eepis-its</title></head></head><body bgcolor="lavender"><body bgcolor="lavender"><p>Document HTML yang Pertama</p><p>Document HTML yang Pertama</p></body></body></html></html>

1414

Elemen dasar – Block LevelElemen dasar – Block Level

Block level element: Block level element: terdapat 6 tingkatan, yaitu terdapat 6 tingkatan, yaitu H1 sampai H6.H1 sampai H6.

<body><body><h1>Heading one</h1><h1>Heading one</h1><h2>Heading two</h2><h2>Heading two</h2><h3>Heading three</h3><h3>Heading three</h3><h4>Heading four</h4><h4>Heading four</h4><h5>Heading five</h5><h5>Heading five</h5><h6>Heading six</h6><h6>Heading six</h6></body></body>

1515

Elemen dasar – Paragraph (p)Elemen dasar – Paragraph (p)

Menampilkan teks dalam bentuk paragraf.Menampilkan teks dalam bentuk paragraf.

<body><body><h3>Salam Kenal</h3><h3>Salam Kenal</h3><p><p>Saya dari jurusan telekom PENS ITS.Saya dari jurusan telekom PENS ITS.Siapa ya yang mo kenalan dengan saya.Siapa ya yang mo kenalan dengan saya.</p></p><body><body>

1616

Elemen dasar – list item (li)Elemen dasar – list item (li)

Unordered list Unordered list <ul><ul>: List item tidak berurutan (bullet): List item tidak berurutan (bullet)

<body><body><P>Nama-nama buah</P><P>Nama-nama buah</P><ul><ul><li>Mangga</li><li>Mangga</li><li>Duren</li><li>Duren</li><li>Sirsak</li><li>Sirsak</li></ul></ul></body></body>

1717

list item (li) - list item (li) - continuedcontinued

Ordered list Ordered list <ol><ol>: List item berurutan.: List item berurutan.

<body><body><P>Daftar Jurusan PENS ITS</P><P>Daftar Jurusan PENS ITS</P><ol start="1" type=“1"><ol start="1" type=“1"><li>Telkom</li><li>Telkom</li><li>IT</li><li>IT</li><li>Elka</li><li>Elka</li><li>Elektro Industri</li><li>Elektro Industri</li></ol></ol><body><body>

1818

list item (li) - list item (li) - continuedcontinued

Tipe-tipe pada list item - ordered list Tipe-tipe pada list item - ordered list <ol><ol> : :• ““A” : A, B, C, …A” : A, B, C, …• ””a” : a, b, c, …a” : a, b, c, …• ””I” : I, II, III, …I” : I, II, III, …• ””i” : i, ii, iii, …i” : i, ii, iii, …• ””1” : 1, 2, 3, …1” : 1, 2, 3, …

1919

Elemen dasar – Horizontal Rules <hr>Elemen dasar – Horizontal Rules <hr>

Horizontal Rule tag digunakan untuk Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen menggambar garis horizontal dalam dokumen html. html.

Attribut dari <hr> adalah:Attribut dari <hr> adalah:• Position: menetukan posisi dari <hr>, dengan nilai : Position: menetukan posisi dari <hr>, dengan nilai :

center | right | left.center | right | left.• Width: untuk menentukan panjang <hr>. Nilai default Width: untuk menentukan panjang <hr>. Nilai default

100%.100%.• Size: untuk menentukan tebal dari <hr> dalam pixel.Size: untuk menentukan tebal dari <hr> dalam pixel.• Noshad: Efek bayangan.Noshad: Efek bayangan.

Contoh:Contoh:<hr position=“center” width=90% size=3 <hr position=“center” width=90% size=3 noshad>noshad>

2020

Pemformatan Page Pemformatan Page Break : memulai baris baru Break : memulai baris baru

tag : <br>tag : <br> Font : menentukan format tampilan fontFont : menentukan format tampilan font

<font color="#9966FF" size="5"> Belajar Web </font><font color="#9966FF" size="5"> Belajar Web </font>

Color : attribute dgn 3 kategori warna (RGB) Color : attribute dgn 3 kategori warna (RGB) #RRGGBB, misal #FF0000 adalah Red#RRGGBB, misal #FF0000 adalah Red

2121

Alignment : untuk perataan objek (Left,Right,Center,Justify)Alignment : untuk perataan objek (Left,Right,Center,Justify)

<P align="center">Daftar Jurusan PENS ITS</P><P align="center">Daftar Jurusan PENS ITS</P> Format Text :Format Text :

A. Physical FormatA. Physical Format B. Logical Format B. Logical Format

Pemformatan Page – Pemformatan Page – Cont. 1Cont. 1

C. Preformatted Text : menampilkan text spt aslinya.C. Preformatted Text : menampilkan text spt aslinya.

<pre> HTML sungguh menyenangkan.<pre> HTML sungguh menyenangkan.

Mudah bukan… </pre>Mudah bukan… </pre>

2222

Contoh :Contoh :<html><html><head><head><title>Welcome to eepis-its</title><title>Welcome to eepis-its</title></head></head><body><body><B><P align="center">Lab di Jur. Telkom</P></B><B><P align="center">Lab di Jur. Telkom</P></B>Jurusan Telkom mempunyai 7 lab, diantaranya <br>Jurusan Telkom mempunyai 7 lab, diantaranya <br><font color="#9966FF" size="3" face="arial"><font color="#9966FF" size="3" face="arial">1. Lab. Multimedia </font> <br>1. Lab. Multimedia </font> <br>2. Lab. Microwave <br>2. Lab. Microwave <br>3. Lab. Komunikasi Digital <br>3. Lab. Komunikasi Digital <br></body></body></html></html>

Pemformatan Page – Pemformatan Page – Cont. 2Cont. 2

2323

Elemen dasar – hyperlink <a>Elemen dasar – hyperlink <a> Untuk membuat link ke dokumen lain.Untuk membuat link ke dokumen lain.

Contoh:Contoh:

<a href=dua.html>Ke halaman dua</a><a href=dua.html>Ke halaman dua</a>

<a href=“http://lecturer.eepis-its.edu/<a href=“http://lecturer.eepis-its.edu/

~zenhadi”> WEB PRIBADI ZEN </a>~zenhadi”> WEB PRIBADI ZEN </a> Untuk membuat link ke bagian tertentu dlm dokumen.Untuk membuat link ke bagian tertentu dlm dokumen.

Contoh:Contoh:

2424

Pembuatan TabelPembuatan Tabel

Untuk membuat tabel : <tabble>Untuk membuat tabel : <tabble>

Cell-nya dengan tag <td>Cell-nya dengan tag <td><html><html><head><head><title>Using Table</title><title>Using Table</title></head></head><body><body><table border="1"><table border="1"><td>cell 1</td><td>cell 1</td><td>cell 2</td><td>cell 2</td><td>cell 3</td><td>cell 3</td><td>cell 4</td><td>cell 4</td></table></table></body></body></html></html>

2525

Untuk membuat baris cell : <tr>Untuk membuat baris cell : <tr> Untuk title tabel : <caption>Untuk title tabel : <caption>

Pembuatan Tabel – Pembuatan Tabel – Cont. 1Cont. 1

<body><body><table border="1"><table border="1"><caption>Creating Table</caption><caption>Creating Table</caption><tr> <td>cell 1a</td><tr> <td>cell 1a</td> <td>cell 1b</td><td>cell 1b</td></tr></tr><tr> <td>cell 2a</td><tr> <td>cell 2a</td> <td>cell 2b</td><td>cell 2b</td></tr></tr></table></table></body></body>

2626

Pemformatan TabelPemformatan Tabel

Perataan tabel : Perataan tabel : 1. align (center, justify, left, right).1. align (center, justify, left, right).

2. valign (baseline, top, middle, bottom)2. valign (baseline, top, middle, bottom) Lebar tabel : width=“25%”Lebar tabel : width=“25%” Warna cell : bgcolor=“red”Warna cell : bgcolor=“red” Spasi tabel : Spasi tabel :

cellspacing cellspacing untuk memberi spasi antar seluntuk memberi spasi antar sel

cellpadding cellpadding untuk spasi dari border ke text dalam celluntuk spasi dari border ke text dalam cell

2727

Pemformatan Tabel – Pemformatan Tabel – Cont. 1Cont. 1 Contoh :Contoh :

<body><body><table border=1 cellspacing=5 <table border=1 cellspacing=5 cellpading=10>cellpading=10><tr align="left" valign="top"><tr align="left" valign="top"><td width="25%" <td width="25%" bgcolor=red>cell 1a</td>bgcolor=red>cell 1a</td><td width="25%" <td width="25%" bgcolor=yellow>cell 1b</td>bgcolor=yellow>cell 1b</td></tr></tr><tr align="center" <tr align="center" valign="baseline">valign="baseline"><td>cell 2a</td><td>cell 2a</td><td>cell 2b</td><td>cell 2b</td></tr></tr></table></table></body></body>

Pengantar HTML

Documents

Transcript of Pengantar HTML