Presentation is loading. Please wait.

Presentation is loading. Please wait.

© Anthony J. Nowakowski, Ph.D.. Web Page Development.

Similar presentations


Presentation on theme: "© Anthony J. Nowakowski, Ph.D.. Web Page Development."— Presentation transcript:

1

2 © Anthony J. Nowakowski, Ph.D.. Web Page Development

3 EDC 601 Instructional Technologies HTML HyperText Markup Language

4 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies How HTML Works…

5 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies That is, it does not contain all three of the primary constructs of programming languages: HTML is a markup language, NOT a programming language.

6 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Programming Constructs Sequence Repetition Selection

7 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies HTML Fundamentals

8 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies 1. "8.3" notation 2. alphanumeric characters 3. lowercase 4. no embedded spaces Before we begin, YOU WILL name all your files using the following: and place them all in the same subdirectory to be called c:\601

9 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Markup languages use “tags” to indicate the beginning and end, and in HTML they look like this:... or... Note: Not all tags contain a closing tag. Those that do, are called "containers". Note: Not all tags contain a closing tag. Those that do, are called "containers".

10 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies This is a title This is part of the body..

11 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies There are several ways to create an HTML file. <BASE HREF="http://www.buffalost <!doctype html public "-//w3c//dtd ht <meta http-equiv="Content-Type" <meta name="GENERATOR" cont CIS 435 Programming for <body bgcolor="#FFFFFF" backgrou

12 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Text Notepad or Wordpad vi, pico, or emacs (Unix editors) any “text” editor even Word Editors We will begin by using Notepad We will begin by using Notepad

13 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies HTML (wysiwyg) Netscape Composer Microsoft FrontPage Macromedia Dreamweaver Editors

14 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Header tags... where: i=1,2,3,4,5,6 Paragraph tags... Not required Some format tags : Line Break tag Although the paragraph and line break tags appear to be the same, produces a cr-lf-lf whereas produces a cr-lf. Although the paragraph and line break tags appear to be the same, produces a cr-lf-lf whereas produces a cr-lf. List tags... or... No closing tag! & the …

15 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Blockquote tags... Although lists without tags can be used to indent, other tags designed specifically for indentation are the: However, these tags indent from both the left and right margins, and leave a blank line before and after the block quotation. Some format tags :

16 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Bold tags... Italics tags... Underscore tags... Center tags... More format tags :

17 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Horizontal Line tag Anchor tags LINK DESCRIPTION Image tags Preformatted tags … Comment tags Presently, only.GIF and.JPG graphics files are supported. There is a new format, PNG that is gaining popularity, but it does not work on older browsers. Presently, only.GIF and.JPG graphics files are supported. There is a new format, PNG that is gaining popularity, but it does not work on older browsers. Some “fluff” tags :

18 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional TechnologiesNote: As we will see, these and other tags can have additional parameters or attributes. e.g. Without these, Web pages load slower. Therefore, you will ALWAYS specify the height and width of your graphics! some text Announcements

19 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies On-line HTML tutorial sites: www.w3schools.com/html/default.asp www.cwru.edu/help/introHTML/toc.html www.cwru.edu/help/interHTML/toc.html www.willcam.com/cmat/html/crossref.html

20 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies HTML (wysiwyg) Netscape Composer Microsoft FrontPage Macromedia Dreamweaver Editors

21 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Tables

22 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Microsoft Office Word Excel Access PowerPoint Converters

23 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Word: You can use Office97/98’s converters to "Save as HTML" and create Web "documents". www.doc www.htm

24 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies NOTE: Word can also be used as a wanna- HTML editor!!! NOTE: Word can also be used as a wanna- HTML editor!!!

25 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional TechnologiesExcel: xxx.xls C:\My Documents\MyHTML.htm You can use Office97/98’s converters to "Save as HTML" and create Web "documents".

26 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

