1. Web design for fun Presented to the Rochester Computer Society 6/10/2003 By Michael Necheles EDS

2. Agenda Brief overview of the Internet HTML Structure Development Tools HTML Tags How to publish Q & A

3. Brief Overview of the Internet Internet consists of network of networks Connected by multiple media types In 1989, Timothy Berner-Lee and other researches at CERN nuclear research facility laid foundation of WWW. Hypertext No longer limited to text. Images, sound and video

4. Brief Overview of the Internet Web page stored on a web server Web pages viewed by web browser. Browsers Text based Graphical HTML – language of the www –Developed from SGML –Describes format of page by use of tags –Browser interprets tag.

5. HTML Structure Follows set of rules (Syntax) Standards written by World Wide Web Consortium. –HTML 1.0 1989-1994 – First public version of html –HTML 2.0 1995 – first version supported by all browsers –HTML 3.0 1997 – added support for tables and other options –HTML 4.01 1999 – support for style sheets and layout. Gave developers more style control –XHTML 1.0 2001 – reformulation of HTML 4.01 into XML

6. HTML Structure Extensions, XML and the future –Competition –Netscape and Internet Explorer introduce extensions. Later adopted by W3C –XML being introduced for document content.

7. Development Tools HTML files are TEXT documents. HTML converter –Takes document and converts to HTML –Save As feature in MS Word HTML editor –Creates HTML by inserting tags for you. –Examples Front Page, CoffeeCup, NoteTab

8. Creating HTML Documents HTML file made up of content and tags. –Content is what the users see on the page –Tags are HTML codes that control the appearance of the document content General HTML Syntax –Two sided tags document content –One sided tag

9. Format of an HTML document

10. Steps to create a simple document 1.Open notepad 2.Type the following : My first web page This is the dawning of the age of Aquarius. 3.Click on file 4.Click on Save As 5.Make sure that “Save As Type” text box is “all file types” 6.In the filename text box, give it a name with a.htm or.html extension (i.e. mywebpage.htm) 7.Click on save (remember the name of the file and where you saved the file) 8.Open up a web browser 9.Click on File 10.Click on Open 11.Locate the file you just saved 12.Click ok You are now looking at the page you created

11. Common HTML tags Creating headings, paragraphs and lists –Heading tags range from H1 to H6. The higher the number, the smaller the font size. – This is to introduce Balloon Art to the world – tag is the paragraph tag. Insert this tag prior to where you want the paragraph to begin. It is a two sided tag. –If you don’t want a paragraph, just a line break, use the tag. This is a one sided tag.

12. Common HTML tags There are three types of lists. Ordered lists, Unordered lists and definition list. Ordered lists are ordered numerically. Unordered lists are bullets. Definition list is a list of terms, each followed by a definition line that is indented slightly to the right. Ordered Lists: item 1 item 2 item 3 Unordered lists can have options: Unordered Lists: bullet 1 bullet 2 bullet 3 Both list types can be nested:

13. Common HTML tags Example: HTML Editors Easy to use Often has GUI HTML Converters produce larger than necessary files are harder to edit manually are simple to use The above snippet will produce the following content HTML Editors –Easy to use –Often has GUI HTML Converters –produce larger than necessary files –are harder to edit manually –are simple to use

14. Common HTML tags Definition List: Example: INTERNET a network of networks WWW world wide wait. FTP file transfer protocol. Used to transfer files on the internet The above snippet produces the following content INTERNET a network of networks WWW World wide wait FTP file transfer protocol. Used to transfer files on the internet

15. Common HTML tags Character formatting tags: - enclosed text is bold - enclosed text is italic - enclosed text is underlined - typewriter text (monospaced) - bigger text - smaller text - subscript - superscript These tags are often used together. Example: The rain in Spain stays mainly on the plane. Renders: The rain in Spain stays mainly on the plane.

16. Common HTML tags Horizontal Line - used to break up a page by inserting a horizontal line. Single sided tag. Syntax: e.g Inserting an image. Single sided tag. Syntax: note that “file” requires the path if image is not located in same directory as html file.

17. Common HTML tags Links Two types of links, interpage and intrapage. Interpage link allows you to create hypertext links between web pages Intrapage links allow you to create hypertext links between elements within a single web page. Examples of this are when are viewing a large web page and see links that say “return to top”. When you click on those links, the page automatically scrolls back to the top of the page.

18. Common HTML tags Intrapage links are made up of two parts, the link and the anchor. To create an anchor at the top of the page you would use something like the following example: Top In the above snippet, we have created an anchor called topOfPage. The document text that will be displayed will be Top. At various points of the document, you will want to insert links pointing to the top of the page. Return to top

19. Common HTML tags Interpage links consist of the anchor tag click here to go to yahoo http://www.yahoo.com go to my second page Our History

20. Common HTML tags Tables –Tables consist of at least three tags surrounds each table Surrounds each row Multipurpose – used for formatting layout as well as display.

21. Common HTML tags Table Example: cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8 cell 9

22. Creating HTML Documents Remember that different browsers display HTML differently. Tags are not case sensitive Browsers ignore whitespace

23. Creating HTML Web Site Step 1 – PLAN Step 2 – PLAN Step 3 – PLAN Consider the layout you desire, –Linear –Augmented linear –Hierarchical –Mixed

24. Creating HTML Web Site Consider that color and images are important Do not put large images on site Too many moving elements are distracting Make sure that background color is in contrast to font color Make sure that a constant theme is carried throughout site Create the page a piece at a time Test with different browsers Make sure you spell check!!

25. Where to Publish? Most ISP’s give you disk space as part of your monthly fee. Numerous free services where you can publish Purchase your own Domain name and have it hosted Rent space on public sites and use their domain name, but have your own area

26. Notable Links http://www.w3.org - The World Wide Web Consortium responsible for the development of common protocols for the evolution of the World Wide Web. Excellent place to learn about the latest issues regarding HTML development.http://www.w3.org http://developer.netscape.com - Different browsers will support various extensions to the Recommendations set by the W3C. You can read more about Netscape's support of HTML and other web standardshttp://developer.netscape.com http://msdn.microsoft.com/workshop - Microsoft provides information about the Internet Explorer browserhttp://msdn.microsoft.com/workshop http://www.tucows.com – downloadable software such as shareware and demo versions of HTML editorshttp://www.tucows.com http://www.peda.com/smaller/Welcome.html - a program for reducing the file size of animated GIFs, without introducing any visible changes whatsoever.http://www.peda.com/smaller/Welcome.html http://www.boutell.com/mapedit/ - a program that assists in creating image maps.http://www.boutell.com/mapedit/ http://www.fookes.com/notetab/index.html - notetab light is a free HTML editorhttp://www.fookes.com/notetab/index.html http://www.geocities.com – Place where you can publish your website for freehttp://www.geocities.com

27. Questions? THANKS FOR LISTENING