Tugas 1 Implementasi Tag HTML-Alfany Nurulita-18403188

Nama : Alfany Nurulita Kelas : IRM-R44/18
NPM : 18403188 Pemrograman Web II (Pertemuan 4)
Tutorial implementasi Tag HTML
A. Heading
1. Langkah pertama, buka notepad kemudian masukan code berikut.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Maka tampilan pada notepad tampak seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :
File Name : heading.html
Save as type : All files
3. Langkah selanjutnya buka file yang telah disimpan tadi menggunakan Firefox,
Chrome atau sejenisnya, maka akan tampil seperti gambar berikut.
B. Tag Judul
1. Untuk membuat tag judul, pertama buka notepad, kemudian masukkan code berikut.
Bila masih pada jendela notepad yang sama, anda dapat mengklik New, atau Ctrl+N
untuk menampilkan lembar yang baru.
<!DOCTYPE html>
<html>
<body>
<h1>This is Heading 1</h1>

<p>This is Some Text.</p>
<hr>
<h2>This is Heading 2</h>

<p>This is Some Other Text.</p>
<hr>
<h2>This is Heading 2</h>

<p>This is Some Other Text.</p>
</body>
</html>
Maka tampilan pada notepad akan seperti berikut :

File Name : judul.html
Seperti pada instruksi A.1
C. Tag Paragraf
1. Untuk membuat tag paragraf, pertama buka notepad, kemudian masukkan code
berikut. Bila masih pada jendela notepad yang sama, anda dapat mengklik New, atau
Ctrl+N untuk menampilkan lembar yang baru.
<!DOCTYPE html>
<html>
<body>
<p>In HTML space and new lines are ignored</p>

<br>example
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>

File Name : paragraf.html
Seperti pada gambar instruksi A.1
D. Tag Style
1. Untuk membuat tag style, pertama buka notepad, kemudian masukkan code berikut.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:left;">Left Heading.</p>
</body>
</html>

File Name : style.html
E. Tag Formating
1. Untuk membuat tag formating, pertama buka notepad, kemudian masukkan code
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p><u>Tis text is underlined</u></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Maka tampilan pada notepad kan seperti berikut :

File Name : formating.html
F. Tag Gambar
1. Untuk membuat tag gambar, pertama buka notepad, kemudian masukkan code
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt atribute should reflect the image content, so user who cannot see the
image gets an understanding of what the image contains:</p>
<img src="Japan.jpg" alt="Night in Japan" width="300" height="300">
</body>
</html>

File Name : gambar.html
Width dan height menentukan ukuran gambar, jadi anda dapat merubah ukuranya
sesuai keiinginan.
G. Tag Form
1. Untuk membuat tag form, pertama buka notepad, kemudian masukkan code berikut.
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input
element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari and IE9 (and
earlier).</p>
</body>
</html>

File Name : form.html
H. Tag Tabel
1. Untuk membuat tag tabel, pertama buka notepad, kemudian masukkan code berikut.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black;
padding: 5px;}table {border-spacing: 5px;}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border spacing to 5px.</p>
</body>
</html>

File Name : tabel.html
Gambar dibawah ini menunjukkan apabila border spacing diubah menjadi 5px, jarak
antar garis menjadi lebih kecil.
I. Tag Daftar/List
1. Untuk membuat tag tabel, pertama buka notepad, kemudian masukkan code berikut.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered list with lowercase Roman Numbers</h2>
<ol type="i">
<li>Cofee</li>
<li>Tea</li>
<li>MIlk</li>
</ol>
</body>
</html>

File Name : list.html

Tugas 1 Implementasi Tag HTML-Alfany Nurulita-18403188

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

Tugas 1 Implementasi Tag HTML-Alfany Nurulita-18403188

Diunggah oleh

Hak Cipta:

Format Tersedia

Nama : Alfany Nurulita Kelas : IRM-R44/18

NPM : 18403188 Pemrograman Web II (Pertemuan 4)

Tutorial implementasi Tag HTML

1. Langkah pertama, buka notepad kemudian masukan code berikut.

Maka tampilan pada notepad tampak seperti berikut :

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h>

<h2>This is Heading 2</h>

Maka tampilan pada notepad akan seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

<p>In HTML space and new lines are ignored</p>

My Bonnie lies over the ocean.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

Maka tampilan pada notepad akan seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

<h1 style="text-align:center;">Centered Heading</h1>

Maka tampilan pada notepad akan seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

<p><b>This text is bold</b></p>

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

<img src="Japan.jpg" alt="Night in Japan" width="300" height="300">

Maka tampilan pada notepad akan seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

<h2>The datalist Element</h2>

Maka tampilan pada notepad akan seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

<p>Try to change the border spacing to 5px.</p>

Maka tampilan pada notepad tampak seperti berikut :

<h2>Ordered list with lowercase Roman Numbers</h2>

Maka tampilan pada notepad tampak seperti berikut :

2. Jika sudah, simpan di folder yang diinginkan dengan pilihan :

Anda mungkin juga menyukai