Basic HTML & website Basic HTML & website design continueddesign continued

1. 1. Website DesignWebsite Design

2. 2. Preparation before creating webpagesPreparation before creating webpages

3. 3. What is HTMLWhat is HTML

4. 4. How to built webpages using HTMLHow to built webpages using HTML

5. 5. Example of webpagesExample of webpages

6. 6. Module of creating website using HTMLModule of creating website using HTML

Website DesignWebsite DesignMary Elges of Pinnacle Decision Systems Mary Elges of Pinnacle Decision Systems

((http://www.pinndec.comhttp://www.pinndec.com) offers the following suggestions:) offers the following suggestions:

--Know your audienceKnow your audience --Clear look and feelClear look and feel - understandable and consisitent look and feel - understandable and consisitent look and feel--Update contentUpdate content - at least quarterly, if not more often, if not update the - at least quarterly, if not more often, if not update the chances are people will not come backchances are people will not come back--Simple navigationSimple navigation - reduce frustration; people have become accustomed to a - reduce frustration; people have become accustomed to a certain style and so you should take advantage of what they are used tocertain style and so you should take advantage of what they are used to--Include graphicsInclude graphics to attract visitor but not too much that will slow download to attract visitor but not too much that will slow download timetime--Make in interactive-Make in interactive- this is attract people eg, newsletters, forums, etc. this is attract people eg, newsletters, forums, etc.--Optimise for search enginesOptimise for search engines - code the website so that search engines are able - code the website so that search engines are able to detect your websiteto detect your website

Preparation before creating Preparation before creating websitewebsite(http://(http://www.htmlgoodies.com/introduction/intro/www.htmlgoodies.com/introduction/intro/

Why Create A Website?Why Create A Website?Why Create A Website? Why Create A Website?

Where Do I Put My Website?Where Do I Put My Website?Where Do I Put My Website? Where Do I Put My Website?

The Importance of DesignThe Importance of DesignThe Importance of Design The Importance of Design

Layout, Color & SoundLayout, Color & SoundLayout, Color & Sound Layout, Color & Sound

Web Site Content, What to IncludeWeb Site Content, What to IncludeWeb Site Content, What to Include Web Site Content, What to Include

Web Site Content - StyleWeb Site Content - StyleWeb Site Content - Style Web Site Content - Style

Web Site FunctionalityWeb Site FunctionalityWeb Site Functionality Web Site Functionality

Web Site MaintainabilityWeb Site MaintainabilityWeb Site Maintainability Web Site Maintainability

Preparation before creating Preparation before creating webpagewebpage

http://www.webstyleguide.com/index.html?/contents.html

What is HTML ?What is HTML ?HTMLHTML, short for , short for Hypertext Markup LanguageHypertext Markup Language, is the , is the

predominant markup language for web pages. It provides a predominant markup language for web pages. It provides a means to describe the structure of text-based information in means to describe the structure of text-based information in a document — by denoting certain text as a document — by denoting certain text as headings, headings, paragraphs, lists, and so onparagraphs, lists, and so on — and to supplement that text — and to supplement that text with with interactive formsinteractive forms, embedded , embedded imagesimages, and other objects. , and other objects.

HTML is written in the HTML is written in the form of labelsform of labels (known as tags), (known as tags), surrounded by angle bracketssurrounded by angle brackets. HTML can also describe, to . HTML can also describe, to some degree, the appearance and semantics of a document, some degree, the appearance and semantics of a document, and can include embedded scripting language code which and can include embedded scripting language code which can affect the behavior of can affect the behavior of web browsersweb browsers and other HTML and other HTML processors.processors.

More about history of html http://www.w3.org/People/Raggett/book4/ch02.html

Cont…..what is htmlCont…..what is html

In practical terms, HTML is a collection of platform-In practical terms, HTML is a collection of platform-independent styles (indicated by markup tags) that independent styles (indicated by markup tags) that define the various components of a World Wide define the various components of a World Wide Web document. HTML was Web document. HTML was invented by Tim invented by Tim Berners-LeeBerners-Lee while at CERN, the European while at CERN, the European Laboratory for Particle Physics in Geneva.Laboratory for Particle Physics in Geneva.

HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., Emacs or vi on UNIX machines; SimpleText on a Macintosh; Notepad on a Windows machine).

Today, HTML is a Document Type Declaration (DTD) of SGML.  That's why you see html docs starting with something like...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

HTML HTML descriptiondescription

1. The 1. The WWWWWW system uses marked-up text to system uses marked-up text to represent a hypertext document for transmision represent a hypertext document for transmision over the networkover the network

2. 2. Default textDefault text How text is interpreted when uninfluenced by How text is interpreted when uninfluenced by

tags tags 3. 3. The tagsThe tags

A list of the tags used in HTML with their A list of the tags used in HTML with their significance.- significance.-

HTML HTML Tags(http://www.w3.org/History/19921103-hypertext/hypertext/WWWTags(http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html)/MarkUp/Tags.html)

4. 4. EntitiesEntities Special characters are represented by SGML Special characters are represented by SGML

entities entities

Cont…..Cont…..

5. 5. DTDDTD The SGML document type definition for HTML. The SGML document type definition for HTML.

The following do not form part of the specifciation. The following do not form part of the specifciation. 6. Example 6. Example

A file containing a variety of tags used for test A file containing a variety of tags used for test purposes. See also finding examples on the web . purposes. See also finding examples on the web .

7. Future directions 7. Future directions Changes suggested for HTML improvements Changes suggested for HTML improvements

8. Constraints 8. Constraints Design constraints for HTML which might explain Design constraints for HTML which might explain

some of its properties. some of its properties.

What is the best way of What is the best way of going about learning going about learning

HTML?HTML?Reading helpsReading helps, and so does , and so does practical experiencepractical experience; we ; we recommend a combination of both. You should start recommend a combination of both. You should start by finishing off the rest of this page--it gives you a by finishing off the rest of this page--it gives you a manageable-sized portion of answers to questions manageable-sized portion of answers to questions you may have. You'll undoubtedly have more you may have. You'll undoubtedly have more complicated questions as you learn more. One the complicated questions as you learn more. One the best ways to learn HTML is to best ways to learn HTML is to see how other people see how other people have donehave done it! Using your favorite browser, find your it! Using your favorite browser, find your favorite page. Then look for the "Source" or favorite page. Then look for the "Source" or "Document Source" command under the "View" "Document Source" command under the "View" menu. This will show you a window with all of the menu. This will show you a window with all of the HTML used to create that page. Look it over; more HTML used to create that page. Look it over; more times than not, you'll be surprised at the relatively times than not, you'll be surprised at the relatively few commands it took to put together what seemed few commands it took to put together what seemed at first like a complicated page!at first like a complicated page!

How to built webpages using HTMLHow to built webpages using HTML

How to built web How to built web pagespages

1. Buka Notepad1. Buka Notepad

<HTML> - Ini tag pembuka<HTML> - Ini tag pembuka

</HTML> - ini tag penutup</HTML> - ini tag penutup

Yg memberi arahan kepada browser.Yg memberi arahan kepada browser.• Semua perkara akan ditulis di antara tag tersebutSemua perkara akan ditulis di antara tag tersebut

2. Tag kepala / HEAD2. Tag kepala / HEAD

<HTML><HTML>

<HEAD><HEAD>

</HEAD></HEAD>

</HTML></HTML>

3. Tag TITLE3. Tag TITLE

<HTML><HTML>

<HEAD><HEAD>

<TITLE></TITLE><TITLE></TITLE>

</HEAD></HEAD>

</HTML></HTML>

4. Isi kandungan akan berada dalam Tag BODY4. Isi kandungan akan berada dalam Tag BODY

<HTML><HTML>

<HEAD><HEAD>

<TITLE></TITLE><TITLE></TITLE>

</HEAD></HEAD>

<BODY><BODY>

</BODY></BODY>

</HTML></HTML>

5. Apabila telah ada asas, berikan tajuk pada web anda5. Apabila telah ada asas, berikan tajuk pada web anda

<HTML><HTML>

<HEAD><HEAD>

<TITLE>Selamat Datang ke Laman Kaki Kucing…..</TITLE><TITLE>Selamat Datang ke Laman Kaki Kucing…..</TITLE>

</HEAD></HEAD>

<BODY><BODY>

</BODY></BODY>

</HTML></HTML>

6. Menyimpan fail6. Menyimpan faila.a. Simpan sebagai dokumen HTMLSimpan sebagai dokumen HTMLb.b. Save as type…….ALL filesSave as type…….ALL files

Ok, now you have a frame of webpages. Ok, now you have a frame of webpages. Your task now is fulfill the webpages Your task now is fulfill the webpages with anything input you want.with anything input you want.

For further info on creating webpages step by step, click For further info on creating webpages step by step, click here….here….

http://www.w3schools.com/html/http://www.w3schools.com/html/html_intro.asphtml_intro.asp

Problems with HTML:Problems with HTML:

1. Syntax is not XML-compliant, so 1. Syntax is not XML-compliant, so HTML HTML won't work with new generation of Web won't work with new generation of Web toolstools

2. HTML has 2. HTML has many complex tagsmany complex tags - don't want - don't want to implement all of them on portable to implement all of them on portable computing devices, cars, kiosks, ... computing devices, cars, kiosks, ...

3. HTML 3. HTML needs more specialized tags for needs more specialized tags for specific devicesspecific devices, like televisions , like televisions

4. Want to improve the Web's incredibly 4. Want to improve the Web's incredibly boring forms boring forms

AlternativesAlternatives1.1. What do I use to write HTML? Is there a specific piece of What do I use to write HTML? Is there a specific piece of

software?software?The easiest way is to use a WYSIWYG (what you see is what you The easiest way is to use a WYSIWYG (what you see is what you get) Web page creation program, which operates much like a get) Web page creation program, which operates much like a word processing package and (with a bit of your help) not only word processing package and (with a bit of your help) not only writes your HTML for you, but also helps you put together your writes your HTML for you, but also helps you put together your page from start to finish. These programs are especially useful page from start to finish. These programs are especially useful for those who don't have the time or the inclination to learn all for those who don't have the time or the inclination to learn all the nuts and bolts of HTML, but you should at least have a the nuts and bolts of HTML, but you should at least have a cursory knowledge of HTML before using them. cursory knowledge of HTML before using them.

2.2. Example:Example: - Freewebs- Freewebs - slideshare- slideshare - my space- my space - WAYN- WAYN - blogger- blogger

ReferencesReferences1.Introduction to webpages, retrive on 18 August 2007 from, 1.Introduction to webpages, retrive on 18 August 2007 from,

http://www.webdeveloper.com/html/beginners_html.htmlhttp://www.webdeveloper.com/html/beginners_html.html

2. 2. (http://www.htmlgoodies.com/introduction/intro/, (http://www.htmlgoodies.com/introduction/intro/, retrieve on 13 September 2007retrieve on 13 September 2007

3. 3. http://www.w3.org/History/19921103-hypertext/hypehttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.htmlrtext/WWW/MarkUp/Tags.html

4.4.http://webdesign.about.com/od/htmlxhtmltutorials/p/http://webdesign.about.com/od/htmlxhtmltutorials/p/learnhtml.htmlearnhtml.htm