HTML HTML Programming LanguageProgramming Language

INTRODUCTION

HTML HyperText Markup Language the major language of the Internet's World

Wide Web ability to bring together text, pictures,

sounds, and links

...

Hypertext Active text Link Clicking causes an action

Markup Language Tags indicate formatting and

document structure Source is processed by a

program that understands the tags and formats the page

INTRODUCTION

HTML Editor HTML documents are plain-text (also known as ASCII) files that can be created using any

text editor. Popular editor

Netscape Composer Microsoft Frontpage Microsoft Visual InterDev Web Publisher Dreamweaver Other notepad, word.

WEB PAGE DEVELOPMENT

Preparing a web page Writing vehicle

Programming in HTML Authoring software

Browser Test the code locally Test the code on the server

Server Test links to other sites Store your published site

WEB PAGE DEVELOPMENT

HTML document - tags HTML is composed of tags Tags - tells browser how to display the information

provided HTML tags are always enclosed in angle-brackets

( < > ) and are case-insensitive ... e.g., and

Generally used in pairs Open tag Closing tag same tag with / in front

WEB PAGE DEVELOPMENT

Beginning and end of every HTML document

Contains information about the document

including the title that is to appear in the title bar

All content for the page is placed between these tags

Comment tags

WEB PAGE DEVELOPMENT

Each document consists of head and body text.

The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements.

WEB PAGE DEVELOPMENT

HTML document basic tags

If you view this from the browser, you will see a blank page

EXAMPLE:

A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph.

While short it is still a paragraph! And this is the second paragraph.

WEB PAGE DEVELOPMENT HTML document heading

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest

Headings are typically displayed in larger and/or bolder fonts than normal body text

The syntax of the heading element is: Text of heading

where y is a number between 1 and 6 specifying the level of the heading

WEB PAGE DEVELOPMENT

HTML document heading tags

Largest heading Smallest heading

WEB PAGE DEVELOPMENT

HTML document - body Background color / graphics Attributes of

BGCOLOR=codeSpecify color for background of the screen

BACKGROUND=path/fileTiles the graphic in the file to fit the screen

WEB PAGE DEVELOPMENT

HTML Document list- HTML supports unnumbered, numbered, and

definition lists

Unnumbered Lists apples bananas grapefruit

Output- apples - bananas - grapefruit

Numbered List oranges peaches grapes

Output1. oranges 2. peaches 3. grapes

Find - Definition List & Nested List

WEB PAGE DEVELOPMENT

WEB PAGE DEVELOPMENT

HTML Document text formatted

- tag break same as enter/return - bold text - italic text - underline

WEB PAGE DEVELOPMENT

HTML Document linking Hyperlink - browser highlights the identified text or

image with color and/or underlines to indicate that it is a hypertext link

Relative linking - the path to the linked file relative to the location of the current file.

Click Page 1 Absolute linking - linking to documents that are not

directly relatedFEP, UKM

WEB PAGE DEVELOPMENT

HTML Document mailto send electronic mail to a specific person or

mail alias by including the mailto attribute in a hyperlink

Mail to Mrs. Haliza

WEB PAGE DEVELOPMENT

HTML Document line break tag

Line Break --- Forces a new line

Learning HTMLisfun!

WEB PAGE DEVELOPMENT

HTML Document image Format such as *.gif, *.jpeg, *.jpg, *.xbm,

*png.

WEB PAGE DEVELOPMENT

GIF Graphics Interchange Format Use for graphics

JPG Joint Photographic Experts Group Use for photographs

PNG Portable Network Graphics Expected to replace GIF

WEB PAGE DEVELOPMENT

Tables ...

- define table in HTML ...

- specifies a table row within a table ...

- defines a table header cell ...

-defines a table data cell

CountryCapital

MalaysiaKuala Lumpur

ChinaBeijing

Output:

Country CapitalMalaysia Kuala LumpurChina Beijing

WEB PAGE DEVELOPMENT

WEB PAGE DEVELOPMENT

Tables more properties BORDER = X

- add borders to the table WIDTH=x, HEIGHT=x,

- control the size of the table ALIGN=left or center or right

- align a table/data to the left, center or right CELLSPACING-the width of the spacing between

cell and along edges of cells. CELLPADDING-amount of space inserted btw cell

content and the inner edge of a cell

WEB PAGE DEVELOPMENT

Themes Unified set of design elements and color

schemes that you can apply to a page to give it a consistent and attractive appearance

Background Fonts Banners Bullets Link buttons

WEB PAGE DEVELOPMENT

Using a theme is a quick and easy way to make sure your Web pages are visually consistent and appealing.

Microsoft FrontPage includes many complete themes that you can use right away.

You can also change those themes or create new ones

WEB PAGE DEVELOPMENT

Themes

PowerPoint PresentationINTRODUCTIONSlide 3HTML EditorWEB PAGE DEVELOPMENTSlide 6Slide 7Slide 8Slide 9EXAMPLE:Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27