Você está na página 1de 86

Web Programming 17 Julai 2009

Creating HTML document Introduction to HTML structure of HTML document Understand the stages of website development lifecycle HTML element

Basic text editor like Notepad. HTML Converter - converts formatted text into HTML code.
Can create the source document in a word processor and then convert it. HTML code created using a converter is often longer and more complicated than it needs to be, resulting in larger-than-necessary files.

June Kassim TP2543

7/16/2009

HTML Editor helps you create an HTML file by 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 of HTML converters. Allow you to set up a Web page quickly. Will usually still have to work with HTML code to create a finished document.

June Kassim TP2543

7/16/2009

It is a good idea to plan out a Web page before you start coding. Draw a planning sketch or create a sample document using a word processor. Preparatory work can weed out errors or point to potential problems.

June Kassim TP2543

7/16/2009

June Kassim TP2543

7/16/2009

In planning, identify a documents different elements. An element is a distinct object in the document, like a paragraph, a heading, or a pages title.

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

June Kassim TP2543

7/16/2009

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 some document content. General syntax for a twosided tag: <element>content</element>

June Kassim TP2543

7/16/2009

A two-sided tags opening tag (<p>) and closing tag (</p>) should completely enclose its content. HTML allows you to enter element names in either uppercase or lowercase letters. A one-sided tag contains no content. General syntax for a one-sided tag: <element />

June Kassim TP2543

7/16/2009

Elements that employ one-sided tags are called empty elements since they contain no content. An example is a line break <br/>. A third type of tag is the comment tag, which you can use to add notes to your HTML code. <! comment -->

Comments are useful in documenting your HTML code for yourself and others.

June Kassim TP2543

7/16/2009

10

HTML file documents are composed of text characters and white space. White space is the blank space, tabs, and line breaks within the file.

HTML treats each occurrence of white space as a single blank space.


You can use white space to make your document more readable.

June Kassim TP2543

7/16/2009

11

Many tags contain attributes that control the behavior, and in some cases the appearance, of elements in the page. Attributes are inserted within the tag brackets.
<element attribute1=value1 attribute2=value2 /> for one-side tags
<element attribute1=value1 attribute2=value2 >content</element> for two-sided tags

June Kassim TP2543

7/16/2009

12

The first word after < called an element. The element will help browser to interpret how to display the plain text. Each angle bracket <> called tag. The tag will contain an element, attributes and the values. The tag will have beginning and ending angle brackets.
<HTML>..</HTML> <HEAD>..</HEAD> <BODY>..</BODY>

June Kassim TP2543

7/16/2009

13

The word after an element called attribute. The attribute will explain about the properties of the element. For each attributes and values will be separate by = The element may have more than one of attributes.

June Kassim TP2543

7/16/2009

14

Example.
<FONT COLOR = Blue> Teks berwarna biru </FONT> <FONT COLOR = BLUE SIZE = +1> Teks berwarna biru dan saiz lebih besar dari saiz normal. </font> <font color:blue ; size:14> Teks berwarna biru dan saiz 14. </font>

June Kassim TP2543

7/16/2009

15

The opening <html> tag marks the start of an HTML document, and the closing </html> tag tells a browser when it has reached the end of that HTML document.

Anything between these two tags makes up the content of the document, including all other elements, text, and comments.

June Kassim TP2543

7/16/2009

16

An HTML document is divided into two parts: the head and the body. The head element contains information about the document, for example the document title or the keywords. The content of the head element is not displayed within the Web page except the Title.

June Kassim TP2543

7/16/2009

17

The title element contains the pages title. A documents title is usually displayed in the title bar. The body element contains all of the content to be displayed in the Web page. The body element can contain code that tells the browser how to render the content.

June Kassim TP2543

7/16/2009

18

June Kassim TP2543

7/16/2009

19

As you work on a Web page, you should occasionally view it with your Web browser to verify that the file contains no syntax errors or other problems. You may want to view the results using different browsers to check for compatibility.

June Kassim TP2543

7/16/2009

20

June Kassim TP2543

7/16/2009

21

A storyboard is a diagram of a Web sites structure, showing all the pages in the site and indicating how they are linked together It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information
June Kassim TP2543 7/16/2009 23

The three chemistry pages

7/16/2009

June Kassim TP2543

24

In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain Linear structure works best for Web pages with a clearly defined order In an augmented linear structure, each page contains an additional link back to an opening page

