Prepared by Salwa Binti Abdul Kohar: Powerpoint Templates Powerpoint Templates

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 Powerpoint Templates dalam halaman web 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)
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 webpage.html 4) Click on Save 9) Type in content for your file 11) Once you finished the content, click on File ->Save
HTML Document Structure
<html> <head> <title>Page Title Goes Here</title> </head> <body> content goes here </body> <html>
Page 7
Basic Concept of HTML Language

Comments
  <html> <head> </head> <body>
Head section
Start tag
Body section
</body> </html>
end tag
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
Basic HTML Element

Headings
There are 6 common heading commands
The output :
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=clouds.gif> <body background=http://www.w3schools.com/clouds.gif>
Page 11

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

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
Page 13

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

List
Unordered list Example : <ul> <li>Sunday</li> <li>Monday</li> Sunday <li>Tuesday</li> Monday </ul> Tuesday The output : Ordered list Example : <ol> <li>Sunday</li> <li>Monday</li> 1. Sunday <li>Tuesday</li> 2. Monday </ol> 3. Tuesday The output :
Page 15

Create Links
A Hypertext link Example : < a href=http://www.iusb.edu>IUSB Home</a> The output : IUSB Home A Email link Example : < a href=mailto:vkwong@iusb.edu>Email me</a> The output : Email me
Page 16

Table
<table border="1"> <tr> <th>Heading</th> <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> </table>
The output :
Page 17

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 :
Page 18

Inserting Image
Place all images in the same directory / folder where your
web pages are : <img src> is a single text Example : <img src=image.gif> The output :
Turn an image into a hyperlink Example : <a href=http://www.iusb.edu><img src=image.gif></a> Output :

Page 19

Image Size
Computer images are made up of pixels
<img height=100 width=150 src=image.gif>
height width
Page 20

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>
Page 21

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 :
Page 22
Forms Submission Button

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 :
When user clicks on the Submit button, the content of the form

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 :
Page 24

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 :
Page 25

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 :
Page 26

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 :
Page 27

Prepared by Salwa Binti Abdul Kohar: Powerpoint Templates Powerpoint Templates

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Prepared by Salwa Binti Abdul Kohar: Powerpoint Templates Powerpoint Templates

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

Prepared by Salwa binti Abdul Kohar

What is HTML? (cont)

HTML File Look Like

HTML File Look Like (cont)

Creating a HTML File

HTML Document Structure

Basic Concept of HTML Language

Basic HTML Element

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Turn an image into a hyperlink Example : <a href=http://www.iusb.edu><img src=image.gif></a> Output :

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Forms Submission Button

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

Basic HTML Element (cont)

S-ar putea să vă placă și