8/14/2019 week 2-introduction[method & basic].pdf
1/86
Web Programming
17 Julai 2009
8/14/2019 week 2-introduction[method & basic].pdf
2/86
Creating HTML documentIntroduction to HTML structure of HTMLdocumentUnderstand the stages of website developmentlifecycleHTML element
8/14/2019 week 2-introduction[method & basic].pdf
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
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 4
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 5
8/14/2019 week 2-introduction[method & basic].pdf
6/86
7/16/2009June Kassim TP2543 6
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 7
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 8
8/14/2019 week 2-introduction[method & basic].pdf
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:
7/16/2009June Kassim TP2543 9
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 10
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 11
8/14/2019 week 2-introduction[method & basic].pdf
12/86
8/14/2019 week 2-introduction[method & basic].pdf
13/86
The first word after
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 14
8/14/2019 week 2-introduction[method & basic].pdf
15/86
Example.
7/16/2009June Kassim TP2543 15
Teks berwarna biru
Teksberwarna biru dan saiz lebih besar dari saiz normal.
Teks berwarna biru dan saiz 14.
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 16
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 17
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 18
8/14/2019 week 2-introduction[method & basic].pdf
19/86
7/16/2009June Kassim TP2543 19
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 20
8/14/2019 week 2-introduction[method & basic].pdf
21/86
7/16/2009June Kassim TP2543 21
8/14/2019 week 2-introduction[method & basic].pdf
22/86
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 23
8/14/2019 week 2-introduction[method & basic].pdf
24/86
The three chemistry pages
7/16/2009 June Kassim TP2543 24
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 25
8/14/2019 week 2-introduction[method & basic].pdf
26/86
7/16/2009June Kassim TP2543 26
A linear structure
An augmented linear
structure
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 27
8/14/2019 week 2-introduction[method & basic].pdf
28/86
7/16/2009June Kassim TP2543 28
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 29
8/14/2019 week 2-introduction[method & basic].pdf
30/86
7/16/2009June Kassim TP2543 30
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 31
8/14/2019 week 2-introduction[method & basic].pdf
32/86
7/16/2009June Kassim TP2543 32
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 33
8/14/2019 week 2-introduction[method & basic].pdf
34/86
When linking to a location within anotherdocument, you must use the anchor name ofthe location within the document and thefilename
content
7/16/2009June Kassim TP2543 34
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 35
8/14/2019 week 2-introduction[method & basic].pdf
36/86
7/16/2009June Kassim TP2543 36
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 37
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 38
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 39
8/14/2019 week 2-introduction[method & basic].pdf
40/86
8/14/2019 week 2-introduction[method & basic].pdf
41/86
7/16/2009June Kassim TP2543 41
8/14/2019 week 2-introduction[method & basic].pdf
42/86
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 43
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.html8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 44
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.html8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 45
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.html8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 46
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.html8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 47
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 48
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 49
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 50
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 51
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 52
8/14/2019 week 2-introduction[method & basic].pdf
53/86
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 54
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.htm8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 55
8/14/2019 week 2-introduction[method & basic].pdf
56/86
7/16/2009June Kassim TP2543 56
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 57
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.htm8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 58
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.htm8/14/2019 week 2-introduction[method & basic].pdf
59/86
HTML supports six heading elements
7/16/2009 June Kassim TP2543 59
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 60
8/14/2019 week 2-introduction[method & basic].pdf
61/86
7/16/2009June Kassim TP2543 61
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 62
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 63
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 64
8/14/2019 week 2-introduction[method & basic].pdf
65/86
Tag
are used to formatparagraphThe 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
7/16/2009June Kassim TP2543 65
8/14/2019 week 2-introduction[method & basic].pdf
66/86
First paragraph is align to left
First paragraph is align to right
First paragraph is align to center
7/16/2009June Kassim TP2543 66
8/14/2019 week 2-introduction[method & basic].pdf
67/86
7/16/2009June Kassim TP2543 67
Tajuk pada tetingkap browser
Ini perenggan ke kiri
Ini adalah perenggan center utk teks ini
Ini perenggan ke kanan
8/14/2019 week 2-introduction[method & basic].pdf
68/86
7/16/2009June Kassim TP2543 68
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 69
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 70
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 71
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 72
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 73
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 74
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 75
8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 76
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.htm8/14/2019 week 2-introduction[method & basic].pdf
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.
7/16/2009June Kassim TP2543 77
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.htm8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 78
&code
8/14/2019 week 2-introduction[method & basic].pdf
79/86
7/16/2009June Kassim TP2543 79
8/14/2019 week 2-introduction[method & basic].pdf
80/86
7/16/2009June Kassim TP2543 80
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.
8/14/2019 week 2-introduction[method & basic].pdf
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
7/16/2009June Kassim TP2543 81
8/14/2019 week 2-introduction[method & basic].pdf
82/86
7/16/2009June Kassim TP2543 82
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.
8/14/2019 week 2-introduction[method & basic].pdf
83/86
7/16/2009June Kassim TP2543 83
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
8/14/2019 week 2-introduction[method & basic].pdf
84/86
7/16/2009June Kassim TP2543 84
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.
8/14/2019 week 2-introduction[method & basic].pdf
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?
7/16/2009June Kassim TP2543 85
8/14/2019 week 2-introduction[method & basic].pdf
86/86
Hope itll help you in planning anddesigning your web site.
June Kassim
Top Related