Pengantar HTML
2
Objectives
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
 Memahami konstruksi dasar halaman web.
 Mengerti tentang WWW
 Mengerti tag-tag dasar HTML
 Membuat halaman web dengan HTML
sederhana.
3
World Wide Web (WWW)
 Internet merupakan jaringan global yang
menghubungkan suatu network dengan
network lainya di seluruh dunia.
 TCP/IP menjadi protocol penghubung
antara jaringan-jaringan yang beragam di
seluruh dunia untuk dapat berkomunikasi.
 World Wide Web (WWW) merupakan
bagian dari internet yang paling cepat
berkembang dan paling populer.
4
WWW - continued
 WWW bekerja merdasarkan pada tiga
mekanisme berikut:
• Protocol standard aturan yang di gunakan
untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol
(HTTP) adalah protocol untuk WWW.
• Address WWW memiliki aturan penamaan
alamat web yaitu: URL(Uniform Resource
Locator) yang di gunakan sebagai standard
alamat internet.
• HTML digunakan untuk membuat document
yang bisa di akses melalui web.
 http://www.detik.com/index.html
5
HyperText Markup Language (HTML)
 HTML  standard bahasa yang digunakan
untuk menampilkan document web.
• Mengontrol tampilan dari web page dan
contentnya.
• Mempublikasikan document secara online
sehingga bisa di akses.
• Membuat online form yang bisa di gunakan
untuk menangani pendaftaran, transaksi
secara online.
• Menambahkan object-object seperti image,
audio, video dan juga java applet dalam
document HTML.
6
Browser dan Editor
 Browser: Browser merupakan software yang di
install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman
web. Browser yang sering di gunakan biasanya
Internet Explorer, Netscape Navigator, Opera,
Mozilla dan masih banyak yang lainya.
 Editor: Program yang di gunakan untuk
membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya:
Notepad, Microsoft FrontPage, Macromedia
Dreamweaver, dan lain-lain.
7
Tag-tag HTML
 Bila pada bahasa pemrograman kita
mengenal code, maka pada HTML kita
mengenal yang namanya tag.
 Contoh tag html adalah <head>, <title>,
<body>, <html>, <img>, dan lain-lain.
 Tag html tidak bersifat case sensitive 
<body> sama dengan <BODY>
8
Tag-tag HTML - continued
 Bentuk umum penulisan tag html
adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
• Element - nama tag
• Attribute - atribut dari tag
• Value - nilai dari atribut.
 Contoh:
<BODY BGCOLOR=lavender>
9
Struktur HTML document
 Document HTML bisa di bagi mejadi tiga bagian
utama: html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
10
Susunan HTML
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>
11
<html>
 Setiap document HTML harus di
awali dan di tutup dengan tag HTML
 <html> …… </html>
 Tag <html> memberi tahu browser
bahwa yang di dalam kedua tag
tersebut adalah document HTML.
12
<head>
 Bagian header dari document HTML di apit oleh tag
<head></head>.
 Di dalam bagian ini biasanya dimuat tag <tittle> yang
menampilkan judul dari halaman web.
<head>
<title>Welcome to eepis-its</title>
</head>
13
<body>
 Tag <body> di gunakan untuk menampilkan
text, image link dan semua yang akan di
tampilkan pada web page.
<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>
14
Elemen dasar – Block Level
 Block level element:
terdapat 6 tingkatan, yaitu
H1 sampai H6.
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
15
Elemen dasar – Paragraph (p)
 Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan telekom PENS ITS.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
16
Elemen dasar – list item (li)
 Unordered list <ul>: List item tidak berurutan (bullet)
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
17
list item (li) - continued
 Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Jurusan PENS ITS</P>
<ol start="1" type=“1">
<li>Telkom</li>
<li>IT</li>
<li>Elka</li>
<li>Elektro Industri</li>
</ol>
<body>
18
list item (li) - continued
 Tipe-tipe pada list item - ordered list <ol> :
• “A” : A, B, C, …
• ”a” : a, b, c, …
• ”I” : I, II, III, …
• ”i” : i, ii, iii, …
• ”1” : 1, 2, 3, …
19
Elemen dasar – Horizontal Rules <hr>
 Horizontal Rule tag digunakan untuk
menggambar garis horizontal dalam dokumen
html.
 Attribut dari <hr> adalah:
• Position: menetukan posisi dari <hr>, dengan nilai :
center | right | left.
• Width: untuk menentukan panjang <hr>. Nilai default
100%.
• Size: untuk menentukan tebal dari <hr> dalam pixel.
• Noshad: Efek bayangan.
 Contoh:
