belajar mengenal script-script HTML untuk mendesgn web menggunakan notepad
HTML Tags
HTML markup tags seringkali disebut HTML
tags
— HTML tags merupakan keywords yang
dilingkupi dengan angle brackets seperti <html>
— HTML tags biasanya
come in pairs seperti <b> dan
</b>
— Tag yang pertama dalam satu rangkaian menunjukkan start tag, tag yang kedua merupakan
end tag
— Start tag dan end tags biasa juga disebut opening
tags dan closing tags
HTML Documents
= Web Pages
¢ HTML documents describe web pages
¢ HTML documents contain HTML tags dan plain text
¢ HTML documents juga disebut web
pages
¢ Tujuan dari suatu web browser (mis. Internet Explorer,
Firefox, Opera, dll) adalah untuk
membaca HTML documents dan menampilkannya sebagai web pages. Browser tidak akan menampilkan HTML tags, melainkan
menggunakan tags untuk menginterpretasikan content dari pages:
<html>
<body>
<h1>My first
heading1</h1>
<p>My first paragraph</p>
</body>
</html>
HTML Tags
[1]
<html>
<body>
<h1>My first heading1</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Tags
[2]
HTML Headings
¢ HTML headings are defined with the <h1>
to <h6> tags.
¢ Example
<h1>This is a
heading1</h1>
<h2>This is a
heading2</h2>
<h3>This is a
heading3</h3>
HTML Paragraphs
¢ HTML paragraphs are defined with the <p> tag.
¢ Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Tags
[3]
HTML Links
¢ HTML links are defined with the <a>
tag.
¢ Example
HTML Images
¢ HTML images are defined with the <img> tag.
¢ Example
<img
src="cempakur.jpg" width="104" height="142" />
HTML Tags
[4]
HTML
Tables
¢ Example
<table
border="1">
<tr>
</tr>
<tr>
</tr>
</table>
<td>row 1, cell 1</td>
<td>row
1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
HTML Tags
[5]
Headings in a Table
¢ Headings in a table
are defined with the <th>
tag.
<table border="1">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<th>Heading</th>
<th>Another Heading</th>
<td>row 1, cell 1</td>
<td>row
1, cell 2</td>
<td>row 2, cell 1</td>
<td>row
2, cell 2</td>
HTML Tags
[6]
Unordered Lists
¢ An unordered list starts with the <ul>
tag.
Each list item
starts with the <li> tag.
<ul>
</ul>
<li>Coffee</li>
<li>Milk</li>
Ordered Lists
¢ An ordered list starts with the <ol> tag. Each
list
item
starts with the <li> tag.
<ol>
</ol>
<li>Coffee</li>
<li>Milk</li>
HTML Tags
[7]
Buat file
baru,
beri nama:
second<namasendiri>.html
-----------------------------------------------------------------------
Forms
¢ A form is defined with the
<form> tag.
<form>
.
input elements
.
</form>
HTML Tags
[8]
Input
¢ The most used form
tag is the <input>
tag.
1. Text Fields:
type letters,
numbers, etc. in a form.
<form> First name:
<input
type="text" name="firstname" />
<br
/>
Last name:
<input
type="text" name="lastname" />
</form>
Praktikum – HTML Tags
[9]
Input
¢ The most used form
tag is the <input>
tag.
2. Radio Buttons:
when you
want the user to select one of a limited number
of choices.
<form>
<input
type="radio" name="sex"
value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
HTML Tags
[10]
Input
¢ The most used form
tag is the <input>
tag.
3. Checkboxes:
when you
want the user to select one
or more options of a limited number
of choices.
<form>
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>
