week 2-introduction[method & basic].pdf

8/14/2019 week 2-introduction[method & basic].pdf

1/86

Web Programming

17 Julai 2009


2/86

Creating HTML documentIntroduction to HTML structure of HTMLdocumentUnderstand the stages of website developmentlifecycleHTML element


3/86

Basic text editor like Notepad.

HTML Converter - converts formatted textinto HTML code. Can create the source document in a word

processor and then convert it.

HTML code created using a converter is oftenlonger and more complicated than it needs to be,

resulting in larger-than-necessary files.

7/16/2009June Kassim TP2543 3


4/86

HTML Editor helps you create an HTML fileby inserting HTML codes for you as you work. They can save you a lot of time and help you work

more efficiently.

Advantages and limitations similar to those ofHTML converters.

Allow you to set up a Web page quickly.

Will usually still have to work with HTML code to

create a finished document.



5/86

It is a good idea to plan out a Web pagebefore you start coding.

Draw a planning sketch or create a sampledocument using a word processor.

Preparatory work can weed out errors or

point to potential problems.



6/86



7/86

In planning, identify a documents differentelements. An element is a distinct object inthe document, like a paragraph, a heading, ora pages title.

Formatting features such as boldfaced font,and italicizedtext may be used.



8/86

The core building block of HTML is the tag,which marks each element in a document.

Tags can be two-sided or one-sided.

A two-sided tag is a tag that contains somedocument content. General syntax for a two-

sided tag:content



9/86

A two-sided tags opening tag (

) andclosing tag (
) should completely encloseits content.
HTML allows you to enter element names ineither uppercase or lowercase letters.

A one-sided tag contains no content. Generalsyntax for a one-sided tag:



10/86

Elements that employ one-sided tags are calledempty elements since they contain no content.An example is a line break
.

A third type of tag is the comment tag, whichyou can use to add notes to your HTML code.

< comment --> Comments are useful in documenting your

HTML code for yourself and others.



11/86

HTML file documents are composed of textcharacters and white space.White space is the blank space, tabs, and line

breaks within the file.

HTML treats each occurrence of white space as asingle blank space.

You can use white space to make your documentmore readable.



12/86


13/86

The first word after


14/86

The word after an element called attribute.The attribute will explain about the propertiesof the element.

For each attributes and values will beseparate by =

The element may have more than one ofattributes.



15/86

Example.


Teks berwarna biru

Teksberwarna biru dan saiz lebih besar dari saiz normal.

Teks berwarna biru dan saiz 14.


16/86

The opening tag marks the start ofan HTML document, and the closing tag tells a browser when it has reached theend of that HTML document.

Anything between these two tags makes upthe content of the document, including all

other elements, text, and comments.



17/86

An HTML document is divided into two parts:the head and the body.

The head element contains information aboutthe document, for example the document titleor the keywords.

The content of the head element is notdisplayed within the Web page except theTitle.



18/86

The title element contains the pages title. Adocuments title is usually displayed in thetitle bar.

The body element contains all of the contentto be displayed in the Web page.

The body element can contain code that tellsthe browser how to render the content.



19/86



20/86

As you work on a Web page, you shouldoccasionally view it with your Web browser toverify that the file contains no syntax errors orother problems.

You may want to view the results usingdifferent browsers to check for compatibility.



21/86



22/86


23/86

A storyboard is a diagram of a Web sitesstructure, showing all the pages in the siteand indicating how they are linked together

It is important to storyboard your Web sitebefore you start creating your pages inorder to determine which structure worksbest for the type of information the sitecontains

A well-designed structure can ensure thatusers will be able to navigate the sitewithout getting lost or missing importantinformation



24/86

The three chemistry pages

7/16/2009 June Kassim TP2543 24


25/86

In a linear structure, each page is linked withthe pages that follow and precede it in anordered chain

Linear structure works best for Web pageswith a clearly defined order

In an augmented linear structure, each pagecontains an additional link back to an

