Materi Praktek Pengenalan HTML AKUN-2013 PDF

MATERI PRAKTEK
PENGENALAN PEMROGRAMAN DENGAN

HTML (Hyper Text MarkUp Language)
Materi Pengenalan Pemrograman dengan HTML

Praktikum
Durasi 150 Menit
TIU / TIK 1. Mengetahui Apa itu HTML
2. Dapat membuat Webpage dengan HTML
3. Dll
Referensi 1. http://www.w3schools.com
2. Internet
Dosen I Made Sondra Wijaya, ST., MT.

Tugas Praktek :
1. Tugas di Lab Komputer (individu) :

2. Ikuti semua petunjuk dan teori singkat HTML
3. Kerjakan di Komputer masing-masing
4. Design Web Pribadi Anda
Pengenalan HTML Hal. 2 of 20

1. PENDAHULUAN
Apa itu HTML
 HTML singkatan dari Hyper Text Markup Language.

 HTML is not a programming language, it is a markup language (HTML
bukan suatu bahasa pemrograman tetapi sebuah bahasa dalam bentuk text
yang dapat digunakan untuk menyusun tulisan, gambar, suara, film dan
banyak lagi informasi yang bisa ditampilkan).
 Markup language adalah sebuah set dari markup tags
 HTML menggunakan markup tags untuk menjelaskan web pages
HTML Tags
HTML markup tags biasa disebut dengan HTML tags
 HTML tags adalah keywords (kata kunci) diapit oleh kurung <> (angle
brackets) seperti <html>
 HTML tags normalnya ditulis berpasangan seperti <b> and </b>
 Pasangan tag pertama disebut start tag, dan yang kedua disebut end tag
 Start dan end tags juga disebut opening tags dan closing tags.
HTML Documents = Web Pages
 HTML documents menjelaskan web pages

 HTML documents terdiri dari HTML tags dan plain text
 HTML documents disebut juga dengan web pages
Kegunaan dari web browser (seperti Internet Explorer atau Firefox) adalah untuk
membaca (read) HTML documents dan men-displaykannya sebagai web pages.
Browser tidak men-display-kan HTML tags, akan tetapi menggunakan tags untuk
menginterpretasikan content dari page:
Contoh :
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

Keterangan :
 Text antara <html> dan </html> menjelaskan web page

 Text antara <body> dan </body> berisi page content
 Text antara <h1> dan </h1> men-display-kan sebagai heading
 Text antara <p> dan </p> men-display-kan sebagai paragraph
Apa yang diperlukan untuk membuat HTML?

Cukup dengan mengunakan Notepad untuk mengetik Text dan Web Browser
(Internet Explorer) untuk menampilkan halaman WEB. Kalau Anda meng-install
windows, dua program ini sudah pasti tersedia. Anda juga dapat menggunakan
program-program yang lain untuk membuat HTML seperti Front Page, Microsoft
Word, Dos Edit, Mac SimpleText, Unix, dll.
Pada praktek/ latihan membuat Web (HTML) kali ini :
 Tidak diperlukan HTML editor

 Tidak diperlukan web server
 Tidak diperlukan web site
 Cukup menggunakan Notepad
HTM atau HTML Extension?

Ketika Anda menyimpan file HTML, Anda dapat menggunakan .htm (dot htm) atau
.html (dot html) extension. Kadang ada software hanya bisa tiga sigit extensions.
Bagaimana menjalankan HTML?
Dengan cara mengetik di editor kemudian disimpan dalam file dengan akhiran
(extension) .html, misalnya coba.html. Kemudian file yang berakhiran .html
tersebut dibuka di Internet Explorer, jadilah sudah program HTML.
Bagaimana program HTML Online?
Hubungkan program HTML dengan salah satu Internet Service Provider (ISP) yang
dikehendaki. Dapat juga menggunakan provider dari www.google.com dengan cara
upload file atau dengan provider lainnya.
HTML Basic Document
<html>
<head>

<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">

<input type="password">
<input type="checkbox" checked="checked">

<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
2. MEMBUAT HTML
2.1. Halaman pertama
Bukalah Notepad dan ketiklah sebagai berikut :
 Setiap dokumen HTML harus diawali dengan tag <html> dan diakhiri dengan