June Kassim TP2543

7/16/2009

25

A linear structure

An augmented linear structure

June Kassim TP2543

7/16/2009

26

In the hierarchical structure, the pages are linked going from the most general page down to more specific pages Users can easily move from general to specific and back again Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play

June Kassim TP2543

7/16/2009

27

June Kassim TP2543

7/16/2009

28

As Web sites become larger and more complex, you often need to use a combination of several different structures The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion

June Kassim TP2543

7/16/2009

29

June Kassim TP2543

7/16/2009

30

A little foresight can go a long way toward making your Web site easier to use Each page should contain, at minimum, a link to the sites home page, or to the relevant main topic page, if applicable You may want to supply your users with a site index which is a page containing an outline of the entire site and its contents

June Kassim TP2543

7/16/2009

31

June Kassim TP2543

7/16/2009

32

To link to a page, you specify the name of the file using the href attribute of the <a> tag Filenames are case sensitive on some operating systems, 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 avoid special characters such as blanks and slashes You should also keep filenames short to avoid typing errors

June Kassim TP2543

7/16/2009

33

When linking to a location within another document, you must use the anchor name of the location within the document and the filename

<a href = file#id>content</a>

June Kassim TP2543

7/16/2009

34

To create a link to a file located in a different folder than the current document, you must specify the files location, or path, so that browsers can find it HTML supports two kinds of paths: relative and absolute An absolute path specifies a files precise location within a computers entire folder structure

June Kassim TP2543

7/16/2009

35

June Kassim TP2543

7/16/2009

36

A relative path specifies a files location in relation to the location of the current document If the file is in the same location as the current document, you do not have to specify the folder name If the file is in a subfolder of the current document, you have to include the name of the subfolder

June Kassim TP2543

7/16/2009

37

If you want to go one level up the folder tree, you start the relative path with a double period (..) then provide the name of the file To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder You should almost always use relative paths in your links

June Kassim TP2543

7/16/2009

38

The base element is useful when a document is moved to a new folder. Rather than rewriting all of the relative paths to reflect the documents new location, the base element can redirect browsers to the documents old location, allowing any relative paths to be resolved The base element is useful when you want to create a copy of a single page from a large Web site on another Web server
June Kassim TP2543 7/16/2009 39

June Kassim TP2543

7/16/2009

41

Present a process-oriented methodology for creating World Wide Web-based hypermedia works Developing information for the Web requires a focus on meeting user needs. To accomplish this, these methodology involves six elements and these six continuously ongoing processes:

June Kassim TP2543

7/16/2009

42

Audience information is a store of knowledge about the target audience for the web as well as the actual audience who uses the information. The purpose statement is an articulation of the reason for and scope of the web's existence. The objectives list flows from the purpose statement and defines the specific goals the web should accomplish. The domain information is a collection of knowledge and information about the subject domain the web covers, both in terms of information provided to users of the web and information the web developers need. The web specification is a detailed description of the constraints and elements that will go into the web. The web presentation is the means by which the information is delivered to the user.

June Kassim TP2543

7/16/2009

43

Planning: define target audience, purpose, objectives, and policies for information development and use. Analysis: check technical construction of web with validation tools; evaluate information consistency and verify correctness of domain information.

June Kassim TP2543

7/16/2009

44

Design: separate information into pagesized chunks; connect pages along routes of use and user thinking; provide information, 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 supporting consistent look and feel; check implementation in various browsers.
June Kassim TP2543 7/16/2009 45

Promotion: target publicity releases for general Web audiences, potential users, and current users; follow online community norms 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 to shift and change web's content as user needs change.
June Kassim TP2543 7/16/2009 46

The process of choosing among competing opportunities for communication so that overall goals for the web can be set. These goals include anticipating and deciding on targets for the audience, purpose, and objectives for the information. Planning also is done for domain information through a process of defining and specifying the supporting information that must be collected, how it will be collected, and how the information will be updated. A web planner anticipates the skills called for by the web specification as well as the skills needed for constructing particular parts of a web. If a specification for a design calls for using a forms interface (a feature supported by HTML), for example, the web planner must identify the need for web implementers to have these skills.

June Kassim TP2543

7/16/2009

47

