HTML 1 2103187008

LAPORAN
PRAKTEK SISTEM OPERASI

“PRAKTIKUM 1 HTML”
Disusun oleh:
LOVENDI ARDHANA MAHENDRA ADI (2103187008)
PROGRAM STUDI TEKNIK INFORMATIKA
DEPARTEMEN TEKNIK INFORMATIKA dan KOMPUTER

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
2018/2019
1. HTML Headings
<html>
<body>
<h1>This is Heading 1</h1>
<h2>Heading 2 is Smaller</h2>
<h3>Heading 3 is Smaller Still</h3>
</body>
</html>
Heading : <h> untuk menentukan ukuran huruf
2. HTML Paragraphs
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Paragraf : : <p> untuk membuat paragraph

3. HTML Links
<html>
<body>
<a href="http://www.w3schools.com">This is a link to the
w3schools Web site.</a>
</body>
</html>
Link : <a href </a> digunakan untuk menambahkan/memasukan link
4. HTML Images
<html>
<body>
<img src="w3schools.jpg" width="104" height="142" />
</body>
</html>
Images : <img src= /> digunakan untuk menabahkan image

5. HTML Headings
<h1>This is a Heading 1</h1>
Heading : Analisa: <h> </h> digunakan untuk membuat heading

6. HTML Rules (Lines)
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<hr />
</body>
</html>
Rules (Line) : Analisa: <p> </p> digunakan untuk membuat garis

7. HTML Comments
<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>
Comments : Analisa: <!-- -- > digunakan untuk menampilkan komentar.
8. HTML Line Breaks

<html>
<body>
<p>This is<br />a para-<br />graph with line breaks</p>
</body>
</html>
Line breaks : Analisa <br /> untuk membuat garis penyambung

9. HTML Output Tips
<html>
<body>
<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>
<p>Note that your browser ignores your layout!</p>
</body>
</html>
Output tips : Analisa: <p> untuk menampilkan output dari paragraf
10. HTML Output Tips

<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of
your browser window. If you resize the browser window, the
number of lines in this paragraph will change.
</p>
</body>
</html>
11. Text Formatting

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></
p>
</body>
</html>
Formatting : Analisa <strong> , <big>, <italic>, dll diguakan untuk megubah style huruf
12. Preformatted Text
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks and shows the text in a monospace font.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
13. “Computer Output” Tags

<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>Note:</b> These tags are often used to display computer/
programming code on the page.
</p>
</body>
</html>
Computer output tags : Analisa <code>, <kbd>, <var> untuk membuat tags kalimat yang
diinginkan
14. Address
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
</body>
</html>
Address : Analisa <address> menambhkan alamat

15. Abbreviations and Acronyms
<html>
<body>
<abbr title="United Nations">UN</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out
version when holding the mouse pointer over the acronym
or abbreviation.</p>
</body>
</html>
Abbreviations and acronyms : Analisa <abbr title> <acronyms> untuk memasukan kalimat
berupa singkatan
16. Text Direction

<html>
<body>
<p>
If your browser supports bidirectional override (bdo), the
next line will be written from the right to the left
(rtl):
</p>
<bdo dir="rtl">
Here is some backward text
</bdo>
</body>
</html>
Text directions : Analisa <bdo> digunakan untuk memasukan teks direksi

17. Quotations
<html>
<body>
A blockquote quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is
a long quotation. This is a long quotation. This is a long
quotation.
</blockquote>
<p><b>The browser inserts line breaks and margins for a
blockquote element.</b></p>
A short quotation:
<q>This is a short quotation</q>
<p><b>The q element does not render as anything special.</
b></p>
</body>
</html>
18. Deleted and Inserted Text

<html>
<body>
<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>
<p>
Most browsers will <del>overstrike</del> deleted text and
<ins>underscore</ins> inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as
plain text.
</p>
</body>
</html>
19. The HTML Style Attribute
<html>
<body style="background-color:Gray;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
Learn HTML and CSS with w3schools
40
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>
Background color : analisa : untuk menambahkan warna pada backround

20. Background Color
<html>
<body style="background-color:gray">
<h2>Look: Colored Background!</h2>
</body>
</html>
21. Background Color

<html>
<body bgcolor="gray">
<h2>Look: Colored Background!</h2>
<p>For future-proof HTML, use HTML styles instead:</p>
<p>style="background-color:gray"</p>
</body>
</html>
22. Font Family, Color, and Size
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:courier new; color:red; fontsize:20px;">A paragraph</p>
</body>
</html>
Font family, color and size : analisa : untuk mengubah font huruf, warna dan ukuran
23. Font Family, Color, and Size