tag </html>

 <head> dan </head> digunakan sebagai informasi tentang dokumen kita.
 <title> dan </title> digunakan sebagai judul dari browser.
 <body> dan </body> digunakan sebagai isi dari halaman WEB.
Sekarang simpan text yang telah diketik misalnya dengan nama Hal-1.html
Sekali lagi jangan lupa akhiri nama file dengan .html. Selanjutnya buka Internet
Explorter: klik gambarnya, kemudian File->Open->Browse, cari file dengan nama
Hal-1.html di direktori tempat menyimpan tadi, kemudian Open dan OK. Apa yang
terjadi? Ternyata halaman WEB yang diketik di Notepad kemucian disimpan dengan
.html sudah bisa tampil sekarang, seperti dibawah ini.
<title>Halaman web saya yang

pertama</title>
<body>
Ini halaman web saya yang
pertama.
</body>
Lakukan hal yang sama untuk tugas-tugas berikutnya.

2.2. HTML Heading
<html>
<body> This is heading 1
<h1>This is heading 1</h1>

This is heading 2
<h2>This is heading 2</h2> This is heading 3
This is heading 4
<h5>This is heading 5</h5> This is heading 5
This is heading 6
</body>
</html>
2.3. HTML Paragraf
<html>
<body>
<p>Ini paragraph pertama.</p> Ini paragraph pertama.

<p>Ini paragraph kedua.</p>
<p>Ini paragraph pertama.</p> Ini paragraph kedua.
</body> Ini paragraph pertama.
</html>
<html>
<head>
<title>
Memahami paragraph </title>
</head>
<body>
<p> Tulisan ini merupakan paragraf pertama dalam document yang saya tulis </p>
<p> Baris ini merupakan paragraf kedua, silahkan buat tag paragraf sebanyak mungkin sebagai
contoh agar lebih mudah memahami tentang paragraf, dalam paragraf Anda dapat mengubah format
sebagian huruf atau karakter misalnya <I> text miring </I> <b> tebal</b></p>
</body>
</html>

2.4. HTML Link
<html>
<body>
<a href="D:\2009\IM TELKOM\PII\Meet-12
Lab\Hal-1.html">
Klik Disini</a>
</body>
</html>
Klik Disini di Link dengan Hal-1.html

2.5. HTML List
<html>
<body>
Numbered list:
<h4>Numbered list:</h4>
<ol>
1. Apples
<li>Apples</li>
2. Bananas
<li>Bananas</li>
3. Lemons
<li>Lemons</li>
4. Oranges
<li>Oranges</li>
</ol>
Letters list:
<h4>Letters list:</h4>
<ol type="A"> A. Apples
<li>Apples</li> B. Bananas
<li>Bananas</li> C. Lemons
<li>Lemons</li> D. Oranges
<li>Oranges</li>
</ol> Lowercase letters list:
<h4>Lowercase letters list:</h4> a. Apples

<ol type="a"> b. Bananas
<li>Apples</li> c. Lemons
<li>Bananas</li> d. Oranges
<li>Lemons</li>
<li>Oranges</li>
Roman numbers list:
</ol>
<h4>Roman numbers list:</h4> I. Apples

<ol type="I"> II. Bananas
<li>Apples</li> III. Lemons
<li>Bananas</li> IV. Oranges
<li>Lemons</li>
<li>Oranges</li> Lowercase Roman numbers list:
</ol>
i. Apples
<h4>Lowercase Roman numbers list:</h4> ii. Bananas
<ol type="i"> iii. Lemons
<li>Apples</li> iv. Oranges
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>

List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a term (an item) in a definition list
<dd> Defines a description of a term in a definition list
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
2.6. HTML Form dan Input
Field
<html>
<body>
<form action="">
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a
password field, the browser displays asterisks
or bullets instead of the characters.
</p>
</body>
</html>

Check Box
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle"
value="Bike">
<br />
I have a car:
value="Car">
<br />
I have an airplane:
value="Airplane">
</form>
</body>
</html>
Radio Botton
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the
button becomes checked, and all other
buttons with the same name become
unchecked
</p>
</body>
</html>

Drop Down Box
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Form Input and Submit Botton