A process of gathering and comparing information about the web and its operation in order to improve the web's overall quality. An important operation is one in which a web analyst examines information gathered about the audience for its relevance to some other elements or processes in web development. Information about the audience's level of technical interest can have a great deal of impact on what information should be provided to a user about a particular product or topic, for example. Similarly, analyzing the web's purpose in light of other new developments, such as the contents of a competitor's web, must be an ongoing process. An analyst weighs alternatives and gathers information to help with a decision in the other processes of planning, design, implementation, or development.

June Kassim TP2543

7/16/2009

48

The process by which a web designer, working within the web's specification, makes decisions about how a web's actual 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 for by the specification in the most flexible, efficient, and elegant way. Because it relies so heavily on the other processes and elements in web development, however, the design process is not more important than any of the others, but it requires a thorough grounding in implementation possibilities as well as knowledge about how particular web structures affect an audience.

June Kassim TP2543

7/16/2009

49

The process of actually building the web using HyperText Markup Language (HTML or improvements on it). The implementation process is perhaps most like software development because it involves using a specific syntax for encoding 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 in HTML as well as an awareness of how designs can best be implemented in HTML enriches the web implementer's expertise.

June Kassim TP2543

7/16/2009

50

The process of handling all the public-relations issues of a web. These include making the existence of a web known to on-line communities through publicity, as well as forming business or other information relationships with other webs. Promotion might involve using specific marketing strategies or creating business models.

June Kassim TP2543

7/16/2009

51

The process of making sure that the other development processes continue and improve. This includes monitoring technologies for new innovations that might be appropriate for the web, as well as finding creative or unique ways to improve the elements of the web or engage the web's audience in its success. Innovation also involves seeking to continuously improve the usability and quality of the web and exceed user expectations.

June Kassim TP2543

7/16/2009

52

Content needs to be structured differently for the Web, because the average Web reader scans the first few headings/paragraphs to decide if the content is what they need - and traditional content structure 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: The Web, on the other hand, needs what's called an 'inverted' pyramid structure:
Conclusion > Explanation > Details Introduction > Details > Conclusion

June Kassim TP2543

7/16/2009

54

The inverted pyramid structure ensures that readers see the most important information first. This helps readers scan the page and decide if they want to read in-depth and - if they do 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 navigation elements - only a small portion of the content may be seen without scrolling. Put the most important information first, then a short summary or explanation, and then include the details.

June Kassim TP2543

7/16/2009

55

June Kassim TP2543

7/16/2009

56

Reading online is 25% slower than reading from printed material, and it's harder on the eyes. Web users scan for information rather than reading content word-by-word, so we need to break down the text. Use short headings, lists, and short paragraphs to make content more scannable.

June Kassim TP2543

7/16/2009

57

Headings Use headings and sub-headings to organise the page into sections and help readers find specific topics and information: Include key words from the associated paragraphs. Keep headings and sub-headings short, a maximum of 4-8 words. 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.

June Kassim TP2543

7/16/2009

58

HTML supports six heading elements

7/16/2009

June Kassim TP2543

59

HTML supports three kinds of lists: ordered, unordered, and definition You use an ordered list for items that must appear in a particular sequential order You use an unordered list for items that do not need to occur in any special order One list can contain another list; this is called a nested list

June Kassim TP2543

7/16/2009

60

June Kassim TP2543

7/16/2009

61

The definition list contains a list of definition terms, each followed by a definition description Web browsers typically display the definition description below the definition term and slightly indented
Chemistry I
An introductory course requiring solid algebra skills

June Kassim TP2543

7/16/2009

62

Keep the text for each list item short - a 5-line list item isn't a bullet point, it's a paragraph with a bullet 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.

June Kassim TP2543

7/16/2009

63

Short paragraphs keep content scannable. Many readers will scan only the first sentence of each paragraph - perhaps the first 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.

June Kassim TP2543

7/16/2009

64

Tag <p></p> are used to format paragraph The browser will automatic indent to a new paragraph. The new paragraph is started in the new line.
<p>Ini adalah perenggan pertama utk teks ini</p> <p>Ini adalah perenggan kedua utk teks ini</p>

June Kassim TP2543

7/16/2009

65

<p align=left>
First paragraph is align to left

<p align=right>
First paragraph is align to right

<p align=center>
First paragraph is align to center

June Kassim TP2543

7/16/2009

66

<html> <head> <title>Tajuk pada tetingkap browser</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <p align="left">Ini perenggan ke kiri</p> <p align="center"><br> Ini adalah perenggan center utk teks ini </p> <p align="right">Ini perenggan ke kanan</p> </body> </html>