<hr position=“center” width=90% size=3
noshad>
20
Pemformatan Page
 Break : memulai baris baru
tag : <br>
 Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>
 Color : attribute dgn 3 kategori warna (RGB)
#RRGGBB, misal #FF0000 adalah Red
21
 Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan PENS ITS</P>
 Format Text :
A. Physical Format B. Logical Format
Pemformatan Page – Cont. 1
C. Preformatted Text : menampilkan text spt aslinya.
<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>
22
 Contoh :
<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body>
<B><P align="center">Lab di Jur. Telkom</P></B>
Jurusan Telkom mempunyai 7 lab, diantaranya <br>
<font color="#9966FF" size="3" face="arial">
1. Lab. Multimedia </font> <br>
2. Lab. Microwave <br>
3. Lab. Komunikasi Digital <br>
</body>
</html>
Pemformatan Page – Cont. 2
23
Elemen dasar – hyperlink <a>
 Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://lecturer.eepis-its.edu/
~zenhadi”> WEB PRIBADI ZEN </a>
 Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:
24
Pembuatan Tabel
 Untuk membuat tabel : <tabble>
Cell-nya dengan tag <td>
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>
25
 Untuk membuat baris cell : <tr>
 Untuk title tabel : <caption>
Pembuatan Tabel – Cont. 1
<body>
<table border="1">
<caption>Creating Table</caption>
<tr> <td>cell 1a</td>
<td>cell 1b</td>
</tr>
<tr> <td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>
26
Pemformatan Tabel
 Perataan tabel :
1. align (center, justify, left, right).
2. valign (baseline, top, middle, bottom)
 Lebar tabel : width=“25%”
 Warna cell : bgcolor=“red”
 Spasi tabel :
cellspacing untuk memberi spasi antar sel
cellpadding untuk spasi dari border ke text dalam cell
27
Pemformatan Tabel – Cont. 1
 Contoh :
<body>
<table border=1 cellspacing=5
cellpading=10>
<tr align="left" valign="top">
<td width="25%"
bgcolor=red>cell 1a</td>
<td width="25%"
bgcolor=yellow>cell 1b</td>
</tr>
<tr align="center"
valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>

