1 / 66

Web Page Development

Web Page Development. EDC 601 Instructional Technologies. HTML HyperText Markup Language. EDC 601 Instructional Technologies. How HTML Works…. EDC 601 Instructional Technologies. HTML is a markup language, NOT a programming language.

gaetan
Download Presentation

Web Page Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Development

  2. EDC 601Instructional Technologies HTML HyperText Markup Language

  3. EDC 601Instructional Technologies How HTML Works…

  4. EDC 601Instructional Technologies HTML is a markup language, NOT a programming language. That is, it does not contain all three of the primary constructs of programming languages:

  5. EDC 601Instructional Technologies Sequence Selection Repetition Programming Constructs

  6. EDC 601Instructional Technologies HTML Fundamentals

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

  8. EDC 601Instructional Technologies Markup languages use “tags” to indicate the beginning and end, and in HTML they look like this: <tag> . . . </tag> or <tag> . . . </tag> Note: Not all tags contain a closing tag. Those that do, are called "containers".

  9. EDC 601Instructional Technologies <html> </html> <head> . . . </head> <head> <title>This is a title</title> </head> <body> . . . </body> <body> This is part of the body </body>

  10. EDC 601Instructional Technologies There are several ways to create an HTML file. <BASE HREF="http://www.buffalost <!doctype html public "-//w3c//dtd ht <html> <head> <meta http-equiv="Content-Type" <meta name="GENERATOR" cont <title>CIS 435 Programming for </head> <body bgcolor="#FFFFFF" backgrou &nbsp; <br>&nbsp; <table COLS=2 WIDTH="100%" >

  11. EDC 601Instructional Technologies Editors • Text • Notepad or Wordpad • vi, pico, or emacs (Unix editors) • any “text” editor • even Word We will begin by using Notepad

  12. EDC 601Instructional Technologies Editors • HTML (wysiwyg) • Netscape Composer • Microsoft FrontPage • Macromedia Dreamweaver

  13. EDC 601Instructional Technologies Not required No closing tag! Some format tags: Header tags <Hi> ... </Hi> where: i=1,2,3,4,5,6 Paragraph tags <p> ... </p> Line Break tag <br> List tags <ul>...</ul> or <ol>...</ol> Although the paragraph and line break tags appear to be the same, <p> produces a cr-lf-lf whereas <br> produces a cr-lf. & the <li> … </li>

  14. EDC 601Instructional Technologies Some format tags: Although lists without <li> tags can be used to indent, other tags designed specifically for indentation are the: Blockquote tags<blockquote> ... </blockquote> However, these tags indent from both the left and right margins, and leave a blank line before and after the block quotation.

  15. EDC 601Instructional Technologies More format tags: Bold tags <b> ... </b> Italics tags <i> ... </i> Underscore tags <u> ... </u> Center tags <center>...</center>

  16. EDC 601Instructional Technologies Some “fluff” tags: Horizontal Line tag <hr> Anchor tags<a href="URL"> LINK DESCRIPTION</a> Image tags<img src="IMAGE FILENAME "> 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. Preformatted tags <pre> … </pre> Comment tags <!-- … -->

  17. EDC 601Instructional Technologies Without these, Web pages load slower. Therefore, you will ALWAYS specify the height and width of your graphics! Note: As we will see, these and other tags can have additional parameters or attributes. e.g. <img SRC="miata.jpg" height=330 width=445> <hr width="70%"> <P ALIGN="JUSTIFY">some text</P> <a href="memos.html“ TARGET="body"> Announcements</a>

  18. EDC 601Instructional 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

  19. EDC 601Instructional Technologies Editors • HTML (wysiwyg) • Netscape Composer • Microsoft FrontPage • Macromedia Dreamweaver

  20. EDC 601Instructional Technologies Tables

  21. EDC 601Instructional Technologies Converters • Microsoft Office • Word • Excel • Access • PowerPoint

  22. EDC 601Instructional Technologies www.doc www.htm You can use Office97/98’s converters to "Save as HTML"and create Web "documents". Word:

  23. EDC 601Instructional Technologies NOTE: Word can also be used as a wanna- HTML editor!!!

  24. EDC 601Instructional Technologies xxx.xls C:\My Documents\MyHTML.htm You can use Office97/98’s converters to "Save as HTML"and create Web "documents". Excel:

  25. EDC 601Instructional Technologies

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

  27. EDC 601Instructional Technologies

  28. EDC 601Instructional Technologies One Web page for each printed page of the report.

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

  30. EDC 601Instructional Technologies 3*49+15=162

  31. EDC 601Instructional Technologies www.doc www.mht www.doc www.htm + www_files Folder You can use Office2000/XP/2003’s converters to "Save as Web page"and create Web "documents". Word:

  32. EDC 601Instructional Technologies

  33. EDC 601Instructional Technologies

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

  35. EDC 601Instructional 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.”

  36. EDC 601Instructional Technologies

  37. EDC 601Instructional Technologies xxx.xls xxx.mht xxx.xls xxx.htm + xxx_files Folder You can use Office2000/XP/2003’s converters to "Save as Web page"and create Web "documents". Excel:

  38. EDC 601Instructional Technologies

  39. EDC 601Instructional Technologies

  40. EDC 601Instructional Technologies

  41. EDC 601Instructional Technologies

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

  43. EDC 601Instructional Technologies

  44. EDC 601Instructional Technologies

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

  46. EDC 601Instructional Technologies yyy.mdb 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! Access: The default file type for Office2007 is now .accdb, but you can still work with .mdb files.

  47. EDC 601Instructional Technologies zzz.ppt zzz.mht zzz.ppt zzz.htm + zzz_files Folder You can use Office2000/XP/2003’s converters to "Save as Web page"and create Web "documents". PowerPoint:

  48. EDC 601Instructional Technologies You have several Web publishing options.

  49. EDC 601Instructional 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.

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

More Related