opening page



26/86


A linear structure

An augmented linear

structure


27/86

In the hierarchical structure, the pages arelinked going from the most general pagedown to more specific pages

Users can easily move from general tospecific and back again

Within this structure, a user can move quicklyto a specific scene within the page, bypassing

the need to move through each scene in theplay



28/86



29/86

As Web sites become larger and morecomplex, you often need to use acombination of several different structures

The overall form can be hierarchical, allowingthe user to move from general to specific;however, the links also allow users to movethrough the site in a linear fashion



30/86



31/86

A little foresight can go a long way towardmaking your Web site easier to use

Each page should contain, at minimum, a linkto the sites home page, or to the relevant

main topic page, if applicable

You may want to supply your users with a siteindex which is a page containing an outline ofthe entire site and its contents



32/86



33/86

To link to a page, you specify the name of thefile using the href attribute of the tag

Filenames are case sensitive on some operatingsystems, including the UNIX and Macintosh, but

not on others The current standard is to use lowercase

filenames for all files on a Website and to avoidspecial characters such as blanks and slashes

You should also keep filenames short to avoidtyping errors



34/86

When linking to a location within anotherdocument, you must use the anchor name ofthe location within the document and thefilename

content



35/86

To create a link to a file located in a differentfolder than the current document, you mustspecify the files location, or path, so thatbrowsers can find it

HTML supports two kinds of paths: relativeand absolute

An absolute path specifies a files preciselocation within a computers entire folderstructure



36/86



37/86

A relative path specifies a files location inrelation to the location of the currentdocument

If the file is in the same location as the

current document, you do not have to specifythe folder name

If the file is in a subfolder of the currentdocument, you have to include the name ofthe subfolder



38/86

If you want to go one level up the folder tree,you start the relative path with a doubleperiod (..) then provide the name of the file

To specify a different folder on the same

level, known as a sibling folder, you move upthe folder tree using the double period (..)and then down the tree using the name of thesibling folder

You should almost always use relative pathsin your links



39/86

The base element is useful when adocument is moved to a new folder. Ratherthan rewriting all of the relative paths toreflect the documents new location, the

base element can redirect browsers to thedocuments old location, allowing anyrelative paths to be resolved

The base element is useful when you wantto create a copy of a single page from alarge Web site on another Web server



40/86


41/86



42/86


43/86

Audience information is a store of knowledge about the targetaudience for the web as well as the actual audience who usesthe information.

The purpose statement is an articulation of the reason for andscope of the web's existence.

The objectives list flows from the purpose statement anddefines the specific goals the web should accomplish.

The domain information is a collection of knowledge andinformation about the subject domain the web covers, both interms of information provided to users of the web andinformation the web developers need.

The web specification is a detailed description of theconstraints and elements that will go into the web.

The web presentation is the means by which the informationis delivered to the user.

http://www.december.com/web/develop/audience.htmlhttp://www.december.com/web/develop/purpose.htmlhttp://www.december.com/web/develop/objective.htmlhttp://www.december.com/web/develop/domain.htmlhttp://www.december.com/web/develop/spec.htmlhttp://www.december.com/web/develop/present.htmlhttp://www.december.com/web/develop/present.htmlhttp://www.december.com/web/develop/spec.htmlhttp://www.december.com/web/develop/domain.htmlhttp://www.december.com/web/develop/objective.htmlhttp://www.december.com/web/develop/purpose.htmlhttp://www.december.com/web/develop/audience.html


44/86

Planning: define target audience, purpose,objectives, and policies for informationdevelopment and use.

Analysis: check technical construction of webwith validation tools; evaluate informationconsistency and verify correctness of domaininformation.

http://www.december.com/web/develop/plan.htmlhttp://www.december.com/web/develop/analyze.htmlhttp://www.december.com/web/develop/analyze.htmlhttp://www.december.com/web/develop/plan.html


45/86