<html>
<body>
<p><font size="2" face="Verdana">
This is a paragraph.
</font></p>
Chapter 8: HTML styles
43
<p><font size="5" face="Times" color="red">
This is another paragraph.
</font></p>
</body>
</html>
24. Text Alignment
<html>
<body>
<h1 style="text-align:center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page.
The heading above is aligned to the center of this page.
</p>
</body>
</html>
25. Text Alignment

<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page.
The heading above is aligned to the center of this page.</
p>
</body>
</html>
26. Open a Link in a New Browser Window

<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
Html link : analisa : untuk menambahkan sebuah link
27. The target Attribute

<html>
<body>
<a href=http://www.w3schools.com/ target="_blank">Visit
w3schools!</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
Open a link in a new browser windows : analisa : menambahkan link dan membukanya
dibrowser baru
28. Links on the Same Page

<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
29. Creating a mailto: Link
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20
again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20
to <b>ensure</b> that the browser will display your text
properly.
</p>
</body>
</html>
30. Creating a mailto: Link
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?cc=someoneelse@
microsoft.com&bcc=andsomeoneelse2@microsoft.
com&subject=Summer%20Party&body=You%20are%20invited%20
to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20
to <b>ensure</b> that the browser will display your text
properly.
</p>
</body>
</html>
31. Creating an Image Link
<html>
<body>
<p>Create a link attached to an image:
<a href="default.htm">
<img src="smiley.gif" alt="HTML tutorial" width="32"
height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="default.htm">
<img border="0" src="smiley.gif" alt="HTML tutorial"
width="32" height="32" />
</a></p>
</body>
</html>
32. img Tag and the src Attribute

<html>
<body>
<p>
An image:
<img src="constr4.gif" width="144" height="50" />
</p>
</body>
</html>
33. Insert Images from Different Locations
<html>
<body>
<p>An image from another folder:</p>
<img src="/images/chrome.gif" width="33" height="32" />
<p>An image from w3schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.
jpg" width="104" height="142" />
</body>
</html>
34. Background Images
<html>
<body background="background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</
p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
35. Aligning Images
<html>
<body>
<p>The text is aligned with the image
<img src="hackanm.gif" align="bottom" width="48" height="48"
/>
at the bottom.</p>
<img src="hackanm.gif" align="middle" width="48" height="48"
/>
in the middle.</p>
<img src="hackanm.gif" align="top" width="48" height="48" />
at the top.</p>
<p><b>Note:</b> The bottom alignment is the default!</p>
</html>
</body>
36. Aligning Images
<html>
<body>
<p>This image appears
<img src="hackanm.gif" width="48" height="48" />
exactly where it is placed in the code.</p>
<p><img src="hackanm.gif" width="48" height="48" />
This image appears exactly where it is placed in the code.</
p>
<p>This image appears exactly where it is placed in the
code.
<img src="hackanm.gif" width="48" height="48" /></p>
</body>
</html>
37. Floating Images

<html>
<body>
<p>
<img src="hackanm.gif" align="left" width="48" height="48"
/>
A paragraph with an image. The align attribute of the image
is set to "left". The image will float to the left of this
text.
</p>
<p>
<img src="hackanm.gif" align="right" width="48" height="48"
/>
A paragraph with an image. The align attribute of the image is set to "right". The image will float
to the right of
this text.
</p>
</body>
</html>
38. Adjusting Image Sizes

<html>
<body>
<p>
<img src="hackanm.gif" align="left" width="48" height="48"
/>
A paragraph with an image. The align attribute of the image
is set to "left". The image will float to the left of this
text.
</p>
<p>
<img src="hackanm.gif" align="right" width="48" height="48"
/>
A paragraph with an image. The align attribute of the image is set to "right". The image will float
to the right of
this text.
</p>
</body>
</html>
39. Alt Attribute
<html>
<body>
<p>
An image:
<img src="../constr4.gif" alt=”Site_Under_Construction”
width="200" height="50" />
</p>
</body>
</html>
40. Creating an Image Map

<html>
<body>
<p>Click on the sun or on one of the planets to watch it
closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.
htm" />
<area shape="circle" coords="90,58,3" alt="Mercury"
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm" />
</map>
</body>
</html>
41. Creating HTML Table

<html>
<body>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</html>
</body>
<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</html>
</body>