<html>
<body>
<form name="input"
action="html_form_action.asp"
method="get">
Type your first name:

<input type="text" name="FirstName"
value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName"
value="Mouse" size="20">
<br>
<input type="submit"
value="Submit">
</form>
<p>
If you click the "Submit" button, you
will send your input to a new page
called html_form_action.asp.
</p>
</body>
</html>

2.7. HTML Dengan MS Word
Ketiklah paragraph text berikut ini di dalam MS Word, kemudian Save As .html atau
Webpage. Setelah itu jalankan dengan Internet Explorer
Hati-hati dengan Mytob dan serangan virus lokal melalui USB Drive
Mytob adalah "keluarga besar" virus yang selain mampu menyebar melalui email juga
menyebar melalui celah keamanan pada OS anda. Mytob sebenarnya merupakan penggabungan
dari dua virus hebat, yang pertama adalah SDBot/Spybot yang sangat populer memiliki kemampuan
menyebar melalui jaringan dengan sangat efektif "tetapi" SDBot tidak mampu menyebar melalui
email. Celakanya, ada pembuat virus yang menguasai MyDoom yang mampu menyebar melalui
email dengan sangat baik dan tertarik dengan SDBot ini dan membuat perpaduan kedua virus ini
menjadi virus yang paling banyak variannya sampai hari ini Mytob.
Anda perlu berhati-hati dengan Mytob karena selain mampu menyebar dengan sangat baik melalui
email dan jaringan seperti layaknya "nenek moyangnya" My Doom dan SDBot, Mytob juga
melumpuhkan program antivirus dan firewall dari komputer yang di infeksinya sehingga pertahanan
komputer anda jadi terbuka sama sekali. Mytob akan mencoba mengupdate dirinya (seperti antivirus)
dengan menghubungi channel tertentu dari IRC (Internet Relay Chat) dimana pembuatnya dapat
memberikan perintah baru bagi seluruh komputer yang terinfeksi Mytob dari IRC. Mytob juga
mengeksploitasi celah keamanan Microsoft Windows Local Security Authority Service Remote Buffer
Overflow
Hasilnya adalah sebagai berikut :

2.8. HTML Table
<html> <head>
<title>Data Penjualan</title></head><center>
<body><p><b><font size="4">TABEL PENJUALAN</font></b></p>
<table border="1">
<tr>
<td><b>No_Fak</b></td>
<td><b>Kode_Barang</b></td>
<td><b>Nama_Barang</b></td>
<td><b>Satuan</b></td>
<td><b>Harga</b></td>
<td><b>Jumlah</b></td></tr>
<tr>
<td>1</td>
<td>B001</td>
<td>Beras</td>
<td>Kg</td>
<td>3000</td>
<td>5</td></tr>
<tr>
<td>2</td>
<td>B002</td>
<td>Mie Sedap Goreng</td>
<td>Kardus</td>
<td>32000</td>
<td>2</td></tr>
</table>
</body></center></html>
Hasilnya :

2.9. HTML Frame
1. Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu
tampilan
2. Setiap dokumen ditampilkan dalam sebuah frame
3. Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame
yang akan ditampilkan
4. Di dalam frameset boleh ada frameset lain (beranak)
5. Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen
tersebut tidak mempunyai isi dokumen (tidak ada <body> </body>)
6. Skema dasar dokumen frameset :
<html>
<head>
<title>Judul dokumen</title>
</head>
<frameset>
<frame src="namafile1">
<frame src="namafile2">
...dst (atau frameset yang lain)
<noframes>
bagian ini ditampilkan jika browser tidak
mendukung frame
</noframes>
</frameset>
</html>
Ketiklah scrip berikut untuk memahami Frameset
<html>
<head>
<title>Document Frameset</title>
</head>
<frameset cols="33%,43%,23%" frameborder="1">
<frameset rows="*,200">
<frame src="page1.html" name="satu" scrolling="no"
frameborder="0">
<frame src="page2.html" name="dua" scrolling="yes"
noresize>
</frameset>

<frame src="page3.html" name="tiga"
frameborder="0">
<frame src="page4.html" name="empat"
frameborder="1">
<noframes>
Ada 4 halaman :
<ol>
<li><a href="page1.html">Halaman 1</a></li>
</ol>
</noframes>
</frameset>
</html>
Hasilnya Frameset adalah sebagai berikut :

