Laporan Tentang Pengenalan HTML
Pemograman Web 1
DiSusun Oleh:
Kevin
Rivaldy Sosang
H171600512
Politeknik
Pertanian Negeri Samarinda
2018 / 2019
Di dalam bagian ini biasanya dimuat tag <tittle>
yang menampilkan judul dari halaman web.
Code:
<head>
<title>Welcome to
eepis-its</title>
</head>
2. Body
Tag
<body> di gunakan untuk menampilkan text, image link dan semua yang akan
di tampilkan pada web page.
Code:
<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>
3. Elemen dasar – Block level
Block level
element: terdapat 6 tingkatan, yaitu H1 sampai H6.
Code:
<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>
4. Elemen dasar – Paragraph ( P )
Menampilkan
teks dalam bentuk paragraf.
Code:
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan telekom PENS ITS.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
5. Elemen dasar – list item (li)
Unordered
list <ul>: List item tidak berurutan (bullet).
Code:
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
6. list
item (li) – continued
Ordered
list <ol>: List item berurutan.
Code:
<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>
7. Pemformatan
Page – Cont. 2
Code:
<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>
8. Pembuatan
Tabel
Untuk
membuat tabel : <tabble>
Cell-nya dengan tag <td>
Code :
<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>
9. Pembuatan
Tabel – Cont. 1
·
Untuk membuat baris cell : <tr>
·
Untuk title tabel : <caption>
Code:
<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>
10. Pemformatan
Tabel – Cont. 1
Code:
<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>
11. Head
Forms
<html>
<body>
<h2>Form
Data Diri</h2>
<form
action="/action_page.php">
Nama
Depan:<br>
<input
type="text" name="Nama Depan" value=" ">
<br>
Nama
Belakang:<br>
<input
type="text" name="Nama Belakang" value=" ">
<br>
</form>
<h2>Jenis
Kelamin</h2>
<form>
<input
type="radio" name="gender" value="Laki - Laki"
checked> Laki - Laki<br>
<input
type="radio" name="gender" value="Perempuan"> Perempuan<br>
<input
type="radio" name="gender" value="Lainya">
Lainya
</form>
<br>
<input
type="submit" value="simpan"
<br><br>
</body>
</html>
12. Hasil Quiz HTML