Design: separate information into page-sized chunks; connect pages along routesof use and user thinking; provideinformation, context, and navigation cues;

create a consistent look and feel.Implementation: create an extendible

directory and file structure; use HTML tools

where helpful; use templates for supportingconsistent look and feel; checkimplementation in various browsers.

http://www.december.com/web/develop/design.htmlhttp://www.december.com/web/develop/implement.htmlhttp://www.december.com/web/develop/implement.htmlhttp://www.december.com/web/develop/design.html


46/86

Promotion: target publicity releases forgeneral Web audiences, potential users, andcurrent users; follow online communitynorms and practices; innovatively connect

with users to meet their needs.Innovation: continuously and creatively

work for improvement to meet user needs;

use testing, evaluation, and focus groups toshift and change web's content as userneeds change.

http://www.december.com/web/develop/promote.htmlhttp://www.december.com/web/develop/innovate.htmlhttp://www.december.com/web/develop/innovate.htmlhttp://www.december.com/web/develop/promote.html


47/86

The process of choosing among competing opportunities forcommunication so that overall goals for the web can be set.These goals include anticipating and deciding on targets forthe audience, purpose, and objectives for the information.

Planning also is done for domain information through a

process of defining and specifying the supporting informationthat must be collected, how it will be collected, and how theinformation will be updated.

A web planner anticipates the skills called for by the webspecification as well as the skills needed for constructing

particular parts of a web. If a specification for a design callsfor using a forms interface (a feature supported by HTML), forexample, the web planner must identify the need for webimplementers to have these skills.



48/86

A process of gathering and comparing information about theweb and its operation in order to improve the web's overallquality.

An important operation is one in which a web analyst examinesinformation gathered about the audience for its relevance tosome other elements or processes in web development.

Information about the audience's level of technical interest canhave a great deal of impact on what information should beprovided to a user about a particular product or topic, forexample.

Similarly, analyzing the web's purpose in light of other newdevelopments, such as the contents of a competitor's web, must

be an ongoing process. An analyst weighs alternatives andgathers information to help with a decision in the otherprocesses of planning, design, implementation, or development.



49/86

The process by which a web designer, working within theweb's specification, makes decisions about how a web'sactual components should be constructed.

This process involves taking into account the web's purpose,audience, objective, and domain information.

A good designer knows how to achieve the effects called forby the specification in the most flexible, efficient, and elegantway.

Because it relies so heavily on the other processes andelements in web development, however, the design process is

not more important than any of the others, but it requires athorough grounding in implementation possibilities as well asknowledge about how particular web structures affect anaudience.



50/86

The process of actually building the web using HyperTextMarkup Language (HTML or improvements on it).

The implementation process is perhaps most like softwaredevelopment because it involves using a specific syntax forencoding web structures in a formal language in computer

files. Although automated tools are available to help with the

construction of HTML documents, a thorough grounding inHTML as well as an awareness of how designs can best beimplemented in HTML enriches the web implementer's

expertise.



51/86

The process of handling all the public-relationsissues of a web.

These include making the existence of a webknown to on-line communities through publicity,

as well as forming business or other informationrelationships with other webs.

Promotion might involve using specific marketingstrategies or creating business models.



52/86

The process of making sure that the otherdevelopment processes continue and improve.

This includes monitoring technologies for newinnovations that might be appropriate for the web,

as well as finding creative or unique ways toimprove the elements of the web or engage theweb's audience in its success.

Innovation also involves seeking to continuouslyimprove the usability and quality of the web andexceed user expectations.



53/86


54/86

Content needs to be structured differently for theWeb, because the average Webreader scans thefirst few headings/paragraphs to decide if thecontent is what they need - and traditional contentstructure puts the most important information at

the bottom of the page. A lot of us were taught to write in the data

presentation (pyramid) format, that is: Introduction > Details > Conclusion

The Web, on the other hand, needs what's called an'inverted' pyramid structure: Conclusion > Explanation > Details