2.10.HTML IFrame (Inline Frame)
• Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa

dokumen lain (anak)
• Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe
• Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen
• Skema dasar dokumen dengan iframe :
Ketiklah scrip berikut untuk memahami Iframe (Inline Frame)
<html>
<head>
<title>Kisah Sekolah</title>
</head>
<body>
<h1>Kisah-kisah di sekolah</h1>
Masa sekolah adalah masa yang menyenangkan
bagiku. Sebagian besar waktu hidupku sampai
saat ini dihabiskan untuk sekolah, dan aku sangat
menikmati saat-saat itu. Inilah
sebagian kisah-kisahku di sekolah.<p>
<iframe width='200' height='250'
src='sd.html'>
<a href="sd.html">Kisah SD</a>
</iframe>

src='smp.html' frameborder='0'>
<a href="smp.html">Kisah SMP</a>
</iframe>

src='sma.html' scrolling='no'>
<a href="smu.html">Kisah SMA</a>
</iframe>
<p>Semua pengalaman dan teman-teman
yang kudapat sungguh sangat mewarnai
hidupku dan memberikan pengaruh besar
terhadap diriku.
</body>
</html>

Hasil dari Iframe diatas adalah sebagai berikut :

Materi Praktek Pengenalan HTML AKUN-2013 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Praktek Pengenalan HTML AKUN-2013 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

MATERI PRAKTEK

PENGENALAN PEMROGRAMAN DENGAN

Materi Pengenalan Pemrograman dengan HTML

Dosen I Made Sondra Wijaya, ST., MT.

1. Tugas di Lab Komputer (individu) :

Pengenalan HTML Hal. 2 of 20

 HTML singkatan dari Hyper Text Markup Language.

HTML markup tags biasa disebut dengan HTML tags

HTML Documents = Web Pages

 HTML documents menjelaskan web pages

<h1>My First Heading</h1>

<p>My first paragraph</p>

Pengenalan HTML Hal. 3 of 20

 Text antara <html> dan </html> menjelaskan web page

Apa yang diperlukan untuk membuat HTML?

Pada praktek/ latihan membuat Web (HTML) kali ini :

 Tidak diperlukan HTML editor

HTM atau HTML Extension?

Bagaimana menjalankan HTML?

Bagaimana program HTML Online?

HTML Basic Document

Pengenalan HTML Hal. 4 of 20

Links, Anchors, and Image Elements

Pengenalan HTML Hal. 5 of 20

<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">

Pengenalan HTML Hal. 6 of 20

<textarea name="Comment" rows="60" cols="20"></textarea>

2.1. Halaman pertama

Bukalah Notepad dan ketiklah sebagai berikut :

Pengenalan HTML Hal. 7 of 20

<title>Halaman web saya yang

Lakukan hal yang sama untuk tugas-tugas berikutnya.

Pengenalan HTML Hal. 8 of 20

<h1>This is heading 1</h1>

2.3. HTML Paragraf

<p>Ini paragraph pertama.</p> Ini paragraph pertama.

Pengenalan HTML Hal. 9 of 20

Klik Disini di Link dengan Hal-1.html

Pengenalan HTML Hal. 10 of 20

<h4>Lowercase letters list:</h4> a. Apples

<h4>Roman numbers list:</h4> I. Apples

Pengenalan HTML Hal. 11 of 20

2.6. HTML Form dan Input

Pengenalan HTML Hal. 12 of 20

Pengenalan HTML Hal. 13 of 20

Form Input and Submit Botton

Type your first name:

Pengenalan HTML Hal. 14 of 20

Pengenalan HTML Hal. 15 of 20

Pengenalan HTML Hal. 16 of 20

Ketiklah scrip berikut untuk memahami Frameset

Pengenalan HTML Hal. 17 of 20

Hasilnya Frameset adalah sebagai berikut :

Pengenalan HTML Hal. 18 of 20

• Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa

Ketiklah scrip berikut untuk memahami Iframe (Inline Frame)

Pengenalan HTML Hal. 19 of 20

Pengenalan HTML Hal. 20 of 20

Anda mungkin juga menyukai