HTML
Prepared by Salwa binti Abdul Kohar
Powerpoint Templates Pusat Latihan Kemahiran E-Access
Page 1
What is HTML?
HTML = Hyper Text Markup Language
It is the standard format for documents on the World Wide Web. Just as Microsoft Word uses documents with the ".doc" format and Word Perfect uses ".wpd", browsers read documents with the ".htm" or ".html" format
HTML is the basic coding of building up web pages HTML digunakan untuk memaparkan informasi dalam halaman web Powerpoint Templates Page 2
What is HTML? (cont)
Hyper is the opposite of linear, or simply put "extremely active. Text is what you create HTML with, just like a word processor without all the fancy formatting.
Mark up is the process of creating the HTML, you "mark it up" in a word processor. This loosely means, "to write".
Language is missleading. It's not a cryptic computer language that you have to learn an entirely new alphabet to understand. It uses plain english. It is a language that your browser understands, and one that you can learn to understand without much effort.
Powerpoint Templates Page 3
HTML File Look Like
Powerpoint Templates
Page 4
HTML File Look Like (cont)
Powerpoint Templates
Page 5
Creating a HTML File
1) Open Notepad / Word pad 2) Click on File -> Save as
3) In the File name pull-down box, type in [Link]
4) Click on Save 5) Type in content for your file
6) Once you finished the content, click on File ->Save
Powerpoint Templates Page 6
HTML Document Structure
<html> <head> <title>Page Title Goes Here</title> </head> <body> content goes here </body> <html>
Powerpoint Templates
Page 7
Basic Concept of HTML Language
Comments
<!-- Fig. 4.1: [Link] --> <!-- Our first Web page --> <html> <head> </head>
Head section
Start tag
<body>
Body section
</body> </html>
end tag
Powerpoint Templates
Page 8
HTML Tags
Example : <b>, <font>, <title>, <p> and ect Tag usually goes with pair : an open tag <b> an end tag </b> Single tag : <hr>, <br> Tags are NOT case sensitive
Powerpoint Templates
Page 9
Basic HTML Element
Headings
There are 6 common heading commands
The output :
Powerpoint Templates
Page 10
Basic HTML Element (cont)
Background
Bgcolor Specifies a background-color for HTML page Example : <body bgcolor=#000000>
<body bgcolor=rgb(0,0,0)>
<body bgcolor=black> Background Specifies a background-image for a HTML page Example : <body background=[Link]> <body background=[Link]
Powerpoint Templates
Page 11
Basic HTML Element (cont)
Text
Put text on a webpage Example : <p>Welcome to my page. Hope you enjoy it!</p> The output : Welcome to my page. Hope you enjoy it! Put text in center of a page Example : <center>Hello</center> The output : Hello Put text on the right of a page Example : <p align=right>Hello</p> The output : Hello
Powerpoint Templates Page 12
Basic HTML Element (cont)
Format text tags for text formating
<b>..</b> : bold text <i> .. </i> : italic text <em> .. </em> : italic text <u> .. </u> : underline text <center> . </center> : center document <big> .. </big> : untuk ukuran yang lebih besar dari normal <small> .. </small> : untuk ukuran yang lebih kecil dari normal <strike> .. </strike> : untuk memberi garis di tengah text <sup> .. </sup> : superscript text <sub> .. </sub> : subscript text
Powerpoint Templates
Page 13
Basic HTML Element (cont)
Font
To change text size Example : <font size=5>Hello</font> The output : Hello To change text color Example : <font color=red>Hello</font> The output : Hello Using both Example : <font size=5 color=red>Hello</font> The output : Hello
Powerpoint Templates Page 14
Basic HTML Element (cont)
List
Ordered list Unordered list Example : <ol> Example : <ul> <li>Sunday</li> <li>Sunday</li> <li>Monday</li> <li>Monday</li> <li>Tuesday</li> <li>Tuesday</li>
</ul>
</ol>
The output : Sunday Monday Tuesday
The output : 1. Sunday 2. Monday 3. Tuesday
Powerpoint Templates
Page 15
Basic HTML Element (cont)
Create Links
A Hypertext link Example : < a href=[Link] Home</a> The output : IUSB Home A Email link Example : < a href=[Link] me</a> The output : Email me
Powerpoint Templates
Page 16
Basic HTML Element (cont)
Table
<table border="1"> <tr> <th>Heading</th> The output : <th>Heading2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> <tr> <td>row 3, cell 1</td> <td>row 3, cell 2</td> </tr> Powerpoint Templates </table>
Page 17
Basic HTML Element (cont)
Image Format
There are 3 kinds image format that often used : GIF (Graphical Interchange Format) (.gif) JPEG (Joint Photographic Expert Image) (.jpg) BMP (Bitmap) (.bmp) Example :
Powerpoint Templates
Page 18
Basic HTML Element (cont)
Inserting Image
Place all images in the same directory / folder where your
web pages are :
<img src> is a single text
Example : <img src=[Link]> The output : Turn an image into a hyperlink Example : <a href=[Link] src=[Link]></a> Output :
Powerpoint Templates
Page 19
Basic HTML Element (cont)
Image Size
Computer images are made up of pixels
<img height=100 width=150 src=[Link]>
height width
Powerpoint Templates
Page 20
Basic HTML Element (cont)
Forms
A form is an area that can contain form elements
Commonly used form elements includes : Text fields Radio buttons Checkboxes Submit buttons
Syntax Example : <form> </form>
Powerpoint Templates
Page 21
Basic HTML Element (cont)
Forms Text Input Fields
Use when you want the user to type letters, number, ect.
Example : <form> First name :<input type=text name=firstname> <br> Last name :<input type=text name=lastname> </form>
The output :
Powerpoint Templates
Page 22
Basic HTML Element (cont)
Forms Submission Button
When user clicks on the Submit button, the content of the form
is sent to another file. Example : <form name=input action=html_for_action.php method=get> First name :<input type=text name=firstname> <br> Last name :<input type=text name=lastname> <br> <input type=submit value=Submit> </form> The output :
Powerpoint Templates
Page 23
Basic HTML Element (cont)
Forms Checkboxes
Use when you want the user to select one or more option of a limited
number of choices Example : <form> <input type="checkbox" id="car" value="car"/>Its my car <br> <input type="checkbox" id="van" value="van" />Its my van </form> The output :
Powerpoint Templates
Page 24
Basic HTML Element (cont)
Forms Radio Buttons
Use when you want the user to select one of a limited number of
choices
Example : <form> <input type="radio" id="male" value="male"/>Male<br> <input type="radio" id="female" value="female"/>Female </form> The output :
Powerpoint Templates
Page 25
Basic HTML Element (cont)
Forms Text Box
Use when you want to get input from user
Example : <form> <p>Sila masukkan komen anda</p> <textarea cols="50" row="100" id="textKomen name="komen"></textarea> </form> The output :
Powerpoint Templates
Page 26
Basic HTML Element (cont)
Forms Drop-down Menu
Use when you want user to respond with one specific answer with
the choices you given
Example : <p>Select your favourite fruit</p> <select name="fruit" size="1" id="Fruit"> <option selected>-Please select-<option>Apples <option>Banana<option>Orange </select>
The output :
Powerpoint Templates
Page 27