Scribd
Upload
63 views27 pages

Prepared by Salwa Binti Abdul Kohar: Powerpoint Templates Powerpoint Templates

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, lists, links, images and other content. The basic structure of an HTML document includes <html>, <head> and <body> tags. Common HTML elements include headings, paragraphs, links, images, tables, forms and basic text formatting tags. The document provides examples of how to use various HTML tags to structure and format content for display in a web browser.

Uploaded by

wawa1308
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
63 views27 pages

Prepared by Salwa Binti Abdul Kohar: Powerpoint Templates Powerpoint Templates

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, lists, links, images and other content. The basic structure of an HTML document includes <html>, <head> and <body> tags. Common HTML elements include headings, paragraphs, links, images, tables, forms and basic text formatting tags. The document provides examples of how to use various HTML tags to structure and format content for display in a web browser.

Uploaded by

wawa1308
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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 webpage.html


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: main.html --> <!-- 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=clouds.gif> <body background=http://www.w3schools.com/clouds.gif>

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=http://www.iusb.edu>IUSB Home</a> The output : IUSB Home A Email link Example : < a href=mailto:[email protected]>Email 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=image.gif> The output : Turn an image into a hyperlink Example : <a href=http://www.iusb.edu><img src=image.gif></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=image.gif>

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

You might also like