27 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Access: yyy.mdb Web page for each table, query, form, and report selected Web page for each table, query, form, and report selected You can use Office97/98’s converters to “Export" and create Web "documents".

28 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

29 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies One Web page for each printed page of the report.

30 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies PowerPoint: zzz.ppt subdirectory: zzz containing: 3x +15 files subdirectory: zzz containing: 3x +15 files You can use Office97/98’s converters to "Save as HTML" and create Web "documents". There is a seven step wizard to guide you through the process of customizing and creating these files.

31 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies 3 * 49 + 15 = 162

32 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Word: www.doc www.mht You can use Office2000/XP/2003’s converters to "Save as Web page" and create Web "documents". www.doc www.htm + www_files Folder

33 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

34 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

35 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Using Office2007 to convert to a Web page is slightly different and has three Save As Web page options. Word: www.doc www.mht www.doc www.htm + www_files Folder The default file type for Office2007 is now.docx, but you can still work with.doc files.

36 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies According to Microsoft, “ This feature is only recommended for experienced Web authors who are concerned about the tags that appear in their HTML files. ”

37 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

38 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Excel: xxx.xls xxx.mht You can use Office2000/XP/2003’s converters to "Save as Web page" and create Web "documents". xxx.xls xxx.htm + xxx_files Folder

39 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

40 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

41 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

42 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

43 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Using Office2007 to convert to a Web page has the same two Save As Web page options. Excel: xxx.xls xxx.htm + xxx_files Folder xxx.xls xxx.mht The default file type for Office2007 is now.xlsx, but you can still work with.xls files.

44 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

45 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

46 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Access: yyy.mdb Web page for each table, query, form, and report selected Web page for each table, query, form, and report selected You can use Office2000/XP/2003’s converters to “Export" and create Web "documents". The Web pages are identical to those already shown for Access 97.

47 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Access: Office2007 does NOT allow you to create Web “documents ”. You can “publish” them to a Microsoft SharePoint Services site, which Buffalo State does NOT have! The default file type for Office2007 is now.accdb, but you can still work with.mdb files. yyy.mdb

48 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies You can use Office2000/XP/2003’s converters to "Save as Web page" and create Web "documents". PowerPoint: zzz.ppt zzz.mht zzz.ppt zzz.htm + zzz_files Folder

49 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies You have several Web publishing options.

50 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies TOC Note: the original file zzz.ppt is 7,016 KB, zzz.mht is a single 12,446 KB file, and zzz.htm is a small file 3 KB that points to the remaining files in the zzz_files folder, which has 619 files and is 9,030 KB.

51 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Using Office2007 to convert to a Web page has the same two Save As Web page options. The default file type for Office2007 is now.pptx, but you can still work with.ppt files. PowerPoint: zzz.ppt zzz.mht zzz.ppt zzz.htm + zzz_files Folder

52 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies You have several Web publishing options.

53 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies TOC Note: the size of the original.ppt file,.mht file, and.htm file and folder is comparible to the ones created by Office 2000/XP/2003.

54 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Additional HTML Features

55 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Forms

56 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies text box text window check box radio button action button menu others... Form Objects

57 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Frames

58 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies 1. Design frame layout 2. Determine frame attributes 3. Load frame contents Frames

59 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Where can we go from here?

60 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Programming for the Web

61 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Why do we need programming for the Web??? EDC 601 Survey

62 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Server-side vs. Client-side Web Programming

63 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Web “Languages” Markup HTML XML DHTML CSS Scripting JavaScript VBScript Programming Java perl Visual Basic C/C++

64 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies Consider the following example, which I have used as an assignment in my Programming for the Internet Environment course: Assignment-9 Assignment-9

65 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

66 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies

67 © Anthony J. Nowakowski, Ph.D.. EDC 601 Instructional Technologies


Download ppt "© Anthony J. Nowakowski, Ph.D.. Web Page Development."

Similar presentations


Ads by Google