http://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htm


55/86

The inverted pyramid structure ensures that readers see themost important information first. This helps readers scan thepage and decide if they want to read in-depth and - if theydo leave - at least they'll have read the key points.

Screen Size In a screen resolution of 800 x 600 - with screen space taken

up by browser toolbars, interface graphics, and navigationelements - only a small portion of the content may be seenwithout scrolling.

Put the most important information first, then a shortsummary or explanation, and then include the details.



56/86



57/86

Reading online is 25% slower than reading fromprinted material, and it's harder on the eyes.

Web users scan for information rather than readingcontent word-by-word, so we need to break downthe text. Use short headings, lists, and shortparagraphs to make content more scannable.

http://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htm


58/86

Headings Use headings and sub-headings to organise the page into

sections and help readers find specific topics andinformation:

Include key words from the associated paragraphs.

Keep headings and sub-headings short, a maximum of 4-8words.

Lists Lists draw the eye, so break down important information into

concise list items. Check long sentences. If there are a lot of commas, colons,

and/or semi-colons, try pulling the points out into a list.

http://www.kerryr.net/webwriting/metadata_headings.htmhttp://www.kerryr.net/webwriting/techniques_headings.htmhttp://www.kerryr.net/webwriting/techniques_headings.htmhttp://www.kerryr.net/webwriting/techniques_headings.htmhttp://www.kerryr.net/webwriting/techniques_headings.htmhttp://www.kerryr.net/webwriting/metadata_headings.htm


59/86

HTML supports six heading elements

7/16/2009 June Kassim TP2543 59


60/86

HTML supports three kinds of lists:ordered, unordered, and definition You use an ordered list for items that

must appear in a particular sequentialorder

You use an unordered list for items thatdo not need to occur in any special order

One list can contain another list; this iscalled a nested list



61/86



62/86

The definition list contains a list of definitionterms, each followed by a definitiondescription

Web browsers typically display the definition

description below the definition term andslightly indentedChemistry I

An introductory course requiring solid algebra skills



63/86

Keep the text for each list item short - a 5-line listitem isn't a bullet point, it's a paragraph with abullet in front of it. Have no more than 9 items in a single list.

Keep lists to a maximum of two levels.

Use numbered lists where the order of entries is important. Use bullet point lists where the sequence of entries isn't

important.

Ensure each list is introduced by at least one line of text.



64/86

Short paragraphs keep content scannable.Many readers will scan only the firstsentence of each paragraph - perhaps thefirst two sentences if they're very short. Get to the point straight away, in the first line. Build each paragraph around a single idea.

Paragraphs should be no longer than 40 - 70 words.

Paragraphs should be no more than 5 lines.

Keep summary paragraphs to 30 - 50 words.

Try to vary the size of paragraphs.



65/86

Tag
are used to formatparagraph
The browser will automatic indent to a newparagraph. The new paragraph is started in

the new line.

Ini adalah perenggan pertama utk teks

ini

Ini adalah perenggan kedua utk teks ini



66/86

First paragraph is align to left

First paragraph is align to right

First paragraph is align to center



67/86


Tajuk pada tetingkap browser

Ini perenggan ke kiri

Ini adalah perenggan center utk teks ini

Ini perenggan ke kanan


68/86



69/86

Use bold text sparingly.

Using bold text for emphasis on the Web is a cheap trick. Itlooks unprofessional.

Don't use bold words inside prose text. Keep bold for headingsand - if you absolutely have to use it - restrict bold text to thelead-in at the beginning of a paragraph.

If you have to bold text to emphasise words inside a paragraph,

the paragraph is probably too long. Try breaking it into twoparagraphs (or more).

Remember - making everything bold, effectively renders noneof it bold.

There's an exception to these rules when highlightingimportant information. Even then, restrict bold to Note:or Important and leave the message itself un-bolded.



70/86

Tag Example perkataan ini telah ditetapkan fonnya.

