HTML

TEKNIK INFORMATIKA
UNIVERSITAS WIJAYA PUTRA

text yang lebih dari sekedar teks (‘hyper’-text). Maksudnya selain berfungsi
sebagai teks biasa, sebuah teks di dalam HTML juga bisa berfungsi sebagai
penghubung ke halaman lain atau dikenal dengan istilah link
dalam bahasa inggris “mark” artinya penanda. Di dalam HTML, kita akan
menggunakan tanda-tanda khusus seperti <p>, <a>, atau <li>. Tanda ini
diperlukan untuk mengatur format dan membuat struktur halaman web.
dalam bahasa inggris “language” artinya bahasa.

Just Language, but not Programming Language
• HTML is not a programming language
• It is a markup language, which means it is a system for
identifying and describing the various components of a
document such as headings, paragraphs, and lists.
• HTML is used to describe the content in a web page
• You don’t need programming skills, only patience and common
sense, to write HTML.
• HTML berfungsi untuk membuat struktur dari sebuah
website.
• HTML digunakan untuk menandai bagian mana yang akan
menjadi judul artikel, bagian mana yang berfungsi sebagai
isi artikel, atau bagian mana yang butuh disajikan dalam
bentuk tabel.
HTML 1
konsep HTML yang telah ada selama ini, yakni kode yang digunakan untuk
membuat struktur halaman web. Untuk fitur ini, HTML5 menambahkan berbagai
tag baru seperti <header>, <footer>, <aside>, <figure>, <article>, <audio>,
dan <video>
HTML5 API (Application Program Interface) adalah modul teknologi yang relatif baru.
Untuk dapat menggunakannya, kita harus menggunakan bahasa pemrograman
JavaScript. Beberapa fitur HTML5 API adalah: Geolocation, Drag/Drop, LocalStorage,
Web Workers dan Server-Sent Events.
sebenernya merupakan teknologi tersendiri, namun sering

dikira menjadi satu dalam HTML5
• HTML5 lebih dari sekedar bahasa markup untuk membuat struktur halaman web
• Tapi, jika anda adalah pemula yang ingin belajar pemrograman web, HTML yang
sebaiknya anda kuasai adalah HTML5 markup, yakni bagian dari HTML5 yang
berurusan dengan struktur halaman
Web browser adalah program yang akan menerjemahkan kode-kode HTML dan
menampilkannya menjadi halaman website
Mari kita menulis manual kode program dengan Teks Editor 

• Install teks editor Anda (misal Notepad++)
• link download : http://notepad-plus-plus.org/download
• Persiapkan folder dimana file-file HTML akan diletakkan
• Misal di folder belajar_html di drive D maka lokasinya D:\belajar_html
• Buat file notepad++ baru, kemudian ketikkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>Hello World…</p>
</body>
</html>
• Simpan di folder D:\belajar_html dengan nama hello_world.html

