Scribd
Upload
81 views

Tugas 1 Implementasi Tag HTML

This document provides a tutorial on implementing various HTML tags. It includes 9 sections that demonstrate how to use tags for headings, paragraphs, styles, images, forms, tables, and lists. The user is instructed to copy code snippets into Notepad and save as files with descriptive names to see how each tag is rendered.

Uploaded by

Uweng
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
81 views

Tugas 1 Implementasi Tag HTML

This document provides a tutorial on implementing various HTML tags. It includes 9 sections that demonstrate how to use tags for headings, paragraphs, styles, images, forms, tables, and lists. The user is instructed to copy code snippets into Notepad and save as files with descriptive names to see how each tag is rendered.

Uploaded by

Uweng
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Tutorial Implementasi TAG HTML

1. Heading
Siapkan notepad lalu implementasikan tag html berikut di notepad. Dan simpan lalu beri
nama file Heading.html dengan save type: All Files

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
</body>
</html>

Maka hasilnya
2. Tag Judul
Implementasikan tag berikut dinotepad lalu save dengan
nama judul.html

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>


<p>THis is some other text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>

</body>
</html>
3. Tag Paragraf
Implementasikan tag berikut dinotepad lalu save dengan
nama paragraf.html

<!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>
4. Tag Style
Implementasikan tag berikut dinotepad lalu save dengan
nama style.html

<!DOCTYPE html>
<html>
<body>

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


<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>
5. Tag Formating
Implementasikan tag berikut dinotepad lalu save dengan
nama formating.html

<!DOCTYPE html>
<html>
<body>

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


<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>
6. Tag Gambar
Implementasikan tag berikut dinotepad lalu save dengan
nama gambar.html

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot
see the image gets an understanding of what the image contains:</p>

<img src="Desert.jpg" alt="Flowers in Chania" width="300" height="300">

</body>
</html>
7. Tag From
Implementasikan tag berikut dinotepad lalu save dengan
nama form.html

<!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>

<from acion="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Fiferfox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</from>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and
earlier).</p>

</body>
</html>

8. Tag Table
Implementasikan tag berikut dinotepad lalu save dengan
nama tabel.html

<!DOCTYPE html>
<html>
<head>
<style>
table, th, t {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
<tr>
<th>Fristname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jon</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

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

</body>
</html>
9. Tag Daftar/List
Implementasikan tag berikut dinotepad lalu save dengan
nama list.html

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="1">
<li>Coffee</i>
<li>Tea</i>
<li>Milk</li>
</ol>

</body>
</html>
Sekian tutorial cara mengimplementasikan Tag HTML…

You might also like