fdokumen.com_pengantar-html-56a0e352ed109.ppt

  • 1.
  • 2.
    2 Objectives Setelah menyelesaikan babini, anda diharapkan dapat:  Memahami konstruksi dasar halaman web.  Mengerti tentang WWW  Mengerti tag-tag dasar HTML  Membuat halaman web dengan HTML sederhana.
  • 3.
    3 World Wide Web(WWW)  Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia.  TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.  World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer.
  • 4.
    4 WWW - continued WWW bekerja merdasarkan pada tiga mekanisme berikut: • Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. • Address WWW memiliki aturan penamaan alamat web yaitu: URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. • HTML digunakan untuk membuat document yang bisa di akses melalui web.  http://www.detik.com/index.html
  • 5.
    5 HyperText Markup Language(HTML)  HTML  standard bahasa yang digunakan untuk menampilkan document web. • Mengontrol tampilan dari web page dan contentnya. • Mempublikasikan document secara online sehingga bisa di akses. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. • Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.
  • 6.
    6 Browser dan Editor Browser: Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Mozilla dan masih banyak yang lainya.  Editor: Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Notepad, Microsoft FrontPage, Macromedia Dreamweaver, dan lain-lain.
  • 7.
    7 Tag-tag HTML  Bilapada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag.  Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain.  Tag html tidak bersifat case sensitive  <body> sama dengan <BODY>
  • 8.
    8 Tag-tag HTML -continued  Bentuk umum penulisan tag html adalah: <ELEMENT ATTRIBUTE = value> Dimana: • Element - nama tag • Attribute - atribut dari tag • Value - nilai dari atribut.  Contoh: <BODY BGCOLOR=lavender>
  • 9.
    9 Struktur HTML document Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body. <html> <head> </head> <body> </body> </html>
  • 10.
  • 11.
    11 <html>  Setiap documentHTML harus di awali dan di tutup dengan tag HTML  <html> …… </html>  Tag <html> memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.
  • 12.
    12 <head>  Bagian headerdari document HTML di apit oleh tag <head></head>.  Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul dari halaman web. <head> <title>Welcome to eepis-its</title> </head>
  • 13.
    13 <body>  Tag <body>di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. <html> <head> <title>Welcome to eepis-its</title> </head> <body bgcolor="lavender"> <p>Document HTML yang Pertama</p> </body> </html>
  • 14.
    14 Elemen dasar –Block Level  Block level element: terdapat 6 tingkatan, yaitu H1 sampai H6. <body> <h1>Heading one</h1> <h2>Heading two</h2> <h3>Heading three</h3> <h4>Heading four</h4> <h5>Heading five</h5> <h6>Heading six</h6> </body>
  • 15.
    15 Elemen dasar –Paragraph (p)  Menampilkan teks dalam bentuk paragraf. <body> <h3>Salam Kenal</h3> <p> Saya dari jurusan telekom PENS ITS. Siapa ya yang mo kenalan dengan saya. </p> <body>
  • 16.
    16 Elemen dasar –list item (li)  Unordered list <ul>: List item tidak berurutan (bullet) <body> <P>Nama-nama buah</P> <ul> <li>Mangga</li> <li>Duren</li> <li>Sirsak</li> </ul> </body>
  • 17.
    17 list item (li)- continued  Ordered list <ol>: List item berurutan. <body> <P>Daftar Jurusan PENS ITS</P> <ol start="1" type=“1"> <li>Telkom</li> <li>IT</li> <li>Elka</li> <li>Elektro Industri</li> </ol> <body>
  • 18.
    18 list item (li)- continued  Tipe-tipe pada list item - ordered list <ol> : • “A” : A, B, C, … • ”a” : a, b, c, … • ”I” : I, II, III, … • ”i” : i, ii, iii, … • ”1” : 1, 2, 3, …
  • 19.
    19 Elemen dasar –Horizontal Rules <hr>  Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen html.  Attribut dari <hr> adalah: • Position: menetukan posisi dari <hr>, dengan nilai : center | right | left. • Width: untuk menentukan panjang <hr>. Nilai default 100%. • Size: untuk menentukan tebal dari <hr> dalam pixel. • Noshad: Efek bayangan.  Contoh: <hr position=“center” width=90% size=3 noshad>
  • 20.
    20 Pemformatan Page  Break: memulai baris baru tag : <br>  Font : menentukan format tampilan font <font color="#9966FF" size="5"> Belajar Web </font>  Color : attribute dgn 3 kategori warna (RGB) #RRGGBB, misal #FF0000 adalah Red
  • 21.
    21  Alignment :untuk perataan objek (Left,Right,Center,Justify) <P align="center">Daftar Jurusan PENS ITS</P>  Format Text : A. Physical Format B. Logical Format Pemformatan Page – Cont. 1 C. Preformatted Text : menampilkan text spt aslinya. <pre> HTML sungguh menyenangkan. Mudah bukan… </pre>
  • 22.
    22  Contoh : <html> <head> <title>Welcometo eepis-its</title> </head> <body> <B><P align="center">Lab di Jur. Telkom</P></B> Jurusan Telkom mempunyai 7 lab, diantaranya <br> <font color="#9966FF" size="3" face="arial"> 1. Lab. Multimedia </font> <br> 2. Lab. Microwave <br> 3. Lab. Komunikasi Digital <br> </body> </html> Pemformatan Page – Cont. 2
  • 23.
    23 Elemen dasar –hyperlink <a>  Untuk membuat link ke dokumen lain. Contoh: <a href=dua.html>Ke halaman dua</a> <a href=“http://lecturer.eepis-its.edu/ ~zenhadi”> WEB PRIBADI ZEN </a>  Untuk membuat link ke bagian tertentu dlm dokumen. Contoh:
  • 24.
    24 Pembuatan Tabel  Untukmembuat tabel : <tabble> Cell-nya dengan tag <td> <html> <head> <title>Using Table</title> </head> <body> <table border="1"> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </table> </body> </html>
  • 25.
    25  Untuk membuatbaris cell : <tr>  Untuk title tabel : <caption> Pembuatan Tabel – Cont. 1 <body> <table border="1"> <caption>Creating Table</caption> <tr> <td>cell 1a</td> <td>cell 1b</td> </tr> <tr> <td>cell 2a</td> <td>cell 2b</td> </tr> </table> </body>
  • 26.
    26 Pemformatan Tabel  Perataantabel : 1. align (center, justify, left, right). 2. valign (baseline, top, middle, bottom)  Lebar tabel : width=“25%”  Warna cell : bgcolor=“red”  Spasi tabel : cellspacing untuk memberi spasi antar sel cellpadding untuk spasi dari border ke text dalam cell
  • 27.
    27 Pemformatan Tabel –Cont. 1  Contoh : <body> <table border=1 cellspacing=5 cellpading=10> <tr align="left" valign="top"> <td width="25%" bgcolor=red>cell 1a</td> <td width="25%" bgcolor=yellow>cell 1b</td> </tr> <tr align="center" valign="baseline"> <td>cell 2a</td> <td>cell 2b</td> </tr> </table> </body>