<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
44. Table borders
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
45. Table With no Borders

<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>This table also has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
46. Headings in the Table

<html>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1855</td>
</tr>
</table>
</body>
</html>
47. Empty cell in a table
<html>
<body>
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
48. Table with a caption

<html>
<body>
<h4>This table has a caption, and a thick border:</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
49. Call spanning multiple columns
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
50. Tag inside a table
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
51. Call padding

<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
52. Call spacing

<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
53. Table background color and image

<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="gray">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1" background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
54. Call backround color and image
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="gray">First</td>
<td>Row</td>
</tr>
<tr>
<td background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
55. Aligning call content
<html>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Food</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
56. Frame attribute
<html>
<body>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<body>
<html>
57. Frame attribute
<html>
<body>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
58. Frame attribute

<html>
<body>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
59. Using frame and boarder to control table boarder
<html>
<body>
<table frame="hsides" border="3">
<tr>
<td>First row</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>First row</td>
</tr>
</table>
</body>
</html>
60. Unordered lists
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
61. Unordered lists

<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
</body>
</html>
62. Ordered lists
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
63. Different types of ordering
<html>
<body>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
64. Ordered lists

<html>
<body>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
65. Definition lists
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
66. Nested lists
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
67. Nested lists

<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
68. Input tag and attribut

<html>
<body>
<form action="">
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
</body>
</html>
69. Check boxes
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body>
</html>
70. Radio buttons
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
</body>
</html>
71. Drop-down list
<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>
72. Text area

<html>
<body>
<textarea rows="10" cols="30"> The cat was playing in the
garden. </textarea>
</body>
</html>
73. Buttons
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
74. Fieldset
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is
too old.
</p>
</body>
</html>
75. Form examples

<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>
76. Form with check boxes

<html>
<body>
method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike"
checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>
If you click the "Submit" button, you send your input to a
new page called html_form_action.asp.
</p>
</body>
</html>
77. Form with radio buttons
<html>
<body>
method="get">
Male:
<input type="radio" name="Sex" value="Male"
checked="checked">
<br>
Female:
<input type="radio" name="Sex" value="Female">
<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>
78. Send e-mail from a form
<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
79. Color values
<html>
<body>
<p style="background-color:#C0C0C0">
Color set by using hex value
</p>
<p style="background-color:rgb(192,192,192)">
Color set by using rgb value
</p>
<p style="background-color:gray">
Color set by using color name
</p>
</body>
</html>

HTML 1 2103187008

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 1 2103187008

Uploaded by

Copyright:

Available Formats

LAPORAN

PRAKTEK SISTEM OPERASI

LOVENDI ARDHANA MAHENDRA ADI (2103187008)

PROGRAM STUDI TEKNIK INFORMATIKA

DEPARTEMEN TEKNIK INFORMATIKA dan KOMPUTER

Heading : <h> untuk menentukan ukuran huruf

Paragraf : : <p> untuk membuat paragraph

Link : <a href </a> digunakan untuk menambahkan/memasukan link

Images : <img src= /> digunakan untuk menabahkan image

Heading : Analisa: <h> </h> digunakan untuk membuat heading

Rules (Line) : Analisa: <p> </p> digunakan untuk membuat garis

Comments : Analisa: <!-- -- > digunakan untuk menampilkan komentar.

8. HTML Line Breaks

Line breaks : Analisa <br /> untuk membuat garis penyambung

Oh, bring back my Bonnie to me.

Output tips : Analisa: <p> untuk menampilkan output dari paragraf

10. HTML Output Tips

11. Text Formatting

13. “Computer Output” Tags

Address : Analisa <address> menambhkan alamat

16. Text Direction

Text directions : Analisa <bdo> digunakan untuk memasukan teks direksi

18. Deleted and Inserted Text

Background color : analisa : untuk menambahkan warna pada backround

21. Background Color

23. Font Family, Color, and Size

25. Text Alignment

26. Open a Link in a New Browser Window

27. The target Attribute

28. Links on the Same Page

32. img Tag and the src Attribute

37. Floating Images

38. Adjusting Image Sizes

40. Creating an Image Map

41. Creating HTML Table

43. Creating HTML Table

45. Table With no Borders

46. Headings in the Table

48. Table with a caption

51. Call padding

52. Call spacing

53. Table background color and image

58. Frame attribute

61. Unordered lists

64. Ordered lists

67. Nested lists

68. Input tag and attribut

72. Text area

75. Form examples

76. Form with check boxes

You might also like