D://belajar_html/hello_world.html
berfungsi untuk memberi tahu web browser apa dan bagaimana sebuah teks harus
ditampilkan. Sebagaimana yang telah kita pelajari, file HTML hanyalah sebuah file text
biasa. Web browser lah yang akan memproses file tersebut dan menampilkan hasilnya.
<html>, <head>, <body>, <p>
Atribut adalah informasi tambahan yang ditulis pada tag pembuka. Fungsi dari atribut ini
bermacam-macam tergantung nilai dan pada tag mana ia ditempatkan. Beberapa atribut
bersifat umum dan bisa digunakan dalam seluruh tag (dikenal sebagai global atribut),
tetapi kebanyakan hanya berfungsi untuk tag tertentu saja.
Atribut terdiri dari 2 bagian, yaitu nama dan nilai, dapat ditulis name=“value”
element adalah satu bagian utuh yang terdiri dari tag, atribut, dan seluruh teks yang
berada di antara tag pembuka dan penutup.
• berfungsi untuk menunjukkan bagian penting pada halaman web.
• Ada 6 tingkatan : h1, h2, h3, h4, h5, h6 dimana Ukuran H1 adalah yang terbesar
• Penggunaan heading:
• h1 : heading yang digunakan untuk penulisan judul utama dari dokument
• h2 : heading yang digunaakan sebagai sub h1
• h3 : heading yang digunakan sebagai sub h2
• h4, h5, h6 : terserah pada programmer bagaimana digunakan
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
<p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>
<tag>ini text </tag>
• Tabel merupakan struktur yang digunakan untuk menampilkan
informasi dalam bentuk baris dan kolom.
• Tag yang terlibat dalam pembuatan table pada HTML:
• <table> merupakan tag pembuka dalam membuat sebuah table pada html,
tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan
baik.
• <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk
membuat baris dalam table HTML
• <td> atau dikenal dengan table data merupakan tag yang digunakan untuk
membuat kolom dalam baris dan untuk menampilkan data dalam table
• <th> untuk membuat table head atau bagian kepala pada table
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris 1 / kolom 1</td>
</tr>
<tr>
</tr>
<tr>
<td>baris 3/ kolom 1</td>
</tr>
</table>
</body>
</html>
• Atribut rowspan digunakan untuk menggabungkan baris pada tabel
• Atribut colspan digunakan untuk menggabungkan kolom pada tabel
<tr>
<!DOCTYPE html>
<td>Robby</td>
<html lang="en">
<td>76</td>
<head>
<td>80</td>
<meta charset="UTF-8">
<td>81</td>
<title>Mengenal Tabel HTML</title>
</tr>
</head>
<tr>
<body>
<td>Rendi</td>
<table border="1">
<td>84</td>
<tr>
<td>70</td>
<th rowspan="2">Nama</th>
<td>75</td>
<th colspan="3">Nilai</th>
</tr>
</tr>
<tr>
<tr>
<td>Alfian</td>
<th>Kimia</th>
<td>96</td>
<th>Fisika</th>
<td>70</td>
<th>Biologi</th>
<td>71</td>
</tr>
</tr>
</table>
</body>
</html>
<a href=“www.yahoo.com">klik disini</a>
<!DOCTYPE html>
<html>
<head>
<title>belajar memubuat hyperlink</title>
</head>
<body>
ini adalah contoh alamat absolute <a href="https://www.yahoo.com">klik disini</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>belajar memubuat hyperlink</title>
</head>
<body>
ini adalah contoh alamat alternatif <a href="part7.html">klik disini</a>
</body>
</html>
• List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang
digunakan untuk menampilkan data secara berurutan ke bawah.
• Dalam HTML penulisan list menggunakan tag <li>.
• Dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan
yaitu ordered list dan unordered list.
• ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka.
tag yang digunakan dalam ordered list ini yaitu <ol>
• unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau
kotak di awalnya. tag yang diguanakan untuk membuat unordered list yaitu <ul>
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<li>belajar HTML</li>
<li>belajar PHP</li>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
</ul>
</body>
</html>
• form merupakan tempat penginputan data sebelum diproses oleh sistem.
• salah satunya adalah form login, form comment, form data user, dan lain
sebagainya.
• untuk proses penginputan data dari form akan kita bahas di materi PHP, MYSQL,
dan JavaScript.
• tag yang digunakan untuk membuat form ini adalah <form> yang didalamnya bisa
berupa <input>, <textarea>, <options> dan <select>.
Tag <form>
• Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang
akan dikirim
• atribut pertama berupa alamat dari sebuah halaman untuk memproses data
inputan
• atribut kedua berupa method, method menjelaskan bagaimana data yang akan
dikirim oleh web browser. nilai dari method ini biasanya get dan post.
<form action="proses.php" method="post">

.....isikan dengan .....
</form>
Tag <input>
• tag input merupakan tag yang akan digunakan dalam form pengisian.
• tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks,
password, checkbox, radiobutton, sampai dengan tombol submit berada dalam tag
<input>
Tag <textarea>
• <textarea> merupakan tag yang sama fungsinya dengan inputan text, hanya saja
pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya.
• untuk mengatur panjang dan banyak baris pada textarea ini dapat menggunakan
CSS
<textarea>
isika pesan anda
</textarea>
Tag <select>
• <select> merupakan tag yang digunakan untuk user memilih data yang sudah
disediakan.
• Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk
membuat pilihan.
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
Atribut name
• Atribut name merupakan atribut yang nilainya akan digunakan pada saat
memproses data oleh web server.
nama : <input type="text" name="nama"><br/>

alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
<body>
<form>
nama : <input type="text" name="nama"><br/>
alamat : <input type="text" name="alamat"></br/>
password : <input type="password" name="pass"><br/>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jk" value="perempuan" />
Perempuan
<br/>
bahas pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
<br/>
kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
<br/>
pesan anda :
<textarea>
</textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>
• Selain menyediakan kode
warna, html juga digunakan
untuk menyediakan kode
simbol
• Untuk menampilkan gambar dengan HTML anda bisa menggunakan tag <img> kemudian
masukkan atribut <src> pada tag <img>
• atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini di
gunakan untuk pemanggilan lokasi dan nama file gambar.
• jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan
gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan
tersebut pada atribut src ini.
• tetapi jika file gambar berada pada folder yang berbeda dengan file html yang
menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya
"nama_folder/file_gambar"
• jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa
menambahkan perintah "../"
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML</h1>
<img src=“java.png">
</body>
</html>
• Buatlah 1 buah halaman web yang berisi :
• Tabel
• List
• Form
• Gambar
• Hyperlink
• Teks
• Format Layout Bebas
• Tulis nama lengkap Anda pada salah satu bagian di HTML page tsb!

HTML

Diunggah oleh

Informasi Dokumen

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

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

TEKNIK INFORMATIKA

UNIVERSITAS WIJAYA PUTRA

dalam bahasa inggris “language” artinya bahasa.

sebenernya merupakan teknologi tersendiri, namun sering

Mari kita menulis manual kode program dengan Teks Editor 

• Simpan di folder D:\belajar_html dengan nama hello_world.html

<form action="proses.php" method="post">

nama : <input type="text" name="nama"><br/>

Anda mungkin juga menyukai