June Kassim TP2543

7/16/2009

67

June Kassim TP2543

7/16/2009

68

Use bold text sparingly.

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

Using bold text for emphasis on the Web is a cheap trick. It looks unprofessional. Don't use bold words inside prose text. Keep bold for headings and - if you absolutely have to use it - restrict bold text to the lead-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 two paragraphs (or more). Remember - making everything bold, effectively renders none of it bold.

June Kassim TP2543

7/16/2009

69

Tag <font face = xxxxx>

Tag <font size = x>

Example <font face=Arial, Tahoma, Lucida Sans> perkataan ini telah ditetapkan fonnya. </font>
For the size of font. Between the range of 1-7. No 1 refer to the smallest size. Text color. Can be define by code or name. Such as copyright..etc

Tag <font color = xxxxxx> Special character

June Kassim TP2543

7/16/2009

70

Use the style attribute to control the appearance of an element, such as text alignment 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 how the browser should render an element

June Kassim TP2543

7/16/2009

71

HTML supports the address element to indicate contact information. Most browsers display an address element in an italicized font You can indicate long quoted passages by applying the blockquote element. The text is typically indented

June Kassim TP2543

7/16/2009

72

A logical element describes the nature of the enclosed content, but not necessarily how that content should appear A physical element describes how content should appear, but doesnt indicate the contents nature You should use a logical element that accurately describes the enclosed content whenever possible, and use physical elements only for general content
June Kassim TP2543 7/16/2009 73

To display a graphic, you insert an inline image into the page. An inline image displays a graphic image located in a separate file within the contents of a block-level element You can insert a horizontal line by using the one-sided tag <hr /> A pixel is a dot on your computer screen that measures about 1/72 square

June Kassim TP2543

7/16/2009

74

Other empty elements you may wish to use in your Web page include line breaks and meta elements Meta elements are placed in the documents head and contain information about the document that may be of use to programs that run on Web servers

June Kassim TP2543

7/16/2009

75

In Web pages, Metadata is the key words and phrases that describe the contents of the page. Metadata is used in page content and HTML tags for two reasons: To help readers scan the page to decide if they want to read it. To help search engines find the page.

June Kassim TP2543

7/16/2009

76

It doesn't matter how great the body content is, if the headings aren't relevant to the content - and don't include the key words people are searching for - the chances are that the page will never be read. 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.

June Kassim TP2543

7/16/2009

77

Occasionally you will want to include special characters in your Web page that do not appear on your keyboard

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

&code

June Kassim TP2543

7/16/2009

78

June Kassim TP2543

7/16/2009

79

When the blockquote is used, the text are indent to the right. This tag can make the column getting small. Example
<blockquote> Ini adalah perenggan pertama utk teks ini. Dijajarkan ke kanan sedikit . </blockquote> <blockquote><blockquote> Ini adalah perenggan kedua. Dijajarkan kekanan dua kali. </blockquote></blockquote>
June Kassim TP2543 7/16/2009 80

<hr> most browser render horizontal rule as a horizontal line. <hr / > tag also inserts a line break above and below the horizontal line It can be used to separate the document
<hr size=4 width=50% />

June Kassim TP2543

7/16/2009

81

NOSHADE normally the line has the shadow. With this attribute can alter the display of the line. ALIGN align the line either LEFT, RIGHT or CENTER. SIZE for the size of the line WIDTH how big the line covers.

<HR ALIGN=left SIZE=6 WIDTH=50% NOSHADE />

June Kassim TP2543

7/16/2009

82

Line Break <br>


<br> used to return Browser display the test after this tag to the new line
Web Programming student <br/> Hope ull understand this Output: Web Programming student Hope ull understand this

June Kassim TP2543

7/16/2009

83

Tag <b>.</b> <I>.</I>

Meaning Text will be bold Text will be italic

<sub></sub>
<sup></sup> <u></u>

Text will be subscript


Text will be superscript Text will be underline

<cite></cite> <code></code> <em></em> <var></var>

Each tags has their own design. You need to explore to know what will happen if this text has been used.

June Kassim TP2543

7/16/2009

84

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 want do design or display our web site?

June Kassim TP2543

7/16/2009

85

Hope itll help you in planning and designing your web site. June Kassim

Você também pode gostar