Tag For the size of font. Between the range of 1-7. No

1 refer to the smallest size.

Tag Text color. Can be define by code or name.

Special character Such as copyright..etc



71/86

Use the style attribute to control theappearance of an element, such as textalignment

Styles specified as attributes in a tag are also

referred to as inline styles The text-align style tells the browser how to

horizontally align the contents of an element

Presentational attributes specify exactly howthe browser should render an element



72/86

HTML supports the address element toindicate contact information. Most browsersdisplay an address element in an italicizedfont

You can indicate long quoted passages byapplying the blockquote element. The text istypically indented



73/86

A logical element describes the nature ofthe enclosed content, but not necessarilyhow that content should appear

A physical element describes how contentshould appear, but doesnt indicate thecontents nature

You should use a logical element thataccurately describes the enclosed contentwhenever possible, and use physicalelements only for general content



74/86

To display a graphic, you insert an inlineimage into the page. An inline image displaysa graphic image located in a separate filewithin the contents of a block-level element

You can insert a horizontal line by using theone-sided tag

A pixel is a dot on your computer screen thatmeasures about 1/72 square



75/86

Other empty elements you may wish to use inyour Web page include line breaks and metaelements

Meta elements are placed in the documentshead and contain information about thedocument that may be of use to programsthat run on Web servers



76/86

In Web pages, Metadata is the key words andphrases that describe the contents of the page.

Metadata is used in page content and HTML tagsfor two reasons:

To help readers scan the page to decide if theywant to read it.

To help search engines find the page.

http://www.kerryr.net/webwriting/guide_web-vs-print.htmhttp://www.kerryr.net/webwriting/metadata_search.htmhttp://www.kerryr.net/webwriting/metadata_search.htmhttp://www.kerryr.net/webwriting/guide_web-vs-print.htm


77/86

It doesn't matter how great the body content is, ifthe headings aren't relevant to the content - anddon't include the key words people are searchingfor - the chances are that the page will never beread.

Keep headings to a maximum of 4 - 8 words.

Use the key word or words from the following text.

Be clear and precise.

Don't try to be witty.

http://www.kerryr.net/webwriting/techniques_headings.htmhttp://www.kerryr.net/webwriting/metadata_what_is.htmhttp://www.kerryr.net/webwriting/metadata_what_is.htmhttp://www.kerryr.net/webwriting/techniques_headings.htm


78/86

Occasionally you will want to include specialcharacters in your Web page that do notappear on your keyboard

HTML supports the use of character symbolsthat are identified by a code number or name


&code


79/86



80/86


When the blockquote is used, the text are

indent to the right.

This tag can make the column getting small.

Example

Ini adalah perenggan pertama utk teks ini. Dijajarkan

ke kanan sedikit .

Ini adalah perenggan kedua. Dijajarkan kekanan dua

kali.


81/86

most browser render horizontal ruleas a horizontal line.

tag also inserts a line break aboveand below the horizontal line

It can be used to separate the document



82/86


NOSHADE normally the line has the shadow. Withthis attribute can alter the display of the line.

ALIGN align the line either LEFT, RIGHT orCENTER.

SIZE for the size of the line

WIDTH how big the line covers.


83/86


Line Break

used to return

Browser display the test after this tag to the new

line

Web Programming student
Hope ull understand

this

Output:Web Programming student

Hope ull understand this

Tag Meaning


84/86


g g

. Text will be bold

. Text will be italic

Text will be subscript

Text will be superscript

Text will be underline

Each tags has their own

design. You need to exploreto know what will happen if

this text has been used.


85/86

What is HTML and the basic element of it? What do we need to do if we want to develop

a web site?

What stage do they have and what to do?

What is the tag means? And how do we wantdo design or display our web site?



86/86

Hope itll help you in planning anddesigning your web site.

June Kassim

week 2-introduction[method & basic].pdf

Documents

Transcript of week 2-introduction[method & basic].pdf